/**
 * Webcodexworld Car Buying & Selling
 * Public car listing (`[carbs_car_listing]`) styles
 *
 * @package Webcodexworld Car Buying & Selling
 * @since 1.1.3
 */

.carbs-listing-wrap {
	--carbs-l-primary-light: var(--tpc-primary-light);
	--carbs-l-surface-soft: var(--tpc-surface-soft);
	--carbs-l-success: var(--tpc-success);
	--carbs-l-success-bg: var(--tpc-success-bg);
	--carbs-l-warning: var(--tpc-warning);
	--carbs-l-warning-bg: var(--tpc-warning-bg);
	--carbs-l-radius: 16px;
	--carbs-l-radius-sm: 8px;

	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	max-width: 1280px;
	margin: 24px auto;
	font-family: var(--tpc-font-body);
	font-weight: 400;
	color: var(--tpc-black);
}

.carbs-listing-wrap *,
.carbs-listing-wrap *::before,
.carbs-listing-wrap *::after {
	box-sizing: border-box;
}

.carbs-listing-wrap svg {
	display: block;
	flex-shrink: 0;
}

/* Defensive reset (cont.): active themes commonly give every heading inside
   their content wrapper (e.g. a `.entry-content h1..h6` rule) a large,
   auto-centered margin meant for long-form articles - on a page built with
   the default editor (rather than a builder template), that selector ties
   or beats a single class selector like `.carbs-listing-heading` on
   specificity, which both adds unwanted vertical space AND - because
   `margin: ... auto ...` on a flex item centers it within the row - pushes
   heading/button pairs like the wishlist page's "My Wishlist" + "Clear
   Wishlist" row out of alignment. Pin the box model with !important, same
   reasoning as the [hidden] reset below, rather than depend on stylesheet
   load order. Every heading here already gets its real spacing from its
   own component styles (e.g. .carbs-listing-heading, .carbs-wishlist-header). */
.carbs-listing-wrap h1,
.carbs-listing-wrap h2,
.carbs-listing-wrap h3,
.carbs-listing-wrap h4,
.carbs-listing-wrap h5,
.carbs-listing-wrap h6 {
	margin: 0 !important;
	text-align: left !important;
	line-height: 1.2;
}

/* Defensive reset (cont.): some themes set `button { display: inline-block }`
   globally, which - because it's an author-level rule - beats the browser's
   own `[hidden] { display: none }` default regardless of selector
   specificity. Without this, any `<button hidden>` in this UI (e.g. the
   combobox "clear" button before a value is chosen) stays visible. */
.carbs-listing-wrap [hidden] {
	display: none !important;
}

.carbs-listing-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 860px) {
	.carbs-listing-wrap {
		grid-template-columns: 1fr;
	}
}

/* ---------- Sidebar / Filters ---------- */

.carbs-listing-sidebar {
	background: var(--tpc-white);
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
	padding: 20px;
	align-self: start;
	position: sticky;
	top: 16px;
}

@media (max-width: 860px) {
	.carbs-listing-sidebar {
		position: static;
	}
}

/* The active theme's #site-content wrapper (thepremiumcar/style.css)
   sets `overflow: hidden` as a basic clearfix. An `overflow` other than
   `visible` on any ancestor silently breaks `position: sticky` on a
   descendant - the sidebar above (and this plugin's other sticky
   sidebar, .carbs-dp-sidebar on the dealer profile page) was computing
   as `position: sticky` but never actually staying pinned while
   scrolling, because #site-content's hidden overflow gave it its own
   clipping context instead of the real page scroll. Scoped to only the
   pages that actually have one of those sidebars, so nothing else on
   the site is affected. */
body:has(.carbs-listing-sidebar) #site-content,
body:has(.carbs-dp-sidebar) #site-content {
	overflow: visible;
}

.carbs-listing-sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.carbs-listing-sidebar-head h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--tpc-font-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--tpc-black);
}

.carbs-listing-sidebar-head h3 .fas {
	color: var(--tpc-red);
	font-size: 15px;
}

.carbs-listing-reset {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	color: var(--tpc-red);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

.carbs-listing-reset .fas {
	font-size: 11.5px;
}

.carbs-listing-reset:hover {
	text-decoration: underline;
}

.carbs-listing-field {
	margin: 0 0 20px;
	padding: 0;
	border: none;
}

.carbs-listing-field label,
.carbs-listing-field legend {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
	padding: 0;
	color: var(--tpc-gray);
}

.carbs-listing-wrap .fas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.carbs-listing-field label svg,
.carbs-listing-field legend svg,
.carbs-listing-field label .fas,
.carbs-listing-field legend .fas {
	color: var(--tpc-gray);
	font-size: 13px;
	width: 15px;
}

.carbs-listing-field label span,
.carbs-listing-field legend span {
	color: var(--tpc-black);
}

/* Sidebar selects inherit the theme's global dropdown look (see
   tpc-custom.css "Global Form Controls") - white fill, thin border,
   custom chevron. Only the layout-critical bits (full width, this
   sidebar's own spacing/font-size) are set here so a theme change to
   the shared look doesn't need to be duplicated in two places. */
.carbs-listing-field select,
.carbs-filter-accordion-body select {
	width: 100%;
	font-size: 13.5px;
}

.carbs-listing-field select:focus,
.carbs-filter-accordion-body select:focus {
	border-color: var(--tpc-red);
}

/* ---- Checkbox / radio lists ---- */

.carbs-checkbox-list,
.carbs-radio-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.carbs-checkbox-item,
.carbs-radio-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--tpc-black);
	cursor: pointer;
}

.carbs-checkbox-item input,
.carbs-radio-item input {
	width: 17px;
	height: 17px;
	accent-color: var(--tpc-red);
	cursor: pointer;
	flex-shrink: 0;
}

.carbs-checkbox-list-inline {
	flex-wrap: wrap;
	gap: 8px 18px;
}

/* Ownership renders in a compact 2-column grid to match the reference design. */
[data-checkbox-group="no_of_owners"] {
	display: grid;
	gap: 10px 14px;
}

/* ---- Two-fields-in-a-row layout (Budget number inputs / Year Min-Max) ---- */

.carbs-listing-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}

.carbs-listing-range-number {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius-sm);
	background: var(--carbs-l-surface-soft);
	font-size: 13px;
	font-weight: 600;
	color: var(--tpc-black);
	text-align: center;
}

.carbs-listing-range-number:focus {
	outline: none;
	border-color: var(--tpc-red);
	background: var(--tpc-white);
}

/* ---- Searchable combobox (Brand / Model) ---- */

.carbs-combobox {
	position: relative;
}

.carbs-combobox-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.carbs-combobox-input-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 10px;
	height: 6px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Visually matches the theme's global select style (tpc-custom.css)
   even though this stays a text input functionally (search-as-you-type
   combobox, not a native <select> - see carbs-car-listing.js
   initCombobox()). Falls back to this page's own colors if the theme
   variables aren't present. */
.carbs-combobox-input {
	width: 100%;
	background: var(--tpc-select-bg, var(--tpc-white));
	border: 1px solid var(--tpc-select-border, var(--tpc-border));
	border-radius: var(--tpc-select-radius, var(--carbs-l-radius-sm));
	padding: 11px 34px 11px 14px;
	font-size: 13.5px;
	color: var(--tpc-black);
}

.carbs-combobox-input:focus {
	outline: none;
	border-color: var(--tpc-red);
}

.carbs-combobox-clear {
	position: absolute;
	right: 26px;
	background: none;
	border: none;
	color: var(--tpc-gray);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 4px;
	z-index: 1;
}

.carbs-combobox-clear:hover {
	color: var(--tpc-red);
}

.carbs-combobox-options {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 220px;
	overflow-y: auto;
	background: var(--tpc-white);
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius-sm);
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
	margin: 0;
	padding: 6px;
	list-style: none;
}

.carbs-combobox-options li {
	padding: 9px 12px;
	border-radius: var(--carbs-l-radius-sm);
	font-size: 13.5px;
	cursor: pointer;
}

.carbs-combobox-options li:hover,
.carbs-combobox-options li.is-active {
	background: var(--carbs-l-primary-light);
	color: var(--tpc-red);
}

.carbs-combobox-options li.no-results {
	color: var(--tpc-gray);
	cursor: default;
}

.carbs-combobox-options li.no-results:hover {
	background: none;
}

/* ---- Dual-range slider (Budget / Model Year / KM Driven) ---- */

.carbs-listing-range {
	position: relative;
	height: 20px;
	margin: 6px 4px 0;
}

.carbs-listing-range-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	transform: translateY(-50%);
	background: var(--tpc-border);
	border-radius: 999px;
}

.carbs-listing-range-fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--tpc-red);
	border-radius: 999px;
}

.carbs-listing-range-input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	margin: 0;
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.carbs-listing-range-input::-webkit-slider-runnable-track {
	background: transparent;
}

.carbs-listing-range-input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tpc-red);
	border: 3px solid var(--tpc-white);
	box-shadow: 0 0 0 1px var(--tpc-red), 0 1px 3px rgba(16, 24, 40, 0.2);
	cursor: pointer;
}

.carbs-listing-range-input::-moz-range-track {
	background: transparent;
	border: none;
}

.carbs-listing-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tpc-red);
	border: 3px solid var(--tpc-white);
	box-shadow: 0 0 0 1px var(--tpc-red), 0 1px 3px rgba(16, 24, 40, 0.2);
	cursor: pointer;
}

/* ---- Filter fields - Budget only now (flat, always-visible) ----
   Every other field (Brand, Model, City, Fuel Type, Body Type,
   Transmission, Ownership, Model Year, KM Driven) lives in the
   <details>/<summary> accordion block below, per the reference layout. */

.carbs-listing-field:last-of-type {
	margin-bottom: 4px;
}

fieldset.carbs-listing-field {
	min-width: 0;
}

.carbs-listing-field-actions {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
}

/* ---- Filter accordion (Brand, Model, City, Fuel Type, Body Type,
   Transmission, Ownership, Model Year, KM Driven) ----
   Native <details>/<summary> - the browser handles open/close, no JS
   needed for that part. carbs-car-listing.js only keeps each summary's
   small "current selection" line (data-accordion-preview) in sync via
   updateAccordionPreview(), since a combobox selection or checkbox
   change doesn't otherwise announce itself in a way a plain CSS rule
   could read. */

.carbs-filter-accordion {
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius-sm);
	margin-bottom: 12px;
	/* No `overflow: hidden` here - the Brand/Model fields inside
	   .carbs-filter-accordion-body render their options list as an
	   absolutely-positioned dropdown that extends below this box, and
	   overflow:hidden was clipping it to almost nothing. Corners are
	   rounded on the summary/body directly instead (below) so this
	   container doesn't need to clip anything to look right. */
}

.carbs-filter-accordion:last-of-type {
	margin-bottom: 20px;
}

.carbs-filter-accordion-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
	background: var(--carbs-l-surface-soft);
	border-radius: var(--carbs-l-radius-sm);
	transition: background 150ms ease;
}

.carbs-filter-accordion-summary::-webkit-details-marker {
	display: none;
}

.carbs-filter-accordion-summary:hover {
	background: var(--carbs-l-primary-light);
}

.carbs-filter-accordion[open] > .carbs-filter-accordion-summary {
	background: var(--tpc-white);
	border-bottom: 1px solid var(--tpc-border);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.carbs-filter-accordion-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--carbs-l-primary-light);
	color: var(--tpc-red);
	font-size: 13px;
}

.carbs-filter-accordion-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.carbs-filter-accordion-text strong {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tpc-black);
}

.carbs-filter-accordion-text small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tpc-gray);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.carbs-filter-accordion-chevron {
	flex-shrink: 0;
	display: flex;
	color: var(--tpc-gray);
	font-size: 12px;
	transition: transform 200ms ease;
}

.carbs-filter-accordion[open] > .carbs-filter-accordion-summary .carbs-filter-accordion-chevron {
	transform: rotate(180deg);
}

.carbs-filter-accordion-body {
	padding: 16px 14px;
	background: var(--tpc-white);
	border-bottom-left-radius: var(--carbs-l-radius-sm);
	border-bottom-right-radius: var(--carbs-l-radius-sm);
}

.carbs-filter-accordion-body .carbs-checkbox-list {
	margin: 0;
}

/* ---- "Clear Filters" secondary button (below Apply Filters) ---- */

.carbs-listing-clear-filters {
	width: 100%;
	margin-top: 10px;
	padding: 12px 16px;
	border-radius: var(--carbs-l-radius-sm);
	border: 1px solid var(--tpc-border);
	background: var(--tpc-white);
	color: var(--tpc-black);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: border-color 150ms ease, background 150ms ease;
}

.carbs-listing-clear-filters:hover {
	border-color: var(--tpc-gray);
	background: var(--carbs-l-surface-soft);
}

/* ---- Filter action button ---- */

.carbs-listing-apply {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--carbs-l-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
	/* Per the site's brand-color choice for this button: the theme's
	   global red (--tpc-red / --tpc-red, from tpc-custom.css). */
	background: var(--tpc-red);
	color: var(--tpc-white);
	border: 1px solid var(--tpc-red);
}

.carbs-listing-apply:hover {
	background: var(--tpc-red);
	border-color: var(--tpc-red);
}

.carbs-listing-apply [data-listing-apply-count] {
	font-weight: 500;
	opacity: 0.85;
}

/* ==========================================================================
   Main / Results
   ========================================================================== */

.carbs-listing-main {
	min-width: 0;
}

.carbs-listing-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 16px;
}

.carbs-listing-heading {
	margin: 0;
	font-family: var(--tpc-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--tpc-black);
}

.carbs-listing-count {
	font-size: 15px;
	font-weight: 700;
	color: var(--tpc-red);
	margin-left: 6px;
}

.carbs-listing-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.carbs-listing-save-search-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpc-black);
	cursor: pointer;
}

.carbs-listing-save-search-link .fas,
.carbs-listing-save-search-link svg {
	font-size: 14px;
	color: var(--tpc-gray);
}

.carbs-listing-save-search-link:hover {
	color: var(--tpc-red);
}

.carbs-listing-save-search-link:hover .fas {
	color: var(--tpc-red);
}

.carbs-listing-save-search-link.is-saved,
.carbs-listing-save-search-link.is-saved .fas {
	color: var(--carbs-l-success);
}

.carbs-listing-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpc-gray);
}

/* Compact variant of the global select style (tpc-custom.css) for this
   toolbar - tighter padding/font only, same fill/border/chevron. */
.carbs-listing-sort select {
	padding: 8px 30px 8px 12px;
	font-size: 13.5px;
	background-position: right 12px center;
}

.carbs-listing-sort select:focus {
	border-color: var(--tpc-red);
}

.carbs-listing-view-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.carbs-listing-view-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpc-gray);
}

.carbs-listing-view-toggle {
	display: flex;
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius-sm);
	overflow: hidden;
}

.carbs-listing-view-btn {
	width: 38px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tpc-white);
	color: var(--tpc-gray);
	border: none;
	cursor: pointer;
	font-size: 15px;
}

.carbs-listing-view-btn + .carbs-listing-view-btn {
	border-left: 1px solid var(--tpc-border);
}

.carbs-listing-view-btn.is-active {
	background: var(--tpc-red);
	color: var(--tpc-white);
}

/* ---- Active filter chips ---- */

.carbs-listing-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.carbs-listing-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--tpc-white);
	border: 1px solid var(--tpc-border);
	border-radius: 999px;
	padding: 7px 8px 7px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tpc-black);
}

.carbs-listing-chip-remove {
	background: var(--carbs-l-surface-soft);
	border: none;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tpc-gray);
	cursor: pointer;
	font-size: 12px;
}

.carbs-listing-chip-remove:hover {
	background: var(--tpc-red);
	color: var(--tpc-white);
}

.carbs-listing-chip-clear-all {
	background: none;
	border: none;
	color: var(--tpc-red);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}

.carbs-listing-chip-clear-all:hover {
	text-decoration: underline;
}

.carbs-listing-empty {
	text-align: center;
	padding: 50px 20px;
	background: var(--tpc-white);
	border: 1px dashed var(--tpc-border);
	border-radius: var(--carbs-l-radius);
	color: var(--tpc-gray);
}

/* ---- Trust bar ---- */

.carbs-listing-trust-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	background: var(--carbs-l-surface-soft);
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius);
	padding: 18px 20px;
	margin-bottom: 20px;
}

.carbs-listing-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.carbs-listing-trust-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--carbs-l-primary-light);
	color: var(--tpc-red);
	font-size: 15px;
}

.carbs-listing-trust-item strong {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tpc-black);
	margin-bottom: 2px;
}

.carbs-listing-trust-item p {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tpc-gray);
}

@media (max-width: 767.98px) {
	.carbs-listing-trust-bar {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Cards
   ========================================================================== */

.carbs-listing-grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.carbs-listing-card {
	display: flex;
	background: var(--tpc-white);
	border: 1px solid var(--tpc-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
	transition: box-shadow 300ms ease, transform 300ms ease;
}

.carbs-listing-card:hover {
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
	transform: translateY(-2px);
}

.carbs-listing-card-media {
	position: relative;
	flex: 0 0 260px;
	overflow: hidden;
	background: var(--carbs-l-surface-soft);
}

.carbs-listing-view-list .carbs-listing-card-media {
	flex-basis: 250px;
}

.carbs-listing-card-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 190px;
	overflow: hidden;
}

.carbs-listing-view-list .carbs-listing-card-image {
	min-height: 120px;
}

.carbs-listing-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.carbs-listing-card:hover .carbs-listing-card-image img {
	transform: scale(1.05);
}

.carbs-listing-card-noimage {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 190px;
	background: var(--carbs-l-surface-soft);
}

.carbs-listing-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 11px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
}

.carbs-listing-badge-featured {
	background: var(--tpc-red);
	color: var(--tpc-white);
}

.carbs-listing-badge-new {
	background: var(--carbs-l-success);
	color: var(--tpc-white);
}

.carbs-listing-wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tpc-black);
	cursor: pointer;
	font-size: 16px;
	transition: color 200ms ease, background 200ms ease;
}

.carbs-listing-wishlist-btn:hover {
	background: var(--tpc-white);
}

.carbs-listing-wishlist-btn.is-active {
	color: var(--tpc-red);
}

@keyframes carbsListingHeartPop {
	0% { transform: scale(1); }
	45% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.carbs-listing-wishlist-btn.pop svg,
.carbs-listing-wishlist-btn.pop .fas {
	animation: carbsListingHeartPop 350ms ease;
}

.carbs-listing-photo-count {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(16, 24, 40, 0.72);
	color: var(--tpc-white);
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 6px;
}

.carbs-listing-card-body {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* ---- Price-quality ribbon (inline, next to the card title) ---- */

.carbs-listing-card-title-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.carbs-listing-card-title-row .carbs-listing-card-title {
	flex: 1 1 140px;
	min-width: 0;
}

.carbs-listing-price-quality-ribbon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.carbs-listing-price-quality-ribbon.carbs-listing-price-quality--great,
.carbs-listing-price-quality-ribbon.carbs-listing-price-quality--good {
	background: var(--carbs-l-success-bg);
	color: var(--carbs-l-success);
}

.carbs-listing-price-quality-ribbon.carbs-listing-price-quality--fair {
	background: var(--carbs-l-warning-bg);
	color: var(--carbs-l-warning);
}

.carbs-listing-card-title {
	margin: 0;
	font-family: var(--tpc-font-heading);
	font-size: 18px;
	font-weight: 600;
}

.carbs-listing-card-title a {
	color: var(--tpc-black);
	text-decoration: none;
}

.carbs-listing-card-title a:hover {
	color: var(--tpc-red);
}

.carbs-listing-card-specs,
.carbs-listing-card-location {
	margin: 0;
	font-size: 13px;
	color: var(--tpc-gray);
	display: flex;
	align-items: center;
	gap: 6px;
}

.carbs-listing-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.carbs-listing-card-tags li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	margin: 0;
}

.carbs-listing-card-tags li.is-good {
	color: var(--carbs-l-success);
}

.carbs-listing-card-tags li.is-warn {
	color: var(--carbs-l-warning);
}

.carbs-listing-card-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.carbs-listing-card-price {
	font-family: var(--tpc-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--tpc-red);
}

.carbs-listing-card-price-old {
	font-size: 13.5px;
	color: var(--tpc-gray);
	text-decoration: line-through;
}

.carbs-listing-card-emi {
	font-size: 12.5px;
	color: var(--tpc-gray);
	font-weight: 600;
}

.carbs-listing-price-quality {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

.carbs-listing-price-quality--great,
.carbs-listing-price-quality--good {
	background: var(--carbs-l-success-bg);
	color: var(--carbs-l-success);
}

.carbs-listing-price-quality--fair {
	background: var(--carbs-l-warning-bg);
	color: var(--carbs-l-warning);
}

.carbs-listing-card-dealer-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	margin-top: 2px;
}

.carbs-listing-dealer-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--tpc-black);
}

.carbs-listing-dealer-verified {
	display: inline-flex;
	color: var(--tpc-red);
}

/* ---- Right-hand actions column ---- */

.carbs-listing-card-actions {
	flex: 0 0 210px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	border-left: 1px solid var(--tpc-border);
}

.carbs-listing-btn-outline,
.carbs-listing-btn-filled,
.carbs-listing-btn-deal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--carbs-l-radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.carbs-listing-btn-outline {
	border: 1.5px solid var(--tpc-red);
	color: var(--tpc-red);
	background: transparent;
}

.carbs-listing-btn-outline:hover {
	background: var(--tpc-red);
	color: var(--tpc-white);
	transform: translateY(-1px);
}

.carbs-listing-btn-filled {
	border: 1.5px solid var(--tpc-red);
	background: var(--tpc-red);
	color: var(--tpc-white);
}

.carbs-listing-btn-filled:hover {
	background: var(--tpc-red);
	border-color: var(--tpc-red);
	transform: translateY(-1px);
}

/* "Get Best Deal" - a dark, higher-contrast CTA distinct from the orange
   "View Details" outline button, so the two read as primary/secondary
   actions rather than two equally-weighted buttons. */
.carbs-listing-btn-deal {
	border: 1.5px solid var(--tpc-black);
	background: var(--tpc-black);
	color: var(--tpc-white);
}

.carbs-listing-btn-deal:hover {
	background: #000;
	border-color: #000;
	color: var(--tpc-white);
	transform: translateY(-1px);
}

.carbs-listing-card-contact {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.carbs-listing-icon-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	border-radius: var(--carbs-l-radius-sm);
	border: 1px solid var(--tpc-border);
	background: var(--tpc-white);
	color: var(--tpc-black);
	transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}

.carbs-listing-icon-btn:hover {
	transform: translateY(-2px);
	background: var(--carbs-l-surface-soft);
}

.carbs-listing-whatsapp-btn {
	color: #25D366;
}

.carbs-listing-whatsapp-btn:hover {
	background: #25D366;
	color: var(--tpc-white);
}

/* ---- Grid view: real multi-column card tiles ---- */

.carbs-listing-view-grid.carbs-listing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.carbs-listing-view-grid .carbs-listing-card {
	flex-direction: column;
	height: 100%;
}

.carbs-listing-view-grid .carbs-listing-card-media {
	flex: none;
	width: 100%;
}

.carbs-listing-view-grid .carbs-listing-card-image {
	min-height: 200px;
}

.carbs-listing-view-grid .carbs-listing-card-body {
	flex: 1;
	padding: 18px 22px;
	gap: 9px;
}

.carbs-listing-view-grid .carbs-listing-card-title {
	font-size: 19px;
}

.carbs-listing-view-grid .carbs-listing-card-specs,
.carbs-listing-view-grid .carbs-listing-card-location {
	font-size: 13.5px;
}

.carbs-listing-view-grid .carbs-listing-card-price {
	font-size: 20px;
}

/* Grid tile actions: WhatsApp/Call icon buttons + a "View Details" button
   all in one row (per the reference design) - unlike list view's stacked
   actions column, so this overrides flex-direction back to a row here. */
.carbs-listing-view-grid .carbs-listing-card-actions {
	flex: none;
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	border-left: none;
	border-top: 1px solid var(--tpc-border);
	padding: 14px 18px;
	gap: 8px;
}

.carbs-listing-view-grid .carbs-listing-icon-btn {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
}

.carbs-listing-view-grid .carbs-listing-btn-outline {
	flex: 1;
	width: auto;
}

.carbs-listing-view-grid .carbs-listing-card-price-row {
	justify-content: space-between;
}

.carbs-listing-view-grid .carbs-listing-wishlist-btn {
	z-index: 3;
}

@media (max-width: 900px) {
	.carbs-listing-view-grid.carbs-listing-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

@media (max-width: 560px) {
	.carbs-listing-view-grid.carbs-listing-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- List view: tighter layout ---- */

.carbs-listing-view-list .carbs-listing-card-body {
	padding: 12px 16px;
	gap: 5px;
}

.carbs-listing-view-list .carbs-listing-card-title {
	font-size: 15.5px;
}

.carbs-listing-view-list .carbs-listing-card-actions {
	flex-basis: 190px;
	padding: 14px;
}

.carbs-listing-view-list .carbs-listing-card-price {
	font-size: 17px;
}

@media (max-width: 767.98px) {
	.carbs-listing-card,
	.carbs-listing-view-list .carbs-listing-card {
		flex-direction: column;
	}

	.carbs-listing-card-media,
	.carbs-listing-view-list .carbs-listing-card-media {
		flex-basis: auto;
	}

	.carbs-listing-card-image,
	.carbs-listing-view-list .carbs-listing-card-image {
		min-height: 200px;
	}

	.carbs-listing-card-actions {
		flex-basis: auto;
		border-left: none;
		border-top: 1px solid var(--tpc-border);
		flex-direction: row;
		flex-wrap: wrap;
	}

	.carbs-listing-btn-outline,
	.carbs-listing-btn-filled,
	.carbs-listing-btn-deal {
		width: auto;
		flex: 1 1 45%;
	}

	.carbs-listing-card-contact {
		width: 100%;
	}
}

/* ==========================================================================
   Results footer (showing X-Y of Z / per-page)
   ========================================================================== */

.carbs-listing-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--tpc-border);
}

.carbs-listing-showing {
	margin: 0;
	font-size: 13px;
	color: var(--tpc-gray);
}

.carbs-listing-per-page {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tpc-gray);
}

/* Compact variant of the global select style (tpc-custom.css). */
.carbs-listing-per-page select {
	padding: 6px 26px 6px 10px;
	font-size: 13px;
	font-weight: 600;
	background-position: right 10px center;
}

.carbs-listing-per-page select:focus {
	border-color: var(--tpc-red);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.carbs-listing-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.carbs-listing-page {
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tpc-border);
	border-radius: var(--carbs-l-radius-sm);
	background: var(--tpc-white);
	color: var(--tpc-black);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.carbs-listing-page-prev,
.carbs-listing-page-next,
.carbs-listing-page-jump {
	width: 36px;
	padding: 0;
	font-size: 12px;
}

.carbs-listing-page:hover {
	border-color: var(--tpc-red);
	color: var(--tpc-red);
}

.carbs-listing-page.is-active {
	background: var(--tpc-red);
	border-color: var(--tpc-red);
	color: var(--tpc-white);
}

.carbs-listing-page-ellipsis {
	color: var(--tpc-gray);
	padding: 0 4px;
}

/* ==========================================================================
   Loading state
   ========================================================================== */

.carbs-listing-results.is-loading {
	position: relative;
	min-height: 200px;
	opacity: 0.5;
	pointer-events: none;
}