/* mk-komplektasiya frontend tabs */

/*
 * When a listing has trims saved, the trim tabs already show per-trim spec
 * data and per-trim feature lists. The two listing-level Motors Elementor
 * widgets below would just duplicate that information, so we hide them.
 *
 * If you want them back, add this to your theme:
 *   body.mk-komp-has-trims .elementor-widget-motors-single-listing-classified-listing-data,
 *   body.mk-komp-has-trims .elementor-widget-motors-single-listing-features {
 *     display: revert !important;
 *   }
 */
body.mk-komp-has-trims .elementor-widget-motors-single-listing-classified-listing-data,
body.mk-komp-has-trims .elementor-widget-motors-single-listing-features {
	display: none !important;
}


.mk-komp { margin: 28px 0; font-family: inherit; color: inherit; }

.mk-komp__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid #e5e7eb;
}
.mk-komp__nav-item {
	cursor: pointer;
	padding: 10px 16px;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #374151;
	font-weight: 500;
	transition: background .15s, color .15s;
}
.mk-komp__nav-item:hover { background: #fff; color: #111827; }
.mk-komp__nav-item.is-active {
	background: #fff;
	color: #111827;
	border-color: #d1d5db;
	border-bottom-color: #fff;
	margin-bottom: -2px;
	font-weight: 700;
}
.mk-komp__nav-title { line-height: 1.2; }
.mk-komp__nav-price {
	font-size: 13px;
	color: #2563eb;
	background: rgba(37, 99, 235, 0.08);
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
}
.mk-komp__nav-item.is-active .mk-komp__nav-price { background: rgba(37, 99, 235, 0.16); }

.mk-komp__panels { background: #fff; padding: 22px; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px; }
.mk-komp__panel { display: none; }
.mk-komp__panel.is-active { display: block; }

.mk-komp__prices {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px dashed #e5e7eb;
}
.mk-komp__price-row { display: flex; flex-direction: column; }
.mk-komp__price-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
.mk-komp__price-value { font-size: 22px; font-weight: 700; color: #111827; }

.mk-komp__specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 22px;
	margin-bottom: 18px;
}
@media (max-width: 1100px) { .mk-komp__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .mk-komp__specs { grid-template-columns: 1fr; } }
.mk-komp__spec { display: flex; gap: 10px; align-items: flex-start; }
.mk-komp__spec-icon { font-size: 22px; color: #2563eb; line-height: 1; padding-top: 2px; flex-shrink: 0; }
.mk-komp__spec-text { display: flex; flex-direction: column; }
.mk-komp__spec-label { font-size: 12px; color: #6b7280; }
.mk-komp__spec-value { font-size: 14px; color: #111827; font-weight: 600; }

.mk-komp__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 24px;
	padding-top: 18px;
	border-top: 1px dashed #e5e7eb;
}
@media (max-width: 1100px) { .mk-komp__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .mk-komp__features { grid-template-columns: 1fr; } }
.mk-komp__features-title { font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.mk-komp__features-list { list-style: none; margin: 0; padding: 0; }
.mk-komp__features-list li { display: flex; gap: 8px; padding: 4px 0; align-items: baseline; }
.mk-komp__features-check { color: #16a34a; font-weight: 700; }
.mk-komp__features-text { color: #1f2937; font-size: 14px; }

/* --- Per-trim Compare button ---------------------------------------- */

/* Header row inside each trim panel: prices on the left, Compare button
   on the right, on the same line. Wraps on narrow viewports. */
.mk-komp__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px dashed #e5e7eb;
}
.mk-komp__panel-header .mk-komp__prices {
	flex: 1 1 auto;
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.mk-komp__panel-header .mk-komp__actions {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.mk-komp__actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 14px;
}
/* v2.6.0 — sleeker compare button. Smaller, refined hover, subtle inactive
   state. Active variant uses a soft green tint with a check-style accent. */
.mk-komp__compare-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1px;
	color: #2563eb;
	background: rgba(37,99,235,.06);
	border: 1px solid rgba(37,99,235,.35);
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
	box-shadow: 0 1px 2px rgba(37,99,235,0);
}
.mk-komp__compare-btn:hover {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
	box-shadow: 0 4px 12px rgba(37,99,235,.18);
}
.mk-komp__compare-btn:focus-visible {
	outline: 2px solid rgba(37,99,235,.4);
	outline-offset: 2px;
}
.mk-komp__compare-btn .mk-komp__compare-icon { font-size: 14px; line-height: 1; }
.mk-komp__compare-btn .mk-komp__compare-label-remove { display: none; }
.mk-komp__compare-btn .mk-komp__compare-label-add    { display: inline; }

.mk-komp__compare-btn.is-active {
	background: rgba(22,163,74,.1);
	border-color: rgba(22,163,74,.4);
	color: #15803d;
}
.mk-komp__compare-btn.is-active:hover {
	background: rgba(220,38,38,.08);
	border-color: rgba(220,38,38,.45);
	color: #b91c1c;
	box-shadow: 0 4px 12px rgba(220,38,38,.15);
}
.mk-komp__compare-btn.is-active .mk-komp__compare-label-add    { display: none; }
.mk-komp__compare-btn.is-active .mk-komp__compare-label-remove { display: inline; }
/* Show a check tick on active state (replaces the motors compare glyph). */
.mk-komp__compare-btn.is-active .mk-komp__compare-icon::before { content: "✓"; }
.mk-komp__compare-btn.is-active:hover .mk-komp__compare-icon::before { content: "×"; }

/* ============================================================
 * v2.6.0 — Slide-in compare drawer (right edge)
 * ============================================================ */
.mk-komp-drawer {
	position: fixed;
	inset: 0;
	z-index: 99000;
	pointer-events: none;
	visibility: hidden;
}
.mk-komp-drawer.is-open { visibility: visible; }
.mk-komp-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 17, 23, 0);
	transition: background .25s ease;
	pointer-events: none;
}
.mk-komp-drawer.is-open .mk-komp-drawer__backdrop {
	background: rgba(13, 17, 23, .35);
	pointer-events: auto;
}
.mk-komp-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(380px, 92vw);
	background: #ffffff;
	box-shadow: -12px 0 32px rgba(13, 17, 23, .18);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.2,.7,.2,1);
	pointer-events: auto;
}
.mk-komp-drawer.is-open .mk-komp-drawer__panel { transform: translateX(0); }

.mk-komp-drawer__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid #e5e7eb;
}
.mk-komp-drawer__head-text { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.mk-komp-drawer__title { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.mk-komp-drawer__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px; height: 22px; padding: 0 7px;
	background: #2563eb; color: #fff;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
	line-height: 1;
}
.mk-komp-drawer__close {
	background: none; border: none; cursor: pointer;
	color: #6b7280; padding: 6px;
	border-radius: 6px;
	transition: background .15s, color .15s;
}
.mk-komp-drawer__close:hover { background: #f3f4f6; color: #0f172a; }

.mk-komp-drawer__body {
	flex: 1; overflow-y: auto;
	padding: 8px 10px;
}
.mk-komp-drawer__empty {
	color: #6b7280; text-align: center;
	padding: 40px 24px; font-size: 13px; line-height: 1.5;
}

.mk-komp-drawer__item {
	display: flex; gap: 12px;
	padding: 12px 10px;
	border-radius: 10px;
	background: transparent;
	transition: background .15s;
	position: relative;
}
.mk-komp-drawer__item + .mk-komp-drawer__item { border-top: 1px solid #f3f4f6; }
.mk-komp-drawer__item:hover { background: #f9fafb; }
.mk-komp-drawer__thumb {
	flex: 0 0 64px; height: 48px;
	background: #f3f4f6 center/cover no-repeat;
	border-radius: 8px;
	overflow: hidden;
}
.mk-komp-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-komp-drawer__meta { flex: 1; min-width: 0; }
.mk-komp-drawer__meta-title {
	font-size: 13px; font-weight: 600;
	color: #0f172a;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	line-height: 1.3;
}
.mk-komp-drawer__meta-trim {
	font-size: 12px; color: #475569;
	margin-top: 2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* v2.8.25 — force-hide drawer price even if the JS template ever puts it back
   or a future Motors update injects price into the cached items API payload */
.mk-komp-drawer__meta-price { display: none !important; }
.mk-komp-drawer__remove {
	background: none; border: none; cursor: pointer;
	color: #9ca3af; padding: 4px; align-self: flex-start;
	border-radius: 6px;
	transition: background .15s, color .15s;
}
.mk-komp-drawer__remove:hover { background: #fee2e2; color: #b91c1c; }

.mk-komp-drawer__foot {
	display: flex; gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid #e5e7eb;
	background: #fafbfc;
}
.mk-komp-drawer__clear {
	background: none; border: 1px solid #e5e7eb;
	color: #475569; cursor: pointer;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 12.5px; font-weight: 600;
	transition: background .15s, color .15s, border-color .15s;
}
.mk-komp-drawer__clear:hover { background: #fee2e2; color: #b91c1c; border-color: rgba(220,38,38,.35); }
.mk-komp-drawer__cta {
	flex: 1; text-align: center;
	background: #2563eb; color: #fff;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 13px; font-weight: 600;
	text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, transform .15s;
}
.mk-komp-drawer__cta:hover { background: #1d4ed8; color: #fff; text-decoration: none; }
.mk-komp-drawer__cta.is-disabled {
	background: #cbd5e1; color: #fff; cursor: not-allowed; pointer-events: none;
}
.mk-komp-drawer__loading { padding: 24px; color: #6b7280; text-align: center; font-size: 13px; }

/* --- Lightweight toast feedback (used when Motors notifier isn't available) --- */
.mk-komp-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 12px);
	background: rgba(17, 24, 39, .95);
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 99999;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	pointer-events: none;
}
.mk-komp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
 *  Compare page — fully self-contained styling.
 *  Single-table layout below a card grid: rows are guaranteed-aligned
 *  because the browser handles cell widths (table-layout: fixed).
 *  We deliberately do NOT inherit Motors's compare classes; this owns
 *  the layout end-to-end so the page renders consistently.
 * ===================================================================== */

.mk-komp-compare { padding: 28px 0; color: inherit; max-width: 100%; }

.mk-komp-compare__page-title {
	margin: 0 0 24px;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* === Cards row above the table — equal-width grid (v2.4.2 — 5 cols for 4 cars + spacer) === */
.mk-komp-compare__cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}
@media (max-width: 900px)  { .mk-komp-compare__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .mk-komp-compare__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mk-komp-compare__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}
.mk-komp-compare__card--spacer {
	background: transparent;
	border: none;
	min-height: 1px;
}

/* Image (real photo or placeholder) */
.mk-komp-compare__image { display: block; line-height: 0; }
.mk-komp-compare__image a { display: block; }
.mk-komp-compare__image-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
}
.mk-komp-compare__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	aspect-ratio: 16 / 10;
	color: #9ca3af;
	font-size: 56px;
	width: 100%;
}

/* === Remove from list button (always visible, clearly a button) === */
.mk-komp-compare__remove-row {
	padding: 12px 14px 0;
	text-align: center;
}
.mk-komp__remove-from-compare {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 16px;
	background: #fff;
	color: #ef4444;
	border: 1px solid #ef4444;
	border-radius: 999px;
	font: 600 12px/1 inherit;
	letter-spacing: .3px;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s;
	font-family: inherit;
}
.mk-komp__remove-from-compare:hover { background: #ef4444; color: #fff; }
.mk-komp__remove-from-compare:focus  { outline: 2px solid #fca5a5; outline-offset: 2px; }
.mk-komp__remove-icon { font-size: 16px; line-height: 1; }
.mk-komp__remove-from-compare span,
.mk-komp__remove-from-compare .mk-komp__remove-icon { pointer-events: none; }

/* === Title + price on the same row === */
.mk-komp-compare__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px 16px;
}
.mk-komp-compare__title-link {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.mk-komp-compare__title-link:hover { color: #2563eb; }
.mk-komp-compare__listing {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.mk-komp-compare__trim {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	color: #2563eb;
}
.mk-komp-compare__price {
	flex: 0 0 auto;
	font: 800 16px/1.25 inherit;
	color: #2563eb;
	white-space: nowrap;
	text-align: right;
}
.mk-komp-compare__price-regular {
	display: block;
	font-size: 12px;
	color: #9ca3af;
	text-decoration: line-through;
	font-weight: 600;
}
.mk-komp-compare__price-sale,
.mk-komp-compare__price-normal { display: block; }

/* === Empty "Add to compare" slot — proper centered CTA === */
.mk-komp-compare__card--empty {
	background: #f9fafb;
	border-style: dashed;
	color: inherit;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.mk-komp-compare__card--empty:hover {
	background: #eff6ff;
	border-color: #93c5fd;
	text-decoration: none;
}
.mk-komp-compare__card--empty .mk-komp-compare__image-placeholder {
	background: transparent;
}
.mk-komp-compare__add-button {
	display: block;
	margin: 14px;
	padding: 11px 16px;
	background: #2563eb;
	color: #fff;
	text-align: center;
	font: 700 13px/1 inherit;
	letter-spacing: .4px;
	text-transform: uppercase;
	border-radius: 999px;
	transition: background .15s;
}
.mk-komp-compare__card--empty:hover .mk-komp-compare__add-button { background: #1d4ed8; }

/* === Spec table — single table = guaranteed alignment === */
.mk-komp-compare__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed; /* equal columns regardless of content length */
	margin: 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}
/* v2.4.2 — 5 columns total (1 label + 4 cars). 20% each fits without scroll. */
.mk-komp-compare__col--label { width: 20%; }
.mk-komp-compare__col--value { width: 20%; }
@media (max-width: 900px) {
	.mk-komp-compare__col--label { width: 32%; }
	.mk-komp-compare__col--value { width: 17%; }
}

.mk-komp-compare__table th,
.mk-komp-compare__table td {
	padding: 14px 16px;
	border-bottom: 1px solid #f1f5f9;
	text-align: left;
	vertical-align: top;
	font-size: 13px;
	line-height: 1.4;
}
.mk-komp-compare__table tr:last-child th,
.mk-komp-compare__table tr:last-child td { border-bottom: none; }
.mk-komp-compare__table tr:nth-child(even) th,
.mk-komp-compare__table tr:nth-child(even) td { background: #fafbfc; }

.mk-komp-compare__label {
	color: #6b7280;
	font: 600 12px/1.4 inherit;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.mk-komp-compare__value {
	color: #1f2937;
	font-weight: 500;
}
.mk-komp-compare__value--empty { color: #d1d5db; }

/* === Compare table — group section header rows === */
.mk-komp-compare__group-row { background: #f3f4f6; }
.mk-komp-compare__group-title {
	padding: 10px 16px;
	font: 700 12px/1.4 inherit;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #1d4ed8;
	background: #eff6ff;
	text-align: left;
	border-bottom: 1px solid #bfdbfe;
}

/* === Listing trim panel — spec groups === */
.mk-komp__spec-group { margin-bottom: 18px; }
.mk-komp__spec-group--ungrouped { margin-bottom: 18px; }
.mk-komp__spec-group-title {
	margin: 0 0 10px;
	padding: 4px 0 6px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #1d4ed8;
	border-bottom: 1px solid #e5e7eb;
}

/* "Show more" button */
.mk-komp__show-more-row {
	display: flex;
	justify-content: center;
	margin: 18px 0 8px;
}
.mk-komp__show-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: #2563eb;
	color: #fff;
	border: none;
	border-radius: 999px;
	font: 700 13px/1 inherit;
	letter-spacing: .4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.mk-komp__show-more-btn:hover { background: #1d4ed8; }
.mk-komp__show-more-btn:active { transform: translateY(1px); }

/* === Modal popup for "Show more" === */
.mk-komp__modal {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 16px;
}
.mk-komp__modal[hidden] { display: none !important; }
.mk-komp__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .7);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.mk-komp__modal-content {
	position: relative;
	background: #fff;
	border-radius: 14px;
	width: 100%;
	max-width: 820px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	overflow: hidden;
}
.mk-komp__modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid #e5e7eb;
	background: #fafbfc;
}
.mk-komp__modal-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
	text-transform: none;
}
.mk-komp__modal-close {
	background: transparent;
	border: none;
	color: #6b7280;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 8px;
	transition: background .15s, color .15s;
}
.mk-komp__modal-close:hover { background: #fef2f2; color: #b91c1c; }
.mk-komp__modal-body {
	padding: 20px 22px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.mk-komp__modal-body .mk-komp__spec-group:last-child { margin-bottom: 4px; }
body.mk-komp-modal-open { overflow: hidden; }
@media (max-width: 600px) {
	.mk-komp__modal { padding: 0; }
	.mk-komp__modal-content { max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* =====================================================================
 *  Tri-state boolean indicators (v2.1.0)
 *  ✓ green — Standard feature
 *  ○ blue  — Optional add-on
 *  — red   — Absent / not available on this trim
 * ===================================================================== */
.mk-komp-bool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	min-height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	font: 700 14px/1 inherit;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
}
.mk-komp-bool--std {
	color: #15803d;
	background: #dcfce7;
	border: 1px solid #86efac;
}
.mk-komp-bool--opt {
	color: #1d4ed8;
	background: #dbeafe;
	border: 1px solid #93c5fd;
}
.mk-komp-bool--no {
	color: #b91c1c;
	background: #fee2e2;
	border: 1px solid #fecaca;
}

/* =====================================================================
 *  Compare empty-slot inline search (v2.1.0)
 *  Renders inside an empty card slot — user can type to search car+trim
 *  and click a result to add it directly to compare.
 * ===================================================================== */
.mk-komp-compare__card--search {
	background: #f9fafb;
	border-style: dashed;
	padding: 16px;
	min-height: 220px;
	justify-content: flex-start;
}
.mk-komp-compare__search {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}
.mk-komp-compare__search-title {
	font: 700 12px/1.2 inherit;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #6b7280;
	text-align: center;
	margin: 0;
}
.mk-komp-compare__search-input {
	width: 100%;
	padding: 10px 12px;
	font: 500 14px/1.2 inherit;
	color: #111827;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
}
.mk-komp-compare__search-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.mk-komp-compare__search-results {
	position: relative;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	max-height: 260px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
.mk-komp-compare__search-results:empty { display: none; }
.mk-komp-compare__search-results[hidden] { display: none; }
.mk-komp-compare__search-result {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f1f5f9;
	transition: background .12s;
}
.mk-komp-compare__search-result:last-child { border-bottom: none; }
.mk-komp-compare__search-result:hover,
.mk-komp-compare__search-result.is-active {
	background: #eff6ff;
}
.mk-komp-compare__search-result-title {
	font: 600 13px/1.25 inherit;
	color: #111827;
}
.mk-komp-compare__search-result-trim {
	font: 500 12px/1.25 inherit;
	color: #2563eb;
}
.mk-komp-compare__search-result-price {
	font: 700 12px/1.25 inherit;
	color: #15803d;
	margin-top: 2px;
}
.mk-komp-compare__search-empty {
	padding: 12px;
	font: 500 13px/1.4 inherit;
	color: #6b7280;
	text-align: center;
}
.mk-komp-compare__search-hint {
	font: 500 11px/1.3 inherit;
	color: #9ca3af;
	text-align: center;
}
.mk-komp-compare__search-loading {
	padding: 12px;
	text-align: center;
	color: #6b7280;
	font: 500 13px/1.4 inherit;
}

/* =====================================================================
 *  v2.3.0 — price display hidden everywhere.
 *  The price field is still saved in trim postmeta (admin metabox writes
 *  it on every Update), but every frontend element is suppressed via CSS
 *  so it can be re-enabled in the future by removing this block.
 * ===================================================================== */
.mk-komp__nav-price,
.mk-komp__prices,
.mk-komp__panel-header .mk-komp__prices,
.mk-komp-compare__price,
.mk-komp-compare__price-regular,
.mk-komp-compare__price-sale,
.mk-komp-compare__price-normal {
	display: none !important;
}
/* The price row in the panel header had a dashed bottom border + padding
 * that doubled as a divider — without prices that line looks awkward.
 * Tighten the header so the Compare button still aligns properly. */
.mk-komp__panel-header {
	border-bottom: none;
	padding-bottom: 0;
}

/* =====================================================================
 *  v2.3.0 — Compare title visibility.
 *  Hiding the price frees the title area; allow titles to wrap freely
 *  so long car names aren't squished against the card edge.
 * ===================================================================== */
.mk-komp-compare__listing,
.mk-komp-compare__trim {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.mk-komp-compare__head {
	gap: 0; /* no gap between title and the now-hidden price block */
}

/* =====================================================================
 *  v2.3.0 — Collapsible compare categories.
 *  v2.6.6 — Categories dropdown sits inside the spacer card on the left
 *  of the cards row. The whole cards row is sticky on top so trim names
 *  stay visible while user scrolls the spec table. Scroll-spy in JS
 *  updates the trigger label to the currently-visible section.
 * ===================================================================== */

/* v2.6.7 — Switched from position:sticky to JS-driven position:fixed.
   CSS sticky silently fails when any ancestor has overflow:hidden — common
   in Motors/Elementor sections. JS measures the natural position and pins
   it via .is-pinned. A placeholder preserves layout height. */
.mk-komp-compare__sticky-head {
	background: #fff;
	padding-top: 8px;
	margin-bottom: 8px;
}
.mk-komp-compare__sticky-head.is-pinned {
	position: fixed;
	top: 0;
	z-index: 9000;
	background: #fff;
	box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .15);
	padding: 8px 0;
}

/* v2.6.8 — When pinned, collapse the cards to a compact strip: just the
   listing/trim title in each card + the dropdown on the left. Hides the
   photo, reorder arrows, remove button, and price. */
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__reorder,
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__image,
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__remove-row,
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__price,
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__search { display: none !important; }
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__card {
	padding: 8px 10px !important;
	min-height: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__head {
	margin: 0;
	padding: 0;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__title-link {
	display: block;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__listing {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: #475569;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: .2px;
}
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__trim {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Pinned dropdown — slightly tighter to match the compact strip height. */
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__cat-trigger {
	padding: 8px 14px;
	font-size: 12.5px;
}
.mk-komp-compare__sticky-placeholder {
	display: none;
}
.mk-komp-compare__sticky-head.is-pinned + .mk-komp-compare__sticky-placeholder {
	display: block;
}

/* Spacer card now hosts the dropdown — vertically center it.
   v2.6.10 — override the global card overflow:hidden so the dropdown menu
   can spill below the card boundary without being clipped.
   v2.7.0 — also hosts the two diff-filter checkboxes above the dropdown.
   v2.7.1 — checkboxes pinned to top, dropdown pinned to bottom of card. */
.mk-komp-compare__card--spacer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between; /* v2.7.1 — filters top, dropdown bottom */
	gap: 0;
	padding: 8px 6px;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible !important;
	position: relative;
	z-index: 60;
}

/* v2.7.0 — Diff filter checkboxes (above the categories dropdown).
   v2.7.1 — visual separator + spacing below to set them apart from the
   Categories dropdown that now sits at the bottom of the card. */
.mk-komp-compare__diff-filters {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 0;
}
.mk-komp-compare__diff-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font: 500 11.5px/1.3 inherit;
	color: #475569;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background .15s, color .15s;
	user-select: none;
}
.mk-komp-compare__diff-toggle:hover {
	background: #eef4ff;
	color: #1d4ed8;
}
.mk-komp-compare__diff-toggle input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: #2563eb;
	cursor: pointer;
}

/* v2.7.1 — Categories dropdown sits at the bottom of the spacer card so
   its bottom edge aligns with the bottom of the compared-trim cards. */
.mk-komp-compare__card--spacer .mk-komp-compare__cat-dropdown {
	margin-top: auto;
}

/* v2.7.1 — Hide the diff-filter checkboxes when the head is in its
   compact pinned state. They'd waste vertical space and clutter the
   strip. Categories dropdown stays visible since it's the primary
   navigation while scrolling. */
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__diff-filters {
	display: none !important;
}
.mk-komp-compare__sticky-head.is-pinned .mk-komp-compare__card--spacer {
	justify-content: center;
	padding: 4px 6px;
}

/* v2.7.0 — Diff highlighting + show-only-diff filters.
   v2.7.2 — bolder tint + cell-level targeting so neither the table's
   zebra striping nor per-cell backgrounds wash out the diff highlight. */
.mk-komp-compare__table.is-highlight-diffs tr[data-mk-cmp-diff="1"],
.mk-komp-compare__table.is-highlight-diffs tr[data-mk-cmp-diff="1"] > th,
.mk-komp-compare__table.is-highlight-diffs tr[data-mk-cmp-diff="1"] > td {
	background: #d1fae5 !important; /* light green, clearly distinguishable */
}
.mk-komp-compare__table.is-show-diffs-only tr[data-mk-cmp-diff="0"] {
	display: none;
}
/* Hide entire category section header when all its rows are non-diff. */
.mk-komp-compare__tbody.is-section-hidden { display: none; }
/* The cards row must also allow overflow so the menu can extend past it. */
.mk-komp-compare__cards { overflow: visible; }
.mk-komp-compare__sticky-head { overflow: visible; }

/* Dropdown sized to fit the spacer card. */
.mk-komp-compare__cat-dropdown {
	position: relative;
	width: 100%;
	max-width: 220px;
}
.mk-komp-compare__cat-trigger {
	display: flex;
	align-items: center;
	width: 100%;
	background: #fff;
	color: #1d4ed8;
	border: 1px solid #2563eb;
	border-radius: 999px;
	padding: 10px 16px;
	font: 600 13px/1.2 inherit;
	letter-spacing: .1px;
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
}
.mk-komp-compare__cat-trigger:hover {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 4px 12px rgba(37,129,247,.18);
}
.mk-komp-compare__cat-trigger:focus-visible {
	outline: 2px solid rgba(37,129,247,.4);
	outline-offset: 2px;
}
.mk-komp-compare__cat-trigger-label {
	flex: 1;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mk-komp-compare__cat-caret { transition: transform .2s ease; }
.mk-komp-compare__cat-dropdown.is-open .mk-komp-compare__cat-trigger {
	background: #2563eb;
	color: #fff;
}
.mk-komp-compare__cat-dropdown.is-open .mk-komp-compare__cat-caret { transform: rotate(180deg); }

/* Dropdown menu — anchored to the trigger's left edge so it stays
   inside the spacer card column.
   v2.6.10 — z-index bumped to 9500 so the menu floats above the cards row,
   the sticky pinned head, and the spec table below. */
.mk-komp-compare__cat-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	max-width: 280px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15,23,42,.12);
	padding: 6px;
	z-index: 9500;
	display: none;
	max-height: min(440px, 70vh);
	overflow-y: auto;
}
.mk-komp-compare__cat-dropdown.is-open .mk-komp-compare__cat-menu { display: block; }
.mk-komp-compare__cat-item {
	display: block;
	color: #1f2937;
	padding: 9px 12px;
	border-radius: 8px;
	font: 500 13px/1.3 inherit;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.mk-komp-compare__cat-item:hover,
.mk-komp-compare__cat-item:focus {
	background: #eef4ff;
	color: #1d4ed8;
	text-decoration: none;
	outline: none;
}
.mk-komp-compare__cat-item.is-active {
	background: #dbeafe;
	color: #1e40af;
	font-weight: 600;
}

/* Old floating panel retired. */
.mk-komp-compare__nav { display: none !important; }
.mk-komp-compare__layout { display: block; }
.mk-komp-compare__title-row { display: contents; } /* no-op for any cached HTML */

/* Make the group-title row look like a clickable accordion header */
.mk-komp-compare__group-row { cursor: pointer; user-select: none; }
.mk-komp-compare__group-row .mk-komp-compare__group-title {
	position: relative;
	padding-right: 36px; /* room for the chevron indicator */
}
.mk-komp-compare__group-row .mk-komp-compare__group-title::after {
	content: '▾';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: #1d4ed8;
	transition: transform .15s;
}
/* Collapsed state: hide every spec row in the tbody except the group title row.
 * tr:nth-child(n+2) targets all rows AFTER the header. */
.mk-komp-compare__tbody.is-collapsed tr:nth-child(n+2) {
	display: none;
}
.mk-komp-compare__tbody.is-collapsed .mk-komp-compare__group-title::after {
	transform: translateY(-50%) rotate(-90deg);
}

/* =====================================================================
 *  v2.4.3 — Visible collapse button on each group header.
 *  The th stays a plain table-cell (so colspan works + the colored band
 *  spans the entire row), and an inner div holds the flex layout that
 *  pushes the title left and the Hide/Show button right.
 * ===================================================================== */
/* Hide the original ::after chevron from v2.3.0; the button replaces it. */
.mk-komp-compare__group-row .mk-komp-compare__group-title::after { content: none; }
/* No more overriding the th's display — keep its native padding too. */
.mk-komp-compare__group-title { padding: 10px 16px; }
.mk-komp-compare__group-title-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
}
.mk-komp-compare__group-title-text { flex: 1 1 auto; }
.mk-komp-compare__group-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 14px;
	background: #2563eb; /* matches the "Add your item" button on Motors */
	color: #fff;
	border: 1px solid #2563eb;
	border-radius: 6px;
	font: 600 12px/1.2 inherit;
	letter-spacing: .4px;
	text-transform: uppercase;
	user-select: none;
	flex: 0 0 auto;
	min-width: 80px; /* Hide and Show render at identical width */
	text-align: center;
}
.mk-komp-compare__group-toggle-label-show { display: none; }
.mk-komp-compare__tbody.is-collapsed .mk-komp-compare__group-toggle-label-hide { display: none; }
.mk-komp-compare__tbody.is-collapsed .mk-komp-compare__group-toggle-label-show { display: inline; }
.mk-komp-compare__group-row:hover .mk-komp-compare__group-toggle { background: #1d4ed8; border-color: #1d4ed8; }

/* =====================================================================
 *  v2.4.0 — Reorder ← → buttons on each card.
 * ===================================================================== */
.mk-komp-compare__reorder {
	display: flex;
	gap: 6px;
	justify-content: space-between;
	padding: 8px 8px 0;
}
.mk-komp-compare__reorder-btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #1f2937;
	font: 600 14px/1 inherit;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mk-komp-compare__reorder-btn:hover:not(:disabled) {
	background: #1d4ed8;
	color: #fff;
	border-color: #1d4ed8;
}
.mk-komp-compare__reorder-btn:disabled { opacity: .3; cursor: not-allowed; }

/* v2.4.2 — cards layout reverted to the simple 5-column grid declared
 * earlier in this file (one spacer + four car cards). No horizontal
 * scrolling, no sticky-left tricks. The spec table also uses the same
 * fixed table-layout: fixed columns inherited from the v1.0.12 setup. */

/* =================================================================
 * v2.8.0 — Listing-card overlay (MK Compare + Favorite icons).
 * Replaces the legacy Motors compare/favorite hover icons with MK
 * equivalents wired into our trim-aware compare and cookie-backed
 * favorites systems.
 * ================================================================= */

/* Hide the legacy Motors icons everywhere they appear on listing
 * cards. We replace them with our own overlay so the user sees a
 * clean, MK-only interaction. */
.car-listing-row .stm-add-to-compare,
.car-listing-row .add-to-compare,
.car-listing-row .listing-loop-compare,
.car-listing-row .compare-vehicle,
.car-listing-row .stm-favorites,
.car-listing-row .stm-favorited,
.car-listing-row .favorited,
.car-listing-row .add-to-favorites,
.car-listing-row .listing-loop-favorites,
.car-listings-grid-item .stm-add-to-compare,
.car-listings-grid-item .add-to-compare,
.car-listings-grid-item .compare-vehicle,
.car-listings-grid-item .stm-favorites,
.car-listings-grid-item .stm-favorited,
.car-listings-grid-item .add-to-favorites,
.listing-item-loop .stm-add-to-compare,
.listing-item-loop .add-to-compare,
.listing-item-loop .stm-favorites,
.product__images .stm-add-to-compare,
.product__images .add-to-compare,
.product__images .stm-favorites,
.product__images .stm-favorited,
.product__images .listing-loop-favorites,
.product__images .listing-loop-compare,
.stm-isotope-listings-loop-listing .stm-add-to-compare,
.stm-isotope-listings-loop-listing .stm-favorites {
	display: none !important;
}

/* The MK overlay: floats on the image, two circular icon buttons. */
.mk-card-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 50;
	pointer-events: none; /* let card-wide clicks still pass */
}
.mk-card-overlay__btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: #1f2937;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
	cursor: pointer;
	transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.mk-card-overlay__btn svg {
	width: 18px;
	height: 18px;
}
.mk-card-overlay__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .22);
}
.mk-card-overlay__btn--compare:hover {
	background: #2563eb;
	color: #fff;
}
.mk-card-overlay__btn--fav:hover {
	background: #fee2e2;
	color: #dc2626;
}
.mk-card-overlay__btn--fav.is-active {
	background: #ef4444;
	color: #fff;
}
.mk-card-overlay__btn--fav.is-active svg {
	fill: currentColor;
}
.mk-card-overlay__btn.is-loading {
	opacity: .6;
	cursor: wait;
}

/* v2.8.8 — Compact overlay variant for narrow widgets (Motors's
 * "Related Vehicles" / "Similar Listings" sidebars, archive
 * sub-widgets). The 38px button looks oversized on ~80px thumbnails;
 * shrink to 24px there. Scoped to known widget containers AND to
 * any image wrapper that's narrower than ~160px (universal fallback). */
.elementor-widget-motors-single-listing-related-listings .mk-card-overlay,
.elementor-widget-motors-related-listings .mk-card-overlay,
.elementor-widget-motors-similar-listings .mk-card-overlay,
[class*="related-listings"] .mk-card-overlay,
[class*="related_listings"] .mk-card-overlay,
[class*="similar-listings"] .mk-card-overlay,
[class*="related-cars"] .mk-card-overlay,
.stm-widget-recently-viewed .mk-card-overlay,
.widget .mk-card-overlay {
	top: 4px;
	right: 4px;
	gap: 4px;
}
.elementor-widget-motors-single-listing-related-listings .mk-card-overlay__btn,
.elementor-widget-motors-related-listings .mk-card-overlay__btn,
.elementor-widget-motors-similar-listings .mk-card-overlay__btn,
[class*="related-listings"] .mk-card-overlay__btn,
[class*="related_listings"] .mk-card-overlay__btn,
[class*="similar-listings"] .mk-card-overlay__btn,
[class*="related-cars"] .mk-card-overlay__btn,
.stm-widget-recently-viewed .mk-card-overlay__btn,
.widget .mk-card-overlay__btn {
	width: 24px;
	height: 24px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
}
.elementor-widget-motors-single-listing-related-listings .mk-card-overlay__btn svg,
.elementor-widget-motors-related-listings .mk-card-overlay__btn svg,
.elementor-widget-motors-similar-listings .mk-card-overlay__btn svg,
[class*="related-listings"] .mk-card-overlay__btn svg,
[class*="related_listings"] .mk-card-overlay__btn svg,
[class*="similar-listings"] .mk-card-overlay__btn svg,
[class*="related-cars"] .mk-card-overlay__btn svg,
.stm-widget-recently-viewed .mk-card-overlay__btn svg,
.widget .mk-card-overlay__btn svg {
	width: 12px;
	height: 12px;
}

/* JS-applied fallback when the widget container's class doesn't
 * match any selector above but the image wrapper is < 180px wide. */
.mk-card-overlay--compact { top: 4px; right: 4px; gap: 4px; }
.mk-card-overlay--compact .mk-card-overlay__btn {
	width: 24px;
	height: 24px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
}
.mk-card-overlay--compact .mk-card-overlay__btn svg {
	width: 12px;
	height: 12px;
}

/* v2.8.8 — Hide author / dealer / username display on listing cards.
 * The MVP has no user-profile system, so showing the author name is
 * confusing (it just shows whoever imported the listing). Scoped to
 * listing-card contexts so we don't accidentally hide comment authors,
 * post bylines, etc. elsewhere on the site. */
[class*="listing"] [class*="author"],
[class*="listing"] [class*="dealer-name"],
[class*="related-listings"] [class*="author"],
[class*="related-listings"] [class*="dealer"],
.elementor-widget-motors-single-listing-related-listings [class*="author"],
.elementor-widget-motors-single-listing-related-listings [class*="dealer"],
.car-listing-row .author-name,
.car-listings-grid-item .author-name,
.product__author,
.car-listing__author,
.listing-loop-author {
	display: none !important;
}

/* =================================================================
 * v2.8.0 — Trim picker modal (shown when listing has 2+ trims).
 * ================================================================= */
.mk-trim-picker {
	position: fixed;
	inset: 0;
	z-index: 99500;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mk-trim-picker__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .58);
	backdrop-filter: blur(2px);
}
.mk-trim-picker__sheet {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	width: 92%;
	max-width: 420px;
	padding: 24px 22px 20px;
}
/* v2.8.22 — aggressive !important overrides so Motors's listing-page
 * button reset can't hijack our X (it was getting full-width Motors
 * button styling on single-listing pages). */
.mk-trim-picker .mk-trim-picker__x,
.mk-trim-picker__x {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #64748b !important;
	cursor: pointer !important;
	z-index: 10;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color .12s ease !important;
}
.mk-trim-picker .mk-trim-picker__x:hover,
.mk-trim-picker__x:hover {
	color: #0f172a !important;
	background: transparent !important;
}
.mk-trim-picker .mk-trim-picker__x:focus,
.mk-trim-picker__x:focus {
	outline: 2px solid #cbd5e1 !important;
	outline-offset: 1px !important;
}
/* v2.8.7 — header now has a dedicated title + listing subtitle. */
.mk-trim-picker__title {
	margin: 0 30px 2px 0;
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
}
.mk-trim-picker__listing {
	margin: 0 30px 14px 0;
	font-size: 13px;
	color: #475569;
	font-weight: 500;
}
.mk-trim-picker__sub {
	margin: 0 0 12px;
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.mk-trim-picker__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 44vh;
	overflow-y: auto;
}

/* v2.8.7 — toggleable trim row with a leading check indicator. */
.mk-trim-picker__btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 12px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
	font: 500 14px/1.3 inherit;
	transition: background .12s, border-color .12s, transform .08s;
}
.mk-trim-picker__btn:hover:not(.is-existing) {
	background: #eff6ff;
	border-color: #93c5fd;
}
.mk-trim-picker__btn:active { transform: scale(.99); }
.mk-trim-picker__check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 2px solid #cbd5e1;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s, border-color .12s;
}
.mk-trim-picker__btn.is-selected {
	background: #eff6ff;
	border-color: #2563eb;
}
.mk-trim-picker__btn.is-selected .mk-trim-picker__check {
	background: #2563eb;
	border-color: #2563eb;
}
.mk-trim-picker__btn.is-selected .mk-trim-picker__check::after {
	content: '✓';
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}
.mk-trim-picker__name {
	flex: 1;
}

/* Already-in-compare items show as disabled with a small tag. */
.mk-trim-picker__btn.is-existing {
	opacity: .55;
	cursor: not-allowed;
	background: #f8fafc;
}
.mk-trim-picker__tag {
	font-size: 11px;
	color: #16a34a;
	background: #dcfce7;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
}

/* Footer with the "Müqayisəyə əlavə et" submit. */
.mk-trim-picker__footer {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #e2e8f0;
}
.mk-trim-picker__submit {
	width: 100%;
	padding: 12px 18px;
	border: 0;
	border-radius: 8px;
	background: #2563eb;
	color: #fff;
	font: 600 14px/1 inherit;
	cursor: pointer;
	transition: background .12s, opacity .12s, transform .08s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mk-trim-picker__submit:not(:disabled):hover {
	background: #1d4ed8;
}
.mk-trim-picker__submit:not(:disabled):active {
	transform: scale(.99);
}
.mk-trim-picker__submit:disabled {
	background: #cbd5e1;
	cursor: not-allowed;
}

/* =================================================================
 * v2.8.0 — Toast.
 * ================================================================= */
.mk-card-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #0f172a;
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
	font-size: 13px;
	font-weight: 500;
	opacity: 0;
	transition: opacity .24s, transform .24s;
	z-index: 99600;
	pointer-events: none;
}
.mk-card-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.mk-card-toast.is-error   { background: #dc2626; }
.mk-card-toast.is-success { background: #16a34a; }

/* =================================================================
 * v2.8.0 — Favorites page.
 * v2.8.15 — widened to 1280px (overshot by 120px — too far left).
 * v2.8.16 — narrowed to 1160px so the title sits right at the
 *           AvtoTrend logo's left edge.
 * ================================================================= */
.mk-komp-favorites {
	max-width: 1160px;
	margin: 24px auto 60px;
	padding: 0 20px;
	box-sizing: border-box;
}
.mk-komp-favorites__header { margin-bottom: 20px; }
.mk-komp-favorites__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
}
.mk-komp-favorites__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}
.mk-komp-favorites__card {
	position: relative; /* v2.8.3 — anchor for the X button */
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	display: flex;
	flex-direction: column;
	/* v2.8.16 — blue border on hover, matches inventory card behaviour.
	   No lift/transform — just a subtle color swap on the border. */
	transition: border-color .15s ease;
}
.mk-komp-favorites__card:hover {
	border-color: #2563eb;
}

/* =================================================================
 * v2.8.17 — Single listing page polish.
 * v2.8.18 — title size selectors widened (previous selectors didn't
 *           match this theme's H1). Also reversed the alignment
 *           padding — content was overshooting right; nudging left.
 * ================================================================= */

/* Aggressive selector list so we override Motors / Elementor / theme
   defaults for the listing H1. The final bare `body.single-listings h1`
   acts as a safety net if none of the specific classes match. */
body.single-listings .elementor-widget-theme-post-title .elementor-heading-title,
body.single-listings .elementor-widget-theme-post-title h1,
body.single-listings .elementor-widget-heading h1,
body.single-listings .elementor-widget-heading .elementor-heading-title,
body.single-listings .elementor-page-title h1,
body.single-listings .page-title h1,
body.single-listings .stm-single-car-title,
body.single-listings .stm-single-car-title h1,
body.single-listings .car-listing-title h1,
body.single-listings .product__title,
body.single-listings .entry-title,
body.single-listings h1.entry-title,
body.single-listings article h1,
body.single-listings main h1,
body.single-listings .elementor-section h1 {
	font-size: 28px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	margin-top: 0 !important;
	margin-bottom: 14px !important;
}

/* Last-resort catch-all — if Motors uses a unique H1 class we haven't
   matched, a plain `h1` rule scoped to the single-listing body still
   wins via !important. */
body.single-listings h1 {
	font-size: 28px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
}

/* Nudge the listing content column LEFT so it aligns with the logo.
   v2.8.17's right-shift overshot; this small negative offset on the
   Elementor section pulls the title/image back ~15-20px to the
   logo's left edge. */
@media (min-width: 992px) {
	body.single-listings .elementor-widget-theme-post-title,
	body.single-listings .elementor-widget-theme-post-featured-image,
	body.single-listings .elementor-element-populated > .elementor-widget-wrap {
		padding-left: 0 !important;
	}
}

/* v2.8.3 — top-right X delete button, replaces the old bottom button. */
.mk-komp-favorites__x {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: #64748b;
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
	transition: background .12s, color .12s, transform .1s;
}
.mk-komp-favorites__x:hover {
	background: #dc2626;
	color: #fff;
	transform: scale(1.06);
}

.mk-komp-favorites__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
}
.mk-komp-favorites__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mk-komp-favorites__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e2e8f0 25%, #f1f5f9 25%, #f1f5f9 50%, #e2e8f0 50%, #e2e8f0 75%, #f1f5f9 75%);
	background-size: 20px 20px;
}
.mk-komp-favorites__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.mk-komp-favorites__name {
	color: #0f172a;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	line-height: 1.3;
}
.mk-komp-favorites__name:hover { color: #2563eb; }
.mk-komp-favorites__empty {
	text-align: center;
	padding: 40px 20px;
	color: #475569;
}
.mk-komp-favorites__cta {
	display: inline-block;
	margin-top: 10px;
	background: #2563eb;
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
	transition: background .15s;
}
.mk-komp-favorites__cta:hover { background: #1d4ed8; color: #fff; }

/* =================================================================
 * v2.8.14 — Compare page: X delete overlay on image + left caret on section header.
 * ================================================================= */

/* Make the image wrapper a positioning context for the X button. */
.mk-komp-compare__image {
	position: relative;
}

/* X variant of the remove button: top-right of the image, circular,
   matches the favorites page X styling. */
.mk-komp__remove-from-compare--x {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	z-index: 30;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: #64748b;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
	transition: background .12s, color .12s, transform .1s;
}
.mk-komp__remove-from-compare--x:hover {
	background: #dc2626;
	color: #fff;
	transform: scale(1.06);
}
.mk-komp__remove-from-compare--x:focus { outline: 2px solid #fca5a5; outline-offset: 2px; }

/* Hide the old bottom-row red pill — replaced by the top-right X. */
.mk-komp-compare__remove-row {
	display: none !important;
}

/* Left-side caret on section header — matches the title text color
   (the website blue used by other compare page elements). */
.mk-komp-compare__group-title-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start !important;
}
.mk-komp-compare__group-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 14px;
	line-height: 1;
	color: inherit;
	transition: transform .2s ease;
	flex-shrink: 0;
}
/* Collapsed sections: rotate the caret 90° counter-clockwise (pointing right). */
.mk-komp-compare__tbody.is-collapsed .mk-komp-compare__group-caret,
.mk-komp-compare__group-row[aria-expanded="false"] .mk-komp-compare__group-caret {
	transform: rotate(-90deg);
}


/* =================================================================
 * v2.8.21 — Instant custom tooltip on listing-card overlay icons.
 * Browser's native `title` attribute has a ~700ms delay, so we use
 * data-mk-tip with a CSS pseudo-element that appears immediately
 * on hover. Tooltip floats to the LEFT of the icon (icons are
 * positioned top-right of the card image, so leftward keeps the
 * tooltip on-canvas).
 * ================================================================= */
.mk-card-overlay__btn[data-mk-tip] {
	/* position already relative — needed for ::after positioning */
}
.mk-card-overlay__btn[data-mk-tip]::after {
	content: attr(data-mk-tip);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #0f172a;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease, visibility .12s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	z-index: 100;
}
.mk-card-overlay__btn[data-mk-tip]::before {
	content: '';
	position: absolute;
	right: calc(100% + 4px);
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: #0f172a;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease, visibility .12s ease;
	z-index: 100;
}
.mk-card-overlay__btn[data-mk-tip]:hover::after,
.mk-card-overlay__btn[data-mk-tip]:hover::before,
.mk-card-overlay__btn[data-mk-tip]:focus-visible::after,
.mk-card-overlay__btn[data-mk-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
}
/* Compact-variant overlay (in narrow widgets) keeps tooltips. */
.mk-card-overlay--compact .mk-card-overlay__btn[data-mk-tip]::after {
	font-size: 11px;
	padding: 5px 8px;
}

/* =================================================================
 * v2.8.23 — Unified trim-panel footer with Show More + Compare.
 * Both buttons live at the bottom-right of each trim panel and
 * share the same compact pill style (the previous v2.6.0 compare
 * button styles still apply, but we shrink them and add a Show
 * More variant that matches).
 * ================================================================= */
.mk-komp__panel-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed #e5e7eb;
}

/* Shared footer-button base — pill shape, compact size, refined hover. */
.mk-komp__panel-footer .mk-komp__footer-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px !important;
	font: inherit;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .1px;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.2;
	box-shadow: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Show More variant — outlined blue, matches compare-btn idle look. */
.mk-komp__panel-footer .mk-komp__show-more-btn {
	color: #2563eb !important;
	background: rgba(37, 99, 235, .06) !important;
	border: 1px solid rgba(37, 99, 235, .35) !important;
	margin: 0 !important;
	width: auto !important;
	box-shadow: none !important;
}
.mk-komp__panel-footer .mk-komp__show-more-btn:hover {
	background: #2563eb !important;
	color: #fff !important;
	border-color: #2563eb !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, .18) !important;
}

/* Compare button inside the footer — same dimensions as Show More.
   Override the v2.6.0 compare-btn padding/font-size to compact. */
.mk-komp__panel-footer .mk-komp__compare-btn {
	padding: 6px 12px !important;
	font-size: 12px !important;
}
.mk-komp__panel-footer .mk-komp__compare-icon {
	font-size: 13px !important;
}

/* Hide the old standalone show-more-row that no longer renders
   (keep this so old cached DOM doesn't show two of them). */
.mk-komp__show-more-row {
	display: none !important;
}

/* Kill the old .mk-komp__actions / panel-header right side so we
   don't leave an empty flex slot pushing the prices around. */
.mk-komp__panel-header .mk-komp__actions {
	display: none !important;
}