/* ==========================================================
   Auto Integrity Group — main.css
   Built by Great Creative Media
   Gold: #BC9B60
   ========================================================== */

/* ── 1. CUSTOM PROPERTIES ───────────────────────────────
   Colour variables are injected by inc/customizer.php → wp_head.
   This block now only holds non-colour design tokens.
   ─────────────────────────────────────────────────────── */
:root {
    /* ── Typography — overridden by Customizer → wp_head ── */
    --font-heading:    'Barlow Condensed', sans-serif;
    --font-subheading: 'Barlow Condensed', sans-serif;
    --font-body:       'Barlow', sans-serif;
    --font-price:      'Barlow Condensed', sans-serif;
    --font-showroom:   'Barlow Condensed', sans-serif;
    --font-single:     'Barlow', sans-serif;

    /* Legacy aliases — kept so any third-party snippets still work */
    --font-main:    var(--font-body);
    --font-cond:    var(--font-heading);

    --header-h:     64px;
    --topbar-h:     38px;
    --container:    1280px;
    --radius:       6px;
    --radius-lg:    10px;

    --transition:   all 0.25s ease;
    --transition-slow: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── 2. RESET & BASE ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    background: var(--black);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.drawer-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
ul, ol { list-style: none; }
address { font-style: normal; }
em { font-style: italic; color: inherit; }

/* ── 3. LAYOUT UTILITIES ─────────────────────────────── */
.container {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.section { padding: 80px 0; }
.section--dark { background: var(--dark-bg); color: var(--dark-text); }

.section__eyebrow {
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.section__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 52px);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--page-heading);
}
/* The <em> in any title is the accent-highlighted word */
.section__title em,
.inner-hero__title em,
.hero-fallback__title em,
.cta-band__title em { color: var(--accent); font-style: normal; }
.section__header { margin-bottom: 48px; }
.section__header--flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

/* ── 4. BUTTONS ──────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: var(--transition);
    white-space: nowrap;
}
.btn--gold     { background: var(--btn-bg); color: var(--btn-text); }
.btn--gold:hover { background: var(--btn-hover); color: var(--btn-text); transform: translateY(-1px); }
.btn--outline  { background: transparent; color: var(--btn-bg); border: 1px solid var(--btn-bg); }
.btn--outline:hover { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.btn--dark     { background: var(--page-bg); color: var(--btn-bg); }
.btn--dark:hover { background: var(--btn-bg); color: var(--btn-text); }
.btn--dark.btn--outlined { background: transparent; color: var(--btn-bg); border: 1px solid var(--btn-bg); }
.btn--dark.btn--outlined:hover { background: var(--btn-bg); color: var(--btn-text); }
.btn--sm       { padding: 8px 18px; font-size: 12px; }
.btn--full     { width: 100%; }

/* ── 5. TOPBAR ───────────────────────────────────────── */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    border-bottom: 1px solid var(--border);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbar__left,
.topbar__right { display: flex; align-items: center; gap: 20px; }
.topbar__hours,
.topbar__phone,
.topbar__whatsapp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--topbar-text);
    transition: var(--transition);
}
.topbar__phone:hover,
.topbar__hours:hover { color: var(--topbar-hover); }
.topbar__whatsapp { color: #4FCE5D; }
.topbar__whatsapp:hover { color: #6de87b; }

/* ── 6. HEADER & NAV ─────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    height: var(--header-h);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.site-header--scrolled {
    background: var(--header-bg);
    box-shadow: 0 4px 30px rgba(var(--scrim-rgb),0.5);
    backdrop-filter: blur(10px);
}
.site-header--hidden { transform: translateY(-100%); }

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.site-logo img { height: 44px; width: auto; }
.site-logo__mark {
    width: 44px;
    height: 44px;
    background: var(--accent);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.site-logo__mark span {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 15px;
    color: var(--btn-text);
    letter-spacing: -1px;
}
.site-logo__text { line-height: 1.1; }
.site-logo__brand {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--header-text);
}
.site-logo__sub {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
}

/* Desktop nav */
.primary-nav { display: flex; align-items: center; gap: 4px; }
.primary-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.primary-nav__list li a {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--header-text);
    border-radius: 4px;
    transition: var(--transition);
    letter-spacing: 0.3px;
}
.primary-nav__list li a:hover,
.primary-nav__list .current-menu-item > a { color: var(--header-hover); background: var(--overlay-subtle); }
.primary-nav__list .current-menu-item > a { color: var(--header-hover); }
.nav-cta { margin-left: 12px; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    transition: var(--transition);
}
.hamburger:hover { background: var(--overlay-subtle); }
.hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: var(--transition);
    transform-origin: center;
}
.hamburger--open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger--open .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger--open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 7. OFF-CANVAS DRAWER ────────────────────────────── */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--scrim-rgb),0.7);
    z-index: 290;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}
.drawer-overlay--visible { opacity: 1; pointer-events: all; }

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    background: var(--page-bg);
    border-left: 1px solid var(--border);
    z-index: 300;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-drawer--open { transform: translateX(0); }

.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.mobile-drawer__brand-name {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 2px;
}
.mobile-drawer__brand-sub {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--gold);
    font-weight: 600;
}
.drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-muted);
    transition: var(--transition);
}
.drawer-close:hover { background: var(--overlay-subtle); color: var(--header-text); }

.mobile-drawer__nav { flex: 1; padding: 16px 0; }
.mobile-drawer__list { list-style: none; }
.mobile-drawer__list li a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.mobile-drawer__list li a:hover { color: var(--accent); background: var(--accent-alpha); padding-left: 28px; }
.mobile-drawer__list .current-menu-item a { color: var(--gold); }

.mobile-drawer__footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.drawer-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}
.drawer-contact-btn--phone { background: var(--btn-bg); color: var(--btn-text); }
.drawer-contact-btn--phone:hover { background: var(--btn-hover); }
.drawer-contact-btn--whatsapp { background: #1a5c27; color: #7ed4a0; }
.drawer-contact-btn--whatsapp:hover { background: #1e6e2f; }

/* ── 8. HERO (MetaSlider overrides + fallback) ───────── */
.hero-section { position: relative; }
.hero-section .metaslider { display: block !important; }

/* Override MetaSlider container */
.hero-section .metaslider .flexslider {
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--dark-2) !important;
    box-shadow: none !important;
}

/* Slide overlay for text readability — add class 'has-overlay' to slides in MetaSlider */
.hero-section .metaslider .slide-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--scrim-rgb),0.75) 0%, rgba(var(--scrim-rgb),0.3) 60%, rgba(var(--scrim-rgb),0.05) 100%);
    pointer-events: none;
}

/* Caption styling — MetaSlider Pro HTML overlay */
.hero-section .metaslider .caption-wrap,
.hero-section .metaslider .nivo-caption {
    background: transparent !important;
    padding: 0 !important;
}

/* Static fallback hero */
.hero-fallback {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background: var(--dark-bg) url('') center/cover no-repeat;
}
.hero-fallback__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--scrim-rgb),0.85) 0%, rgba(var(--scrim-rgb),0.4) 60%, rgba(var(--scrim-rgb),0.1) 100%);
}
.hero-fallback__content { position: relative; z-index: 2; }
.hero-fallback__eyebrow { font-size: 11px; letter-spacing: 4px; color: var(--gold); font-weight: 600; text-transform: uppercase; margin-bottom: 16px; }
.hero-fallback__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(52px, 7vw, 80px);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
.hero-fallback__sub { font-size: 17px; color: rgba(var(--overlay-rgb),0.7); font-weight: 300; max-width: 440px; line-height: 1.6; margin-bottom: 32px; }
.hero-fallback__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 9. STATS BAR ────────────────────────────────────── */
.stats-bar { background: var(--stats-bg, var(--accent)); }
.stats-bar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 24px;
}
.stat-item { text-align: center; padding: 4px 20px; border-right: 1px solid rgba(var(--scrim-rgb),0.15); }
.stat-item:last-child { border-right: none; }
.stat-item__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 36px;
    color: var(--stats-num, var(--btn-text));
    line-height: 1;
}
.stat-item__plus { font-size: 24px; }
.stat-item__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--stats-label, rgba(var(--scrim-rgb),0.55));
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── 10. SERVICES GRID ───────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.service-card {
    background: var(--page-bg);
    padding: 40px 32px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: var(--transition-slow);
}
.service-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.service-card:hover { background: var(--card-bg); filter: brightness(1.15); transform: translateY(-4px); }
.service-card:hover::before { transform: scaleX(1); }

.service-card__num {
    position: absolute;
    top: 16px; right: 24px;
    font-family: var(--font-heading);
    font-size: 80px;
    font-weight: 900;
    color: var(--card-num, var(--overlay-medium));
    line-height: 1;
    user-select: none;
}
.service-card__icon {
    width: 52px; height: 52px;
    background: var(--gold-alpha);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    color: var(--gold);
}
.service-card__title {
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.service-card__desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}
.service-card__link {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
}
.service-card:hover .service-card__link { letter-spacing: 1.5px; }

/* ── 11. VEHICLE GRID & CARDS ────────────────────────── */
.vehicle-grid { display: grid; gap: 16px; }
.vehicle-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vehicle-grid--4 { grid-template-columns: repeat(4, 1fr); }

.vehicle-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
}
.vehicle-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold-border);
    box-shadow: 0 20px 60px rgba(var(--scrim-rgb),0.6), 0 0 0 1px var(--accent-border);
}
.vehicle-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.vehicle-card__badge {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 3;
    background: var(--gold);
    color: var(--black);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}
.vehicle-card__badge--new { background: var(--badge-new-bg); color: var(--badge-new-text); }

.vehicle-card__img {
    height: 220px;
    overflow: hidden;
    background: var(--vcard-bg);
    position: relative;
}
.vehicle-card__img img {
    width: 100%; height: 100%;
    /* contain (matching the homepage New Arrivals cards) shows the whole vehicle
       regardless of photo shape — square or landscape — so nothing is cropped.
       cover was slicing roofs/wheels off square photos. */
    object-fit: contain;
    background: var(--vcard-bg);
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.vehicle-card:hover .vehicle-card__img img { transform: scale(1.06); }
.vehicle-card__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
}

.vehicle-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.vehicle-card__price {
    font-family: var(--font-price);
    font-weight: 900;
    font-size: 26px;
    color: var(--gold);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1;
}
.vehicle-card__title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 14px;
}
.vehicle-card__title a { color: var(--vcard-heading); position: relative; z-index: 2; }
.vehicle-card__title a:hover { color: var(--accent); }

.vehicle-card__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
    margin-bottom: 16px;
    list-style: none;
}
.vehicle-card__spec {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--vcard-text);
}
.vehicle-card__spec-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.vehicle-card__footer {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vehicle-card__price--poa { font-size: 22px; opacity: 0.95; }
.vehicle-card__stock { font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; }
.vehicle-card__enquire {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 14px;
    border: 1px solid var(--gold-border);
    border-radius: 3px;
    transition: var(--transition);
}
.vehicle-card__enquire:hover { background: var(--btn-bg); color: var(--btn-text); }

/* ── 12. WHY SECTION ─────────────────────────────────── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.why-item {
    padding: 32px 24px;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
}
.why-item:hover { border-color: var(--gold-border); }
.why-item__icon {
    width: 56px; height: 56px;
    background: var(--gold-alpha);
    border: 1px solid var(--gold-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    color: var(--gold);
}
.why-item__title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.why-item__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ── 13. TESTIMONIALS ────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
}
.testimonial::before {
    content: '\275D';
    position: absolute;
    top: 16px; right: 20px;
    font-size: 52px;
    color: var(--accent-alpha);
    font-family: Georgia, serif;
    line-height: 1;
}
.testimonial__stars {
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.testimonial__text {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.75;
    margin-bottom: 20px;
    font-style: italic;
}
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
    flex-shrink: 0;
}
.testimonial__name { display: block; font-weight: 600; font-size: 14px; }
.testimonial__source { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── 14. CTA BAND ────────────────────────────────────── */
.cta-band { background: var(--accent); padding: 64px 0; }
.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-band__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(32px, 4vw, 44px);
    color: var(--black);
    text-transform: uppercase;
    line-height: 1;
}
.cta-band__sub { font-size: 14px; color: var(--cta-sub-color, rgba(var(--scrim-rgb),0.55)); margin-top: 8px; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 15. SHOWROOM PAGE ───────────────────────────────── */
.showroom-hero {
    background: var(--dark-bg);
    color: var(--dark-text);
    border-bottom: 1px solid var(--border);
    padding: 48px 0;
}
.showroom-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.showroom-hero .section__eyebrow { color: var(--heading-accent); }
.showroom-hero__title {
    font-family: var(--font-showroom);
    font-weight: 900;
    font-size: clamp(40px, 6vw, 60px);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--dark-heading);
}
.showroom-hero__title em { color: var(--heading-accent); font-style: normal; }
.showroom-hero__count { font-size: 14px; color: var(--dark-text); margin-top: 8px; }
.showroom-hero__count strong { color: var(--heading-accent); }
.showroom-hero__feed-note { font-size: 12px; color: var(--dark-text); opacity: 0.7; }

.showroom-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Filter Sidebar */
.filter-sidebar {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: sticky;
    top: calc(var(--header-h) + 16px);
}
.filter-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.filter-sidebar__title {
    font-family: var(--font-showroom);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.filter-sidebar__clear {
    font-size: 11px;
    color: var(--gold);
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.filter-group { margin-bottom: 20px; }
.filter-group__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-family: var(--font-showroom);
}
.filter-select {
    width: 100%;
    background: var(--page-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    font-size: 13px;
    border-radius: var(--radius);
    font-family: var(--font-showroom);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    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='%23666' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    transition: var(--transition);
}
.filter-select:focus { outline: none; border-color: var(--gold); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--filter-bg);
    border: 1px solid var(--border);
    color: var(--filter-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-showroom);
    min-width: 44px;
    text-align: center;
    text-decoration: none;
}
.filter-chip:hover {
    background: var(--accent-alpha);
    border-color: var(--accent-border);
    color: var(--accent);
}
.filter-chip--active,
a.filter-chip--active {
    background: var(--filter-accent) !important;
    border-color: var(--filter-accent) !important;
    color: #FFFFFF !important;
}
.filter-chip--active:hover {
    background: var(--filter-accent) !important;
    color: #FFFFFF !important;
    opacity: 0.9;
}

.filter-price-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.filter-price-range__sep { color: var(--text-dim); font-size: 12px; text-align: center; }
.filter-input {
    background: var(--page-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 12px;
    font-size: 13px;
    border-radius: var(--radius);
    font-family: var(--font-showroom);
    width: 100%;
    transition: var(--transition);
}
.filter-input:focus { outline: none; border-color: var(--gold); }
.filter-apply { margin-top: 8px; }

/* Showroom toolbar */
.showroom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}
.showroom-toolbar__count { font-size: 14px; color: var(--text-muted); }
.showroom-toolbar__count strong { color: var(--text); font-size: 16px; }
.showroom-toolbar__sort { display: flex; align-items: center; gap: 10px; }
.showroom-toolbar__sort-label { font-size: 12px; color: var(--text-muted); }
.sort-select {
    background: var(--page-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 12px;
    font-size: 12px;
    border-radius: var(--radius);
    font-family: var(--font-showroom);
    cursor: pointer;
}

/* Pagination */
.showroom-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}
.pagination-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-showroom);
    color: var(--card-heading);
    transition: var(--transition);
    background: var(--card-bg);
    text-decoration: none;
}
.pagination-btn:hover { border-color: var(--accent); color: var(--accent); }
.pagination-btn--active { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

/* No results */
.no-results-block {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-dim);
}
.no-results-block svg { margin: 0 auto 20px; color: var(--text-dim); }
.no-results-block__title { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--text-muted); }
.no-results-block__desc { font-size: 14px; }
.no-results-block__desc a { color: var(--gold); }

/* ── 16. SINGLE LISTING ──────────────────────────────── */
.breadcrumb-bar {
    background: transparent;
    border-bottom: none;
    padding: 14px 0 0;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--page-text);
    flex-wrap: wrap;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 1;
}
.breadcrumb a { color: var(--page-text); transition: var(--transition); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--page-dim); margin: 0 2px; }
.breadcrumb [aria-current] { color: var(--page-heading); font-weight: 600; }

.listing-page { padding: 40px 24px 80px; }
.listing-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

/* Gallery */
.listing-gallery {
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 32px;
}
.listing-gallery__main {
    height: 480px;
    position: relative;
    overflow: hidden;
    background: var(--dark-3);
    cursor: zoom-in;
}
.listing-gallery__main img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.25s ease;
}
.gallery-img--loading { opacity: 0.5; }
.listing-gallery__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF;
    transition: var(--transition);
    z-index: 3;
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.gallery-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.05);
}
.gallery-nav--prev { left: 16px; }
.gallery-nav--next { right: 16px; }

.gallery-counter {
    position: absolute;
    bottom: 16px; right: 16px;
    background: rgba(var(--scrim-rgb),0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    z-index: 2;
}

.listing-gallery__thumbs {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--dark-3);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.gallery-thumb {
    flex-shrink: 0;
    width: 80px; height: 60px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: var(--transition);
    background: var(--page-bg);
    padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover,
.gallery-thumb--active { opacity: 1; border-color: var(--gold); }

/* Listing header & specs */
.listing-header { margin-bottom: 28px; }
.listing-header__title {
    font-family: var(--font-single);
    font-weight: 900;
    font-size: clamp(32px, 5vw, 44px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}
.listing-header__meta { font-size: 14px; color: var(--text-muted); }

.listing-section-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.listing-desc {
    background: var(--vcard-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}
.listing-desc__content { font-size: 14px; color: var(--vcard-text); line-height: 1.8; }
.listing-desc__content p { margin-bottom: 12px; }
.listing-desc__content p:last-child { margin-bottom: 0; }

.listing-specs {
    background: var(--vcard-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    padding: 24px;
}
.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.spec-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.spec-row:nth-child(even) { border-right: none; }
.spec-row:nth-last-child(-n+2) { border-bottom: none; }
.spec-row__key {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--vcard-text);
    margin-bottom: 4px;
}
.spec-row__val { font-size: 15px; font-weight: 600; color: var(--vcard-heading); }

/* Sidebar */
.listing-sidebar { position: sticky; top: calc(var(--header-h) + 16px); }

.price-card {
    background: var(--vcard-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}
.price-card__header {
    background: var(--price-band-bg);
    padding: 24px;
    text-align: center;
}
.price-card__amount {
    font-family: var(--font-price);
    font-weight: 900;
    font-size: 44px;
    color: var(--price-band-text);
    letter-spacing: -1px;
    line-height: 1;
}
.price-card__label { font-size: 11px; font-weight: 700; color: var(--price-label); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

.price-card__details { padding: 16px 24px; }
.price-card__detail {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--vcard-text);
}
.price-card__detail:last-child { border-bottom: none; }
.price-card__detail-val { font-weight: 600; color: var(--vcard-heading); }
.price-card__detail-val--green { color: #4CAF50; }

.price-card__actions { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 10px; }

/* Sidebar form card */
.sidebar-form-card {
    background: var(--vcard-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 16px;
}
.sidebar-form-card__heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.sidebar-form-card__sub { font-size: 12px; color: var(--vcard-text); margin-bottom: 20px; line-height: 1.5; }

/* GF Placeholder */
.gf-placeholder {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    background: rgba(188,155,96,0.03);
}
.gf-placeholder__icon { margin: 0 auto 12px; color: var(--vcard-text); }
.gf-placeholder__title { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--vcard-text); }
.gf-placeholder__desc { font-size: 12px; color: var(--vcard-text); line-height: 1.5; margin-bottom: 12px; }
.gf-placeholder__code {
    display: inline-block;
    background: var(--dark-3);
    border: 1px solid var(--gold-border);
    color: var(--accent);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.gf-placeholder__hint { font-size: 11px; color: var(--vcard-text); }
.gf-placeholder__hint strong { color: var(--accent); }

/* Dealer info card */
.dealer-info-card {
    background: var(--vcard-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.dealer-info-card__heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vcard-text);
    margin-bottom: 14px;
}
.dealer-info-card__name { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--vcard-heading); }
.dealer-info-card__address { font-size: 13px; color: var(--vcard-text); margin-bottom: 16px; line-height: 1.5; }
.dealer-info-card__contacts { display: flex; flex-direction: column; gap: 10px; }
.dealer-info-card__contacts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--vcard-text);
}
.dealer-info-card__contacts svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.dealer-info-card__contacts a { color: var(--accent); }
.dealer-info-card__contacts a:hover { color: var(--accent-hover); }

/* ── 17. INNER PAGES (Finance / Sell) ────────────────── */
.inner-hero {
    background: var(--dark-bg);
    color: var(--dark-text);
    border-bottom: 1px solid var(--border);
    padding: 60px 0;
}
.inner-hero .section__eyebrow { color: var(--accent); }
.inner-hero__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(44px, 7vw, 64px);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    color: var(--dark-heading);
}
.inner-hero__sub { font-size: 16px; color: var(--dark-text); font-weight: 300; max-width: 600px; line-height: 1.7; margin-top: 6px; }

/* ── 18. FOOTER ──────────────────────────────────────── */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); }
.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.site-footer__bottom {
    padding: 20px 0;
    border-top: 1px solid var(--border);
}

/* ── 19. WHATSAPP FAB ────────────────────────────────── */
.whatsapp-fab {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: white;
    padding: 12px 18px 12px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(37,211,102,0.35);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.whatsapp-fab:hover { background: #20b558; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.45); }
.whatsapp-fab__label { white-space: nowrap; }

/* ── 20. SCROLL-TO-TOP ───────────────────────────────── */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 150;
    width: 44px; height: 44px;
    background: var(--btn-bg);
    color: var(--btn-text);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px var(--accent-border);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: var(--transition);
}
.scroll-top-btn--visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--btn-hover); color: var(--btn-text); transform: translateY(-2px); }

/* ── 21. GRAVITY FORMS STRUCTURAL BASE ─────────────────
   Colour/background rules are handled by the surface-aware
   blocks further down. This block only sets layout/sizing. */
.gform_wrapper .gform_body { margin: 0; }
.gform_wrapper .gfield { margin-bottom: 16px; }
.gform_wrapper .gfield_label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
    padding: 11px 14px !important;
    font-size: 14px !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-body) !important;
    width: 100% !important;
    transition: var(--transition) !important;
    border: 1px solid var(--border) !important;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus { outline: none !important; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button {
    padding: 13px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-heading) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    width: 100% !important;
}

/* ── 22. METASLIDER OVERRIDES ────────────────────────── */
.metaslider .flexslider { border: none !important; margin: 0 !important; border-radius: 0 !important; }
.metaslider .flex-control-nav { bottom: 20px !important; }
.metaslider .flex-control-paging li a {
    background: var(--overlay-medium) !important;
    box-shadow: none !important;
    width: 24px !important;
    height: 4px !important;
    border-radius: 2px !important;
}
.metaslider .flex-control-paging li a.flex-active {
    background: var(--gold) !important;
    width: 36px !important;
}
.metaslider .flex-direction-nav .flex-prev,
.metaslider .flex-direction-nav .flex-next {
    background: rgba(var(--scrim-rgb),0.5) !important;
    border: 1px solid var(--overlay-soft) !important;
    border-radius: var(--radius) !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.metaslider .flex-direction-nav .flex-prev:hover,
.metaslider .flex-direction-nav .flex-next:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}

/* ── 23. RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1100px) {
    .vehicle-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
    .services-grid { grid-template-columns: 1fr; }
    .showroom-layout { grid-template-columns: 1fr; }
    .filter-sidebar { position: static; }
    .listing-layout { grid-template-columns: 1fr; }
    .listing-sidebar { position: static; }
    .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-item { border-right: none; border-bottom: 1px solid rgba(var(--scrim-rgb),0.15); padding: 16px 0; }
    .stat-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 768px) {
    .primary-nav { display: none; }
    .hamburger { display: flex; }
    .section { padding: 60px 0; }
    .vehicle-grid--3 { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .section__header--flex { flex-direction: column; align-items: flex-start; }
    .cta-band__inner { flex-direction: column; text-align: center; }
    .cta-band__actions { justify-content: center; }
    .topbar__left { display: none; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .trust-logos { justify-content: center; }
    .listing-gallery__main { height: 260px; }
    .showroom-hero__title { font-size: 36px; }
}

@media (max-width: 480px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .vehicle-grid--3,
    .vehicle-grid--4 { grid-template-columns: 1fr; }
    .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
    .hero-fallback__title { font-size: 44px; }
    .hero-fallback__btns { flex-direction: column; }
    .whatsapp-fab__label { display: none; }
    .whatsapp-fab { padding: 14px; border-radius: 50%; }
    .specs-grid { grid-template-columns: 1fr; }
    .spec-row { border-right: none; }
    .spec-row:nth-last-child(1) { border-bottom: none; }
}

/* ── 24. ACCESSIBILITY ───────────────────────────────── */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── 25. PRINT ───────────────────────────────────────── */
@media print {
    .site-header, .topbar, .mobile-drawer, .whatsapp-fab, .scroll-top-btn { display: none; }
    body { background: white; color: black; }
    .listing-layout { grid-template-columns: 1fr; }
}

/* ── 26. SIMILAR & RECENTLY VIEWED ──────────────────── */

/* 4-col grid for recently viewed */
@media (max-width: 1024px) {
    .vehicle-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .vehicle-grid--4 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   GCM MASTER ADDITIONS v1.0
   ════════════════════════════════════════════ */

/* ── Inner hero CTA + large button ── */
.inner-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.inner-hero__cta { flex-shrink: 0; }
.btn--lg { padding: 16px 32px; font-size: 15px; }
@media (max-width: 768px) { .inner-hero__inner { flex-direction: column; align-items: flex-start; } }

/* ── Vehicle card: price row + monthly ── */
.vehicle-card__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vehicle-card__monthly { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.vehicle-card__monthly strong { color: var(--gold); font-weight: 700; }

/* ── Vehicle card: age note ── */
.vehicle-card__age-note { font-size: 11.5px; color: #E6A23C; margin: 8px 0 0; line-height: 1.4; }
.vehicle-card__age-note a { color: #E6A23C; text-decoration: underline; }

/* ── Vehicle card: actions + WhatsApp ── */
.vehicle-card__actions { display: flex; align-items: center; gap: 8px; }
.vehicle-card__wa { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid #25D366; color: #25D366; transition: all 0.2s ease; flex-shrink: 0; }
.vehicle-card__wa:hover { background: #25D366; color: #fff; }

/* ── Status badges ── */
.vehicle-card__badge--reserved { background: var(--badge-reserved-bg); color: var(--badge-reserved-text); }
.vehicle-card__badge--pending  { background: var(--badge-pending-bg); color: var(--badge-pending-text); }
.vehicle-card__badge--sold     { background: var(--badge-sold-bg); color: var(--badge-sold-text); }
.vehicle-card--sold .vehicle-card__img img { filter: grayscale(0.85); opacity: 0.7; }

.price-card__status { text-align: center; padding: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.price-card__status--reserved { background: var(--badge-reserved-bg); color: var(--badge-reserved-text); }
.price-card__status--pending  { background: var(--badge-pending-bg); color: var(--badge-pending-text); }
.price-card__status--sold     { background: var(--badge-sold-bg); color: var(--badge-sold-text); }

/* ── Single listing: age disclaimer ── */
.price-card__age-disclaimer { display: flex; gap: 10px; align-items: flex-start; background: rgba(230, 162, 60, 0.08); border: 1px solid rgba(230, 162, 60, 0.35); border-radius: 8px; padding: 14px; font-size: 12.5px; line-height: 1.55; color: #E6A23C; margin-bottom: 4px; }
.price-card__age-disclaimer svg { flex-shrink: 0; margin-top: 2px; }

/* ── Admin print tools ── */
.price-card__admin-tools { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px dashed var(--border); font-size: 12px; }
.price-card__admin-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
.price-card__admin-tools a { color: var(--gold); text-decoration: none; }
.price-card__admin-tools a:hover { text-decoration: underline; }

/* ── Pre-approval strip ── */
.preapproval-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--gold-alpha); border: 1px solid var(--gold-border); border-radius: 12px; padding: 24px 28px; margin-top: 40px; flex-wrap: wrap; }
.preapproval-strip__text h3 { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.preapproval-strip__text p { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.preapproval-strip .btn { flex-shrink: 0; }

/* ── Pre-approval modal ── */
.preapproval-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; }
.preapproval-overlay.is-open { opacity: 1; visibility: visible; }

.preapproval-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 100vw);
    background: var(--card-bg);
    border-left: 1px solid var(--border);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.preapproval-overlay.is-open .preapproval-panel { transform: translateX(0); }

.preapproval-panel__close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--card-text);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}
.preapproval-panel__close:hover { color: var(--card-heading); border-color: var(--accent); }

.preapproval-panel__head {
    padding: 28px 28px 14px;
    flex-shrink: 0;
}
.preapproval-panel__title { font-size: 22px; font-weight: 900; color: var(--card-heading); margin: 4px 0 6px; line-height: 1.2; }
.preapproval-panel__sub { font-size: 12.5px; color: var(--card-text); line-height: 1.5; margin-bottom: 0; }
.preapproval-panel__head .section__eyebrow { font-size: 10px; margin-bottom: 4px; }

.preapproval-panel__form {
    padding: 0 28px 28px;
    flex: 1;
    overflow-y: auto;
}

/* ── Compact GF spacing inside the modal ── */
.preapproval-panel .gform_wrapper .gfield { margin-bottom: 10px !important; }
.preapproval-panel .gform_wrapper .gfield_label { font-size: 11px !important; margin-bottom: 4px !important; }
.preapproval-panel .gform_wrapper input[type="text"],
.preapproval-panel .gform_wrapper input[type="email"],
.preapproval-panel .gform_wrapper input[type="tel"],
.preapproval-panel .gform_wrapper input[type="number"],
.preapproval-panel .gform_wrapper textarea {
    padding: 9px 11px !important;
    font-size: 13px !important;
}
.preapproval-panel .gform_wrapper select {
    padding: 6px 11px !important;
    min-height: 38px !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}
.preapproval-panel .gform_wrapper textarea { min-height: 70px !important; }
.preapproval-panel .gform_wrapper .gfield_description,
.preapproval-panel .gform_wrapper .gfield_required { font-size: 10.5px !important; }
.preapproval-panel .gform_wrapper .gform_footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(var(--scrim-rgb),0) 0%, var(--card-bg) 30%);
    padding: 14px 0 4px !important;
    margin: 12px 0 0 !important;
    z-index: 5;
}
.preapproval-panel .gform_wrapper .gform_footer input[type="submit"] {
    width: 100%;
    padding: 12px 20px !important;
    font-size: 13px !important;
    font-weight: 700;
}

body.preapproval-open { overflow: hidden; }

/* ── Team grid ── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.team-card { background: var(--dark-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; }
.team-card:hover { border-color: var(--gold-border); transform: translateY(-3px); }
.team-card__photo { aspect-ratio: 1 / 1.05; background: var(--dark-3); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.team-card__body { padding: 18px 20px 20px; }
.team-card__name { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.team-card__role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--card-heading); margin-bottom: 14px; }
.team-card__contacts { display: flex; gap: 8px; }
.team-card__contact { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--accent-border); border-radius: 6px; color: var(--accent); background: var(--page-bg); transition: all 0.2s ease; }
.team-card__contact:hover { border-color: var(--accent); color: var(--btn-text); background: var(--accent); }
.team-card__contact--wa { border-color: rgba(37,211,102,0.4); color: #25D366; }
.team-card__contact--wa:hover { border-color: #25D366; color: #FFFFFF; background: #25D366; }

/* ── Story / docs / accreditations ── */
.story-text p { font-size: 15.5px; line-height: 1.85; color: var(--text-muted); margin-bottom: 18px; }
.docs-box { background: var(--dark-2); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; margin-top: 40px; }
.docs-box__title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.docs-box__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 28px; }
.docs-box__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.docs-box__list svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.acc-grid-OLD { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.acc-card { background: var(--dark-3); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.acc-card__name { font-size: 14px; font-weight: 900; letter-spacing: 2px; color: var(--gold); margin-bottom: 10px; }
.acc-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ── Trust badge highlight ── */
/* .trust-logos__item--gold defined later with --accent var */

/* ════════════════════════════════════════════
   GCM — Admin notices & form fallback
   ════════════════════════════════════════════ */
.admin-notice {
    background: #2A2418;
    border: 1px solid var(--gold-border);
    border-left: 4px solid var(--gold);
    color: #FFE9C4;
    padding: 14px 16px;
    margin: 16px 0;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
}
.admin-notice strong { color: #FFD080; }
.admin-notice code { background: rgba(0,0,0,0.35); padding: 2px 6px; border-radius: 3px; color: #FFD080; font-size: 12px; }
.admin-notice em { color: var(--text); font-style: normal; font-weight: 600; }
.admin-notice--warning { border-left-color: #E67E22; }
.admin-notice--warning strong { color: #FFB870; }

.listing-specs__placeholder {
    padding: 18px 20px;
    background: var(--dark-3);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 12px;
}

.filter-sidebar__empty {
    padding: 16px;
    background: var(--dark-3);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ── Fallback enquiry form (when GF unconfigured/wrong) ── */
.enquiry-form-fallback {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.enquiry-form-fallback__intro {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    line-height: 1.5;
}
.enquiry-form-fallback__or {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin: 4px 0 0;
}

/* ════════════════════════════════════════════
   GCM — Surface-scoped colour overrides
   These let surfaces (header, cards, dark sections, footer)
   have their own colour palette independent of the page.
   ════════════════════════════════════════════ */

/* HEADER & TOP BAR */
/* Header colours handled at source rules (.site-header / .primary-nav__list / .site-logo).
   Topbar handled separately below (it is a sibling, not a child). */
.site-header .hamburger__bar { background: var(--header-text); }

/* VEHICLE CARDS */
.vehicle-card { background: var(--vcard-bg); color: var(--vcard-text); border-color: var(--border); }
.vehicle-card .vehicle-card__title,
.vehicle-card .vehicle-card__title a { color: var(--vcard-heading); }
.vehicle-card .vehicle-card__spec { color: var(--vcard-text); }
.vehicle-card .vehicle-card__stock { color: var(--vcard-text); opacity: 0.7; }

/* OTHER CARDS — service, testimonial, team, accreditation */
.service-card,
.testimonial,
.team-card,
.acc-card,
.step-card,
.why-item,
.contact-method,
.docs-box { background: var(--card-bg); color: var(--card-text); border-color: var(--border); }
.service-card__title,
.testimonial__name,
.team-card__name,
.acc-card__name,
.step-card__title,
.why-item__title,
.contact-method h3,
.docs-box__title { color: var(--card-heading); }
.service-card__desc,
.testimonial__text,
.team-card__role,
.acc-card__desc,
.step-card__desc,
.why-item__desc,
.contact-method p,
.docs-box__list li { color: var(--card-text); }

/* DARK / FEATURE SECTIONS */
.section--dark .section__title,
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--dark-heading); }
.section--dark .section__eyebrow,
.section--dark .section__sub { color: var(--dark-text); }
.section--dark .testimonial,
.section--dark .acc-card,
.section--dark .step-card,
.section--dark .why-item { background: var(--card-bg); color: var(--card-text); }
.section--dark .testimonial__name,
.section--dark .acc-card__name,
.section--dark .step-card__title,
.section--dark .why-item__title { color: var(--card-heading); }

/* FOOTER */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer .footer-col__title,
.site-footer .footer-col__brand-name,
.site-footer h4 { color: var(--footer-heading); }
.site-footer a,
.site-footer .footer-col__links a,
.site-footer .footer-col__contact a { color: var(--footer-link); }
.site-footer a:hover { opacity: 0.8; }
.site-footer .footer-col__about,
.site-footer .footer-col__contact li { color: var(--footer-text); }
.site-footer__bottom { border-top-color: var(--border); }
.site-footer__copy { color: var(--footer-text); opacity: 0.7; }

/* PAGE — body defaults */
body { background: var(--page-bg); color: var(--page-text); }
h1, h2, h3, h4 { color: var(--page-heading); }
.section__title { color: var(--page-heading); }
.section__sub { color: var(--page-text); }

/* BUTTONS */
.btn--gold,
.btn-gold,
button[type="submit"]:not(.no-print),
.gform_wrapper input[type="submit"] {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-bg) !important;
}
.btn--gold:hover,
.btn-gold:hover,
button[type="submit"]:hover:not(.no-print),
.gform_wrapper input[type="submit"]:hover {
    background: var(--btn-hover) !important;
    border-color: var(--btn-hover) !important;
}

/* ════════════════════════════════════════════
   GCM v1.6.7 — Form colours fully decoupled from card/page surfaces
   All form text now uses dedicated --form-label-text and --form-body-text variables.
   Old surface-specific overrides removed (replaced by these explicit rules).
   ════════════════════════════════════════════ */

/* Labels + section headings — prominent text */
.gform_wrapper .gfield_label,
.gform_wrapper .gfield > label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gchoice label,
.gform_wrapper .ginput_container_consent label,
.gform_wrapper .gfield_consent_label,
.gform_wrapper .gsection .gsection_title,
.finance-form-card .gform_wrapper .gfield_label,
.finance-form-card .gform_wrapper .gfield > label,
.finance-form-card .gform_wrapper .gfield_radio label,
.finance-form-card .gform_wrapper .gfield_checkbox label,
.finance-form-card .gform_wrapper .gchoice label,
.finance-form-card .gform_wrapper .ginput_container_consent label,
.finance-form-card .gform_wrapper .gfield_consent_label,
.finance-form-card .gform_wrapper .gsection .gsection_title,
.sidebar-form-card .gform_wrapper .gfield_label,
.sidebar-form-card .gform_wrapper .gfield > label,
.sidebar-form-card .gform_wrapper .gfield_radio label,
.sidebar-form-card .gform_wrapper .gfield_checkbox label,
.sidebar-form-card .gform_wrapper .gchoice label,
.sidebar-form-card .gform_wrapper .ginput_container_consent label,
.sidebar-form-card .gform_wrapper .gfield_consent_label,
.sidebar-form-card .gform_wrapper .gsection .gsection_title,
.preapproval-panel .gform_wrapper .gfield_label,
.preapproval-panel .gform_wrapper .gfield > label,
.preapproval-panel .gform_wrapper .gfield_radio label,
.preapproval-panel .gform_wrapper .gfield_checkbox label,
.preapproval-panel .gform_wrapper .gchoice label,
.preapproval-panel .gform_wrapper .ginput_container_consent label,
.preapproval-panel .gform_wrapper .gfield_consent_label,
.preapproval-panel .gform_wrapper .gsection .gsection_title {
    color: var(--form-label-text) !important;
}

/* Body / help / description / HTML field content — muted text */
.gform_wrapper .gfield_consent_description,
.gform_wrapper .gfield_html,
.gform_wrapper .gfield_html p,
.gform_wrapper .gfield_html strong,
.gform_wrapper .gfield_html em,
.gform_wrapper .gfield--type-html,
.gform_wrapper .gsection,
.gform_wrapper .gsection_description,
.gform_wrapper .gfield_description,
.finance-form-card .gform_wrapper .gfield_consent_description,
.finance-form-card .gform_wrapper .gfield_html,
.finance-form-card .gform_wrapper .gfield_html p,
.finance-form-card .gform_wrapper .gfield_html strong,
.finance-form-card .gform_wrapper .gfield_html em,
.finance-form-card .gform_wrapper .gfield--type-html,
.finance-form-card .gform_wrapper .gsection,
.finance-form-card .gform_wrapper .gsection_description,
.finance-form-card .gform_wrapper .gfield_description,
.sidebar-form-card .gform_wrapper .gfield_consent_description,
.sidebar-form-card .gform_wrapper .gfield_html,
.sidebar-form-card .gform_wrapper .gfield_html p,
.sidebar-form-card .gform_wrapper .gfield_html strong,
.sidebar-form-card .gform_wrapper .gfield_html em,
.sidebar-form-card .gform_wrapper .gfield--type-html,
.sidebar-form-card .gform_wrapper .gsection,
.sidebar-form-card .gform_wrapper .gsection_description,
.sidebar-form-card .gform_wrapper .gfield_description,
.preapproval-panel .gform_wrapper .gfield_consent_description,
.preapproval-panel .gform_wrapper .gfield_html,
.preapproval-panel .gform_wrapper .gfield_html p,
.preapproval-panel .gform_wrapper .gfield_html strong,
.preapproval-panel .gform_wrapper .gfield_html em,
.preapproval-panel .gform_wrapper .gfield--type-html,
.preapproval-panel .gform_wrapper .gsection,
.preapproval-panel .gform_wrapper .gsection_description,
.preapproval-panel .gform_wrapper .gfield_description {
    color: var(--form-body-text) !important;
}

/* Inputs adapt background + text to surface */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--border) !important;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    border-color: var(--accent) !important;
    outline: none !important;
}

/* Within cards, form inputs use card background (e.g. modal, finance page form card) */
.vehicle-card .gform_wrapper input,
.vehicle-card .gform_wrapper select,
.vehicle-card .gform_wrapper textarea,
.preapproval-panel .gform_wrapper input,
.preapproval-panel .gform_wrapper select,
.preapproval-panel .gform_wrapper textarea,
.finance-form-card .gform_wrapper input,
.finance-form-card .gform_wrapper select,
.finance-form-card .gform_wrapper textarea,
.sidebar-form-card .gform_wrapper input,
.sidebar-form-card .gform_wrapper select,
.sidebar-form-card .gform_wrapper textarea {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
}

/* Radio + checkbox + consent label colours handled by the explicit rules above */

/* Required asterisk stays red (universal) */
.gform_wrapper .gfield_required { color: #E04444 !important; }

/* Description / hint text */
.gform_wrapper .gfield_description { opacity: 0.7; }

/* Section headings (Step 1, Step 2 etc) */
.gform_wrapper .gsection { border-bottom-color: var(--border) !important; }

/* Testimonials plugin wrapper — gives plugin output the same margin as the cards grid */
.testimonials-plugin-wrap { margin-top: 24px; }
.testimonials-plugin-wrap > * { max-width: 100%; }

/* ── WhatsApp button (semantic universal green) ── */
.btn--whatsapp { background: #25D366; color: #FFFFFF; border: 1px solid #25D366; }
.btn--whatsapp:hover { background: #20B558; border-color: #20B558; color: #FFFFFF; }

/* ════════════════════════════════════════════
   GCM — Topbar surface scoping
   (.topbar is a SIBLING of .site-header, not a child)
   ════════════════════════════════════════════ */
.topbar a,
.topbar span,
.topbar__hours,
.topbar__phone { color: var(--topbar-text); }
.topbar a:hover,
.topbar__phone:hover,
.topbar__hours:hover { color: var(--topbar-hover); }

/* ════════════════════════════════════════════
   GCM — Filter Sidebar surface
   ════════════════════════════════════════════ */
.filter-sidebar {
    background: var(--filter-bg);
    color: var(--filter-text);
    border-color: var(--border);
}
.filter-sidebar__title,
.filter-sidebar h2,
.filter-group__label { color: var(--filter-heading); }
.filter-sidebar__clear,
.filter-sidebar a { color: var(--filter-accent); }
.filter-select,
.filter-sidebar input[type="text"],
.filter-sidebar input[type="number"] {
    background: var(--filter-bg);
    color: var(--filter-heading);
    border: 1px solid var(--border);
}
.filter-select:focus { border-color: var(--filter-accent); }
.filter-sidebar__empty { color: var(--filter-text); background: var(--filter-bg); }

/* ════════════════════════════════════════════
   GCM — Homepage New Arrivals cards: taller, full image
   ════════════════════════════════════════════ */
.featured-section .vehicle-card__img {
    height: 280px;
    background: var(--vcard-bg);
}
.featured-section .vehicle-card__img img {
    object-fit: contain;
    background: var(--vcard-bg);
}

/* ════════════════════════════════════════════
   GCM — Trust strip: clearer separation from footer
   ════════════════════════════════════════════ */
.trust-bar {
    background: var(--page-bg);
    padding: 28px 0;
    margin: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.trust-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.trust-logos__item {
    color: var(--page-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0;
    border: none;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}
.trust-logos__item:hover { opacity: 1; }
.trust-logos__item--gold { color: var(--accent); opacity: 1; }

/* ════════════════════════════════════════════
   GCM — Comprehensive button overrides (final, defensive)
   These win all specificity battles so every button respects
   the Customizer Button colour settings.
   ════════════════════════════════════════════ */

/* PRIMARY (filled) — used by .btn--gold, .btn-gold, GF submit buttons */
.btn--gold,
.btn-gold,
a.btn--gold,
a.btn-gold,
button.btn--gold,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 1px solid var(--btn-bg) !important;
}
.btn--gold:hover,
.btn-gold:hover,
a.btn--gold:hover,
button.btn--gold:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover {
    background: var(--btn-hover) !important;
    border-color: var(--btn-hover) !important;
    color: var(--btn-text) !important;
}

/* OUTLINE — used by .btn--outline ("View All Stock", etc) */
.btn--outline,
a.btn--outline,
button.btn--outline {
    background: transparent !important;
    color: var(--btn-bg) !important;
    border: 1px solid var(--btn-bg) !important;
}
.btn--outline:hover,
a.btn--outline:hover,
button.btn--outline:hover {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-bg) !important;
}

/* CTA BAND — buttons sit on accent-coloured background, need contrast */
.cta-band .btn,
.cta-band .btn--dark,
.cta-band .btn--gold,
.cta-band a.btn,
.cta-band a.btn--dark,
.cta-band a.btn--gold {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
    border: 1px solid var(--page-bg) !important;
}
.cta-band .btn:hover,
.cta-band .btn--dark:hover,
.cta-band .btn--gold:hover,
.cta-band a.btn:hover {
    background: var(--page-heading) !important;
    color: var(--page-bg) !important;
    border-color: var(--page-heading) !important;
}
.cta-band .btn--outlined,
.cta-band .btn.btn--outlined,
.cta-band .btn--dark.btn--outlined {
    background: transparent !important;
    color: var(--page-bg) !important;
    border: 1px solid var(--page-bg) !important;
}
.cta-band .btn--outlined:hover {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
}

/* WhatsApp button — always green (universal convention) — wins over button vars */
.btn--whatsapp,
a.btn--whatsapp,
button.btn--whatsapp {
    background: #25D366 !important;
    color: #FFFFFF !important;
    border: 1px solid #25D366 !important;
}
.btn--whatsapp:hover,
a.btn--whatsapp:hover {
    background: #20B558 !important;
    border-color: #20B558 !important;
    color: #FFFFFF !important;
}

/* ════════════════════════════════════════════
   GCM — Footer spacing refinement
   ════════════════════════════════════════════ */
.site-footer { padding: 56px 0 0; }
.site-footer__bottom { padding: 18px 0; border-top: 1px solid var(--border); }
.footer-col__title { margin-bottom: 14px; }
.footer-col__about { margin-top: 12px; line-height: 1.65; }
.footer-col__links li { margin-bottom: 6px; }
.footer-col__contact li { margin-bottom: 8px; line-height: 1.55; }

/* CSSEOF marker */

/* ════════════════════════════════════════════
   GCM — Final surface corrections
   ════════════════════════════════════════════ */

/* Filter dropdown <option> elements — black-on-black fix */
.filter-select option,
.filter-sidebar select option {
    background: var(--filter-bg);
    color: var(--filter-heading);
}
.filter-select,
.filter-sidebar select {
    color: var(--filter-heading);
}

/* Accreditation card name → use accent (overrides default card-heading) */
.acc-card__name { color: var(--accent); }

/* ════════════════════════════════════════════
   GCM — Steps / Benefits grid (was missing layout)
   Used on Finance (steps) and Sell (benefits) pages.
   ════════════════════════════════════════════ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.step-card {
    position: relative;
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 28px 24px 24px;
    overflow: hidden;
}
.step-card__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 12px;
    opacity: 0.9;
}
.step-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--card-heading);
    margin-bottom: 8px;
}
.step-card__desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--card-text);
    margin: 0;
}
@media (max-width: 600px) {
    .steps-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   GCM — PHASE A: Contact page + form cards + footer layout
   (These classes were output by templates but had no CSS.)
   ════════════════════════════════════════════ */

/* ── Contact page: methods row above + form below ── */
.contact-layout {
    display: block;
}
.contact-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
@media (max-width: 900px) {
    .contact-methods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .contact-methods { grid-template-columns: 1fr; }
}

/* Form sits below the cards, matching the row width */
.contact-form-card,
.contact-layout > .finance-form-card {
    max-width: none;
    margin: 0;
}
.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: var(--transition);
}
a.contact-method:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.contact-method__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-alpha);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}
.contact-method__icon--wa {
    background: rgba(37,211,102,0.12);
    border-color: rgba(37,211,102,0.4);
    color: #25D366;
}
.contact-method h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--card-heading);
    margin: 0 0 4px;
}
.contact-method p {
    font-size: 13.5px;
    color: var(--card-text);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}
.contact-method__hours {
    font-size: 12px !important;
    color: var(--card-text) !important;
    opacity: 0.75;
    margin-top: 4px !important;
}
.contact-method--static { cursor: default; }

/* ── Form card (Contact / Finance / Sell) ── */
.finance-form-card {
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.finance-form-card .section__title { color: var(--card-heading); }
.finance-form-card .section__sub { color: var(--card-text); }
.finance-form-card .section__header { margin-bottom: 24px; }
.contact-form-card { margin-top: 0; }

/* Form inputs inside form cards use page-bg for contrast against card */
.finance-form-card .gform_wrapper input[type="text"],
.finance-form-card .gform_wrapper input[type="email"],
.finance-form-card .gform_wrapper input[type="tel"],
.finance-form-card .gform_wrapper input[type="number"],
.finance-form-card .gform_wrapper select,
.finance-form-card .gform_wrapper textarea {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--border) !important;
}
.finance-form-card .gform_wrapper .gfield_label,
.finance-form-card .gform_wrapper .gsection_title { color: var(--card-heading) !important; }

/* ── Map section ── */
.map-section {
    width: 100%;
    line-height: 0;
    border-top: 1px solid var(--border);
}
.map-section iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* ── Footer layout (classes the template actually uses) ── */
.footer-col__brand { margin-bottom: 14px; }
.footer-col__brand-name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--footer-heading);
}
.footer-col__brand img { max-height: 48px; width: auto; }
.footer-col__logo { max-height: 48px; width: auto; max-width: 220px; object-fit: contain; }
.footer-col__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--footer-heading);
    margin-bottom: 14px;
}
.footer-col__about {
    font-size: 13px;
    color: var(--footer-text);
    line-height: 1.65;
    margin-top: 12px;
}
.footer-col__links { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
.footer-col__links a { font-size: 13px; color: var(--footer-link); transition: var(--transition); }
.footer-col__links a:hover { opacity: 0.75; }
.footer-col__contact { list-style: none; padding: 0; margin: 0; }
.footer-col__contact li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--footer-text);
    margin-bottom: 8px;
    line-height: 1.55;
}
.footer-col__contact svg { flex-shrink: 0; margin-top: 3px; color: var(--footer-link); }
.footer-col__contact a { color: var(--footer-link); }
.footer-col__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.site-footer__copy { font-size: 12px; color: var(--footer-text); opacity: 0.7; text-align: center; margin: 0; }
@media (max-width: 1100px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   GCM — Price card disclaimer footnote (was missing CSS)
   ════════════════════════════════════════════ */
.price-card__disclaimer {
    font-size: 10.5px;
    line-height: 1.55;
    color: var(--vcard-text);
    opacity: 0.7;
    padding: 12px 20px 16px;
    margin: 0;
    font-style: italic;
}

/* Consent links (e.g. "Privacy Policy") keep accent for visibility */
.gform_wrapper .ginput_container_consent label a,
.gform_wrapper .gfield_consent_description a,
.gform_wrapper .gfield_html a { color: var(--accent); text-decoration: underline; }

/* ════════════════════════════════════════════
   GCM — Gravity Forms complex sub-field labels
   Fixes First/Last name + Address sub-labels overlapping inputs
   ════════════════════════════════════════════ */

/* Complex field wrapper — flex layout for first/last side-by-side */
.gform_wrapper .ginput_complex {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.gform_wrapper .ginput_complex > span,
.gform_wrapper .ginput_complex .name_first,
.gform_wrapper .ginput_complex .name_last,
.gform_wrapper .ginput_complex .name_middle,
.gform_wrapper .ginput_complex .name_prefix,
.gform_wrapper .ginput_complex .name_suffix,
.gform_wrapper .ginput_complex .address_line_1,
.gform_wrapper .ginput_complex .address_line_2,
.gform_wrapper .ginput_complex .address_city,
.gform_wrapper .ginput_complex .address_state,
.gform_wrapper .ginput_complex .address_zip,
.gform_wrapper .ginput_complex .address_country {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 140px;
    min-width: 0;
}

/* Sub-label appears BELOW the input (GF's "below_input" position) */
.gform_wrapper .ginput_complex label,
.gform_wrapper .ginput_complex .gfield_label {
    display: block !important;
    order: 2;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: inherit !important;
    opacity: 0.75;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

/* The input comes first in visual order */
.gform_wrapper .ginput_complex input {
    order: 1;
    margin-bottom: 0 !important;
}

/* Select element placeholder + value text */
.gform_wrapper select {
    color: var(--page-heading) !important;
}
.gform_wrapper select option {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
}

/* Inside card surfaces (contact/finance/sell form cards), select inherits card scheme */
.finance-form-card .gform_wrapper select option,
.contact-form-card .gform_wrapper select option {
    background: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
}

/* ════════════════════════════════════════════
   GCM — Select element vertical alignment
   Stops the value/placeholder being pushed down inside the field
   ════════════════════════════════════════════ */
.gform_wrapper select,
.gform_wrapper .ginput_container_select select {
    padding: 9px 12px !important;
    line-height: 1.4 !important;
    min-height: 42px !important;
    vertical-align: middle !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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='%23999' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px !important;
}

/* ════════════════════════════════════════════
   GCM v1.3.0 — Feature batch CSS
   Container narrow + social row + cookie banner +
   sales person + showroom photos + partners + privacy + locations
   ════════════════════════════════════════════ */

/* Narrow container modifier (used by privacy, finance, sell, contact) */
.container.container--narrow { max-width: 880px; }

/* ── Social media icons (footer) ── */
.social-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--footer-bg);
    color: var(--footer-text);
    border: 1px solid var(--border);
    transition: all 0.25s ease;
    text-decoration: none;
}
.social-icon svg { width: 18px; height: 18px; display: block; }
.social-icon:hover { transform: translateY(-2px); }
.social-icon--facebook:hover  { background: #1877F2; border-color: #1877F2; color: #FFFFFF; }
.social-icon--instagram:hover { background: #E4405F; border-color: #E4405F; color: #FFFFFF; }
.social-icon--youtube:hover   { background: #FF0000; border-color: #FF0000; color: #FFFFFF; }
.social-icon--tiktok:hover    { background: var(--page-heading); border-color: var(--page-heading); color: var(--page-bg); }

.site-footer__social {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    background: var(--footer-bg);
}

/* ── Footer bottom — copyright + FSP + privacy ── */
.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.site-footer__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
}
.site-footer__fsp {
    color: var(--footer-text);
    opacity: 0.85;
    letter-spacing: 0.5px;
}
.site-footer__privacy {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer__privacy:hover { color: var(--accent); }

/* ── Sales person card (single listing sidebar) ── */
.sales-person-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}
.sales-person-card__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--card-text);
    opacity: 0.75;
    margin: 0 0 6px;
}
.sales-person-card__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--card-heading);
    margin: 0 0 14px;
}

/* ── Showroom photo gallery (About page) ── */
.showroom-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.showroom-photo {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--card-bg);
}
.showroom-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.showroom-photo:hover img { transform: scale(1.04); }

/* ── Partners block (Finance + Warranty on About) ── */
.partners-block { margin-bottom: 48px; }
.partners-block:last-child { margin-bottom: 0; }
.partners-block__title {
    text-align: center;
    margin-bottom: 32px;
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    align-items: center;
    justify-items: center;
}
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    padding: 14px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.25s ease;
    text-decoration: none;
}
.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
.partner-logo:hover img { filter: grayscale(0%); opacity: 1; }
.partner-logo:hover { border-color: var(--accent-border); transform: translateY(-2px); }

/* ── Privacy Policy content ── */
.privacy-content {
    color: var(--page-text);
    font-size: 15px;
    line-height: 1.75;
}
.privacy-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--page-heading);
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.01em;
}
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--page-heading);
    margin: 24px 0 10px;
}
.privacy-content p { margin: 0 0 14px; }
.privacy-content ul, .privacy-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.privacy-content li { margin-bottom: 6px; }
.privacy-content a { color: var(--accent); text-decoration: underline; }
.privacy-content a:hover { opacity: 0.8; }
.privacy-content strong { color: var(--page-heading); font-weight: 700; }
.privacy-content em { color: var(--page-text); opacity: 0.75; }

/* ── Additional locations (Contact page) ── */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}
.location-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    color: var(--card-text);
}
.location-card__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--card-heading);
    margin: 0 0 10px;
}
.location-card__address {
    font-style: normal;
    color: var(--card-text);
    margin-bottom: 14px;
    line-height: 1.55;
}
.location-card__contacts {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
}
.location-card__contacts li { color: var(--card-text); }
.location-card__contacts strong { color: var(--card-heading); margin-right: 4px; }
.location-card__contacts a { color: var(--card-text); text-decoration: none; }
.location-card__contacts a:hover { color: var(--accent); }
.location-card__map {
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 12px;
}
.location-card__map iframe { display: block; filter: grayscale(0.3) contrast(1.05); }

/* ── Cookie consent banner (bottom sticky) ── */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: var(--card-bg);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
    transform: translateY(100%);
    transition: transform 0.35s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
    flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 320px; min-width: 0; }
.cookie-banner__heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--card-heading);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cookie-banner__body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--card-text);
    margin: 0;
}
.cookie-banner__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cookie-banner__link {
    font-size: 12px;
    color: var(--accent);
    text-decoration: underline;
    margin-right: 4px;
}
.cookie-banner__link:hover { opacity: 0.8; }
.cookie-banner__btn { min-width: 90px; }
.cookie-banner__btn--reject {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--card-heading);
}
.cookie-banner__btn--reject:hover {
    background: var(--card-bg);
    border-color: var(--card-heading);
    color: var(--card-heading);
}

@media (max-width: 640px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    .cookie-banner__actions { justify-content: center; }
}

/* ════════════════════════════════════════════
   GCM v1.3.2 — Dealer fees block in price card
   ════════════════════════════════════════════ */
.price-card__dealer-fees {
    margin-top: 12px;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--border);
    background: var(--vcard-bg);
}
.price-card__dealer-fees-heading {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--vcard-text);
    opacity: 0.75;
    margin: 0 0 10px;
}
.price-card__dealer-fee {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    padding: 4px 0;
    color: var(--vcard-text);
}
.price-card__dealer-fee-label { opacity: 0.9; }
.price-card__dealer-fee-amount { font-weight: 600; }
.price-card__dealer-fee--total {
    border-top: 1px dashed var(--border);
    margin-top: 4px;
    padding-top: 8px;
    font-size: 14px;
}
.price-card__dealer-fee--total .price-card__dealer-fee-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    opacity: 1;
}
.price-card__dealer-fee--total .price-card__dealer-fee-amount {
    font-weight: 700;
    color: var(--vcard-text);
}

/* ════════════════════════════════════════════
   GCM v1.3.4 — Trust badge logos
   Natural-colour brand marks, height-locked for uniform baseline
   ════════════════════════════════════════════ */
.trust-logos__item--has-logo {
    padding: 0;
    border: none;
    background: transparent;
    opacity: 1;
}
.trust-logos__logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.trust-logos__item--has-logo:hover .trust-logos__logo {
    opacity: 0.85;
    transform: translateY(-1px);
}
.trust-logos__text {
    display: inline-block;
}

/* ════════════════════════════════════════════
   GCM v1.3.8 — Vehicle gallery polish + lightbox cues
   ════════════════════════════════════════════ */

/* Main image link (lightbox trigger) — visual hover cue */
/* Lightbox link wrapper — must match the gallery container EXACTLY
   and force its inner img to fit, overriding the HTML width/height attrs */
.listing-gallery__main .gallery-main-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    position: relative;
}
.listing-gallery__main .gallery-main-link img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gallery-main-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.25s ease;
    pointer-events: none;
}
.gallery-main-link:hover::after { background: rgba(0,0,0,0.08); }

/* Zoom indicator badge */
.gallery-main-link::before {
    content: '';
    position: absolute;
    top: 16px; left: 16px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'/%3e%3cline x1='11' y1='8' x2='11' y2='14'/%3e%3cline x1='8' y1='11' x2='14' y2='11'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gallery-main-link:hover::before { opacity: 1; }

/* Thumbnails — prevent compression when many photos */
.gallery-thumb { flex-shrink: 0; }
.gallery-thumb--active { border-color: var(--accent); }

/* GLightbox custom theme — match brand, prominent close button.
   IMPORTANT: .gclose / .gnext / .gprev are TOP-LEVEL classes in GLightbox 3.3.1,
   NOT nested under .glightbox-clean. */
.gclose, .gnext, .gprev {
    background-color: rgba(0,0,0,0.7) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.gclose:hover, .gnext:hover, .gprev:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: scale(1.08);
}
.gclose {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
}
.gclose svg, .gnext svg, .gprev svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}
.gclose .garrow, .gnext .garrow, .gprev .garrow,
.gclose svg path, .gnext svg path, .gprev svg path,
.gclose svg line, .gnext svg line, .gprev svg line {
    stroke: #FFFFFF !important;
    stroke-width: 2.5 !important;
}

/* Cursor hint on backdrop — "click to close" */
.goverlay { cursor: zoom-out; }
.gslide { cursor: default; }

.glightbox-clean .gslide-title {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.glightbox-clean .gslide-description { background: rgba(0,0,0,0.85); }

/* ════════════════════════════════════════════
   GCM v1.4.3 — MOBILE RESPONSIVENESS PASS
   Coordinated fix for horizontal overflow, cookie banner,
   gallery on mobile, card padding, title sizing.
   ════════════════════════════════════════════ */

/* ── PASS A: Stop horizontal overflow at root ── */
/* Safety net: nothing should ever push the page wider than the viewport */
html, body { overflow-x: hidden; max-width: 100%; }

/* Grid items default to min-width: auto which lets them grow wider than
   their grid track when children have intrinsic widths. Force them to 0
   so the grid actually constrains them. */
.listing-main,
.listing-sidebar {
    min-width: 0;
    max-width: 100%;
}

/* Long text strings — emails, model names, URLs — must wrap, not overflow. */
.listing-desc__content,
.dealer-info-card__address,
.dealer-info-card__contacts,
.price-card__detail,
.price-card__detail-val,
.spec-row__val,
.cookie-banner__body {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ── PASS B: Cookie banner mobile ── */
@media (max-width: 640px) {
    .cookie-banner {
        max-height: 85vh;
        overflow-y: auto;
    }
    .cookie-banner__inner {
        padding: 14px 16px;
        gap: 12px;
    }
    .cookie-banner__heading { font-size: 12px !important; }
    .cookie-banner__body { font-size: 12.5px !important; line-height: 1.5; }
    .cookie-banner__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .cookie-banner__link {
        text-align: center;
        margin: 0 0 4px;
        font-size: 12px;
    }
    .cookie-banner__btn { width: 100%; min-width: 0; }
}

/* ── PASS C: Gallery on mobile ── */
@media (max-width: 768px) {
    /* Hide the zoom-in badge entirely — mobile has no hover, so it'd
       just stick in the wrong state */
    .gallery-main-link::before { display: none; }

    /* Ensure the gallery image always fits its container properly */
    .listing-gallery__main {
        height: 260px;
        background: var(--dark-3);
    }
    .listing-gallery__main img,
    .listing-gallery__main .gallery-main-link img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .listing-gallery__main { height: 240px; }
}

/* ── PASS D: Card padding reductions on mobile ── */
@media (max-width: 640px) {
    .listing-desc,
    .listing-specs,
    .sidebar-form-card,
    .finance-form-card,
    .dealer-info-card { padding: 16px; }
    .price-card__details { padding: 16px; }
    .price-card__actions { padding: 16px; gap: 8px; }
    .price-card__header { padding: 20px 16px; }
    .price-card__dealer-fees { padding: 14px 16px 16px; }

    /* Reduce excessive margins on listing-page itself */
    .listing-page { padding: 24px 16px 60px; }
}

/* ── PASS E: Title sizing safety on small screens ── */
@media (max-width: 480px) {
    .listing-header__title {
        font-size: 28px !important;
        word-break: break-word;
        line-height: 1.05;
    }
    .listing-header__meta { font-size: 13px; }
}

/* ── PASS F: Trust bar + footer mobile polish ── */
@media (max-width: 640px) {
    .trust-logos {
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
    }
    .trust-logos__item { padding: 4px 8px; }
    .footer-col__title { font-size: 13px; }
    .footer-col__about,
    .footer-col__links a,
    .footer-col__contact { font-size: 13px; }
    .site-footer__copy { font-size: 11px; text-align: center; }
}

/* ── Bonus: Topbar on very small screens ── */
@media (max-width: 480px) {
    .topbar__inner { padding: 0 12px; }
    .topbar__phone, .topbar__whatsapp { font-size: 12px; }
    .topbar__phone svg, .topbar__whatsapp svg { width: 11px; height: 11px; }
}

/* ── Bonus: Sidebar (filters, etc.) mobile ── */
@media (max-width: 640px) {
    .breadcrumb { font-size: 10px; gap: 4px; }
    .breadcrumb__sep { margin: 0 1px; }
}

/* ════════════════════════════════════════════
   GCM v1.4.4 — MOBILE UX PASS
   Content reorder, hide redundant FAB, hide arrows (swipe replaces),
   pre-approval strip fix, cookie banner viewport sizing, safe-area.
   ════════════════════════════════════════════ */

/* ── PASS K: Mobile content reorder ──
   Use display:contents so children of listing-main and listing-sidebar
   become direct grid items, then order them by mobile priority. */
@media (max-width: 900px) {
    .listing-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .listing-main,
    .listing-sidebar {
        display: contents;
    }
    /* Mobile priority order: gallery → title → PRICE → desc → specs → enquiry → dealer */
    .listing-gallery     { order: 1; }
    .listing-header      { order: 2; margin-bottom: 0; }
    .price-card          { order: 3; }
    .listing-desc        { order: 4; }
    .listing-specs       { order: 5; }
    .sidebar-form-card   { order: 6; }
    .dealer-info-card    { order: 7; }
}

/* ── PASS L: Hide redundant floating UI on mobile ── */
@media (max-width: 768px) {
    /* WhatsApp FAB is redundant — topbar already has the WhatsApp button */
    .whatsapp-fab { display: none !important; }

    /* Gallery prev/next arrows — swipe replaces them on touch devices */
    .gallery-nav { display: none !important; }

    /* Image counter stays — useful indicator of position */
    .gallery-counter {
        bottom: 12px;
        right: 12px;
        font-size: 11px;
        padding: 5px 10px;
    }

    /* Scroll-to-top: smaller but keep it */
    .scroll-top-btn {
        width: 38px;
        height: 38px;
        bottom: 20px;
        right: 16px;
    }
    .scroll-top-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ── PASS M: Pre-approval strip mobile fix ── */
@media (max-width: 640px) {
    .preapproval-strip {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 16px;
        gap: 14px;
        margin-top: 24px;
    }
    .preapproval-strip__text h3 { font-size: 17px; }
    .preapproval-strip__text p { font-size: 13px; }
    .preapproval-strip .btn {
        width: 100%;
        flex-shrink: 1;
        text-align: center;
        justify-content: center;
    }
}

/* ── PASS N: Cookie banner — beat Android accessibility scaling
   by using viewport-based units that aren't affected by device text scaling ── */
@media (max-width: 640px) {
    .cookie-banner__heading {
        font-size: clamp(11px, 3vw, 13px) !important;
        letter-spacing: 0.3px;
    }
    .cookie-banner__body {
        font-size: clamp(11px, 3.2vw, 14px) !important;
        line-height: 1.5;
    }
    .cookie-banner__link {
        font-size: clamp(11px, 3vw, 13px) !important;
    }
    .cookie-banner__btn {
        font-size: clamp(11px, 3.2vw, 14px) !important;
        padding: 10px 16px;
    }
}

/* ── PASS O: Safe-area bottom padding so last content doesn't sit
   under the scroll-to-top button ── */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    /* Cookie banner shouldn't get the body padding pushing it up */
    .cookie-banner {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ════════════════════════════════════════════
   GCM v1.4.5 — SLIM COOKIE BAR
   Single-row horizontal bar at the bottom. Compact across all
   screen sizes. Overrides earlier banner styles by source order.
   ════════════════════════════════════════════ */

.cookie-banner {
    background: var(--card-bg, #0A0A0A) !important;
    border-top: 2px solid var(--accent) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    max-height: none !important;
    overflow: visible !important;
}

.cookie-banner__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 20px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    flex-wrap: nowrap !important;
}

/* Hide the heading entirely — body text alone communicates the message */
.cookie-banner__heading { display: none !important; }

.cookie-banner__text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cookie-banner__body {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: var(--card-text) !important;
}

.cookie-banner__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

.cookie-banner__link {
    font-size: 11.5px !important;
    color: var(--accent) !important;
    text-decoration: underline;
    margin: 0 !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.cookie-banner__btn {
    padding: 7px 14px !important;
    font-size: 12px !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap;
}

/* Mobile: tighter padding, slightly smaller text — still one row */
@media (max-width: 640px) {
    .cookie-banner__inner {
        padding: 9px 12px !important;
        gap: 10px !important;
    }
    .cookie-banner__body {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .cookie-banner__link {
        font-size: 10.5px !important;
    }
    .cookie-banner__btn {
        padding: 6px 11px !important;
        font-size: 11px !important;
    }
}

/* Very small screens: ultra-compact */
@media (max-width: 380px) {
    .cookie-banner__inner {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    .cookie-banner__body { font-size: 10.5px !important; }
    .cookie-banner__btn {
        padding: 5px 9px !important;
        font-size: 10.5px !important;
    }
}

/* ════════════════════════════════════════════
   GCM v1.4.6 — FAQ ACCORDION
   Surface-aware accordion styling for the FAQ page.
   Hover affordance: border + lift + question text shifts to accent.
   ════════════════════════════════════════════ */

/* Section block — group of related Q&As */
.faq-section {
    margin-bottom: 48px;
}
.faq-section:last-child {
    margin-bottom: 0;
}

.faq-section__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--page-heading);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    display: flex;
    align-items: center;
    gap: 12px;
}
.faq-section__icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.faq-section__icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Individual Q&A item — uses native <details>/<summary> */
.faq-item {
    border: 1px solid var(--border, #DDD);
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--overlay-subtle, rgba(0,0,0,0.025));
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}

/* Hover state — Pass B: border + lift + question colour shift */
.faq-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.faq-item:hover .faq-item__q {
    color: var(--accent);
}

/* Open state — accent border, accent text, slight bg tint */
.faq-item[open] {
    border-color: var(--accent);
    background: var(--accent-alpha, rgba(0,0,0,0.04));
}
.faq-item[open] .faq-item__q {
    color: var(--accent);
}

/* The clickable question (summary element) */
.faq-item__q {
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 16px;
    color: var(--page-heading);
    padding: 18px 52px 18px 20px;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    transition: color 0.2s ease;
    line-height: 1.35;
}

/* Strip default disclosure markers */
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { display: none; }
.faq-item__q::-moz-list-bullet { display: none; }

/* Custom chevron arrow — pointing down by default */
.faq-item__q::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

/* Rotated up when item is open */
.faq-item[open] .faq-item__q::after {
    transform: translateY(-25%) rotate(-135deg);
}

/* Answer panel */
.faq-item__a {
    padding: 0 20px 18px;
    color: var(--page-text);
    line-height: 1.6;
    font-size: 14.5px;
    animation: faqOpen 0.3s ease;
}
.faq-item__a p {
    margin: 0;
}
.faq-item__a p + p {
    margin-top: 12px;
}
.faq-item__a a {
    color: var(--accent);
    text-decoration: underline;
}

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile sizing */
@media (max-width: 640px) {
    .faq-section { margin-bottom: 36px; }
    .faq-section__title {
        font-size: 22px;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 16px;
    }
    .faq-section__icon { font-size: 22px; }
    .faq-section__icon-img { width: 28px; height: 28px; }
    .faq-item__q {
        font-size: 14.5px;
        padding: 14px 46px 14px 16px;
    }
    .faq-item__q::after {
        right: 16px;
        width: 9px;
        height: 9px;
    }
    .faq-item__a {
        padding: 0 16px 14px;
        font-size: 13.5px;
    }
}

/* Disable hover lift on touch devices — prevents sticky hover state */
@media (hover: none) {
    .faq-item:hover {
        transform: none;
        box-shadow: none;
    }
    .faq-item:hover .faq-item__q {
        color: var(--page-heading);
    }
}

/* ════════════════════════════════════════════
   GCM v1.4.7 — ABOUT PAGE POLISH
   Brighter value icons, centered accreditations grid (handles 2/3/4 items),
   CTA band button styling for accent backgrounds.
   ════════════════════════════════════════════ */

/* ── Values icons: vivid accent-coloured SVG on subtle badge ── */
.why-item__icon {
    background: var(--accent-alpha, rgba(177,16,50,0.1)) !important;
    border: 1px solid var(--accent-border, rgba(177,16,50,0.35)) !important;
}
.why-item__icon svg {
    color: var(--accent) !important;
    stroke: var(--accent) !important;
    width: 28px;
    height: 28px;
}
.why-item:hover .why-item__icon {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}
.why-item:hover .why-item__icon svg {
    color: var(--btn-text, #fff) !important;
    stroke: var(--btn-text, #fff) !important;
}

/* ── Accreditations / Partners grid: centered when fewer than 4 items ── */
.acc-grid-OLD {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px)) !important;
    justify-content: center !important;
    gap: 24px !important;
}

/* ── CTA Band: white buttons that work on the accent-coloured bar ── */
.cta-band__sub {
    color: var(--cta-sub-color, rgba(var(--scrim-rgb), 0.72));
    font-weight: 500;
}
.cta-band .btn,
.cta-band .btn--dark,
.cta-band .btn--dark.btn--outlined {
    border-width: 2px;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Primary action: solid white with accent text */
.cta-band .btn--dark {
    background: #fff !important;
    color: var(--accent) !important;
    border: 2px solid #fff !important;
}
.cta-band .btn--dark:hover {
    background: #0A0A0A !important;
    color: #fff !important;
    border-color: #0A0A0A !important;
}
/* Secondary action: outlined white */
.cta-band .btn--dark.btn--outlined {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
.cta-band .btn--dark.btn--outlined:hover {
    background: #fff !important;
    color: var(--accent) !important;
    border-color: #fff !important;
}

/* ── Story text — tighter rhythm so it reads cleaner ── */
.story-text p {
    font-size: 15.5px;
    line-height: 1.8;
}
.story-text p + p {
    margin-top: 14px;
}

/* ════════════════════════════════════════════
   GCM v1.4.8 — FIX v1.4.7 MISSTEPS
   - Acc-grid: stretch cards full-width (as originally requested), not center
   - Remove drop cap (looked terrible with "M&I" leading the paragraph)
   - Keep the good parts: values icons, CTA band buttons
   ════════════════════════════════════════════ */

/* Cards stretch to fill row evenly: 2 items = 50% each, 4 items = 25% each */
.acc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 24px !important;
    justify-content: stretch !important;
}

/* Kill the drop cap completely — it didn't read well on "M&I Motors..." content */
.story-text p:first-of-type::first-letter,
.story-text p::first-letter {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    float: none !important;
    margin: 0 !important;
    line-height: inherit !important;
}

/* ════════════════════════════════════════════
   GCM v1.4.9 — ABOUT STORY 2-COL + SHOWROOM POLISH
   - Story section: text-left / image-right when story_image is set
   - Showroom photos: max-height cap so single photo doesn't dominate
   ════════════════════════════════════════════ */

/* 2-col story layout (only renders when story_image ACF field is set) */
.story-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: start;
}
.story-layout__text { min-width: 0; }
.story-layout__image { min-width: 0; }

.story-image {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--overlay-subtle, rgba(0,0,0,0.04));
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    position: sticky;
    top: 100px;
}
.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet: tighten gap, slightly different ratio */
@media (max-width: 1024px) {
    .story-layout {
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
    }
}

/* Mobile: stack, image first (smaller), then text */
@media (max-width: 768px) {
    .story-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .story-layout__image { order: -1; }
    .story-image {
        aspect-ratio: 16 / 10;
        position: static;
        border-radius: 12px;
        max-width: 100%;
    }
}

/* ── Showroom photos: better presentation for any photo count ── */
.showroom-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.showroom-photo {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--overlay-subtle, rgba(0,0,0,0.04));
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.showroom-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.showroom-photo:hover img {
    transform: scale(1.03);
}

/* When only one photo exists, give it a nicer maximum size so it doesn't
   sprawl to full page width as a single oversized banner */
.showroom-photos:has(.showroom-photo:only-child) {
    max-width: 720px;
}
.showroom-photos .showroom-photo:only-child {
    aspect-ratio: 16 / 10;
}

@media (max-width: 640px) {
    .showroom-photos {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .showroom-photos:has(.showroom-photo:only-child) {
        max-width: 100%;
    }
}

/* ════════════════════════════════════════════
   GCM v1.5.0 — STATIC HOMEPAGE HERO + SMOOTH SCROLL
   ════════════════════════════════════════════ */

/* Smooth scroll for in-page anchor links (e.g. "Meet the Team" CTA jumping to #team-heading) */
html { scroll-behavior: smooth; }
/* Account for fixed header when anchoring */
:target { scroll-margin-top: 100px; }
[id] { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ── Static hero — image background with text overlay ── */
.hero-static {
    position: relative;
    /* Hero images are designed at a fixed 1920×700. Matching the container to that
       exact ratio means contain fills it completely — no grey letterbox bands at any
       width. A min-height floor keeps overlay text usable on very narrow screens. */
    aspect-ratio: 1920 / 700;
    min-height: 300px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--page-bg, #000);
    overflow: hidden;
    display: flex;
}

/* Position variants control alignment on .hero-static directly,
   since this is the only flex container with a guaranteed height */
.hero-static--center-left   { align-items: center;    padding-bottom: 0; }
.hero-static--bottom-left   { align-items: flex-end;  padding-bottom: 64px; }
.hero-static--bottom-center { align-items: flex-end;  padding-bottom: 64px; }

/* Scrim variants — gradient that fades from dark side to clear (keep image visible) */
.hero-static__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.hero-static__scrim--center-left {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.65) 30%,
        rgba(0,0,0,0.20) 55%,
        rgba(0,0,0,0) 75%);
}
.hero-static__scrim--bottom-left {
    background: linear-gradient(135deg,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.40) 40%,
        rgba(0,0,0,0) 65%),
    linear-gradient(0deg,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0) 50%);
}
.hero-static__scrim--bottom-center {
    background: linear-gradient(0deg,
        rgba(0,0,0,0.80) 0%,
        rgba(0,0,0,0.45) 30%,
        rgba(0,0,0,0) 60%);
}

/* Container for the overlay text — just a horizontal width constraint */
.hero-static__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}
/* For bottom-center, center the content block horizontally within the container */
.hero-static--bottom-center .hero-static__inner {
    display: flex;
    justify-content: center;
}

/* The content block itself */
.hero-static__content {
    max-width: 620px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hero-static--bottom-center .hero-static__content { text-align: center; align-items: center; }

/* Pill badge */
.hero-static__pill {
    display: inline-block;
    align-self: flex-start;
    background: var(--accent);
    color: var(--btn-text, #fff);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.hero-static--bottom-center .hero-static__pill { align-self: center; }

/* Eyebrow */
.hero-static__eyebrow {
    margin: 0;
    color: var(--accent);
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Headline */
.hero-static__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: #fff;
}
.hero-static__title em {
    color: var(--accent);
    font-style: normal;
}

/* Subtitle */
.hero-static__sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    max-width: 540px;
}

/* CTAs row */
.hero-static__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.hero-static--bottom-center .hero-static__ctas { justify-content: center; }

/* Light outline button variant (white outline on dark hero) */
.btn--outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.btn--outline-light:hover {
    background: #fff;
    color: var(--accent);
}

/* Ghost light button variant (transparent, underlined text, minimal) */
.btn--ghost-light {
    background: transparent;
    color: #fff;
    border: 2px solid transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.btn--ghost-light:hover {
    color: var(--accent);
    background: transparent;
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .hero-static { min-height: 560px; }
    .hero-static__content { max-width: 100%; }
    .hero-static__scrim--center-left {
        background: linear-gradient(0deg,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.55) 50%,
            rgba(0,0,0,0.3) 100%);
    }
    .hero-static__scrim--bottom-left,
    .hero-static__scrim--bottom-center {
        background: linear-gradient(0deg,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.55) 45%,
            rgba(0,0,0,0.2) 80%);
    }
}
@media (max-width: 640px) {
    .hero-static { min-height: 480px; }
    .hero-static--center-left,
    .hero-static--bottom-left,
    .hero-static--bottom-center {
        align-items: flex-end;
        padding-bottom: 40px;
    }
    .hero-static__title { font-size: clamp(32px, 8vw, 48px); }
    .hero-static__sub { font-size: 15px; }
    .hero-static__ctas { flex-direction: column; align-items: stretch; }
    .hero-static__ctas .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── HOMEPAGE SEARCH BAR ─────────────────────────────── */
.home-search {
    background: var(--search-bg, var(--dark-bg));
    color: var(--search-text, var(--page-heading));
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}
.home-search__inner { display: flex; flex-direction: column; gap: 20px; }
.home-search__heading {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: var(--search-text, var(--page-heading));
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0;
}
.home-search__form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}
.home-search__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 160px;
    min-width: 0;
}
.home-search__field--price { flex: 1 1 220px; }
.home-search__field--btn   { flex: 0 0 auto; }
.home-search__label {
    font-family: var(--font-showroom);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--search-text, var(--page-heading));
    opacity: 0.7;
}
.home-search__select,
.home-search__price-input {
    background: var(--page-bg);
    border: 1px solid var(--border);
    color: var(--page-text);
    padding: 10px 14px;
    font-size: 13px;
    font-family: var(--font-showroom);
    border-radius: var(--radius);
    width: 100%;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
}
.home-search__select {
    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='%23666' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
}
.home-search__select:focus,
.home-search__price-input:focus { outline: none; border-color: var(--accent); }
.home-search__price-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}
.home-search__price-sep {
    color: var(--search-text, var(--page-heading));
    opacity: 0.5;
    font-size: 14px;
    text-align: center;
}
.home-search__submit {
    white-space: nowrap;
    height: 42px;
    padding: 0 24px;
    align-self: flex-end;
}

/* Mobile */
@media (max-width: 767px) {
    .home-search { padding: 28px 0; }
    .home-search__form { flex-direction: column; }
    .home-search__field,
    .home-search__field--price,
    .home-search__field--btn { flex: 1 1 100%; }
    .home-search__submit { width: 100%; height: 46px; }
}

/* ════════════════════════════════════════════
   GCM v1.6.5 — COLOUR SYSTEM FIXES
   Override rules that resolve bugs reported on staging:
   1. Heading <em> highlight follows its own variable, not --accent
   2. Price card uses dedicated --price-* variables (not --vcard-*)
   3. Filter sidebar text doesn't leak accent colour to all links
   4. Gravity Forms inputs always readable (explicit text colour)
   5. "Available" green tied to --badge-new-bg, not hardcoded #4CAF50
   ════════════════════════════════════════════ */

/* ── 1. Heading accent highlight — separated from --accent ── */
.hero-static__title em,
.section__title em,
.inner-hero__title em,
.hero-fallback__title em,
.cta-band__title em {
    color: var(--heading-accent) !important;
}

/* ── 2. Price card uses its own dedicated palette ── */
.price-card {
    background: var(--price-bg) !important;
}
.price-card__title,
.price-card__price,
.price-card__detail-val {
    color: var(--price-heading) !important;
}
.price-card__detail,
.price-card__detail-key {
    color: var(--price-text) !important;
}
.price-card__detail-val--green {
    color: var(--badge-new-bg) !important;     /* Fix 5 — uses status badge variable */
}

/* ── 3. Filter sidebar — accent ONLY on active state, not all links ── */
.filter-sidebar a {
    color: var(--filter-text);                  /* base = filter text */
}
.filter-sidebar a:hover {
    color: var(--filter-accent);                /* hover = accent */
}
.filter-sidebar a.is-active,
.filter-sidebar a.current,
.filter-sidebar li.current-cat > a {
    color: var(--filter-accent) !important;     /* active = accent */
}
/* NOTE: .filter-chip--active is NOT in this list because the chip uses
   --filter-accent as its BACKGROUND. The chip's own text colour is set
   separately at the .filter-chip--active rule (white on accent bg). */

/* ── 4. Gravity Forms — explicit colours so text is always readable ── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
    color: var(--card-heading) !important;
    background: var(--card-bg) !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--card-text) !important;
    opacity: 0.7;
}
.gform_wrapper label,
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_complex label {
    color: var(--card-text) !important;
}


/* ════════════════════════════════════════════
   GCM v1.6.6 — EXTENDED COLOUR CONTROL
   1. Outline buttons use dedicated --btn-outline (separate from --btn-bg)
   2. Form inputs use dedicated --form-input-* (decoupled from --card-bg)
   3. Footer links reinforced with !important to override any specificity conflicts
   ════════════════════════════════════════════ */

/* ── Outline buttons — use --btn-outline (falls back to --btn-bg) ── */
.btn--outline,
a.btn--outline,
button.btn--outline {
    background: transparent !important;
    color: var(--btn-outline, var(--btn-bg)) !important;
    border: 1px solid var(--btn-outline, var(--btn-bg)) !important;
}
.btn--outline:hover,
a.btn--outline:hover,
button.btn--outline:hover {
    background: var(--btn-outline, var(--btn-bg)) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-outline, var(--btn-bg)) !important;
}

/* ── Form inputs — dedicated colours, decoupled from card surfaces ── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
    color: var(--form-input-text) !important;
    background: var(--form-input-bg) !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--form-input-text) !important;
    opacity: 0.5;
}
.gform_wrapper label,
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_complex label {
    color: var(--form-label-text) !important;
}

/* ── Footer links — reinforced with !important to ensure control wins ── */
.site-footer a,
.site-footer .footer-col__links a,
.site-footer .footer-col__contact a,
.footer-col__links a,
.footer-col__contact a {
    color: var(--footer-link) !important;
}
.site-footer .footer-col__contact svg,
.footer-col__contact svg {
    color: var(--footer-link) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT B  +  SHARED ADDITIONS  (v1.7.0)
   ═══════════════════════════════════════════════════════════════ */

/* ── Footer buttons (dedicated colours, both layouts) ── */
.footer-btn--browse { background: var(--footer-btn1-bg); color: var(--footer-btn1-text); border: 1px solid var(--footer-btn1-bg); }
.footer-btn--browse:hover { filter: brightness(1.08); color: var(--footer-btn1-text); }
.footer-btn--wa { background: var(--footer-btn2-bg); color: var(--footer-btn2-text); border: 1px solid var(--footer-btn2-bg); }
.footer-btn--wa:hover { filter: brightness(1.08); color: var(--footer-btn2-text); }
.footer-branch { margin-bottom: 14px; }
.footer-branch__name { font-weight: 700; font-size: 13px; color: var(--footer-heading); margin: 0 0 4px; }

/* ── SINCE [year] badge (header logo) ── */
.site-logo__since {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    border-top: 1px solid var(--accent);
    padding-top: 2px;
    margin-left: 10px;
    align-self: center;
    line-height: 1.2;
}

/* ── LAYOUT B: promo band ── */
.promo-band {
    background: linear-gradient(90deg, var(--accent) 0%, var(--dark-bg) 100%);
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    padding: 20px 0;
    overflow: hidden;
}
.promo-band__inner {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.promo-band__since { display: flex; flex-direction: column; line-height: 0.9; padding-right: 24px; border-right: 2px solid rgba(255,255,255,0.2); }
.promo-band__since-word { font-style: italic; font-weight: 800; font-size: 20px; color: #fff; text-transform: uppercase; }
.promo-band__since-year { font-style: italic; font-weight: 900; font-size: 40px; color: #fff; text-transform: uppercase; }
.promo-band__main { display: flex; align-items: center; gap: 16px; }
.promo-band__icon { width: 54px; height: 54px; object-fit: contain; }
.promo-band__headline {
    font-family: var(--font-heading);
    font-weight: 900; font-style: italic; text-transform: uppercase;
    font-size: clamp(24px, 3.2vw, 40px);
    color: #fff; line-height: 1;
}
.promo-band__headline em { color: var(--dark-bg); font-style: italic; }
.promo-band__sub {
    font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    color: rgba(255,255,255,0.9);
    padding-left: 24px; border-left: 2px solid rgba(255,255,255,0.2);
    max-width: 340px;
}

/* ── LAYOUT B: Meet Our Team (full-width homepage section) ── */
.finteam-section { background: var(--dark-bg); border-top: 3px solid var(--accent); padding: 56px 0; }
.finteam-heading {
    font-family: var(--font-heading);
    font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--dark-heading);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 8px; margin: 0 0 24px;
    display: inline-block;
}
.finance-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.finance-logo {
    background: #fff; border-radius: 8px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    padding: 10px; transition: transform 0.15s ease;
}
.finance-logo:hover { transform: translateY(-2px); }
.finance-logo img { max-height: 40px; max-width: 100%; object-fit: contain; }
.finance-logo__text { color: #333; font-weight: 700; font-size: 13px; }

/* Centre a small team when it fits; scroll cleanly when it overflows.
   The margin:auto pseudo-element spacers absorb free space equally when there's
   room (centring the cards), then collapse to nothing on overflow so cards scroll
   from the start with NO clipped ends. This replaces an earlier margin:auto-on-cards
   approach that clipped the first/last card once the row overflowed (8+ members). */
.team-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; justify-content: flex-start; }
.team-scroll::before,
.team-scroll::after { content: ''; margin: auto; flex: 0 0 0px; }
.team-scroll::-webkit-scrollbar { height: 6px; }
.team-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.team-scroll__card {
    flex: 0 0 190px; scroll-snap-align: start;
    background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border);
    padding: 22px 16px; text-align: center;
}
.team-scroll__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; background: var(--dark-bg); }
.team-scroll__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-scroll__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--card-text); }
.team-scroll__name { font-size: 13px; font-weight: 700; color: var(--card-heading); margin: 0 0 2px; }
.team-scroll__role { font-size: 11px; color: var(--card-text); margin: 0 0 8px; }
.team-scroll__phone { display: block; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.team-scroll__contacts { display: flex; gap: 8px; justify-content: center; }
.team-scroll__wa { color: #25D366; }
.team-scroll__email { color: var(--card-text); }
.team-scroll__wa:hover, .team-scroll__email:hover { color: var(--accent); }

/* ── LAYOUT B: showroom tabs + featured ── */
.showroom-hero--b { background: linear-gradient(90deg, var(--accent) 0%, var(--dark-bg) 70%); border-bottom: 1px solid var(--accent); }
.showroom-tabs-wrap { background: var(--dark-bg); border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: var(--header-h); z-index: 40; }
.showroom-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.showroom-tab {
    background: var(--vcard-bg); color: var(--vcard-text);
    border: 1px solid var(--border); border-radius: 22px;
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.15s ease;
}
.showroom-tab:hover { border-color: var(--accent); color: var(--accent); }
.showroom-tab--active { background: var(--accent); color: var(--btn-text); border-color: var(--accent); }
.showroom-tab__count { font-size: 11px; opacity: 0.75; }
.showroom-tab--active .showroom-tab__count { opacity: 0.85; }

.featured-vehicle { margin: 32px 0; }
.featured-vehicle__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.featured-vehicle__card {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
    background: var(--vcard-bg); border: 2px solid var(--accent); border-radius: 12px; overflow: hidden;
}
.featured-vehicle__image {
    min-height: 260px; background-size: cover; background-position: center; background-color: var(--dark-bg);
    position: relative; display: block;
}
.featured-vehicle__badge {
    position: absolute; top: 14px; left: 14px;
    font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 4px; text-transform: uppercase;
}
.featured-vehicle__badge--reserved { background: var(--badge-reserved-bg); color: var(--badge-reserved-text); }
.featured-vehicle__badge--pending { background: var(--badge-pending-bg); color: var(--badge-pending-text); }
.featured-vehicle__badge--sold { background: var(--badge-sold-bg); color: var(--badge-sold-text); }
.featured-vehicle__body { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.featured-vehicle__title { font-family: var(--font-heading); font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; color: var(--vcard-heading); margin: 0 0 6px; }
.featured-vehicle__meta { font-size: 13px; color: var(--vcard-text); margin: 0 0 16px; }
.featured-vehicle__price { font-size: 28px; font-weight: 900; color: var(--accent); margin-bottom: 20px; }
.featured-vehicle__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.showroom-b { padding-top: 24px; }
.vehicle-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ── LAYOUT B: sticky price card (single listing) ── */
.listing-layout--b .listing-sidebar { align-self: start; position: sticky; top: calc(var(--header-h) + 16px); }

/* ── LAYOUT B: related vehicles ── */
.related-vehicles { background: var(--dark-bg); border-top: 1px solid var(--border); padding: 48px 0; }
.related-vehicles__heading { font-family: var(--font-heading); font-size: 24px; font-weight: 900; text-transform: uppercase; color: var(--dark-heading); margin: 0 0 24px; }
.related-vehicles__heading em { color: var(--accent); font-style: normal; }

/* ── LAYOUT B: about team-at-top ── */
.section--team-top { padding-top: 48px; padding-bottom: 24px; }
.team-grid--scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.team-grid--scroll .team-card { flex: 0 0 200px; scroll-snap-align: start; }
.team-grid--scroll::-webkit-scrollbar { height: 6px; }
.team-grid--scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .featured-vehicle__card { grid-template-columns: 1fr; }
    .featured-vehicle__image { min-height: 200px; }
    .vehicle-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .promo-band__inner { justify-content: center; text-align: center; }
    .promo-band__sub { border-left: none; padding-left: 0; }
    .promo-band__since { border-right: none; padding-right: 0; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 8px; }
    .finance-logos { grid-template-columns: 1fr 1fr; }
    .vehicle-grid--4 { grid-template-columns: 1fr; }
    .listing-layout--b .listing-sidebar { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.7.1 — MOCKUP-MATCH FIXES
   ═══════════════════════════════════════════════════════════════ */



/* ── 3. Rebalance gallery vs price card on Layout B ── */
.listing-layout--b { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); }

/* ── 4. Equal-height vehicle cards (fixes showroom row gaps) ── */
.vehicle-grid { align-items: stretch; }
.vehicle-grid .vehicle-card { display: flex; flex-direction: column; height: 100%; }
.vehicle-card__body, .vehicle-card__content { flex: 1 1 auto; display: flex; flex-direction: column; }

/* ── 5. Showroom subtext contrast on Layout B ── */
.showroom-hero--b .showroom-hero__count { color: rgba(255,255,255,0.85); }
/* v1.9.6 — number inherits the surrounding white instead of dark-red accent
   (was unreadable on the dark end of the red gradient). Bold weight still sets it apart. */
.showroom-hero--b .showroom-hero__count strong { color: inherit; }
.showroom-hero--b .section__eyebrow { color: #fff; opacity: 0.9; }

/* ── 6. Team cards on Layout B About — roomier, always show contacts ── */
.team-grid--scroll .team-card { flex: 0 0 210px; padding: 20px 16px; }
.team-grid--scroll .team-card__contacts { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.team-grid--scroll .team-card__contact { display: inline-flex; }

/* ── Story / body text on dark About sections ──
   Only .section--dark needs the forced light colour. Plain .section shows the page
   background, so its text must stay --text-muted (= --page-text) to remain readable
   whatever the palette. (A prior rule here targeted all .section and turned body text
   near-white on light pages — invisible. Removed.) */
.section--dark .story-text p { color: rgba(240,240,240,0.82); }

/* ── 8. Footer "Browse Stock" button — guarantee visible text ── */
.footer-btn--browse { color: var(--footer-btn1-text, #fff) !important; font-weight: 700; }
.footer-btn--wa { color: var(--footer-btn2-text, #fff) !important; font-weight: 700; }

/* ── 9. Gravity Forms — tighten oversized field spacing ── */
.gform_wrapper .gform_body .gfield { margin-bottom: 14px !important; }
.gform_wrapper .gform_body .gsection,
.gform_wrapper .gform_body .gfield--type-section { margin: 14px 0 8px !important; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }
.gform_wrapper .gsection_title { font-size: 15px !important; margin-bottom: 2px !important; }
.gform_wrapper .gfield_html { margin: 6px 0 !important; }
.contact-form-card .gform_wrapper .gform_footer,
.finance-form-card .gform_wrapper .gform_footer { margin-top: 16px !important; padding-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   v1.7.2 — DROPDOWN MENUS + HEADER SPACING
   ═══════════════════════════════════════════════════════════════ */

/* ── Header height: fit taller logos (e.g. logos with a "SINCE" strapline) ── */
:root { --header-h: 84px; }
.site-logo img {
    height: auto;
    max-height: 64px;
    max-width: 260px;
    width: auto;
    object-fit: contain;
}

/* ── DESKTOP DROPDOWNS ── */
.primary-nav__list { position: relative; }
.primary-nav__list li { position: relative; }

/* Submenu panel — hidden by default */
.primary-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--header-bg, #0A0A0A);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* Reveal on hover / keyboard focus */
.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.primary-nav__list .sub-menu li { width: 100%; }
.primary-nav__list .sub-menu li a {
    display: block;
    white-space: normal;
    padding: 9px 16px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--header-text);
    border-radius: 0;
}
.primary-nav__list .sub-menu li a:hover,
.primary-nav__list .sub-menu li a:focus {
    color: var(--header-hover);
    background: var(--overlay-subtle);
}

/* Parent indicator caret */
.primary-nav__list .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.7;
}

/* ── SECOND LEVEL: flyout to the right (e.g. About Us → PAIA → documents) ── */
.primary-nav__list .sub-menu .sub-menu {
    top: -7px;
    left: 100%;
    margin-left: 2px;
}
/* Second-level caret points right, not down */
.primary-nav__list .sub-menu .menu-item-has-children > a::after {
    float: right;
    margin-top: 6px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    border-right: 0;
}
/* Flip flyout to the left if it would overflow the viewport edge */
.primary-nav__list > li:nth-last-child(-n+2) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}

/* ── MOBILE DRAWER: accordion instead of flyouts ── */
/* Accordion toggle button injected by JS */
@media (max-width: 900px) {
    :root { --header-h: 72px; }
    .site-logo img { max-height: 52px; max-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.7.5 — PRIVATE FINANCE + INSURANCE PAGE TEMPLATES
   ═══════════════════════════════════════════════════════════════ */

/* ── Private Finance: intro ── */
.pf-intro { text-align: center; }
.pf-intro__headline {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--accent);
    margin: 0 0 18px;
}
.pf-intro__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 24px;
}
.pf-intro__cta { display: inline-block; }

/* ── Private Finance: content blocks ── */
.pf-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.pf-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 26px 24px;
}
.pf-block__heading {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--card-heading);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 10px;
    margin: 0 0 16px;
}
.pf-block__list { list-style: none; margin: 0; padding: 0; }
.pf-block__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--card-text);
    padding: 7px 0;
}
.pf-block__list li svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }

/* ── Insurance page ── */
.insurance-headline { color: var(--accent); }
.insurance-notes {
    list-style: none;
    margin: 0 0 24px;
    padding: 16px 18px;
    background: var(--dark-bg);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}
.insurance-notes li {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
    padding: 3px 0;
}
.insurance-notes li::before { content: "* "; color: var(--accent); font-weight: 700; }
.insurance-notes__empty {
    font-size: 14px;
    color: var(--text-muted);
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
}

@media (max-width: 680px) {
    .pf-blocks { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   v1.8.0 — LAYOUT B SINGLE LISTING
   Gallery | compact price card, then collapsible detail sections,
   an enquiry modal, and a sticky action bar. Layout A is unaffected.
   ═══════════════════════════════════════════════════════════════ */

/* Columns size to their own content — no stretching, so no voids */
.listing-layout--b { align-items: start; }

/* ── Finance summary link inside the price card ── */
.price-card__finance-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; margin: 2px 0 4px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--price-text, var(--text-muted));
    transition: color 0.15s ease;
}
.price-card__finance-link strong { color: var(--accent); font-weight: 800; }
.price-card__finance-link-cta { color: var(--accent); font-weight: 700; font-size: 12px; white-space: nowrap; }
.price-card__finance-link:hover { color: var(--accent); }

/* ── Single-listing price card buttons ──
   Each is independently editable (Customise → Brand Colours → Price Card).
   Defaults establish a hierarchy: Enquire is the one bold action; Call is a neutral
   dark; WhatsApp and Pre-Approved read as outlines so the card stays calm. */
.price-cta { font-weight: 700; text-align: center; }

.price-cta--enquire {
    background: var(--enquire-bg, var(--accent));
    color: var(--enquire-text, #fff);
    border: 1px solid var(--enquire-bg, var(--accent));
    font-weight: 800;
}
.price-cta--call {
    background: var(--call-bg, #1E1E1E);
    color: var(--call-text, #fff);
    border: 1px solid var(--border);
}
.price-cta--wa {
    background: var(--wa-bg, #141414);
    color: var(--wa-text, #25D366);
    border: 1px solid var(--wa-text, #25D366);
}
.price-cta--preapproval {
    background: var(--preapp-bg, #141414);
    color: var(--preapp-text, #8A8A8A);
    border: 1px solid var(--preapp-text, #8A8A8A);
    font-weight: 600;
}
.price-cta--enquire:hover,
.price-cta--call:hover,
.price-cta--wa:hover,
.price-cta--preapproval:hover { filter: brightness(1.15); }

/* Quick spec grid inside the price card.
   .price-card has no padding of its own — each section supplies it (__details and
   __actions both use 24px). This had `padding: 18px 0`, so the labels sat flush
   against the card edge. Horizontal padding matches its siblings; the top/bottom
   borders still span the full card width. */
.price-card__specs {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    padding: 18px 24px;
    margin: 4px 0 16px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.price-card__spec { display: flex; flex-direction: column; gap: 3px; }
.price-card__spec-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--price-text, var(--text-muted)); }
.price-card__spec-val { font-size: 14px; font-weight: 600; color: var(--price-heading, #fff); line-height: 1.3; }

/* ── Accordions ── */
.listing-acc { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.acc {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.acc__head {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 15px; font-weight: 700;
    color: var(--card-heading);
    transition: background 0.15s ease;
}
.acc__head:hover { background: var(--overlay-subtle); }
.acc__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acc__teaser { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--card-text); }
.acc__chev { color: var(--accent); flex-shrink: 0; transition: transform 0.2s ease; }
.acc__head[aria-expanded="true"] .acc__chev { transform: rotate(180deg); }
.acc__head[aria-expanded="true"] { border-bottom: 1px solid var(--border); }
.acc__body[hidden] { display: none; }
.acc__inner { padding: 18px; }

/* Specs inside the accordion: 4 across, since it has full width */
.acc__inner .listing-specs { margin: 0; }
.acc__inner .listing-section-heading { display: none; }
.acc__inner .specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

/* Finance rows inside the accordion */
.acc__inner .price-card__detail {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--card-text);
}
.acc__inner .price-card__detail:last-of-type { border-bottom: 0; }
.acc__inner .price-card__detail-val { color: var(--card-heading); font-weight: 600; }

/* Dealer card inside the accordion */
.acc__inner .dealer-info-card { background: transparent; border: 0; padding: 0; margin: 0; }
.acc__inner .dealer-info-card__heading { display: none; }

/* ── Enquiry modal (reuses the pre-approval panel styling) ── */
.enquiry-panel { max-width: 620px; }

/* ── Sticky action bar ── */
.listing-stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 190;
    background: var(--card-bg);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    padding: 10px 0;
    transform: translateY(110%);
    transition: transform 0.25s ease;
}
.listing-stickybar.is-visible { transform: translateY(0); }
.listing-stickybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.listing-stickybar__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.listing-stickybar__thumb { width: 52px; height: 40px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.listing-stickybar__text { display: flex; flex-direction: column; min-width: 0; }
.listing-stickybar__title {
    font-size: 12px; font-weight: 600; color: var(--card-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.listing-stickybar__price { font-size: 18px; font-weight: 900; color: var(--accent); line-height: 1.15; }
.listing-stickybar__monthly { font-size: 11px; font-weight: 500; color: var(--card-text); }
.listing-stickybar__actions { display: flex; gap: 8px; flex-shrink: 0; }
.listing-stickybar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 6px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
    border: 1px solid transparent;
    cursor: pointer;
}
.listing-stickybar__btn--enquire { background: var(--enquire-bg, var(--accent)); color: var(--enquire-text, #fff); border-color: var(--enquire-bg, var(--accent)); }
.listing-stickybar__btn--wa { background: var(--wa-bg, #141414); color: var(--wa-text, #25D366); border-color: var(--wa-text, #25D366); }
.listing-stickybar__btn--call { background: var(--call-bg, #1E1E1E); color: var(--call-text, #fff); border-color: var(--border); }
.listing-stickybar__btn--enquire:hover,
.listing-stickybar__btn--wa:hover,
.listing-stickybar__btn--call:hover { filter: brightness(1.15); }

/* Keep the sticky bar from covering the last of the page */
body.single-used_vehicle .site-footer { padding-bottom: 80px; }

@media (max-width: 900px) {
    .acc__inner .specs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: condensed strip — price + Enquire + WhatsApp only */
@media (max-width: 680px) {
    .listing-stickybar { padding: 8px 0; }
    .listing-stickybar__thumb,
    .listing-stickybar__title,
    .listing-stickybar__btn--call { display: none; }
    .listing-stickybar__btn-label { display: none; }
    .listing-stickybar__btn--wa { padding: 11px 14px; }
    .listing-stickybar__price { font-size: 17px; }
    .listing-stickybar__actions { gap: 6px; }
    .listing-stickybar__btn--enquire { padding: 11px 20px; }
    .acc__inner .specs-grid { grid-template-columns: 1fr; }
    .acc__head { font-size: 14px; padding: 14px; }
    .acc__inner { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.8.4 — CONTACT PAGE: branch cards + form spacing
   ═══════════════════════════════════════════════════════════════ */

/* Branch cards: max 2 per row, stack on mobile. The primary branch is now
   rendered as a card like any other — the old full-bleed map strip is gone. */
@media (max-width: 820px) {
    .locations-grid { grid-template-columns: 1fr; }
}

.location-card__map-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px 14px;
    margin-top: 14px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    line-height: 1.5;
}

/* ── Gravity Forms: kill the large voids between field groups ──
   GF section breaks and HTML blocks were inheriting big default margins,
   leaving dead space between "About You", "How Can We Reach You?" etc. */
.gform_wrapper .gform_body .gsection,
.gform_wrapper .gform_body .gfield--type-section {
    margin: 18px 0 6px !important;
    padding: 14px 0 6px !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 0 !important;
}
.gform_wrapper .gform_body .gsection:first-child,
.gform_wrapper .gform_body .gfield--type-section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.gform_wrapper .gsection_title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
.gform_wrapper .gsection_description,
.gform_wrapper .gfield_description {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.gform_wrapper .gform_body .gfield { margin-bottom: 14px !important; }
.gform_wrapper .gform_body .gfield:last-child { margin-bottom: 0 !important; }
.gform_wrapper .gfield_html { margin: 4px 0 !important; padding: 0 !important; }
.gform_wrapper .gform_fields { row-gap: 0 !important; }
.gform_wrapper .gform_footer { margin-top: 18px !important; padding: 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   v1.8.5 — MOBILE PASS
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CRITICAL: Layout B single listing must collapse on mobile ──
   .listing-layout--b set its 2-column grid outside any media query and later in
   the file than the mobile collapse rules — same specificity, so it won.
   The left column got crushed to ~40px and titles rendered one letter per line. */
@media (max-width: 900px) {
    .listing-layout--b {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .listing-layout--b .listing-sidebar {
        position: static !important;
        width: 100%;
    }
    .listing-layout--b .listing-main { width: 100%; min-width: 0; }
}

/* Title and meta must never be forced into a narrow column */
.listing-header__title,
.listing-title { min-width: 0; overflow-wrap: break-word; word-break: normal; hyphens: none; }

/* ── 2. Top bar: fixed height was clipping wrapped branch text ── */
@media (max-width: 900px) {
    .topbar { height: auto !important; min-height: var(--topbar-h); padding: 6px 0; }
    .topbar__inner { flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 680px) {
    /* Phones: keep the hours and the WhatsApp link, but drop the per-branch phone
       numbers — they were wrapping and clipping, and they're already in the drawer
       and the footer. Explicit colour so nothing can render dark-on-dark. */
    .topbar {
        height: auto !important;
        min-height: 0;
        padding: 7px 0;
        font-size: 11px;
        color: var(--topbar-text);
    }
    .topbar__inner {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 14px;
    }
    .topbar__left,
    .topbar__right {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .topbar__hours,
    .topbar__hours * { color: var(--topbar-text); }
    .topbar__phone { display: none; }          /* branch numbers — in drawer + footer */
    .topbar__whatsapp { display: inline-flex; } /* keep WhatsApp reachable */
    .topbar__whatsapp,
    .topbar__whatsapp * { color: var(--topbar-text); }
}

/* ── 3. Promo band: overflow:hidden + fixed padding clipped the wrapped sub-line ── */
@media (max-width: 900px) {
    .promo-band { overflow: visible; padding: 18px 0; }
    .promo-band__inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .promo-band__since { flex-direction: row; align-items: baseline; gap: 8px; border-right: 0; padding-right: 0; }
    .promo-band__main { flex-direction: column; gap: 8px; }
    .promo-band__headline { font-size: clamp(20px, 6vw, 28px); line-height: 1.15; }
    .promo-band__sub {
        border-left: 0; padding-left: 0; max-width: 100%;
        font-size: 12px; line-height: 1.5;
    }
    /* The accent word was rendering near-black on the red gradient — unreadable */
    .promo-band__headline em { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
}

/* ── 4. Showroom hero was collapsing to a thin strip on mobile ── */
@media (max-width: 900px) {
    .showroom-hero { padding: 28px 0 24px; min-height: 0; }
    .showroom-hero__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .showroom-hero__title { font-size: clamp(24px, 7vw, 34px); line-height: 1.15; }
    .showroom-hero__count { font-size: 13px; }
}

/* ── 5. Filter tabs: compact horizontal scroll instead of a tall band ── */
@media (max-width: 900px) {
    .showroom-tabs-wrap { padding: 10px 0; position: static; }
    .showroom-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .showroom-tabs::-webkit-scrollbar { display: none; }
    .showroom-tab { flex: 0 0 auto; padding: 7px 14px; font-size: 12px; white-space: nowrap; }
}

/* ── 6. Sort row: stack instead of cramming onto one line ── */
@media (max-width: 680px) {
    .showroom-toolbar,
    .showroom-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .showroom-toolbar select,
    .showroom-controls select { width: 100%; }
}

/* ── 7. Mobile drawer submenus (rewritten JS uses .gcm-open on the <li>) ── */
/* ── 8. Sticky bar must clear the price card properly on mobile ── */
@media (max-width: 680px) {
    .listing-stickybar { padding: 8px 0; }
    .listing-stickybar__inner { gap: 10px; }
    .listing-stickybar__price { font-size: 16px; }
    .listing-stickybar__actions { flex: 1; justify-content: flex-end; }
}

/* ── 9. Accordions and gallery on small screens ── */
@media (max-width: 680px) {
    .listing-gallery__main { min-height: 220px; }
    .listing-gallery__thumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .price-card__specs { grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 16px; }
}

/* ── 10. Mobile hero image swap ──
   A wide desktop hero is cropped brutally at phone aspect ratios. If a mobile
   image is supplied, use it below 768px; otherwise fall back to the desktop one. */
/* ── 10. Hero on mobile ──
   Same 1920×700 image and ratio as desktop, so contain fills it with no grey bands.
   At phone widths a 1920×700 hero is naturally short — that's expected and correct;
   the whole banner stays visible and identical to desktop, just scaled down. */
@media (max-width: 768px) {
    .hero-static {
        aspect-ratio: 1920 / 700;
        min-height: 0;
        background-position: center center;
    }
}

/* ── 11. Mobile order: the sales-person card had no `order` set ──
   The mobile reorder block uses display:contents to flatten the two columns into
   one grid, then orders the children. Anything without an explicit order defaults
   to 0 and jumps to the very top — which is why "Your Sales Person" was rendering
   above the gallery. Slot it in after the price card, where it belongs. */
@media (max-width: 900px) {
    .listing-gallery      { order: 1; }
    .listing-header       { order: 2; }
    .price-card           { order: 3; }
    .sales-person-card    { order: 4; }
    .listing-desc         { order: 5; }
    .listing-specs        { order: 6; }
    .sidebar-form-card    { order: 7; }
    .dealer-info-card     { order: 8; }
}

/* ── v1.8.9 — Mobile drawer submenus ──
   Uses the hidden attribute + display:none, the same mechanism as the listing
   accordions (which work reliably on live sites). The earlier max-height
   approach silently failed. */


/* Third level (e.g. About → PAIA → documents) indents once more */

/* ═══════════════════════════════════════════════════════════════
   v1.9.0 — MOBILE DRAWER SUBMENUS (single authoritative block)
   Replaces three competing blocks from earlier builds. One of those left a
   stale `transform: rotate(45deg)` behind, which combined with the centring
   transform to render the toggle as a red diamond.
   ═══════════════════════════════════════════════════════════════ */

.mobile-drawer__list .menu-item-has-children { position: relative; }
.mobile-drawer__list .menu-item-has-children > a { padding-right: 62px; }

/* Chevron toggle — white and clearly visible, rotates 180° when open */
.gcm-submenu-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -20px;              /* centre without a transform, so rotation is free */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 3;
}
.gcm-submenu-toggle svg {
    transition: transform 0.22s ease;
}
.gcm-submenu-toggle:hover svg,
.gcm-submenu-toggle:focus svg { color: var(--accent); }
.mobile-drawer__list li.gcm-open > .gcm-submenu-toggle svg {
    transform: rotate(180deg);
    color: var(--accent);
}

/* The open parent should not look like an error state — no red tint */
.mobile-drawer__list li.gcm-open > a {
    background: transparent;
    color: #FFFFFF;
}

/* Submenu panel — a subtle indent, not a different-coloured slab */
.mobile-drawer__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-left: 2px solid var(--accent);
    margin-left: 20px;
}
.mobile-drawer__list .sub-menu[hidden] { display: none; }

/* Readable sub-item text — the previous rules left it dark-on-dark */
.mobile-drawer__list .sub-menu li a {
    display: block;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.78;
    border-bottom: 1px solid var(--border);
}
.mobile-drawer__list .sub-menu li:last-child > a { border-bottom: 0; }
.mobile-drawer__list .sub-menu li a:hover,
.mobile-drawer__list .sub-menu li a:focus {
    color: var(--accent);
    opacity: 1;
    background: transparent;
    padding-left: 24px;
}

/* Third level (About → PAIA → documents) */
.mobile-drawer__list .sub-menu .sub-menu { margin-left: 16px; }
.mobile-drawer__list .sub-menu .sub-menu li a { font-size: 13px; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════
   v1.9.2 — TEAM CARD HOVER
   Applies to both variants: the homepage "Meet Our Team" scroll cards and the
   About page grid cards. Lift + accent border + soft shadow + subtle photo zoom,
   consistent with the vehicle cards and finance logos.
   ═══════════════════════════════════════════════════════════════ */

/* ── Homepage: .team-scroll__card ── */
.team-scroll__card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.team-scroll__card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.team-scroll__photo img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.team-scroll__card:hover .team-scroll__photo img {
    transform: scale(1.08);
}
.team-scroll__card:hover .team-scroll__name { color: var(--accent); }
.team-scroll__name { transition: color 0.25s ease; }

/* ── About page: .team-card (had a hover, but bound to the legacy gold variable) ── */
.team-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.team-card__photo { overflow: hidden; }
.team-card__photo img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.team-card:hover .team-card__photo img {
    transform: scale(1.06);
}
.team-card:hover .team-card__name { color: var(--accent); }
.team-card__name { transition: color 0.25s ease; }

/* Touch devices have no hover — don't leave cards stuck in a hovered state */
@media (hover: none) {
    .team-scroll__card:hover,
    .team-card:hover {
        transform: none;
        box-shadow: none;
    }
    .team-scroll__card:hover .team-scroll__photo img,
    .team-card:hover .team-card__photo img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.9.3 — TEAM PHOTO CROP
   The team photos are waist-up shots with the head in the upper third. Default
   object-fit:cover centres the crop, which clipped the top of the head on the
   About cards and left the homepage circles showing mostly shirt. Re-anchor the
   crop upward so faces sit properly in frame.
   ═══════════════════════════════════════════════════════════════ */

/* Homepage circles — larger, and cropped to the face rather than the torso */
.team-scroll__photo {
    width: 96px;
    height: 96px;
}
.team-scroll__photo img {
    object-fit: cover;
    object-position: center 12%;
}

/* About page cards — stop clipping the crown of the head */
.team-card__photo img {
    object-fit: cover;
    object-position: center 15%;
}

/* ═══════════════════════════════════════════════════════════════
   v1.9.3 — TEAM PHOTO CROP
   The team photos are waist-up shots with the head in the upper third.
   object-fit:cover was centring them, which clipped the crown of the head on the
   About cards and filled the homepage circles mostly with shirt. Anchoring the
   crop toward the top keeps faces properly framed. Shapes are unchanged.
   ═══════════════════════════════════════════════════════════════ */

/* Homepage circles — face was sitting too low in the frame */
.team-scroll__photo { width: 96px; height: 96px; }
.team-scroll__photo img {
    object-fit: cover;
    object-position: center 12%;
}

/* About page cards — heads were clipped at the top */
.team-card__photo img {
    object-fit: cover;
    object-position: center 15%;
}

/* ── v1.9.4 — Team card hover was being clipped ──
   .team-scroll and .team-grid--scroll use overflow-x:auto for horizontal scrolling.
   When one axis is auto, the other stops being `visible` and clips as well — so the
   card's translateY(-4px) hover lift pushed its top edge (border included) into the
   clipped region and it vanished. Give the containers room for the lift and shadow. */
.team-scroll,
.team-grid--scroll {
    padding-top: 10px;
    padding-bottom: 22px;
}

/* ── v1.9.6 — Single-branch contact card ──
   With one branch the 2-up grid left a large empty column. Give a lone card a
   sensible centred width instead of stretching it edge to edge or leaving a void. */
.locations-grid--single {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════
   v2.1.0 — SHARE THIS VEHICLE (single listing, both layouts)
   Native share links — no plugin, no external scripts. Rich previews
   come from the theme's Open Graph tags.
   ═══════════════════════════════════════════════════════════════ */
.price-card__share {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}
.price-card__share-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--price-text, var(--text-muted));
    margin-bottom: 10px;
}
.price-card__share-buttons {
    display: flex;
    gap: 8px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg, transparent);
    color: var(--price-heading, #fff);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    text-decoration: none;
}
.share-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.share-btn--whatsapp:hover { color: #25D366; border-color: #25D366; }
.share-btn--facebook:hover { color: #1877F2; border-color: #1877F2; }
.share-btn--x:hover        { color: #fff;     border-color: #fff; background: #000; }
.share-btn--copy:hover     { color: var(--accent); }
.share-btn.is-copied       { color: #25D366; border-color: #25D366; }

@media (max-width: 680px) {
    .price-card__share { padding: 16px; }
    .share-btn { width: 44px; height: 44px; } /* comfortable tap targets */
}