/**
 * Beat Store storefront styles.
 * Colors are driven by CSS variables set from the plugin's Design settings.
 */

:root {
	/* Defaults = the approved store palette (white ground, black type,
	   gold accents). Custom mode overrides these via inline CSS. */
	--bs-primary: #0c0c0c;
	--bs-accent: #fcbb45;
	--bs-button: #fcbb45;
	--bs-button-text: #0c0c0c;
	--bs-surface: #ffffff;
	--bs-text: #0c0c0c;
	--bs-dark: #14141b;
	--bs-dark-2: #1f1f2a;
	--bs-light: #ffffff;
	--bs-border: rgba(128, 128, 150, 0.25);
	--bs-text-muted: #6b7280;
	--bs-radius: 0;
	--bs-radius-button: 0;
	--bs-font-signature: "Caveat", "Segoe Script", "Brush Script MT", cursive;
}

/* ------------------------------------------------------------------
 * Typography — matches the active theme.
 *
 * --bs-font-body / --bs-font-heading are set at runtime from the theme's
 * computed styles in "Match my theme" mode. The `inherit` fallbacks also
 * fix the browser default: <button>, <input>, and <select> do NOT inherit
 * fonts on their own, so without this the controls would render in the
 * browser's default font instead of the theme's.
 * ---------------------------------------------------------------- */

.bs-catalog,
.bs-single,
.bs-account,
.bs-favorites,
.bs-player,
.bs-sticky,
.bs-modal__panel {
	font-family: var(--bs-font-body, inherit);
}

.bs-button,
.bs-icon-button,
.bs-play,
.bs-share-button,
.bs-load-more,
.bs-modal__option,
.bs-field input,
.bs-field select,
.bs-filters__submit {
	font-family: var(--bs-font-body, inherit);
}

.bs-card__title,
.bs-player__title,
.bs-sticky__title,
.bs-modal__title,
.bs-option-card__name,
.bs-single__options h2,
.bs-single__licenses h2,
.bs-single__share h2,
.bs-account h2,
.bs-modal__step h3 {
	font-family: var(--bs-font-heading, inherit);
	font-weight: var(--bs-font-heading-weight, 700);
	text-transform: var(--bs-font-heading-transform, none);
	letter-spacing: var(--bs-font-heading-spacing, normal);
}

.bs-catalog,
.bs-single,
.bs-account,
.bs-favorites {
	box-sizing: border-box;
}

.bs-catalog *,
.bs-single *,
.bs-account *,
.bs-favorites *,
.bs-modal *,
.bs-sticky *,
.bs-player * {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------- */

.bs-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--bs-button);
	color: var(--bs-button-text);
	border: 2px solid var(--bs-text, #0c0c0c);
	border-radius: var(--bs-radius-button);
	padding: 0.9em 1.6em;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bs-button:hover {
	filter: none;
}

.bs-button:focus-visible,
.bs-icon-button:focus-visible,
.bs-play:focus-visible,
.bs-share-button:focus-visible,
.bs-modal__option:focus-visible,
.bs-seek:focus-visible,
.bs-volume:focus-visible {
	outline: 3px solid var(--bs-accent);
	outline-offset: 2px;
}

.bs-button--secondary {
	background: transparent;
	color: var(--bs-button);
	box-shadow: inset 0 0 0 2px var(--bs-button);
}

.bs-button--small {
	padding: 0.4em 1em;
	font-size: 0.85rem;
}

.bs-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.bs-icon-button:hover {
	background: rgba(128, 128, 150, 0.15);
}

/* Icons (pure CSS, no external assets) */
.bs-icon-play {
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent currentColor;
	margin-left: 3px;
}

.is-playing .bs-icon-play {
	border: 0;
	width: 12px;
	height: 15px;
	margin-left: 0;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
}

.bs-icon-prev::before,
.bs-icon-next::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
}

.bs-icon-prev::before {
	border-width: 6px 9px 6px 0;
	border-color: transparent currentColor transparent transparent;
}

.bs-icon-next::before {
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent currentColor;
}

.bs-icon-heart::before {
	content: "♡";
	font-size: 20px;
	line-height: 1;
}

.bs-favorite.is-active .bs-icon-heart::before {
	content: "♥";
	color: #e0245e;
}

.bs-icon-share::before {
	content: "⤴";
	font-size: 18px;
	line-height: 1;
}

.bs-icon-close::before {
	content: "✕";
	font-size: 16px;
	line-height: 1;
}

.bs-icon-volume::before {
	content: "🔊";
	font-size: 14px;
	line-height: 1;
}

/* ------------------------------------------------------------------
 * Filters
 * ---------------------------------------------------------------- */

.bs-filters {
	margin-bottom: 28px;
}

.bs-filters__search {
	display: flex;
	gap: 10px;
}

.bs-filters__search input {
	flex: 1;
	padding: 1em 1.5em;
	border: 3px solid var(--bs-text, #0c0c0c);
	border-radius: var(--bs-radius-button);
	font-size: 1rem;
	font-family: inherit;
	letter-spacing: 0.06em;
	background: var(--bs-surface);
	color: var(--bs-text);
	min-width: 0;
	outline: none;
}

.bs-filters__search input:focus {
	border-color: var(--bs-accent);
}

.bs-filters__advanced {
	margin-top: 10px;
}

.bs-filters__advanced summary {
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--bs-text-muted);
	padding: 4px 0;
}

.bs-filters__advanced[open] summary {
	margin-bottom: 10px;
}

.bs-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.bs-filters__row + .bs-filters__row {
	margin-top: 12px;
}

.bs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 160px;
	min-width: 130px;
}

.bs-field--small {
	flex: 0 1 110px;
	min-width: 90px;
}

.bs-field__label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-text-muted);
}

.bs-field input,
.bs-field select {
	padding: 0.5em 0.7em;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-button);
	font-size: 0.95rem;
	width: 100%;
	background: var(--bs-surface);
	color: var(--bs-text);
}

/* ------------------------------------------------------------------
 * Grid + cards
 * ---------------------------------------------------------------- */

.bs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
	margin: 0 0 24px;
}

.bs-catalog--list .bs-grid {
	display: block;
	counter-reset: bs-track;
	border-top: 2px solid var(--bs-text, #111);
}

.bs-catalog--list .bs-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	counter-increment: bs-track;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bs-border);
	border-radius: 0;
	padding: 12px 6px;
	overflow: visible;
}

.bs-catalog--list .bs-card:hover {
	box-shadow: none;
	transform: none;
	background: rgba(128, 128, 150, 0.07);
}

.bs-catalog--list .bs-card::before {
	content: counter(bs-track, decimal-leading-zero);
	font-weight: 700;
	opacity: 0.55;
	min-width: 2em;
	text-align: center;
}

.bs-catalog--list .bs-card__art {
	flex: 0 0 52px;
	width: 52px;
	aspect-ratio: 1 / 1;
	border-radius: 2px;
	overflow: hidden;
}

.bs-catalog--list .bs-card__art .bs-play {
	right: 0;
	bottom: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.45);
	box-shadow: none;
	opacity: 0.9;
}

.bs-catalog--list .bs-card__art .bs-play .bs-icon-play {
	border-width: 6px 0 6px 10px;
}

.bs-catalog--list .bs-card__body {
	flex: 1;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 0;
	min-width: 0;
}

.bs-catalog--list .bs-card__title {
	font-size: 1rem;
	min-width: 170px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs-catalog--list .bs-card__meta {
	flex: 1;
	min-width: 0;
}

.bs-catalog--list .bs-card__desc {
	display: none;
}

.bs-catalog--list .bs-card__actions {
	margin: 0;
	flex: 0 0 auto;
}

.bs-catalog--list .bs-card__actions .bs-buy {
	flex: none;
}

.bs-catalog--list .bs-badge--featured {
	display: none;
}

@media (max-width: 700px) {
	.bs-catalog--list .bs-card__body {
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.bs-catalog--list .bs-card__title {
		min-width: 0;
		flex: 1 1 100%;
	}

	.bs-catalog--list .bs-card__actions {
		flex: 1 1 100%;
		margin-top: 6px;
	}
}

.bs-card {
	border: 1px solid var(--bs-card-border, var(--bs-border));
	border-radius: var(--bs-radius);
	overflow: hidden;
	background: var(--bs-surface);
	color: var(--bs-text);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bs-card:hover {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

.bs-catalog--list .bs-card {
	flex-direction: row;
}

.bs-catalog--list .bs-card__art {
	flex: 0 0 140px;
}

.bs-card__art {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--bs-primary), var(--bs-dark));
}

.bs-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bs-card__art-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 56px;
	color: rgba(255, 255, 255, 0.7);
}

.bs-card__art .bs-play {
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.bs-card__extras {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
	margin-top: 2px;
	opacity: 0.6;
}

.bs-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 0;
	border: 2px solid var(--bs-text, #0c0c0c);
	background: var(--bs-text, #0c0c0c);
	color: var(--bs-accent);
	cursor: pointer;
	box-shadow: none;
	transition: all 0.2s ease;
}

.bs-play:hover {
	background: var(--bs-accent);
	color: var(--bs-text, #0c0c0c);
	filter: none;
}

/* On the dark players the roles invert: gold buttons, dark glyphs */
.bs-player--dark .bs-play,
.bs-sticky .bs-play {
	background: var(--bs-accent);
	color: #0c0c0c;
	border-color: var(--bs-accent);
}

.bs-player--dark .bs-play:hover,
.bs-sticky .bs-play:hover {
	background: #ffffff;
	border-color: #ffffff;
}

.bs-play--large {
	width: 64px;
	height: 64px;
}

.bs-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 0.25em 0.8em;
	border-radius: var(--bs-radius-button);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--bs-accent);
}

.bs-badge--sold {
	background: #b3261e;
	position: static;
}

.bs-card__art .bs-badge--sold {
	position: absolute;
}

.bs-card--sold .bs-card__art {
	filter: grayscale(0.7);
}

.bs-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
	flex: 1;
}

.bs-card__title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
}

.bs-card__title a {
	text-decoration: none;
	color: inherit;
}

.bs-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.82rem;
	color: var(--bs-text-muted);
}

.bs-card__producer {
	font-weight: 600;
	color: var(--bs-primary);
}

.bs-card__desc {
	margin: 0;
	font-size: 0.88rem;
	color: var(--bs-text-muted);
}

.bs-card__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.bs-price {
	font-weight: 700;
}

.bs-price--sold {
	color: #b3261e;
	font-weight: 700;
}

.bs-empty,
.bs-hint {
	color: var(--bs-text-muted);
}

.bs-load-more-wrap {
	text-align: center;
	margin: 8px 0 16px;
}

.bs-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.bs-pagination .page-numbers {
	padding: 0.4em 0.85em;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-button);
	text-decoration: none;
}

.bs-pagination .page-numbers.current {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	color: #fff;
}

/* ------------------------------------------------------------------
 * Full player
 * ---------------------------------------------------------------- */

.bs-player {
	display: flex;
	gap: 20px;
	border-radius: var(--bs-radius);
	padding: 20px;
	margin: 0 0 28px;
	align-items: center;
	flex-wrap: wrap;
}

.bs-player--dark {
	background: var(--bs-dark);
	color: #f3f4f6;
}

.bs-player--dark .bs-text-muted,
.bs-player--dark .bs-player__meta {
	color: #9ca3af;
}

.bs-player--light {
	background: #f3f4f6;
	color: #111827;
	border: 1px solid var(--bs-border);
}

/* Match-theme player: inherits the active theme's surface and text colors. */
.bs-player--theme {
	background: var(--bs-surface);
	color: var(--bs-text);
	border: 1px solid var(--bs-border);
}

.bs-player--theme .bs-player__meta,
.bs-sticky.bs-player--theme .bs-sticky__meta {
	color: inherit;
	opacity: 0.7;
}

.bs-player__art {
	flex: 0 0 132px;
}

.bs-player__art img,
.bs-player__art .bs-card__art-placeholder {
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.bs-player__art .bs-card__art-placeholder {
	background: linear-gradient(135deg, var(--bs-primary), var(--bs-dark-2));
	display: flex;
}

.bs-player__main {
	flex: 1;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bs-player__title {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
}

.bs-player__meta {
	font-size: 0.9rem;
}

.bs-player__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bs-player__timeline,
.bs-sticky__timeline {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 160px;
}

.bs-seek,
.bs-volume {
	appearance: none;
	-webkit-appearance: none;
	height: 6px;
	border-radius: 3px;
	background: rgba(128, 128, 150, 0.35);
	flex: 1;
	cursor: pointer;
	min-width: 60px;
}

.bs-seek::-webkit-slider-thumb,
.bs-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bs-accent);
	border: 0;
	cursor: pointer;
}

.bs-seek::-moz-range-thumb,
.bs-volume::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bs-accent);
	border: 0;
	cursor: pointer;
}

.bs-time {
	font-variant-numeric: tabular-nums;
	font-size: 0.82rem;
	min-width: 38px;
	text-align: center;
}

.bs-player__volume {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 1 130px;
}

.bs-player__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bs-player__no-preview {
	font-style: italic;
	color: var(--bs-text-muted);
}

/* ------------------------------------------------------------------
 * Sticky mini-player
 * ---------------------------------------------------------------- */

.bs-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 24px;
	border-top: 3px solid var(--bs-accent);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

.bs-sticky.bs-player--dark {
	background: var(--bs-dark);
	color: #f3f4f6;
}

.bs-sticky.bs-player--light {
	background: #fff;
	color: #111827;
	border-top: 1px solid var(--bs-border);
}

.bs-sticky.bs-player--theme {
	background: var(--bs-surface);
	color: var(--bs-text);
	border-top: 1px solid var(--bs-border);
}

body.bs-has-sticky {
	padding-bottom: 76px;
}

.bs-sticky__art {
	width: 52px;
	height: 52px;
	border-radius: 0;
	border: 2px solid var(--bs-accent);
	object-fit: cover;
}

.bs-sticky__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 1 220px;
}

.bs-sticky__title {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs-sticky__meta {
	font-size: 0.78rem;
	color: #9ca3af;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs-sticky__controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.bs-sticky .bs-play {
	width: 42px;
	height: 42px;
}

.bs-sticky__volume {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 1 120px;
}

.bs-sticky__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

@media (max-width: 782px) {
	.bs-sticky__volume,
	.bs-sticky__art {
		display: none;
	}

	.bs-sticky {
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 14px;
	}

	/* Two rows on a phone: title + actions, then the transport underneath.
	   The timeline is nested inside .bs-sticky__controls, so it has to be
	   laid out there — a flex-basis on the timeline alone did nothing at the
	   .bs-sticky level, which is why the controls ran off the screen edge. */
	/* This is a column flex box. Centred cross-axis alignment made an
	   over-wide child overflow BOTH edges, so the clip ate the start of the
	   title as well as the end. Stretch it and let the text ellipsise. */
	.bs-sticky__info {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
		align-items: stretch;
	}

	.bs-sticky__meta-wrap {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	/* Truncate rather than run underneath the Buy button. */
	.bs-sticky__title,
	.bs-sticky__meta {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* min-width holds the block at its content width. Without it the row
	   under-allocated the actions and the Buy button spilled back over the
	   title, hiding the end of it instead of letting it ellipsise. */
	.bs-sticky__actions {
		order: 2;
		margin-left: auto;
		flex: 0 0 auto;
		min-width: max-content;
		gap: 4px;
	}

	/* Favouriting is on every card and on the beat page; on a phone the row
	   is better spent on the title and the Buy button. */
	.bs-sticky__favorite {
		display: none;
	}

	/* Sized to fit beside the title. The offset shadow is dropped here: at
	   this size it reads as the button bleeding into the text. */
	.bs-sticky__buy {
		flex: 0 0 auto;
		font-size: 0.68rem;
		padding: 0.45rem 0.6rem;
		white-space: nowrap;
		box-shadow: none;
	}

	.bs-sticky__info {
		padding-right: 6px;
	}

	.bs-sticky__controls {
		order: 3;
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		flex-wrap: nowrap;
		gap: 8px;
	}

	/* The scrubber must keep a usable width: without a floor it absorbs all
	   the row's shrinkage and collapses to a few pixels. */
	.bs-sticky__timeline {
		flex: 1 1 110px;
		min-width: 90px;
	}

	.bs-sticky__controls .bs-prev,
	.bs-sticky__controls .bs-next,
	.bs-sticky__controls .bs-play {
		flex: 0 0 auto;
	}

	.bs-sticky .bs-time {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 0.72rem;
	}

	.bs-sticky__close {
		margin-left: 0.5rem !important;
	}

	body.bs-has-sticky {
		padding-bottom: 120px;
	}
}

@media (max-width: 420px) {
	.bs-sticky .bs-play {
		width: 38px;
		height: 38px;
	}

	.bs-sticky__controls {
		gap: 6px;
	}

	/* Elapsed/duration is the first thing to go: the scrubber is worth more
	   than the numbers on a narrow screen. */
	.bs-sticky .bs-time {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Single beat page
 * ---------------------------------------------------------------- */

.bs-single__details {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 24px 0;
}

.bs-single__detail {
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	padding: 10px 14px;
}

.bs-single__detail dt {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-text-muted);
	margin: 0 0 2px;
}

.bs-single__detail dd {
	margin: 0;
	font-weight: 600;
}

.bs-notice {
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 600;
}

.bs-notice--sold {
	background: rgba(179, 38, 30, 0.12);
	color: #b3261e;
	border: 1px solid rgba(179, 38, 30, 0.4);
}

.bs-option-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
	margin: 16px 0 8px;
}

.bs-option-card {
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.bs-option-card--exclusive {
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 1px var(--bs-accent);
}

.bs-option-card__name {
	margin: 0;
	font-size: 1.05rem;
}

.bs-option-card__price {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--bs-primary);
}

.bs-option-card__formats {
	margin: 0;
	font-size: 0.85rem;
	color: var(--bs-text-muted);
}

.bs-option-card .bs-buy {
	margin-top: auto;
	justify-content: center;
}

/* ------------------------------------------------------------------
 * License table
 * ---------------------------------------------------------------- */

.bs-license-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 16px 0;
}

.bs-license-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
	font-size: 0.92rem;
}

.bs-license-table th,
.bs-license-table td {
	border: 1px solid var(--bs-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.bs-license-table thead th {
	background: rgba(128, 128, 150, 0.08);
	font-size: 1rem;
}

.bs-license-table__price {
	display: block;
	color: var(--bs-primary);
	font-weight: 800;
	margin-top: 2px;
}

.bs-license-table__exclusive {
	background: rgba(245, 158, 11, 0.12) !important;
}

/* ------------------------------------------------------------------
 * Share buttons
 * ---------------------------------------------------------------- */

.bs-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bs-share-button {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	border-radius: var(--bs-radius-button);
	background: transparent;
	color: inherit;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
}

.bs-share-button:hover {
	background: rgba(128, 128, 150, 0.12);
	color: inherit;
}

/* ------------------------------------------------------------------
 * Buy modal
 * ---------------------------------------------------------------- */

.bs-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 16, 0.65);
}

.bs-modal__panel {
	position: relative;
	background: var(--bs-surface);
	color: var(--bs-text);
	border-radius: 14px;
	width: min(680px, 100%);
	max-height: min(86vh, 900px);
	overflow-y: auto;
	padding: 26px 26px 30px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

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

.bs-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
}

.bs-modal__title {
	margin: 0 30px 2px 0;
	font-size: 1.4rem;
}

.bs-modal__subtitle {
	margin: 0 0 18px;
	color: var(--bs-text-muted);
}

.bs-modal__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bs-modal__option {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name price" "files price";
	gap: 2px 14px;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--bs-border);
	border-radius: 10px;
	background: var(--bs-surface);
	color: var(--bs-text);
	cursor: pointer;
	font: inherit;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.bs-modal__option:hover {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 1px var(--bs-primary);
}

.bs-modal__option--exclusive {
	border-color: var(--bs-accent);
}

.bs-modal__option-name {
	grid-area: name;
	font-weight: 700;
}

.bs-modal__option-files {
	grid-area: files;
	font-size: 0.85rem;
	color: var(--bs-text-muted);
}

.bs-modal__option-price {
	grid-area: price;
	align-self: center;
	font-weight: 800;
	color: var(--bs-primary);
	white-space: nowrap;
}

.bs-modal__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 0 0 12px;
}

.bs-modal__summary > div {
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	padding: 8px 12px;
}

.bs-modal__summary dt,
.bs-modal__usage dt {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-text-muted);
	margin: 0;
}

.bs-modal__summary dd,
.bs-modal__usage dd {
	margin: 0;
	font-weight: 600;
}

.bs-modal__usage dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin: 0 0 12px;
}

.bs-modal__terms {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	padding: 12px 14px;
	white-space: pre-wrap;
	font-size: 0.85rem;
	background: rgba(128, 128, 150, 0.06);
}

.bs-modal__accept {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 14px 0;
	font-weight: 600;
}

.bs-modal__accept input {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.bs-modal__buyer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.bs-required {
	color: #b3261e;
}

.bs-modal__error {
	color: #b3261e;
	font-weight: 600;
}

.bs-modal__pay {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.bs-modal__card {
	border: 2px solid #0c0c0c;
	padding: 14px;
	margin: 14px 0;
	background: #ffffff;
	min-height: 56px;
}

.bs-modal__amount {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.bs-modal__secure {
	font-size: 0.78rem;
	color: #555;
	margin-top: 12px;
}

.bs-modal__secure i {
	color: #0c0c0c;
	margin-right: 6px;
}

.bs-modal__done {
	font-size: 1.05rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Account
 * ---------------------------------------------------------------- */

.bs-account section {
	margin-bottom: 32px;
}

.bs-table-wrap {
	overflow-x: auto;
}

.bs-account-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.bs-account-table th,
.bs-account-table td {
	border-bottom: 1px solid var(--bs-border);
	padding: 10px 12px;
	text-align: left;
}

/* ------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.bs-card,
	.bs-play,
	.bs-button {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Gallery layout — structural grid only. ALL visual styling for cards
 * comes from beat-store-skin.css (client-authored, authoritative).
 * ---------------------------------------------------------------- */

.bs-catalog--gallery .bs-grid {
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 4rem 3rem;
}

.bs-catalog--gallery .bs-badge--featured {
	display: none;
}

.bs-card__price {
	font-weight: 700;
	letter-spacing: 0.1em;
	font-size: 1.1rem;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.bs-catalog--gallery .bs-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

/* Provenance visuals live in beat-store-skin.css; only layout-mode
   visibility is handled here. */

.bs-catalog--list .bs-card__madefor,
.bs-catalog--list .bs-card__provenance {
	display: none;
}

.bs-single__story {
	max-width: 680px;
	margin: 36px 0;
	padding-left: 22px;
	border-left: 3px solid var(--bs-accent);
}

.bs-single__story-text {
	font-size: 1.02rem;
	line-height: 1.8;
}

.bs-single__madefor {
	font-style: italic;
	font-weight: 600;
}

.bs-single__liveuntil {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bs-text-muted);
}

.bs-single__liveuntil::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bs-accent);
	margin-right: 8px;
}

.bs-single__signature {
	font-size: 1.6rem;
	text-align: right;
	margin: 10px 0 0;
}

/* Font Awesome state toggles for the approved icon markup */
.bs-play.is-playing .fa-play::before {
	content: "\f04c"; /* pause */
}

.bs-favorite.is-active .fa-heart {
	font-weight: 900; /* solid heart */
	color: #e0245e;
}

/* Approved frontend: decorative dot grid on the hero's right side
   (hidden lg:block / opacity-30 / radial-gradient dots / left fade mask). */
.bs-hero-dots {
	position: absolute;
	top: 25%;
	right: 0;
	width: 33.333%;
	height: 50%;
	opacity: 0.3;
	pointer-events: none;
	display: none;
	background-image: radial-gradient(#ffffff 2px, transparent 2px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(to right, transparent, black);
	mask-image: linear-gradient(to right, transparent, black);
}

@media (min-width: 1024px) {
	.bs-hero-dots {
		display: block;
	}
}

/* Approved frontend: Load More is white with black text, inverting to
   black/gold on hover (bg-white text-black hover:bg-brand-black
   hover:text-brand-gold !px-12). Compound selector so it wins over the
   skin's gold .bs-button default. */
.bs-button.bs-load-more {
	padding-left: 3rem;
	padding-right: 3rem;
	background: #ffffff;
	color: #000000;
}

.bs-button.bs-load-more:hover {
	background: #0c0c0c;
	color: #fcbb45;
}

/* Desktop breathing room for the hero headline: the approved file pads its
   large-screen containers to 3rem (lg:px-12); the hero section itself only
   carries px-6, which leaves the display type nearly touching the viewport
   edge. Add the difference on the inner wrapper at the lg breakpoint. */
@media (min-width: 1024px) {
	.bs-hero-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Star ratings (logged-in users can vote; everyone sees the average) */
.bs-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bs-rating__stars {
	display: inline-flex;
	gap: 4px;
}

.bs-rating__star {
	background: none;
	border: 0;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1;
	color: #d0d0d0;
	transition: color 0.15s ease, transform 0.15s ease;
}

.bs-rating__star.is-filled {
	color: #fcbb45;
}

.bs-rating[data-can-rate] .bs-rating__star {
	cursor: pointer;
}

.bs-rating[data-can-rate] .bs-rating__star:hover {
	transform: scale(1.15);
	color: #fcbb45;
}

.bs-rating__meta {
	font-weight: 700;
}

.bs-rating__login {
	text-decoration: underline;
}

/* Studio cross-sell band (record / mix & master / podcast) — same design
   language as the hero: black ground, gold accents, Impact display type,
   mono body, bordered cards with the gold offset-shadow hover. */
.bs-studio-promo {
	background: #ffffff;
	color: #0c0c0c;
	padding: 5rem 1.5rem;
	border-top: 3px solid #0c0c0c;
}

.bs-studio-promo__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.bs-studio-promo__title {
	font-family: Impact, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	font-size: clamp(2rem, 5vw, 4rem);
	margin: 0 0 1rem;
}

.bs-studio-promo__title-outline {
	-webkit-text-stroke: 2px #0c0c0c;
	color: transparent;
}

.bs-studio-promo__title-solid {
	color: #fcbb45;
}

.bs-studio-promo__subtitle {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.85rem;
	color: #0c0c0c;
	margin: 0 0 3rem;
}

.bs-studio-promo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
}

.bs-studio-promo__card {
	border: 2px solid rgba(12, 12, 12, 0.16);
	padding: 2rem;
	transition: all 0.2s ease;
}

.bs-studio-promo__card:hover {
	border-color: #fcbb45;
	box-shadow: 8px 8px 0 #fcbb45;
	transform: translate(-4px, -4px);
}

.bs-studio-promo__card i {
	color: #fcbb45;
	font-size: 1.6rem;
	margin-bottom: 1.25rem;
	display: block;
}

.bs-studio-promo__card h3 {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 1rem;
	margin: 0 0 0.75rem;
	color: #0c0c0c;
}

.bs-studio-promo__card p {
	font-size: 0.85rem;
	line-height: 1.7;
	color: #0c0c0c;
	margin: 0;
}

.bs-studio-promo__actions {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.bs-studio-promo__session {
	color: #0c0c0c;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bs-studio-promo__session:hover {
	color: #fcbb45;
}

/* Single beat: finish-it-here note under the licensing options */
.bs-studio-note {
	border: 2px solid #0c0c0c;
	border-left: 8px solid #fcbb45;
	padding: 1.1rem 1.4rem;
	margin: 18px 0;
	font-size: 0.85rem;
	line-height: 1.7;
}

.bs-studio-note a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Standalone storefront page: the approved frontend's own chrome.
 * Body is pure white after the dark hero, per the approved file.
 * ---------------------------------------------------------------- */

body.bs-standalone {
	margin: 0;
	background: #ffffff;
	color: #0c0c0c;
	-webkit-font-smoothing: antialiased;
}

/* The store surface is always the approved white — never the theme's
   background, even when embedded in a dark theme. */
.bs-store-wrapper {
	background: #ffffff;
	color: #0c0c0c;
}

/* Nav (approved file: absolute over the dark hero, thin bottom hairline) */
.bs-site-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 40;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.admin-bar .bs-site-nav {
	top: 32px;
}

.bs-site-nav__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 7rem;
}

.bs-site-nav__logo {
	color: #ffffff;
	font-family: Impact, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -0.02em;
	font-size: 2rem;
	text-shadow: 2px 2px 0 #fcbb45;
	text-decoration: none;
}

.bs-site-nav__links {
	display: none;
	align-items: center;
	gap: 2.5rem;
}

.bs-site-nav__links a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bs-site-nav__links a:hover {
	color: #fcbb45;
}

.bs-site-nav__links a.is-current {
	color: #fcbb45;
	border-bottom: 2px solid #fcbb45;
	padding-bottom: 4px;
}

.bs-site-nav__book {
	display: none;
	border: 2px solid #fcbb45;
	color: #fcbb45;
	background: transparent;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.8rem;
	padding: 0.75rem 1.5rem;
	transition: all 0.2s ease;
}

.bs-site-nav__book:hover {
	background: #fcbb45;
	color: #0c0c0c;
}

@media (min-width: 768px) {
	.bs-site-nav__links,
	.bs-site-nav__book {
		display: inline-flex;
	}
}

/* Phones: logo, then the links on one centred row under it. What made the
   old header clutter was the cart button and the cart box over the hero,
   not the links — those are how anyone reaches Events and About. The
   studio CTA stays off: Studios is one of the links now. */
@media (max-width: 767px) {
	.bs-site-nav__inner {
		flex-wrap: wrap;
		justify-content: center;
		height: auto;
		row-gap: 0.6rem;
		padding-top: 0.9rem;
		padding-bottom: 0.9rem;
	}

	.bs-site-nav__links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		gap: 0.5rem 1.1rem;
	}

	.bs-site-nav__actions {
		display: none;
	}
}

/* Footer (approved file: black ground, 8px gold top border, mono copy) */
.bs-site-footer {
	background: #0c0c0c;
	color: #ffffff;
	padding: 6rem 1.5rem 3rem;
	border-top: 8px solid #fcbb45;
}

.bs-site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

@media (min-width: 768px) {
	.bs-site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

.bs-site-footer__title {
	font-family: Impact, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1.875rem;
	margin: 0 0 1.5rem;
}

.bs-site-footer__desc {
	color: #9ca3af;
	font-size: 0.875rem;
	line-height: 2;
	max-width: 28rem;
	margin: 0;
}

.bs-site-footer__meta {
	margin-top: 2rem;
	color: #6b7280;
	font-size: 0.75rem;
}

.bs-site-footer__meta p {
	margin: 0 0 0.5rem;
}

.bs-site-footer__side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@media (min-width: 768px) {
	.bs-site-footer__side {
		align-items: flex-end;
	}
}

.bs-site-footer__links {
	display: flex;
	gap: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.75rem;
	font-weight: 700;
}

.bs-site-footer__links a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bs-site-footer__links a:hover {
	color: #fcbb45;
}

.bs-site-footer__copyright {
	color: #4b5563;
	margin: 3rem 0 0;
	font-size: 0.75rem;
}

/* Inline checkout panel (replaces the popup) */
.bs-checkout {
	border: 3px solid #0c0c0c;
	background: #ffffff;
	padding: 28px;
	margin: 28px 0;
}

.bs-checkout[hidden] {
	display: none;
}

/* The hidden attribute must always win over class display rules (buttons
   and steps are toggled via [hidden] by the player script). */
.bs-store-wrapper [hidden],
.bs-single [hidden],
.bs-account [hidden],
.bs-favorites [hidden],
.bs-checkout [hidden],
.bs-modal [hidden],
.bs-player [hidden],
.bs-sticky[hidden],
.bs-sticky [hidden],
.bs-cart[hidden],
.bs-cart [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------
 * Content width — client request: narrower and centered, not stretched
 * edge to edge on wide/full-width pages. Hero, marquee, and the studio
 * band stay full-bleed; their inner content shares this container.
 * Higher specificity than the skin so the skin file stays verbatim.
 * ---------------------------------------------------------------- */

:root {
	--bs-container: 1200px;
	--bs-gutter: 2rem;
}

.bs-store-wrapper .bs-catalog,
.bs-store-wrapper .bs-hero-inner,
.bs-store-wrapper .bs-studio-promo__inner,
.bs-site-nav .bs-site-nav__inner,
.bs-site-footer .bs-site-footer__inner {
	max-width: var(--bs-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bs-gutter);
	padding-right: var(--bs-gutter);
}

/* The hero copy block sits inside the same container. */
.bs-store-wrapper .bs-hero-inner > div {
	max-width: 44rem;
}

@media (max-width: 768px) {
	:root {
		--bs-gutter: 1.25rem;
	}
}

/* Provenance row: keep the on-view label on one line inside narrower
   cards so it never collides with the signature. */
.bs-store-wrapper .bs-card__liveuntil {
	white-space: nowrap;
	font-size: 0.7rem;
}

.bs-store-wrapper .bs-card__provenance {
	gap: 12px;
}

/* ------------------------------------------------------------------
 * Theme-proofing: themes commonly set `img { height: auto }` and style
 * every <button>, which broke the cover art (leaving dead space under
 * each thumbnail) and repainted the play button in the theme's colour.
 * These rules restore the approved design without touching the skin.
 * ---------------------------------------------------------------- */

.bs-store-wrapper .bs-card__art,
.bs-single .bs-card__art {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	line-height: 0;
}

.bs-store-wrapper .bs-card__art img,
.bs-single .bs-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.bs-store-wrapper .bs-card__art .bs-play,
.bs-single .bs-card__art .bs-play,
.bs-sticky .bs-play {
	background: #0c0c0c;
	color: #fcbb45;
	border: 2px solid #0c0c0c;
	border-radius: 0;
	text-shadow: none;
}

.bs-store-wrapper .bs-card__art .bs-play:hover,
.bs-single .bs-card__art .bs-play:hover {
	background: #fcbb45;
	color: #0c0c0c;
}

.bs-store-wrapper .bs-card {
	background: #ffffff;
}

/* Hero: keep the outlined and solid lines from colliding — the approved
   file stacks them tightly, which overlaps once the theme's line-height
   applies. */
.bs-store-wrapper .bs-hero-title-outline {
	margin-bottom: 0.75rem;
}

.bs-store-wrapper .bs-hero-title-outline,
.bs-store-wrapper .bs-hero-title-solid {
	line-height: 1;
	padding-bottom: 0.08em;
}

/* ------------------------------------------------------------------
 * Cart drawer
 * ---------------------------------------------------------------- */

.bs-cart-button {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	width: 60px;
	height: 60px;
	border: 3px solid #0c0c0c;
	background: #fcbb45;
	color: #0c0c0c;
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: 6px 6px 0 #0c0c0c;
}

body.bs-has-sticky .bs-cart-button {
	bottom: 110px;
}

/* The player takes two rows on a phone, so the drawer button has to clear a
   taller bar. Declared after the desktop rule above, which would otherwise
   win on source order. */
@media (max-width: 782px) {
	body.bs-has-sticky .bs-cart-button {
		bottom: 162px;
	}
}

/* ------------------------------------------------------------------
 * Cart access on phones
 *
 * Nothing cart-shaped sits over the page or in the header on a phone. The
 * earlier rule only hid the floating button on the plugin's own standalone
 * page, so a store embedded in the theme still had it drifting over the
 * hero. It is hidden on every phone now, header and all.
 *
 * The cart is still reachable: it opens itself when a beat is added, and
 * the player's BUY button — pinned to the bottom of the screen — adds the
 * beat that is playing and opens it.
 * ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.bs-cart-button,
	body.bs-has-sticky .bs-cart-button,
	.bs-standalone .bs-cart-button,
	body.bs-has-sticky.bs-standalone .bs-cart-button {
		display: none !important;
	}
}

.bs-cart-button__count {
	position: absolute;
	top: -10px;
	right: -10px;
	min-width: 26px;
	height: 26px;
	line-height: 22px;
	background: #0c0c0c;
	color: #fcbb45;
	border: 2px solid #fcbb45;
	font-size: 0.75rem;
	font-weight: 700;
}

.bs-cart[hidden] {
	display: none;
}

.bs-cart__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(12, 12, 12, 0.6);
	z-index: 100000;
}

.bs-cart__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(620px, 100%);
	background: #ffffff;
	color: #0c0c0c;
	border-left: 4px solid #0c0c0c;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	font-family: "Space Mono", "IBM Plex Mono", monospace;
}

.bs-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 2.5rem;
	border-bottom: 3px solid #0c0c0c;
}

.bs-cart__title {
	font-family: Impact, sans-serif;
	font-size: 1.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}

.bs-cart__close {
	background: none;
	border: 0;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: #0c0c0c;
}

.bs-cart__body {
	flex: 1;
	overflow-y: auto;
	padding: 2.5rem;
}

.bs-cart__step-title {
	margin-top: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

.bs-cart-line {
	display: grid;
	grid-template-columns: 92px 1fr auto;
	gap: 1.5rem;
	padding: 2rem 0;
	border-bottom: 1px solid rgba(12, 12, 12, 0.12);
}

.bs-cart-line:first-child {
	padding-top: 0.5rem;
}

.bs-cart-line:last-child {
	border-bottom: 0;
}

.bs-cart-line__art {
	width: 92px;
	height: 92px;
	border: 2px solid #0c0c0c;
	overflow: hidden;
	background: #f4f4f4;
}

.bs-cart-line__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bs-cart-line__title {
	display: block;
	line-height: 1.5;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.9rem;
	color: #0c0c0c;
	text-decoration: none;
	margin-bottom: 0.5rem;
}

.bs-cart-line__license {
	margin-top: 0.35rem;
	width: 100%;
	border: 2px solid #0c0c0c;
	border-radius: 0;
	padding: 0.5rem;
	font-family: inherit;
	font-size: 0.8rem;
	background: #ffffff;
}

.bs-cart-line__formats {
	font-size: 0.7rem;
	color: #555;
	margin: 0.6rem 0 0;
	letter-spacing: 0.08em;
}

.bs-cart-line__upsells {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bs-cart-upsell {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name price"
		"why why";
	align-items: center;
	gap: 0.35rem 0.75rem;
	text-align: left;
	background: #fff8e9;
	border: 2px dashed #fcbb45;
	padding: 0.6rem 0.75rem;
	cursor: pointer;
	font-family: inherit;
}

.bs-cart-upsell:hover {
	background: #fcbb45;
}

.bs-cart-upsell {
	padding: 0.9rem 1rem;
}

.bs-cart-upsell__name {
	grid-area: name;
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.bs-cart-upsell__price {
	grid-area: price;
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
}

.bs-cart-upsell__why {
	grid-area: why;
	font-size: 0.72rem;
	line-height: 1.5;
	color: #444;
}

.bs-cart-line__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
}

.bs-cart-line__price {
	font-weight: 700;
	font-size: 1rem;
}

.bs-cart-line__remove {
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #777;
	cursor: pointer;
	font-family: inherit;
}

.bs-cart-line__remove:hover {
	color: #b3261e;
}

.bs-cart__fields {
	display: grid;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.bs-cart__terms {
	max-height: 260px;
	overflow-y: auto;
	border: 2px solid #0c0c0c;
	padding: 1rem;
	background: #fafafa;
	margin-bottom: 1rem;
}

.bs-cart-terms__block + .bs-cart-terms__block {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(12, 12, 12, 0.2);
}

.bs-cart-terms__block h4 {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 0.5rem;
}

.bs-cart-terms__text {
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 0.75rem;
	line-height: 1.7;
	margin: 0;
}

.bs-cart__accept {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.8rem;
	line-height: 1.5;
}

.bs-cart__card {
	border: 2px solid #0c0c0c;
	padding: 1rem;
	min-height: 60px;
	background: #ffffff;
}

.bs-cart__secure {
	font-size: 0.72rem;
	color: #555;
	margin-top: 0.75rem;
}

.bs-cart__error {
	color: #b3261e;
	font-weight: 700;
	font-size: 0.8rem;
	margin-top: 0.75rem;
}

.bs-cart__done {
	font-size: 0.95rem;
	line-height: 1.7;
}

.bs-cart__foot {
	border-top: 3px solid #0c0c0c;
	padding: 1.75rem 2.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.bs-cart__total {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.bs-cart__total strong {
	font-size: 1.4rem;
	letter-spacing: 0.04em;
}

.bs-cart__checkout[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.bs-add-to-cart.is-in-cart::after {
	content: " ✓";
}

body.bs-cart-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.bs-cart-line {
		grid-template-columns: 64px 1fr;
	}

	.bs-cart-line__side {
		grid-column: 2;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Single beat: one purchase row (license choice happens in the cart) */
.bs-single__buy {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	border-top: 3px solid #0c0c0c;
	border-bottom: 3px solid #0c0c0c;
	padding: 1.5rem 0;
	margin: 2rem 0;
}

.bs-single__buy .bs-price {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.bs-single__buy-hint {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #666;
}

/* ------------------------------------------------------------------
 * Impact has no bold face. Asking for 700/900 makes browsers synthesize
 * one by drawing the glyph twice with an offset — the "words on top of
 * words" doubling. Impact is already heavy, so let it render at its
 * natural weight everywhere the approved design uses it.
 * ---------------------------------------------------------------- */

.bs-store-wrapper .bs-hero-title-outline,
.bs-store-wrapper .bs-hero-title-solid,
.bs-store-wrapper .bs-catalog-title,
.bs-store-wrapper .bs-studio-promo__title,
.bs-standalone .bs-site-nav__logo,
.bs-standalone .bs-site-footer__title,
.bs-cart__title,
.bs-single h2 {
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	paint-order: stroke fill;
}

/* The outlined hero line draws its weight with the stroke, not the face. */
.bs-store-wrapper .bs-hero-title-outline {
	-webkit-text-stroke-width: 2px;
}

/* ------------------------------------------------------------------
 * Phones
 *
 * The headline is set at line-height 1 so the stacked lines read as one
 * block on a wide screen. On a phone the same headline wraps to three or
 * four lines, and with no leading at all those lines close up until the
 * words look stacked on top of each other. Give them air, and step the
 * size down so fewer lines are needed in the first place.
 * ---------------------------------------------------------------- */

@media (max-width: 768px) {
	.bs-store-wrapper .bs-hero-title-outline,
	.bs-store-wrapper .bs-hero-title-solid {
		line-height: 1.08;
		padding-bottom: 0.12em;
	}

	.bs-store-wrapper .bs-hero-title-outline {
		margin-bottom: 0.5rem;
		-webkit-text-stroke-width: 1.5px;
	}

	/* Nothing inside the store may push the page sideways. */
	.bs-store-wrapper,
	.bs-site-nav,
	.bs-site-footer {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* The nav is absolute over the hero and takes two rows on a phone, so the
	   hero has to start below it. */
	.bs-store-wrapper .bs-hero-section {
		padding-top: 13.5rem;
	}
}

@media (max-width: 480px) {
	.bs-store-wrapper .bs-hero-title-outline,
	.bs-store-wrapper .bs-hero-title-solid {
		font-size: clamp(2rem, 11vw, 2.75rem);
	}

	/* The lettering fallback wraps to two lines on a narrow screen, and at
	   line-height 1 the second line collides with the first. */
	.bs-standalone .bs-site-nav__logo {
		font-size: 1.15rem;
		line-height: 1.15;
	}

	.bs-site-nav__links {
		gap: 1rem;
	}

	.bs-site-nav__links a {
		font-size: 0.7rem;
		letter-spacing: 0.1em;
	}

	.bs-site-nav__logo img,
	.bs-site-nav__logo-img {
		height: 54px !important;
		width: auto !important;
	}
}

/* Cart button: always present, labelled, dimmed while empty */
.bs-cart-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: auto;
	min-width: 74px;
	height: 74px;
	padding: 0 12px;
	font-family: "Space Mono", monospace;
}

.bs-cart-button__label {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bs-cart-button.is-empty {
	background: #ffffff;
	color: #0c0c0c;
}

.bs-cart-button.is-empty .bs-cart-button__count {
	background: #0c0c0c;
	color: #ffffff;
	border-color: #0c0c0c;
}

/* Real logo in the store header/footer */
.bs-site-nav__logo--image {
	display: inline-flex;
	align-items: center;
	text-shadow: none;
}

.bs-site-nav__logo img {
	display: block;
	width: auto;
	height: 62px;
	max-width: 220px;
	object-fit: contain;
}

.bs-site-footer__logo {
	display: block;
	width: auto;
	height: 64px;
	max-width: 230px;
	object-fit: contain;
	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.bs-site-nav__logo img {
		height: 46px;
	}
}

/* ------------------------------------------------------------------
 * Palette lock. Themes style every button/input/link globally, which is
 * how their blue leaked into the cart and option rows. Inside the store
 * and the cart, only the approved black / white / gold is allowed —
 * unless the element carries a class that sets its own colours.
 * ---------------------------------------------------------------- */

.bs-store-wrapper button,
.bs-store-wrapper select,
.bs-store-wrapper input,
.bs-store-wrapper a,
.bs-cart button,
.bs-cart select,
.bs-cart input,
.bs-cart a,
.bs-cart-button {
	background-image: none;
	text-shadow: none;
	border-radius: 0;
}

.bs-store-wrapper button:not(.bs-button):not(.bs-play):not(.bs-buy):not(.bs-rating__star),
.bs-cart button:not(.bs-button):not(.bs-play):not(.bs-cart-upsell) {
	background-color: transparent;
	color: #0c0c0c;
	box-shadow: none;
}

.bs-cart .bs-button,
.bs-store-wrapper .bs-button,
.bs-cart-button {
	background-color: #fcbb45;
	color: #0c0c0c;
	border-color: #0c0c0c;
}

.bs-cart .bs-button:hover,
.bs-store-wrapper .bs-button:hover,
.bs-cart-button:hover {
	background-color: #0c0c0c;
	color: #fcbb45;
}

.bs-cart select,
.bs-cart input[type="text"],
.bs-cart input[type="email"] {
	background-color: #ffffff;
	color: #0c0c0c;
	border: 2px solid #0c0c0c;
}

.bs-cart__close {
	background-color: transparent;
	color: #0c0c0c;
	border: 0;
}

.bs-cart__close:hover {
	color: #fcbb45;
}

.bs-cart a,
.bs-store-wrapper .bs-card__title a {
	color: #0c0c0c;
}

.bs-cart a:hover,
.bs-store-wrapper .bs-card__title a:hover {
	color: #fcbb45;
}

/* Focus rings stay visible but on-brand. */
.bs-store-wrapper :focus-visible,
.bs-cart :focus-visible {
	outline: 3px solid #fcbb45;
	outline-offset: 2px;
}

/* ==================================================================
 * Brand palette
 *
 * One system, used consistently: ink for type, paper for the ground,
 * a warm tint for raised surfaces, gold as the single accent with a
 * darker gold for detail, and a warm muted ink for secondary text
 * (cold greys read generic next to the gold).
 * ================================================================== */

:root {
	--bs-ink: #0c0c0c;
	--bs-ink-soft: #241f1b;
	--bs-ink-muted: #453e38;
	--bs-paper: #ffffff;
	--bs-tint: #faf7f2;
	--bs-tint-gold: #fff8e9;
	--bs-gold: #fcbb45;
	--bs-gold-deep: #d9992e;
	--bs-line: rgba(12, 12, 12, 0.14);
	--bs-line-strong: #0c0c0c;
}

/* Secondary text everywhere uses the warm muted ink, not cold grey. */
.bs-store-wrapper .bs-card__meta,
.bs-store-wrapper .bs-card__desc,
.bs-store-wrapper .bs-catalog-subtitle,
.bs-cart-line__formats,
.bs-cart__secure,
.bs-cart-upsell__why,
.bs-single__buy-hint {
	color: var(--bs-ink-muted);
}

.bs-store-wrapper .bs-card__desc,
.bs-store-wrapper .bs-card__madefor {
	color: var(--bs-ink-soft);
}

/* Raised surfaces get the warm tint instead of flat white-on-white. */
.bs-cart__terms,
.bs-cart-line__license,
.bs-cart__card {
	background-color: var(--bs-tint);
}

.bs-cart-upsell {
	background: var(--bs-tint-gold);
	border-color: var(--bs-gold);
}

.bs-cart-upsell:hover {
	background: var(--bs-gold);
	border-style: solid;
}

.bs-cart-upsell__price,
.bs-cart-upsell__name {
	color: var(--bs-ink);
}

/* Gold is the accent, deep gold is the detail: hovers, rules, marks. */
.bs-store-wrapper .bs-card__liveuntil::before {
	background: var(--bs-gold);
}

.bs-store-wrapper .bs-card__signature,
.bs-single__signature {
	color: var(--bs-gold-deep);
}

.bs-store-wrapper .bs-catalog-title {
	position: relative;
}

.bs-store-wrapper .bs-price {
	color: var(--bs-ink);
	letter-spacing: 0.06em;
}

.bs-cart__total strong {
	color: var(--bs-ink);
}

.bs-cart__total span {
	color: var(--bs-ink-muted);
}

/* Dividers: hairline warm rules inside panels, heavy black only for the
   structural edges the design calls for. */
.bs-cart-line,
.bs-cart-terms__block + .bs-cart-terms__block {
	border-color: var(--bs-line);
}

.bs-cart__head,
.bs-cart__foot {
	border-color: var(--bs-line-strong);
}

/* Footer keeps the dark ground with warm, readable secondary text. */
.bs-site-footer__desc {
	color: #b8b0a6;
}

.bs-site-footer__meta,
.bs-site-footer__copyright {
	color: #7d746a;
}

.bs-site-footer__links a:hover,
.bs-site-nav__links a:hover {
	color: var(--bs-gold);
}

/* ------------------------------------------------------------------
 * Logo sizing. Themes commonly ship `img { height: auto !important }`,
 * which blew the store logo up to its natural size. Pin it.
 * ---------------------------------------------------------------- */

.bs-site-nav__logo {
	flex: 0 0 auto;
	max-height: 82px;
	display: inline-flex;
	align-items: center;
}

.bs-site-nav__logo img {
	height: 78px !important;
	width: auto !important;
	max-width: 260px !important;
	max-height: 78px !important;
	object-fit: contain;
}

.bs-site-footer__logo {
	height: 84px !important;
	width: auto !important;
	max-width: 280px !important;
	max-height: 84px !important;
	object-fit: contain;
}

@media (max-width: 768px) {
	.bs-site-nav__logo img {
		height: 54px !important;
		max-height: 54px !important;
		max-width: 190px !important;
	}
}

/* ------------------------------------------------------------------
 * Studio band on paper, not another dark slab: the hero and the footer
 * are the only dark grounds. Same layout, inverted to the light palette.
 * ---------------------------------------------------------------- */

.bs-studio-promo {
	background: var(--bs-paper);
	color: var(--bs-ink);
	border-top: 3px solid var(--bs-ink);
}

.bs-studio-promo__title-outline {
	-webkit-text-stroke: 2px var(--bs-ink);
	color: transparent;
}

.bs-studio-promo__title-solid {
	color: var(--bs-gold-deep);
}

.bs-studio-promo__subtitle {
	color: var(--bs-ink-muted);
}

.bs-studio-promo__card {
	border: 2px solid var(--bs-line);
	background: transparent;
}

.bs-studio-promo__card:hover {
	border-color: var(--bs-ink);
	box-shadow: 8px 8px 0 var(--bs-gold);
}

.bs-studio-promo__card i {
	color: var(--bs-gold-deep);
}

.bs-studio-promo__card h3 {
	color: var(--bs-ink);
	display: flex;
	align-items: center;
	gap: 0.6em;
}

/* One gold check per service, matching the check lists on the studio site. */
.bs-studio-promo__card .bs-studio-promo__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	border: 2px solid var(--bs-gold);
	color: var(--bs-gold-deep);
	font-size: 0.7em;
	line-height: 1;
}

.bs-studio-promo__card .bs-studio-promo__check i {
	color: inherit;
	font-size: inherit;
	margin: 0;
	display: block;
}

.bs-studio-promo__card p {
	color: var(--bs-ink-soft);
}

.bs-studio-promo__session {
	color: var(--bs-ink-muted);
}

.bs-studio-promo__session:hover {
	color: var(--bs-gold-deep);
}

/* ------------------------------------------------------------------
 * Cards: no hover theatrics. Artwork sits still and in full colour,
 * the play button stays put, and nothing about a card suggests it
 * opens anything — the only thing that opens is the cart.
 * ---------------------------------------------------------------- */

.bs-store-wrapper .bs-card__art,
.bs-store-wrapper .bs-card:hover .bs-card__art {
	transform: none;
	box-shadow: none;
	transition: none;
}

.bs-store-wrapper .bs-card__art img,
.bs-store-wrapper .bs-card:hover .bs-card__art img {
	filter: none;
	transform: none;
	transition: none;
}

.bs-store-wrapper .bs-card__art .bs-play,
.bs-store-wrapper .bs-card:hover .bs-card__art .bs-play {
	transform: translate(-50%, -50%);
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bs-store-wrapper .bs-card__art .bs-play:hover {
	background: var(--bs-gold);
	color: var(--bs-ink);
}

.bs-store-wrapper .bs-card__title {
	color: var(--bs-ink);
}

/* The nav CTA is a studio link, sized to hold the longer label on one line. */
.bs-site-nav__book {
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	padding: 0.8rem 1.1rem;
	text-align: center;
	line-height: 1;
	white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 768px) {
	/* Tight desktop widths: keep the nav on one row by trimming the CTA. */
	.bs-site-nav__book {
		font-size: 0.56rem;
		padding: 0.7rem 0.8rem;
		letter-spacing: 0.08em;
	}
}

/* ------------------------------------------------------------------
 * Store copy — hero lede, collection intro, studio steps, closing band
 * ---------------------------------------------------------------- */

/* The presenting credit sits above the hero titles: the studio presents, the
 * producer makes the beats. Small, gold, out of the way of the headline. */
.bs-store-wrapper .bs-hero-presents {
	margin: 0 0 1.1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bs-gold);
}

@media (max-width: 575px) {
	.bs-store-wrapper .bs-hero-presents {
		font-size: 0.62rem;
		letter-spacing: 0.16em;
		line-height: 1.45;
		margin-bottom: 0.85rem;
	}
}

.bs-store-wrapper .bs-hero-kicker {
	margin: 1.5rem 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bs-gold);
}

.bs-store-wrapper .bs-hero-lede {
	margin: 1rem 0 0;
	max-width: 34rem;
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
}

.bs-store-wrapper .bs-hero-cta {
	background: var(--bs-gold);
	color: var(--bs-ink);
	border: 2px solid var(--bs-gold);
	padding: 1rem 2rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

.bs-store-wrapper .bs-hero-cta:hover {
	background: transparent;
	color: var(--bs-gold);
}

.bs-store-wrapper .bs-catalog-lede {
	margin: 0.9rem 0 0;
	max-width: 38rem;
	font-size: 0.92rem;
	line-height: 1.8;
	color: var(--bs-ink-muted);
}

.bs-studio-promo__steps {
	margin: 0 0 0.5rem;
	max-width: 46rem;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--bs-ink);
}

.bs-studio-promo__oneplace {
	margin: 0 0 3rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--bs-gold-deep);
}

.bs-studio-promo__subtitle {
	margin-bottom: 1.25rem;
}

.bs-studio-promo__card-lede {
	font-weight: 700;
	color: var(--bs-ink);
	margin-bottom: 0.6rem;
}

.bs-studio-promo__card-action {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 2px solid var(--bs-line);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bs-gold-deep);
}

/* Closing call to action: black band, the page's last word. */
.bs-closer {
	background: #ffffff;
	color: var(--bs-ink);
	padding: 5rem 1.5rem;
	border-top: 3px solid var(--bs-ink);
}

.bs-closer__inner {
	max-width: var(--bs-container);
	margin: 0 auto;
	padding-left: var(--bs-gutter);
	padding-right: var(--bs-gutter);
	text-align: center;
}

.bs-closer__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.08;
	font-size: clamp(1.9rem, 5vw, 3.4rem);
	color: var(--bs-ink);
	margin: 0;
	text-wrap: balance;
}

.bs-closer__text {
	margin: 1.25rem auto 0;
	max-width: 34rem;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--bs-ink-muted);
}

.bs-closer__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

.bs-closer__actions .bs-button {
	padding: 1rem 2rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--bs-gold);
}

.bs-closer__shop {
	background: var(--bs-gold);
	color: var(--bs-ink);
}

.bs-closer__shop:hover {
	background: transparent;
	color: var(--bs-gold);
}

.bs-closer__book {
	background: transparent;
	color: var(--bs-ink);
	border-color: var(--bs-ink);
}

.bs-closer__book:hover {
	background: var(--bs-gold);
	color: var(--bs-ink);
}

@media (max-width: 600px) {
	.bs-closer {
		padding: 3.5rem 1rem;
	}

	.bs-closer__actions .bs-button {
		width: 100%;
		justify-content: center;
	}
}

/* "FROM $29.99" is one label, never broken across lines. */
.bs-store-wrapper .bs-price,
.bs-single .bs-price {
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * The Mission — an editorial block between the hero band and the
 * collection. Deliberately typographic: the card grid starts below it, so
 * this section earns its place by NOT being another row of boxes.
 * ---------------------------------------------------------------- */

.bs-mission {
	background: #ffffff;
	color: var(--bs-ink);
	padding: 6rem 1.5rem 5rem;
	border-bottom: 3px solid var(--bs-ink);
}

.bs-mission__inner {
	max-width: var(--bs-container);
	margin: 0 auto;
	padding-left: var(--bs-gutter);
	padding-right: var(--bs-gutter);
}

.bs-mission__eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bs-gold-deep);
}

.bs-mission__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.06;
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	color: var(--bs-ink);
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}

.bs-mission__lede {
	margin: 1.75rem 0 0;
	max-width: 44ch;
	font-size: 1.05rem;
	line-height: 1.7;
	font-weight: 700;
	color: var(--bs-ink);
	border-left: 6px solid var(--bs-gold);
	padding-left: 1.25rem;
}

.bs-mission__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 2.5rem;
	max-width: 68ch;
}

.bs-mission__body p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--bs-ink-soft);
}

.bs-mission__closing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 2px solid var(--bs-line);
}

.bs-mission__closing p {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bs-ink);
}

/* His actual signature, scanned. Never a script typeface pretending to be
   handwriting. */
.bs-mission__signature {
	display: block;
	height: 46px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

/* The author: one wide frame of the producer, in the design's offset block. */
.bs-mission__author {
	margin: 2.5rem 0 0;
}

.bs-mission__author img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--bs-ink);
	box-shadow: 12px 12px 0 var(--bs-gold);
}

.bs-mission__author figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.bs-mission__author-name {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.1rem, 2.2vw, 1.6rem);
	color: var(--bs-ink);
}

.bs-mission__author-role {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bs-ink-muted);
}

@media (max-width: 600px) {
	.bs-mission__author img {
		box-shadow: 8px 8px 0 var(--bs-gold);
	}

	.bs-mission__signature {
		height: 38px;
	}
}

@media (min-width: 900px) {
	/* One column, always. Two columns made three paragraphs read 1, 3, 2
	   down the page with a hole in the middle. */
}

@media (max-width: 600px) {
	.bs-mission {
		padding: 3.5rem 1rem 3rem;
	}

	.bs-mission__lede {
		font-size: 1rem;
		padding-left: 1rem;
	}
}

/* ------------------------------------------------------------------
 * Events — what's on at the studio. White ground, black rules, gold on
 * the date, so the section reads as part of the store rather than a
 * bolted-on calendar.
 * ---------------------------------------------------------------- */

.bs-events {
	background: #ffffff;
	color: var(--bs-ink);
	padding: 6rem 1.5rem;
	border-top: 3px solid var(--bs-ink);
}

.bs-events__inner {
	max-width: var(--bs-container);
	margin: 0 auto;
	padding-left: var(--bs-gutter);
	padding-right: var(--bs-gutter);
}

.bs-events__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bs-gold-deep);
}

.bs-events__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.06;
	font-size: clamp(1.8rem, 4.4vw, 3.2rem);
	color: var(--bs-ink);
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}

.bs-events__lede {
	margin: 1.1rem 0 0;
	max-width: 46ch;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--bs-ink-muted);
}

.bs-events__list {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 2px solid var(--bs-line);
}

/* A row per event: artwork, then the details. Rules rather than boxes. */
.bs-event {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding: 2rem 0;
	border-bottom: 2px solid var(--bs-line);
}

.bs-event--featured {
	border-left: 6px solid var(--bs-gold);
	padding-left: 1.5rem;
}

.bs-event__art {
	display: block;
	line-height: 0;
}

.bs-event__art img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--bs-ink);
}

.bs-event__when {
	margin: 0 0 0.6rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bs-gold-deep);
}

.bs-event__status {
	padding: 0.2rem 0.5rem;
	border: 2px solid var(--bs-ink);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	color: var(--bs-ink);
	background: transparent;
}

.bs-event__status--cancelled,
.bs-event__status--postponed {
	border-color: #b32d2e;
	color: #b32d2e;
}

.bs-event__status--sold_out {
	background: var(--bs-ink);
	color: #ffffff;
}

.bs-events .bs-event__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.08;
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	margin: 0 0 0.6rem;
}

.bs-events .bs-event__title a {
	color: var(--bs-ink);
	text-decoration: none;
}

.bs-events .bs-event__title a:hover {
	color: var(--bs-gold-deep);
}

.bs-event__where {
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bs-ink-muted);
}

.bs-event__desc {
	margin: 0 0 0.75rem;
	max-width: 60ch;
	font-size: 0.92rem;
	line-height: 1.8;
	color: var(--bs-ink-soft);
}

.bs-event__lineup {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	font-style: italic;
	color: var(--bs-ink-muted);
}

.bs-event__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.bs-event__price {
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.06em;
	color: var(--bs-ink);
}

.bs-events .bs-event__tickets {
	background: var(--bs-gold);
	color: var(--bs-ink);
	border: 2px solid var(--bs-ink);
	padding: 0.75rem 1.5rem;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.bs-events .bs-event__tickets:hover {
	background: var(--bs-ink);
	color: var(--bs-gold);
}

.bs-event__details {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bs-ink);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.bs-events__all {
	margin: 2rem 0 0;
}

.bs-events__all a {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bs-ink);
	text-decoration: underline;
	text-underline-offset: 5px;
}

@media (min-width: 780px) {
	.bs-event {
		grid-template-columns: 280px 1fr;
		gap: 2.5rem;
		align-items: start;
	}
}

@media (max-width: 600px) {
	.bs-events {
		padding: 3.5rem 1rem;
	}

	.bs-event--featured {
		padding-left: 1rem;
	}

	.bs-events .bs-event__tickets {
		width: 100%;
		text-align: center;
	}
}

/* ==================================================================
 * Companion pages — the producer's story, the mailing list.
 *
 * White ground, black type, gold accent, same as the store. The
 * biography lives here rather than on the transactional page, and every
 * one of these sections points back at the catalog.
 * ================================================================== */

.bs-mission__more {
	margin: 1.6rem 0 0;
}

.bs-mission__more a {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bs-ink);
	text-decoration: underline;
	text-decoration-color: var(--bs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.bs-mission__more a:hover,
.bs-mission__more a:focus {
	color: var(--bs-gold-deep);
}

/* The events footer holds up to two links now (all events, shop). */
.bs-events__all {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
}

/* ---- Bio page ---- */

.bs-bio {
	background: var(--bs-paper);
	color: var(--bs-ink);
	padding: 5rem 1.5rem 6rem;
}

.bs-bio__inner {
	max-width: 60rem;
	margin: 0 auto;
}

.bs-bio__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bs-gold-deep);
}

.bs-bio__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: 0.01em;
	font-size: clamp(2.2rem, 6vw, 4rem);
	margin: 0;
	color: var(--bs-ink);
}

.bs-bio__role {
	margin: 0.9rem 0 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bs-ink-muted);
}

.bs-bio__lead {
	margin: 2.5rem 0 0;
}

.bs-bio__lead img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--bs-ink);
}

.bs-bio__stats {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 1.6rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.4rem;
	border-top: 2px solid var(--bs-ink);
	border-bottom: 2px solid var(--bs-line);
}

.bs-bio__stat-value {
	display: block;
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-size: clamp(1.5rem, 3.4vw, 2.2rem);
	line-height: 1;
	color: var(--bs-ink);
}

.bs-bio__stat-label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bs-ink-muted);
}

.bs-bio__body {
	margin: 2.5rem 0 0;
	max-width: 46rem;
}

.bs-bio__body p {
	margin: 0 0 1.3rem;
	font-size: 1.02rem;
	line-height: 1.85;
	color: var(--bs-ink-soft);
}

.bs-bio__gallery {
	margin: 2.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.2rem;
}

.bs-bio__gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 2px solid var(--bs-ink);
}

.bs-bio__block {
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 2px solid var(--bs-line);
}

.bs-bio__subhead {
	margin: 0 0 1.2rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bs-ink);
}

.bs-bio__credits,
.bs-bio__highlights {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-bio__credits li,
.bs-bio__highlights li {
	padding: 0.85rem 0 0.85rem 1.4rem;
	border-bottom: 1px solid var(--bs-line);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--bs-ink-soft);
	position: relative;
}

.bs-bio__credits li::before,
.bs-bio__highlights li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 0.6rem;
	height: 2px;
	background: var(--bs-gold);
}

.bs-bio__signature {
	display: block;
	margin: 2.5rem 0 0;
	max-width: 15rem;
	height: auto;
}

.bs-bio__cta {
	margin: 3.5rem 0 0;
	padding: 2.5rem;
	background: var(--bs-tint-gold);
	border: 2px solid var(--bs-ink);
}

.bs-bio__cta-title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3.6vw, 2.4rem);
	line-height: 1.06;
	margin: 0;
	color: var(--bs-ink);
}

.bs-bio__cta-text {
	margin: 1rem 0 0;
	max-width: 44ch;
	font-size: 0.98rem;
	line-height: 1.8;
	color: var(--bs-ink-soft);
}

.bs-bio__cta-actions {
	margin: 1.8rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem;
}

.bs-bio__link {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bs-ink);
	text-decoration: underline;
	text-decoration-color: var(--bs-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.bs-bio__link:hover,
.bs-bio__link:focus {
	color: var(--bs-gold-deep);
}

/* ---- Mailing list ---- */

.bs-news {
	background: var(--bs-tint);
	color: var(--bs-ink);
	padding: 5rem 1.5rem;
	border-top: 3px solid var(--bs-ink);
}

.bs-news--page {
	background: var(--bs-paper);
	border-top: 0;
}

.bs-news__inner {
	max-width: var(--bs-container);
	margin: 0 auto;
	padding-left: var(--bs-gutter);
	padding-right: var(--bs-gutter);
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 860px) {
	.bs-news__inner {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 4rem;
	}
}

.bs-news__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bs-gold-deep);
}

.bs-news__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.06;
	font-size: clamp(1.8rem, 4.4vw, 3rem);
	margin: 0;
	color: var(--bs-ink);
}

.bs-news__lede {
	margin: 1.1rem 0 0;
	max-width: 44ch;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--bs-ink-muted);
}

.bs-news__fields {
	display: grid;
	gap: 0.5rem;
}

.bs-news__label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bs-ink-muted);
}

.bs-news__input {
	width: 100%;
	padding: 0.9rem 1rem;
	margin-bottom: 0.6rem;
	background: var(--bs-paper);
	border: 2px solid var(--bs-ink);
	border-radius: 0;
	font-size: 1rem;
	color: var(--bs-ink);
}

.bs-news__input:focus {
	outline: 3px solid var(--bs-gold);
	outline-offset: 1px;
}

.bs-news .bs-news__submit {
	margin-top: 0.4rem;
	justify-self: start;
	padding: 0.95rem 2rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
}

/* The honeypot: present for bots, gone for people and screen readers. */
.bs-news__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bs-news__status {
	margin: 1rem 0 0;
	min-height: 1.2em;
	font-size: 0.9rem;
	line-height: 1.6;
}

.bs-news__status.is-ok {
	color: var(--bs-ink);
}

.bs-news__status.is-error {
	color: #a3341f;
}

@media (max-width: 600px) {
	.bs-bio {
		padding: 3.5rem 1rem 4rem;
	}

	.bs-bio__cta {
		padding: 1.6rem;
	}

	.bs-news {
		padding: 3.5rem 1rem;
	}

	.bs-news .bs-news__submit {
		width: 100%;
		text-align: center;
	}
}

/* ==================================================================
 * Phones: bigger type, stronger colour
 *
 * The store was set at desktop sizes and read small and washed out on a
 * phone. Body copy goes up to 1rem — the size a phone browser is built
 * around — labels and meta lines come up with it, and secondary text
 * drops onto the darker ink instead of a light grey.
 * ================================================================== */

@media (max-width: 767px) {
	.bs-store-wrapper .bs-hero-presents {
		font-size: 0.72rem;
		letter-spacing: 0.16em;
		line-height: 1.5;
	}

	.bs-store-wrapper .bs-hero-kicker {
		font-size: 1rem;
		letter-spacing: 0.12em;
	}

	.bs-store-wrapper .bs-hero-lede {
		font-size: 1.05rem;
		line-height: 1.7;
		/* Over a photograph, near-white beats a translucent white. */
		color: rgba(255, 255, 255, 0.96);
	}

	.bs-store-wrapper .bs-catalog-subtitle,
	.bs-store-wrapper .bs-catalog-lede {
		font-size: 1rem;
		line-height: 1.75;
		color: var(--bs-ink-soft);
	}

	/* Beat cards: the title, the credit line and the write-up. */
	.bs-store-wrapper .bs-card__title {
		font-size: 1.35rem;
	}

	.bs-store-wrapper .bs-card__meta {
		font-size: 0.78rem;
		letter-spacing: 0.1em;
		color: var(--bs-ink-muted);
	}

	.bs-store-wrapper .bs-card__desc,
	.bs-store-wrapper .bs-card__madefor {
		font-size: 0.98rem;
		line-height: 1.7;
		color: var(--bs-ink-soft);
	}

	.bs-store-wrapper .bs-card__liveuntil {
		font-size: 0.72rem;
		letter-spacing: 0.12em;
	}

	.bs-store-wrapper .bs-price {
		font-size: 1.15rem;
	}

	.bs-store-wrapper .bs-buy,
	.bs-store-wrapper .bs-button {
		font-size: 0.82rem;
		letter-spacing: 0.14em;
	}

	/* The written sections: mission, events, studio, mailing list. */
	.bs-mission__lede,
	.bs-mission__body p,
	.bs-events__lede,
	.bs-event__desc,
	.bs-news__lede,
	.bs-bio__body p {
		font-size: 1rem;
		line-height: 1.8;
		color: var(--bs-ink-soft);
	}

	.bs-mission__eyebrow,
	.bs-events__eyebrow,
	.bs-news__eyebrow,
	.bs-bio__eyebrow {
		font-size: 0.76rem;
		letter-spacing: 0.2em;
	}

	.bs-news__label,
	.bs-bio__stat-label {
		font-size: 0.74rem;
		letter-spacing: 0.14em;
		color: var(--bs-ink-muted);
	}

	.bs-news__input {
		font-size: 1.05rem;
	}

	.bs-bio__credits li,
	.bs-bio__highlights li {
		font-size: 1rem;
		line-height: 1.7;
	}
}

/* ==================================================================
 * Legibility pass
 *
 * Three rules, applied everywhere:
 *   1. Nothing is set smaller than 0.9rem. The eyebrows, labels, meta
 *      lines and captions were all in the 0.56–0.82rem range, which is
 *      fine on a 27" monitor and unreadable in a pocket.
 *   2. No grey type. Secondary text is black on the white sections and
 *      white on the dark ones — never a wash in between.
 *   3. Anything that adds to the cart looks like a button.
 * ================================================================== */

/* ---- 1. No little words ---- */

.bs-filters__advanced summary,
.bs-field__label,
.bs-badge,
.bs-card__meta,
.bs-store-wrapper .bs-card__meta,
.bs-store-wrapper .bs-card__liveuntil,
.bs-time,
.bs-sticky .bs-time,
.bs-sticky__meta,
.bs-single__detail dt,
.bs-single__liveuntil,
.bs-single__buy-hint,
.bs-share-button,
.bs-modal__summary dt,
.bs-modal__usage dt,
.bs-modal__secure,
.bs-site-footer__meta,
.bs-site-footer__links,
.bs-site-footer__copyright,
.bs-cart__step-title,
.bs-cart-line__license,
.bs-cart-line__formats,
.bs-cart-line__remove,
.bs-cart-upsell__name,
.bs-cart-upsell__why,
.bs-cart-terms__block h4,
.bs-cart-terms__text,
.bs-cart__accept,
.bs-cart__secure,
.bs-cart__error,
.bs-cart__total,
.bs-store-wrapper .bs-hero-presents,
.bs-studio-promo__session,
.bs-studio-promo__card-action,
.bs-mission__eyebrow,
.bs-mission__author-role,
.bs-mission__more a,
.bs-events__eyebrow,
.bs-event__when,
.bs-event__where,
.bs-event__lineup,
.bs-event__details,
.bs-events__all a,
.bs-events .bs-event__tickets,
.bs-bio__eyebrow,
.bs-bio__role,
.bs-bio__subhead,
.bs-bio__link,
.bs-bio__stat-label,
.bs-news__eyebrow,
.bs-news__label,
.bs-news .bs-news__submit,
.bs-store-wrapper .bs-buy,
.bs-store-wrapper .bs-button,
.bs-button--small,
.bs-card__desc,
.bs-store-wrapper .bs-card__desc,
.bs-card__madefor,
.bs-store-wrapper .bs-card__madefor,
.bs-store-wrapper .bs-hero-kicker,
.bs-option-card__formats,
.bs-modal__option-files,
.bs-modal__terms,
.bs-cart-upsell__price,
.bs-mission__closing p,
.bs-studio-promo__subtitle,
.bs-studio-promo__oneplace,
.bs-studio-promo__card p,
.bs-studio-promo__card-lede,
.bs-studio-promo__card-action {
	font-size: 0.95rem;
}

/* Wide uppercase tracking at a bigger size needs a little less of it. */
.bs-store-wrapper .bs-hero-presents,
.bs-mission__eyebrow,
.bs-events__eyebrow,
.bs-news__eyebrow,
.bs-bio__eyebrow,
.bs-bio__subhead,
.bs-cart__step-title {
	letter-spacing: 0.16em;
}

/* Two labels sit inside fixed furniture and get a smaller floor so they
   do not break the thing they label. */
.bs-event__status {
	font-size: 0.8rem;
}

.bs-site-nav__book {
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	white-space: normal;
}

.bs-site-nav__inner {
	flex-wrap: wrap;
	row-gap: 0.75rem;
}

/* ---- 2. No grey fonts ---- */

:root {
	/* Both secondary inks are simply black now. */
	--bs-ink-soft: #0c0c0c;
	--bs-ink-muted: #0c0c0c;
}

/* On the white sections: black. */
.bs-store-wrapper .bs-card__meta,
.bs-store-wrapper .bs-card__desc,
.bs-store-wrapper .bs-card__madefor,
.bs-store-wrapper .bs-catalog-subtitle,
.bs-store-wrapper .bs-catalog-lede,
.bs-mission__lede,
.bs-mission__body p,
.bs-events__lede,
.bs-event__desc,
.bs-event__where,
.bs-news__lede,
.bs-news__label,
.bs-bio__body p,
.bs-bio__role,
.bs-bio__stat-label,
.bs-bio__credits li,
.bs-bio__highlights li,
.bs-cart-line__formats,
.bs-cart-upsell__why,
.bs-cart__secure,
.bs-single__buy-hint,
.bs-field__label {
	color: #0c0c0c;
}

/* On the dark ones — the player, the footer, the studio band, the hero —
   white, not a translucent wash. */
.bs-sticky__meta,
.bs-player--dark .bs-text-muted,
.bs-player--dark .bs-player__meta,
.bs-site-footer__desc,
.bs-site-footer__meta,
.bs-site-footer__copyright,
.bs-site-footer__links a,
.bs-site-nav__links a,
.bs-store-wrapper .bs-hero-lede,
.bs-card__art-placeholder {
	color: #ffffff;
}

/* The studio section is white, so its copy is black. */
.bs-studio-promo .bs-studio-promo__card p,
.bs-studio-promo .bs-studio-promo__card-lede,
.bs-studio-promo .bs-studio-promo__card-action,
.bs-studio-promo .bs-studio-promo__session,
.bs-studio-promo .bs-studio-promo__subtitle,
.bs-studio-promo .bs-studio-promo__oneplace,
.bs-studio-promo p {
	color: var(--bs-ink);
}

.bs-sticky__close {
	color: #ffffff;
	opacity: 1 !important;
}

/* ---- 3. Add to Cart is a button ---- */

/* The skin styles the card's Add to Cart as an underlined word. It reads as
   a caption, not something to press. The skin file is never edited, so this
   overrides it by specificity. */
.bs-store-wrapper .bs-card__actions .bs-buy,
.bs-card__actions .bs-buy.bs-add-to-cart {
	background: var(--bs-gold);
	color: var(--bs-ink);
	border: 2px solid var(--bs-ink);
	border-bottom: 2px solid var(--bs-ink);
	padding: 0.85em 1.5em;
	letter-spacing: 0.14em;
	line-height: 1;
	box-shadow: 4px 4px 0 var(--bs-ink);
}

.bs-store-wrapper .bs-card__actions .bs-buy:hover,
.bs-card__actions .bs-buy.bs-add-to-cart:hover {
	background: var(--bs-ink);
	color: var(--bs-gold);
	border-color: var(--bs-ink);
	box-shadow: 4px 4px 0 var(--bs-gold);
}

.bs-store-wrapper .bs-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* ---- Phones: everything a step up again, and a bigger logo ---- */

@media (max-width: 767px) {
	.bs-site-nav__logo img {
		height: 76px !important;
		max-height: 76px !important;
		max-width: 250px !important;
	}

	.bs-filters__advanced summary,
	.bs-field__label,
	.bs-card__meta,
	.bs-store-wrapper .bs-card__meta,
	.bs-store-wrapper .bs-card__liveuntil,
	.bs-sticky__meta,
	.bs-single__detail dt,
	.bs-single__liveuntil,
	.bs-cart__step-title,
	.bs-cart-line__license,
	.bs-cart-line__formats,
	.bs-cart-upsell__name,
	.bs-cart-upsell__why,
	.bs-cart-terms__text,
	.bs-cart__accept,
	.bs-cart__secure,
	.bs-cart__total,
	.bs-store-wrapper .bs-hero-presents,
	.bs-mission__eyebrow,
	.bs-events__eyebrow,
	.bs-event__when,
	.bs-event__where,
	.bs-bio__eyebrow,
	.bs-bio__role,
	.bs-bio__subhead,
	.bs-bio__link,
	.bs-bio__stat-label,
	.bs-news__eyebrow,
	.bs-news__label,
	.bs-site-footer__meta,
	.bs-site-footer__links,
	.bs-site-footer__copyright,
	.bs-event__status,
	.bs-time,
	.bs-sticky .bs-time {
		font-size: 0.95rem;
	}

	.bs-store-wrapper .bs-card__actions .bs-buy,
	.bs-store-wrapper .bs-button {
		font-size: 0.95rem;
	}

	/* A full-width button is easier to hit than one squeezed beside a price. */
	.bs-store-wrapper .bs-card__actions .bs-buy {
		width: 100%;
		text-align: center;
	}
}

/* The skin file loads after this one, so these three need its own
   specificity to beat it: the player's meta line and clock, and the
   filters summary, were the last grey type on the page. */
.bs-sticky .bs-sticky__meta,
.bs-sticky .bs-time,
.bs-sticky .bs-time--current,
.bs-sticky .bs-time--duration {
	color: #ffffff;
	font-size: 0.95rem;
}

.bs-store-wrapper .bs-filters__advanced summary,
.bs-filters .bs-filters__advanced summary {
	color: var(--bs-ink);
	font-size: 0.95rem;
}

/* Nav links carry the same floor as everything else — an earlier rule
   dropped them to 0.7rem at narrow widths. Tracking comes in on a phone so
   six labels still sit on two tidy rows. */
.bs-site-nav .bs-site-nav__links a {
	font-size: 0.95rem;
	letter-spacing: 0.12em;
}

@media (max-width: 767px) {
	.bs-site-nav .bs-site-nav__links a {
		font-size: 0.95rem;
		letter-spacing: 0.06em;
	}
}

/* The full player on a beat page sits on white, so its clock is black —
   the sticky bar's clock is white because that bar is black. */
.bs-player .bs-time,
.bs-player .bs-time--current,
.bs-player .bs-time--duration,
.bs-player__timeline .bs-time,
.bs-player__timeline .bs-time--current,
.bs-player__timeline .bs-time--duration {
	color: var(--bs-ink);
}

/* ==================================================================
 * Companion pages in the store's chrome
 *
 * The nav is absolutely positioned so it can sit over the hero
 * photograph. These pages have no hero, so it becomes a bar of its own
 * — otherwise it would lie on top of the first paragraph, white on
 * white.
 * ================================================================== */

.bs-standalone--page .bs-site-nav {
	position: static;
	background: #0c0c0c;
	border-bottom: 2px solid var(--bs-gold);
}

.bs-store-page {
	padding: 0;
}

.bs-store-page > .bs-bio:first-child,
.bs-store-page > .bs-events:first-child,
.bs-store-page > .bs-news:first-child {
	border-top: 0;
}

/* Event artwork sits in a fixed frame and crops to fill it. Photographs
   come in every shape — a very wide one was rendering as a 97px letterbox
   beside a much taller block of text. */
.bs-events .bs-event__art img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* ==================================================================
 * Licensing microcopy and the questions people ask before buying.
 * Both sit on the white ground, black type, gold accent.
 * ================================================================== */

.bs-hero-actions {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.bs-store-wrapper .bs-hero-cta--ghost {
	background: transparent;
	color: var(--bs-gold);
	border: 2px solid var(--bs-gold);
	box-shadow: none;
}

.bs-store-wrapper .bs-hero-cta--ghost:hover {
	background: var(--bs-gold);
	color: var(--bs-ink);
}

.bs-faq__inner {
	max-width: var(--bs-container);
	margin: 0 auto;
	padding-left: var(--bs-gutter);
	padding-right: var(--bs-gutter);
}

.bs-faq__title {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.06;
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	margin: 0;
	color: var(--bs-ink);
}

/* The questions are an accordion: a short list you can scan, with the
   answer one click away. Same white ground, black type, gold accent. */
.bs-faq {
	background: var(--bs-paper);
	color: var(--bs-ink);
	padding: 5rem 1.5rem;
	border-top: 3px solid var(--bs-ink);
}

.bs-faq__title {
	padding-bottom: 1rem;
}

.bs-faq__title::after {
	content: "";
	display: block;
	width: 5rem;
	height: 6px;
	margin-top: 1rem;
	background: var(--bs-gold);
}

.bs-faq__list {
	margin: 2.5rem 0 0;
	max-width: 60rem;
	border-top: 2px solid var(--bs-ink);
}

.bs-faq__item {
	border-bottom: 2px solid var(--bs-line);
}

.bs-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--bs-ink);
}

/* Safari and Chrome each draw their own marker; both are removed. */
.bs-faq__q::-webkit-details-marker {
	display: none;
}

.bs-faq__q:hover .bs-faq__q-text {
	color: var(--bs-gold-deep);
}

.bs-faq__q:focus-visible {
	outline: 3px solid var(--bs-gold);
	outline-offset: 2px;
}

/* The plus turns into a minus when the answer is open. */
.bs-faq__mark {
	position: relative;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
}

.bs-faq__mark::before,
.bs-faq__mark::after {
	content: "";
	position: absolute;
	background: var(--bs-gold-deep);
	transition: transform 0.15s ease;
}

.bs-faq__mark::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	transform: translateY(-50%);
}

.bs-faq__mark::after {
	left: 50%;
	top: 0;
	width: 3px;
	height: 100%;
	transform: translateX(-50%);
}

.bs-faq__item[open] .bs-faq__mark::after {
	transform: translateX(-50%) scaleY(0);
}

.bs-faq__a {
	padding: 0 0 1.5rem;
	max-width: 68ch;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--bs-ink);
}

@media (max-width: 600px) {
	.bs-faq {
		padding: 3.5rem 1rem;
	}

	.bs-hero-actions .bs-button {
		width: 100%;
		text-align: center;
	}
}

/* The padlock on a purchase control: a hair smaller than the words beside
   it, and never the thing that wraps. */
.bs-lock {
	font-size: 0.85em;
	margin-right: 0.15em;
	opacity: 0.85;
	flex: 0 0 auto;
}

.bs-store-wrapper .bs-card__actions .bs-buy,
.bs-cart__checkout,
.bs-sticky__buy,
.bs-store-wrapper .bs-single__buy .bs-add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

/* The words stay a block of their own so a two-line label centres under
   itself instead of shoving the padlock to the far edge. */
.bs-buy__label,
[data-bs-checkout-label] {
	display: inline-block;
	text-align: center;
}