/* =========================================================================
   BeatLatin — Mixes (Apple Music playlist layout)
   ========================================================================= */

.bl-mixes {
	--bl-mixes-art: 270px;
	--bl-mixes-row-h: 54px;
	--bl-mixes-thumb: 40px;
	--bl-mixes-primary: var(--bl-system-primary, hsla(0, 0%, 100%, 0.92));
	--bl-mixes-secondary: var(--bl-system-secondary, hsla(0, 0%, 100%, 0.64));
	--bl-mixes-row-hover: #2c2c2c;
	--bl-mixes-divider: rgba(255, 255, 255, 0.08);
	--bl-mixes-header-rule: rgba(255, 255, 255, 0.18);
	--bl-mixes-art-border: rgba(255, 255, 255, 0.12);
	--bl-mixes-shadow: rgba(0, 0, 0, 0.28);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 8px 0 40px;
	font-family: var(--bl-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

[data-theme="light"] .bl-mixes {
	--bl-mixes-primary: var(--bl-system-primary, rgba(0, 0, 0, 0.88));
	--bl-mixes-secondary: var(--bl-system-secondary, rgba(0, 0, 0, 0.56));
	--bl-mixes-row-hover: #f0f0f0;
	--bl-mixes-divider: rgba(0, 0, 0, 0.08);
	--bl-mixes-header-rule: rgba(0, 0, 0, 0.18);
	--bl-mixes-art-border: rgba(0, 0, 0, 0.08);
	--bl-mixes-shadow: rgba(0, 0, 0, 0.14);
}

.bl-mixes-empty-page {
	color: var(--bl-mixes-secondary);
	font-size: 15px;
	padding: 40px 0;
}

/* ---------- Hero ---------- */

.bl-mixes-hero {
	display: grid;
	grid-template-columns: var(--bl-mixes-art) minmax(0, 1fr);
	gap: 28px 32px;
	align-items: start;
	margin: 0 0 36px;
	position: relative;
}

[data-bl-mixes] .bl-mixes-hero__top-actions {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

[data-bl-mixes] .bl-mixes-hero__top-actions .bl-search-result__options,
[data-bl-mixes] .bl-mixes-hero__top-actions .bl-mixes-hero__options {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	color: var(--bl-mixes-primary, #fff);
	cursor: pointer;
	padding: 0;
}

[data-theme="light"] [data-bl-mixes] .bl-mixes-hero__top-actions .bl-search-result__options,
[data-theme="light"] [data-bl-mixes] .bl-mixes-hero__top-actions .bl-mixes-hero__options {
	background: rgba(0, 0, 0, 0.06);
	color: #111;
}

/* Bridge EDD oculto: el ⋯ del hero compra vía activateById */
[data-bl-mixes] .bl-mixes-hero__buy--bridge {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.bl-mixes-hero__artwork {
	grid-area: auto;
	position: relative;
	width: var(--bl-mixes-art) !important;
	height: var(--bl-mixes-art) !important;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	/* Sombra suave tipo Apple (más baja que radiosity 10/20) + borde fino */
	border: 0.5px solid var(--bl-mixes-art-border);
	box-shadow: 0 6px 14px 0 var(--bl-mixes-shadow);
	align-self: start;
	background: rgba(255, 255, 255, 0.04);
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Absolute + cover: recorta 960×640 (u otra) a cuadrado; evita letterbox de Elementor height:auto */
.bl-mixes-hero__artwork img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.bl-mixes-hero__artwork-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--bl-mixes-secondary);
	font-size: 48px;
}

.bl-mixes-hero__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 4px;
}

.bl-mixes-hero__title {
	margin: 0 0 4px;
	padding: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2307692308;
	color: var(--bl-mixes-primary);
	letter-spacing: -0.01em;
}

.bl-mixes-hero__dj {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2307692308;
	color: var(--bl-red, #d90c0c);
}

.bl-mixes-hero__dj-link {
	color: inherit !important;
	text-decoration: none !important;
}

.bl-mixes-hero__dj-link:hover {
	text-decoration: underline !important;
	opacity: 0.92;
}

.bl-mixes-hero__desc {
	margin: 0 0 20px;
	max-width: 42em;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3846153846;
	color: var(--bl-mixes-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Botón Reproducir — <a role=button> (no <button>: el kit Elementor
   estiliza todos los button y rompe el look cuando estás logueado/admin) */
.bl-mixes-hero__play,
.bl-mixes-hero__play:hover,
.bl-mixes-hero__play:focus,
.bl-mixes-hero__play:focus-visible,
.bl-mixes-hero__play:active,
body.logged-in .bl-mixes-hero__play,
body.logged-in .bl-mixes-hero__play:hover,
body.admin-bar .bl-mixes-hero__play,
body.admin-bar .bl-mixes-hero__play:hover {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 36px !important;
	height: auto !important;
	padding: 8px 18px !important;
	margin: 0 !important;
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-radius: 980px !important;
	outline: none !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.333 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	/* Oscuro: botón blanco, texto/icono negros. Sin hover. */
	color: #000000 !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	box-shadow: none !important;
	transition: none;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
}

.bl-mixes-hero__play:hover,
.bl-mixes-hero__play:focus-visible,
body.logged-in .bl-mixes-hero__play:hover,
body.admin-bar .bl-mixes-hero__play:hover {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	text-decoration: none !important;
}

.bl-mixes-hero__play-icon,
.bl-mixes-hero__pause-icon {
	display: none;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.bl-mixes-hero__play .bl-mixes-hero__play-icon {
	display: block;
}

.bl-mixes-hero.now-playing:not(.paused) .bl-mixes-hero__play-icon {
	display: none;
}

.bl-mixes-hero.now-playing:not(.paused) .bl-mixes-hero__pause-icon {
	display: block;
}

.bl-mixes-hero.now-playing.paused .bl-mixes-hero__play-icon {
	display: block;
}

.bl-mixes-hero.now-playing.paused .bl-mixes-hero__pause-icon {
	display: none;
}

/* Claro: botón negro, texto/icono blancos. Sin hover. */
[data-theme="light"] .bl-mixes-hero__play,
[data-theme="light"] .bl-mixes-hero__play:hover,
[data-theme="light"] .bl-mixes-hero__play:focus-visible,
[data-theme="light"] body.logged-in .bl-mixes-hero__play,
[data-theme="light"] body.logged-in .bl-mixes-hero__play:hover {
	color: #ffffff !important;
	background: #000000 !important;
	background-color: #000000 !important;
	border: none !important;
	box-shadow: none !important;
}

/* ---------- Tabla ---------- */

.bl-mixes-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bl-mixes-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
}

/* Blindaje: si alguna fila hereda .bl-search-result, no aplicar grid de búsqueda */
.bl-mixes-table tr.bl-mixes-row,
.bl-mixes-table tr.bl-search-result {
	display: table-row !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	position: static;
}

.bl-mixes-table thead th {
	position: relative;
	padding: 0 12px 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.01em;
	text-align: left !important;
	text-transform: none !important;
	color: var(--bl-mixes-secondary) !important;
	border: none !important;
	border-bottom: 1px solid var(--bl-mixes-divider) !important;
	background: transparent !important;
	background-color: transparent !important;
	white-space: nowrap;
}

/*
 * Separador vertical Apple Music: anclado al label (no al borde de la celda),
 * así Comprar centrado queda igual de pegado que Versión / Género.
 */
.bl-mixes-table thead .bl-mixes-header-label {
	position: relative;
	display: inline-block;
}

.bl-mixes-table thead .bl-mixes-header-label::before {
	content: "";
	display: inline-block;
	position: absolute;
	inset-inline-start: -15px;
	top: calc(50% - 3px);
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	border-radius: 0.5px;
	background: var(--bl-mixes-header-rule, rgba(255, 255, 255, 0.18));
	pointer-events: none;
}

[data-theme="light"] .bl-mixes-table thead .bl-mixes-header-label::before {
	background: var(--bl-mixes-header-rule, rgba(0, 0, 0, 0.18));
}

.bl-mixes-table thead th.bl-mixes-col--buy {
	text-align: right !important;
}

.bl-mixes-table thead th.bl-mixes-col--details {
	display: none !important;
}

.bl-mixes-row {
	height: var(--bl-mixes-row-h);
	transition: background-color 0.15s ease;
}

.bl-mixes-row td {
	padding: 0 12px !important;
	height: var(--bl-mixes-row-h) !important;
	max-width: 0; /* fuerza ellipsis real con table-layout:fixed */
	vertical-align: middle !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.2307692308 !important;
	color: var(--bl-mixes-secondary) !important;
	border-bottom: 1px solid var(--bl-mixes-divider) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	background: transparent !important;
	background-color: transparent !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bl-mixes-row td.bl-mixes-col--title {
	max-width: none; /* el ellipsis lo hace el span interno */
	overflow: visible;
}

.bl-mixes-row td.bl-mixes-col--details {
	max-width: none;
	overflow: visible !important;
}

.bl-mixes-row:hover td,
.bl-mixes-row.now-playing td {
	background: var(--bl-mixes-row-hover) !important;
}

@media (min-width: 769px) {
	.bl-mixes-col--title {
		width: 34%;
	}

	.bl-mixes-col--version {
		width: 14%;
	}

	.bl-mixes-col--genre {
		width: 16%;
	}

	.bl-mixes-col--date {
		width: 12%;
	}

	.bl-mixes-col--buy {
		width: 14%;
	}
}

.bl-mixes-col--buy {
	text-align: right !important;
	overflow: visible !important;
}

.bl-mixes-row td.bl-mixes-col--buy {
	max-width: none;
	overflow: visible !important;
	text-align: right !important;
	color: var(--bl-mixes-primary) !important;
}

.bl-mixes-table thead th.bl-mixes-col--buy {
	text-align: right !important;
}

.bl-mixes-col--details {
	display: none !important;
}

.bl-mixes-buy-cluster {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	max-width: 100%;
	vertical-align: middle;
}

.bl-mixes-buy-cluster .bl-mixes-buy {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
}

.bl-mixes-buy-cluster .bl-context-menu-wrap,
.bl-mixes-buy-cluster .bl-search-result__menu-wrap {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

.bl-mixes-buy-cluster .bl-mixes-row__options.bl-search-result__options {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.bl-mixes-row__song {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.bl-mixes-row__title-link {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	overflow: hidden !important;
	text-decoration: none !important;
	color: inherit !important;
}

.bl-mixes-row__title {
	display: block !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.2307692308 !important;
	color: var(--bl-mixes-primary) !important;
}

.bl-mixes-row__artist {
	display: block !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	color: var(--bl-mixes-secondary) !important;
}

/* Play 40×40 fijo — Elementor no puede expandir el img a width:100% de la celda */
.bl-mixes-row__play,
.bl-mixes-row__play:hover,
.bl-mixes-row__play:focus,
.bl-mixes-row__play:active,
body.logged-in .bl-mixes-row__play {
	position: relative !important;
	flex: 0 0 var(--bl-mixes-thumb) !important;
	flex-shrink: 0 !important;
	width: var(--bl-mixes-thumb) !important;
	height: var(--bl-mixes-thumb) !important;
	min-width: var(--bl-mixes-thumb) !important;
	min-height: var(--bl-mixes-thumb) !important;
	max-width: var(--bl-mixes-thumb) !important;
	max-height: var(--bl-mixes-thumb) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.06) !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.bl-mixes-row__play:disabled {
	cursor: default;
	opacity: 0.7;
}

.bl-mixes-row__art,
.bl-mixes-row__play img.bl-mixes-row__art {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

.bl-mixes-row__art--placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--bl-mixes-secondary);
	font-size: 14px;
}

.bl-mixes-row__shade {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.42);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 1;
}

.bl-mixes-row:hover .bl-mixes-row__shade,
.bl-mixes-row.now-playing .bl-mixes-row__shade,
.bl-mixes-row__play:focus-visible .bl-mixes-row__shade {
	opacity: 1;
}

.bl-mixes-playback-bars {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: #fff;
}

.bl-mixes-playback-bars__svg {
	position: absolute;
	width: 15px;
	height: 15px;
	opacity: 0;
}

.bl-mixes-glyph {
	position: absolute;
	width: 16px;
	height: 16px;
	opacity: 0;
	color: #fff;
}

/* Playing → barras */
.bl-mixes-row.now-playing:not(.paused) .bl-mixes-playback-bars__svg {
	opacity: 1;
}

.bl-mixes-row.now-playing:not(.paused) .bl-mixes-glyph--play {
	opacity: 0;
}

/* Pausado → play inmediato (PC y móvil; no dejar pause pegado) */
.bl-mixes-row.now-playing.paused .bl-mixes-glyph--play {
	opacity: 1;
}

.bl-mixes-row.now-playing.paused .bl-mixes-glyph--pause,
.bl-mixes-row.now-playing.paused .bl-mixes-playback-bars__svg {
	opacity: 0;
}

/* Hover solo en pointer fino — no afecta touch / barras en móvil */
@media (hover: hover) and (pointer: fine) {
	.bl-mixes-row.has-preview:hover:not(.now-playing) .bl-mixes-glyph--play {
		opacity: 1;
	}

	/* Reproduciendo + hover → solo pause */
	.bl-mixes-row.now-playing:not(.paused):hover .bl-mixes-playback-bars__svg {
		opacity: 0;
	}

	.bl-mixes-row.now-playing:not(.paused):hover .bl-mixes-glyph--play {
		opacity: 0;
	}

	.bl-mixes-row.now-playing:not(.paused):hover .bl-mixes-glyph--pause {
		opacity: 1;
	}
}

/* Barras animadas */
.bl-mixes-playback-bars__bar {
	fill: currentColor;
	transform: translateY(9px);
	animation-name: none;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: var(--delay, 0s);
}

.bl-mixes-row.now-playing:not(.paused) .bl-mixes-playback-bars__bar {
	animation-name: bl-mixes-playback-bar;
}

.bl-mixes-playback-bars__bar--1 {
	--max-height-offset: 6px;
	--delay: 0.25s;
	animation-duration: 0.6s;
}

.bl-mixes-playback-bars__bar--2 {
	--max-height-offset: 2px;
	--delay: 615ms;
}

.bl-mixes-playback-bars__bar--3 {
	--max-height-offset: 4px;
	--delay: 475ms;
}

.bl-mixes-playback-bars__bar--4 {
	--max-height-offset: 2px;
	--delay: 25ms;
}

@keyframes bl-mixes-playback-bar {
	0% {
		transform: translateY(9px);
	}
	to {
		transform: translateY(var(--max-height-offset));
	}
}

/* ---------- Comprar (precio + hover, sin pill) ---------- */

.bl-mixes-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	position: relative;
	width: 100%;
}

.bl-mixes-buy__btn,
.bl-mixes-buy__btn:hover,
.bl-mixes-buy__btn:focus,
.bl-mixes-buy__btn:focus-visible,
.bl-mixes-buy__btn:active,
body.logged-in .bl-mixes-buy__btn,
body.admin-bar .bl-mixes-buy__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	min-width: 3.5em !important;
	min-height: 28px !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.23 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--bl-mixes-primary) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative;
}

.bl-mixes-buy__price {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	order: 2;
}

.bl-mixes-buy__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	order: 1;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	opacity: 0;
	color: var(--bl-red, #d90c0c) !important;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* Hover: + a la izquierda del precio, precio siempre visible → "+ $2.99" */
.bl-mixes-row:hover .bl-mixes-buy__btn:not(:disabled) .bl-mixes-buy__plus,
.bl-mixes-buy__btn:hover .bl-mixes-buy__plus,
.bl-mixes-buy__btn:focus-visible .bl-mixes-buy__plus {
	opacity: 1;
}

.bl-mixes-buy__pay {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.23;
	color: var(--bl-red, #d90c0c) !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}

.bl-mixes-buy__pay:hover,
.bl-mixes-buy__pay:focus-visible {
	text-decoration: none !important;
	opacity: 0.85;
}

.bl-mixes-col--buy.is-in-cart .bl-mixes-buy__btn {
	display: none !important;
}

.bl-mixes-col--buy.is-in-cart .bl-mixes-buy__pay {
	display: inline-flex !important;
}

/* Invitados: mixes fuerza display en .bl-mixes-buy__btn — hay que ganarle aquí */
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__btn,
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__btn:hover,
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__btn:focus,
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__btn:focus-visible,
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__btn:active,
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__pay,
.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__download,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__btn,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__btn:hover,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__btn:focus,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__btn:focus-visible,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__btn:active,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__pay,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__download,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__btn,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__btn:hover,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__btn:focus,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__btn:focus-visible,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__btn:active,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__pay,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__download {
	display: none !important;
}

.bl-mixes .bl-mixes-col--buy.is-login-required .bl-mixes-buy__lock,
.bl-mixes [data-bl-edd-buy][data-bl-edd-action="login"] .bl-mixes-buy__lock,
body:not(.logged-in) .bl-mixes .bl-mixes-buy__lock {
	display: inline-flex !important;
}

[data-theme="light"] .bl-mixes-buy__btn {
	color: var(--bl-mixes-primary);
}

[data-theme="light"] .bl-mixes-buy__plus {
	color: var(--bl-red, #d90c0c) !important;
	background: transparent;
}

[data-theme="light"] .bl-mixes-buy__pay {
	color: var(--bl-red, #d90c0c) !important;
}

/* ⋯ visibles en modo claro (antes quedaban blancos) */
.bl-mixes .bl-mixes-row__options.bl-search-result__options,
.bl-mixes .bl-search-result__options {
	color: var(--bl-mixes-secondary) !important;
}

.bl-mixes .bl-mixes-row__options.bl-search-result__options:hover,
.bl-mixes .bl-search-result__options:hover,
.bl-mixes .bl-mixes-row__options.bl-search-result__options:focus-visible {
	color: var(--bl-mixes-primary) !important;
}

[data-theme="light"] .bl-mixes .bl-mixes-row__options.bl-search-result__options,
[data-theme="light"] .bl-mixes .bl-search-result__options {
	color: rgba(29, 29, 31, 0.42) !important;
}

[data-theme="light"] .bl-mixes .bl-mixes-row__options.bl-search-result__options:hover,
[data-theme="light"] .bl-mixes .bl-search-result__options:hover {
	color: #1d1d1f !important;
}

/* Menú ⋯ (también dentro de buy-cluster) */
.bl-mixes-col--details .bl-context-menu-wrap,
.bl-mixes-col--details .bl-search-result__menu-wrap,
.bl-mixes-buy-cluster .bl-context-menu-wrap,
.bl-mixes-buy-cluster .bl-search-result__menu-wrap {
	display: inline-flex;
	justify-content: flex-end;
	vertical-align: middle;
}

.bl-mixes .bl-search-edd-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}

.bl-mixes-row__options.bl-search-result__options {
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.bl-mixes-row__options .bl-ellipsis-icon {
	width: 22px;
	height: 22px;
}

.bl-mixes-empty td {
	padding: 24px 12px !important;
	text-align: center;
	color: var(--bl-mixes-secondary) !important;
	white-space: normal;
}

/* ---------- Paginación (meta izq + botones chicos der) ---------- */

.bl-mixes-pagination {
	display: block;
	margin-top: 8px;
}

.bl-mixes-pagination .bl-catalog-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	width: 100%;
	padding-top: 0;
	border-top: none;
}

.bl-mixes-pagination .bl-catalog-pagination__meta {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bl-mixes-secondary, rgba(255, 255, 255, 0.55)) !important;
}

.bl-mixes-pagination .pagination-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex: 0 0 auto;
}

.bl-mixes-pagination .page-numbers {
	display: flex;
	align-items: center;
	gap: 5px;
}

.bl-mixes-pagination .page-num,
.bl-mixes-pagination .pagination-arrow {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px !important;
	width: 28px;
	height: 28px !important;
	padding: 0 !important;
	border-radius: 6px !important;
	border: 1px solid var(--bl-pag-border, rgba(255, 255, 255, 0.12));
	background: var(--bl-pag-bg, rgba(255, 255, 255, 0.05));
	color: var(--bl-pag-text, rgba(255, 255, 255, 0.58));
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bl-mixes-pagination .pagination-arrow i {
	font-size: 9px;
	line-height: 1;
}

.bl-mixes-pagination .page-num:hover:not(:disabled):not(.active),
.bl-mixes-pagination .pagination-arrow:hover:not(:disabled) {
	background: var(--bl-pag-hover-bg, #fff);
	border-color: var(--bl-pag-hover-border, #fff);
	color: var(--bl-pag-hover-text, #000);
}

.bl-mixes-pagination .page-num.active {
	background: var(--bl-pag-active-bg, #fff);
	border-color: var(--bl-pag-active-border, #fff);
	color: var(--bl-pag-active-text, #000);
	cursor: default;
}

.bl-mixes-pagination .pagination-arrow:disabled,
.bl-mixes-pagination .page-num:disabled {
	opacity: 0.35;
	cursor: default;
}

.bl-mixes-pagination .dots {
	color: var(--bl-mixes-secondary);
	padding: 0 2px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.bl-mixes {
		--bl-mixes-art: 180px;
	}

	.bl-mixes-hero {
		gap: 20px 24px;
	}

	.bl-mixes-hero__title,
	.bl-mixes-hero__dj {
		font-size: 22px;
	}

	.bl-mixes-col--version,
	.bl-mixes-col--genre {
		width: 12%;
	}
}

@media (max-width: 768px) {
	.bl-mixes {
		--bl-mixes-art: 160px;
	}

	.bl-mixes-hero {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 18px;
	}

	[data-bl-mixes] .bl-mixes-hero {
		padding-top: 40px;
	}

	[data-bl-mixes] .bl-mixes-hero__top-actions {
		right: 4px;
	}

	.bl-mixes-hero__artwork {
		width: min(var(--bl-mixes-art), 56vw);
		height: min(var(--bl-mixes-art), 56vw) !important;
		margin: 0 auto;
	}

	.bl-mixes-hero__meta {
		align-items: center;
		width: 100%;
	}

	.bl-mixes-hero__title,
	.bl-mixes-hero__dj {
		font-size: 22px;
		text-align: center;
	}

	.bl-mixes-hero__desc {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* Título + Comprar(+⋯) ; sin thead */
	.bl-mixes-table thead {
		display: none !important;
	}

	.bl-mixes-col--version,
	.bl-mixes-col--genre,
	.bl-mixes-col--date {
		display: none !important;
	}

	.bl-mixes-col--title {
		width: auto !important;
	}

	.bl-mixes-col--buy {
		width: 108px !important;
		display: table-cell !important;
	}

	.bl-mixes-col--details {
		display: none !important;
	}

	.bl-mixes-row td.bl-mixes-col--title {
		padding-left: 4px !important;
	}

	.bl-mixes-row td.bl-mixes-col--buy {
		padding-right: 4px !important;
	}

	.bl-mixes-pagination .bl-catalog-pagination {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.bl-mixes-pagination .bl-catalog-pagination__meta {
		width: 100%;
		text-align: center;
	}

	.bl-mixes-pagination .pagination-wrapper {
		margin-left: 0;
		justify-content: center;
		width: 100%;
	}
}

@media (min-width: 2560px) {
	.bl-mixes {
		--bl-mixes-art: 300px;
		--bl-mixes-row-h: 58px;
		--bl-mixes-thumb: 44px;
	}
}

/* Accesibilidad */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   INVITADOS — candado visible en columna Comprar (Mixes)
   El CSS de .bl-mixes-buy__btn { display:inline-flex !important } ocultaba
   el precio OK, pero el lock no ganaba especificidad y quedaba invisible.
   ========================================================================== */
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px !important;
	min-height: 28px !important;
	width: auto !important;
	position: relative !important;
	z-index: 2 !important;
}

body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__btn,
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__btn:hover,
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__btn:focus,
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__btn:focus-visible,
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__btn:active,
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__pay,
body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__download,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__btn,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__btn:hover,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__btn:focus,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__btn:focus-visible,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__btn:active,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__pay,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__download {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body:not(.logged-in) .bl-mixes .bl-mixes-buy-cluster .bl-mixes-buy__lock,
body:not(.logged-in) .bl-mixes .bl-mixes-col--buy .bl-mixes-buy__lock,
body:not(.logged-in) .bl-mixes [data-bl-edd-buy] .bl-mixes-buy__lock {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px !important;
	min-height: 28px !important;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--bl-red, #d90c0c) !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	z-index: 3 !important;
}

body:not(.logged-in) .bl-mixes .bl-mixes-buy__lock-icon {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	color: inherit !important;
}