/**
 * LuxeDrive /v3/ — champagne-gold hybrid restyle.
 *
 * Loaded only on the /v3/ page, which carries the `luxedrive-v3` body class.
 * Every rule is scoped to that class so the rest of the site is untouched and
 * each Fusion Builder section stays editable.
 */

.luxedrive-v3 {
	--lux-gold: #c5a572;
	--lux-gold-deep: #8a6d3b;
	--lux-charcoal: #0e0f12;
	--lux-cream: #f7f3ec;
	--lux-greige: #e6e0d7;
	--lux-line: rgba( 197, 165, 114, 0.45 );
	--lux-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------- Typography */

.luxedrive-v3 h1,
.luxedrive-v3 h2,
.luxedrive-v3 h3,
.luxedrive-v3 .fusion-title h1,
.luxedrive-v3 .fusion-title h2,
.luxedrive-v3 .fusion-title h3,
.luxedrive-v3 .product-title,
.luxedrive-v3 .woocommerce-loop-product__title {
	font-family: var( --lux-serif ) !important;
	font-weight: 600 !important;
	letter-spacing: -0.012em !important;
	color: var( --lux-charcoal ) !important;
}

/* H1-H3 size/line-height now come from Avada Theme Options (Typography > Headings/
   Subheadings), promoted sitewide from this page's original scale. */

/* The eyebrow above the H1 stays in the body face — it is a label, not display. */
.luxedrive-v3 .lux-eyebrow,
.luxedrive-v3 .lux-eyebrow * {
	font-family: inherit !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var( --lux-gold-deep ) !important;
}

/* --------------------------------------------------------------- Call to action */

.luxedrive-v3 .fusion-button,
.luxedrive-v3 .fusion-button.button-flat,
.luxedrive-v3 .woocommerce a.button,
.luxedrive-v3 .woocommerce button.button {
	--button_gradient_top_color: var( --lux-gold ) !important;
	--button_gradient_bottom_color: var( --lux-gold ) !important;
	--button_gradient_top_color_hover: var( --lux-gold-deep ) !important;
	--button_gradient_bottom_color_hover: var( --lux-gold-deep ) !important;
	--button_border_color: var( --lux-gold ) !important;
	--button_border_hover_color: var( --lux-gold-deep ) !important;
	--button_accent_color: #fff !important;
	--button_accent_hover_color: #fff !important;

	background: var( --lux-gold ) !important;
	border-color: var( --lux-gold ) !important;
	color: #fff !important;
	border-radius: 2px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 0.86rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 1.05em 2.2em !important;
	transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.luxedrive-v3 .fusion-button:hover,
.luxedrive-v3 .woocommerce a.button:hover,
.luxedrive-v3 .woocommerce button.button:hover {
	background: var( --lux-gold-deep ) !important;
	border-color: var( --lux-gold-deep ) !important;
	color: #fff !important;
}

/* Any button that opens WhatsApp carries WhatsApp's own green, matched on the
   link target rather than a class so new CTAs inherit it automatically. Buttons
   that go anywhere else stay gold. */
body.luxedrive-v3 a.fusion-button[href*="whatsapp.com"],
body.luxedrive-v3 a.fusion-button[href*="wa.me"],
body.luxedrive-v3 a[href*="whatsapp.com"].fusion-button-default,
body.luxedrive-v3 .lux-sticky-cta__btn {
	--button_gradient_top_color: #25d366 !important;
	--button_gradient_bottom_color: #25d366 !important;
	--button_gradient_top_color_hover: #1da851 !important;
	--button_gradient_bottom_color_hover: #1da851 !important;
	--button_border_color: #25d366 !important;
	--button_border_hover_color: #1da851 !important;

	background: #25d366 !important;
	border-color: #25d366 !important;
	color: #fff !important;
}

body.luxedrive-v3 a.fusion-button[href*="whatsapp.com"]:hover,
body.luxedrive-v3 a.fusion-button[href*="wa.me"]:hover,
body.luxedrive-v3 .lux-sticky-cta__btn:hover {
	background: #1da851 !important;
	border-color: #1da851 !important;
	color: #fff !important;
}

/* Secondary CTA: hairline gold outline rather than a second filled block. */
.luxedrive-v3 .fusion-button.button-outline,
.luxedrive-v3 .lux-btn-ghost {
	background: transparent !important;
	color: var( --lux-gold-deep ) !important;
	border: 1px solid var( --lux-gold-deep ) !important;
}

.luxedrive-v3 .fusion-button.button-outline:hover,
.luxedrive-v3 .lux-btn-ghost:hover {
	background: var( --lux-gold-deep ) !important;
	border-color: var( --lux-gold-deep ) !important;
	color: #fff !important;
}

/* ------------------------------------------------- Remove the budget signals */

/* The "Most Popular" badge is worth keeping as a CRO signal, but the site's
   custom CSS paints it as a filled red rectangle — the loudest budget cue on the
   page. Restyled to a hairline gold chip. The selector needs a `body` prefix to
   outrank `.fusion-woo-badges-wrapper span.onsale` in wp-custom-css, which
   matches at equal specificity and is emitted later in the head. */
body.luxedrive-v3 .fusion-woo-badges-wrapper span.onsale {
	background-color: transparent !important;
	border: 1px solid var( --lux-gold ) !important;
	border-radius: 2px !important;
	padding: 5px 11px !important;
	box-shadow: none !important;
}

body.luxedrive-v3 .fusion-woo-badges-wrapper span.onsale::after {
	color: var( --lux-gold-deep ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}

/* The slashed $400 anchor reads as discount retail and was never a rate anyone
   paid. The real rate stays; the fake anchor goes. */
body.luxedrive-v3 .price del,
body.luxedrive-v3 .woocommerce .price del {
	display: none !important;
}

.luxedrive-v3 .price ins,
.luxedrive-v3 .price ins .woocommerce-Price-amount {
	text-decoration: none !important;
	background: none !important;
	color: var( --lux-charcoal ) !important;
	font-weight: 600 !important;
}

.luxedrive-v3 .price,
.luxedrive-v3 .woocommerce-Price-amount {
	font-family: inherit !important;
	color: var( --lux-charcoal ) !important;
	letter-spacing: 0.01em !important;
}

/* Saturated demo-import accents inherited from the car-dealership template. */
.luxedrive-v3 [style*="fcb900"],
.luxedrive-v3 [style*="fdd79a"],
.luxedrive-v3 [style*="fbd98f"],
.luxedrive-v3 [style*="ff6900"] {
	background-color: var( --lux-cream ) !important;
	background-image: none !important;
}

.luxedrive-v3 .fusion-body [style*="00d084"],
.luxedrive-v3 [style*="33cc66"] {
	background-color: var( --lux-gold ) !important;
}

/* ---------------------------------------------------------------- Hero band */

/* 2026-08-06 rebuild: two-column hero (copy + photo) using native Avada
   column/button elements rather than hardcoded CSS backgrounds, so the
   content stays editable in wp-admin. */

.luxedrive-v3 .lux-hero-h1 {
	font-size: clamp( 1.9rem, 3.4vw, 2.7rem ) !important;
	line-height: 1.08 !important;
	margin: 0.2rem 0 0.5rem !important;
}

.luxedrive-v3 .lux-hero-price {
	margin: 0 0 0.4rem !important;
	font-size: 1rem;
}

.luxedrive-v3 .lux-hero-price__value {
	font-family: var( --lux-serif );
	font-weight: 600;
	font-size: 1.6rem;
	color: var( --lux-gold );
}

/* Champagne-gold hero (wedding-car-rental): --lux-gold at 1.4:1 contrast is
   unreadable against a light gold background — it was tuned for the dark v3
   hero. Darker gold keeps the accent look while staying legible. */
body.luxedrive-light-hero .lux-hero-price__value {
	color: var( --lux-gold-deep );
}

.luxedrive-v3 .lux-hero-sub {
	margin: 0 0 0.7rem !important;
	font-size: 0.95rem;
}

/* Only used inside the hero. */
body.luxedrive-v3 .lux-trust__list {
	margin-top: 0.7rem !important;
}

/* The column has no responsive min-height option in this Avada version, so
   the photo's mobile height is capped here instead. Only applies when the
   column is actually visible on mobile - see its own Visibility setting in
   Fusion Builder for whether it shows there at all. */
@media ( max-width: 800px ) {
	.luxedrive-v3 .lux-hero-photo {
		min-height: 200px !important;
		border-radius: 0 !important;
	}
}

/* ---------------------------------------------------- Hero legibility over image */

/* Removed 2026-08-06: this used to force the old car-photo background onto
   whatever .fusion-fullwidth row contained an h1. The hero was redesigned to a
   solid dark background set in the builder, but the selector matched on h1
   presence rather than a specific row, so it kept painting the stale photo
   over the new design regardless of what was edited in wp-admin. */

/* Fallback for engines without :has() — keeps the text readable on its own. */
body.luxedrive-v3 h1,
body.luxedrive-v3 .lux-eyebrow {
	text-shadow: 0 2px 20px rgba( 14, 15, 18, 0.55 );
}

/* Champagne-gold hero (wedding-car-rental): dark text on a light background
   needs no drop-shadow — the dark shadow tuned for white text on a photo
   just smudges dark text here. */
body.luxedrive-light-hero h1,
body.luxedrive-light-hero .lux-eyebrow {
	text-shadow: none;
}

/* -------------------------------------------------------- Mobile menu control */

/* Avada ships this toggle in crimson, which fights the palette harder than any
   other control. Gold outline: navigation should not compete with the CTA. */
body.luxedrive-v3 .awb-menu__m-toggle,
body.luxedrive-v3 .awb-menu__m-toggle:hover,
body.luxedrive-v3 .fusion-mobile-nav-holder .awb-menu__m-toggle {
	background: transparent !important;
	border: 1px solid var( --lux-gold ) !important;
	border-radius: 2px !important;
	color: var( --lux-gold ) !important;
	letter-spacing: 0.1em !important;
}

body.luxedrive-v3 .awb-menu__m-toggle * {
	color: var( --lux-gold ) !important;
}

/* ------------------------------------------------------------------ Surfaces */

.luxedrive-v3 .lux-section-cream {
	background-color: var( --lux-cream ) !important;
}

.luxedrive-v3 .lux-rule {
	border: 0;
	border-top: 1px solid var( --lux-line );
	width: 64px;
	margin: 1.4rem auto;
}

.luxedrive-v3 .fusion-title .title-sep,
.luxedrive-v3 .fusion-separator .sep-single {
	border-color: var( --lux-line ) !important;
}

.luxedrive-v3 .products li.product,
.luxedrive-v3 .fusion-carousel-item-wrapper {
	border: 1px solid var( --lux-line ) !important;
	border-radius: 2px !important;
	background: #fff !important;
	overflow: hidden;
}

.luxedrive-v3 a {
	color: var( --lux-gold-deep );
}

.luxedrive-v3 a:hover {
	color: var( --lux-charcoal );
}

/* The page title bar duplicates the H1 and leaks a raw ISO timestamp. */
.luxedrive-v3 .fusion-page-title-bar {
	display: none !important;
}

/* ------------------------------------- Visibility: content must not depend on JS */

/* Avada holds scroll-reveal elements at opacity:0 until its script runs, which
   left four whole sections invisible on a slow connection. */
.luxedrive-v3 .fusion-animated,
.luxedrive-v3 .awb-scroll-reveal,
.luxedrive-v3 .awb-scroll-reveal span,
.luxedrive-v3 .fusion-title[class*="reveal"],
.luxedrive-v3 .fusion-title[class*="reveal"] span,
.luxedrive-v3 [data-animationtype],
.luxedrive-v3 [class*="fusion-animation"] {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	transition: none !important;
}

/* ---------------------------------------------------------------- Performance */

/* Below-the-fold sections are skipped during the first layout pass. */
.luxedrive-v3 .fusion-fullwidth:nth-of-type( n + 4 ) {
	content-visibility: auto;
	contain-intrinsic-size: 1px 900px;
}

.luxedrive-v3 img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------ Sticky mobile booking bar */

.lux-sticky-cta {
	display: none;
}

@media ( max-width: 800px ) {
	.luxedrive-v3 .lux-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.7rem 1rem calc( 0.7rem + env( safe-area-inset-bottom ) );
		background: var( --lux-charcoal );
		border-top: 1px solid var( --lux-line );
	}

	.luxedrive-v3 .lux-sticky-cta__price {
		flex: 1 1 auto;
		color: var( --lux-cream );
		font-size: 0.82rem;
		line-height: 1.25;
	}

	.luxedrive-v3 .lux-sticky-cta__price strong {
		display: block;
		font-family: var( --lux-serif );
		font-size: 1.1rem;
		color: #fff;
	}

	.luxedrive-v3 .lux-sticky-cta__btn {
		flex: 0 0 auto;
		background: var( --lux-gold );
		color: #fff !important;
		border-radius: 2px;
		padding: 0.85em 1.4em;
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.luxedrive-v3 #main {
		padding-bottom: 78px !important;
	}

	.luxedrive-v3 h1,
	.luxedrive-v3 .fusion-title h1 {
		font-size: clamp( 2.1rem, 8vw, 2.8rem ) !important;
	}
}

/* ------------------------------------------------- Floating Click-to-Chat bubble */

/* The floating bubble keeps WhatsApp's own green on purpose. It is a recognised
   platform affordance rather than a brand CTA, and recolouring it costs more in
   recognition than it gains in palette consistency. Only a soft shadow is added
   so it sits on cream backgrounds without looking pasted on. */
body.luxedrive-v3 #ht-ctc-chat {
	filter: drop-shadow( 0 2px 10px rgba( 14, 15, 18, 0.28 ) );
}

/* Keep the bubble and the back-to-top control clear of the sticky booking bar. */
@media ( max-width: 800px ) {
	body.luxedrive-v3 #ht-ctc-chat,
	body.luxedrive-v3 #toTop {
		bottom: 88px !important;
	}
}

/* ------------------------------------------------- Trust strip under the hero CTA */

/* The commercial terms that decide the enquiry were buried in the FAQ at the
   bottom of the page. They now sit directly beneath the hero CTA. */
body.luxedrive-v3 .lux-trust__list {
	list-style: none !important;
	margin: 1.4rem 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
}

body.luxedrive-v3 .lux-trust__list li {
	position: relative;
	margin: 0 !important;
	padding: 0 0 0 1.1rem;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	color: var( --lux-cream );
	text-shadow: 0 1px 10px rgba( 14, 15, 18, 0.6 );
}

body.luxedrive-v3 .lux-trust__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 1px;
	background: var( --lux-gold );
}

@media ( max-width: 800px ) {
	body.luxedrive-v3 .lux-trust__list {
		gap: 0.35rem 1rem;
	}

	body.luxedrive-v3 .lux-trust__list li {
		font-size: 0.74rem;
	}
}

/* ------------------------------------------------------- Long-form body section */

body.luxedrive-v3 .lux-depth {
	max-width: 74ch;
	margin: 0 auto;
}

body.luxedrive-v3 .lux-depth h2 {
	margin-bottom: 1.1rem !important;
}

body.luxedrive-v3 .lux-depth h3 {
	margin: 2.2rem 0 0.6rem !important;
	padding-top: 1.1rem;
	border-top: 1px solid var( --lux-line );
}

body.luxedrive-v3 .lux-depth p,
body.luxedrive-v3 .lux-depth li {
	font-size: 1rem;
	line-height: 1.75;
	color: #2a2c31;
}

body.luxedrive-v3 .lux-depth ul {
	padding-left: 1.1rem;
}

body.luxedrive-v3 .lux-depth a {
	color: var( --lux-gold-deep );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------- Sticky bar keeps WhatsApp's own green */

/* The bar's button is a WhatsApp affordance, not a brand CTA, so it carries the
   platform colour. Gold stays on every other button on the page. */
body.luxedrive-v3 .lux-sticky-cta__btn {
	background: #25d366 !important;
}

/* --------------------------------------------------------------- Accessibility */

.luxedrive-v3 a:focus-visible,
.luxedrive-v3 .fusion-button:focus-visible,
.luxedrive-v3 .lux-sticky-cta__btn:focus-visible {
	outline: 2px solid var( --lux-gold-deep );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.luxedrive-v3 *,
	.luxedrive-v3 *::before,
	.luxedrive-v3 *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}