/*
 * Media Store — Single Item Page Styles
 * Loaded only on single music_store_item pages.
 */

/* --------------------------------------------------------------------------
   Single page wrapper
   -------------------------------------------------------------------------- */
.mst-single-page {
	padding-bottom: 48px;
}

/* --------------------------------------------------------------------------
   Hero section: blurred bg + cover + info
   -------------------------------------------------------------------------- */
.mst-single-hero {
	position:   relative;
	overflow:   hidden;
	padding:    48px 24px 40px;
	min-height: 340px;
	display:    flex;
	align-items: flex-end;
}

.mst-single-hero__bg {
	position: absolute;
	inset:    0;
	z-index:  0;
}

.mst-single-hero__bg img {
	width:     100%;
	height:    100%;
	object-fit: cover;
	filter:    blur(52px) saturate(1.4);
	transform: scale(1.1);
	opacity:   0.65;
}

.mst-single-hero__overlay {
	position:   absolute;
	inset:      0;
	z-index:    1;
	background: linear-gradient(
		to bottom,
		rgba(11,11,14,.55) 0%,
		rgba(11,11,14,.85) 60%,
		rgba(11,11,14,.98) 100%
	);
}

.mst-single-hero__inner {
	position:  relative;
	z-index:   2;
	width:     100%;
	max-width: 1400px;
	margin:    0 auto;
	display:   flex;
	gap:       32px;
	align-items: flex-end;
}

/* ── Cover ── */
.mst-single-hero__cover-wrap {
	flex-shrink: 0;
}

.mst-single-hero__cover {
	width:         220px;
	height:        220px;
	object-fit:    cover;
	border-radius: 14px;
	box-shadow:    0 16px 48px rgba(0,0,0,.65);
	display:       block;
}

.mst-single-hero__cover--portrait {
	width:  160px;
	height: 240px;
}

.mst-single-hero__cover--wide {
	width:  320px;
	height: 180px;
}

.mst-single-hero__cover-placeholder {
	width:         220px;
	height:        220px;
	border-radius: 14px;
	background:    rgba(255,255,255,.06);
	display:       flex;
	align-items:   center;
	justify-content: center;
	color:         rgba(255,255,255,.15);
}

/* ── Meta panel ── */
.mst-single-hero__meta {
	flex:      1;
	min-width: 0;
}

.mst-single-hero__title {
	font-size:      clamp(1.75rem, 4vw, 3rem);
	font-weight:    800;
	letter-spacing: -.03em;
	line-height:    1.1;
	color:          #f0f0f5;
	margin:         8px 0 6px;
}

.mst-single-hero__creator {
	font-size:    1.0625rem;
	color:        rgba(255,255,255,.6);
	margin-bottom: 16px;
}

/* Details strip: dl pairs inline */
.mst-single-hero__details {
	display:   flex;
	flex-wrap: wrap;
	gap:       4px 20px;
	margin-bottom: 20px;
}

.mst-single-hero__details dt {
	font-size:    0.75rem;
	color:        rgba(255,255,255,.35);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.mst-single-hero__details dd {
	font-size:  0.875rem;
	color:      rgba(255,255,255,.65);
	margin:     0 0 2px;
}

.mst-single-hero__details dt,
.mst-single-hero__details dd {
	display: inline;
}

.mst-single-hero__details dt::after { content: ': '; }
.mst-single-hero__details dt { float: left; clear: left; }

/* ── Actions row ── */
.mst-single-hero__actions {
	display:    flex;
	align-items: center;
	flex-wrap:  wrap;
	gap:        10px;
}

.mst-single-hero__price {
	font-size:  1.375rem;
	font-weight: 700;
	color:      #f0f0f5;
}

/* --------------------------------------------------------------------------
   Body: description + metadata table + tracklist + video
   -------------------------------------------------------------------------- */
.mst-single-body {
	padding: 32px 24px 0;
	max-width: 1400px;
	margin:  0 auto;
	display: grid;
	grid-template-columns: 1fr min(380px, 35%);
	gap:     32px;
	align-items: start;
}

.mst-single-body--full {
	grid-template-columns: 1fr;
}

/* ── Main column ── */
.mst-single-body__main {}

.mst-single-section {
	margin-bottom: 36px;
}

.mst-single-section__heading {
	font-size:    1rem;
	font-weight:  700;
	color:        rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Description content */
.mst-single-entry {
	color:      rgba(255,255,255,.65);
	font-size:  0.9375rem;
	line-height: 1.8;
	max-width:  72ch;
}

.mst-single-entry p { margin-bottom: 1em; }
.mst-single-entry p:last-child { margin-bottom: 0; }
.mst-single-entry a { color: var(--mst-accent, #5c6ef4); }

/* Tracklist */
.mst-tracklist {
	counter-reset: track;
}

.mst-tracklist__item {
	counter-increment: track;
	display:    flex;
	align-items: center;
	gap:        14px;
	padding:    10px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size:  0.9rem;
	color:      rgba(255,255,255,.6);
	transition: color 140ms ease;
}

.mst-tracklist__item:first-child { border-top: 1px solid rgba(255,255,255,.06); }

.mst-tracklist__item::before {
	content: counter(track);
	min-width: 20px;
	text-align: right;
	font-size: 0.8125rem;
	color: rgba(255,255,255,.25);
	font-variant-numeric: tabular-nums;
}

.mst-tracklist__item:hover { color: rgba(255,255,255,.9); }

/* Video embed */
.mst-video-section { }

.mst-video-wrap {
	border-radius: 12px;
	overflow:      hidden;
	background:    #000;
	aspect-ratio:  16 / 9;
	max-width:     800px;
}

.mst-video { width: 100%; height: 100%; }

/* ── Sidebar column: metadata table ── */
.mst-single-body__side {}

.mst-single-meta-table {
	background:    rgba(255,255,255,.03);
	border:        1px solid rgba(255,255,255,.07);
	border-radius: 12px;
	overflow:      hidden;
	margin-bottom: 24px;
}

.mst-single-meta-row {
	display:   grid;
	grid-template-columns: 100px 1fr;
	gap:       0 12px;
	padding:   10px 16px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.mst-single-meta-row:last-child { border-bottom: none; }

.mst-single-meta-row__key {
	font-size:    0.75rem;
	font-weight:  600;
	color:        rgba(255,255,255,.35);
	text-transform: uppercase;
	letter-spacing: .05em;
	align-self:   center;
}

.mst-single-meta-row__val {
	font-size:  0.875rem;
	color:      rgba(255,255,255,.7);
	align-self: center;
	overflow:   hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Related items row
   -------------------------------------------------------------------------- */
.mst-single-related {
	padding:    32px 24px;
	max-width:  1400px;
	margin:     0 auto;
}

.mst-single-related__heading {
	font-size:    1.125rem;
	font-weight:  700;
	letter-spacing: -.02em;
	margin-bottom: 20px;
	color:        #f0f0f5;
}

.mst-single-related__row {
	display:    flex;
	gap:        16px;
	overflow-x: auto;
	padding-bottom: 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.1) transparent;
}

.mst-single-related__row::-webkit-scrollbar { height: 4px; }
.mst-single-related__row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.mst-single-related__row > * {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 180px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.mst-single-body {
		grid-template-columns: 1fr;
	}

	.mst-single-body__side {
		order: -1;
	}

	.mst-single-meta-table {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.mst-single-meta-row {
		border-bottom: none;
		border-right:  1px solid rgba(255,255,255,.06);
	}

	.mst-single-meta-row:nth-child(even) { border-right: none; }
}

@media (max-width: 640px) {
	.mst-single-hero__inner { flex-direction: column; align-items: center; text-align: center; }
	.mst-single-hero__cover { width: 160px; height: 160px; }
	.mst-single-hero__cover--portrait { width: 120px; height: 180px; }
	.mst-single-hero__cover--wide { width: 260px; height: 146px; }
	.mst-single-hero__actions { justify-content: center; }
	.mst-single-hero__details { justify-content: center; }
	.mst-single-body { padding: 20px 16px 0; }
	.mst-single-related { padding: 24px 16px; }
	.mst-single-meta-table { grid-template-columns: 1fr; }
	.mst-single-meta-row { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.06); }
}