/* Ameri Auto Inventory — frontend styles
   Scoped under .aai- prefixes so it won't fight with your theme's styles. */

.aai-grid-wrap { margin: 24px 0; }

.aai-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}

.aai-card {
	display: block;
	text-decoration: none;
	background: #1b1d22;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,0.25);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	color: #fff;
}
.aai-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.aai-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #2a2d34;
	overflow: hidden;
}
.aai-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aai-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 14px;
	background: repeating-linear-gradient(45deg, #24262b, #24262b 10px, #2b2e34 10px, #2b2e34 20px);
}
.aai-placeholder-large { aspect-ratio: 16/10; border-radius: 12px; }

.aai-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
}

.aai-card-body { padding: 16px 18px 18px; }
.aai-card-body h3 { margin: 0 0 2px; font-size: 17px; color: #fff; }
.aai-trim { color: #9aa0ab; font-size: 13px; margin: 0 0 10px; }

.aai-card-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.aai-price { font-size: 20px; font-weight: 700; color: #ffce45; }
.aai-monthly { font-size: 13px; color: #9aa0ab; }
.aai-miles { font-size: 13px; color: #9aa0ab; margin: 4px 0 0; }

.aai-empty { padding: 40px; text-align: center; color: #888; }

/* ---------- Detail page ---------- */

.aai-detail {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 36px;
	background: #14151a;
	color: #fff;
	padding: 28px;
	border-radius: 16px;
	margin: 20px 0;
}
@media (max-width: 980px) {
	.aai-detail { grid-template-columns: 1fr; }
}

.aai-detail-main {
	width: 100%;
	aspect-ratio: 16/10;
	border-radius: 12px;
	overflow: hidden;
	background: #24262b;
}
.aai-detail-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.aai-detail-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.aai-thumb {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.6;
	border: 2px solid transparent;
	transition: opacity 0.15s, border-color 0.15s;
}
.aai-thumb:hover { opacity: 0.85; }
.aai-thumb.is-active { opacity: 1; border-color: #ffce45; }

.aai-detail-info h1 { margin: 0 0 2px; font-size: 28px; }
.aai-detail-info .aai-trim { font-size: 15px; margin-bottom: 16px; }

.aai-detail-price { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.aai-detail-price .aai-price { font-size: 30px; }
.aai-detail-price .aai-monthly { font-size: 15px; }

.aai-summary { color: #c7cad1; line-height: 1.5; margin-bottom: 20px; }

.aai-specs { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.aai-specs th, .aai-specs td { text-align: left; padding: 8px 10px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.aai-specs th { color: #9aa0ab; font-weight: 500; width: 40%; }
.aai-specs td { color: #fff; }

.aai-detail-info h3 { font-size: 16px; margin: 0 0 10px; }
.aai-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aai-features li { font-size: 14px; color: #d6d9de; padding-left: 20px; position: relative; }
.aai-features li::before { content: "✓"; position: absolute; left: 0; color: #ffce45; font-weight: 700; }

.aai-cta {
	display: inline-block;
	background: #ffce45;
	color: #14151a;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.15s, background 0.15s;
}
.aai-cta:hover { background: #ffd966; transform: translateY(-2px); }