/*
Theme Name: Music Commerce
Theme URI: https://github.com/mtaproductions/music-commerce-platform
Author: MTA Productions
Description: Lightweight block theme for a focused WooCommerce music catalogue.
Version: 0.3.0
Requires at least: 6.9
Requires PHP: 8.3
License: Proprietary
Text Domain: music-commerce
*/

:root {
	--music-commerce-control-radius: 0.35rem;
	--music-commerce-panel-radius: 0.75rem;
	--music-commerce-shadow: 0 1.25rem 3.5rem rgb(16 17 20 / 9%);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	background:
		linear-gradient(120deg, rgb(255 92 53 / 6%), transparent 28rem),
		var(--wp--preset--color--base);
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--accent-dark);
	outline-offset: 0.1875rem;
}

.mcp-site-header {
	background: rgb(16 17 20 / 96%);
	border-block-end: 1px solid rgb(255 255 255 / 10%);
	box-shadow: 0 0.5rem 2rem rgb(16 17 20 / 16%);
	color: var(--wp--preset--color--base);
	position: relative;
	z-index: 20;
}

.mcp-site-header__inner {
	min-height: 5rem;
}

.mcp-site-header .wp-block-site-logo img {
	border-radius: 50%;
}

.mcp-site-header .wp-block-site-title {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 760;
	letter-spacing: -0.025em;
}

.mcp-site-header a {
	color: inherit;
	text-decoration: none;
}

.mcp-site-header .wp-block-navigation {
	font-size: 0.875rem;
	font-weight: 650;
	letter-spacing: 0.015em;
}

.mcp-site-header .wp-block-navigation-item__content {
	padding-block: 0.65rem;
}

.mcp-site-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.mcp-site-header .wc-block-mini-cart__button {
	color: inherit;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

.mcp-main {
	min-height: 60vh;
	padding-block: clamp(2.5rem, 7vw, 6rem);
}

.mcp-main > .wp-block-post-title,
.mcp-main > .wp-block-query-title {
	letter-spacing: -0.045em;
	margin-block-end: clamp(1.5rem, 4vw, 3rem);
}

.mcp-main > .wp-block-post-featured-image img {
	border-radius: var(--music-commerce-panel-radius);
}

.mcp-home {
	gap: clamp(3rem, 7vw, 6rem);
}

.mcp-home-hero {
	background:
		linear-gradient(135deg, rgb(255 92 53 / 92%), rgb(201 54 22 / 82%)),
		var(--wp--preset--color--contrast);
	border-radius: clamp(0.75rem, 2vw, 1.5rem);
	box-shadow: var(--music-commerce-shadow);
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	padding: clamp(2rem, 7vw, 6rem);
	position: relative;
}

.mcp-home-hero::after {
	border: 1px solid rgb(16 17 20 / 18%);
	border-radius: 50%;
	content: "";
	height: clamp(12rem, 32vw, 30rem);
	position: absolute;
	right: -8%;
	top: -35%;
	width: clamp(12rem, 32vw, 30rem);
}

.mcp-home-hero > * {
	position: relative;
	z-index: 1;
}

.mcp-home-hero h1 {
	letter-spacing: -0.055em;
	margin-block: 0.4rem 1rem;
	max-width: 13ch;
}

.mcp-home-hero .mcp-kicker {
	color: inherit;
}

.mcp-home-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--music-commerce-panel-radius);
	box-shadow: var(--music-commerce-shadow);
	height: 100%;
	padding: 1.5rem;
}

.mcp-home-card .wp-block-post-title a {
	text-decoration: none;
}

.mcp-site-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	margin-block-start: clamp(3rem, 8vw, 7rem);
}

.mcp-site-footer a {
	color: inherit;
}

.mcp-site-footer__rule {
	border-block-start: 1px solid rgb(255 255 255 / 16%);
	padding-block: 2.25rem;
}

.mcp-site-footer__navigation {
	border-block-start: 1px solid rgb(255 255 255 / 16%);
	font-size: 0.8125rem;
	gap: 0.75rem 1.25rem;
	padding-block: 1.25rem 2.25rem;
}

.mcp-site-footer__navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

.mcp-kicker {
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Music Commerce plugin presentation. */
.music-commerce-catalogue {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--music-commerce-panel-radius);
	box-shadow: var(--music-commerce-shadow);
	overflow: hidden;
}

.music-commerce-catalogue__table {
	border: 0;
}

.music-commerce-catalogue__table thead {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.music-commerce-catalogue__table th {
	font-size: 0.72rem;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.music-commerce-catalogue__table th,
.music-commerce-catalogue__table td {
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: 0.65rem;
}

.music-commerce-catalogue__table th:nth-child(8) {
	padding-inline-end: 0.75rem;
}

.music-commerce-catalogue__table th:nth-child(9) {
	padding-inline-start: 0.75rem;
}

.music-commerce-catalogue__table tbody tr {
	background: var(--wp--preset--color--surface);
	transition: background-color 160ms ease;
}

.music-commerce-catalogue__table tbody tr:hover {
	background: var(--wp--preset--color--soft);
}

.music-commerce-catalogue__table tbody tr:focus-within {
	background: var(--wp--preset--color--soft);
	outline-color: var(--wp--preset--color--accent-dark);
}

.music-commerce-catalogue__table tbody tr:last-child td {
	border-block-end: 0;
}

.music-commerce-catalogue__table td > a {
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
	text-decoration: none;
}

.music-commerce-catalogue__table td > a:hover {
	color: var(--wp--preset--color--accent-dark);
}

@media (min-width: 64.0625rem) {
	.music-commerce-catalogue-page .mcp-main > .wp-block-post-content,
	.single-music_artist .mcp-main > .wp-block-post-content {
		margin-inline: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	.music-commerce-catalogue-page .mcp-main > .wp-block-post-title,
	.single-music_artist .mcp-main > .wp-block-post-title {
		margin-inline-end: auto !important;
		margin-inline-start: 0 !important;
		max-width: 70vw !important;
		width: 70vw;
	}

	.music-commerce-catalogue__column-image {
		width: 4.25rem;
	}

	.music-commerce-catalogue__column-artist {
		width: 15%;
	}

	.music-commerce-catalogue__column-title {
		width: auto;
	}

	.music-commerce-catalogue__column-genre {
		width: 10%;
	}

	.music-commerce-catalogue__column-key {
		width: 3.25rem;
	}

	.music-commerce-catalogue__column-tempo {
		width: 3.75rem;
	}

	.music-commerce-catalogue__column-price {
		width: 4.5rem;
	}

	.music-commerce-catalogue__column-preview {
		width: 5.25rem;
	}

	.music-commerce-catalogue__column-cart {
		width: 4.5rem;
	}

	.music-commerce-catalogue__table td:nth-child(8) {
		text-align: left;
	}

	.music-commerce-catalogue__table td:nth-child(1) {
		text-align: center;
	}

	.music-commerce-catalogue__table td:nth-child(9) {
		padding-inline-start: 0.1875rem;
	}
}

.music-commerce-artist-thumbnail {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
}

.music-commerce-preview-button {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.music-commerce-preview-button:focus-visible {
	outline-color: var(--wp--preset--color--accent-dark);
}

.music-commerce-preview-button:hover,
.music-commerce-preview-control.is-playing .music-commerce-preview-button {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.music-commerce-cart-choice input {
	accent-color: var(--wp--preset--color--accent);
}

.music-commerce-license-notice,
.music-commerce-placeholder-notice {
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 0.25rem solid var(--wp--preset--color--accent-dark);
	border-radius: var(--music-commerce-control-radius);
	color: var(--wp--preset--color--contrast);
	margin-block: 0 1rem;
	padding: 0.85rem 1rem;
}

.music-commerce-license-notice p,
.music-commerce-placeholder-notice p {
	margin-block: 0;
}

.music-commerce-license-notice__identifier,
.music-commerce-order-license {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.music-commerce-license-notice__identifier {
	margin-block-start: 0.35rem !important;
}

.music-commerce-song-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--music-commerce-panel-radius);
	box-shadow: var(--music-commerce-shadow);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.music-commerce-artist-songs {
	margin-inline-end: auto !important;
	margin-inline-start: 0 !important;
	max-width: none !important;
	width: 70vw;
}

.music-commerce-artist-songs__heading {
	letter-spacing: -0.035em;
}

.music-commerce-progress__track {
	background: var(--wp--preset--color--line);
}

.music-commerce-progress__value {
	background: var(--wp--preset--color--accent);
}

.music-commerce-progress__elapsed {
	color: var(--wp--preset--color--accent-dark);
}

/* WooCommerce surfaces. */
.woocommerce div.product div.images img,
.wc-block-cart,
.wc-block-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.woocommerce form.login {
	border-radius: var(--music-commerce-panel-radius);
}

.woocommerce div.product div.images img {
	box-shadow: var(--music-commerce-shadow);
}

.woocommerce div.product .product_title {
	letter-spacing: -0.045em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--accent-dark);
	font-weight: 750;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--music-commerce-control-radius);
	color: var(--wp--preset--color--base);
	font-weight: 720;
	min-height: 2.75rem;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wc-block-cart,
.wc-block-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.woocommerce form.login {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-sizing: border-box;
	padding: clamp(1rem, 3vw, 2rem);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.55rem 0;
}

.woocommerce-order-downloads,
.woocommerce-order-details,
.woocommerce-customer-details {
	margin-block-start: 2rem;
}

.woocommerce-table--order-downloads,
.woocommerce-table--order-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--music-commerce-panel-radius);
	overflow: hidden;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--music-commerce-control-radius);
}

@media (max-width: 61rem) {
	.mcp-site-header__inner {
		gap: 1rem;
	}

	.mcp-site-header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		padding: 2rem;
	}
}

@media (max-width: 64rem) {
	.mcp-main {
		padding-block: 2.25rem;
	}

	.mcp-home .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.music-commerce-catalogue {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		margin-inline: 0 !important;
		max-width: 100%;
		overflow: visible;
		width: 100%;
	}

	.music-commerce-catalogue-page .wp-block-post-title {
		margin-inline: 0 !important;
		width: 100%;
	}

	.music-commerce-artist-songs {
		width: 100%;
	}

	.music-commerce-genre-archive,
	.music-commerce-genre-archive__header {
		max-width: 100%;
		width: 100%;
	}

	.music-commerce-catalogue-browser,
	.music-commerce-filters,
	.music-commerce-active-filters,
	.music-commerce-filter-errors,
	.music-commerce-result-summary,
	.music-commerce-pagination {
		max-width: 100%;
		width: 100%;
	}

	.music-commerce-filters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.music-commerce-filters__search,
	.music-commerce-filters__actions {
		grid-column: 1 / -1;
	}

	.music-commerce-catalogue__table,
	.music-commerce-catalogue__table tbody,
	.music-commerce-catalogue__table tr,
	.music-commerce-catalogue__table td {
		width: 100%;
	}

	.music-commerce-catalogue__table,
	.music-commerce-catalogue__table tbody {
		display: block;
	}

	.music-commerce-catalogue__table colgroup {
		display: none;
	}

	.music-commerce-catalogue__table thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.music-commerce-catalogue__table tr {
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--music-commerce-panel-radius);
		box-sizing: border-box;
		box-shadow: var(--music-commerce-shadow);
		display: grid;
		gap: 0.35rem 0.75rem;
		grid-template-areas:
			"image title title"
			"image artist artist"
			"genre key tempo"
			"price preview buy";
		grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 0.75fr);
		overflow: hidden;
		padding: 0.75rem;
		width: 100%;
	}

	.music-commerce-catalogue__table td {
		align-items: flex-start;
		border: 0;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		justify-content: center;
		min-height: 2.5rem;
		min-width: 0;
		padding: 0.25rem;
		width: auto;
	}

	.music-commerce-catalogue__table td > a:not(.music-commerce-artist-thumbnail-link) {
		white-space: normal;
	}

	.music-commerce-catalogue__table td:nth-child(1) {
		grid-area: image;
	}

	.music-commerce-catalogue__table td:nth-child(2) {
		grid-area: artist;
	}

	.music-commerce-catalogue__table td:nth-child(3) {
		grid-area: title;
	}

	.music-commerce-catalogue__table td:nth-child(4) {
		grid-area: genre;
	}

	.music-commerce-catalogue__table td:nth-child(5) {
		grid-area: key;
	}

	.music-commerce-catalogue__table td:nth-child(6) {
		grid-area: tempo;
	}

	.music-commerce-catalogue__table td:nth-child(7) {
		grid-area: price;
	}

	.music-commerce-catalogue__table td:nth-child(8) {
		grid-area: preview;
	}

	.music-commerce-catalogue__table td:nth-child(9) {
		grid-area: buy;
	}

	.music-commerce-catalogue__table td::before {
		color: var(--wp--preset--color--muted);
		font-size: 0.66rem;
		letter-spacing: 0.055em;
		line-height: 1;
		text-transform: uppercase;
	}

	.music-commerce-catalogue__image {
		align-items: center !important;
		justify-items: center;
	}

	.music-commerce-catalogue__image::before {
		display: none;
	}

	.music-commerce-artist-thumbnail {
		height: 4rem;
		width: 4rem;
	}

	.music-commerce-preview-control {
		align-items: center;
		flex-direction: row;
	}

	.music-commerce-preview-button {
		flex-basis: 2.25rem;
	}

	.music-commerce-cart-choice {
		justify-content: flex-start;
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		float: none;
		width: 100%;
	}
}

@media (max-width: 48rem) {
	.music-commerce-filters__grid {
		grid-template-columns: 1fr;
	}

	.music-commerce-filters__search,
	.music-commerce-filters__actions {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

@media (forced-colors: active) {
	.music-commerce-catalogue,
	.music-commerce-song-details,
	.music-commerce-catalogue__table tr {
		box-shadow: none;
	}

	.music-commerce-preview-button {
		background: ButtonFace;
		border-color: ButtonText;
		color: ButtonText;
	}
}