/*
 * Design System - AELITA
 * components/single-car-related.css - single car related-cars shell.
 *
 * Zero-visual ownership migration for the "similar cars" shell on the cars
 * single page. This block is a sibling of the main .carinfo.a-car-single root,
 * so it cannot be scoped by .a-car-single. It is namespaced by its own hook
 * .a-car-single__related (added to the existing .container.similar_cars).
 *
 * The legacy rules in main.css/media.css stay in place and are not removed.
 * Design-system CSS loads before legacy main.css, so the compound selector
 * adds a second class of specificity (0,2,0 vs 0,1,0) and wins on its own,
 * without !important, even if the legacy sheet is loaded afterwards.
 *
 * Car Card internals remain owned by car-card.css; only the shell spacing is
 * scoped here. Literal spacing retained for parity with legacy.
 *
 * Loaded on single cars only (see inc/enqueue.php).
 */

.a-car-single__related.similar_cars {
	margin-top: 60px;
}

/* Unified design-system section heading (matches .a-home-models__title). */
.a-car-single__related.similar_cars .a-car-single__related-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.a-car-single__related.similar_cars .a-car-single__related-title {
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--text-primary);
	text-transform: uppercase;
}

.a-car-single__related.similar_cars .a-car-single__related-accent {
	display: block;
	width: var(--space-8); /* 64px */
	height: var(--space-1); /* 4px */
	background-color: var(--c-red-600);
}

@media (max-width: 768px) {
	.a-car-single__related.similar_cars {
		margin-top: 10px;
	}
}