/*
 * Design System - AELITA
 * components/compare-page.css - car comparison page.
 *
 * Composition follows the approved Stitch screen "Порівняння характеристик
 * авто — AELITA"; every visual primitive (colour, type, space, buttons, cards,
 * badges, radii) comes from the AELITA Design System. Stitch decoration that
 * has no DS equivalent (rounded surfaces, coloured shadows, gradients, glow,
 * status pills, best-value tags, fuel dots, colour swatches) is intentionally
 * not implemented.
 *
 * Loaded only on the comparison page (inc/compare/assets.php).
 */

.a-compare-shell {
	/* Layout offset only; no local colour/shape tokens are defined here. */
	--cmp-header-offset: 60px;

	background-color: var(--bg);
	padding-block: var(--space-5) var(--space-8);
}

.a-compare {
	padding-block: var(--space-3) var(--space-2);
}

/* -------------------------------------------------------------------- */
/* Intro + controls                                                     */
/* -------------------------------------------------------------------- */
.a-compare__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: var(--border-w) solid var(--border);
}

.a-compare__intro-copy {
	max-width: calc(var(--measure) + 4ch);
}

/* Matches the inner-page H1: 24px MyriadSetProSemibold, uppercase, 1.1. */
.a-compare__title {
	margin: 0;
	text-wrap: balance;
}

.a-compare__lead {
	max-width: var(--measure);
	margin: var(--space-2) 0 0;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.a-compare__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
}

.a-compare__controls .a-button {
	flex: 0 0 auto;
}

/* Keep the print icon on the same 45px axis as the text buttons. */
.a-compare__print {
	min-height: calc(var(--space-6) + var(--space-3) + 1px);
	padding-inline: var(--space-3);
}

.a-compare__add[hidden],
.a-compare__print[hidden] {
	display: none;
}

/* Native checkbox with a plain text label (no button container). */
.a-compare__diff {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: calc(var(--space-6) + var(--space-3) + 1px);
	margin: 0;
	padding: 0;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.a-compare__diff input[type="checkbox"] {
	width: var(--space-4);
	height: var(--space-4);
	margin: 0;
	padding: 0;
	accent-color: var(--c-red-600);
	cursor: pointer;
}

.a-compare__diff input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

.a-compare__diff:has(input:disabled) {
	opacity: 0.6;
	cursor: not-allowed;
}

/* DS button links must never inherit the legacy link hover underline/colour. */
.a-compare .a-button,
.a-compare .a-button:hover,
.a-compare .a-button:focus,
.a-compare .a-button:focus-visible,
.a-compare .a-button:active {
	text-decoration: none;
}

.a-compare .a-button--primary:hover,
.a-compare .a-button--primary:focus,
.a-compare .a-button--primary:focus-visible {
	color: var(--text-on-brand);
}

/* The legacy theme applies `:focus { outline: none !important; }`, so the DS
 * focus ring is drawn with box-shadow to stay visible on every surface. */
.a-compare .a-button:focus-visible,
.a-compare__car-title:focus-visible,
.a-compare__slot:focus-visible {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

.a-compare__scroller:focus-visible {
	box-shadow: inset 0 0 0 2px var(--focus-ring);
}

/* -------------------------------------------------------------------- */
/* Notices / states                                                     */
/* -------------------------------------------------------------------- */
.a-compare__notice {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--border);
	border-inline-start: var(--space-1) solid var(--c-red-600);
	background-color: var(--bg-muted);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-compare__nodiff {
	margin: var(--space-4) 0 0;
	padding: var(--space-4);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
	color: var(--text-secondary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-align: center;
}

.a-compare__nodiff[hidden] {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Matrix shell                                                         */
/* -------------------------------------------------------------------- */
.a-compare__matrix {
	overflow: clip;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
}

.a-compare__scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--c-ink-100) var(--bg-muted);
}

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

.a-compare__scroller::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.a-compare__scroller::-webkit-scrollbar-track {
	background: var(--bg-muted);
}

.a-compare__scroller::-webkit-scrollbar-thumb {
	border-radius: 0;
	background: var(--c-ink-100);
}

.a-compare__table {
	width: 100%;
	min-width: 900px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-compare__table caption {
	text-align: start;
}

.a-compare__col-label {
	width: 25%;
}

.a-compare__col-car {
	width: 25%;
}

/* -------------------------------------------------------------------- */
/* Sticky comparison header                                             */
/* -------------------------------------------------------------------- */
/* The comparison header sticks below the site header on screens where the
 * table fits without horizontal scrolling. On smaller screens the scroller is
 * a horizontal scroll container, so a sticky header cannot escape it; the
 * feature column stays sticky instead. */
@media (min-width: 992px) {
	.a-compare__scroller {
		overflow-x: visible;
	}

	.a-compare__table thead th {
		position: sticky;
		top: var(--cmp-header-offset);
		z-index: 5;
	}
}

.a-compare__table thead th {
	background-color: var(--bg);
	border-bottom: var(--border-w) solid var(--border);
	vertical-align: top;
}

.a-compare__summary {
	position: relative;
	padding: var(--space-5) var(--space-5) calc(var(--space-8) + var(--space-2));
	border-inline-end: var(--border-w) solid var(--border);
	text-align: start;
	transition: padding var(--dur-dropdown) var(--ease-out);
}

.a-compare__table thead th.a-compare__summary {
	background-color: var(--bg);
}

.a-compare__summary-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

.a-compare__summary-badge {
	align-self: flex-start;
	max-height: 40px;
	padding: 2px var(--space-2);
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transition:
		max-height var(--dur-dropdown) var(--ease-out),
		padding var(--dur-dropdown) var(--ease-out),
		opacity var(--dur-press) var(--ease-out),
		visibility var(--dur-press) var(--ease-out);
	background-color: var(--bg-invert);
	color: var(--c-white);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

.a-compare__summary-count {
	margin-top: var(--space-3);
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
}

.a-compare__summary-text {
	max-height: 120px;
	margin: var(--space-2) 0 0;
	overflow: hidden;
	color: var(--text-secondary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	opacity: 1;
	visibility: visible;
	transition:
		max-height var(--dur-dropdown) var(--ease-out),
		margin var(--dur-dropdown) var(--ease-out),
		opacity var(--dur-press) var(--ease-out),
		visibility var(--dur-press) var(--ease-out);
}

.a-compare__summary-note {
	position: absolute;
	right: var(--space-5);
	bottom: var(--space-5);
	left: var(--space-5);
	padding-top: var(--space-3);
	border-top: var(--border-w) solid var(--border);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	line-height: 1.5;
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--dur-press) var(--ease-out),
		visibility var(--dur-press) var(--ease-out);
}

/* -------------------------------------------------------------------- */
/* Car header cards                                                     */
/* -------------------------------------------------------------------- */
.a-compare__car {
	position: relative;
	padding: var(--space-5);
	background-color: var(--bg);
	border-inline-end: var(--border-w) solid var(--border);
	text-align: start;
	vertical-align: top;
	transition: padding var(--dur-dropdown) var(--ease-out);
}

.a-compare__car:last-child {
	border-inline-end: 0;
}

.a-compare__car-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

.a-compare__car-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	max-height: 80px;
	min-height: 25px; /* DS badge height; keeps all card media on one axis */
	margin-bottom: var(--space-3);
	padding-inline-end: calc(var(--space-6) + var(--space-2));
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transition:
		max-height var(--dur-dropdown) var(--ease-out),
		min-height var(--dur-dropdown) var(--ease-out),
		margin-bottom var(--dur-dropdown) var(--ease-out),
		opacity var(--dur-press) var(--ease-out),
		visibility var(--dur-press) var(--ease-out);
}

/* Remove control: DS icon/ghost button, positioned in the card corner. */
.a-compare__remove {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--dur-press) var(--ease-out),
		visibility var(--dur-press) var(--ease-out);
}

.a-compare__car-media {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--space-3);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
	color: var(--text-secondary);
	transition:
		width var(--dur-dropdown) var(--ease-out),
		margin-bottom var(--dur-dropdown) var(--ease-out);
}

.a-compare__car-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a-compare__car-title {
	display: -webkit-box;
	overflow: hidden;
	min-height: 36px;
	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);
	text-decoration: none;
	text-transform: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: font-size var(--dur-dropdown) var(--ease-out);
}

.a-compare__car-title:hover,
.a-compare__car-title:focus {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.a-compare__car-title:hover {
		color: var(--link-hover);
	}
}

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

.a-compare__car-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.a-compare__price-value {
	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);
	transition: font-size var(--dur-dropdown) var(--ease-out);
}

@media (min-width: 992px) {
	.a-compare__car-title,
	.a-compare__price-value {
		font-size: 20px;
	}

	.a-compare__car-title {
		min-height: 48px;
	}
}

.a-compare__price-value.is-special {
	color: var(--c-red-600);
}

.a-compare__price-value.is-empty {
	color: var(--text-secondary);
}

.a-compare__price-old {
	color: var(--text-secondary);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	text-decoration: line-through;
}

.a-compare__car-ctas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	max-height: 160px;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-4);
	overflow: hidden;
	border-top: var(--border-w) solid var(--border);
	opacity: 1;
	visibility: visible;
	transition:
		max-height var(--dur-dropdown) var(--ease-out),
		padding-top var(--dur-dropdown) var(--ease-out),
		border-width var(--dur-dropdown) var(--ease-out),
		border-color var(--dur-dropdown) var(--ease-out),
		opacity var(--dur-press) var(--ease-out),
		visibility var(--dur-press) var(--ease-out);
}

.a-compare__car-ctas .a-button {
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Empty comparison slot                                                */
/* -------------------------------------------------------------------- */
.a-compare__car--empty {
	position: relative;
	padding: var(--space-5);
}

.a-compare__slot {
	position: absolute;
	inset: var(--space-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-5);
	border: var(--border-w) dashed var(--border);
	background-color: var(--bg);
	color: var(--text-secondary);
	text-align: center;
	text-decoration: none;
	touch-action: manipulation;
	transition:
		border-color var(--dur-press) var(--ease-out),
		color var(--dur-press) var(--ease-out);
}

.a-compare__slot-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--space-6) + var(--space-3));
	height: calc(var(--space-6) + var(--space-3));
	background-color: var(--bg-muted);
	color: var(--text-secondary);
}

.a-compare__slot-title {
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
}

.a-compare__slot-hint {
	max-width: 24ch;
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
	.a-compare__slot:hover {
		border-color: var(--c-red-600);
	}

	.a-compare__slot:hover .a-compare__slot-title {
		color: var(--link-hover);
	}
}

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

/* -------------------------------------------------------------------- */
/* Section bars (matches .a-car-single__section-title)                  */
/* -------------------------------------------------------------------- */
.a-compare__group-row th {
	padding: var(--space-3) var(--space-5);
	border-block: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
	text-align: start;
}

.a-compare__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.a-compare__group-title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

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

/* -------------------------------------------------------------------- */
/* Data rows                                                            */
/* -------------------------------------------------------------------- */
.a-compare__row > th,
.a-compare__row > td {
	padding: var(--space-3) var(--space-5);
	border-bottom: var(--border-w) solid var(--border);
	text-align: start;
	vertical-align: top;
}

.a-compare__label {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: var(--bg);
	color: var(--text-secondary);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.a-compare__value {
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

.a-compare__value--blank {
	background-color: var(--bg);
}

.a-compare__empty-value {
	color: var(--text-secondary);
	font-weight: var(--fw-regular);
}

.a-compare__value.is-special {
	color: var(--c-red-600);
}

.a-compare__value--sold {
	color: var(--text-secondary);
}

/* Round colour sample; text stays next to it for screen readers. */
.a-compare__color-dot {
	display: inline-block;
	width: var(--space-3);
	height: var(--space-3);
	margin-inline-end: var(--space-2);
	border: var(--border-w) solid var(--c-ink-300);
	border-radius: 50%;
	vertical-align: -1px;
}

/* Restrained advantage highlight: DS tint + a thin brand rule. */
.a-compare__value.is-best {
	background-color: var(--bg-muted);
	box-shadow: inset 2px 0 0 var(--c-red-600);
}

@media (hover: hover) and (pointer: fine) {
	.a-compare__row:hover > td {
		background-color: var(--bg-muted);
	}

	.a-compare__row:hover > td.a-compare__value.is-best {
		background-color: var(--bg-muted);
	}

	.a-compare__row:hover > .a-compare__label {
		background-color: var(--bg-muted);
	}
}

/* Equipment lists */
.a-compare__list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-compare__list-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.a-compare__list-icon {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--c-red-600);
}

.a-compare__list-icon svg {
	display: block;
}

.a-compare__list-item[hidden] {
	display: none;
}

.a-compare__more {
	justify-self: start;
	margin-top: var(--space-1);
}

/* -------------------------------------------------------------------- */
/* Offers footer                                                        */
/* -------------------------------------------------------------------- */
.a-compare__offers > th,
.a-compare__offers > td {
	padding: var(--space-4) var(--space-5);
	border-top: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
	text-align: start;
	vertical-align: middle;
}

.a-compare__offers-label {
	font-weight: var(--fw-regular);
}

.a-compare__offers-title {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

.a-compare__offers-text {
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	line-height: 1.5;
}

.a-compare__offer {
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Loading skeleton                                                     */
/* -------------------------------------------------------------------- */
.a-compare__matrix--skeleton {
	overflow: hidden;
}

.a-compare__skeleton-head {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.a-compare__skeleton-cell {
	height: 250px;
	border-inline-end: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
	animation: a-compare-pulse 1.5s var(--ease-in-out) infinite;
}

.a-compare__skeleton-cell--summary {
	background-color: var(--bg-muted);
}

.a-compare__skeleton-cell:last-child {
	border-inline-end: 0;
}

.a-compare__skeleton-row {
	display: block;
	height: 52px;
	border-top: var(--border-w) solid var(--border);
	background-color: var(--bg);
	animation: a-compare-pulse 1.5s var(--ease-in-out) infinite;
}

@keyframes a-compare-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.55;
	}
}

/* -------------------------------------------------------------------- */
/* Empty state                                                          */
/* -------------------------------------------------------------------- */
.a-compare__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	max-width: 620px;
	margin: 0 auto;
	padding: var(--space-7) var(--space-5);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg);
	text-align: center;
}

.a-compare__empty[hidden] {
	display: none;
}

.a-compare__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	background-color: var(--bg-muted);
	color: var(--c-red-600);
}

/* Typography comes from the global inner-page H2 (20px, uppercase). */
.a-compare__empty-title {
	margin: 0;
	text-wrap: balance;
}

.a-compare__empty-text {
	max-width: var(--measure);
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

/* -------------------------------------------------------------------- */
/* Consultant banner (dark DS panel)                                    */
/* -------------------------------------------------------------------- */
.a-compare__consult {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	margin-top: var(--space-7);
	padding: clamp(var(--space-5), 4vw, var(--space-7));
	border-radius: var(--radius);
	background: linear-gradient(115deg, var(--c-ink-900) 0%, var(--c-ink-800) 55%, var(--c-ink-900) 100%);
	color: var(--text-on-brand);
}

.a-compare__consult-copy {
	max-width: 62ch;
}

.a-compare__consult-title {
	margin: 0;
	color: var(--c-white);
	font-family: var(--font-display-strong);
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.a-compare__consult-text {
	margin: var(--space-2) 0 0;
	color: var(--c-ink-100);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.a-compare__consult-actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

/* DS secondary button re-themed for the dark surface only. */
.a-compare__consult .a-button--secondary {
	--btn-fg: var(--text-on-brand);
	--btn-border: var(--c-ink-500);
	--btn-bg: transparent;
	--btn-bg-hover: var(--c-ink-800);
	--btn-fg-hover: var(--text-on-brand);
	--btn-border-hover: var(--text-on-brand);
}



/* -------------------------------------------------------------------- */
/* Compact sticky header (desktop only)                                 */
/* -------------------------------------------------------------------- */
@media (min-width: 992px) {
	.a-compare__root.is-compact .a-compare__car {
		padding: var(--space-3) var(--space-5);
	}

	.a-compare__root.is-compact .a-compare__summary {
		padding: var(--space-3) var(--space-5);
	}

	.a-compare__root.is-compact .a-compare__summary-badge,
	.a-compare__root.is-compact .a-compare__summary-text {
		max-height: 0;
		margin: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.a-compare__root.is-compact .a-compare__summary-note {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.a-compare__root.is-compact .a-compare__summary-count {
		margin-top: 0;
		font-size: var(--fs-small);
	}

	.a-compare__root.is-compact .a-compare__car-badges {
		max-height: 0;
		min-height: 0;
		margin-bottom: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.a-compare__root.is-compact .a-compare__car-media {
		width: 60%;
		margin-bottom: var(--space-2);
	}

	.a-compare__root.is-compact .a-compare__car-title {
		min-height: 44px;
		font-size: var(--fs-h4);
	}

	.a-compare__root.is-compact .a-compare__price-value {
		font-size: var(--fs-h4);
	}

	.a-compare__root.is-compact .a-compare__car-ctas {
		max-height: 0;
		padding-top: 0;
		border-top-width: 0;
		border-top-color: transparent;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.a-compare__root.is-compact .a-compare__remove {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* The sentinel sits at the matrix top; it has no visual footprint. */
.a-compare__sticky-sentinel {
	display: block;
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* Tablet                                                               */
/* -------------------------------------------------------------------- */
@media (max-width: 991px) {
	.a-compare__intro {
		align-items: flex-start;
		flex-direction: column;
	}

	.a-compare__intro-copy {
		max-width: none;
	}

	.a-compare__controls {
		justify-content: flex-start;
	}

	.a-compare__consult {
		flex-direction: column;
		align-items: flex-start;
	}

	.a-compare__table {
		min-width: 900px;
	}

	.a-compare__table thead th {
		position: static;
	}
}

/* -------------------------------------------------------------------- */
/* Mobile                                                               */
/* -------------------------------------------------------------------- */
@media (max-width: 767px) {
	.a-compare-shell {
		padding-block: var(--space-4) var(--space-6);
	}

	.a-compare__controls {
		width: 100%;
	}

	.a-compare__table {
		min-width: 770px;
	}

	.a-compare__col-label {
		width: 140px;
	}

	.a-compare__col-car {
		width: 210px;
	}

	.a-compare__summary {
		padding: var(--space-3) var(--space-3) calc(var(--space-7) + var(--space-2));
	}

	.a-compare__summary-text,
	.a-compare__summary-note {
		display: none;
	}

	.a-compare__summary-badge {
		font-size: 10px;
	}

	.a-compare__summary-count {
		font-size: var(--fs-small);
	}

	.a-compare__car {
		padding: var(--space-3);
	}

	.a-compare__car-badges {
		padding-inline-end: calc(var(--space-6) + var(--space-3));
	}

	.a-compare__car-title,
	.a-compare__price-value {
		font-size: var(--fs-h4);
	}

	.a-compare__car-title {
		min-height: 44px;
	}

	.a-compare__slot {
		inset: var(--space-3);
		padding: var(--space-3);
	}

	.a-compare__slot-hint {
		display: none;
	}

	.a-compare__group-row th {
		padding: var(--space-2) var(--space-3);
	}

	.a-compare__group-title {
		font-size: var(--fs-body);
	}

	.a-compare__row > th,
	.a-compare__row > td {
		padding: var(--space-2) var(--space-3);
	}

	.a-compare__offers > th,
	.a-compare__offers > td {
		padding: var(--space-3);
	}

	.a-compare__offers-text {
		display: none;
	}

	.a-compare__offers-title {
		font-size: var(--fs-body);
	}

	.a-compare__consult {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
		margin-top: var(--space-6);
		padding: var(--space-5);
	}

	.a-compare__consult-title {
		font-size: 20px;
	}

	.a-compare__consult-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		min-width: 0;
	}

	.a-compare__consult-actions .a-button {
		width: 100%;
	}

	.a-compare__skeleton-cell {
		height: 210px;
	}
}

@media (max-width: 575px) {
	.a-compare__empty {
		padding: var(--space-6) var(--space-4);
	}
}

/* -------------------------------------------------------------------- */
/* Motion preferences                                                   */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.a-compare__skeleton-cell,
	.a-compare__skeleton-row {
		animation: none;
	}

	.a-compare__diff,
	.a-compare__diff input[type="checkbox"]::before {
		transition: none;
	}

	.a-compare__slot {
		transition: none;
	}

	.a-compare__car,
	.a-compare__summary,
	.a-compare__car-media,
	.a-compare__car-badges,
	.a-compare__car-ctas,
	.a-compare__remove,
	.a-compare__car-title,
	.a-compare__price-value,
	.a-compare__summary-badge,
	.a-compare__summary-text,
	.a-compare__summary-note {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* Print                                                                */
/* -------------------------------------------------------------------- */
@media print {
	.a-compare-shell {
		background: var(--bg);
		padding: 0;
	}

	.a-compare {
		max-width: none;
		padding: 0;
	}

	.a-compare__intro {
		border: 0;
		margin-bottom: var(--space-3);
		padding-bottom: 0;
	}

	.a-compare__controls,
	.a-compare__notice,
	.a-compare__loading,
	.a-compare__consult,
	.a-compare__nodiff,
	.a-header-slot,
	.a-footer,
	.a-breadcrumbs-bar {
		display: none !important;
	}

	.a-compare__matrix {
		border: 0;
	}

	.a-compare__scroller {
		overflow: visible;
	}

	.a-compare__table {
		min-width: 0;
	}

	.a-compare__table thead th {
		position: static;
	}

	.a-compare__remove,
	.a-compare__more,
	.a-compare__car-ctas,
	.a-compare__offer {
		display: none !important;
	}

	.a-compare__list-item[hidden] {
		display: flex !important;
	}

	.a-compare__row > th,
	.a-compare__row > td {
		padding: var(--space-1) var(--space-2);
		font-size: 10px;
	}
}