.ar-cars-archive,
.ar-car-single,
.ar-compare-page {
	padding-block: 34px 58px;
}

.ar-cars-archive__header {
	max-width: 860px;
	margin-bottom: 24px;
}

.ar-cars-archive__header h1 {
	margin: 6px 0 10px;
	font-size: clamp(2.4rem, 5vw, 4.8rem);
	font-weight: 950;
	line-height: 1;
}

.ar-cars-archive__header p {
	margin: 0;
	color: #4b535e;
	font-size: 1.08rem;
}

.ar-car-filters {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: #fff;
	padding: 18px;
	margin-bottom: 28px;
	box-shadow: 0 12px 36px rgba(15, 17, 20, .05);
}

.ar-car-filters__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.ar-car-filters label {
	display: grid;
	gap: 6px;
}

.ar-car-filters span {
	color: #5d6875;
	font-size: .72rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ar-car-filters select,
.ar-compare__form select {
	width: 100%;
	height: 44px;
	border: 1px solid var(--ar-border);
	border-radius: 6px;
	background: #fff;
	padding-inline: 10px;
}

.ar-car-filters__actions,
.ar-compare__form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px;
	margin-top: 14px;
}

.ar-car-filters button,
.ar-compare__form button {
	border: 0;
	border-radius: 6px;
	background: var(--ar-red);
	color: #fff;
	padding: 13px 16px;
	font-weight: 900;
	text-transform: uppercase;
	cursor: pointer;
}

.ar-car-filters__actions a {
	color: var(--ar-muted);
	font-weight: 900;
}

.ar-car-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.ar-car-grid--small {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ar-car-card,
.ar-car-summary {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(15, 17, 20, .05);
}

.ar-car-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--ar-graphite);
	overflow: hidden;
}

.ar-car-card__media img,
.ar-car-summary__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ar-car-card__media .ar-badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
}

.ar-car-card__body {
	padding: 16px;
}

.ar-car-card__brand,
.ar-car-summary__brand {
	margin: 0 0 4px;
	color: var(--ar-red);
	font-size: .72rem;
	font-weight: 950;
	text-transform: uppercase;
}

.ar-car-card h2,
.ar-car-summary h3 {
	margin: 0;
	font-size: 1.28rem;
	font-weight: 950;
	line-height: 1.1;
}

.ar-car-card__version {
	margin: 8px 0 0;
	color: #5d6875;
}

.ar-car-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 14px 0;
	padding: 0;
	list-style: none;
}

.ar-car-card__specs li,
.ar-car-hero__kicker span {
	border: 1px solid var(--ar-border);
	border-radius: 999px;
	background: var(--ar-ice);
	padding: 7px 10px;
	font-size: .76rem;
	font-weight: 850;
}

.ar-car-card__button {
	display: inline-flex;
	border-radius: 6px;
	background: var(--ar-black);
	color: #fff;
	padding: 11px 13px;
	font-size: .75rem;
	font-weight: 950;
	text-transform: uppercase;
}

.ar-car-hero {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 28px;
	align-items: center;
	border-radius: var(--ar-radius);
	background: linear-gradient(135deg, #080809, #15171a);
	color: #fff;
	padding: 28px;
	overflow: hidden;
}

.ar-car-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.ar-car-hero__kicker span {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
}

.ar-car-hero h1 {
	margin: 0 0 14px;
	font-size: clamp(2.4rem, 5vw, 5rem);
	font-weight: 950;
	line-height: 1;
}

.ar-car-hero p {
	color: rgba(255, 255, 255, .78);
}

.ar-car-hero__price span {
	display: block;
	color: rgba(255, 255, 255, .7);
	font-size: .8rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ar-car-hero__price strong {
	color: #fff;
	font-size: 2rem;
	font-weight: 950;
}

.ar-car-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.ar-car-hero__actions a {
	border-radius: 6px;
	background: var(--ar-red);
	padding: 12px 14px;
	font-size: .76rem;
	font-weight: 950;
	text-transform: uppercase;
}

.ar-car-hero__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--ar-radius);
	object-fit: cover;
	background: #101418;
}

.ar-fipe-box {
	display: grid;
	grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr);
	gap: 18px;
	align-items: stretch;
	margin-top: 18px;
	border: 1px solid rgba(215, 25, 32, .18);
	border-radius: var(--ar-radius);
	background: linear-gradient(135deg, #fff, #f7f8fa);
	box-shadow: 0 18px 45px rgba(15, 17, 20, .07);
	overflow: hidden;
}

.ar-fipe-box > div {
	display: grid;
	align-content: center;
	gap: 4px;
	background: var(--ar-black);
	color: #fff;
	padding: 22px;
}

.ar-fipe-box__eyebrow,
.ar-fipe-box li span {
	font-size: .72rem;
	font-weight: 950;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ar-fipe-box__eyebrow {
	color: var(--ar-red);
}

.ar-fipe-box strong {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 950;
	line-height: 1;
}

.ar-fipe-box small {
	color: rgba(255, 255, 255, .66);
	font-weight: 700;
}

.ar-fipe-box ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 18px;
	list-style: none;
}

.ar-fipe-box li {
	display: grid;
	align-content: center;
	gap: 5px;
	min-height: 92px;
	border: 1px solid var(--ar-border);
	border-radius: 8px;
	background: #fff;
	padding: 14px;
}

.ar-fipe-box li span {
	color: #68717d;
}

.ar-fipe-box li b {
	color: var(--ar-black);
	font-size: 1rem;
}

.ar-car-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	margin-top: 30px;
}

.ar-car-highlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}

.ar-car-highlights div {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: #fff;
	padding: 16px;
}

.ar-car-highlights span {
	display: block;
	color: var(--ar-muted);
	font-size: .72rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ar-car-highlights strong {
	display: block;
	margin-top: 5px;
	font-size: 1.05rem;
}

.ar-car-spec-table {
	display: grid;
	gap: 18px;
}

.ar-car-spec-table section {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: #fff;
	overflow: hidden;
}

.ar-car-spec-table h3 {
	margin: 0;
	background: var(--ar-black);
	color: #fff;
	padding: 13px 16px;
	font-size: .9rem;
	text-transform: uppercase;
}

.ar-car-spec-table table,
.ar-compare__table {
	width: 100%;
	border-collapse: collapse;
}

.ar-car-spec-table th,
.ar-car-spec-table td,
.ar-compare__table th,
.ar-compare__table td {
	border-bottom: 1px solid var(--ar-border);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}

.ar-car-spec-table th {
	width: 34%;
	color: #5d6875;
	font-size: .82rem;
	text-transform: uppercase;
}

.ar-car-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.ar-car-gallery img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--ar-radius);
	object-fit: cover;
}

.ar-post-cars {
	max-width: 780px;
	margin: 0 0 28px;
}

.ar-post-cars h2 {
	position: relative;
	margin: 0 0 14px;
	padding-left: 16px;
	font-size: 1rem;
	font-weight: 950;
	text-transform: uppercase;
}

.ar-post-cars h2::before {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 4px;
	background: var(--ar-red);
}

.ar-car-summary {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 16px;
	padding: 12px;
}

.ar-car-summary__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: var(--ar-graphite);
}

.ar-car-summary__body ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 14px;
	padding: 0;
	list-style: none;
	color: #596370;
}

.ar-compare__form {
	align-items: end;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: #fff;
	padding: 18px;
}

.ar-compare__form label {
	display: grid;
	gap: 6px;
	min-width: min(260px, 100%);
}

.ar-compare__table-wrap {
	margin-top: 22px;
	overflow-x: auto;
}

.ar-compare__table {
	min-width: 720px;
	background: #fff;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	overflow: hidden;
}

.ar-compare__table img {
	width: 180px;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	object-fit: cover;
}

.ar-compare__table span {
	display: block;
	margin-top: 8px;
}

.ar-empty-state {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: #fff;
	padding: 24px;
}

@media (max-width: 980px) {
	.ar-car-filters__grid,
	.ar-car-grid,
	.ar-car-single__layout,
	.ar-car-hero,
	.ar-fipe-box,
	.ar-car-highlights,
	.ar-car-gallery {
		grid-template-columns: 1fr;
	}

	.ar-fipe-box ul {
		grid-template-columns: 1fr;
	}

	.ar-car-single__layout .ar-sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	.ar-car-summary {
		grid-template-columns: 1fr;
	}

	.ar-car-hero {
		padding: 18px;
	}
}
