/*
 * Design System - AELITA
 * components/single-car-page.css - single car page (Stitch-driven redesign).
 *
 * Adapts the Stitch "car page" composition to the AELITA design system:
 * two-column hero (gallery + sticky summary), selection summary (badges, price,
 * compact specs, CTAs, manager), full characteristics, equipment accordions and
 * the salon/meta footer.
 *
 * Scope: .a-car-single (kept on the existing .carinfo root) and the related-cars
 * shell (its own .a-car-single__related hook). Consumes tokens.css only; no hex
 * outside tokens, sharp radii, one red accent, no gradients, no shadows except
 * overlays. Loaded on single cars only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Hero grid                                                            */
/* -------------------------------------------------------------------- */
.a-car-single {
	margin-top: var(--space-6);
}

/* Breadcrumb trail: keep it on one line (truncating the current item) so a
 * webfont swap cannot change the bar height on narrow screens (CLS). Scoped to
 * the single car page; the shared bar keeps wrapping elsewhere. */
.a-car-single__crumbs .a-breadcrumbs {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.a-car-single__crumbs .a-breadcrumbs__list {
	flex-wrap: nowrap;
	max-width: 100%;
	overflow: hidden;
}

.a-car-single__crumbs .a-breadcrumbs__list li {
	white-space: nowrap;
}

.a-car-single__crumbs .a-breadcrumbs__list li:last-child {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.a-car-single__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--space-6);
	align-items: start;
}

.a-car-single__media {
	min-width: 0;
}

.a-car-single__summary {
	min-width: 0;
}

/* -------------------------------------------------------------------- */
/* Gallery                                                              */
/* -------------------------------------------------------------------- */
.a-car-single__stage {
	position: relative;
}

.a-car-single .carslider {
	max-width: 100%;
	overflow: hidden;
}

/* Media box. Deterministic 4:3 via the padding technique, so the carousel
 * (Slick) restructuring its DOM during init cannot collapse it. The border and
 * background live here — not on the stage — so the thumbnail rail stays outside
 * the framed image. */
.a-car-single .cars_images {
	position: relative;
	height: 0;
	padding-bottom: 75%;
	overflow: hidden;
	margin-bottom: 0;
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
}

/* Reserve the media box before Slick runs (no CLS) and show only the first
 * slide until the carousel is initialised, so the browser does not pull every
 * slide down its own flow (see the gallery note in the build report). */
.a-car-single .carslider:not(.slick-initialized) .a-car-single__slide:not(:first-child) {
	display: none;
}

.a-car-single .carslider .a-car-single__slide {
	position: relative;
}

.a-car-single .carslider .slick-slide > a,
.a-car-single .carslider .a-car-single__slide > a {
	display: block;
}

.a-car-single .carslider .slick-slide img,
.a-car-single .carslider .a-car-single__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Slick arrows: reuse the shared .mainslider-arrow markup, restyle locally.
 *
 * Diagnostics: Bootstrap's .visible-lg/.visible-md force `display:block
 * !important` on these <a> arrows, which defeated flex centering and pushed the
 * icon to the top-left corner. The icon is therefore centered with an
 * absolutely-positioned masked SVG (inset:0; margin:auto), so centering no
 * longer depends on the anchor's display mode, and a real SVG chevron replaces
 * the legacy CSS border chevron. The legacy sprite background is disabled. */
.a-car-single .mainslider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-image: none;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--text-primary);
	cursor: pointer;
	transition:
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		color var(--dur-press) var(--ease-out);
}

.a-car-single .mainslider-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.a-car-single .mainslider-prev {
	left: var(--space-3);
}

.a-car-single .mainslider-prev::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.a-car-single .mainslider-next {
	right: var(--space-3);
}

.a-car-single .mainslider-next::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.a-car-single .mainslider-arrow.slick-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Legacy `*:focus { outline: none !important }` suppresses outline focus rings,
 * so the arrows use an outline-free focus indicator that still passes. */
.a-car-single .mainslider-arrow:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
	.a-car-single .mainslider-arrow:hover {
		background-image: none;
		background-color: var(--bg);
		border-color: var(--c-red-600);
		color: var(--c-red-600);
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-car-single .mainslider-arrow {
		transition: none;
	}
}

@media (max-width: 991px) {
	.a-car-single .mainslider-arrow {
		display: none;
	}
}

.a-car-single__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	color: var(--c-ink-300);
	background-color: var(--bg-muted);
}

.a-car-single__placeholder svg {
	width: 64px;
	height: 64px;
}

/* Badges over the photo. */
.a-car-single__badges {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	max-width: calc(100% - var(--space-5));
}

.a-car-single__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius);
	background-color: var(--c-ink-800);
	color: var(--c-white);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.a-car-single__badge svg {
	width: 15px;
	height: 15px;
}

.a-car-single__badge--in_stock {
	background-color: var(--status-success);
}

.a-car-single__badge--on_order,
.a-car-single__badge--in_transit {
	background-color: var(--c-ink-500);
}

.a-car-single__badge--action {
	background-color: var(--sticker-action);
}

.a-car-single__badge--testdrive {
	background-color: var(--sticker-testdrive);
}

.a-car-single__badge--check {
	background-color: var(--sticker-check);
}

.a-car-single__badge--dwa {
	background-color: var(--c-ink-800);
}

.a-car-single__badge--sold {
	background-color: var(--c-ink-900);
}

/* Counter. */
.a-car-single__counter {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 3;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius);
	background-color: rgba(22, 22, 24, 0.72);
	color: var(--c-white);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
}

/* Thumbnail rail: native horizontal scroller, three per view, scroll-snap. */
.a-car-single__thumbs {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	/* Prevent the horizontal scroller from widening the page. */
	max-width: 100%;
}

.a-car-single__thumb {
	position: relative;
	flex: 0 0 calc((100% - 2 * var(--space-2)) / 3);
	scroll-snap-align: start;
	padding: 0;
	border: 2px solid transparent;
	background-color: var(--bg-muted);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--dur-press) var(--ease-out);
}

.a-car-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.a-car-single__thumb.is-active {
	border-color: var(--c-red-600);
}

.a-car-single__thumb:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.a-car-single__thumb:hover {
		border-color: var(--text-secondary);
	}

	.a-car-single__thumb.is-active:hover {
		border-color: var(--c-red-600);
	}
}

/* Trust strip. */
.a-car-single__trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-3);
	margin: var(--space-3) 0 0;
	padding: var(--space-3) 0 0;
	border-top: var(--border-w) solid var(--border);
	list-style: none;
}

.a-car-single__trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--fs-small);
}

.a-car-single__trust-icon {
	display: inline-flex;
	color: var(--c-red-600);
}

.a-car-single__trust-icon svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------- */
/* Summary                                                              */
/* -------------------------------------------------------------------- */
.a-car-single__summary-inner {
	padding: var(--space-5);
	border: var(--border-w) solid var(--border);
}

.a-car-single__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.a-car-single__eyebrow-brand {
	color: var(--c-red-600);
	text-decoration: none;
}

.a-car-single__eyebrow-brand:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a-car-single__eyebrow-brand:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-car-single__title {
	margin: 0 0 var(--space-3);
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

.a-car-single__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0 0 var(--space-4);
	padding: var(--space-1) var(--space-3);
	border: var(--border-w) solid var(--border);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.a-car-single__status svg {
	width: 16px;
	height: 16px;
}

.a-car-single__status--in_stock {
	color: var(--status-success);
	border-color: var(--status-success);
}

.a-car-single__status--in_stock svg {
	color: var(--status-success);
}

/* Price */
.a-car-single__price {
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
}

.a-car-single__price-label {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.a-car-single__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.a-car-single__price-current {
	color: var(--c-red-600);
	font-family: var(--font-display-strong);
	font-size: 30px;
	font-weight: var(--fw-bold);
	line-height: 1.1;
}

.a-car-single__price-current small {
	font-size: 0.55em;
	font-weight: var(--fw-semibold);
}

.a-car-single__price-old {
	color: var(--text-secondary);
	font-size: var(--fs-body);
	text-decoration: line-through;
}

.a-car-single__price-save {
	display: inline-block;
	margin-top: var(--space-2);
	color: var(--status-success);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.a-car-single__price--sold {
	text-align: center;
}

.a-car-single__price-sold {
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

/* Compact specs */
.a-car-single__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: 0;
}

.a-car-single__spec {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border: var(--border-w) solid var(--border);
}

.a-car-single__spec-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--text-secondary);
}

.a-car-single__spec-icon svg {
	width: 20px;
	height: 20px;
}

.a-car-single__spec-text {
	min-width: 0;
}

.a-car-single__spec-label {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-caption);
}

.a-car-single__spec-value {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

/* CTAs */
/* Summary: the single primary "buy" action sits next to the price. */
.a-car-single__buy {
	width: 100%;
}

/* Under-gallery action group. Desktop: a compact horizontal row. */
.a-car-single__media-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.a-car-single__media-cta {
	flex: 1 1 0;
	min-width: 0;
}

/* Lighter outline treatment for the three under-gallery actions: 1px neutral
 * border, white surface, normal weight and a neutral (ink) icon that turns
 * brand red only on hover/focus. Keeps them clearly secondary to "Купити". */
.a-button.a-car-single__media-cta {
	min-height: 46px;
	padding: var(--space-3) var(--space-4);
	border-width: var(--border-w);
	border-color: var(--border);
	background-color: var(--bg);
	color: var(--text-primary);
	font-weight: var(--fw-regular);
	white-space: normal;
	text-align: center;
}

.a-car-single__media-cta .a-car-single__cta-icon {
	color: var(--text-secondary);
	transition: color var(--dur-press) var(--ease-out);
}

.a-car-single__media-cta .a-car-single__cta-icon svg {
	width: 16px;
	height: 16px;
}

/* Secondary actions keep their light feel: no press scale. */
.a-button.a-car-single__media-cta:active {
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.a-button.a-car-single__media-cta:hover {
		background-color: var(--bg-muted);
		border-color: var(--c-red-600);
		color: var(--text-primary);
	}

	.a-button.a-car-single__media-cta:hover .a-car-single__cta-icon {
		color: var(--c-red-600);
	}
}

/* Visible focus ring (legacy `*:focus { outline: none !important }` suppresses
 * outlines, so a ring is drawn instead). */
.a-button.a-car-single__media-cta:focus-visible {
	border-color: var(--c-red-600);
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

.a-button.a-car-single__media-cta:focus-visible .a-car-single__cta-icon {
	color: var(--c-red-600);
}

/* Shared icon+label alignment for every car CTA (real inline SVG only). */
.a-car-single__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.a-car-single__cta-icon svg {
	width: 18px;
	height: 18px;
}

.a-car-single__cta-label {
	min-width: 0;
}

/* Autosalon contacts */
.a-car-single__dealer {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: var(--border-w) solid var(--border);
}

.a-car-single__dealer-eyebrow {
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.a-car-single__dealer-name {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

.a-car-single__dealer-name-link {
	color: inherit;
	text-decoration: none;
}

.a-car-single__dealer-name-link:hover {
	color: var(--c-red-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a-car-single__dealer-name-link:focus-visible,
.a-car-single__dealer-link:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-car-single__dealer-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	color: var(--text-primary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-car-single__dealer-row-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--c-ink-300);
}

.a-car-single__dealer-row-icon svg {
	width: 18px;
	height: 18px;
}

.a-car-single__dealer-row-value {
	min-width: 0;
}

.a-car-single__dealer-row-link {
	color: var(--text-primary);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.a-car-single__dealer-row-link:hover {
	color: var(--c-red-600);
}

.a-car-single__dealer-link {
	align-self: flex-start;
	color: var(--link);
	font-size: var(--fs-small);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a-car-single__dealer-link:hover {
	color: var(--link-hover);
}

/* Manager */
.a-car-single__manager {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: var(--border-w) solid var(--border);
}

.a-car-single__manager-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--bg-muted);
	color: var(--c-red-600);
}

.a-car-single__manager-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.a-car-single__manager-role {
	color: var(--text-secondary);
	font-size: var(--fs-caption);
}

.a-car-single__manager-phone {
	color: var(--text-primary);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	text-decoration: none;
	white-space: nowrap;
}

.a-car-single__manager-phone:hover {
	color: var(--c-red-600);
}

.a-car-single__viber {
	margin-left: auto;
}

/* -------------------------------------------------------------------- */
/* Sections                                                             */
/* -------------------------------------------------------------------- */
.a-car-single__section {
	margin-top: var(--space-8);
}

.a-car-single__section-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.a-car-single__section-title::before {
	content: "";
	width: var(--space-1);
	height: 1.1em;
	background-color: var(--c-red-600);
}

/* Characteristics list */
.a-car-single__spec-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-8);
	margin: 0;
}

.a-car-single__spec-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: var(--border-w) solid var(--border);
}

.a-car-single__spec-row-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-small);
}

.a-car-single__spec-row-icon {
	display: inline-flex;
	color: var(--c-ink-300);
}

.a-car-single__spec-row-icon svg {
	width: 18px;
	height: 18px;
}

.a-car-single__spec-row-value {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-align: right;
}

/* Equipment accordions */
.a-car-single__accordion {
	border-top: var(--border-w) solid var(--border);
}

.a-car-single__acc {
	border-bottom: var(--border-w) solid var(--border);
}

.a-car-single__acc-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-2);
	cursor: pointer;
	list-style: none;
}

.a-car-single__acc-head::-webkit-details-marker {
	display: none;
}

.a-car-single__acc-title {
	margin-right: auto;
	color: var(--text-primary);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
}

.a-car-single__acc-count {
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.a-car-single__acc-chevron {
	display: inline-flex;
	color: var(--text-secondary);
	transition: transform var(--dur-popover) var(--ease-out);
}

.a-car-single__acc[open] .a-car-single__acc-chevron {
	transform: rotate(180deg);
}

.a-car-single__acc-head:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-car-single__acc-body {
	padding: 0 var(--space-2) var(--space-5);
}

/* One shared reveal for every equipment accordion (including "Опис"), so the
 * open state feels identical across the three blocks. */
@keyframes a-car-single-acc-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.a-car-single__acc[open] > .a-car-single__acc-body {
	animation: a-car-single-acc-open var(--dur-popover) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
	.a-car-single__acc[open] > .a-car-single__acc-body {
		animation: none;
	}
}

.a-car-single__checklist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-car-single__check-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--text-primary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-car-single__check-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--status-success);
}

.a-car-single__check-icon svg {
	width: 18px;
	height: 18px;
}

.a-car-single__prose {
	color: var(--text-primary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	max-width: 82ch;
}

/* Plain-text descriptions: paragraph groups with the checklist's vertical
 * rhythm (no check icons — this is not a checklist). */
.a-car-single__prose-group {
	margin: 0 0 var(--space-4);
}

.a-car-single__prose-group:last-child {
	margin-bottom: 0;
}

.a-car-single__prose-line {
	display: block;
}

.a-car-single__prose-line + .a-car-single__prose-line {
	margin-top: var(--space-2);
}

/* Allowed HTML inside the description (rendered through wp_kses_post). */
.a-car-single__prose p,
.a-car-single__prose ul,
.a-car-single__prose ol,
.a-car-single__prose blockquote,
.a-car-single__prose table {
	margin: 0 0 var(--space-4);
}

.a-car-single__prose > *:last-child {
	margin-bottom: 0;
}

.a-car-single__prose ul,
.a-car-single__prose ol {
	padding-left: var(--space-5);
}

.a-car-single__prose li + li {
	margin-top: var(--space-2);
}

/* Video */
.a-car-single__video .flexible-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.a-car-single__video .flexible-container iframe,
.a-car-single__video .flexible-container object,
.a-car-single__video .flexible-container embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Bottom: salon + disclaimer + share */
.a-car-single__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-5);
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: var(--border-w) solid var(--border);
}

.a-car-single__salon-label {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.a-car-single__salon-link {
	color: var(--text-primary);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.a-car-single__meta {
	max-width: 62ch;
}

.a-car-single__note {
	margin: 0 0 var(--space-3);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	line-height: 1.5;
}

/* Bottom sticky CTA band icons (single car only): replace the legacy text
 * glyphs with real inline SVG. The band itself is unchanged functionally. */
#feedback-call .formbutton-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

#feedback-call .formbutton-ico svg {
	width: 18px;
	height: 18px;
}

#feedback-call .formbutton-txt {
	min-width: 0;
}

/* The band buttons already carry a real inline SVG (.formbutton-ico), so the
 * legacy masked ::before glyph from contact-cta.css is dropped here only.
 * contact-cta.css stays global for every other page. */
#feedback-call .formbutton.formbutton::before {
	content: none;
}

/* -------------------------------------------------------------------- */
/* Related cars (shell already had .similar_cars styling)               */
/* -------------------------------------------------------------------- */
.a-car-single__related-grid {
	margin-top: 0;
}

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* -------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.a-car-single__hero {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

@media (max-width: 991px) {
	.a-car-single__hero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
	}

	/* Mobile order: title + price + CTA first, then the gallery. */
	.a-car-single__media {
		order: 2;
	}

	.a-car-single__summary {
		order: 1;
	}

	.a-car-single__summary-inner {
		padding: var(--space-4);
	}

	.a-car-single__spec-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.a-car-single__checklist {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Under-gallery CTAs stack full-width on narrow screens. */
	.a-car-single__media-actions {
		flex-direction: column;
	}

	.a-car-single__media-cta {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 575px) {
	.a-car-single__price-current {
		font-size: 26px;
	}

	.a-car-single__thumbs {
		gap: var(--space-1);
	}

	.a-car-single__thumb {
		flex-basis: calc((100% - 2 * var(--space-1)) / 3);
	}
}