/**
 * Canonical inventory card — `.fule-unit-card` (B-consolidation).
 *
 * Plugin-owned port of the theme v2 listing card CSS, enqueued wherever the
 * plugin card renders (shortcodes/widgets, archive fallback, saved page, and the
 * /for-sale/ archive via the theme thin-wrapper) — NOT route-gated.
 *
 * De-themed: the brand alias layer (--navy/--cream/--p2-* …) is re-homed onto the
 * card root, referencing the GLOBAL :root --color-* semantic tokens from the
 * theme's tokens.css (brand-adaptive, child-overridable, present site-wide). The
 * selector prefix is re-scoped .dealer-fule-listing → .fule-unit-card so the
 * theme's own `.card` rules never double-apply (and theme cleanup can come later).
 */

.fule-unit-card {
	/* v2-mockup token aliases → global --color-* tokens (single brand source) */
	--navy:           var(--color-brand);
	--navy-deep:      var(--color-surface-dark);
	--navy-soft:      var(--color-brand-light);
	--cream:          var(--color-surface);
	--cream-deep:     var(--color-surface-alt);
	--orange:         var(--color-accent);
	--orange-deep:    var(--color-accent-dark);
	--ink:            var(--color-text);
	--ink-soft:       var(--color-text-muted);
	--ink-mute:       var(--color-text-subtle);
	--rule:           var(--color-border);
	--green:          var(--color-secondary);
	--used-bg:        #5b6573;
	--sold-bg:        #6b7280;
	--p2-shadow-card:  0 1px 2px rgba(10,35,66,.04), 0 8px 24px -12px rgba(10,35,66,.12);
	--p2-shadow-hover: 0 2px 4px rgba(10,35,66,.06), 0 16px 40px -12px rgba(10,35,66,.18);
	--p2-radius:       6px;
	--p2-radius-lg:    10px;

	background: var(--color-surface-card);
	border-radius: var(--p2-radius-lg);
	box-shadow: var(--p2-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s, box-shadow .2s;
	position: relative;
}
.fule-unit-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--p2-shadow-hover);
}

/* ---- Photo ---- */
.fule-unit-card .card-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--cream-deep);
	overflow: hidden;
}
.fule-unit-card .card-photo a { display: block; height: 100%; }
.fule-unit-card .card-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.fule-unit-card:hover .card-photo img { transform: scale(1.04); }
.fule-unit-card .card-photo__placeholder {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ink-mute);
}

/* ---- Condition badge (incl. Sold) ---- */
.fule-unit-card .badge-condition {
	position: absolute;
	top: 10px; left: 10px;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: white;
}
.fule-unit-card .badge-condition.is-new  { background: var(--green); }
.fule-unit-card .badge-condition.is-used { background: var(--used-bg); }
.fule-unit-card .badge-condition.is-sold { background: var(--sold-bg); }

/* Sold treatment — dim the photo so live units read first. */
.fule-unit-card--sold .card-photo img { opacity: .55; filter: grayscale(.35); }

/* ---- Top-right action stack (heart). FIX: display:flex was missing in the
   theme rule, so flex-direction/gap were inert and a 2nd control would stack
   wrong. ---- */
.fule-unit-card .card-actions {
	position: absolute;
	top: 8px; right: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fule-unit-card .icon-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(4px);
	display: grid;
	place-items: center;
	color: var(--navy);
	border: 0;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.fule-unit-card .icon-btn:hover {
	background: var(--color-surface-card);
	color: var(--orange-deep);
}
.fule-unit-card .icon-btn svg { width: 16px; height: 16px; }
.fule-unit-card .icon-btn.is-saved { color: #d64545; }
.fule-unit-card .icon-btn.is-saved svg { fill: currentColor; }

/* ---- Photo count chip + savings tag ---- */
.fule-unit-card .photo-count {
	position: absolute;
	bottom: 10px; left: 10px;
	background: rgba(10,35,66,.78);
	backdrop-filter: blur(6px);
	color: white;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.fule-unit-card .photo-count svg { width: 12px; height: 12px; }
.fule-unit-card .savings-tag {
	position: absolute;
	bottom: 10px; right: 10px;
	background: var(--navy-deep);
	color: var(--orange);
	padding: 6px 11px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	border: 1px solid rgba(240,138,28,.35);
}
.fule-unit-card .savings-tag span { color: white; opacity: .7; font-weight: 500; }

/* ---- Body ---- */
.fule-unit-card .card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

/* Gold eyebrow: class · stock (B-consolidation addition). */
.fule-unit-card .card-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--orange-deep);
}
.fule-unit-card .card-eyebrow .dot { color: var(--rule); }
.fule-unit-card .card-eyebrow__stock { color: var(--ink-mute); font-weight: 600; }

.fule-unit-card .card-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--navy-deep);
	line-height: 1.25;
	letter-spacing: -.005em;
	margin: 0;
}
.fule-unit-card .card-title a { color: inherit; text-decoration: none; }
.fule-unit-card .card-title a:hover { color: var(--orange-deep); }

/* ---- Spec strip (shared config-driven renderer) ---- */
.fule-unit-card .spec-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--cream);
	border-radius: var(--p2-radius);
	padding: 8px 4px;
}
.fule-unit-card .spec-stat {
	text-align: center;
	border-right: 1px solid var(--rule);
	padding: 0 4px;
}
.fule-unit-card .spec-stat:last-child { border-right: none; }
.fule-unit-card .spec-stat .v {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--navy-deep);
	line-height: 1;
}
.fule-unit-card .spec-stat .l {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-mute);
	margin-top: 4px;
	font-weight: 600;
}

/* ---- Price block ---- */
.fule-unit-card .price-block {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px dashed var(--rule);
	padding-top: 12px;
}
.fule-unit-card .price-now {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--navy-deep);
	letter-spacing: -.01em;
}
.fule-unit-card .price-was {
	font-size: 13px;
	color: var(--ink-mute);
	text-decoration: line-through;
}
.fule-unit-card .price-call {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--orange-deep);
}
.fule-unit-card .price-mo {
	display: block;
	font-size: 11px;
	color: var(--ink-mute);
	margin-top: 2px;
	font-weight: 500;
}
.fule-unit-card .price-mo strong { color: var(--ink); font-weight: 600; }

/* ---- Footer: compare + view ---- */
.fule-unit-card .card-foot {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-top: 4px;
}
.fule-unit-card .compare-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ink-soft);
	cursor: pointer;
}
.fule-unit-card .compare-check input { accent-color: var(--orange); width: 14px; height: 14px; }
.fule-unit-card .btn-view {
	margin-left: auto;
	background: var(--navy);
	color: var(--color-text-on-brand);
	padding: 9px 16px;
	border-radius: var(--p2-radius);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.fule-unit-card .btn-view:hover { background: var(--navy-soft); }

/* ---- Equal-height cards ----
   The grid stretches every card to the tallest in its row (CSS grid default
   align-items:stretch); the card fills that height and, as a flex column with a
   flex:1 body, pushes the price + footer to the bottom via margin-top:auto. So a
   card with a short/absent spec strip lines its footer up with its neighbours —
   no floating buttons, no ragged bottoms. Applies on every grid the card renders
   in (listing + saved). */
.fule-unit-card { height: 100%; }
.fule-unit-card .price-block { margin-top: auto; }

/* =========================================================================
   Saved page — 4-column grid + section headers (saved-page-scoped)
   ========================================================================= */
.fule-shortcode--saved-units .fule-saved-section { margin: 0 0 40px; }
.fule-shortcode--saved-units .fule-saved-section__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-surface-dark);
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.fule-shortcode--saved-units .fule-saved-section__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-accent-dark);
	background: var(--color-surface-alt);
	border-radius: 999px;
	padding: 1px 10px;
}
.fule-shortcode--saved-units .fule-saved-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}
/* The card is wrapped in an <li> here, so stretch the li and let the card fill
   it (the listing grid has the card as a direct child — no wrapper to bridge). */
.fule-shortcode--saved-units .fule-saved-card {
	display: flex;
	height: 100%;
}
@media (max-width: 1100px) {
	.fule-shortcode--saved-units .fule-saved-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.fule-shortcode--saved-units .fule-saved-grid { grid-template-columns: 1fr; }
}
.fule-shortcode--saved-units .fule-empty {
	text-align: center;
	padding: 48px 16px;
}