/* =============================================================================
   Compare page (dealer-fule v1.10.0) — frozen-label table, BEST/diff badges,
   differences-only toggle. Pure render of the plugin compare view model
   (CompareTableBuilder); all winner/diff/format logic is server-side.

   Brand-adaptive — gold = --color-gold, diff = --color-coral, dark band =
   --color-surface-dark, on-dark text = --color-text-on-brand. No hardcoded
   brand hex; dealers reskin via :root. The compare BAR lives in inventory.css
   and is intentionally untouched by this file.
   ============================================================================= */

.dealer-fule-listing.compare-page {
	--compare-label-w: 210px;
	--compare-col-w: 244px;
	padding: 24px 0 56px;
}
.dealer-fule-listing.compare-page .container { max-width: 1440px; } /* v1.10.1: 1200→1440 so 4-up (label 210 + 4×244 ≈ 1186) fits without a desktop scrollbar */

.compare-page .compare-back {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: 14px;
}
.compare-page .compare-back:hover { color: var(--color-text-link-hover); }

.compare-page .compare-head { margin-bottom: 16px; }
.compare-page .compare-head h1 {
	font-family: var(--font-display);
	font-size: 34px;
	color: var(--color-text);
	margin: 0 0 6px;
}
.compare-page .compare-head__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.compare-page .compare-head__sub { margin: 0; color: var(--color-text-muted); font-size: 15px; }
.compare-page .compare-diffs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
	user-select: none;
}

.compare-page .compare-empty {
	padding: 48px;
	text-align: center;
	background: var(--color-surface-card);
	border-radius: 12px;
}
.compare-page .compare-empty__cta { color: var(--color-text-link); font-weight: 600; text-decoration: none; }
.compare-page .compare-empty__cta:hover { text-decoration: underline; }

/* ---- horizontal-scroll-only region: page handles vertical (no inner frame /
        no inner vertical scrollbar). The frozen label column freezes via
        position:sticky;left:0 against THIS element's horizontal scrollport. ---- */
.compare-page .compare-grid {
	overflow-x: auto;
	border: 1px solid var(--color-surface-tint);
	border-radius: 12px;
	background: var(--color-surface-card);
	-webkit-overflow-scrolling: touch;
}

/* Every band shares the column template. Unit columns FILL the card when
   there's room (minmax 1fr → no dead white gutter at 2–3 units) and floor at
   --compare-col-w so they overflow → horizontal scroll only when cramped
   (narrow viewport / 4 units). No min-width:max-content (that forced the
   gutter at low counts). */
.compare-page .compare-grid__head,
.compare-page .compare-row,
.compare-page .compare-section__head {
	display: grid;
	grid-template-columns: var(--compare-label-w) repeat(var(--compare-units), minmax(var(--compare-col-w), 1fr));
}

.compare-page .compare-cell {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-surface-tint);
	border-right: 1px solid var(--color-surface-tint);
}
.compare-page .compare-cell:last-child { border-right: 0; }

/* frozen label column (horizontal scroll) */
.compare-page .compare-cell--label {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--color-surface-card);
	font-weight: 600;
	color: var(--color-text);
	display: flex;
	align-items: center;
}

/* ---- unit header row: dark band. Not vertically pinned — vertical scroll is
        page-natural (no bounded region), so a sticky-top here would only stick
        to the grid box, not the viewport. The label column still freezes. ---- */
.compare-page .compare-grid__head .compare-cell {
	background: var(--color-surface-dark);
	color: var(--color-text-on-brand);
	border-bottom-color: rgba(255, 255, 255, .12);
	border-right-color: rgba(255, 255, 255, .10);
}
.compare-page .compare-corner { z-index: 5; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; } /* top-left corner over both axes */
.compare-page .compare-corner__eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--color-text-on-dark-muted); }
.compare-page .compare-corner__count { font-size: 18px; font-weight: 700; color: var(--color-text-on-brand); }

.compare-page .compare-unit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.compare-page .compare-unit__photo { display: block; width: 100%; }
.compare-page .compare-unit__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.compare-page .compare-unit__noimg { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.compare-page .compare-unit__eyebrow { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--color-text-on-dark-muted); }
.compare-page .compare-unit__title { color: var(--color-text-on-brand); font-weight: 600; line-height: 1.25; text-decoration: none; }
.compare-page .compare-unit__title:hover { color: var(--color-gold); }
.compare-page .compare-unit__price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compare-page .compare-unit__price-amt { color: var(--color-text-on-brand); font-weight: 700; font-size: 17px; }
.compare-page .compare-unit__btn {
	margin-top: 2px;
	display: inline-block;
	padding: 7px 14px;
	border-radius: 6px;
	background: var(--color-gold);
	color: var(--color-surface-dark);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}
.compare-page .compare-unit__btn:hover { background: var(--color-gold-dark); }

/* badges — gold for LOWEST + BEST */
.compare-page .compare-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 4px;
	letter-spacing: .03em;
	white-space: nowrap;
}
.compare-page .compare-badge--lowest,
.compare-page .compare-badge--best { background: var(--color-gold); color: var(--color-surface-dark); }

/* ---- section header (dark band, not sticky) ---- */
.compare-page .compare-section__head { background: var(--color-surface-dark); }
.compare-page .compare-section--key .compare-section__head { background: color-mix(in srgb, var(--color-surface-dark) 86%, var(--color-gold)); }
.compare-page .compare-section__toggle {
	position: sticky;
	left: 0;
	z-index: 1;
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: inherit;
	border: 0;
	cursor: pointer;
	color: var(--color-text-on-brand);
	font-weight: 700;
	font-size: 14px;
	text-align: left;
}
.compare-page .compare-section__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex: none;
}
.compare-page .compare-section.is-collapsed .compare-section__chevron { transform: rotate(-45deg); }
.compare-page .compare-section.is-collapsed .compare-section__body { display: none; }
.compare-page .compare-section__diffcount {
	grid-column: 2 / -1;
	align-self: center;
	justify-self: end;
	padding: 0 16px;
	color: var(--color-text-on-dark-muted);
	font-size: 13px;
}

/* ---- spec rows ---- */
.compare-page .compare-row__label { color: var(--color-text); }
.compare-page .compare-val {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.compare-page .compare-val__text { color: var(--color-text); }
.compare-page .compare-val.is-empty .compare-val__text { color: var(--color-text-subtle); }

/* differing row — coral dot + subtle tint */
.compare-page .compare-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-coral);
	display: inline-block;
	margin-right: 8px;
	flex: none;
	/* FIX #2: card-colored ring keeps the dot legible on the coral-tinted label cell */
	box-shadow: 0 0 0 2px var(--color-surface-card);
}
.compare-page .compare-row.is-diff { background: var(--color-coral-tint); }
.compare-page .compare-row.is-diff .compare-cell--label { background: color-mix(in srgb, var(--color-coral) 12%, var(--color-surface-card)); }

/* winner cell — clean gold. FIX #1: OPAQUE gold-over-card so it fully covers
   the parent row's coral tint (winner is always inside a differing row) and
   never renders gold-over-coral muddy. */
.compare-page .compare-row.is-diff .compare-val.is-winner,
.compare-page .compare-val.is-winner {
	background: color-mix(in srgb, var(--color-gold) 18%, var(--color-surface-card));
}
.compare-page .compare-val.is-winner .compare-val__text { font-weight: 700; }

.compare-page .compare-addmore { margin-top: 16px; }
.compare-page .compare-addmore__btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px dashed var(--color-surface-tint);
	border-radius: 8px;
	color: var(--color-text-muted);
	text-decoration: none;
	font-weight: 600;
}
.compare-page .compare-addmore__btn:hover { color: var(--color-text); border-color: var(--color-text-subtle); }

/* ---- mobile: page-natural scroll; frozen label column still works via
        sticky-left against the grid's horizontal overflow ---- */
@media (max-width: 640px) {
	.dealer-fule-listing.compare-page { --compare-label-w: 134px; --compare-col-w: 178px; }
	.compare-page .compare-head h1 { font-size: 26px; }
}