.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

	/* Section headings, VIEW ALL and the whole trending-card rail now live in
	   pages/product-rail.css — shared with the 404, which renders the same
	   partial. Loaded alongside this sheet. */


	/* ── HERO ── */
	.hero {
		position: relative;
		min-height: 580px;
		display: flex;
		align-items: center;
		overflow: hidden;
		background: #1a1060;
	}

	.hero-bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		z-index: 1;
	}

	.hero-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(10,5,50,0.85) 40%, rgba(10,5,50,0.25) 100%);
		z-index: 2;
	}

	.hero-content {
		position: relative;
		z-index: 3;
		padding: 3rem 1.5rem 5rem;
		max-width: 1200px;
		margin: 0 auto;
		width: 100%;
	}

	.hero-text-block { max-width: 520px; }

	.hero-pre {
		font-family: var(--font-display);
		font-size: clamp(1.5rem, 3.5vw, 2.25rem);
		color: white;
		font-style: italic;
		margin: 0 0 -0.5rem;
	}

	.hero-title { margin: 0 0 1rem; line-height: 0.88; }

	.hero-one {
		display: block;
		font-family: var(--font-display);
		font-size: clamp(1.25rem, 3vw, 2rem);
		color: var(--retro-yellow);
		letter-spacing: 6px;
	}

	.hero-snack {
		display: block;
		font-family: var(--font-display);
		font-size: clamp(4.5rem, 14vw, 9rem);
		color: var(--retro-orange);
		letter-spacing: 2px;
		text-shadow: 4px 4px 0 rgba(15, 37, 128, 0.45);
		-webkit-text-stroke: 2px rgba(15, 37, 128, 0.35);
	}

	.hero-shop {
		display: block;
		font-family: var(--font-display);
		font-size: clamp(3rem, 9vw, 6rem);
		color: white;
		letter-spacing: 4px;
		text-shadow: 3px 3px 0 rgba(0,0,0,0.25);
	}

	.hero-sub {
		font-size: 1rem;
		color: rgba(255,255,255,0.85);
		margin: 1rem 0 1.75rem;
		line-height: 1.5;
	}

	.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

	/* The navy rule is not decoration: these sit on a busy photograph, and a
	   flat pill on top of shelves of packaging needs an edge to hold its
	   shape. Hard shadow to match every other button on the site. */
	.hero-btn {
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.9rem;
		letter-spacing: 1px;
		padding: 0.75rem 2rem;
		border: 2.5px solid var(--retro-navy);
		border-radius: 50px;
		text-transform: uppercase;
		text-decoration: none;
		box-shadow: 4px 4px 0 var(--retro-navy);
		transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
	}

	.hero-btn:hover {
		transform: translate(-2px, -2px);
		box-shadow: 6px 6px 0 var(--retro-navy);
	}

	/* Was #ff3d9a — a hot pink that belonged to no part of the palette, and
	   the last of it on the site. Red carries the same urgency and is the
	   accent everything else already uses. */
	.hero-btn-primary { background: var(--retro-red); color: #fff; }
	.hero-btn-primary:hover { background: var(--retro-navy); color: #fff; }

	.hero-btn-secondary { background: var(--retro-yellow); color: var(--retro-navy); }
	.hero-btn-secondary:hover { background: #fff; color: var(--retro-navy); }

	.goodies-badge {
		position: absolute;
		right: 12%;
		top: 28%;
		z-index: 4;
		background: var(--retro-red);
		color: white;
		border: 2.5px solid var(--retro-navy);
		border-radius: 12px;
		padding: 0.75rem 1rem;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.8rem;
		letter-spacing: 1px;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		box-shadow: 4px 4px 0 var(--retro-navy);
		line-height: 1.3;
	}

	.goodies-caret { font-size: 1.5rem; }

	.thousands-badge {
		position: absolute;
		right: 5%;
		bottom: 22%;
		z-index: 4;
		background: var(--retro-yellow);
		color: var(--retro-navy);
		border: 2.5px solid var(--retro-navy);
		border-radius: 50%;
		width: 100px;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-family: var(--font-heading);
		font-weight: 900;
		font-size: 0.75rem;
		letter-spacing: 0.5px;
		line-height: 1.3;
		box-shadow: 4px 4px 0 var(--retro-navy);
		transform: rotate(-8deg);
	}

	.hero-wave {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		z-index: 5;
	}
	.hero-wave svg { width: 100%; height: 100%; }

	/* ── BRANDS ── */
	.brands-section {
		padding: 2.5rem 0;
		background: #f9f5f0;
		border-bottom: 1px solid #ede8e0;
	}

	.brands-track {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 1rem;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0;
	}

	/* A card of four product photographs, replacing the logo.
	   The logos rendered at 52px tall and most were not legible there; a
	   wordmark drawn for a packet does not survive that. Brands that cannot
	   fill the grid are dropped in the view rather than shown with holes. */
	.brand-card {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: white;
		border-radius: 12px;
		border: 2px solid #e0d8ce;
		overflow: hidden;
		text-decoration: none;
		transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.brand-card:hover {
		transform: translateY(-4px) scale(1.03);
		box-shadow: 5px 5px 0 var(--retro-navy);
		border-color: var(--retro-orange);
	}

	.brand-quad {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 2px;
		background: #f2ede6;
		aspect-ratio: 1;
	}

	.brand-quad-cell {
		display: block;
		overflow: hidden;
		background: #fff;
	}

	.brand-quad-cell img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.brand-card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.4rem;
		padding: 0.45rem 0.6rem;
		border-top: 2px solid #e0d8ce;
	}

	.brand-card-name {
		font-family: var(--font-heading);
		font-weight: 900;
		font-size: 0.72rem;
		letter-spacing: 0.4px;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The count is the reason to click: "Hostess" says nothing that the
	   pictures have not already said, but "99" does. */
	.brand-card-count {
		flex-shrink: 0;
		font-family: var(--font-heading);
		font-size: 0.68rem;
		font-weight: 900;
		color: #fff;
		background: var(--retro-navy);
		border-radius: 999px;
		padding: 0.1rem 0.4rem;
	}

	@media (max-width: 992px) {
		.brands-track {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	@media (max-width: 576px) {
		.brands-track {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* ── CATEGORIES ── */
	.categories-section {
		padding: 4rem 0;
		background: white;
	}

	.category-grid {
		display: flex;
		gap: 0.875rem;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.5rem;
	}
	.category-grid::-webkit-scrollbar { display: none; }

	.cat-card {
		display: flex;
		flex-direction: column;
		border-radius: 16px;
		text-decoration: none;
		overflow: hidden;
		flex-shrink: 0;
		width: 130px;
		box-shadow: 0 4px 14px rgba(0,0,0,0.15);
		transition: transform 0.2s, box-shadow 0.2s;
	}
	.cat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }

	.cat-img-wrap {
		width: 130px;
		height: 130px;
		overflow: hidden;
		background: #f0f0f0;
		flex-shrink: 0;
	}
	.cat-img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.35s;
	}
	.cat-card:hover .cat-img-wrap img { transform: scale(1.08); }

	.cat-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.5rem 0.625rem;
		gap: 0.25rem;
	}

	.cat-label {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.65rem;
		color: white;
		text-transform: uppercase;
		letter-spacing: 0.25px;
		line-height: 1.2;
		flex: 1;
	}

	.cat-arrow-btn {
		width: 20px;
		height: 20px;
		background: rgba(255,255,255,0.25);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.7rem;
		color: white;
		flex-shrink: 0;
	}


	/* ── MEMORY LANE ── */
	/* ── MEMORY LANE ──────────────────────────────────────────────────────
	   A 1950s five-and-dime candy counter. The type is the hero, backed by a
	   sunburst; the photograph is pinned up like something off a corkboard;
	   the shortcuts read as little price tags rather than generic chips.

	   Replaces a layout whose focal point was a placeholder cartoon that
	   rendered as an unrecognisable blob, with a green CTA borrowed from no
	   other part of the palette and ~40% of the row left empty. */

	.memory-lane {
		position: relative;
		background: #f7e8c0;
		padding: 4.5rem 0 4rem;
		overflow: hidden;
	}

	/* Halftone dots and a warm vignette, so the cream reads as aged stock
	   rather than a flat fill. */
	.memory-lane::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(rgba(15, 37, 128, 0.07) 1.5px, transparent 1.6px),
			radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%);
		background-size: 14px 14px, 100% 100%;
		pointer-events: none;
	}

	.memory-lane-inner {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 0.95fr 1.05fr;
		gap: 3rem;
		align-items: center;
	}

	.memory-lane-left {
		position: relative;
		padding: 0.5rem 0;
	}

	/* Sunburst. `repeating-conic-gradient` gives the rays; the mask fades them
	   out before they reach the edges, so it reads as light behind the words
	   instead of a hard-edged wheel. */
	.memory-rays {
		position: absolute;
		top: 50%;
		left: 8%;
		width: 46rem;
		height: 46rem;
		transform: translate(-38%, -50%);
		background: repeating-conic-gradient(from 0deg,
			rgba(229, 37, 53, 0.13) 0deg 7deg,
			transparent 7deg 18deg);
		-webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.55) 42%, transparent 68%);
		mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.55) 42%, transparent 68%);
		pointer-events: none;
		z-index: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		.memory-rays { animation: memory-spin 90s linear infinite; }
	}

	@keyframes memory-spin {
		to { transform: translate(-38%, -50%) rotate(360deg); }
	}

	.memory-lane-text {
		position: relative;
		z-index: 1;
	}

	/* A stamped banner rather than a line of tracking-heavy caps. */
	.memory-take {
		display: inline-block;
		margin: 0 0 0.9rem;
		transform: rotate(-2deg);
	}

	.memory-take span {
		display: inline-block;
		font-family: var(--font-heading);
		font-size: 0.8rem;
		font-weight: 800;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: #fffdf5;
		background: var(--retro-red);
		border: 2px solid var(--retro-navy);
		border-radius: 4px;
		box-shadow: 3px 3px 0 var(--retro-navy);
		padding: 0.3rem 0.85rem 0.25rem;
	}

	.memory-lane-title {
		font-family: var(--font-display);
		font-size: clamp(3rem, 7.5vw, 6rem);
		line-height: 0.82;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #fffdf5;
		margin: 0 0 1.1rem;
		/* Layered offset instead of a blur: hand-cut signage, not a drop
		   shadow. The stroke keeps the cream fill legible on cream. */
		-webkit-text-stroke: 2px var(--retro-navy);
		paint-order: stroke fill;
		text-shadow:
			4px 4px 0 var(--retro-navy),
			8px 8px 0 rgba(229, 37, 53, 0.85);
	}

	.memory-lane-title em {
		font-style: normal;
		color: var(--retro-yellow);
	}

	.memory-lane-sub {
		font-family: var(--font-heading);
		font-size: 1.02rem;
		font-weight: 600;
		line-height: 1.55;
		color: #4a3b1e;
		max-width: 24rem;
		margin: 0 0 1.75rem;
	}

	/* Navy, matching every other primary action on the site. The green it
	   replaced existed nowhere else in the palette. */
	.memory-lane-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--retro-navy);
		color: #fff;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.95rem;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding: 0.85rem 1.6rem;
		border: 3px solid var(--retro-navy);
		border-radius: 10px;
		text-decoration: none;
		box-shadow: 5px 5px 0 rgba(229, 37, 53, 0.9);
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.memory-lane-btn:hover {
		color: #fff;
		transform: translate(-2px, -2px);
		box-shadow: 7px 7px 0 rgba(229, 37, 53, 0.9);
	}

	.memory-lane-btn span { transition: transform 0.15s ease; }
	.memory-lane-btn:hover span { transform: translateX(3px); }

	.memory-lane-right {
		display: flex;
		flex-direction: column;
		gap: 1.4rem;
	}

	/* Pinned up, slightly askew. */
	.memory-lane-frame {
		margin: 0;
		background: #fffdf5;
		padding: 0.75rem 0.75rem 0.9rem;
		border: 3px solid var(--retro-navy);
		border-radius: 6px;
		box-shadow: 9px 9px 0 var(--retro-navy);
		transform: rotate(1.4deg);
		transition: transform 0.25s ease;
	}

	.memory-lane-frame:hover { transform: rotate(0deg); }

	.memory-lane-photo {
		width: 100%;
		aspect-ratio: 16 / 11;
		object-fit: cover;
		border-radius: 3px;
		display: block;
	}

	.memory-lane-shelf {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0;
		background: none;
	}

	/* Price tags on the counter: cream card, navy rule, hard shadow. The
	   previous treatment was translucent white on a dark bar, which put the
	   labels at the edge of legibility. */
	.memory-item {
		font-family: var(--font-heading);
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.3px;
		color: var(--retro-navy);
		background: #fffdf5;
		border: 2px solid var(--retro-navy);
		border-radius: 5px;
		box-shadow: 2px 2px 0 var(--retro-navy);
		padding: 0.32rem 0.7rem;
		white-space: nowrap;
		text-decoration: none;
		transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
	}

	.memory-item:hover,
	.memory-item:focus-visible {
		background: var(--retro-yellow);
		color: var(--retro-navy);
		transform: translate(-1px, -1px);
		box-shadow: 3px 3px 0 var(--retro-navy);
	}

	@media (prefers-reduced-motion: no-preference) {
		.memory-item {
			animation: memory-tag-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
			/* --i is set per tag in the template, so they deal out in order. */
			animation-delay: calc(var(--i, 0) * 45ms);
		}
	}

	@keyframes memory-tag-in {
		from { opacity: 0; transform: translateY(8px) rotate(-2deg); }
		to   { opacity: 1; transform: translateY(0) rotate(0deg); }
	}

	@media (max-width: 900px) {
		.memory-lane { padding: 3rem 0; }

		.memory-lane-inner {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		/* The rays are sized for a half-width column; at full width they would
		   wash over the whole section. */
		.memory-rays {
			width: 30rem;
			height: 30rem;
			left: 50%;
			opacity: 0.7;
		}

		.memory-lane-title {
			font-size: clamp(2.6rem, 15vw, 4rem);
			text-shadow: 3px 3px 0 var(--retro-navy), 6px 6px 0 rgba(229, 37, 53, 0.85);
		}

		.memory-lane-sub { max-width: none; }
		.memory-lane-frame { transform: none; box-shadow: 6px 6px 0 var(--retro-navy); }
	}

	/* ── MOOD ── */
	.mood-section {
		padding: 4rem 0;
		background: white;
	}

	.mood-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 0.875rem;
		justify-content: center;
	}

	.mood-badge {
		display: flex;
		align-items: center;
		gap: 0;
		border-radius: 50px;
		border: 3px solid;
		text-decoration: none;
		overflow: hidden;
		transition: all 0.2s;
		box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	}
	.mood-badge:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

	.mood-emoji-circle {
		width: 48px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.3rem;
		flex-shrink: 0;
	}

	.mood-label {
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.72rem;
		letter-spacing: 0.75px;
		white-space: nowrap;
		padding: 0 1rem 0 0.625rem;
	}

	/* ── FEATURES STRIP ── */
	.features-strip {
		background: #18120c;
		padding: 2.5rem 0;
	}

	.features-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	@media (min-width: 768px) {
		.features-row { grid-template-columns: repeat(4, 1fr); }
	}

	.feature-item {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		color: white;
		font-size: 1.75rem;
	}

	.feature-item > div { display: flex; flex-direction: column; }

	.feature-item strong {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.78rem;
		letter-spacing: 0.5px;
		margin-bottom: 2px;
	}

	.feature-item span {
		font-size: 0.72rem;
		opacity: 0.65;
	}

	/* ── SNACK CLUB ──────────────────────────────────────────────────────────
	   Was #ff3d9a, a hot pink belonging to no part of the palette, sandwiched
	   between the navy trust bar above and the navy footer below — a stripe
	   that read as a different site. Navy would disappear between those two,
	   so the band takes the yellow of the plaques, with navy type on it. */

	.snack-club {
		background: var(--retro-yellow);
		border-top: 3px solid var(--retro-navy);
		border-bottom: 3px solid var(--retro-navy);
		padding: 1.5rem;
		/* Faint diagonal ticking, the same texture as the brand header. */
		background-image:
			repeating-linear-gradient(-45deg,
				rgba(15, 37, 128, 0.05) 0 10px,
				rgba(15, 37, 128, 0) 10px 20px);
	}

	.snack-club-inner {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		gap: 1.75rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.gumball-img {
		width: 58px;
		height: 58px;
		object-fit: contain;
		flex-shrink: 0;
	}

	.snack-club-text {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		color: var(--retro-navy);
	}

	.snack-club-icon { font-size: 1.75rem; }

	.snack-club-title {
		font-family: var(--font-display);
		font-size: 1.5rem;
		letter-spacing: 1px;
		color: var(--retro-navy);
		margin: 0 0 2px;
	}

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

	/* Hard shadow rather than a soft drop, matching every other control. */
	.snack-club-form {
		display: flex;
		border: 3px solid var(--retro-navy);
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 4px 4px 0 var(--retro-navy);
		/* The one element on the site that pushed the document wider than the
		   screen. At 320px — an iPhone SE, and the narrowest width still worth
		   supporting — the fixed 220px input plus the button came to 299px in a
		   272px column, taking the whole page 3px wide and putting every
		   section very slightly off-centre. */
		max-width: 100%;
	}

	.snack-club-input {
		padding: 0.7rem 1.1rem;
		border: none;
		font-size: 0.9rem;
		/* 220px is now a preferred size rather than a fixed one. `min-width: 0`
		   is the part that actually matters: a flex item defaults to
		   `min-width: auto`, which refuses to shrink below its content, so
		   `flex: 1` alone would not have helped. */
		flex: 1 1 220px;
		min-width: 0;
		width: auto;
		outline: none;
		font-family: var(--font-body);
		color: var(--retro-navy);
	}

	.snack-club-input::placeholder { color: #9ca3af; }

	/* At 320px the input lands at 143px and "Enter your email" clips to
	   "Enter your emai" — the kind of detail that reads as a broken page
	   rather than a tight one. The padding is generous for a comfortable tap
	   target at normal sizes and is simply worth less than the whole word
	   here; trimming it either side, plus a little off the button, returns
	   about 24px, which is enough. */
	@media (max-width: 380px) {
		.snack-club-input {
			padding-left: 0.7rem;
			padding-right: 0.5rem;
		}

		.snack-club-btn {
			padding-left: 0.9rem;
			padding-right: 0.9rem;
			letter-spacing: 0.5px;
		}
	}

	.snack-club-input:focus-visible {
		box-shadow: inset 0 0 0 2px var(--retro-teal);
	}

	.snack-club-btn {
		/* Never squashed: the input gives up the space instead. */
		flex: 0 0 auto;
		background: var(--retro-navy);
		color: #fff;
		border: none;
		border-left: 3px solid var(--retro-navy);
		padding: 0.7rem 1.35rem;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.82rem;
		letter-spacing: 1px;
		text-transform: uppercase;
		cursor: pointer;
		white-space: nowrap;
		transition: background 0.2s ease;
	}

	.snack-club-btn:hover { background: var(--retro-red); }

	/* ── Mobile ── */
	@media (max-width: 640px) {
		.hero { min-height: 460px; }
		.goodies-badge, .thousands-badge { display: none; }
		.snack-club-inner { flex-direction: column; gap: 1rem; }
		.snack-club-input { width: 170px; }
	}

	/* Screen-reader-only. Also hides the sign-up honeypot from people while
	   leaving it in the DOM for bots to fill in. */
	.visually-hidden {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0);
		white-space: nowrap; border: 0;
	}

	.snack-club-status {
		margin: 0.75rem 0 0;
		font-family: var(--font-heading);
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--retro-navy);
		text-align: center;
		width: 100%;
	}

	.snack-club-status.is-error { color: var(--retro-red); }

	/* ── OFFER SHELF ──────────────────────────────────────────────────────
	   The band directly under the hero: search, then the two things that are
	   true of every order here and of almost nowhere else.

	   It is deliberately the loudest horizontal element on the page after the
	   hero. Everything below it is a rail of cards with the same heading
	   treatment, and a page that is four identical rails stops being read —
	   this breaks that rhythm before it starts.

	   Cream rather than red: the hero is already saturated and the wave above
	   lands on cream, so a red band here would fight it. The weight comes from
	   type and a hard rule, not from a colour. */
	.offer-shelf {
		background: var(--retro-cream);
		border-bottom: 4px solid var(--retro-navy);
		padding: 1.6rem 0 1.5rem;
	}

	.offer-shelf-inner {
		display: grid;
		gap: 1.15rem;
	}

	/* ── search ── */
	.offer-search {
		display: flex;
		align-items: stretch;
		background: #fff;
		border: 3px solid var(--retro-navy);
		border-radius: 12px;
		box-shadow: 5px 5px 0 var(--retro-navy);
		overflow: hidden;
		max-width: 720px;
		width: 100%;
		margin: 0 auto;
	}

	.offer-search:focus-within {
		box-shadow: 5px 5px 0 var(--retro-red);
		border-color: var(--retro-red);
	}

	.offer-search-icon {
		display: flex;
		align-items: center;
		padding: 0 0.2rem 0 0.9rem;
		font-size: 1.05rem;
		line-height: 1;
	}

	.offer-search-input {
		flex: 1 1 auto;
		/* Flex items refuse to shrink below their content without this, which
		   is what pushes a search box off a small screen. */
		min-width: 0;
		border: 0;
		outline: 0;
		padding: 0.85rem 0.7rem;
		font-family: var(--font-body);
		font-size: 1rem;
		color: var(--retro-navy);
		background: transparent;
	}

	.offer-search-input::placeholder {
		color: #9b938a;
	}

	.offer-search-btn {
		flex: 0 0 auto;
		border: 0;
		background: var(--retro-red);
		color: #fff;
		font-family: var(--font-heading);
		font-size: 0.95rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		padding: 0 1.5rem;
		cursor: pointer;
		transition: background 0.15s ease;
	}

	.offer-search-btn:hover {
		background: var(--color-red-dark);
	}

	/* ── the two offers ── */
	.offer-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.7rem 2.2rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.offer {
		display: flex;
		align-items: center;
		gap: 0.55rem;
	}

	.offer-mark {
		font-size: 1.15rem;
		line-height: 1;
		flex: 0 0 auto;
	}

	.offer-text {
		display: flex;
		flex-direction: column;
		font-family: var(--font-body);
		font-size: 0.82rem;
		line-height: 1.35;
		color: color-mix(in srgb, var(--retro-navy) 68%, transparent);
	}

	.offer-text strong {
		font-family: var(--font-heading);
		font-size: 1rem;
		letter-spacing: 0.01em;
		color: var(--retro-navy);
	}

	@media (max-width: 720px) {
		.offer-shelf {
			padding: 1.2rem 0 1.15rem;
		}

		/* Stacked and left-aligned: two centred two-line blocks on a narrow
		   screen read as a jumble rather than a list. */
		.offer-list {
			justify-content: flex-start;
			gap: 0.6rem 1.2rem;
		}

		.offer-text {
			font-size: 0.76rem;
		}

		.offer-text strong {
			font-size: 0.92rem;
		}

		.offer-search-btn {
			padding: 0 1rem;
			font-size: 0.85rem;
		}
	}

	/* ── SAVINGS LADDER ───────────────────────────────────────────────────
	   Deliberately built from Down Memory Lane's vocabulary — full-bleed
	   colour, a conic ray burst, chunky display type, an asymmetric split —
	   because that section is the one thing on this page with a point of view,
	   and one distinctive band surrounded by four identical rails reads as an
	   accident rather than a style.

	   Inverted, though: Memory Lane is warm cream with red rays, this is brand
	   red with cream rays. Same idiom, opposite key, so the page alternates
	   light and dark instead of repeating itself. */
	.savings-band {
		position: relative;
		background: var(--retro-red);
		color: var(--retro-cream);
		padding: 4rem 0 3.6rem;
		overflow: hidden;
	}

	.savings-band::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(rgba(252, 246, 234, 0.10) 1.5px, transparent 1.6px),
			radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0.16), transparent 62%);
		background-size: 14px 14px, 100% 100%;
		pointer-events: none;
	}

	.savings-rays {
		position: absolute;
		top: 50%;
		right: 6%;
		width: 42rem;
		height: 42rem;
		transform: translate(34%, -50%);
		background: repeating-conic-gradient(from 0deg,
			rgba(252, 246, 234, 0.13) 0deg 7deg,
			transparent 7deg 18deg);
		-webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.55) 42%, transparent 68%);
		mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.55) 42%, transparent 68%);
		pointer-events: none;
	}

	.savings-inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 3rem;
		align-items: center;
	}

	.savings-eyebrow {
		margin: 0 0 0.7rem;
	}

	.savings-eyebrow span {
		display: inline-block;
		background: var(--retro-navy);
		color: var(--retro-cream);
		font-family: var(--font-heading);
		font-size: 0.72rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		padding: 0.34rem 0.8rem;
		border-radius: 4px;
		transform: rotate(-2deg);
	}

	.savings-title {
		font-family: var(--font-display);
		font-size: clamp(2.4rem, 5.4vw, 4rem);
		line-height: 0.95;
		margin: 0 0 0.9rem;
		color: var(--retro-cream);
		/* The same hard offset the hero and the buttons use, so it belongs. */
		text-shadow: 4px 4px 0 var(--retro-navy);
	}

	.savings-title em {
		font-style: normal;
		color: var(--retro-yellow);
	}

	.savings-sub {
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: 1.6;
		max-width: 34ch;
		margin: 0 0 1.4rem;
		color: color-mix(in srgb, var(--retro-cream) 88%, transparent);
	}

	.savings-btn {
		display: inline-block;
		background: var(--retro-navy);
		color: var(--retro-cream);
		font-family: var(--font-heading);
		font-size: 0.95rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.85rem 1.5rem;
		border-radius: 10px;
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.28);
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.savings-btn:hover {
		transform: translate(-2px, -2px);
		box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.28);
	}

	/* The second way out of the band. Deliberately a text link and not a
	   second button: two blocks of equal weight is a choice, and the point of
	   the change is that the first one is the answer. */
	.savings-alt {
		display: inline-block;
		margin-left: 1rem;
		font-family: var(--font-body);
		font-size: 0.92rem;
		color: color-mix(in srgb, var(--retro-cream) 82%, transparent);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.savings-alt:hover {
		color: var(--retro-cream);
	}

	/* Under the button rather than beside it once the band goes single-column,
	   where a 1rem inset reads as a hanging indent. */
	@media (max-width: 560px) {
		.savings-alt {
			display: block;
			margin: 0.9rem 0 0;
		}
	}

	/* ── the rungs ── */
	.savings-steps {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
		gap: 0.9rem;
		list-style: none;
		margin: 0;
		padding: 0;
		counter-reset: rung;
	}

	.savings-step {
		position: relative;
		background: var(--retro-cream);
		color: var(--retro-navy);
		border-radius: 14px;
		padding: 1.1rem 0.8rem 1rem;
		text-align: center;
		box-shadow: 5px 5px 0 var(--retro-navy);
		/* Each rung sits a little lower than the last, so the row reads as a
		   climb rather than a set of equal boxes. */
		transform: translateY(calc(var(--i) * 6px)) rotate(calc(var(--i) * 0.6deg - 0.9deg));
		transition: transform 0.16s ease;
	}

	.savings-step:hover {
		transform: translateY(calc(var(--i) * 6px - 4px)) rotate(calc(var(--i) * 0.6deg - 0.9deg));
	}

	.savings-gate {
		display: block;
		font-family: var(--font-heading);
		font-size: 0.76rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--retro-navy) 62%, transparent);
		margin-bottom: 0.15rem;
	}

	.savings-pct {
		display: block;
		font-family: var(--font-display);
		font-size: 2.5rem;
		line-height: 1;
		color: var(--retro-red);
	}

	.savings-pct span {
		font-size: 1.2rem;
		vertical-align: super;
	}

	.savings-off {
		display: block;
		font-family: var(--font-heading);
		font-size: 0.8rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--retro-navy) 62%, transparent);
	}

	@media (max-width: 900px) {
		.savings-inner {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.savings-rays {
			right: -20%;
			opacity: 0.7;
		}

		/* The stagger is a flourish for a single row. Once the rungs wrap it
		   just makes them look misaligned. */
		.savings-step {
			transform: none;
		}

		.savings-step:hover {
			transform: translateY(-3px);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.savings-step,
		.savings-btn {
			transition: none;
		}
	}

	/* ── DISCOVER BY COLOUR ───────────────────────────────────────────────
	   Replaces the mood grid. Each tile is driven entirely by --swatch, so the
	   markup carries the colour and this file never names one — a new colour in
	   CandyColor::PALETTE needs no CSS.

	   The blob is a soft, slightly irregular shape rather than a square chip:
	   these are sweets, and a hard rectangle of flat colour reads as a
	   spreadsheet legend. */
	.color-section {
		padding: 3rem 0 3.2rem;
	}

	.color-section-sub {
		font-family: var(--font-body);
		font-size: 0.95rem;
		line-height: 1.6;
		color: var(--text-secondary);
		max-width: 62ch;
		margin: -0.4rem auto 1.6rem;
		text-align: center;
	}







	/* The colour section now uses the shared .jar-rack from components.css,
	   which carries its own responsive rules. */

/* The colour jars are shared with the affiliate dashboard (components.css).
   Here they are a browsing showcase rather than a link list, so they get more
   room; the tokens exist for exactly this. */
.color-jars {
	--jar-body: 112px;
	--jar-h: 136px;
	max-width: 860px;
	margin-inline: auto;
	/* Fixed four across rather than auto-fit: eight colours fell 6 + 2 on a
	   wide screen, which reads as a row that ran out rather than a shelf. */
	grid-template-columns: repeat(4, 1fr);
	gap: 26px 20px;
}

@media (max-width: 720px) {
	.color-jars {
		grid-template-columns: repeat(2, 1fr);
		--jar-body: 96px;
		--jar-h: 118px;
	}
}