/*
 * Colour-pair pages and the combinations hub (includes/pairs.php). Hero, grid,
 * cards, chips and guide come from hero.css, core.css and landing.css.
 */

/* Count on a pair chip */
.ga-chip .ga-chip-n { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #F1F1F5; font-size: 11px; font-weight: 600; letter-spacing: 0; color: #55555F; }

.tg-pair-sec .ga-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* "Make your own" in the hero pill row */
.tg-pair .ga-pill.tg-pair-make { background: #111 !important; color: #fff !important; border-color: #111 !important; }

/* Hub */
.tg-pair-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
	margin: 8px 0 48px;
}
.tg-pair-tile {
	display: flex; flex-direction: column; gap: 4px;
	padding: 10px 10px 14px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 22px; background: #fff;
	text-decoration: none !important; color: #111 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: transform .18s, box-shadow .18s;
}
.tg-pair-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, .09); }
.tg-pair-swatch { display: block; height: 110px; border-radius: 14px; margin-bottom: 8px; }
.tg-pair-name { padding: 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tg-pair-n { padding: 0 6px; font-size: 12px; color: #6E6E78; }