/* ==========================================================
   custom-fixes.css
   Small, targeted overrides. Loaded after every other stylesheet
   so these rules always win, without touching the original files.
   ========================================================== */

/* -----------------------------------------------------------
 * 1. Logo — any uploaded aspect ratio (square, wide, tall)
 *    now scales to fit the header without breaking its height.
 * --------------------------------------------------------- */
.header-logo img,
.header-logo .custom-logo {
	width: auto;
	max-width: 200px;
	height: auto;
	max-height: 60px;
	object-fit: contain;
}

.footer-logo img,
.footer-logo .custom-logo {
	width: auto;
	max-width: 200px;
	height: auto;
	max-height: 70px;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.header-logo img,
	.header-logo .custom-logo {
		max-width: 150px;
		max-height: 48px;
	}
}

/* -----------------------------------------------------------
 * 1b. Homepage carousel card — image + info side by side.
 *     Rebuilt as a plain flex layout (see vehicle-card-carousel.php)
 *     instead of Bootstrap's row/col-lg-6, because Bootstrap's grid
 *     uses negative margins that conflict with how Swiper measures
 *     slide widths, causing uneven gaps and mismatched image/card sizes.
 * --------------------------------------------------------- */
.each-product-flex {
	display: flex;
	gap: 8px;
	width: 1200px;
	max-width: 85vw;
	height: 406px;
}
.each-product-flex > .each-product-img,
.each-product-flex > .each-product-text {
	flex: 0 0 50%;
	width: 50%;
	height: 100%;
}

@media (max-width: 991.98px) {
	.each-product-flex {
		flex-direction: column;
		width: 85vw;
		max-width: 420px;
		height: auto;
	}
	.each-product-flex > .each-product-img,
	.each-product-flex > .each-product-text {
		width: 100%;
		height: auto;
		flex: none;
	}
	.each-product-flex > .each-product-img {
		height: 240px;
	}
}

/* -----------------------------------------------------------
 * 2. Vehicle detail page — hero photo + side thumbnails.
 *    Original site set this height at runtime via JS so both
 *    columns matched exactly; we fix it directly in CSS instead,
 *    at the same breakpoints the theme already uses.
 * --------------------------------------------------------- */
.each-big-car {
	height: 700px;
}
.each-big-car img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.each_small_car img {
	width: 100%;
}

@media (max-width: 1399.98px) {
	.each-big-car { height: 544px; }
}
@media (max-width: 1199.98px) {
	.each-big-car { height: 456px; }
}
@media (max-width: 991.98px) {
	.each-big-car { height: 360px; }
	.small_car { height: 360px !important; }
}
@media (max-width: 767.98px) {
	.each-big-car { height: 280px; }
	.small_car { height: 280px !important; }
}

/* -----------------------------------------------------------
 * 3. Homepage carousel scrollbar — Swiper's own CSS positions
 *    this absolutely (bottom: 3px inside the slider), which makes
 *    it sit on top of the photos. Switching it to normal document
 *    flow with its own margin keeps it clearly below the cards
 *    no matter how tall the cards are.
 * --------------------------------------------------------- */
.product-slider .swiper {
	padding-bottom: 20px;
}
.product-slider .swiper-scrollbar {
	position: relative;
	bottom: auto;
	left: auto;
	margin-top: 10px;
}