/* ==========================================================================
   整車區 (/cars/) — REUSES the parts-marketplace chrome (.tshp-archive__topbar,
   .tshp-mode-tabs, .tshp-archive, .tshp-grid, .tshp-card, .tshp-single tokens).
   This file only adds: the no-sidebar grid override, car-card meta, and the
   car single spec sheet.
   ========================================================================== */

/* Cars filter sidebar — multi-level 車輛分類 (source ▸ 車型). Now reuses the FULL
   parts `.tshp-filter` shell, so it gets the desktop sticky card AND the mobile
   bottom-sheet (opened by the filter FAB) for free. Only the link reset is
   car-specific (it uses <a> nav links instead of the parts <label>+checkbox). */
.tshp-car-filter a.tshp-filter__pill { text-decoration: none; }

/* Legacy single-column override (kept for safety; archive now uses the sidebar). */
.tshp-archive--no-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

/* card extras (sits on top of .tshp-card from tshp-archive.css) */
/* The base .tshp-card__status badge uses a COLOURED label on a light pill; the
   car badges are SOLID-colour pills, so the label (and the ::before dot, which
   is currentColor) must be white — otherwise 現貨's green text sits on a green
   fill and vanishes. Scope to .tshp-car-card so parts badges are untouched. */
.tshp-car-card .tshp-card__status {
	color: #fff;
	background: #16a34a;                 /* 原廠現貨 — green (default) */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.tshp-car-card .tshp-card__status--used { background: #0e7490; }   /* 原廠認證中古 — teal */
.tshp-car-card .tshp-card__status--sold { background: #52525b; }   /* 已售出 — grey */
.tshp-car-card__noimg {
	width: 100%;
	min-height: 180px;
	height: 100%;
	display: grid;
	place-items: center;
	background: var(--tshp-bg-alt, #f4f4f5);
	color: var(--tshp-text-dim, #a1a1aa);
}
.tshp-car-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 6px;
	font-size: 14px;
	color: var(--tshp-text-muted, #71717a);
}
.tshp-car-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }

/* ==========================================================================
   Single car page — reuses the parts shell (.tshp-single + .tshp-gallery +
   .tshp-panel + mobile hero / sticky-CTA). Only car-specific bits live here.
   ========================================================================== */

/* No-image fallback inside the gallery main frame. */
.tshp-gallery__noimg {
	width: 100%;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	border-radius: var(--tshp-radius, 14px);
	background: var(--tshp-bg-alt, #f4f4f5);
	color: var(--tshp-text-dim, #a1a1aa);
}

/* Spec sheet — label/value rows in the right panel (stacks below the gallery
   on mobile). */
.tshp-car-specs { margin: 4px 0; padding: 0; }
.tshp-car-spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tshp-divider, #f0f0f0);
	font-size: 15px;
}
.tshp-car-spec:first-child { border-top: 1px solid var(--tshp-divider, #f0f0f0); }
.tshp-car-spec__k { margin: 0; color: var(--tshp-text-muted, #71717a); flex: 0 0 auto; }
.tshp-car-spec__v {
	margin: 0;
	color: var(--tshp-text, #18181b);
	font-weight: 500;
	text-align: right;
	word-break: break-all;
}

/* Car badge colours for the panel status pill + mobile hero status. The parts
   palette has no "used" variant and uses a different green, so pin all three
   here (scoped to the car page) to match the card badges. */
.tshp-car-single-page .tshp-panel__status--available,
.tshp-car-single-page .tshp-m-hero-status--available { background: #16a34a; color: #fff; }
.tshp-car-single-page .tshp-panel__status--used,
.tshp-car-single-page .tshp-m-hero-status--used { background: #0e7490; color: #fff; }
.tshp-car-single-page .tshp-panel__status--sold,
.tshp-car-single-page .tshp-m-hero-status--sold { background: #52525b; color: #fff; }