/**
 * Vehicle Pages — Warm Cinematic Design System (light/dark alternating)
 *
 * Styles for:
 * - Vehicle icon strip ([mhr_vehicle_icons] shortcode)
 * - Vehicle card grid ([mhr_vehicle_grid] shortcode)
 * - Specification tables (HTML <table> in Elementor Text Editor)
 * - Vehicle detail page layout
 * - Related content cards
 *
 * Uses CSS custom properties from global-styles.css (:root tokens).
 */

/* =========================================================================
 * 1. VEHICLE ICON STRIP — Quick-reference icons on detail pages
 * ========================================================================= */

.vehicle-icons-strip {
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 48px auto 48px;
	padding: 32px 24px;
	background: var(--light-card, #FFFFFF);
	border: 1px solid var(--light-border, rgba(44, 36, 22, 0.08));
	border-radius: 12px;
	box-shadow: var(--shadow-warm, 0 8px 32px rgba(44, 36, 22, 0.08));
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vehicle-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px 12px;
	min-width: 0;
	flex-shrink: 0;
}

.vehicle-icon-item__icon {
	color: #9A7D45;
	margin-bottom: 12px;
	line-height: 0;
}

.vehicle-icon-item__icon svg {
	width: 28px;
	height: 28px;
}

.vehicle-icon-item__value {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--light-text, #2C2416);
	margin-bottom: 4px;
	line-height: 1.3;
	white-space: nowrap;
}

.vehicle-icon-item__label {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--light-muted, #7A6F63);
	line-height: 1.2;
}


/* =========================================================================
 * 2. VEHICLE CARD GRID — Listing page and homepage cards
 * ========================================================================= */

.vehicle-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * Homepage overrides — .page-home-new * { margin: 0; padding: 0 } in
 * homepage-cinematic.css resets ALL margin/padding on the homepage.
 * These rules use .page-home-new prefix (specificity 0-2-0) to beat
 * the wildcard reset (0-1-0) and restore intended vehicle card spacing.
 * ------------------------------------------------------------------------- */

/* Section spacing — motorhomes section already has padding from
   .motorhomes { padding: 80px 24px }, matching original Elementor layout.
   No additional padding-top needed on .motorhomes-header. */
.page-home-new .vehicle-grid {
	margin: 0 auto;
}

/* Card content area — padding that creates internal spacing. */
.page-home-new .vehicle-card__content {
	padding: 28px 24px;
}

/* Description margin — space between text and specs. */
.page-home-new .vehicle-card__description {
	margin: 0 0 16px;
}

/* Specs row — margin-top: auto pushes specs + ctas to bottom of flex column,
   aligning across cards; margin-bottom spaces specs from CTA buttons. */
.page-home-new .vehicle-card__specs {
	margin-top: auto;
	margin-bottom: 20px;
}

/* Spec tags — internal padding for pill-shaped appearance. */
.page-home-new .vehicle-card__spec-tag {
	padding: 6px 12px;
}

/* CTA buttons — internal padding. */
.page-home-new .vehicle-card__btn {
	padding: 12px 24px;
}

/* Outline button text — must be cream on dark card background.
   Beats .page-home-new a { color: inherit } (0-1-1) and
   .elementor-kit-73 a (0-1-1) with our 0-2-0 specificity. */
.page-home-new .vehicle-card__btn--outline {
	color: var(--dark-text, #F5F0E8);
}
.page-home-new .vehicle-card__btn--outline:hover {
	border-color: var(--accent-gold, #C9A96E);
	color: var(--accent-gold, #C9A96E);
}

.vehicle-category-group {
	max-width: 1200px;
	margin: 0 auto 64px;
}

.vehicle-category-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--dark-text, #F5F0E8);
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--dark-border, rgba(201, 169, 110, 0.1));
}

.vehicle-card {
	background: var(--dark-card, #23201B);
	border: 1px solid var(--dark-border, rgba(201, 169, 110, 0.1));
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-card:hover {
	border-color: var(--accent-gold, #C9A96E);
	box-shadow: 0 12px 48px rgba(201, 169, 110, 0.15);
}

.vehicle-card__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #23201B;
}

.vehicle-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-card:hover .vehicle-card__image img {
	transform: scale(1.05);
}

.vehicle-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vehicle-card__placeholder {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--dark-muted, #9A9088);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.vehicle-card__content {
	padding: 28px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Specificity 0-2-0 to beat Elementor kit rule .elementor-kit-* h3 (0-1-1)
   which sets headings to the kit's primary color (near black). */
.vehicle-card .vehicle-card__title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--dark-text, #F5F0E8);
	margin: 0 0 8px;
	line-height: 1.3;
}

.vehicle-card .vehicle-card__title a {
	color: inherit;
	text-decoration: none;
}

.vehicle-card .vehicle-card__title a:hover {
	color: var(--accent-gold, #C9A96E);
}

.vehicle-card__description {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dark-muted, #9A9088);
	margin: 0 0 16px;
}

.vehicle-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	margin-top: auto; /* Push specs + ctas to bottom — aligns across cards with different description lengths */
}

.vehicle-card__spec-tag {
	display: inline-block;
	background: #23201B;
	color: var(--dark-text, #F5F0E8);
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
}

.vehicle-card__ctas {
	display: flex;
	gap: 12px;
}

.vehicle-card__btn {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 12px 24px;
	text-decoration: none;
	text-align: center;
	transition: background-color 300ms, color 300ms, border-color 300ms;
	flex: 1;
}

.vehicle-card__btn--outline {
	background: transparent;
	color: var(--dark-text, #F5F0E8);
	border: 1px solid rgba(201, 169, 110, 0.2);
}

.vehicle-card__btn--outline:hover {
	border-color: var(--accent-gold, #C9A96E);
	color: var(--accent-gold, #C9A96E);
}

.vehicle-card__btn--primary {
	background: var(--accent-gold, #C9A96E);
	color: var(--dark-bg, #1A1814);
	border: 1px solid var(--accent-gold, #C9A96E);
}

.vehicle-card__btn--primary:hover {
	background: var(--accent-hover, #B8944F);
	border-color: var(--accent-hover, #B8944F);
}


/* Vehicle grid footer — "View All Fleet" link below the card grid. */
.vehicle-grid-footer {
	text-align: center;
	margin-top: 48px;
}

.vehicle-grid-footer__link {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--accent-gold, #C9A96E);
	text-decoration: none;
	padding: 16px 40px;
	border: 1px solid rgba(201, 169, 110, 0.3);
	transition: border-color 300ms, background-color 300ms, color 300ms;
}

.vehicle-grid-footer__link:hover {
	border-color: var(--accent-gold, #C9A96E);
	background: rgba(201, 169, 110, 0.08);
}

/* Homepage override — restore margin killed by scoped reset.
   Bottom padding now comes from .motorhomes section (80px). */
.page-home-new .vehicle-grid-footer {
	margin-top: 48px;
}
.page-home-new .vehicle-grid-footer__link {
	padding: 16px 40px;
	color: var(--accent-gold, #C9A96E);
}

/* =========================================================================
 * 3. SPECIFICATION TABLES — HTML tables in Elementor Text Editor
 * ========================================================================= */

.vehicle-detail-page .spec-table-category {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--light-text, #2C2416);
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--light-border, rgba(44, 36, 22, 0.08));
}

/* Reset first category heading top margin. */
.spec-table-category:first-child {
	margin-top: 0;
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
	font-family: 'Inter', sans-serif;
}

.spec-table th,
.spec-table td {
	padding: 12px 16px;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	border: none;
}

.spec-table th {
	color: var(--light-muted, #7A6F63);
	font-weight: 400;
	width: 40%;
}

.spec-table td {
	color: var(--light-text, #2C2416);
	font-weight: 500;
}

/* Zebra striping — subtle alternating row background. */
.spec-table tr:nth-child(even) {
	background: rgba(44, 36, 22, 0.03);
}

.spec-table tr:hover {
	background: rgba(44, 36, 22, 0.05);
}

/* Insurance table header row — bolder styling for multi-column tables. */
.insurance-table thead th {
	color: var(--light-text, #2C2416);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--light-border, rgba(44, 36, 22, 0.08));
	width: auto;
}


/* =========================================================================
 * 4. VEHICLE DETAIL PAGE — Layout and section styling
 * ========================================================================= */

/* Vehicle detail page wrapper — light base matching homepage. */
.vehicle-detail-page {
	background: var(--light-bg, #FAF7F2);
	padding: 0;
}

/* Section container — max width + centered. */
.vehicle-detail-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* =========================================================================
 * HERO SECTION — Split layout: gallery left, info right (above the fold)
 * ========================================================================= */

.vd-hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	max-width: 100%;
	background: var(--light-bg, #FAF7F2);
}

/* ── Carousel ── */
/* Carousel — fixed 4:3 aspect ratio (matches phone landscape photos). */
.vd-carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dark-card, #23201B);
}

.vd-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* All slides are absolute — the active one just becomes visible. */
.vd-carousel__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 500ms ease;
}

.vd-carousel__slide--active {
	opacity: 1;
}

.vd-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Navigation arrows — specificity boost to override Elementor Kit button styles. */
.vehicle-detail-page .vd-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(26, 24, 20, 0.6);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #F5F0E8;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 300ms, transform 300ms;
	z-index: 2;
	box-shadow: none;
	padding: 0;
	line-height: 1;
}

.vehicle-detail-page .vd-carousel__btn:hover {
	background: rgba(26, 24, 20, 0.85);
	transform: translateY(-50%) scale(1.08);
}

.vd-carousel__btn--prev { left: 16px; }
.vd-carousel__btn--next { right: 16px; }

/* Edge shadows — hint that more images exist. */
.vd-carousel::before,
.vd-carousel::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 1;
	pointer-events: none;
}

.vd-carousel::before {
	left: 0;
	background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
}

.vd-carousel::after {
	right: 0;
	background: linear-gradient(to left, rgba(0,0,0,0.15), transparent);
}

/* Photo counter badge. */
.vd-carousel__counter {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: rgba(26, 24, 20, 0.7);
	backdrop-filter: blur(4px);
	color: #F5F0E8;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 20px;
	z-index: 2;
	letter-spacing: 1px;
}

/* ── Hero Info Panel (right side) ── */
.vd-hero__info {
	padding: 80px 48px 48px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vd-hero__eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #9A7D45;
	margin-bottom: 16px;
	display: block;
}

/* Specificity boost: override Elementor Kit h1 { color: #FFFFFF } */
.vehicle-detail-page .vd-hero__title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 48px;
	color: var(--light-text, #2C2416);
	margin: 0 0 28px;
	line-height: 1.15;
	overflow-wrap: break-word;
}

.vd-hero__description {
	margin-bottom: 32px;
}

.vd-hero__description p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: var(--light-muted, #7A6F63);
	margin-bottom: 16px;
}

/* CTA button base styles are in global-styles.css.
   Vehicle-specific overrides only: */
.vehicle-detail-page .vehicle-cta-btn {
	padding: 18px 40px;
	align-self: flex-start;
}

/* Booking action area — empty placeholder for future payment widget. */
#booking-action {
	min-height: 0;
	margin: 0 auto;
	max-width: 1200px;
}

/* ── Custom Tabs — light background ── */
.vehicle-tabs-section {
	padding-top: 16px;
	padding-bottom: 48px;
}

.vehicle-tabs__nav {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--light-border, rgba(44, 36, 22, 0.08));
	margin-bottom: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Specificity boost: override Elementor Kit button { background: gold, border-radius } */
.vehicle-detail-page .vehicle-tabs__tab {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--light-muted, #7A6F63);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 16px 24px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 300ms, border-color 300ms;
	box-shadow: none;
}

.vehicle-detail-page .vehicle-tabs__tab:hover {
	color: var(--light-text, #2C2416);
	background: transparent;
}

.vehicle-detail-page .vehicle-tabs__tab--active {
	color: var(--accent-gold, #C9A96E);
	border-bottom-color: var(--accent-gold, #C9A96E);
	background: transparent;
}

.vehicle-tabs__panel {
	padding: 32px 0;
	color: var(--light-muted, #7A6F63);
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.8;
}

.vehicle-tabs__panel[hidden] {
	display: none;
}

.vehicle-tabs__panel p {
	margin-bottom: 16px;
}

.vehicle-tabs__panel a {
	color: var(--accent-gold, #C9A96E);
	text-decoration: none;
}

.vehicle-tabs__panel a:hover {
	text-decoration: underline;
}


/* =========================================================================
 * 5. RELATED CONTENT CARDS — Bottom of detail page
 * ========================================================================= */

/* Related links — dark band before footer for contrast. */
.vehicle-detail-page .vehicle-detail-section:last-child {
	background: var(--dark-bg, #1A1814);
	max-width: none;
	padding: 64px 24px;
}

.related-links-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.related-link-card {
	display: block;
	background: var(--dark-card, #23201B);
	border: 1px solid var(--dark-border, rgba(201, 169, 110, 0.1));
	padding: 32px 24px;
	text-decoration: none;
	text-align: center;
	transition: border-color 300ms, transform 300ms;
}

.related-link-card:hover {
	border-color: var(--accent-gold, #C9A96E);
	transform: translateY(-4px);
}

.related-link-card__title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--dark-text, #F5F0E8);
	margin-bottom: 8px;
}

.related-link-card__desc {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--dark-muted, #9A9088);
	line-height: 1.5;
}

.related-link-card__arrow {
	display: inline-block;
	margin-top: 16px;
	color: var(--accent-gold, #C9A96E);
	font-size: 18px;
	transition: transform 300ms;
}

.related-link-card:hover .related-link-card__arrow {
	transform: translateX(4px);
}


/* =========================================================================
 * 6. LISTING PAGE — Minimum hire period notice
 * ========================================================================= */

.hire-period-notice {
	background: #23201B;
	border-left: 4px solid var(--accent-gold, #C9A96E);
	padding: 16px 20px;
	border-radius: 8px;
	margin-bottom: 40px;
	max-width: 1200px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--dark-text, #F5F0E8);
	line-height: 1.6;
}

.hire-period-notice strong {
	color: var(--dark-text, #F5F0E8);
}


/* =========================================================================
 * 7. RESPONSIVE — Tablet and mobile breakpoints
 * ========================================================================= */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
	.vehicle-icons-strip {
		padding: 24px 16px;
		gap: 4px;
	}

	.vehicle-icon-item {
		padding: 12px 8px;
	}

	.vehicle-icon-item__icon svg {
		width: 24px;
		height: 24px;
	}

	.vehicle-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.related-links-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.vd-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.vd-carousel {
		aspect-ratio: 4 / 3;
	}

	.vd-hero__info {
		padding: 40px 24px;
	}

	.vehicle-detail-page .vd-hero__title {
		font-size: 36px;
	}

	.vehicle-category-title {
		font-size: 26px;
	}
}

/* Mobile: < 768px */
@media (max-width: 767px) {
	.vehicle-icons-strip {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0;
		padding: 16px 12px;
		margin: 32px auto 32px;
	}

	.vehicle-icon-item {
		width: 25%;
		padding: 12px 4px;
	}

	.vehicle-icon-item__icon svg {
		width: 22px;
		height: 22px;
	}

	.vehicle-icon-item__value {
		font-size: 12px;
	}

	.vehicle-icon-item__label {
		font-size: 9px;
	}

	.vehicle-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.vehicle-card__content {
		padding: 20px 16px;
	}

	.vehicle-card__title {
		font-size: 20px;
	}

	.vehicle-card__ctas {
		flex-direction: column;
	}

	.vehicle-card__btn {
		width: 100%;
		text-align: center;
	}

	.related-links-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.related-link-card {
		padding: 24px 20px;
	}

	.vehicle-description-section h1 {
		font-size: 28px;
	}

	.vehicle-category-title {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.spec-table th,
	.spec-table td {
		padding: 10px 12px;
		font-size: 13px;
	}

	.spec-table th {
		width: 45%;
	}

	.vd-hero__info {
		padding: 32px 20px;
	}

	.vehicle-detail-page .vd-hero__title {
		font-size: 30px;
	}

	/* CTA button full-width on mobile */
	.vehicle-cta-btn {
		display: block;
		width: 100%;
		text-align: center;
	}

	.vehicle-detail-page .vd-carousel__btn {
		width: 40px;
		height: 40px;
	}

	.vd-carousel__btn--prev { left: 10px; }
	.vd-carousel__btn--next { right: 10px; }

	.vehicle-tabs__tab {
		font-size: 12px;
		padding: 12px 14px;
		letter-spacing: 0.5px;
	}

	.hire-period-notice {
		margin-bottom: 24px;
		padding: 12px 16px;
		font-size: 13px;
	}
}

/* Prevent horizontal scroll on very small screens. */
@media (max-width: 320px) {
	.vehicle-icon-item {
		width: 50%;
	}
}


/* =========================================================================
 * 8. VEHICLE LISTING PAGE — /motorhomes/ intro + grouped grid
 * ========================================================================= */

.vehicle-listing-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 24px 64px;
}

.vehicle-listing-intro {
	text-align: center;
	margin-bottom: 48px;
}

.vehicle-listing-intro h1 {
	font-family: var(--font-display, 'Playfair Display', serif);
	font-size: 42px;
	font-weight: 700;
	color: var(--light-heading, #1A1A1A);
	margin: 0 0 16px;
}

.vehicle-listing-intro p {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 17px;
	line-height: 1.7;
	color: var(--light-muted, #6B6B6B);
	max-width: 680px;
	margin: 0 auto;
}

.vehicle-category-group {
	margin-bottom: 56px;
}

.vehicle-category-title {
	font-family: var(--font-display, 'Playfair Display', serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--light-heading, #1A1A1A);
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--accent-gold, #C9A96E);
}

@media (max-width: 768px) {
	.vehicle-listing-page {
		padding: 32px 16px 48px;
	}

	.vehicle-listing-intro h1 {
		font-size: 32px;
	}

	.vehicle-listing-intro p {
		font-size: 15px;
	}

	.vehicle-category-title {
		font-size: 24px;
	}
}


/* =========================================================================
 * 9. BREADCRUMB — Shared pattern with content pages
 * ========================================================================= */

.vehicle-detail-page .cp-breadcrumb {
	background: var(--light-bg);
	padding: 16px 0;
}

.vehicle-detail-page .cp-breadcrumb__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	color: var(--light-muted);
}

.vehicle-detail-page .cp-breadcrumb a {
	color: var(--light-muted);
	text-decoration: none;
}

.vehicle-detail-page .cp-breadcrumb a:hover {
	color: var(--accent-gold);
}