/* ==================================================
   City Motor Auction website refresh - SUPPORT-11232
   Design by Alan Speirs (CMA001 City Motor Auction Group website.pdf,
   24/09/2026, plus the 640px mobile layout).

   Loaded from modules/header.ascx so every page that uses the shared
   header gets it, after the old theme. Everything new is prefixed cma-
   so it never collides with the theme's own classes. The only theme
   rules overridden here are the ones the new header and footer replace
   (.body padding, .page-header offset). PCH 12/10/2026
   ================================================== */

/* Montserrat (Google Fonts) came out 19/10/2026 - Alan: one font across the site in two weights,
   Nexa Heavy for anything bold and the lighter Nexa Text for the rest. PCH 19/10/2026 */

/* Nexa web fonts supplied by the designer (Nexa Heavy + Nexa Text Book).
   Nexa Book and Nexa Text Heavy are used in the design too but no web
   kit came with them yet, so those fall back to the two we have. */
@font-face {
    font-family: 'Nexa Heavy';
    src: url('fonts/Nexa-Heavy.woff2') format('woff2'), url('fonts/Nexa-Heavy.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nexa Text';
    src: url('fonts/NexaText-Book.woff2') format('woff2'), url('fonts/NexaText-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --cma-navy: #002f6d;
    --cma-blue: #026aff;
    --cma-blue-dark: #0057d6;
    --cma-blue-pale: #cde1ff;
    --cma-red: #e22626;
    --cma-red-live: #dd3d32;
    --cma-grey-bg: #e8e8e9;
    --cma-grey-text: #7d7d7d;
    --cma-text: #292929;
    --cma-arrow: #babdbf;
    --cma-card-title: #284983;
    --cma-card-km: #4e3d62;
    --cma-heading: 'Nexa Heavy', Arial, sans-serif;
    --cma-body: 'Nexa Text', Arial, sans-serif;
    --cma-ui: 'Nexa Text', Arial, sans-serif;
    --cma-header-h: 88px;
}

/* ---------- Shared layout ---------- */
.cma-wrap {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(16px, 7vw, 137px);
    box-sizing: border-box;
}
.cma-page,
.cma-page p,
.cma-page li {
    font-family: var(--cma-body);
    color: var(--cma-text);
}
.cma-page img { max-width: 100%; }
.cma-header, .cma-footer { font-family: var(--cma-body); } /* nothing inherits the theme's Lato. PCH 19/10/2026 */

.cma-kicker {
    display: block;
    font-family: var(--cma-body);
    font-size: clamp(13px, 1.15vw, 22px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cma-grey-text);
    margin: 0 0 clamp(10px, 1.3vw, 26px);
}
.cma-h2 {
    font-family: var(--cma-heading);
    font-weight: 400;
    font-size: clamp(34px, 4.7vw, 90px);
    line-height: 1.05;
    color: #000;
    margin: 0 0 clamp(20px, 2vw, 40px);
    letter-spacing: -.005em;
}
.cma-center { text-align: center; }

/* ---------- Buttons ---------- */
.cma-btn,
a.cma-btn {
    display: inline-block;
    font-family: var(--cma-ui);
    font-weight: 400;
    font-size: clamp(15px, 1vw, 19px);
    line-height: 1.2;
    padding: .78em 2em;
    border-radius: 10px;
    border: 2px solid transparent;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.cma-btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.cma-btn-blue,
a.cma-btn-blue { background: var(--cma-blue); color: #fff; }
.cma-btn-blue:hover,
a.cma-btn-blue:hover,
a.cma-btn-blue:focus { background: var(--cma-blue-dark); color: #fff; text-decoration: none; }
.cma-btn-outline,
a.cma-btn-outline { background: #fff; color: var(--cma-blue); border-color: var(--cma-blue); }
.cma-btn-outline:hover,
a.cma-btn-outline:hover,
a.cma-btn-outline:focus { background: var(--cma-blue-pale); color: var(--cma-blue); text-decoration: none; }
.cma-btn-pale,
a.cma-btn-pale { background: var(--cma-blue-pale); color: var(--cma-blue); }
.cma-btn-pale:hover,
a.cma-btn-pale:hover,
a.cma-btn-pale:focus { background: #b6d3ff; color: var(--cma-blue); text-decoration: none; }
.cma-btn-white,
a.cma-btn-white {
    background: linear-gradient(#fff, #e9e9e9);
    color: #222;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.cma-btn-white:hover,
a.cma-btn-white:hover,
a.cma-btn-white:focus { background: #fff; color: var(--cma-navy); text-decoration: none; }
.cma-btn-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 26px); }

/* ---------- Header (all pages) ---------- */
.body { padding-top: var(--cma-header-h); }
.page-header { top: 0; margin-bottom: 0; }

.cma-header-wrapper.site-header-wrapper {
    background: var(--cma-navy);
    border-bottom: 2px solid var(--cma-red);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.cma-header-inner {
    height: var(--cma-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cma-logo { display: block; flex: 0 0 auto; line-height: 0; }
.cma-logo img { height: clamp(44px, 3.3vw, 62px); width: auto; }

.cma-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 46px);
}
.cma-nav li { margin: 0; padding: 0; }
.cma-nav li:empty { display: none; }
.cma-nav a {
    font-family: var(--cma-ui);
    font-size: clamp(15px, 1vw, 19px);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.cma-nav a:hover,
.cma-nav a:focus { color: var(--cma-blue-pale); text-decoration: none; }
/* My saved cars / Login / bidder number / Logout: same style as the menu, grouped with Register
   (Alan 15/10/2026). PCH 15/10/2026 */
.cma-nav .cma-nav-first { margin-left: clamp(0px, 1.6vw, 30px); }
.cma-nav .cma-nav-account a[id$="linkBidderChange"]::before { content: "Bidder "; }
.cma-nav .cma-nav-cta a.cma-btn { color: #222; padding: .7em 1.6em; }
.cma-nav .cma-nav-cta a.cma-btn:hover { color: var(--cma-navy); }

.cma-menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 10px 4px;
    cursor: pointer;
}
.cma-menu-toggle span {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    margin: 7px 0;
    transition: transform .2s ease, opacity .2s ease;
}
.cma-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.cma-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cma-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

@media (max-width: 991px) {
    :root { --cma-header-h: 72px; }
    .cma-menu-toggle { display: block; }
    .cma-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--cma-navy);
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 2px solid var(--cma-red);
        max-height: calc(100vh - var(--cma-header-h));
        overflow-y: auto;
    }
    .cma-nav.is-open { display: block; }
    .cma-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 18px; }
    .cma-nav li a { display: block; padding: 13px 24px; font-size: 18px; }
    .cma-nav .cma-nav-first { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); }
    .cma-nav .cma-nav-cta { padding: 10px 24px 0; }
    .cma-nav .cma-nav-cta a.cma-btn { display: block; }
}

/* ---------- Hero (home) ---------- */
.cma-hero {
    position: relative;
    color: #fff;
    background: #333 url(../images/refresh/hero-carpark.jpg) center 35% / cover no-repeat;
    /* Was clamp(560px, 62.5vw, 1200px) - the design's 1920x1198 shape - which put the headline and
       promo card below the fold on shorter windows (Alan, 19/10/2026). Now capped at the window
       height under the header. PCH 19/10/2026 */
    min-height: max(440px, min(62.5vw, calc(100vh - var(--cma-header-h))));
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
/* Fly-through video (Alan's compressed 1080p, 15/10/2026). cma-refresh.js only gives it a source
   on every screen now - 720p on phones, 1080p from 768px up (PCH 19/10/2026).
   PCH 15/10/2026 */
.cma-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.cma-hero-video.is-playing { display: block; }
.cma-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .25) 100%);
}
.cma-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: clamp(32px, min(9vw, 12vh), 175px); /* min(.., 12vh): short windows, PCH 19/10/2026 */
}
.cma-hero-copy { max-width: 900px; }
.cma-hero .cma-kicker { color: #fff; font-size: clamp(13px, 1.05vw, 20px); margin-bottom: clamp(16px, 2.4vw, 46px); }
.cma-hero h1 {
    font-family: var(--cma-heading);
    font-weight: 400;
    font-size: clamp(40px, min(6vw, 10.5vh), 115px); /* min(.., 10.5vh): short windows, PCH 19/10/2026 */
    line-height: .98;
    color: #fff;
    margin: 0 0 clamp(22px, 2.6vw, 50px);
    padding: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.cma-page .cma-hero-sub {
    font-family: var(--cma-body);
    font-size: clamp(16px, 1.45vw, 28px);
    line-height: 1.5;
    color: #fff;
    margin: 0 0 clamp(22px, 2.2vw, 42px);
    max-width: 28em;
}

/* Weekly Specials card */
.cma-promo {
    flex: 0 0 auto;
    width: clamp(380px, 35vw, 676px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    margin-bottom: clamp(-40px, -2vw, 0px);
}
.cma-promo-top {
    background: var(--cma-navy);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(18px, 1.9vw, 36px) clamp(18px, 1.9vw, 36px) clamp(14px, 1.4vw, 26px);
}
.cma-promo-kicker {
    display: block;
    font-family: var(--cma-ui);
    font-size: clamp(13px, 1vw, 19px);
    letter-spacing: .02em;
    color: #fff;
    margin: 0 0 4px;
    text-transform: uppercase;
}
.cma-promo-script { display: block; width: clamp(150px, 11vw, 214px); height: auto; margin-left: 2%; }
.cma-badge {
    flex: 0 0 auto;
    width: clamp(96px, 6.1vw, 117px);
    text-align: center;
}
.cma-badge-tile {
    display: block;
    background: var(--cma-red);
    border-radius: 8px 8px 0 0;
    padding: 10% 14% 34%;
    line-height: 0;
}
.cma-badge-tile img { width: 100%; height: auto; }
.cma-badge .cma-btn {
    display: block;
    margin-top: -26%;
    position: relative;
    padding: .7em .4em;
    font-size: clamp(13px, .95vw, 18px);
    border-radius: 8px;
    background: #fff;
    color: #222;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.cma-badge .cma-btn:hover { color: var(--cma-navy); background: #f1f1f1; }
.cma-promo-info {
    background: var(--cma-blue);
    padding: clamp(16px, 1.4vw, 26px) clamp(18px, 1.9vw, 36px) clamp(20px, 1.8vw, 34px);
    font-family: var(--cma-ui);
    font-size: clamp(14px, 1.05vw, 20px);
    line-height: 1.55;
    color: #fff;
}
.cma-promo-info p { margin: 0; color: #fff; font-family: var(--cma-ui); }
.cma-promo-info strong { font-family: var(--cma-heading); font-weight: 400; color: var(--cma-navy); }
.cma-promo-info .cma-upper { text-transform: uppercase; }

/* ---------- Featured cars ---------- */
.cma-featured {
    background: var(--cma-grey-bg);
    padding: clamp(56px, 6.6vw, 128px) 0 clamp(56px, 5.5vw, 105px);
}
.cma-featured .cma-btn { margin-bottom: clamp(32px, 3.4vw, 64px); }
.cma-carousel { position: relative; }
.cma-track {
    display: flex;
    gap: clamp(14px, 1.1vw, 21px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
}
.cma-track::-webkit-scrollbar { display: none; }
.cma-card {
    flex: 0 0 calc((100% - 3 * clamp(14px, 1.1vw, 21px)) / 4);
    scroll-snap-align: start;
    background: #fff;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cma-card a { text-decoration: none; color: inherit; }
.cma-card-media {
    position: relative;
    display: block;
    aspect-ratio: 450 / 300;
    background: #d9d9d9;
    overflow: hidden;
}
.cma-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cma-card:hover .cma-card-media img { transform: scale(1.03); }
.cma-card-year {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--cma-navy);
    color: #fff;
    font-family: var(--cma-ui);
    font-size: clamp(14px, 1vw, 19px);
    padding: .45em 1.5em;
    letter-spacing: .03em;
}
.cma-card-year:empty { display: none; }
.cma-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(12px, 1vw, 18px) clamp(14px, 1vw, 20px);
}
.cma-card-title {
    font-family: var(--cma-heading);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 19px);
    color: var(--cma-card-title);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cma-card-km {
    font-family: var(--cma-body);
    font-size: clamp(13px, .95vw, 18px);
    color: var(--cma-card-km);
    white-space: nowrap;
    letter-spacing: .02em;
}
.cma-card-specs {
    margin-top: auto;
    display: flex;
    background: var(--cma-blue);
    color: #fff;
    font-family: var(--cma-body);
    font-size: clamp(11px, .8vw, 15px);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cma-card-specs span {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: 1.15em 1em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cma-card-specs span + span { border-left: 2px solid #fff; flex: 1 1 auto; }
.cma-card-specs span:first-child { flex: 0 0 43%; }
.cma-card-specs svg { flex: 0 0 auto; width: 1.25em; height: 1.25em; fill: #fff; }
.cma-card-specs .cma-spec-style { display: none; }

.cma-arrows { display: flex; justify-content: center; gap: 8px; margin-top: clamp(26px, 2.6vw, 50px); }
.cma-arrow {
    width: clamp(44px, 3.3vw, 64px);
    height: clamp(40px, 3vw, 58px);
    border: 0;
    border-radius: 10px;
    background: var(--cma-arrow);
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}
.cma-arrow:hover:not([disabled]) { background: #a3a7aa; }
.cma-arrow[disabled] { opacity: .45; cursor: default; }
.cma-arrow svg { width: 40%; height: 40%; stroke: #3b3b5c; stroke-width: 2; fill: none; }
.cma-empty { text-align: center; color: var(--cma-grey-text); }

/* ---------- "Ready to bid or sell?" ---------- */
.cma-cta { display: flex; background: #fff; align-items: stretch; }
.cma-cta-media {
    flex: 0 0 36.4%;
    min-height: clamp(260px, 25vw, 482px);
    background: url(../images/refresh/aerial-cars.jpg) center / cover no-repeat;
}
.cma-cta-copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 4vw, 80px) clamp(16px, 7vw, 137px) clamp(36px, 4vw, 80px) clamp(24px, 5.5vw, 108px);
}
.cma-cta-copy .cma-h2 { font-size: clamp(32px, 4vw, 77px); margin-bottom: clamp(14px, 1.4vw, 26px); }
.cma-cta-copy p {
    font-family: var(--cma-body);
    font-size: clamp(16px, 1.3vw, 25px);
    line-height: 1.6;
    color: #333;
    margin: 0 0 clamp(20px, 2vw, 38px);
}

/* ---------- Footer (all pages) ---------- */
.cma-footer.site-footer {
    background: var(--cma-navy);
    color: #fff;
    padding: clamp(40px, 3.2vw, 60px) 0 clamp(26px, 2vw, 38px);
    font-family: var(--cma-ui);
    margin: 0;
    border: 0;
}
.cma-footer a { color: #fff; text-decoration: none; }
.cma-footer a:hover,
.cma-footer a:focus { color: var(--cma-blue-pale); text-decoration: underline; }
.cma-footer-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: clamp(30px, 3vw, 58px);
}
.cma-footer-logo img { height: clamp(48px, 3.3vw, 64px); width: auto; display: block; }
.cma-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 1.7vw, 34px); }
.cma-footer-links a { font-size: clamp(15px, 1vw, 19px); }
.cma-social { list-style: none; margin: 0; padding: 0 clamp(0px, 9vw, 175px) 0 0; display: flex; gap: clamp(18px, 2.4vw, 46px); }
.cma-social a {
    width: clamp(38px, 2.6vw, 50px);
    height: clamp(38px, 2.6vw, 50px);
    border-radius: 50%;
    background: var(--cma-blue);
    color: var(--cma-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.35vw, 26px);
    text-decoration: none;
}
.cma-social a:hover,
.cma-social a:focus { background: #fff; color: var(--cma-navy); text-decoration: none; }
.cma-footer-about {
    max-width: 680px;
    margin: clamp(30px, 3vw, 58px) 0 clamp(40px, 4vw, 76px);
    font-size: clamp(13px, .8vw, 15px);
    line-height: 1.35;
    color: #fff;
}
.cma-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 30px;
    font-size: clamp(13px, .8vw, 15px);
    padding-right: clamp(0px, 9vw, 175px);
}
.cma-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 30px; align-items: center; }
.cma-footer-legal span.cma-sep { opacity: .7; padding: 0 .5em; }
.cma-footer-extra { font-size: .92em; opacity: .85; }

/* ---------- Auctions page ---------- */
.cma-auctions { padding: clamp(56px, 6.6vw, 128px) 0 clamp(40px, 4vw, 76px); background: #fff; }
.cma-auction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 1.4vw, 27px);
    margin-top: clamp(32px, 4.5vw, 88px);
}
.cma-auction {
    display: flex;
    flex-direction: column;
}
.cma-auction-card {
    background: var(--cma-grey-bg);
    border-radius: 20px;
    overflow: hidden;
    flex: 1 1 auto;
}
.cma-auction-media {
    position: relative;
    aspect-ratio: 806 / 522;
    background: #ccc center / cover no-repeat;
    border-radius: 20px 20px 0 0;
}
.cma-date {
    position: absolute;
    top: clamp(10px, .9vw, 18px);
    right: clamp(12px, 1.1vw, 22px);
    background: #fff;
    border-radius: 12px;
    text-align: center;
    padding: clamp(10px, .9vw, 18px) clamp(14px, 1.1vw, 22px);
    min-width: clamp(90px, 7vw, 134px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.cma-date span { display: block; font-family: var(--cma-body); color: #000; }
.cma-date .cma-date-day { font-size: clamp(13px, .95vw, 18px); }
.cma-date .cma-date-num { font-family: var(--cma-heading); font-size: clamp(28px, 2.4vw, 46px); line-height: 1.2; margin: .1em 0; }
.cma-date .cma-date-month { font-size: clamp(12px, .9vw, 17px); }
.cma-auction-body {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-end;
    padding: clamp(18px, 1.6vw, 30px) clamp(18px, 1.6vw, 30px) clamp(20px, 1.8vw, 34px);
}
.cma-auction-body h3 {
    font-family: var(--cma-heading);
    font-weight: 400;
    font-size: clamp(24px, 2.1vw, 40px);
    color: #000;
    margin: 0 0 clamp(14px, 1.6vw, 30px);
}
.cma-auction-body p { font-size: clamp(14px, .95vw, 18px); line-height: 1.4; margin: 0 0 1.1em; color: #000; }
.cma-auction-body p:last-child { margin-bottom: 0; }
.cma-auction-body strong { font-family: var(--cma-heading); font-weight: 400; }
.cma-auction-body p a { color: var(--cma-blue); text-decoration: underline; }
.cma-badge-live .cma-badge-tile { background: var(--cma-red-live); padding: 7% 14% 34%; }
.cma-auction-actions { display: flex; justify-content: flex-end; padding: clamp(14px, 1vw, 20px) clamp(18px, 1.6vw, 30px) 0; }
.cma-auction-actions .cma-btn { min-width: clamp(96px, 6.1vw, 117px); padding-left: 1.4em; padding-right: 1.4em; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }

/* live catalogues (from rpAuctions) */
.cma-live { margin-top: clamp(40px, 4vw, 76px); }
.cma-live h3 { font-family: var(--cma-heading); font-weight: 400; font-size: clamp(22px, 1.8vw, 34px); margin: 0 0 18px; color: #000; }
.cma-live-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ddd; }
.cma-live-item {
    display: grid;
    grid-template-columns: minmax(110px, 160px) 1fr auto;
    gap: 10px 26px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #ddd;
}
.cma-live-when { font-family: var(--cma-heading); font-size: clamp(15px, 1vw, 19px); color: var(--cma-navy); line-height: 1.3; }
.cma-live-when small { display: block; font-family: var(--cma-body); font-size: 13px; color: var(--cma-grey-text); }
.cma-live-title a { font-family: var(--cma-heading); color: #000; font-size: clamp(15px, 1vw, 19px); }
.cma-live-title a:hover { color: var(--cma-blue); }
.cma-live-title font { font-family: var(--cma-body); }
.cma-live-desc { font-size: 14px; color: #555; margin-top: 2px; }
.cma-live-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cma-live-actions .cma-btn { font-size: 15px; padding: .65em 1.3em; }
.cma-live-none { padding: 22px 0; color: var(--cma-grey-text); font-style: italic; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }

.cma-process { background: var(--cma-grey-bg); padding: clamp(56px, 4.5vw, 86px) 0 clamp(60px, 6vw, 115px); }
.cma-process-help {
    font-family: var(--cma-body);
    font-size: clamp(15px, 1.15vw, 22px);
    line-height: 1.5;
    color: #333;
    margin: 0 auto clamp(36px, 4vw, 76px);
}
.cma-process-help a { color: #222; font-family: var(--cma-heading); text-decoration: none; }
.cma-process-help a:hover { color: var(--cma-blue); }
.cma-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.25vw, 24px); }
.cma-tile-media { border-radius: 20px; overflow: hidden; aspect-ratio: 538 / 397; background: #ccc; }
.cma-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cma-tile h3 {
    font-family: var(--cma-heading);
    font-weight: 400;
    font-size: clamp(22px, 1.95vw, 37px);
    color: #000;
    margin: clamp(20px, 2vw, 38px) 0 clamp(14px, 1.4vw, 26px) 6px;
}
.cma-tile p { font-size: clamp(14px, .95vw, 18px); line-height: 1.85; margin: 0 6px; color: #000; max-width: 24em; }
.cma-tile strong { font-family: var(--cma-heading); font-weight: 400; }
.cma-tile a { color: inherit; text-decoration: none; }
.cma-page .cma-fineprint {
    margin: clamp(36px, 3.6vw, 70px) 0 0;
    padding-top: 22px;
    border-top: 1px solid #cfcfd1;
    font-size: clamp(13px, .8vw, 15px);
    line-height: 1.6;
    color: #555;
}
.cma-fineprint strong { font-family: var(--cma-heading); font-weight: 400; color: #333; }

/* ---------- Inner page banners (all pages) ----------
   Alan's new banners (15/10/2026) replace the old, pixelated page-header photos. The pages keep
   their own inline background-image, so the swap is done here by matching the old file name:
   the people-on-the-floor shot for vehicle pages, the yard shot for everything else. The Contact
   page header holds the map and has no background-image, so it is left alone. PCH 15/10/2026 */
.page-header.parallax[style*="background-image"] {
    position: relative;
    background-image: url(../images/refresh/banner-yard.jpg) !important;
    background-size: cover !important;
    background-position: center 55% !important;
    background-attachment: scroll !important;
    min-height: clamp(180px, 16vw, 300px);
}
.page-header.parallax[style*="vehicle-details"],
.page-header.parallax[style*="detail.jpg"],
.page-header.parallax[style*="compare.jpg"] {
    background-image: url(../images/refresh/banner-floor.jpg) !important;
    background-position: center 40% !important;
}
.page-header.parallax[style*="background-image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 47, 109, .78) 0%, rgba(0, 47, 109, .35) 55%, rgba(0, 0, 0, .1) 100%);
}
.page-header.parallax[style*="background-image"] > .container { position: relative; z-index: 1; }
.page-header h1.page-title {
    font-family: var(--cma-heading);
    font-weight: 400;
    font-size: clamp(30px, 3.2vw, 60px);
    line-height: 1.05;
    color: #fff;
    padding: clamp(60px, 7vw, 130px) 0 clamp(26px, 2.4vw, 46px);
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
.page-header .container .spacer-75 { display: none; }

/* ---------- Stock page (search_results.aspx) ----------
   Not designed by Alan - he asked for it to look more like the new design, so the results use the
   featured car card. Filters, sort, saved cars and the grid stay the same. PCH 15/10/2026 */
.cma-stock .view-format-choice:has(#results-list-view) { display: none; }
@media (min-width: 1200px) {
    .cma-stock .container { width: auto; max-width: 1680px; padding-left: 40px; padding-right: 40px; }
}
.cma-stock .filters-sidebar h3,
.cma-stock .results-container h3 { font-family: var(--cma-heading); font-weight: 400; color: #000; }
.cma-stock .accordion-heading .accordion-toggle { font-family: var(--cma-ui); color: var(--cma-navy); }
.cma-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.1vw, 21px);
}
.cma-results .cma-card { flex: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.cma-card-sub {
    font-family: var(--cma-body);
    font-size: 13px;
    color: #666;
    padding: 0 clamp(14px, 1vw, 20px);
    margin: -6px 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}
.cma-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    padding: 0 clamp(14px, 1vw, 20px) 14px;
}
.cma-card-price { font-family: var(--cma-heading); color: var(--cma-navy); font-size: clamp(15px, 1vw, 19px); white-space: nowrap; }
.cma-results .cma-card-specs { font-size: 13px; }
.cma-results .cma-card-specs span:first-child { flex-basis: 46%; }
.cma-card-actions { display: flex; gap: 8px; }
.cma-card-actions .cma-btn { font-size: 13px; padding: .55em 1em; border-radius: 8px; }
.cma-stock .results-container-in .waiting { position: relative; }

/* Very short desktop windows (under 620px tall): tighten the promo card so it still fits in the hero.
   PCH 19/10/2026 */
@media (min-width: 992px) and (max-height: 620px) {
    .cma-promo-top { padding-top: 14px; padding-bottom: 10px; }
    .cma-promo-script { width: clamp(130px, 9vw, 180px); }
    .cma-badge { width: 92px; }
    .cma-promo-info { padding-top: 12px; padding-bottom: 14px; line-height: 1.4; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
    .cma-card { flex-basis: calc((100% - 2 * clamp(14px, 1.1vw, 21px)) / 3); }
    .cma-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .cma-hero-inner { flex-direction: column; align-items: flex-start; padding-bottom: 0; }
    .cma-hero { min-height: 0; padding-top: clamp(120px, 30vw, 260px); }
    .cma-hero-copy { padding-bottom: 40px; }
    .cma-promo { width: auto; align-self: stretch; margin: 0 calc(-1 * clamp(16px, 7vw, 137px)); border-radius: 0; box-shadow: none; }
    .cma-card { flex-basis: calc((100% - clamp(14px, 1.1vw, 21px)) / 2); }
    .cma-footer-top { grid-template-columns: 1fr; justify-items: center; row-gap: 30px; text-align: center; }
    .cma-footer-links { justify-content: center; }
    .cma-social { padding: 0; }
    .cma-footer-about { margin-left: auto; margin-right: auto; text-align: center; }
    .cma-footer-bottom { justify-content: center; text-align: center; padding: 0; }
    .cma-footer-legal { justify-content: center; }
    .cma-auction-grid { grid-template-columns: 1fr; }
    .cma-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile (640px design) ---------- */
@media (max-width: 767px) {
    .cma-wrap { padding-left: 20px; padding-right: 20px; }
    .cma-promo { margin-left: -20px; margin-right: -20px; }
    .cma-hero { background-image: url(../images/refresh/hero-carpark-sm.jpg); background-position: 60% center; }
    .cma-hero .cma-kicker { font-size: clamp(11px, 3.1vw, 16px); letter-spacing: .03em; }
    .cma-hero h1 { font-size: clamp(36px, 11.2vw, 74px); }
    .cma-hero .cma-btn-row .cma-btn { flex: 1 1 0; padding-left: .5em; padding-right: .5em; }
    .cma-promo-top { align-items: center; }
    .cma-promo-script { width: min(52vw, 280px); }
    .cma-badge { width: min(26vw, 156px); }
    .cma-promo-info { font-size: clamp(15px, 4.2vw, 20px); }
    .cma-card { flex-basis: 88%; scroll-snap-align: center; }
    .cma-track { padding-left: 6%; padding-right: 6%; scroll-padding: 0 6%; }
    .cma-featured .cma-wrap.cma-carousel { padding-left: 0; padding-right: 0; }
    .cma-card-specs { font-size: 14px; }
    .cma-card-specs .cma-spec-trans { display: none; }
    .cma-card-specs .cma-spec-style { display: flex; }
    .cma-cta { flex-direction: column; }
    .cma-cta-media { flex-basis: auto; min-height: 0; aspect-ratio: 640 / 470; }
    .cma-cta-copy { text-align: center; align-items: center; padding: 48px 20px 60px; }
    .cma-cta-copy .cma-btn-row { justify-content: center; }
    .cma-footer-links { gap: 10px 22px; }
    .cma-auction-body { flex-direction: column; align-items: stretch; }
    .cma-auction-body .cma-badge { align-self: flex-end; }
    .cma-live-item { grid-template-columns: 1fr; }
    .cma-live-actions { justify-content: flex-start; }
    .cma-tiles { grid-template-columns: 1fr; }
    .cma-results { grid-template-columns: 1fr; }
    .page-header.parallax[style*="background-image"] { background-position: 30% center !important; }
}

/* "Share this" on the vehicle pages is clickable now (cma-refresh.js) - it looked like
   disabled grey text. Same navy as the rest of the refresh. PCH 20/10/2026 */
.utility-bar .share-text.cma-share-btn { color: var(--cma-navy); cursor: pointer; font-weight: 600; margin-right: 6px; }
.utility-bar .share-text.cma-share-btn:hover,
.utility-bar .share-text.cma-share-btn:focus { color: var(--cma-blue); text-decoration: underline; outline: none; }

/* SUPPORT-11232 Phase 2: Magic Zoom Plus gallery on the vehicle pages (BuildMagicZoomGallery).
   Main photo full column width, thumbnail strip under it, video thumbnail at the end. PCH 22/10/2026 */
.cma-mz { margin-bottom: 20px; }
.cma-mz-main .MagicZoom,
.cma-mz-main .MagicZoom img { display: block; width: 100%; height: auto; }
.cma-mz-main .mz-figure { width: 100%; border-radius: 8px; overflow: hidden; }
.cma-mz-thumbs { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cma-mz-thumbs .MagicScroll { flex: 1 1 auto; min-width: 0; }
.cma-mz-thumbs .MagicScroll a { margin: 0 4px; border: 2px solid transparent; border-radius: 4px; overflow: hidden; }
.cma-mz-thumbs .MagicScroll a.mz-thumb-selected { border-color: var(--cma-blue); }
.cma-mz-thumbs .MagicScroll img { width: 100px; height: 75px; object-fit: cover; display: block; }
.cma-mz-video { flex: 0 0 auto; display: block; width: 100px; }
.cma-mz-video img { width: 100%; height: auto; display: block; }