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

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

	/* --- Category hero -------------------------------------------------------

	   Nothing is laid over the photograph. The previous design stacked a 2px
	   backdrop-blur, a 65%→45% dark gradient, an 85%-opaque content box and a
	   second 12px blur inside that box on top of the artwork — the image was
	   blurred twice and then covered, which made the category art pointless.

	   Instead the title sits on a small solid plaque in the bottom-left, tilted
	   like a price card propped in a shop window. Navy on yellow is the most
	   legible pairing in the palette, so the plate can stay small — and keeping
	   it small is what keeps the image readable.

	   `overflow: visible` lets the plaque hang past the bottom edge. The
	   background image is still clipped by `border-radius`, which does not
	   depend on overflow, so the rounded corners survive. */

	.category-hero {
		position: relative;
		display: block;
		width: 100%;
		/* Source art is 1376x768; a wider band crops the empty gradient above
		   the candy rather than letterboxing it. */
		aspect-ratio: 24 / 10;
		min-height: 300px;
		max-height: 560px;
		padding: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-color: var(--retro-navy);
		border: 3px solid var(--retro-navy);
		border-radius: 16px;
		box-shadow: 6px 6px 0 var(--retro-navy);
		overflow: visible;
		/* Room for the plaque to overhang without colliding with the grid. */
		margin-bottom: 4.5rem;
	}

	/* A whisper of vignette so the rounded corners read against a white page.
	   Not a scrim — the centre stays at full saturation. */
	.category-hero-overlay {
		position: absolute;
		inset: 0;
		border-radius: 13px;
		background: radial-gradient(120% 100% at 50% 40%,
			rgba(15, 37, 128, 0) 55%,
			rgba(15, 37, 128, 0.35) 100%);
	}

	.category-hero-content {
		position: absolute;
		z-index: 2;
		left: 2.5rem;
		/* Sits mostly outside the frame, so it covers as little of the candy as
		   possible while still reading as attached to it. */
		bottom: -2.5rem;
		max-width: min(30rem, calc(100% - 5rem));
		text-align: left;
		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(-2deg);
	}

	/* No stroke and no text-shadow: the plaque supplies the contrast, so the
	   type can just be type. */
	.page-title {
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 4vw, 3rem);
		line-height: 0.95;
		color: var(--retro-navy);
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 0.5rem;
	}

	.category-description {
		font-family: var(--font-heading);
		color: var(--retro-navy);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.45;
		margin-bottom: 0.8rem;
		opacity: 0.85;
	}

	.product-count-badge {
		display: inline-block;
		font-family: var(--font-heading);
		color: #ffffff;
		background: var(--retro-red);
		border: 2.5px solid var(--retro-navy);
		padding: 0.35rem 1rem;
		border-radius: 50px;
		font-weight: 800;
		font-size: 0.85rem;
		letter-spacing: 0.5px;
		box-shadow: 2px 2px 0 var(--retro-navy);
	}

	/* One staggered reveal on load. Deliberately restrained — the photograph is
	   the thing worth looking at, and the type should arrive without competing
	   with it. */
	@media (prefers-reduced-motion: no-preference) {
		.category-hero-content {
			animation: hero-plate 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
		}

		.page-title,
		.category-description,
		.product-count-badge {
			animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
		}

		.category-description {
			animation-delay: 0.08s;
		}

		.product-count-badge {
			animation-delay: 0.16s;
		}
	}

	@keyframes hero-rise {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Keeps the -2deg tilt through the animation; animating `transform` would
	   otherwise reset it to 0. */
	@keyframes hero-plate {
		from { opacity: 0; transform: rotate(-2deg) translateY(20px); }
		to   { opacity: 1; transform: rotate(-2deg) translateY(0); }
	}

	.products-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 2rem;
		margin-bottom: 3rem;
	}

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

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

	.back-link,
	.back-button {
		display: inline-block;
		padding: 0.75rem 1.5rem;
		background: var(--retro-teal);
		color: white;
		border: 3px solid var(--retro-navy);
		border-radius: 8px;
		text-decoration: none;
		font-family: var(--font-heading);
		font-weight: 700;
		transition: all 0.2s ease;
		box-shadow: 4px 4px 0 var(--retro-navy);
	}

	.back-link:hover,
	.back-button:hover {
		transform: translateY(-2px);
		box-shadow: 6px 6px 0 var(--retro-navy);
	}

	.back-section {
		text-align: center;
		margin-top: 3rem;
	}

	@media (max-width: 768px) {
		.category-hero {
			/* Tall enough to read the artwork, short enough that the hero plus
			   the plaque does not consume the whole first screen — 4/3 was
			   ~290px on a 390px phone and pushed the product grid below the
			   fold on its own. */
			aspect-ratio: 16 / 10;
			max-height: 280px;
			margin-bottom: 3.5rem;
		}

		.category-hero-content {
			left: 1.25rem;
			right: 1.25rem;
			max-width: none;
			padding: 0.9rem 1.25rem 1rem;
		}

		.page-title {
			font-size: 1.75rem;
		}

		.products-grid {
			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
			gap: 1.5rem;
		}
	}

	@media (max-width: 480px) {
		.products-grid {
			grid-template-columns: 1fr;
		}
	}