/* --- Brand header ---------------------------------------------------------

	   Matches the plaque language of the category and products heroes, but
	   without a photograph: only 6 of 243 brands carry a logo, and there is no
	   per-brand hero art. Dropping a generic candy photo behind every brand
	   would be the same wallpaper 237 times, which reads as filler rather than
	   design. A navy band with the diagonal stripe texture gives the plaque
	   something to sit on and keeps the page in the same family. */

	.brand-header {
		position: relative;
		margin: 2rem 0 3rem;
		padding: 2.5rem 2rem;
		background:
			repeating-linear-gradient(-45deg,
				rgba(255, 255, 255, 0.045) 0 12px,
				rgba(255, 255, 255, 0) 12px 24px),
			var(--retro-navy);
		border: 3px solid var(--retro-navy);
		border-radius: 16px;
		box-shadow: 6px 6px 0 var(--retro-navy);
		text-align: left;
	}

	.brand-header h1 {
		display: inline-block;
		font-family: var(--font-display);
		font-size: clamp(1.75rem, 3.5vw, 2.75rem);
		line-height: 0.95;
		color: var(--retro-navy);
		text-transform: uppercase;
		letter-spacing: 1px;
		background: var(--retro-yellow);
		border: 3px solid var(--retro-navy);
		border-radius: 14px;
		/* Navy-on-navy would vanish against the band, so the plaque's drop
		   shadow goes to translucent black here rather than the usual navy. */
		box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.38);
		padding: 0.7rem 1.4rem 0.8rem;
		transform: rotate(-2deg);
		margin-bottom: 1.4rem;
	}

	.brand-description {
		font-family: var(--font-heading);
		font-size: 1.1rem;
		font-weight: 500;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.92);
		max-width: 620px;
		margin: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		.brand-header h1 {
			animation: hero-plate 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
		}

		.brand-description {
			animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
		}
	}

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

	/* Preserves the -2deg tilt through the animation. */
	@keyframes hero-plate {
		from { opacity: 0; transform: rotate(-2deg) translateY(20px); }
		to   { opacity: 1; transform: rotate(-2deg) translateY(0); }
	}

	@media (max-width: 768px) {
		.brand-header {
			padding: 1.75rem 1.25rem;
		}

		.brand-header h1 {
			display: block;
			font-size: 1.6rem;
		}
	}

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

	.empty-state {
		text-align: center;
		padding: 4rem 2rem;
		background: var(--bg-secondary);
		border: 4px solid var(--retro-navy);
		border-radius: 16px;
		margin-bottom: 3rem;
	}

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