/* ── CMP Public Styles ──────────────────────────────────────────────────── */

:root {
	/* Legacy card-grid vars */
	--cmp-accent:       #7c6af7;
	--cmp-accent-dark:  #5b4de0;
	--cmp-surface:      #ffffff;
	--cmp-bg:           #f8f7ff;
	--cmp-border:       #e0defe;
	--cmp-text:         #1a1833;
	--cmp-text-muted:   #6b6b8a;
	--cmp-radius:       10px;
	--cmp-shadow:       0 2px 12px rgba(124,106,247,.10);
	--cmp-transition:   .2s ease;

	--cmp-white-muted:  rgba(255,255,255,.55);
	--cmp-chip-bg:      rgba(255,255,255,.0);
	--cmp-chip-border:  rgba(255,255,255,.35);
	--cmp-row-border:   rgba(255,255,255,.1);
	--cmp-play-color:   rgba(255,255,255,.75);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANDS SHORTCODE  [cmp_bands]
═══════════════════════════════════════════════════════════════════════════ */

.cmp-bands-section {
	width: 100%;
	overflow: hidden;
}

/* ── Header "Listen to all" ── */
.cmp-bands-header {
	margin: 0 auto;
	max-width: 1280px;
	width: 90%;
}

.cmp-listen-all-link {
	display: inline-block;
	color: var(--e-global-color-secondary);
	text-decoration: underline !important;
	text-underline-offset: 4px;
	font-family: "GlacialIndifference", Sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1em;
}

.cmp-listen-all-link:hover {
	color: var(--e-global-color-text);
	text-decoration: none !important;
}

.cmp-total-tracks-label {
	display: block;
	color: var(--e-global-color-text);
    font-family: "GlacialIndifference", Sans-serif;
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.01em;
    padding: 0.5em 0 0;
}

/* ── Slider wrapper ── */
.cmp-bands-slider {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 12px;
	min-height: 70vh;
	position: relative;
}

/* ── Swiper container (reemplaza cmp-slider-viewport) ── */
.cmp-bands-swiper {
	flex: 1;
	overflow: hidden;
	padding: 1.5em 0;
}

.cmp-bands-swiper .swiper-wrapper {
	align-items: center;
	height: auto !important; /* Evita que Swiper calcule un alto fijo heredado del contenedor */
}

.cmp-bands-swiper .swiper-slide {
	height: auto !important; /* Los slides deben tomar el alto de su contenido, no un valor fijo */
}

/* Dejar que Swiper controle el ancho de los slides */
.cmp-bands-swiper .cmp-band-item {
	flex: none;
	width: 100%;
}

.cmp-slider-viewport {
	flex: 1;
	overflow: hidden;
	padding: 1.5em 0;
}

.cmp-slider-track {
	display: flex;
	align-items: center;   /* bottom-aligned: círculos crecen hacia arriba */
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.cmp-slider-track.no-transition {
	transition: none !important;
}

/* ── Slider arrow buttons ── */
.cmp-slider-btn {
	flex-shrink: 0 !important;
	color: var(--e-global-color-primary) !important;
	width: 44px!important;
	height: 44px!important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important; 
	cursor: pointer !important;
	transition: border-color .2s, color .2s, opacity .2s !important;
	padding: 0!important;
	background: var(--e-global-color-secondary) !important;
}

.cmp-slider-btn:hover:not(:disabled) {
	color: var(--e-global-color-secondary)!important;
	background: var(--e-global-color-primary) !important;
}

.cmp-slider-btn:disabled {
	opacity: .25;
	cursor: default;
	color: var(--e-global-color-primary) !important;
	background: var(--e-global-color-secondary) !important;
}
.cmp-slider-btn.cmp-slider-next{
	position: absolute;
	top: 50%;
	right: 1vw;
	transform: translate(0, -50%);
	z-index: 1;
}
.cmp-slider-btn.cmp-slider-prev{
	position: absolute;
	top: 50%;
	left: 1vw;
	transform: translate(0, -50%);
	z-index: 1;
}

/* ── Individual band item ── */
.cmp-band-item {
	flex: 0 0 calc(90% / 3);
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	text-align: center;
	user-select: none;
	padding: 0 16px;
	box-sizing: border-box;
	opacity: .45;
	transition: all .4s ease;
}

.cmp-band-item.is-center {
	opacity: 1;
}

/* ── Circle ── */
.cmp-band-circle-wrap {
	position: relative;
}

.cmp-band-circle {
	width: clamp( 150px, 20vw, 300px );
	height: clamp( 150px, 20vw, 300px );
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	transition: width .4s ease, height .4s ease, transform .3s ease;
}

/* El item central es notablemente más grande */
.cmp-band-item.is-center .cmp-band-circle {
	width: clamp( 400px, 40vw, 500px );
	height: clamp( 400px, 40vw, 500px );
}

.cmp-band-item.is-center:hover .cmp-band-circle,
.cmp-band-item.is-active .cmp-band-circle {
	transform: scale(1.05);
}
.cmp-band-item.is-center:hover .cmp-band-photo,
.cmp-band-item.is-active .cmp-band-photo{
	filter: grayscale(100%)!important;
}

.cmp-band-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/*filter: grayscale(30%);*/
	transition: filter .3s ease;
}

.cmp-band-item.is-active .cmp-band-photo {
	filter: grayscale(0%);
}

.cmp-band-photo--placeholder {
	background: rgba(255,255,255,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cmp-white-muted);
}

/* ── Overlay con descripción ── */
.cmp-band-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(20,20,20,.88);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10%;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.cmp-band-item.is-active .cmp-band-overlay {
	opacity: 1;
	pointer-events: all;
}

.cmp-band-overlay-desc {
	margin: 0 0 1.5em;
	color: var(--e-global-color-text);
    font-family: "GlacialIndifference", Sans-serif;
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.01em;
}

.cmp-band-overlay-link {
	white-space: nowrap;
	display: inline-block;
    color: var(--e-global-color-secondary);
    text-decoration: underline !important;
    text-underline-offset: 4px;
    font-family: "GlacialIndifference", Sans-serif;
    font-size: clamp(20px, 2.7vw, 30px);
    font-weight: 900;
    line-height: 1em;
}

.cmp-band-overlay-link:hover {
	color: var(--e-global-color-text);
	text-decoration: none !important;
}

/* ── Band name / count below circle ── */
.cmp-band-name {
	margin: 14px 0 4px;
	color: var(--e-global-color-text);
    font-family: "GlacialIndifference", Sans-serif;
    font-size: clamp(18px, 1.5vw, 25px);
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.01em;
}

.cmp-band-track-count {
	color: var(--e-global-color-text);
    font-family: "GlacialIndifference", Sans-serif;
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOG SHORTCODE  [cmp_catalog]
═══════════════════════════════════════════════════════════════════════════ */

.cmp-catalog-wrap {
	width: 100%;
}

/* ── Top bar (sin banda seleccionada) ── */
.cmp-catalog-topbar {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
}

.cmp-browse-artists-btn {
	background: none;
	border: 1px solid var(--cmp-chip-border);
	color: var(--e-global-color-text);
	border-radius: 20px;
	padding: 8px 18px;
	font-size: .875rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: border-color .2s, color .2s;
}

.cmp-browse-artists-btn:hover {
	border-color: var(--e-global-color-secondary);
	color: var(--e-global-color-secondary);
}

/* ── Band header bar (banda seleccionada) ── */
.cmp-band-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--e-global-color-secondary);
	border-radius: 50px;
	padding: 14px 28px;
	margin-bottom: 28px;
	gap: 16px;
	flex-wrap: wrap;
}

.cmp-band-bar-back {
	text-decoration: underline!important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 0.01em;
}

.cmp-band-bar-back:hover {
	text-decoration: none!important;
}

.cmp-band-bar-info {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
	justify-content: center;
}

.cmp-band-bar-thumb {
	width: 52px !important;
	height: 52px!important;
	border-radius: 50%!important;
	object-fit: cover!important;
}

.cmp-band-bar-name {
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 0.01em;
}

.cmp-band-bar-count {
	display: block;
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 0.01em;
}

.cmp-band-bar-browse {
	background: none!important;
	border: none!important;
	font-family: "GlacialIndifference", Sans-serif !important;
	font-size: clamp(16px, 1.2vw, 20px) !important;
	font-weight: 500 !important;
	line-height: 1.2em !important;
	letter-spacing: 0.01em !important;
	cursor: pointer!important;
	text-decoration: underline!important;
	white-space: nowrap!important;
}

.cmp-band-bar-browse:hover {
	text-decoration: none!important;
	color: var(--e-global-color-primary)!important;
}

/* ── Layout: sidebar + main ── */
.cmp-catalog-layout {
	display: grid;
	grid-template-columns: 350px 1fr;
	gap: 1.5em;
	align-items: start;
}

/* ── Sidebar de filtros ── */
.cmp-catalog-sidebar {
	background: var(--e-global-color-text);
	border-radius: 1.5em;
	padding: 1.5em 1em;
}

.cmp-sidebar-title {
	display: block;
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 0.01em;
	padding: 0.5em 0 0;
}

.cmp-filter-section {
	margin-bottom: 16px;
}

.cmp-filter-section-label {
	display: block;
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 0.01em;
	padding: 0;
	margin: 0 0 0.25em;
}

.cmp-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cmp-chip {
	background: transparent!important;
	border: 1px solid var(--e-global-color-primary)!important;
	color: var(--e-global-color-primary)!important;
	border-radius: 0.5em!important;
	padding: 0.25em 0.5em!important;
	font-size: clamp(10px, 1vw, 14px)!important;
	cursor: pointer!important;
	transition: background .15s, border-color .15s, color .15s!important;
	line-height: 1em!important;
	font-family: "GlacialIndifference", Sans-serif!important;
	font-weight: 500!important;
	letter-spacing: 0.01em!important;
}

.cmp-chip:hover {
	background: var(--e-global-color-secondary)!important;
}

.cmp-chip.is-active {
	background: var(--e-global-color-secondary)!important;
}

/* ── Main: tracks ── */
.cmp-catalog-main {
	min-width: 0;
}

/* ── Tracks header row ── */
.cmp-tracks-header {
	display: grid;
	grid-template-columns: 48px 1fr 2fr auto 48px;
	gap: 0;
	padding: 0 8px 10px;
	border-bottom: 1px solid var(--cmp-row-border);
	margin-bottom: 4px;
}

.cmp-tracks-header > div {
	padding-right: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--e-global-color-text);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 0.01em;
}

/* ── Track item wrapper (row + Spotify panel) ── */
.cmp-tracks-list {
	display: flex;
	flex-direction: column;
}

.cmp-track-item {
	display: flex;
	flex-direction: column;
}

/* ── Spotify embed panel ── */
.cmp-spotify-panel {
	background: rgba(0,0,0,.28);
	border-bottom: 1px solid var(--cmp-row-border);
}

.cmp-spotify-panel.is-hidden {
	display: none;
}

.cmp-spotify-inner {
	padding: 4px 56px 12px; /* indent alineado con columna title */
}

/* ── Track rows ── */
.cmp-track-row {
	display: grid;
	grid-template-columns: 48px 1fr 2fr auto 48px;
	gap: 0;
	align-items: center;
	padding: 12px 8px;
	border-bottom: 1px solid var(--cmp-row-border);
	transition: background .15s;
}

.cmp-track-row:hover {
	background: rgba(255,255,255,.04);
}

.cmp-track-row.is-playing .cmp-tr-title-text,
.cmp-track-row.is-paused  .cmp-tr-title-text {
	color: var(--e-global-color-secondary);
}

/* Play button */
.cmp-tr-play {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cmp-play-btn {
	background: none!important;
	border: 1px solid rgba(255,255,255,.3)!important;
	color: var(--cmp-play-color)!important;
	width: 34px!important;
	height: 34px!important;
	border-radius: 50%!important;
	display: flex!important;
	align-items: center!important;
	justify-content: center!important;
	cursor: pointer!important;
	transition: border-color .15s, color .15s!important;
	flex-shrink: 0!important;
	padding: 0!important;
}

.cmp-play-btn:hover {
	border-color: var(--e-global-color-secondary)!important;
	color: var(--e-global-color-secondary)!important;
}

.cmp-track-row.is-playing .cmp-play-btn,
.cmp-track-row.is-paused  .cmp-play-btn {
	border-color: var(--e-global-color-secondary);
	color: var(--e-global-color-secondary);
}

/* Toggle play/pause icon */
.cmp-icon-pause  { display: none; }

.cmp-track-row.is-playing .cmp-icon-play  { display: none; }
.cmp-track-row.is-playing .cmp-icon-pause { display: block; }

/* Artist column */
.cmp-tracks-list .cmp-tr-artist {
	padding-right: 12px!important;
	white-space: nowrap!important;
	overflow: hidden!important;
	text-overflow: ellipsis!important;
	color: var(--e-global-color-text)!important;
	font-family: "GlacialIndifference", Sans-serif !important;
	font-size: clamp(16px, 1.2vw, 20px)!important;
	font-weight: 500 !important;
	line-height: 1.2em!important;
	letter-spacing: 0.01em!important;
}

/* Title column */
.cmp-tr-title {
	overflow: hidden;
}

.cmp-tr-title-text {
	padding-right: 12px!important;
	white-space: nowrap!important;
	overflow: hidden!important;
	text-overflow: ellipsis!important;
	color: var(--e-global-color-text)!important;
	font-family: "GlacialIndifference", Sans-serif !important;
	font-size: clamp(16px, 1.2vw, 20px)!important;
	font-weight: 500 !important;
	line-height: 1.2em!important;
	letter-spacing: 0.01em!important;
}

/* Duration */
.cmp-tr-duration {
	padding-right: 12px!important;
	white-space: nowrap!important;
	overflow: hidden!important;
	text-overflow: ellipsis!important;
	color: var(--e-global-color-text)!important;
	font-family: "GlacialIndifference", Sans-serif !important;
	font-size: clamp(16px, 1.2vw, 20px)!important;
	font-weight: 500 !important;
	line-height: 1.2em!important;
	letter-spacing: 0.01em!important;
}

/* Download button */
.cmp-tr-download {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cmp-download-btn {
	background: none!important;
	border: none!important;
	color: var(--e-global-color-text)!important;
	cursor: pointer!important;
	padding: 6px!important;
	border-radius: 4px!important;
	display: flex!important;
	align-items: center!important;
	transition: color .15s!important;
}

.cmp-download-btn:hover svg{
	fill: var(--e-global-color-secondary)!important;
}

.cmp-download-btn:disabled {
	opacity: .4!important;
	cursor: not-allowed!important;
}

/* ── Load more ── */
.cmp-load-more-wrap {
	display: flex;
	justify-content: center;
	padding: 28px 0;
}

.cmp-load-more-btn {
	background: transparent;
	border: 1px solid rgba(255,255,255,.3);
	color: var(--e-global-color-text);
	border-radius: 6px;
	padding: 10px 32px;
	font-size: .9rem;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.cmp-load-more-btn:hover {
	border-color: var(--e-global-color-secondary);
	color: var(--e-global-color-secondary);
}

.cmp-load-more-btn:disabled {
	opacity: .5;
}

/* ── No results ── */
.cmp-no-results {
	padding: 48px 16px;
	text-align: center;

	color: var(--e-global-color-text) !important;
	font-family: "GlacialIndifference", Sans-serif!important;
	font-size: clamp(18px, 1.5vw, 25px)!important;
	font-weight: 500!important;
	line-height: 1.2em!important;
	letter-spacing: 0.01em!important;
}

/* ── Spinner ── */
.cmp-spinner {
	width: 36px;
	height: 36px;
	margin: 48px auto;
	border: 3px solid rgba(255,255,255,.15);
	border-top-color: var(--e-global-color-secondary);
	border-radius: 50%;
	animation: cmp-spin .7s linear infinite;
}

@keyframes cmp-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL: Browse artists
═══════════════════════════════════════════════════════════════════════════ */

.cmp-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
}

.cmp-modal.is-hidden {
	display: none;
}

body.cmp-modal-open {
	overflow: hidden;
}

.cmp-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(4px);
}

.cmp-modal-box {
	position: relative;
	z-index: 1;
	background: var(--e-global-color-text);
	border: 1px solid var(--e-global-color-text);
	border-radius: 2em;
	width: 100%;
	max-width: 860px;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.cmp-modal-close {
	position: absolute!important;
	top: 16px!important;
	right: 20px!important;
	background: none!important;
	border: none!important;
	color: var(--e-global-color-primary)!important;
	font-family: "GlacialIndifference", Sans-serif!important;
	font-size: clamp(16px, 1.2vw, 20px)!important;
	font-weight: 500!important;
	line-height: 1.2em!important;
	letter-spacing: 0.01em!important;
	cursor: pointer!important;
	z-index: 2!important;
	text-decoration: underline!important;
	padding: 0!important;
}

.cmp-modal-close:hover {
	text-decoration: none!important;
}

.cmp-modal-artists {
	overflow-y: auto;
	padding: 24px;
	padding-top: 48px;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 4px;
}

/* ── Artist item in modal ── */
.cmp-modal-artist {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s;
}

.cmp-modal-artist:hover {
	background: rgba(212,247,62,.12);
}

.cmp-modal-artist.is-active {
	background: var(--e-global-color-secondary);
}

.cmp-modal-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: rgba(255,255,255,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cmp-white-muted);
}

.cmp-modal-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cmp-modal-circle--all {
	background: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
}
.cmp-modal-circle--all svg{
	fill: var(--e-global-color-secondary);
}

.cmp-modal-artist-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cmp-modal-artist-name {
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(14px, 1.1vw, 18px);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cmp-modal-artist-count {
	color: var(--e-global-color-primary);
	font-family: "GlacialIndifference", Sans-serif;
	font-size: clamp(12px, 1vw, 16px);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media ( max-width: 900px ) {
	.cmp-catalog-layout {
		grid-template-columns: 1fr;
	}

	.cmp-catalog-sidebar {
		order: 2;
	}

	.cmp-catalog-main {
		order: 1;
	}
}

/* ── Catalog Layout ──────────────────────────────────────────────────────── */

.cmp-catalog {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ── Filters ─────────────────────────────────────────────────────────────── */

.cmp-filters {
	background: var(--cmp-surface);
	border: 1px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cmp-filters__search-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--cmp-border);
	border-radius: 6px;
	font-size: .95rem;
	outline: none;
	transition: border-color var(--cmp-transition);
	box-sizing: border-box;
}

.cmp-filters__search-input:focus {
	border-color: var(--cmp-accent);
	box-shadow: 0 0 0 3px rgba(124,106,247,.15);
}

.cmp-filters__primary,
.cmp-filters__secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Filter Group */
.cmp-filter-group {
	position: relative;
}

.cmp-filter-group__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--cmp-border);
	border-radius: 20px;
	background: var(--cmp-surface);
	color: var(--cmp-text);
	font-size: .875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--cmp-transition);
	white-space: nowrap;
}

.cmp-filter-group__toggle:hover,
.cmp-filter-group__toggle[aria-expanded="true"] {
	border-color: var(--cmp-accent);
	background: var(--cmp-bg);
	color: var(--cmp-accent);
}

.cmp-filter-group__arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--cmp-transition);
}

.cmp-filter-group__toggle[aria-expanded="true"] .cmp-filter-group__arrow {
	transform: rotate(180deg);
}

.cmp-filter-group__terms {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 100;
	background: var(--cmp-surface);
	border: 1px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	box-shadow: var(--cmp-shadow);
	padding: 10px;
	min-width: 200px;
	max-height: 260px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cmp-filter-term {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border-radius: 5px;
	font-size: .875rem;
	cursor: pointer;
	transition: background var(--cmp-transition);
}

.cmp-filter-term:hover {
	background: var(--cmp-bg);
}

.cmp-filter-term input {
	accent-color: var(--cmp-accent);
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.cmp-filter-term__count {
	color: var(--cmp-text-muted);
	font-size: .8rem;
	margin-left: auto;
}

/* Secondary filters */
.cmp-filters__secondary-wrap {
	border: none;
}

.cmp-filters__secondary-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .875rem;
	color: var(--cmp-accent);
	cursor: pointer;
	font-weight: 500;
	user-select: none;
}

/* Active Tags Bar */
.cmp-filters__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.cmp-active-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cmp-active-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--cmp-bg);
	border: 1px solid var(--cmp-accent);
	color: var(--cmp-accent);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: .8rem;
	font-weight: 500;
}

.cmp-active-tag__remove {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0;
}

.cmp-results-count {
	font-size: .85rem;
	color: var(--cmp-text-muted);
	margin: 0;
}

/* ── Tracks Grid ─────────────────────────────────────────────────────────── */

.cmp-tracks-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 20px;
	position: relative;
	min-height: 100px;
}

.cmp-tracks-grid.cmp-loading {
	opacity: .5;
	pointer-events: none;
}

/* ── Track Card ──────────────────────────────────────────────────────────── */

.cmp-track-card {
	background: var(--cmp-surface);
	border: 1px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	overflow: hidden;
	box-shadow: var(--cmp-shadow);
	transition: transform var(--cmp-transition), box-shadow var(--cmp-transition);
	display: flex;
	flex-direction: column;
}

.cmp-track-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(124,106,247,.18);
}

.cmp-track-card__cover {
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--cmp-bg);
}

.cmp-track-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.cmp-track-card:hover .cmp-track-card__img {
	transform: scale(1.04);
}

.cmp-track-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cmp-accent);
}

.cmp-track-card__img--placeholder .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
}

.cmp-track-card__info {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.cmp-track-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--cmp-text);
	line-height: 1.3;
}

.cmp-track-card__band {
	margin: 0;
	font-size: .875rem;
	color: var(--cmp-accent);
	font-weight: 500;
}

/* Meta pills */
.cmp-track-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cmp-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--cmp-bg);
	border: 1px solid var(--cmp-border);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: .775rem;
	color: var(--cmp-text-muted);
}

.cmp-meta-pill--downloads {
	color: var(--cmp-accent);
	border-color: var(--cmp-accent);
}

/* Tags */
.cmp-track-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cmp-tag {
	background: var(--cmp-bg);
	color: var(--cmp-text-muted);
	border-radius: 3px;
	padding: 2px 7px;
	font-size: .75rem;
}

/* Spotify embed */
.cmp-track-card__spotify {
	border-radius: 6px;
	overflow: hidden;
}

/* Audio player */
.cmp-track-card__player audio {
	width: 100%;
	height: 36px;
	border-radius: 4px;
}

/* Actions */
.cmp-track-card__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.cmp-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 6px;
	border: none;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--cmp-transition);
}

.cmp-btn--download {
	background: var(--cmp-accent);
	color: #fff;
	flex: 1;
	justify-content: center;
}

.cmp-btn--download:hover {
	background: var(--cmp-accent-dark);
}

.cmp-btn--download:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.cmp-btn--reset {
	background: transparent;
	border: 1px solid #d63638;
	color: #d63638;
	padding: 5px 12px;
	font-size: .8rem;
}

.cmp-btn--reset:hover {
	background: #d63638;
	color: #fff;
}

.cmp-btn--load-more {
	background: var(--cmp-surface);
	border: 2px solid var(--cmp-accent);
	color: var(--cmp-accent);
	padding: 12px 32px;
	font-size: 1rem;
}

.cmp-btn--load-more:hover {
	background: var(--cmp-accent);
	color: #fff;
}

/* ── Load More ───────────────────────────────────────────────────────────── */

.cmp-load-more-wrap {
	display: flex;
	justify-content: center;
	padding: 16px 0;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.cmp-spinner {
	width: 40px;
	height: 40px;
	margin: 40px auto;
	border: 4px solid var(--cmp-border);
	border-top-color: var(--cmp-accent);
	border-radius: 50%;
	animation: cmp-spin .7s linear infinite;
}

@keyframes cmp-spin {
	to { transform: rotate(360deg); }
}

/* ── No Results / Error ──────────────────────────────────────────────────── */

.cmp-no-results,
.cmp-error {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 20px;
	color: var(--cmp-text-muted);
	font-size: 1rem;
}

.cmp-error {
	color: #d63638;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   Mobile drawers — catalog (toolbar + filters + artists)
   Solo activos en ≤ 768 px
   ══════════════════════════════════════════════════════════════════════════ */

/* El toolbar y el botón cerrar están ocultos fuera de mobile */
.cmp-mobile-toolbar { display: none; }
.cmp-sidebar-close  { display: none!important; }

@media ( max-width: 768px ) {

	.cmp-tracks-grid {
		grid-template-columns: 1fr;
	}

	.cmp-filter-group__terms {
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: 60px;
		top: auto;
		max-height: 50vh;
	}
	.cmp-band-circle {
		width: clamp( 75px, 30vw, 200px );
		height: clamp( 75px, 30vw, 200px );
	}
	.cmp-band-item.is-center .cmp-band-circle {
	    width: clamp(160px, 70vw, 320px);
	    height: clamp(150px, 70vw, 300px);
	}
	.cmp-listen-all-link {
		font-size: clamp(1.25em, 2vw, 2em);
	}
	.cmp-band-overlay-desc {
	    font-size: clamp(13px, 1vw, 17px);
	}
	.cmp-band-overlay-link {
	    font-size: clamp(15px, 2vw, 25px);
	}
	.cmp-bands-slider {
	    min-height: 60vh;
	}

	/* Slider mobile: Swiper controla el ancho (slidesPerView: 1.4 con peek) */
	.cmp-bands-swiper .cmp-band-item {
		flex: none;
		width: 100%;
	}

	/*.cmp-band-circle { width: 180px; height: 180px; }*/

	.cmp-tracks-header,
	.cmp-track-row {
		grid-template-columns: 25px 1fr 1fr auto 0;
		padding: 0;
	}

	/* Ocultar columna artist en mobile */
	/*.cmp-tr-artist { display: none; }*/

	.cmp-band-bar {
		flex-direction: column;
		align-items: flex-start;
		border-radius: 16px;
	}

	.cmp-modal-artists {
		grid-template-columns: 1fr 1fr;
	}

	/* ── Toolbar ── */
	.cmp-mobile-toolbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 16px;
	}

	/* ── Sidebar → drawer desde la derecha ── */
	.cmp-catalog-sidebar {
		/* Saca el sidebar del flujo del grid; lo convierte en panel fijo */
		position: fixed;
		top: 0;
		right: 0;
		width: min( 90vw, 380px );
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		z-index: 99998;
		transform: translateX( 100% );
		transition: transform 0.3s ease;
		pointer-events: none;
		order: unset;
		border-radius: 0;
		border-bottom-left-radius: 1em;
		border-top-left-radius: 1em;
		/* El fondo viene del .cmp-catalog-sidebar base */
	}

	.cmp-catalog-sidebar.is-open {
		transform: translateX( 0 );
		pointer-events: auto;
	}

	/* ── Artists modal → panel lateral sin backdrop ── */

	/* Quitar backdrop */
	.cmp-modal-backdrop {
		display: none !important;
	}

	/* Modal container: alineado a la derecha, sin padding */
	.cmp-modal {
		justify-content: flex-end;
		align-items: stretch;
		padding: 0;
	}

	/* El box ocupa la altura completa y la anchura del panel */
	.cmp-modal-box {
		width: min( 90vw, 380px );
		max-width: none;
		max-height: none;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border-radius: 0;
		border-bottom-left-radius: 1em;
		border-top-left-radius: 1em;
	}

	/* Artists list debe crecer y ser desplazable */
	.cmp-modal-artists {
		flex: 1;
		min-height: 0;      /* permite que el flex item se encoja debajo de su contenido */
		overflow-y: auto;
		grid-template-columns: 1fr; /* una columna en mobile */
	}

	.cmp-band-bar-back, .cmp-band-bar-browse{
		display: none !important;
	}
	.cmp-band-bar {
        align-items: center;
    }
    .cmp-mobile-btn{
    	color: var(--e-global-color-text) !important;
    	font-family: "GlacialIndifference", Sans-serif !important;
	    font-size: clamp(14px, 1vw, 18px) !important;
	    font-weight: 500 !important;
	    line-height: 1em !important;

	    padding: 5px !important;
		border: 1px solid var(--e-global-color-text) !important;
		border-radius: 4px !important;
		background: transparent !important;
		text-decoration: none;
		display: inline-block !important;
    }
    #cmp-mobile-artists-btn{
    	margin: 0 0 0 auto;
    }
    .cmp-play-btn{
    	width: 18px !important;
    	height: 18px !important;
    }
    .cmp-tracks-list .cmp-tr-artist{
    	padding-right: 0 !important;
	    font-size: clamp(13px, 1vw, 17px) !important;
    }
    .cmp-tracks-header > div {
	    padding-right: 5px;
	    font-size: clamp(13px, 1vw, 17px);
	}
	.cmp-tr-title-text {
	    padding-right: 0 !important;
        font-size: clamp(13px, 1vw, 17px) !important;
	}
	.cmp-tr-duration {
	    padding-right: 10px !important;
        font-size: clamp(13px, 1vw, 17px) !important;
	}
	.cmp-browse-artists-btn{
		display: block!important;
		width: 100%!important;
	}
	.cmp-sidebar-close{
		position: absolute !important;
	    top: 16px !important;
	    right: 20px !important;
	    background: none !important;
	    border: none !important;
	    color: var(--e-global-color-primary) !important;
	    font-family: "GlacialIndifference", Sans-serif !important;
	    font-size: clamp(16px, 1.2vw, 20px) !important;
	    font-weight: 500 !important;
	    line-height: 1.2em !important;
	    letter-spacing: 0.01em !important;
	    cursor: pointer !important;
	    z-index: 2 !important;
	    text-decoration: underline !important;
	    padding: 0 !important;
	    display: block!important;
	}
	.cmp-spotify-inner{
		padding: 4px 0 12px;
	}
}