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

	/* ── Section Headings ── */
	.section-heading {
		font-family: var(--font-display);
		font-size: clamp(1.2rem, 2.5vw, 1.6rem);
		color: #1a1a2e;
		text-align: center;
		margin-bottom: 2rem;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
	}
	.mb0 { margin-bottom: 0; }
	.h-arrow { color: #e52535; font-size: 0.9rem; }

	.section-header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1.5rem;
	}

	.view-all-btn {
		background: #e52535;
		color: white;
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.8rem;
		letter-spacing: 1px;
		padding: 0.5rem 1.25rem;
		border-radius: 4px;
		text-decoration: none;
		transition: background 0.2s;
		flex-shrink: 0;
	}
	.view-all-btn:hover { background: #c41e2c; }

	/* ── 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;
	}

	.brand-logo-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80px;
		background: white;
		border-radius: 12px;
		border: 2px solid #e0d8ce;
		padding: 0.6rem 0.75rem;
		text-decoration: none;
		transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		box-shadow: 3px 3px 0 var(--retro-navy);
		overflow: hidden;
	}

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

	.brand-logo-img {
		max-width: 100%;
		max-height: 52px;
		object-fit: contain;
	}

	.brand-logo-fallback {
		font-family: var(--font-heading);
		font-weight: 900;
		font-size: 0.75rem;
		letter-spacing: 0.5px;
		white-space: nowrap;
		color: #333;
		display: none;
	}

	@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;
	}

	/* ── TRENDING ── */
	.trending-section {
		padding: 4rem 0;
		background: #f9f5f0;
	}

	.trending-scroll {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		padding-bottom: 0.75rem;
		scrollbar-width: thin;
		scrollbar-color: #e52535 #ede8e0;
	}
	.trending-scroll::-webkit-scrollbar { height: 4px; }
	.trending-scroll::-webkit-scrollbar-track { background: #ede8e0; border-radius: 2px; }
	.trending-scroll::-webkit-scrollbar-thumb { background: #e52535; border-radius: 2px; }

	.trending-card {
		min-width: 175px;
		max-width: 175px;
		background: white;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: transform 0.2s, box-shadow 0.2s;
		flex-shrink: 0;
	}
	.trending-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.14); }

	.trending-img-wrap {
		display: block;
		position: relative;
		height: 155px;
		overflow: hidden;
		background: #f8f8f8;
	}

	.trending-img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 0.5rem;
		transition: transform 0.3s;
	}
	.trending-card:hover .trending-img-wrap img { transform: scale(1.06); }

	.trending-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
	}

	.sale-badge {
		position: absolute;
		top: 7px;
		left: 7px;
		background: #e52535;
		color: white;
		font-size: 0.6rem;
		font-weight: 800;
		padding: 2px 6px;
		border-radius: 4px;
		letter-spacing: 0.5px;
	}

	.trending-info { padding: 0.75rem; }

	.trending-brand {
		font-size: 0.6rem;
		color: #999;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 0 0 2px;
		font-weight: 600;
	}

	.trending-name {
		font-size: 0.78rem;
		font-weight: 600;
		color: #1a1a2e;
		margin: 0 0 0.35rem;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.trending-stars { font-size: 0.7rem; color: #f4a820; margin-bottom: 0.35rem; }
	.star-ct { color: #aaa; font-size: 0.62rem; }

	.trending-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.trending-price {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.95rem;
		color: #1a1a2e;
	}

	.add-quick {
		width: 26px;
		height: 26px;
		background: #e52535;
		color: white;
		border: none;
		border-radius: 50%;
		font-size: 1.1rem;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s;
		line-height: 1;
		padding: 0;
	}
	.add-quick:hover { background: #c41e2c; }

	/* ── 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: #1a1a2e;
		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);
	}

	.snack-club-input {
		padding: 0.7rem 1.1rem;
		border: none;
		font-size: 0.9rem;
		width: 220px;
		outline: none;
		font-family: var(--font-body);
		color: var(--retro-navy);
	}

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

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

	.snack-club-btn {
		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); }