/* Shop-by-colour: the landing page for one colour.
   The swatch drives everything through --swatch, so one rule set serves all
   ten colours and a new colour needs no CSS at all. */

	.color-hero {
		background: var(--swatch);
		color: var(--swatch-ink);
		padding: 2.6rem 0 2.2rem;
		border-bottom: 4px solid var(--retro-navy);
	}

	.color-eyebrow {
		font-family: var(--font-heading);
		font-size: 0.74rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		opacity: 0.85;
		margin: 0 0 0.4rem;
	}

	.color-title {
		font-family: var(--font-display);
		font-size: clamp(2rem, 5vw, 3.1rem);
		line-height: 1;
		margin: 0 0 0.7rem;
		text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
	}

	.color-sub {
		font-family: var(--font-body);
		font-size: 0.98rem;
		line-height: 1.6;
		max-width: 60ch;
		margin: 0;
		opacity: 0.94;
	}

	/* ── the switcher ── */
	.color-switch {
		background: var(--retro-cream);
		border-bottom: 3px solid var(--retro-navy);
		padding: 0.85rem 0;
	}

	.color-switch-inner {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.color-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		background: #fff;
		border: 2px solid var(--retro-navy);
		border-radius: 999px;
		padding: 0.35rem 0.75rem 0.35rem 0.5rem;
		font-family: var(--font-heading);
		font-size: 0.82rem;
		color: var(--retro-navy);
		text-decoration: none;
		transition: transform 0.12s ease, box-shadow 0.12s ease;
	}

	.color-chip:hover {
		transform: translateY(-2px);
		box-shadow: 0 3px 0 var(--retro-navy);
	}

	.color-chip.is-current {
		background: var(--chip);
		color: var(--chip-ink);
		box-shadow: 3px 3px 0 var(--retro-navy);
	}

	.color-chip-dot {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: var(--chip);
		border: 2px solid var(--retro-navy);
		flex: 0 0 auto;
	}

	.color-chip-n {
		font-size: 0.72rem;
		opacity: 0.62;
	}

	.color-page .product-grid {
		margin: 2rem 0 1rem;
	}

	.color-note {
		background: var(--retro-cream);
		border-top: 3px solid var(--retro-navy);
		margin-top: 2.4rem;
		padding: 1.5rem 0;
	}

	.color-note p {
		font-family: var(--font-body);
		font-size: 0.92rem;
		line-height: 1.65;
		color: var(--text-secondary);
		max-width: 74ch;
		margin: 0;
	}