/**
 * VV Child Theme — Single Product Page Styles
 *
 * Car-listing style summary panel for WooCommerce single product pages.
 * Applied on .vv-sp wrapper injected via vv_single_product_car_summary().
 */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

/* =============================================================
   SINGLE PRODUCT WRAPPER
   ============================================================= */

.vv-sp {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 4px;
}

/* =============================================================
   SOLD BADGE
   ============================================================= */

.vv-sp__sold-badge-container {
	margin-bottom: 12px;
}

.vv-sp__sold-badge {
	display: inline-block;
	background: #e8001c;
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* =============================================================
   STOCK NUMBER
   ============================================================= */

.vv-sp__stock {
	font-size: 0.82rem;
	color: #888;
	margin: 0 0 10px;
	font-weight: 400;
}

.vv-sp__stock strong {
	font-weight: 600;
	color: #555;
}

/* =============================================================
   PRICE BLOCK
   ============================================================= */

.vv-sp__price-block {
	margin-bottom: 10px;
}

.vv-sp__full-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.vv-sp__full-price {
	font-size: 2rem;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.2;
	font-family: inherit;
}

/* Override WooCommerce price HTML inside our full price span */
.vv-sp__full-price .woocommerce-Price-amount,
.vv-sp__full-price ins .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.vv-sp__full-price ins {
	text-decoration: none;
}

.vv-sp__vat-label {
	font-size: 0.78rem;
	color: #888;
	font-weight: 400;
	white-space: nowrap;
}

.vv-sp__monthly-price {
	font-size: 1.15rem;
	font-weight: 700;
	color: #e8001c;
}

/* =============================================================
   ODOMETER ROW
   ============================================================= */

.vv-sp__odometer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
	padding: 8px 0;
	margin-bottom: 12px;
}

.vv-sp__odometer-label {
	font-size: 0.82rem;
	color: #888;
	font-weight: 400;
}

.vv-sp__odometer-value {
	font-size: 0.9rem;
	font-weight: 700;
	color: #1a1a1a;
}

/* =============================================================
   VIEWERS BADGE
   ============================================================= */

.vv-sp__viewers {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: #555;
	margin-bottom: 12px;
	background: #f8f8f8;
	border-radius: 6px;
	padding: 6px 10px;
	width: fit-content;
}

.vv-sp__viewers svg {
	flex-shrink: 0;
	color: #e8001c;
}

#vv-sp-viewer-count {
	font-weight: 700;
	color: #1a1a1a;
}

/* =============================================================
   PRIMARY CTA — BOOK TEST DRIVE
   ============================================================= */

.vv-sp__cta-primary {
	display: block;
	width: 100%;
	text-align: center;
	background: #e8001c;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 8px;
	text-decoration: none;
	border: none !important;
	outline: none !important;
	transition: background 0.2s ease, transform 0.15s ease;
	margin-bottom: 12px;
	letter-spacing: 0.01em;
}

.vv-sp__cta-primary:hover {
	background: #b80016;
	color: #fff;
	transform: translateY(-1px);
}

.vv-sp__cta-primary--sold {
	background: #718096 !important;
	color: #ffffff !important;
	border: 2px solid rgba(255, 255, 255, 0.1) !important;
	cursor: not-allowed;
	pointer-events: none;
	transform: none !important;
}

/* =============================================================
   SECONDARY CTAs — CALL US | BUY THIS CAR
   ============================================================= */

.vv-sp__cta-row {
	display: flex;
	width: 100%;
}

.vv-sp__cta-secondary {
	flex: 1;
	width: 100%;
	text-align: center;
	padding: 11px 16px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #333;
}

.vv-sp__cta-secondary--call {
	width: 100%;
	border-radius: 6px;
	border: 1px solid #ddd;
}

.vv-sp__cta-secondary:hover {
	background: #f5f5f5;
	color: #111;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 768px) {
	.vv-sp__full-price {
		font-size: 1.6rem;
	}

	.vv-sp__monthly-price {
		font-size: 1rem;
	}

	.vv-sp__cta-primary {
		font-size: 0.88rem;
		padding: 12px 18px;
	}
}/* =============================================================
   EMBEDDED EMI CALCULATOR (SINGLE PRODUCT SUMMARY)
   ============================================================= */

.vv-sp-calc {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eeeeee;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.vv-sp-calc__header {
	display: flex;
	flex-direction: column;
}

.vv-sp-calc__title {
	font-size: 1rem;
	font-weight: 700;
	color: #111111;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Fields: Downpayment */
.vv-sp-calc__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vv-sp-calc__field-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.vv-sp-calc__field-header label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #666666;
	margin: 0;
}

.vv-sp-calc__field-value {
	font-size: 0.85rem;
	font-weight: 700;
	color: #111111;
}

.vv-sp-calc__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: #e2e2e2;
	border-radius: 10px;
	outline: none;
	margin: 4px 0 6px 0;
}

.vv-sp-calc__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e8001c;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(232, 0, 28, 0.3);
	transition: transform 0.15s ease;
}

.vv-sp-calc__slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

/* Compact Result Box */
.vv-sp-calc__result-box {
	background: #f8f9fa;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vv-sp-calc__result-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.vv-sp-calc__result-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: #888888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vv-sp-calc__result-value-wrap {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.vv-sp-calc__result-value {
	font-size: 1.35rem;
	font-weight: 900;
	color: #111111;
	line-height: 1;
	letter-spacing: -0.02em;
}

.vv-sp-calc__result-sub {
	font-size: 0.75rem;
	color: #777777;
}

.vv-sp-calc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	width: 100%;
	border-top: 1px solid #eef0f2;
	padding-top: 8px;
}

.vv-sp-calc__grid-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 1px;
}

.vv-sp-calc__grid-label {
	font-size: 0.68rem;
	color: #888888;
	font-weight: 500;
}

.vv-sp-calc__grid-value {
	font-size: 0.8rem;
	font-weight: 700;
	color: #111111;
}

.vv-sp-calc__footer-row {
	display: flex;
	width: 100%;
	margin-top: 6px;
}

.vv-sp-calc__btn-small {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #e8001c;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.82rem;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none !important;
	box-shadow: 0 3px 10px rgba(232, 0, 28, 0.2);
	transition: background 0.2s ease, transform 0.15s ease;
	box-sizing: border-box;
}

.vv-sp-calc__btn-small:hover {
	background: #c40016;
	transform: translateY(-1px);
}



/* =============================================================
   PREMIUM SECTIONS CONTAINER (Car Overview, Key Features, About)
   ============================================================= */

.vv-sp-sections {
	background: #ffffff;
	border-radius: 30px;
	padding: 40px 44px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	border: 1px solid #f2f2f2;
	margin: 20px 0 40px;
	width: 100%;
}

.vv-sp-sections > * + * {
	margin-top: 48px;
}

.vv-sp-section__title {
	font-size: 1.65rem;
	font-weight: 700;
	color: #111111;
	margin: 0 0 24px;
	letter-spacing: -0.02em;
}

.vv-sp-section__title--cursive {
	font-family: 'Dancing Script', cursive !important;
	font-size: 2.1rem !important;
	font-weight: 700 !important;
	color: #111111 !important;
	letter-spacing: 0 !important;
}

/* ── Car Overview ──────────────────────────────────────────── */

.vv-sp-overview__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}


.vv-sp-overview__card {
	background: #f7f8fa;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px 12px;
	min-height: 145px;
	width: 145px;
	flex: 0 0 145px;
	text-align: center;
	box-sizing: border-box;
}

.vv-sp-overview__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
	color: #fff;
}

.vv-sp-overview__icon--year,
.vv-sp-overview__icon--specs {
	background: #10b981;
}

.vv-sp-overview__icon--fuel {
	background: #f59e0b;
}

.vv-sp-overview__icon--transmission {
	background: #8b5cf6;
}

.vv-sp-overview__icon--drive_type {
	background: #ec4899;
}

.vv-sp-overview__icon--exterior_color {
	background: #3b82f6;
}

.vv-sp-overview__icon--interior_color {
	background: #14b8a6;
}

.vv-sp-overview__icon--mileage,
.vv-sp-overview__icon--cylinders {
	background: #06b6d4;
}

.vv-sp-overview__icon--warranty,
.vv-sp-overview__icon--service_contract {
	background: #10b981;
}

.vv-sp-overview__label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vv-sp-overview__value {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.3;
}

/* ── Key Features ──────────────────────────────────────────── */

.vv-sp-features__container {
	background: #f7f8fa;
	border-radius: 20px;
	padding: 28px 30px;
}

.vv-sp-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 28px;
}

.vv-sp-features__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vv-sp-features__dot {
	color: #e8001c;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.vv-sp-features__text {
	font-size: 0.92rem;
	color: #2a2a2a;
	font-weight: 500;
	line-height: 1.4;
}

/* ── About ─────────────────────────────────────────────────── */

.vv-sp-about {
	width: 100%;
}

.vv-sp-about__content {
	width: 100%;
	max-width: 100%;
	font-size: 1.02rem;
	line-height: 1.8;
	color: #444;
}

.vv-sp-about__content p {
	margin: 0 0 1.2em;
}

.vv-sp-about__content ul,
.vv-sp-about__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.6em;
}

.vv-sp-about__content li {
	margin-bottom: 0.4em;
}

.vv-sp-about__content strong,
.vv-sp-about__content b {
	font-weight: 700;
	color: #222;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.vv-sp-overview__card {
		flex: 1 1 calc(33.33% - 12px) !important;
		max-width: calc(33.33% - 12px) !important;
	}

	.vv-sp-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.vv-sp-sections {
		padding: 30px 24px;
		border-radius: 22px;
		margin: 36px 0 30px;
	}

	.vv-sp-sections > * + * {
		margin-top: 36px;
	}

	.vv-sp-section__title {
		font-size: 1.35rem;
		margin-bottom: 18px;
	}

	.vv-sp-overview__card {
		min-height: 140px;
		padding: 16px 10px;
		border-radius: 16px;
		flex: 1 1 calc(33.33% - 10px) !important;
		max-width: calc(33.33% - 10px) !important;
	}

	.vv-sp-overview__icon {
		width: 42px;
		height: 42px;
	}

	.vv-sp-overview__icon svg {
		width: 18px;
		height: 18px;
	}

	.vv-sp-features__container {
		padding: 22px 20px;
		border-radius: 16px;
	}

	.vv-sp-features__grid {
		gap: 12px 20px;
	}
}

@media (max-width: 540px) {
	.vv-sp-sections {
		padding: 24px 18px;
		border-radius: 18px;
		margin: 28px 0 24px;
	}

	.vv-sp-sections > * + * {
		margin-top: 28px;
	}

	.vv-sp-section__title {
		font-size: 1.2rem;
		margin-bottom: 14px;
	}

	.vv-sp-overview__card {
		min-height: 120px;
		padding: 14px 8px;
		border-radius: 14px;
		gap: 4px;
		flex: 1 1 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
	}

	.vv-sp-overview__icon {
		width: 36px;
		height: 36px;
	}

	.vv-sp-overview__icon svg {
		width: 16px;
		height: 16px;
	}

	.vv-sp-overview__label {
		font-size: 0.7rem;
	}

	.vv-sp-overview__value {
		font-size: 0.88rem;
	}

	.vv-sp-features__container {
		padding: 18px 16px;
	}

	.vv-sp-features__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.vv-sp-features__text {
		font-size: 0.88rem;
	}

	.vv-sp-about__content {
		font-size: 0.95rem;
		line-height: 1.7;
	}
}

/* =============================================================
   IMAGE LIGHTBOX
   ============================================================= */

.vv-sp-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vv-sp-lightbox.is-active {
	opacity: 1;
	visibility: visible;
}

.vv-sp-lightbox__content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vv-sp-lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.vv-sp-lightbox__close {
	position: absolute;
	top: -40px;
	right: 0;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 28px;
	font-weight: 300;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	line-height: 1;
	padding: 0;
}

.vv-sp-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
	.vv-sp-lightbox__close {
		top: -50px;
		right: 10px;
	}

	.vv-sp-lightbox__img {
		max-height: 80vh;
	}
}

/* =============================================================
   SINGLE PRODUCT — STICKY SUMMARY & GALLERY LAYOUT (REBUILT)
   ============================================================= */

/* Force global border box sizing on our custom components to prevent any horizontal overflow */
.vv-sp,
.vv-emi-calculator,
.vv-emi-calculator__container,
.vv-sp-sections,
.vv-sp-overview,
.vv-sp-features,
.vv-sp-about,
.single-product-main-image,
.woocommerce-product-gallery,
.vv-sp-inspection,
.vv-sp-inspection__card,
.vv-sp-inspection__details,
.vv-sp-inspection__report-details {
	box-sizing: border-box !important;
}

/* Ensure no horizontal page scroll on mobile */
html,
body.single-product {
	max-width: 100% !important;
	overflow-x: hidden !important;
}

@media (min-width: 992px) {
	.single-product div.product,
	.single-product .product {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		gap: 0 !important;
		position: relative !important;
		width: 100% !important;
	}

	/* ── Gallery Column (Left) ─────────────────────────────────── */
	.single-product div.product div.images,
	.single-product .product div.images,
	.single-product div.product .single-product-main-image,
	.single-product div.product div.single-product-main-image,
	.single-product .single-product-main-image {
		flex: 0 0 63% !important;
		width: 63% !important;
		max-width: 63% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
		float: left !important;
	}

	/* Inner Gallery Wrapper — fills 100% of the parent column */
	.single-product .woocommerce-product-gallery,
	.single-product div.product .single-product-main-image .woocommerce-product-gallery,
	.single-product div.product div.images .woocommerce-product-gallery {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
		float: none !important;
		overflow: hidden !important;
	}

	/* Aspect-ratio wrapper approach — padding-top: 75% = 4:3 ratio */
	/* Flickity JS sets inline height on .flickity-viewport which we cannot override with CSS. */
	/* Solution: give .product-slider a fixed padding-top height, then position the viewport absolutely inside. */
	.single-product .product-slider {
		position: relative !important;
		width: 100% !important;
		padding-top: 75% !important; /* 4:3 ratio */
		height: 0 !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		margin: 0 !important;
		max-width: 100% !important;
	}

	.single-product .product-slider .slider,
	.single-product .product-slider .flickity-viewport {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		overflow: hidden !important;
		border-radius: 16px !important;
		max-width: 100% !important;
	}

	/* Flickity prev/next arrows — position outside the clipped viewport */
	.single-product .product-slider .flickity-prev-next-button {
		z-index: 10 !important;
	}

	/* Ensure Flickity slider and slides fill the viewport height */
	.single-product .flickity-slider,
	.single-product .product-slider .slide,
	.single-product .woocommerce-product-gallery__image img,
	.single-product .woocommerce-product-gallery__image .zoomImg,
	.single-product .woocommerce-product-gallery figure img,
	.single-product .product-slider .flickity-viewport img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 4 / 3 !important;
		object-fit: cover !important;
		border-radius: 16px !important;
		box-sizing: border-box;
		display: block !important;
	}

	.single-product .woocommerce-product-gallery__image {
		overflow: hidden;
		border-radius: 16px;
		margin-bottom: 12px;
		width: 100% !important;
	}

	/* ── Hide Duplicate WooCommerce Default Thumbnail Navigation ── */
	.single-product .woocommerce-product-gallery ol.flex-control-nav,
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		display: none !important;
	}

	/* ── Gallery Thumbnails — Strict 4:3 Aspect Ratio Cards & Non-Clipped Navigation Arrows ── */
	.single-product .product-thumbs {
		margin-top: 14px !important;
		width: 100% !important;
		position: relative !important;
		padding: 0 40px !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	.single-product .product-thumbs .flickity-viewport {
		overflow: hidden !important;
		border-radius: 8px !important;
	}

	/* Style each thumbnail item with strict 4:3 aspect ratio (96px x 72px) */
	.single-product .product-thumbs .slide.thumb,
	.single-product .product-thumbs .thumb {
		cursor: pointer !important;
		margin-right: 10px !important;
		width: 96px !important;
		height: 72px !important;
		flex: 0 0 96px !important;
		min-width: 96px !important;
		max-width: 96px !important;
		aspect-ratio: 4 / 3 !important;
		box-sizing: border-box !important;
	}

	.single-product .product-thumbs .slide.thumb .thumb-inner {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
		line-height: 0 !important;
		aspect-ratio: 4 / 3 !important;
		border-radius: 8px !important;
		overflow: hidden !important;
	}

	.single-product .product-thumbs .thumb-inner img,
	.single-product .product-thumbs .slide.thumb img {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 4 / 3 !important;
		object-fit: cover !important;
		border-radius: 8px !important;
		border: 2px solid transparent !important;
		background: #f0f0f0 !important;
		transition: all 0.2s ease !important;
		opacity: 0.85 !important;
		display: block !important;
		box-sizing: border-box !important;
	}

	.single-product .product-thumbs .slide.thumb.active .thumb-inner img,
	.single-product .product-thumbs .slide.thumb.is-nav-selected .thumb-inner img,
	.single-product .product-thumbs .slide.thumb:hover .thumb-inner img {
		opacity: 1 !important;
		border-color: #e8001c !important;
		box-shadow: 0 2px 8px rgba(232, 0, 28, 0.15) !important;
	}

	/* Style Flickity prev/next arrows on thumbnail carousel — positioned safely inside container */
	.single-product .product-thumbs .flickity-prev-next-button {
		width: 28px !important;
		height: 28px !important;
		border-radius: 50% !important;
		background: #ffffff !important;
		border: 1px solid #e2e2e2 !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 10 !important;
		opacity: 0.95 !important;
	}

	.single-product .product-thumbs .flickity-prev-next-button:hover {
		background: #e8001c !important;
		border-color: #e8001c !important;
		opacity: 1 !important;
	}

	.single-product .product-thumbs .flickity-prev-next-button svg path {
		fill: #333333 !important;
	}

	.single-product .product-thumbs .flickity-prev-next-button:hover svg path {
		fill: #ffffff !important;
	}

	.single-product .product-thumbs .flickity-prev-next-button.previous {
		left: 6px !important;
	}

	.single-product .product-thumbs .flickity-prev-next-button.next {
		right: 6px !important;
	}

	/* ── Summary Column (Right Side - Sticky Scroll) ────────── */
	.single-product div.product div.summary,
	.single-product .summary.entry-summary,
	.single-product div.product .product-summary,
	.single-product div.product .col.col_last,
	.single-product div.product .span_7.col,
	.single-product .product-summary {
		flex: 0 0 32% !important;
		width: 32% !important;
		max-width: 32% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 0 0 40px !important; /* Physical breathing space separating text from image */
		position: sticky !important;
		top: 110px !important;
		align-self: flex-start !important;
		z-index: 10 !important;
		float: right !important;
	}

	/* Ensure sticky container scrolling works by resetting overflow on parents */
	.single-product #ajax-content-wrap,
	.single-product .container-wrap,
	.single-product .container.main-content,
	.single-product div.product {
		overflow: visible !important;
	}
}

/* ── Hide Reviews Section Completely ─────────────────────── */
.vv-sp-reviews,
#reviews,
.woocommerce-Reviews,
#comments {
	display: none !important;
}

/* ── Redundant Description Tab Cleanup ──────────────────── */
.woocommerce-tabs,
.wc-tabs-wrapper,
#tab-description,
.description_tab {
	display: none !important;
}

/* ── Responsive adjustments for Sticky & Gallery ──────────── */
@media (min-width: 992px) and (max-width: 1199px) {
	.single-product div.product div.images,
	.single-product div.product .single-product-main-image,
	.single-product .single-product-main-image {
		flex: 0 0 60% !important;
		width: 60% !important;
		max-width: 60% !important;
	}

	.single-product div.product div.summary,
	.single-product .summary.entry-summary {
		flex: 0 0 36% !important;
		width: 36% !important;
		max-width: 36% !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.single-product div.product div.images,
	.single-product div.product .single-product-main-image,
	.single-product .single-product-main-image {
		flex: 0 0 56% !important;
		width: 56% !important;
		max-width: 56% !important;
	}

	.single-product div.product div.summary,
	.single-product .summary.entry-summary {
		flex: 0 0 40% !important;
		width: 40% !important;
		max-width: 40% !important;
	}
}

@media (max-width: 767px) {
	.single-product div.product,
	.single-product .product {
		flex-direction: column !important;
		gap: 24px !important;
		box-sizing: border-box !important;
	}

	/* Reset summary column left padding, margins and float on mobile */
	.single-product div.product div.summary,
	.single-product .summary.entry-summary,
	.single-product div.product .product-summary,
	.single-product div.product .col.col_last,
	.single-product div.product .span_7.col,
	.single-product .product-summary {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		padding: 0 !important;
		margin: 0 !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	/* Prevent side spacing gaps around main product image on mobile and reset float */
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product div.images,
	.single-product div.product .single-product-main-image,
	.single-product .single-product-main-image {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		padding: 0 !important;
		margin: 0 0 16px 0 !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	.single-product .woocommerce-product-gallery figure,
	.single-product .woocommerce-product-gallery__wrapper,
	.single-product .woocommerce-product-gallery__image,
	.single-product .woocommerce-product-gallery__image a,
	.single-product .woocommerce-product-gallery .flex-viewport,
	.single-product .product-slider,
	.single-product .product-slider .slider,
	.single-product .product-slider .flickity-viewport {
		border-radius: 12px !important;
	}

	/* Proportional thumbnail sizes on mobile */
	.single-product .product-thumbs .slide.thumb,
	.single-product .product-thumbs .thumb-inner {
		width: 70px !important;
		height: 52px !important;
	}
	
	.single-product .product-thumbs,
	.single-product .product-thumbs .flickity-viewport,
	.single-product .product-thumbs .flickity-slider {
		height: 52px !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}

	/* Spacing adjustments on sections for mobile */
	.vv-sp-sections {
		padding: 24px 16px !important;
		border-radius: 16px !important;
		margin: 30px 0 20px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.vv-sp-overview__grid {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
		justify-content: center !important;
		gap: 12px !important;
	}
}

/* ── EMI Calculator mobile scale optimizations ──────────────── */
@media (max-width: 767px) {
	.vv-emi-calculator {
		margin: 30px 0 20px !important;
		width: 100% !important;
	}

	.vv-emi-calculator__container {
		padding: 24px 16px !important;
		border-radius: 16px !important;
	}
	
	.vv-emi-calculator__title {
		font-size: 1.35rem !important;
		text-align: center !important;
		line-height: 1.3 !important;
	}

	.vv-emi-calculator__header {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 16px !important;
		margin-bottom: 24px !important;
		padding-bottom: 16px !important;
	}
	
	.vv-emi-calculator__promo {
		max-width: 100% !important;
		width: 100% !important;
		justify-content: center !important;
		padding: 10px 16px !important;
		box-sizing: border-box !important;
	}

	.vv-emi-calculator__promo-badge {
		font-size: 1.85rem !important;
		margin-right: 12px !important;
	}

	.vv-emi-calculator__promo-text strong {
		font-size: 0.88rem !important;
	}

	.vv-emi-calculator__promo-text span {
		font-size: 0.8rem !important;
	}

	.vv-emi-calculator__body {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.vv-emi-calculator__inputs {
		gap: 24px !important;
	}

	.vv-emi-calculator__field-header {
		margin-bottom: 10px !important;
	}

	.vv-emi-calculator__field-header label {
		font-size: 0.88rem !important;
	}

	.vv-emi-calculator__field-value {
		font-size: 0.95rem !important;
	}

	.vv-emi-calculator__field-label {
		font-size: 0.88rem !important;
		margin-bottom: 12px !important;
	}

	.vv-emi-calculator__tenures {
		gap: 6px !important;
		justify-content: space-between !important;
	}
	
	.vv-emi-calculator__tenure-btn {
		width: 44px !important;
		height: 44px !important;
		font-size: 0.88rem !important;
		border-radius: 10px !important;
	}
	
	.vv-emi-calculator__field-note {
		font-size: 0.78rem !important;
		margin-top: 8px !important;
	}

	.vv-emi-calculator__summary {
		padding: 20px 16px !important;
		border-radius: 16px !important;
	}

	.vv-emi-calculator__result-box {
		margin-bottom: 20px !important;
	}

	.vv-emi-calculator__result-label {
		font-size: 0.78rem !important;
	}

	.vv-emi-calculator__result-value {
		font-size: 1.85rem !important;
	}

	.vv-emi-calculator__result-sub {
		font-size: 0.78rem !important;
	}
	
	.vv-emi-calculator__grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		margin-bottom: 20px !important;
	}
	
	.vv-emi-calculator__grid-item {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-bottom: 1px dashed #eef0f2 !important;
		padding-bottom: 10px !important;
		margin-bottom: 2px !important;
		text-align: right !important;
	}

	.vv-emi-calculator__grid-label {
		font-size: 0.85rem !important;
		text-align: left !important;
		color: #666 !important;
	}

	.vv-emi-calculator__grid-value {
		font-size: 0.95rem !important;
		font-weight: 700 !important;
	}
	
	.vv-emi-calculator__grid-item:last-child {
		border-bottom: none !important;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}

	.vv-emi-calculator__cta-btn {
		padding: 14px 20px !important;
		font-size: 0.95rem !important;
		border-radius: 12px !important;
	}
}

/* =============================================================
   CAR INSPECTION REPORT SECTION
   ============================================================= */

.vv-sp-inspection {
	margin: 50px 0 30px;
	width: 100%;
}

.vv-sp-inspection__card {
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
	display: flex;
	align-items: stretch;
	overflow: hidden;
	width: 100%;
}

/* Left: Green Banner Image */
.vv-sp-inspection__banner {
	flex: 0 0 42%;
	width: 42%;
	position: relative;
	background: #1a4220; /* Deep fallback green */
}

.vv-sp-inspection__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right: Key Info and Details */
.vv-sp-inspection__details {
	flex: 1;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.vv-sp-inspection__badges {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.vv-sp-inspection__badge-item {
	background: #f7f8fa;
	border-radius: 14px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
}

.vv-sp-inspection__badge-icon {
	width: 22px;
	height: 22px;
	background: #10b981;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}

.vv-sp-inspection__badge-text {
	font-size: 0.95rem;
	font-weight: 600;
	color: #1a1a1a;
}

.vv-sp-inspection__description {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444444;
	margin: 0 0 28px;
}

.vv-sp-inspection__trigger {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #e8001c;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.vv-sp-inspection__trigger svg {
	transition: transform 0.2s ease;
}

.vv-sp-inspection__trigger:hover {
	opacity: 0.85;
}

.vv-sp-inspection__trigger:hover svg {
	transform: translateX(3px);
}

/* Modal popup container styles */
.vv-sp-inspection__modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	backdrop-filter: blur(8px) !important;
	display: none; /* Hidden by default; controlled by jQuery fadeIn/fadeOut */
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999999 !important; /* Ensure z-index is higher than theme navigation bar */
}

.vv-sp-inspection__modal-content {
	background: #ffffff !important;
	width: 90% !important;
	max-width: 900px !important;
	max-height: 85vh !important;
	border-radius: 24px !important;
	padding: 40px !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important; /* Isolate scroll chain */
	-webkit-overflow-scrolling: touch !important; /* Smooth iOS momentum scrolling */
	position: relative !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
	border: 1px solid #eaeaea !important;
	animation: vvModalFadeIn 0.3s ease;
}

@keyframes vvModalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.vv-sp-inspection__modal-close {
	position: absolute !important;
	top: 24px !important;
	right: 24px !important;
	font-size: 36px !important;
	line-height: 1 !important;
	color: #999999 !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 4px 8px !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
	z-index: 1000 !important;
}

.vv-sp-inspection__modal-close:hover {
	color: #e8001c !important;
	transform: scale(1.1) !important;
}

.vv-sp-inspection__report-header {
	margin-bottom: 30px;
	background: #f7f8fa;
	border-radius: 20px;
	padding: 24px;
}

.vv-sp-inspection__report-car-info {
	display: flex;
	align-items: center;
	gap: 20px;
}

.vv-sp-inspection__report-car-info img {
	width: 110px;
	height: 82px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid #eaeaea;
	background: #ffffff;
}

.vv-sp-inspection__car-meta h3 {
	font-size: 1.35rem;
	font-weight: 700;
	color: #000000;
	margin: 0 0 6px;
}

.vv-sp-inspection__car-meta > span {
	font-size: 0.88rem;
	color: #666666;
	display: block;
	margin-bottom: 10px;
}

.vv-sp-inspection__meta-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.vv-badge {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
}

.vv-badge--passed {
	background: #eefdf5;
	color: #10b981;
}

.vv-badge--certified {
	background: #ebf5ff;
	color: #0066cc;
}

.vv-sp-inspection__checklist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.vv-sp-inspection__group {
	margin-bottom: 32px;
}

.vv-sp-inspection__group h4 {
	font-size: 1.05rem;
	font-weight: 700;
	color: #000000;
	margin: 0 0 16px;
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 8px;
}

.vv-sp-inspection__group ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.vv-sp-inspection__group li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px dashed #f5f5f5;
	font-size: 0.9rem;
	color: #333333;
}

.vv-sp-inspection__group li:last-child {
	border-bottom: none;
}

.vv-sp-inspection__group li .status {
	font-size: 0.82rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
}

.vv-sp-inspection__group li .status.passed {
	color: #10b981;
}

/* Responsive Overrides */
@media (max-width: 767px) {
	.vv-sp-inspection {
		margin: 30px 0 20px !important;
	}

	.vv-sp-inspection__card {
		flex-direction: column !important;
		border-radius: 16px !important;
	}

	.vv-sp-inspection__banner {
		flex: 0 0 auto !important;
		width: 100% !important;
		height: 200px !important;
	}

	.vv-sp-inspection__details {
		padding: 24px 16px !important;
		width: 100% !important;
	}

	.vv-sp-inspection__badges {
		gap: 12px !important;
		margin-bottom: 20px !important;
	}

	.vv-sp-inspection__badge-item {
		padding: 10px 12px !important;
		border-radius: 10px !important;
	}

	.vv-sp-inspection__badge-text {
		font-size: 0.88rem !important;
	}

	.vv-sp-inspection__description {
		font-size: 0.88rem !important;
		margin-bottom: 20px !important;
	}

	.vv-sp-inspection__modal-content {
		width: 95% !important;
		max-height: 90vh !important;
		padding: 24px 16px !important;
		border-radius: 16px !important;
	}

	.vv-sp-inspection__modal-close {
		top: 12px !important;
		right: 12px !important;
		font-size: 28px !important;
	}

	.vv-sp-inspection__report-header {
		padding: 16px !important;
		margin-bottom: 20px !important;
	}

	.vv-sp-inspection__report-car-info {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	.vv-sp-inspection__report-car-info img {
		width: 100px !important;
		height: 75px !important;
	}

	.vv-sp-inspection__car-meta h3 {
		font-size: 1.2rem !important;
	}

	.vv-sp-inspection__checklist-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.vv-sp-inspection__group {
		margin-bottom: 24px !important;
	}

	.vv-sp-inspection__group h4 {
		font-size: 0.98rem !important;
		margin-bottom: 12px !important;
	}

	.vv-sp-inspection__group li {
		font-size: 0.85rem !important;
		padding: 8px 0 !important;
	}
}

/* =============================================================
   RELATED PRODUCTS CAROUSEL — Single Product Page
   ============================================================= */

.vv-sp-related-section,
body.single-product > .vv-sp-related-section,
body.single-product [role="main"] > .vv-sp-related-section,
body.single-product #main > .vv-sp-related-section {
	width: 100% !important;
	max-width: 100% !important;
	padding: 60px 0 30px !important;
	border-top: 1px solid #ededf0;
	margin-top: 40px !important;
	background: #ffffff !important;
	position: relative;
	z-index: 10;
}

.vv-sp-related-section .vv-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}

.vv-sp-related__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 16px;
}

.vv-sp-related__eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #e8001c;
	margin-bottom: 6px;
}

.vv-sp-related__title {
	font-size: clamp(1.4rem, 2.5vw, 1.95rem);
	font-weight: 800;
	color: #0f1013;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0;
}

.vv-sp-related__see-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 700;
	color: #0f1013;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 20px;
	background: #f4f4f6;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.vv-sp-related__see-all:hover {
	background: #0f1013;
	color: #fff;
	transform: translateX(2px);
}

.vv-sp-related__see-all svg {
	transition: transform 0.2s ease;
}

.vv-sp-related__see-all:hover svg {
	transform: translateX(3px);
}

.vv-sp-related__carousel-wrapper {
	position: relative;
	width: 100%;
}

.vv-sp-related__track {
	display: flex !important;
	gap: 18px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 10px 4px 24px !important;
	margin: 0 !important;
	list-style: none !important;
}

.vv-sp-related__track::-webkit-scrollbar {
	display: none !important;
}

.vv-sp-related__track .vv-product-card {
	flex: 0 0 290px !important;
	width: 290px !important;
	max-width: 290px !important;
	min-width: 290px !important;
	scroll-snap-align: start !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.vv-sp-related-section {
		padding: 40px 0 20px !important;
		margin-top: 25px !important;
	}

	.vv-sp-related-section .vv-container {
		padding: 0 16px;
	}

	.vv-sp-related__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.vv-sp-related__track {
		gap: 12px !important;
		padding: 6px 0 18px !important;
	}

	.vv-sp-related__track .vv-product-card {
		flex: 0 0 260px !important;
		width: 260px !important;
		max-width: 260px !important;
		min-width: 260px !important;
	}
}

/* Planning To Sell — Full Width on Single Product (JS moves it outside WC container) */
.single-product .vv-pts-section,
body.single-product > .vv-pts-section,
body.single-product [role="main"] > .vv-pts-section,
body.single-product #main > .vv-pts-section {
	display: block !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	left: auto !important;
	right: auto !important;
	position: relative !important;
	box-sizing: border-box !important;
}

.single-product .vv-cars-now-text-section {
	display: none !important;
}

/* Planning To Sell section on single product page — Exact Homepage Measurements */
.single-product .vv-pts__number {
	font-size: clamp(11rem, 24vw, 18rem) !important;
	font-weight: 900 !important;
	line-height: 0.85 !important;
}

.single-product .vv-pts__car-image-wrap {
	height: 90% !important;
	max-height: 220px !important;
}

.single-product .vv-pts__car-img {
	height: 100% !important;
	max-height: none !important;
}