/*
Theme Name: Monosounds Blocksy Child
Theme URI: https://monosounds.studio
Description: Product-page layer for Monosounds on top of Blocksy.
Author: Monosounds
Template: blocksy
Version: 0.1.0
*/

/* Product-specific rules are loaded from assets/product-page.css. */

.menu-item-account > .ct-menu-link,
.menu-item-account > a {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.menu-item-account > .ct-menu-link::before,
.menu-item-account > a::before {
	align-items: center;
	border: 2px solid currentColor;
	border-radius: 50%;
	content: "";
	display: inline-flex;
	height: 28px;
	justify-content: center;
	width: 28px;
	background:
		radial-gradient(circle at 50% 35%, currentColor 0 4px, transparent 4.5px),
		radial-gradient(ellipse at 50% 75%, currentColor 0 7px, transparent 7.5px);
}

.monosounds-account-panel,
.monosounds-tier-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 28px 0;
}

.monosounds-account-card,
.monosounds-tier-card {
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--theme-text-color, #1d1d1d);
	display: block;
	min-height: 154px;
	padding: 22px;
	text-decoration: none;
}

.monosounds-account-card--highlight,
.monosounds-tier-card.is-active {
	background: #fff336;
	border-color: #1d1d1d;
}

.monosounds-account-eyebrow,
.monosounds-tier-card span {
	color: #646464;
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.monosounds-account-card strong,
.monosounds-tier-card strong {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 10px;
}

.monosounds-account-card p,
.monosounds-loyalty-page p {
	color: #454545;
	font-size: 15px;
	line-height: 1.45;
	margin: 0;
}

.monosounds-account-card small {
	color: #1d1d1d;
	display: block;
	font-size: 13px;
	line-height: 1.35;
	margin-top: 10px;
}

.monosounds-loyalty-progress {
	background: rgba(29, 29, 29, 0.14);
	border-radius: 999px;
	height: 8px;
	margin-top: 18px;
	overflow: hidden;
}

.monosounds-loyalty-progress span {
	background: #1d1d1d;
	display: block;
	height: 100%;
}

.monosounds-loyalty-page h2 {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 14px;
}

.monosounds-tier-grid {
	grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.monosounds-tier-card {
	min-height: 112px;
}

.monosounds-loyalty-note {
	background: #f7f7f7;
	border-left: 4px solid #fff336;
	padding: 16px 18px;
}

@media (max-width: 860px) {
	.monosounds-account-panel,
	.monosounds-tier-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 630px) {
	.monosounds-account-panel,
	.monosounds-tier-grid {
		grid-template-columns: 1fr;
	}
}