/**
 * Price component (Style Guide 05 — price in Geist Mono)
 *
 * All prices and monetary values are set in mono.
 *
 * Usage:
 *   <p class="price">₹2,490</p>
 *   <p class="price price--lg">₹2,490</p>
 *
 *   <p class="price is-on-sale">
 *     <span class="price__original">₹2,490</span>
 *     <span class="price__current">₹1,790</span>
 *   </p>
 */

.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
	width: fit-content;
	font-family: var(--font-mono);
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-wide);
	color: var(--color-heading);
	margin: 0;
}

/* Sits inline inside running text. */
.price--inline {
	display: inline-flex;
	width: auto;
}

.price--sm { font-size: var(--text-sm); }
.price--md { font-size: var(--text-md); }
.price--lg { font-size: var(--text-2xl); }

/* Struck-through original price. */
.price__original {
	color: var(--color-muted);
	text-decoration: line-through;
	font-size: 0.75em;
}

/* Current price; clay when discounted. */
.price__current {
	color: var(--color-heading);
}

.price.is-on-sale .price__current {
	color: var(--color-accent);
}

/* Small print next to a price — tax note, unit, per-item. */
.price__note {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-muted);
}