.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: #ffd700;
		letter-spacing: 6px;
	}

	.hero-snack {
		display: block;
		font-family: var(--font-display);
		font-size: clamp(4.5rem, 14vw, 9rem);
		color: #ff6b00;
		letter-spacing: 2px;
		text-shadow: 4px 4px 0 rgba(0,0,0,0.3);
		-webkit-text-stroke: 2px rgba(255,68,0,0.6);
	}

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

	.hero-btn {
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.9rem;
		letter-spacing: 1px;
		padding: 0.75rem 2rem;
		border-radius: 50px;
		text-transform: uppercase;
		text-decoration: none;
		transition: all 0.2s;
		box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	}

	.hero-btn-pink { background: #ff3d9a; color: white; }
	.hero-btn-pink:hover { background: #e0007a; color: white; transform: translateY(-2px); }

	.hero-btn-yellow { background: #ffd700; color: #1a1a2e; }
	.hero-btn-yellow:hover { background: #e6c200; transform: translateY(-2px); }

	.goodies-badge {
		position: absolute;
		right: 12%;
		top: 28%;
		z-index: 4;
		background: #ff3d9a;
		color: white;
		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: 0 4px 16px rgba(0,0,0,0.3);
		line-height: 1.3;
	}

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

	.thousands-badge {
		position: absolute;
		right: 5%;
		bottom: 22%;
		z-index: 4;
		background: #ffd700;
		color: #1a1a2e;
		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: 0 4px 16px rgba(0,0,0,0.3);
		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 {
		background: #f7e8c0;
		padding: 3.5rem 0 0;
		overflow: hidden;
	}

	.memory-lane-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: center;
	}

	.memory-lane-left {
		display: flex;
		align-items: flex-start;
		gap: 1.25rem;
		padding-bottom: 3.5rem;
	}

	.memory-lane-boy { flex-shrink: 0; }

	.memory-take {
		font-family: var(--font-heading);
		font-size: 1rem;
		font-weight: 900;
		color: #1a1a2e;
		letter-spacing: 2px;
		margin: 0 0 0.125rem;
	}

	.memory-lane-title {
		font-family: var(--font-display);
		font-size: clamp(2rem, 4vw, 3.25rem);
		color: #e52535;
		margin: 0 0 0.75rem;
		line-height: 1.05;
		font-style: italic;
	}

	.memory-lane-sub {
		font-size: 0.9rem;
		color: #555;
		margin: 0 0 1.5rem;
		line-height: 1.6;
	}

	.memory-lane-btn {
		display: inline-block;
		background: #3caa70;
		color: white;
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 0.85rem;
		letter-spacing: 1px;
		padding: 0.75rem 1.75rem;
		border-radius: 50px;
		text-decoration: none;
		transition: background 0.2s;
		box-shadow: 0 4px 12px rgba(60,170,112,0.35);
	}
	.memory-lane-btn:hover { background: #2d8a58; color: white; }

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

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

	.memory-lane-shelf {
		background: #2a1a00;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0.875rem 1rem;
		border-radius: 0 0 12px 12px;
	}

	.memory-item {
		background: rgba(255,255,255,0.12);
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 4px;
		padding: 0.25rem 0.625rem;
		font-size: 0.72rem;
		font-weight: 600;
		color: rgba(255,255,255,0.85);
		white-space: nowrap;
	}

	@media (max-width: 768px) {
		.memory-lane-inner {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}
		.memory-lane-left { padding-bottom: 0; }
	}

	/* ── 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 ── */
	.snack-club {
		background: #ff3d9a;
		padding: 1.375rem 1.5rem;
	}

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

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

	.snack-club-text {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		color: white;
	}

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

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

	.snack-club-sub {
		font-size: 0.82rem;
		color: rgba(255,255,255,0.85);
		margin: 0;
	}

	.snack-club-form {
		display: flex;
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	}

	.snack-club-input {
		padding: 0.75rem 1.25rem;
		border: none;
		font-size: 0.9rem;
		width: 220px;
		outline: none;
		font-family: var(--font-body);
	}

	.snack-club-btn {
		background: #ffd700;
		color: #1a1a2e;
		border: none;
		padding: 0.75rem 1.375rem;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.82rem;
		letter-spacing: 1px;
		cursor: pointer;
		white-space: nowrap;
		transition: background 0.2s;
	}
	.snack-club-btn:hover { background: #e6c200; }

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