/*
 * Design System - AELITA
 * components/product-archive.css - product archive card grid (Moto/Quadro/Generator/Jetski).
 *
 * WP3-AR1. Zero-visual-change ownership migration for the product archive card
 * family used by the shared *-list.php partials (Moto/Quadro/Generator/Jetski
 * archives). Scoped only under .a-product-archive (a class-only hook added to
 * the existing card-grid .row in each archive template). The legacy rules in
 * main.css/media.css remain as the fallback and are not removed; design-system
 * CSS loads before legacy main.css, so the scoped selectors win by specificity,
 * regardless of source order, without !important.
 *
 * Scope: .carslist-item (+ sibling), .carlist-item-image, .carlist-item__text,
 * .carlist-item-text__title/__text/__price, .cars__readmore-link, .carlist-readmore a,
 * and the hover states, plus the @media (max-width:768px) .carslist-item rule.
 * Not included: the card markup, .eheight / matchHeight JS contract, badges,
 * Slick internals, pricing/data logic.
 *
 * .carlist-readmore a is migrated 1:1 for family completeness even though no
 * .carlist-readmore element is rendered by the current partials (currently
 * unmatched; legacy-compatible).
 *
 * Exact tokens mapped (#8c98ad -> --c-ink-300, #fff -> --c-white,
 * 18px -> --fs-h4, #CB002C -> --c-red-600, #d81536 -> --c-red-500).
 * Token debt kept literal: 1px, -1px, 10px, 30px, "MyriadSetProBold",
 * and the structural flex values.
 *
 * Loaded on product archives only (see inc/enqueue.php).
 */

.a-product-archive .carslist-item {
	padding: 0;
	border: 1px solid var(--c-ink-300); /* #8c98ad */
	margin-top: -1px;
	display: flex;
	flex-direction: column;
}

.a-product-archive .carslist-item + .carslist-item {
	margin-left: -1px;
}

.a-product-archive .carlist-item-image {
	position: relative;
}

.a-product-archive .carlist-item__text {
	flex: 1 1 auto;
}

.a-product-archive .carslist-item .cars__readmore-link {
	margin-top: auto;
}

.a-product-archive .carslist-item:hover .carlist-item-image {
	opacity: 1;
}

.a-product-archive .carslist-item:hover .cars__readmore-link {
	background-color: var(--c-red-600); /* #CB002C */
}

.a-product-archive .carslist-item:hover .carlist-readmore a {
	background-color: var(--c-red-500); /* #d81536 */
	color: var(--c-white); /* #fff */
}

.a-product-archive .carlist-item-text__title,
.a-product-archive .carlist-item-text__text,
.a-product-archive .carlist-item-text__price {
	display: block;
	margin: 10px;
}

.a-product-archive .carlist-item-text__price {
	text-align: center;
}

.a-product-archive .carlist-item-text__title,
.a-product-archive .carlist-item-text__price {
	font-size: var(--fs-h4); /* 18px */
	font-family: "MyriadSetProBold";
	overflow: hidden;
	text-align: center;
}

.a-product-archive .carlist-readmore a {
	font-family: "MyriadSetProBold";
	font-size: var(--fs-h4); /* 18px */
	text-align: center;
	background-color: var(--c-ink-300); /* #8c98ad */
	color: var(--c-white); /* #fff */
	width: 100%;
	border-radius: 0;
	text-transform: lowercase;
	font-weight: bold;
}

/* Legacy @media only screen and (max-width : 768px). */
@media (max-width: 768px) {
	.a-product-archive .carslist-item {
		margin-bottom: 30px;
	}
}