.bl-beat-detail-page.bl-shell {
	--bl-beat-detail-max-width: 1400px;
	--bl-beat-detail-sticky-top: calc(var(--bl-header-height) + 28px);
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-block: clamp(28px, 5vw, 76px);
	background: var(--bl-color-bg);
}

.admin-bar .bl-beat-detail-page {
	--bl-beat-detail-sticky-top: calc(var(--bl-header-height) + 60px);
}

.bl-beat-detail-page > .banaslap-beat-detail,
.bl-beat-detail-page .bl-beat-detail-container {
	width: 100%;
	min-width: 0;
	margin-inline: auto;
}

.bl-beat-detail-page .bl-beat-detail-container {
	width: min(calc(100% - (2 * var(--bl-gutter))), var(--bl-beat-detail-max-width));
}

.bl-beat-detail-page .bl-beat-detail-layout {
	display: grid;
	grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.bl-beat-detail-page .bl-beat-detail-sidebar-wrap,
.bl-beat-detail-page .bl-beat-detail-main {
	min-width: 0;
}

.bl-beat-detail-page .bl-beat-detail-sidebar-wrap {
	height: 100%;
}

/*
 * Banaslap Studio bounds this element to the viewport and makes it a nested
 * scroll container. The theme owns the page shell, so keep the desktop sticky
 * positioning while allowing tall sidebars to remain in the document flow.
 */
@media (min-width: 769px) {
	.bl-beat-detail-page .bl-beat-detail-sidebar {
		position: sticky;
		top: var(--bl-beat-detail-sticky-top);
		max-height: none;
		overflow: visible;
		overscroll-behavior: auto;
	}
}

.bl-beat-detail-page .bl-beat-detail-artwork {
	border: 1px solid color-mix(in srgb, var(--bl-color-border) 78%, transparent);
	box-shadow: 0 24px 70px rgb(0 0 0 / 18%);
}

.bl-beat-detail-page .banaslap-beat-detail-player,
.bl-beat-detail-page .banaslap-license-embedded .banaslap-license-modal-panel {
	backdrop-filter: blur(18px);
}

.bl-beat-detail-page .bl-latest-beats--beat-detail,
.bl-beat-detail-page .banaslap-beat-detail-comments,
.bl-beat-detail-page .banaslap-beat-detail-editorial {
	width: 100%;
	margin-top: clamp(44px, 7vw, 82px);
	margin-inline: 0;
}

.bl-beat-detail-page .bl-latest-beats--beat-detail {
	padding: 0;
	scroll-margin-top: calc(var(--bl-header-height) + 28px);
}

.bl-beat-detail-page .bl-latest-beats--beat-detail .bl-latest-beats__header {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.bl-beat-detail-page .bl-latest-beats--beat-detail :where(a, button) {
	text-decoration: none;
}

.bl-beat-detail-page .bl-comments-area {
	width: 100%;
	max-width: none;
	margin-top: 0;
	padding: clamp(20px, 3vw, 34px);
	border: 1px solid var(--bl-color-border);
	border-radius: var(--bl-radius-xl);
	background: color-mix(in srgb, var(--bl-color-surface) 92%, transparent);
	box-shadow: 0 20px 50px rgb(0 0 0 / 10%);
}

.bl-beat-detail-page .bl-comments-header {
	margin-bottom: var(--bl-space-5);
}

.bl-beat-detail-page .bl-comments-title {
	font-size: clamp(1.55rem, 2.6vw, 2.25rem);
}

.bl-beat-detail-page .bl-comment-composer {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--bl-space-4);
	align-items: start;
	padding-bottom: var(--bl-space-6);
	border-bottom: 1px solid var(--bl-color-border);
}

.bl-beat-detail-page .bl-comment-composer > .avatar,
.bl-beat-detail-page .bl-comment-composer__placeholder {
	width: 48px;
	height: 48px;
	border-radius: var(--bl-radius-pill);
	background: var(--bl-color-bg-subtle);
}

.bl-beat-detail-page .bl-comment-composer .comment-respond,
.bl-beat-detail-page .bl-comment-composer .comment-form {
	margin-top: 0;
}

.bl-beat-detail-page .bl-comments-area .comment-reply-title {
	font-size: var(--bl-font-size-lg);
}

.bl-beat-detail-page .bl-comments-area .comment-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bl-space-3);
	margin-top: var(--bl-space-2);
}

.bl-beat-detail-page .bl-comments-area .comment-form > :where(.comment-notes, .logged-in-as, .comment-form-comment, .comment-form-url, .comment-form-cookies-consent, .form-submit) {
	grid-column: 1 / -1;
}

.bl-beat-detail-page .bl-comments-area .comment-form > .bl-comment-user-meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.35rem;
	min-width: 0;
	line-height: 1.45;
	white-space: nowrap;
}

.bl-beat-detail-page .bl-comment-user-meta > :first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bl-beat-detail-page .bl-comment-user-meta strong {
	color: var(--bl-color-text);
	font-weight: var(--bl-font-weight-semibold);
}

.bl-beat-detail-page .bl-comment-user-meta__actions {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	white-space: nowrap;
}

.bl-beat-detail-page .bl-comment-user-meta a {
	color: var(--bl-color-accent);
	text-decoration: none;
}

.bl-beat-detail-page .bl-comment-user-meta a:hover {
	color: var(--bl-color-accent-hover);
}

.bl-beat-detail-page .bl-comments-area .comment-form textarea {
	min-height: 6.5rem;
}

.bl-beat-detail-page .bl-comments-area .form-submit {
	justify-items: end;
}

.bl-beat-detail-page .bl-comments-area .submit {
	min-height: 44px;
	padding-inline: var(--bl-space-5);
}

.bl-beat-detail-page .bl-comment-list {
	margin-top: var(--bl-space-5);
}

.bl-beat-detail-page .bl-comment-list .comment-body {
	padding-block: var(--bl-space-5);
}

.bl-beat-detail-page .bl-comment-empty,
.bl-beat-detail-page .bl-comments-closed {
	margin: var(--bl-space-5) 0 0;
	color: var(--bl-color-text-muted);
}

.bl-beat-detail-page :where(.banaslap-beat-detail-editorial, .banaslap-beat-detail-comments) a {
	color: var(--bl-color-accent);
	text-decoration: none;
}

.bl-beat-detail-page :where(.banaslap-beat-detail-editorial, .banaslap-beat-detail-comments) a:hover {
	color: var(--bl-color-accent-hover);
}

.bl-beat-detail-page :where(.banaslap-beat-detail-editorial, .banaslap-beat-detail-comments) a:focus-visible {
	outline: var(--bl-focus-width) solid var(--bl-color-accent);
	outline-offset: var(--bl-focus-offset);
}

@media (max-width: 1440px) {
	.bl-beat-detail-page .bl-beat-detail-layout {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 1024px) {
	.bl-beat-detail-page {
		--bl-beat-detail-sticky-top: calc(var(--bl-header-height-mobile) + 24px);
	}

	.admin-bar .bl-beat-detail-page {
		--bl-beat-detail-sticky-top: calc(var(--bl-header-height-mobile) + 56px);
	}

	.bl-beat-detail-page .bl-beat-detail-layout {
		grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
		gap: 30px;
	}

}

@media (min-width: 769px) and (max-width: 782px) {
	.admin-bar .bl-beat-detail-page {
		--bl-beat-detail-sticky-top: calc(var(--bl-header-height-mobile) + 70px);
	}
}

@media (max-width: 768px) {
	.bl-beat-detail-page .bl-beat-detail-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.bl-beat-detail-page .bl-beat-detail-sidebar {
		position: static;
		top: auto;
		max-height: none;
		overflow: visible;
		overscroll-behavior: auto;
	}

	.bl-beat-detail-page .bl-comment-composer > .avatar,
	.bl-beat-detail-page .bl-comment-composer__placeholder {
		display: block;
	}
}

@media (max-width: 767px) {
	.bl-beat-detail-page {
		padding-block: 20px 56px;
	}

	.bl-beat-detail-page .bl-latest-beats--beat-detail,
	.bl-beat-detail-page .banaslap-beat-detail-comments,
	.bl-beat-detail-page .banaslap-beat-detail-editorial {
		margin-top: 48px;
	}

	.bl-beat-detail-page .bl-comments-area .comment-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.bl-beat-detail-page .bl-comments-area .comment-form > p {
		grid-column: 1;
	}
}

@media (max-width: 480px) {
	.bl-beat-detail-page .bl-comment-composer {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: var(--bl-space-3);
	}

	.bl-beat-detail-page .bl-comment-composer > .avatar,
	.bl-beat-detail-page .bl-comment-composer__placeholder {
		width: 40px;
		height: 40px;
	}
}