/**
 * The early-bird ladder.
 *
 * Loud on purpose. This is the one thing on a product page that argues for buying today rather
 * than in three weeks, and the argument is made by the numbers next to each other: what it costs
 * now, what it will cost, and what it already cost somebody who waited.
 *
 * Placeholder look, in the theme's own black and red. The real style guide replaces it.
 */

/* On a product card, and above the add-to-cart button ---------------------- */

.pyro-eb-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.6rem;
}

.pyro-eb-price__was {
	color: #8a8a8a;
	text-decoration: line-through;
}

.pyro-eb-price__now {
	font-weight: 800;
	color: #d30107;
	text-decoration: none;
}

.pyro-eb-price__badge {
	padding: 0.15rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #d30107;
	border-radius: 999px;
}

.pyro-eb-price__left {
	flex: 1 0 100%;
	font-size: 0.8rem;
	font-weight: 700;
	color: #131313;
}

/* The ladder --------------------------------------------------------------- */

.pyro-eb {
	margin: 1.25rem 0;
	padding: 1rem;
	border: 2px solid #131313;
	border-radius: 4px;
}

.pyro-eb__title {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pyro-eb__ladder {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyro-eb__rung {
	display: grid;
	grid-template-columns: 5rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 3px;
}

.pyro-eb__rung + .pyro-eb__rung {
	margin-top: 0.35rem;
}

.pyro-eb__percent {
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pyro-eb__percent span {
	font-size: 0.8rem;
}

.pyro-eb__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pyro-eb__when {
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

/* The rung you are on. It should be impossible to miss which one that is. */
.pyro-eb__rung.is-active {
	color: #fff;
	background: #d30107;
}

.pyro-eb__rung.is-active .pyro-eb__percent {
	font-size: 1.7rem;
}

/* The one after it: still real, just worse. */
.pyro-eb__rung.is-upcoming {
	background: #f5f3f3;
}

/*
 * And the one that has gone. Shown, not hidden - a customer who can see that 12.5% ran out three
 * weeks ago works out for themselves that 7.5% will run out too, and that argument is worth more
 * coming from them than from us.
 */
.pyro-eb__rung.is-expired {
	color: #9a9a9a;
	background: #fafafa;
}

.pyro-eb__rung.is-expired .pyro-eb__price {
	text-decoration: line-through;
}

.pyro-eb__note {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: #6a6a6a;
}