.leaderboard-page {
		min-height: 100vh;
		padding: 2rem 0 4rem;
	}

	.container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 2rem;
	}

	/* --- Hero ---------------------------------------------------------------
	   The same yellow plaque as the category and cart pages, so the leaderboard
	   reads as part of the store rather than a bolted-on report. */

	.lb-hero {
		margin: 1rem 0 2rem;
	}

	.lb-plate {
		display: inline-block;
		background: var(--retro-yellow);
		border: 3px solid var(--retro-navy);
		border-radius: 14px;
		box-shadow: 7px 7px 0 var(--retro-navy);
		padding: 1rem 1.6rem 1.1rem;
		transform: rotate(-1.5deg);
		max-width: min(34rem, 100%);
	}

	.page-title {
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 4vw, 2.75rem);
		line-height: 0.95;
		color: var(--retro-navy);
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 0.4rem;
	}

	.lb-sub {
		font-family: var(--font-heading);
		font-size: 1rem;
		font-weight: 600;
		color: var(--retro-navy);
		opacity: 0.85;
		margin: 0;
	}

	/* --- Window tabs -------------------------------------------------------- */

	.lb-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-bottom: 1.75rem;
	}

	.lb-tab {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.9rem;
		text-decoration: none;
		color: var(--retro-navy);
		background: #fff;
		border: 2.5px solid var(--retro-navy);
		border-radius: 50px;
		padding: 0.45rem 1.1rem;
		box-shadow: 3px 3px 0 var(--retro-navy);
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.lb-tab:hover {
		transform: translate(-1px, -1px);
		box-shadow: 4px 4px 0 var(--retro-navy);
	}

	.lb-tab.active {
		background: var(--retro-navy);
		color: #fff;
	}

	/* --- Rows ---------------------------------------------------------------
	   A list, not a card grid: rank is the point, and a vertical list makes the
	   ordering unambiguous in a way a wrapping grid does not. */

	.lb-list {
		list-style: none;
		margin: 0 0 1.5rem;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.lb-row {
		display: grid;
		grid-template-columns: 3rem 72px 1fr auto;
		align-items: center;
		gap: 1rem;
		background: var(--bg-card);
		border: 2px solid var(--retro-navy);
		border-radius: 12px;
		padding: 0.7rem 1rem 0.7rem 0.7rem;
		box-shadow: 3px 3px 0 var(--retro-navy);
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.lb-row:hover {
		transform: translate(-2px, -2px);
		box-shadow: 5px 5px 0 var(--retro-navy);
	}

	.lb-rank {
		font-family: var(--font-display);
		font-size: 1.6rem;
		text-align: center;
		color: var(--retro-navy);
		opacity: 0.55;
	}

	/* Top three earn colour; the rest stay quiet so the podium reads instantly. */
	.lb-podium { border-width: 3px; }
	.lb-podium .lb-rank { opacity: 1; font-size: 2rem; }
	.lb-rank-1 { background: linear-gradient(100deg, #fff8e1 0%, #ffffff 55%); }
	.lb-rank-1 .lb-rank { color: #b8860b; }
	.lb-rank-2 { background: linear-gradient(100deg, #f4f4f6 0%, #ffffff 55%); }
	.lb-rank-2 .lb-rank { color: #6b7280; }
	.lb-rank-3 { background: linear-gradient(100deg, #fbeee0 0%, #ffffff 55%); }
	.lb-rank-3 .lb-rank { color: #a0522d; }

	.lb-thumb {
		display: block;
		width: 72px;
		height: 72px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--bg-secondary);
	}

	.lb-thumb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}

	.lb-info {
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.lb-brand {
		font-family: var(--font-heading);
		font-size: 0.7rem;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.lb-title {
		font-family: var(--font-heading);
		font-size: 0.98rem;
		font-weight: 700;
		color: var(--retro-navy);
		text-decoration: none;
		/* Two lines maximum: long vendor titles would otherwise set the row
		   height and break the scannability the ranking depends on. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.lb-title:hover { color: var(--accent-primary); }

	.lb-price {
		font-family: var(--font-heading);
		font-weight: 700;
		color: var(--retro-red);
		font-size: 0.95rem;
	}

	.lb-metric {
		text-align: right;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		line-height: 1.1;
	}

	.lb-units {
		font-family: var(--font-display);
		font-size: 1.5rem;
		color: var(--retro-navy);
	}

	.lb-units-label {
		font-family: var(--font-heading);
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--text-muted);
	}

	.lb-soldout {
		margin-top: 0.3rem;
		font-family: var(--font-heading);
		font-size: 0.65rem;
		font-weight: 800;
		text-transform: uppercase;
		color: #fff;
		background: var(--text-muted);
		border-radius: 4px;
		padding: 0.1rem 0.4rem;
	}

	/* --- Footnote ----------------------------------------------------------- */

	.lb-note {
		font-family: var(--font-body);
		font-size: 0.85rem;
		line-height: 1.5;
		color: var(--text-secondary);
		background: var(--bg-secondary);
		border-left: 4px solid var(--retro-navy);
		border-radius: 0 8px 8px 0;
		padding: 0.9rem 1.1rem;
	}

	.empty-state {
		text-align: center;
		padding: 4rem 2rem;
	}

	.empty-text {
		font-family: var(--font-heading);
		font-size: 1.25rem;
		color: var(--text-muted);
		margin-bottom: 1.5rem;
	}

	@media (max-width: 640px) {
		.container { padding: 0 1rem; }

		/* Rank and thumbnail stay on the first line with the title; the units
		   move under them rather than squeezing a fourth column onto a phone. */
		.lb-row {
			grid-template-columns: 2.2rem 56px 1fr;
			gap: 0.7rem;
			padding: 0.6rem 0.7rem;
		}

		.lb-thumb { width: 56px; height: 56px; }
		.lb-rank { font-size: 1.3rem; }
		.lb-podium .lb-rank { font-size: 1.6rem; }

		.lb-metric {
			grid-column: 2 / 4;
			flex-direction: row;
			align-items: baseline;
			justify-content: flex-start;
			gap: 0.35rem;
			text-align: left;
		}

		.lb-units { font-size: 1.15rem; }
	}