/* =========================================================
   Vehicle Bro.lk — listing card
   ========================================================= */

.vb-card {
	position: relative;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.vb-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(17, 17, 17, .12);
	border-color: #ddd;
}

/* ---------- thumbnail ---------- */

.vb-card__thumb {
	position: relative;
	overflow: hidden;
}

.vb-card__thumb .directorist-thumnail-card {
	border-radius: 0;
}

/* condition chip — bottom left */
.vb-card__cond {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	background: rgba(17, 17, 17, .85);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 5px 10px;
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

/* price — bottom right */
.vb-card__price {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	background: #FFC107;
	color: #111;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.vb-card__price small {
	font-size: 11px;
	font-weight: 600;
	opacity: .75;
}

/* ---------- body ---------- */

.vb-card .vb-card__body,
.directorist-listing-card.vb-card .vb-card__body {
	padding: 14px 16px 16px;
}

.vb-card__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.vb-card__title a {
	color: #111;
	text-decoration: none;
}

.vb-card:hover .vb-card__title a {
	color: #000;
}

.vb-card__make {
	font-size: 13px;
	color: #777;
	margin-bottom: 10px;
}

/* spec row — dot separated, no labels */
.vb-card__specs {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	font-size: 13px;
	color: #444;
}

.vb-card__specs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.vb-card__specs li + li::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #c4c4c4;
	margin: 0 8px;
}

/* location */
.vb-card__loc {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #666;
	padding-top: 10px;
	border-top: 1px solid #f0f0f0;
}

.vb-card__loc a {
	color: #666;
	text-decoration: none;
	position: relative;
	z-index: 4;
}

.vb-card__loc a:hover {
	color: #111;
}

.vb-card__loc i,
.vb-card__loc svg {
	color: #FFC107;
	font-size: 14px;
}

/* whole card clickable, but badges/favourite stay on top */
.vb-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vb-card .directorist-thumb-top-left,
.vb-card .directorist-thumb-top-right {
	z-index: 5;
}

/* ---------- badges ---------- */

.vb-card .directorist-badge {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	border-radius: 4px;
	padding: 5px 9px;
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {

	.vb-card .vb-card__body,
	.directorist-listing-card.vb-card .vb-card__body {
		padding: 12px 14px 14px;
	}

	.vb-card__title {
		font-size: 15px;
	}

	.vb-card__price {
		font-size: 14px;
		padding: 7px 10px;
	}

	.vb-card__specs {
		font-size: 12px;
	}
}

/* =========================================================
   Vehicle Bro.lk — list view card
   ========================================================= */

.vb-list {
	display: flex;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
	transition: box-shadow .25s ease, border-color .25s ease;
}

.vb-list:hover {
	box-shadow: 0 10px 24px rgba(17, 17, 17, .10);
	border-color: #ddd;
}

/* ---------- thumb ---------- */

.vb-list__thumb {
	position: relative;
	flex: 0 0 280px;
	max-width: 280px;
	overflow: hidden;
}

.vb-list__thumb .directorist-thumnail-card {
	height: 100% !important;
	min-height: 200px;
	border-radius: 0;
}

.vb-list__cond {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	background: rgba(17, 17, 17, .85);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 5px 10px;
	border-radius: 4px;
}

.vb-list .directorist-thumb-top-left,
.vb-list .directorist-thumb-top-right {
	z-index: 5;
}

/* ---------- body ---------- */

.vb-list .vb-list__body,
.directorist-listing-list.vb-list .vb-list__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	min-width: 0;
	box-sizing: border-box;
}

.vb-list__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.vb-list__head-main {
	min-width: 0;
}

.vb-list__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.vb-list__title a {
	color: #111;
	text-decoration: none;
}

.vb-list__title a:hover {
	color: #000;
}

.vb-list__sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: #777;
}

.vb-list__cat {
	background: #f5f5f5;
	color: #555;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
}

/* price block */
.vb-list__head-price {
	text-align: right;
	flex: 0 0 auto;
}

.vb-list__price {
	font-size: 19px;
	font-weight: 800;
	color: #111;
	line-height: 1.2;
	white-space: nowrap;
}

.vb-list__per {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #888;
	letter-spacing: .3px;
}

.vb-list__nego {
	display: inline-block;
	margin-top: 4px;
	background: #FFC107;
	color: #111;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 3px 7px;
	border-radius: 3px;
}

.vb-list__rates {
	margin-top: 6px;
	font-size: 12px;
	color: #777;
	line-height: 1.5;
}

.vb-list__rates span {
	display: block;
	white-space: nowrap;
}

/* ---------- specs ---------- */

.vb-list__specs {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vb-list__specs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f7f7f7;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 12.5px;
	color: #444;
	margin: 0;
}

.vb-list__specs li i,
.vb-list__specs li svg {
	color: #999;
	font-size: 14px;
}

/* ---------- footer ---------- */

.vb-list__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #f0f0f0;
}

.vb-list__foot:not(:has(*)) {
	display: none;
}

.vb-list__loc {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #666;
}

.vb-list__loc a {
	color: #666;
	text-decoration: none;
}

.vb-list__loc a:hover {
	color: #111;
}

.vb-list__loc i,
.vb-list__loc svg {
	color: #FFC107;
	font-size: 14px;
}

.vb-list__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vb-list__btn {
	background: #111;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 6px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
	white-space: nowrap;
}

.vb-list__btn:hover {
	background: #FFC107;
	color: #111 !important;
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {

	.vb-list {
		flex-direction: column;
	}

	.vb-list__thumb {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.vb-list__thumb .directorist-thumnail-card {
		min-height: 0;
		height: 200px !important;
	}

	.vb-list .vb-list__body,
	.directorist-listing-list.vb-list .vb-list__body {
		padding: 14px;
	}

	.vb-list__head {
		flex-direction: column;
		gap: 8px;
	}

	.vb-list__head-price {
		text-align: left;
	}

	.vb-list__title {
		font-size: 16px;
	}

	.vb-list__price {
		font-size: 18px;
	}

	.vb-list__rates span {
		display: inline;
		margin-right: 10px;
	}

	.vb-list__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.vb-list__actions {
		justify-content: space-between;
	}

	.vb-list__btn {
		flex: 1 1 auto;
		text-align: center;
	}
}


/* =========================================================
   Vehicle Bro.lk — layout corrections
   ========================================================= */

/* Directorist resets that fight our padding */
.vb-card .directorist-listing-single__content,
.vb-list .directorist-listing-single__content {
	margin: 0;
}

/* keep list thumbnails a consistent height so cards line up */
.vb-list__thumb .directorist-thumnail-card,
.vb-list__thumb .directorist-card-cover,
.vb-list__thumb .directorist-card-contain {
	height: 100% !important;
	min-height: 210px;
	max-height: 260px;
}

.vb-list {
	align-items: stretch;
}

/* tighter spec pills */
.vb-list__specs {
	margin-top: 12px;
	gap: 6px;
}

.vb-list__specs li {
	padding: 5px 9px;
	font-size: 12px;
}

/* footer sits right under the specs, not pushed to the bottom */
.vb-list__foot {
	margin-top: 14px;
	padding-top: 12px;
}

/* price column never touches the edge */
.vb-list__head-price {
	padding-left: 8px;
}

/* grid: spec row breathing room */
.vb-card__specs {
	margin-bottom: 12px;
}

/* =========================================================
   Vehicle Bro.lk — padding hard override
   Directorist ships its own padding on
   .directorist-listing-single__content at equal specificity,
   so these are forced.
   ========================================================= */

.vb-list .vb-list__body,
.vb-list .directorist-listing-single__content,
article.vb-list > section {
	padding-top: 18px !important;
	padding-right: 20px !important;
	padding-bottom: 18px !important;
	padding-left: 20px !important;
	box-sizing: border-box !important;
}

.vb-card .vb-card__body,
.vb-card .directorist-listing-single__content,
article.vb-card > div.directorist-listing-single__content {
	padding-top: 14px !important;
	padding-right: 16px !important;
	padding-bottom: 16px !important;
	padding-left: 16px !important;
	box-sizing: border-box !important;
}

.vb-list__head,
.vb-list__specs,
.vb-list__foot,
.vb-card__specs {
	max-width: 100% !important;
}

@media (max-width: 767px) {

	.vb-list .vb-list__body,
	.vb-list .directorist-listing-single__content,
	article.vb-list > section {
		padding-top: 14px !important;
		padding-right: 14px !important;
		padding-bottom: 14px !important;
		padding-left: 14px !important;
	}
}

/* =========================================================
   Vehicle Bro.lk — Buy / Rent directory tabs
   ========================================================= */

.directorist-type-nav {
	margin-bottom: 22px;
}

.directorist-type-nav__list {
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.directorist-type-nav__list li {
	margin: 0;
	padding: 0;
}

.directorist-type-nav__list .directorist-type-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px;
	border: 1px solid #e4e4e4;
	border-radius: 8px;
	background: #fff;
	color: #555;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: all .2s ease;
}

.directorist-type-nav__list .directorist-type-nav__link:hover {
	border-color: #111;
	color: #111;
}

.directorist-type-nav__list .directorist-type-nav__list__current .directorist-type-nav__link {
	background: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}

.directorist-type-nav__list .directorist-type-nav__link .directorist-icon-mask:after {
	background-color: currentColor;
	width: 18px;
	height: 18px;
}

/* =========================================================
   Vehicle Bro.lk — sidebar filters
   ========================================================= */

.directorist-advanced-search .directorist-search-form__box {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
}

.directorist-advanced-filter__top {
	padding: 16px 18px;
	border-bottom: 1px solid #f0f0f0;
	margin: 0;
}

.directorist-advanced-filter__title {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #111 !important;
	margin: 0 !important;
}

.directorist-advanced-filter__advanced {
	padding: 18px;
}

.directorist-advanced-filter__advanced__element {
	margin-bottom: 16px !important;
}

.directorist-advanced-search .directorist-search-field__label {
	display: block !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #111 !important;
	margin: 0 0 7px !important;
}

.directorist-advanced-search .directorist-form-element,
.directorist-advanced-search input[type="text"],
.directorist-advanced-search .select2-container--default .select2-selection--single {
	height: 44px !important;
	min-height: 44px !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 8px !important;
	background: #fafafa !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	color: #111 !important;
	box-shadow: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.directorist-advanced-search .select2-container {
	width: 100% !important;
}

.directorist-advanced-search .select2-container--default
.select2-selection--single .select2-selection__rendered {
	line-height: 42px !important;
	padding: 0 !important;
}

.directorist-advanced-search .select2-container--default
.select2-selection--single .select2-selection__arrow {
	height: 42px !important;
	right: 8px !important;
}

.directorist-advanced-search .directorist-form-element:focus {
	border-color: #FFC107 !important;
	background: #fff !important;
	outline: none !important;
}

/* clear-all button */
.directorist-advanced-filter__action {
	padding: 4px 0 0;
	border-top: 1px solid #f0f0f0;
	margin-top: 4px;
}

.directorist-btn-reset-ajax {
	width: 100%;
	background: #f5f5f5 !important;
	border: 0 !important;
	color: #555 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 11px !important;
	border-radius: 8px !important;
	margin-top: 14px !important;
	cursor: pointer;
	transition: all .2s ease;
}

.directorist-btn-reset-ajax:hover {
	background: #111 !important;
	color: #fff !important;
}

/* sticky sidebar on desktop */
@media (min-width: 992px) {
	.listing-with-sidebar__sidebar {
		position: sticky;
		top: 20px;
		align-self: flex-start;
	}
}

/* =========================================================
   Vehicle Bro.lk — header bar (count / view / sort)
   ========================================================= */

.directorist-header-found-title {
	font-size: 15px;
	font-weight: 600;
	color: #111;
}

.directorist-viewas__item.active,
.directorist-viewas__item:hover {
	background: #FFC107 !important;
	color: #111 !important;
}

/* =========================================================
   Vehicle Bro.lk — sidebar spacing fix
   ========================================================= */

.directorist-advanced-search .directorist-search-field,
.directorist-advanced-search .directorist-form-group {
	margin-bottom: 0 !important;
	position: relative;
}

.directorist-advanced-filter__advanced__element {
	margin-bottom: 14px !important;
}

.directorist-advanced-filter__advanced__element:last-of-type {
	margin-bottom: 0 !important;
}

.directorist-advanced-search div.directorist-search-field__input,
.directorist-advanced-search .directorist-select {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

.directorist-advanced-search .directorist-search-field__btn--clear {
	display: none !important;
}

/* =========================================================
   Vehicle Bro.lk — top search bar (custom template)
   ========================================================= */

.vb-search {
	margin-bottom: 24px;
}

.vb-search__box {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.1fr auto;
	gap: 14px;
	align-items: end;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(17, 17, 17, .05);
	padding: 20px 26px 22px;
}

.vb-search__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vb-search__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #111;
	margin: 0 0 7px;
	letter-spacing: .2px;
	line-height: 1.3;
}

.vb-search__control {
	width: 100%;
	height: 46px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background-color: #fff;
	padding: 0 14px;
	font-size: 14px;
	color: #111;
	box-sizing: border-box;
	box-shadow: none;
	outline: none;
	transition: border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.vb-search__control:focus {
	border-color: #FFC107;
	box-shadow: 0 0 0 3px rgba(255, 193, 7, .15);
}

.vb-search__control::placeholder {
	color: #aaa;
}

select.vb-search__control {
	padding-right: 36px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

/* price min / max */
.vb-search__price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vb-search__price .vb-search__control {
	padding: 0 10px;
	text-align: center;
	min-width: 0;
}

.vb-search__dash {
	color: #bbb;
	flex: 0 0 auto;
}

/* hide number spinners */
.vb-search__price input::-webkit-outer-spin-button,
.vb-search__price input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vb-search__price input[type=number] {
	-moz-appearance: textfield;
}

/* submit */
.vb-search__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 8px;
	background: #FFC107;
	color: #111;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}

.vb-search__btn:hover {
	background: #111;
	color: #fff;
}

.vb-search__btn .directorist-icon-mask:after {
	background-color: currentColor;
	width: 17px;
	height: 17px;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {

	.vb-search__box {
		grid-template-columns: 1fr 1fr;
	}

	.vb-search__field--submit {
		grid-column: 1 / -1;
	}

	.vb-search__btn {
		width: 100%;
	}
}

@media (max-width: 575px) {

	.vb-search__box {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px;
	}
}

/* =========================================================
   Vehicle Bro.lk — sidebar: native selects must match inputs
   ========================================================= */

.directorist-advanced-search select,
.directorist-advanced-search select.directorist-form-element,
.directorist-advanced-search .directorist-select select {
	display: block !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 8px !important;
	background-color: #fafafa !important;
	padding: 0 36px 0 12px !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: #111 !important;
	line-height: 42px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	outline: none !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px !important;
}

.directorist-advanced-search select:focus {
	border-color: #FFC107 !important;
	background-color: #fff !important;
}

/* select2 version, if the plugin upgrades a field */
.directorist-advanced-search .select2-container--default .select2-selection--single {
	height: 44px !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 8px !important;
	background: #fafafa !important;
}

/* =========================================================
   Vehicle Bro.lk — search bar: text/number inputs
   Elementor's kit stylesheet targets `input` with higher
   specificity than a single class, so these are forced.
   The selects were never affected, which is why only the
   text and price boxes looked different.
   ========================================================= */

.vb-search input.vb-search__control,
.vb-search__price input.vb-search__control,
.vb-search input[type="text"],
.vb-search input[type="number"] {
	height: 46px !important;
	min-height: 46px !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	background-image: none !important;
	color: #111 !important;
	font-size: 14px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	width: 100% !important;
	padding: 0 14px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.vb-search__price input.vb-search__control,
.vb-search__price input[type="number"] {
	padding: 0 10px !important;
	text-align: center !important;
}

.vb-search input.vb-search__control:focus,
.vb-search input[type="text"]:focus,
.vb-search input[type="number"]:focus {
	border-color: #FFC107 !important;
	box-shadow: 0 0 0 3px rgba(255, 193, 7, .15) !important;
	outline: none !important;
}

.vb-search input.vb-search__control::placeholder {
	color: #aaa !important;
	opacity: 1;
}

/* keep the selects identical to the inputs */
.vb-search select.vb-search__control {
	height: 46px !important;
	min-height: 46px !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	color: #111 !important;
	font-size: 14px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	width: 100% !important;
}

/* =========================================================
   Vehicle Bro.lk — single listing page
   ========================================================= */

.vb-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
	margin-top: 24px;
}

/* ---------- shared box ---------- */

.vb-box {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 18px;
}

.vb-box__title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 17px;
	font-weight: 700;
	color: #111;
}

/* ---------- spec grid ---------- */

.vb-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
}

.vb-specs li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid #f4f4f4;
	font-size: 14px;
}

.vb-specs__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #777;
	white-space: nowrap;
}

.vb-specs__label .directorist-icon-mask:after {
	background-color: #bbb;
	width: 16px;
	height: 16px;
}

.vb-specs__value {
	color: #111;
	font-weight: 600;
	text-align: right;
}

/* ---------- features ---------- */

.vb-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vb-features li {
	margin: 0;
	padding: 7px 12px;
	background: #f7f7f7;
	border-radius: 6px;
	font-size: 13px;
	color: #444;
}

.vb-features li::before {
	content: "✓";
	color: #FFC107;
	font-weight: 700;
	margin-right: 6px;
}

/* ---------- description / video ---------- */

.vb-desc {
	font-size: 15px;
	line-height: 1.75;
	color: #444;
}

.vb-desc p:last-child {
	margin-bottom: 0;
}

.vb-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 8px;
	display: block;
}

/* ---------- safety ---------- */

.vb-safety {
	background: #fffdf5;
	border-color: #f4e5b0;
}

.vb-safety ul {
	margin: 0 0 14px;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.9;
	color: #555;
}

.vb-safety__note {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid #f0e4bd;
	font-size: 13px;
	color: #8a7a45;
}

/* ---------- sticky sidebar ---------- */

.vb-single__side {
	position: sticky;
	top: 20px;
}

.vb-side-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 4px 18px rgba(17, 17, 17, .06);
}

.vb-side-card__price {
	font-size: 28px;
	font-weight: 800;
	color: #111;
	line-height: 1.15;
}

.vb-side-card__per {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #888;
	margin-top: 2px;
}

.vb-side-card__nego {
	display: inline-block;
	margin-top: 8px;
	background: #FFC107;
	color: #111;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 4px 9px;
	border-radius: 4px;
}

.vb-side-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 16px 0 0;
	padding: 14px 0;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13.5px;
	color: #666;
}

.vb-side-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vb-side-card__meta .directorist-icon-mask:after {
	background-color: #FFC107;
	width: 15px;
	height: 15px;
}

.vb-side-card__seller {
	margin: 14px 0 4px;
	font-size: 15px;
	color: #111;
}

.vb-side-card__seller-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #999;
	letter-spacing: .3px;
	margin-bottom: 2px;
}

.vb-side-card__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.vb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 48px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .2s ease, background .2s ease;
}

.vb-btn .directorist-icon-mask:after {
	width: 18px;
	height: 18px;
	background-color: currentColor;
}

.vb-btn--call {
	background: #111;
	color: #fff !important;
}

.vb-btn--call:hover {
	background: #FFC107;
	color: #111 !important;
}

.vb-btn--wa {
	background: #25D366;
	color: #fff !important;
}

.vb-btn--wa:hover {
	opacity: .88;
}

.vb-side-card__warn {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid #f0f0f0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #999;
}

.vb-side-card__warn .directorist-icon-mask:after {
	background-color: #FFC107;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* ---------- related ---------- */

.vb-related {
	margin: 32px 0 0;
}

.vb-related__title {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 700;
	color: #111;
}

.vb-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.vb-rel-card {
	display: block;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.vb-rel-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(17, 17, 17, .10);
}

.vb-rel-card__img {
	display: block;
	height: 130px;
	background-size: cover;
	background-position: center;
	background-color: #f2f2f2;
}

.vb-rel-card__body {
	display: block;
	padding: 12px 14px 14px;
}

.vb-rel-card__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #111;
	line-height: 1.35;
	margin-bottom: 4px;
}

.vb-rel-card__meta {
	display: block;
	font-size: 12.5px;
	color: #888;
	margin-bottom: 8px;
}

.vb-rel-card__price {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #111;
}

.vb-rel-card__price small {
	font-size: 11px;
	color: #999;
	font-weight: 600;
}

/* ---------- mobile sticky bar ---------- */

.vb-mobile-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	gap: 1px;
	background: #e5e5e5;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .12);
}

.vb-mobile-bar__btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.vb-mobile-bar__btn .directorist-icon-mask:after {
	width: 18px;
	height: 18px;
	background-color: currentColor;
}

.vb-mobile-bar__btn--call {
	background: #111;
	color: #fff !important;
}

.vb-mobile-bar__btn--wa {
	background: #25D366;
	color: #fff !important;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {

	.vb-single {
		grid-template-columns: 1fr;
	}

	.vb-single__side {
		position: static;
		order: -1;
	}

	.vb-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.vb-specs {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.vb-box {
		padding: 16px;
	}

	.vb-side-card {
		padding: 18px;
	}

	.vb-side-card__price {
		font-size: 24px;
	}

	.vb-mobile-bar {
		display: flex;
	}

	body.single-at_biz_dir {
		padding-bottom: 60px;
	}

	/* the sidebar buttons are duplicated by the sticky bar on phones */
	.vb-side-card__actions {
		display: none;
	}
}


/* =========================================================
   Vehicle Bro.lk — single listing gallery
   Real markup:
     #directorist-single-listing-slider-wrap
       .directorist-single-listing-slider        (main)
       .directorist-single-listing-slider-thumb  (thumbs)
   Swiper sets inline heights from the plugin's crop
   settings, so these are forced to a 16:9 frame.
   ========================================================= */

#directorist-single-listing-slider-wrap {
	width: 100%;
	max-width: 100%;
	margin: 0 0 4px;
}

/* ---------- main image ---------- */

#directorist-single-listing-slider-wrap .directorist-single-listing-slider {
	aspect-ratio: 16 / 9;
	height: auto !important;
	max-height: 480px;
	border-radius: 12px;
	overflow: hidden;
	background: #f2f2f2;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider .swiper-wrapper,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider .swiper-slide {
	height: 100% !important;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider .swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block;
	border-radius: 0;
}

/* ---------- thumbnails ---------- */

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb {
	margin-top: 10px;
	height: auto !important;
	padding-bottom: 0 !important;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-wrapper {
	height: auto !important;
	align-items: stretch;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-slide {
	aspect-ratio: 16 / 9;
	height: auto !important;
	border-radius: 8px;
	overflow: hidden;
	opacity: .55;
	cursor: pointer;
	transition: opacity .2s ease, box-shadow .2s ease;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block;
	border-radius: 8px;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-slide-thumb-active,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-slide-active,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-slide:hover {
	opacity: 1;
	box-shadow: 0 0 0 2px #FFC107 inset;
}

/* ---------- kill the grey bar under the thumbs ---------- */

#directorist-single-listing-slider-wrap .directorist-swiper__pagination--single-listing-thumb,
#directorist-single-listing-slider-wrap .directorist-swiper__pagination--single-listing,
#directorist-single-listing-slider-wrap .swiper-scrollbar,
#directorist-single-listing-slider-wrap .swiper-pagination-progressbar {
	display: none !important;
}

/* ---------- arrows ---------- */

#directorist-single-listing-slider-wrap .directorist-swiper__nav {
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, .92);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

#directorist-single-listing-slider-wrap .directorist-swiper__nav .directorist-icon-mask:after {
	background-color: #111;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .directorist-swiper__navigation {
	display: none;
}

@media (max-width: 767px) {

	#directorist-single-listing-slider-wrap .directorist-single-listing-slider {
		max-height: none;
		border-radius: 8px;
	}
}


/* =========================================================
   Vehicle Bro.lk — single page: header inside the left column
   ========================================================= */

.vb-single__main > .directorist-single-listing-header,
.vb-single__main > .directorist-single-info-header {
	margin-bottom: 14px;
}

.vb-single {
	margin-top: 0;
}

/* no dead space beside the gallery any more */
.vb-single__main #directorist-single-listing-slider-wrap {
	margin-bottom: 20px;
}

/* thumb strip: kill the native scrollbar row */
#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-wrapper {
	overflow: hidden !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb::-webkit-scrollbar,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .swiper-wrapper::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .directorist-swiper__navigation,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider-thumb .directorist-swiper__nav {
	display: none !important;
}

/* =========================================================
   Vehicle Bro.lk — single page container width
   The custom template drops Directorist's row/column
   wrappers, so the area needs its own constraint or the
   sidebar runs off the right edge.
   ========================================================= */

.directorist-single-contents-area {
	width: 100%;
	overflow-x: clip;
}

.directorist-single-contents-area > .directorist-container,
.directorist-single-contents-area > .directorist-container-fluid {
	width: 100% !important;
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	box-sizing: border-box !important;
}

.vb-single-wrap,
.vb-single {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.vb-single {
	grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
}

.vb-single__main,
.vb-single__side {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 1100px) {
	.vb-single {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   Vehicle Bro.lk — custom image icon inside Directorist's
   yellow category circle (/all-categories/ and widgets)

   Directorist paints the circle on the <i> icon element, not on
   the wrapper, so a plain <img> lands with no circle at all.
   The wrapper gets the circle here, and the image is forced
   white so it matches the Line Awesome icons.
   ========================================================= */

.directorist-categories__single__icon.vb-cat-customicon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	min-width: 60px;
	border-radius: 50%;
	background: var(--directorist-color-primary, #FFC107);
	margin: 0 auto 14px;
	padding: 0;
}

.directorist-categories__single__icon.vb-cat-customicon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	display: block;
	margin: 0;
	/* any colour PNG -> solid white */
	filter: brightness(0) invert(1);
}

/* list layout */
.directorist-taxonomy-list__icon.vb-cat-customicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.directorist-taxonomy-list__icon.vb-cat-customicon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
}

/* =========================================================
   Homepage [vb_categories] tiles are white, so the same
   image is forced black there instead.
   ========================================================= */

.vb-cat__img {
	filter: brightness(0);
}

.vb-cat:hover .vb-cat__img {
	filter: brightness(0) sepia(1) saturate(6) hue-rotate(2deg);
}

/* =========================================================
   Vehicle Bro.lk — single page grid areas

   The header (title, quick info, gallery) is its own area so
   the price card can sit beside it on desktop and drop BELOW
   the gallery on mobile — not above the whole page.
   ========================================================= */

.vb-single {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
	grid-template-areas:
		"head side"
		"main side";
	gap: 0 24px;
	align-items: start;
}

.vb-single__head {
	grid-area: head;
	min-width: 0;
	max-width: 100%;
	margin-bottom: 20px;
}

.vb-single__main {
	grid-area: main;
	min-width: 0;
	max-width: 100%;
}

.vb-single__side {
	grid-area: side;
	min-width: 0;
	max-width: 100%;
	position: sticky;
	top: 20px;
	margin-top: 0;
}

@media (max-width: 1100px) {

	.vb-single {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"side"
			"main";
		gap: 0;
	}

	.vb-single__side {
		position: static;
		order: 0;
		margin-bottom: 20px;
	}
}


/* =========================================================
   Vehicle Bro.lk — All Ads (archive) grid: 2 cards per row on phones

   DOM note: Directorist wraps EVERY grid card in its own column <div>
   (the directorist-col-* classes land on that wrapper, not on our
   <article>). So the row container is the card's GRANDparent:
     row  →  column div  →  article.vb-card
   Targeting the direct parent turns each single-card wrapper into a
   2-column grid, which is why the cards went half-width but stayed
   stacked. Both levels are handled below, no class names guessed.
   ========================================================= */

@media (max-width: 575px) {

	/* 1. the row that holds the column divs → real 2-column grid */
	*:has(> * > article.vb-card) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		margin: 0 !important;
	}

	/* 2. Directorist's per-card column div → fill its grid cell */
	*:has(> article.vb-card) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* 3. the card itself */
	article.vb-card {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		border-radius: 10px;
	}

	article.vb-card:hover {
		transform: none;
		box-shadow: none;
	}

	/* --- thumbnail: 4:3 so four cards fit one screen -------- */
	.vb-card__thumb {
		aspect-ratio: 4 / 3;
	}

	.vb-card__thumb .directorist-thumnail-card,
	.vb-card__thumb .directorist-card-cover,
	.vb-card__thumb .directorist-card-contain,
	.vb-card__thumb .directorist-slider,
	.vb-card__thumb .swiper,
	.vb-card__thumb .swiper-wrapper,
	.vb-card__thumb .swiper-slide,
	.vb-card__thumb img {
		height: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.vb-card__thumb img {
		width: 100% !important;
		object-fit: cover !important;
	}

	/* --- body ---------------------------------------------- */
	.vb-card .vb-card__body,
	.vb-card .directorist-listing-single__content,
	article.vb-card > div.directorist-listing-single__content {
		padding: 9px 10px 11px !important;
	}

	.vb-card__title {
		font-size: 13px;
		line-height: 1.28;
		margin-bottom: 5px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* brand line + condition chip: no room at this width */
	.vb-card__make,
	.vb-card__cond {
		display: none;
	}

	.vb-card__specs {
		font-size: 11.5px;
		margin-bottom: 7px !important;
	}

	/* keep the first two specs only */
	.vb-card__specs li:nth-child(n+3) {
		display: none;
	}

	.vb-card__specs li + li::before {
		margin: 0 6px;
	}

	.vb-card__price {
		font-size: 12px;
		padding: 5px 7px;
		right: 7px;
		bottom: 7px;
		border-radius: 5px;
	}

	.vb-card__price small {
		font-size: 9.5px;
	}

	.vb-card__loc {
		font-size: 11.5px;
		gap: 4px;
		padding-top: 7px;
	}

	.vb-card__loc i,
	.vb-card__loc svg {
		font-size: 12px;
	}

	/* --- badges + favourite button -------------------------- */
	.vb-card .directorist-badge {
		font-size: 9.5px;
		padding: 4px 7px;
	}

	.vb-card .directorist-thumb-top-left,
	.vb-card .directorist-thumb-top-right {
		top: 7px;
	}

	.vb-card .directorist-thumb-top-left  { left: 7px; }
	.vb-card .directorist-thumb-top-right { right: 7px; }

	.vb-card .directorist-thumb-top-right a {
		width: 28px !important;
		height: 28px !important;
		font-size: 12px !important;
	}

	/* slider dots take less room */
	.vb-card__thumb .swiper-pagination-bullet {
		width: 5px;
		height: 5px;
	}
}


/* --- very small phones — keep two columns, trim a little more --- */
@media (max-width: 360px) {

	*:has(> * > article.vb-card) {
		gap: 8px !important;
	}

	.vb-card .vb-card__body,
	.vb-card .directorist-listing-single__content {
		padding: 8px 9px 10px !important;
	}

	.vb-card__title  { font-size: 12.5px; }
	.vb-card__specs  { font-size: 11px; }
	.vb-card__price  { font-size: 11.5px; padding: 4px 6px; }
}


/* =========================================================
   Vehicle Bro.lk — single gallery arrows

   Cause: we put `overflow:hidden` + `border-radius` on
   .directorist-single-listing-slider so the image corners round off.
   Directorist's nav buttons sit INSIDE that element with its own
   default offsets that hang past the edge, so the circles get sliced
   by the clip. Pin them inside the frame instead.
   ========================================================= */

#directorist-single-listing-slider-wrap,
#directorist-single-listing-slider-wrap .directorist-single-listing-slider {
	position: relative;
}

/* nav layer = exactly the image box, and it must not eat swipes */
#directorist-single-listing-slider-wrap .directorist-single-listing-slider .directorist-swiper__navigation {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 6;
}

#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	pointer-events: auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, .95);
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	opacity: 1;
}

/* DOM-order fallback: first button = prev, last = next */
#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav:first-child {
	left: 10px !important;
	right: auto !important;
}

#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav:last-child {
	right: 10px !important;
	left: auto !important;
}

/* class-name match wins wherever Directorist uses --prev / --next */
#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav[class*="prev"] {
	left: 10px !important;
	right: auto !important;
}

#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav[class*="next"] {
	right: 10px !important;
	left: auto !important;
}

#directorist-single-listing-slider-wrap .directorist-swiper__nav .directorist-icon-mask:after {
	background-color: #111;
}

/* Swiper hides its own disabled buttons — keep that honest */
#directorist-single-listing-slider-wrap .directorist-swiper__nav.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

/* phones — smaller circles, tighter to the edge */
@media (max-width: 575px) {

	#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav {
		width: 32px;
		height: 32px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	}

	#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav:first-child,
	#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav[class*="prev"] {
		left: 8px !important;
	}

	#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav:last-child,
	#directorist-single-listing-slider-wrap .directorist-swiper__navigation .directorist-swiper__nav[class*="next"] {
		right: 8px !important;
	}
}