/*
 * Inner pages: page banner, breadcrumbs, content + "Need Help?" sidebar, forms,
 * stocklist and sold gallery, contact page, vehicle detail and pop-ups.
 * Loaded after site.css on every page except the home page. Colours come from tokens.css.
 */

/* ---------- Breadcrumbs ---------- */
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 15px; padding: 0; font-size: 0.75rem; }
.crumbs li:not(:last-child)::after { content: ">"; margin: 0 5px; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Boxed page banner (Stock Updates, Finance, Contact …) ---------- */
/* margin-top/bottom only — .page-header also carries .wrap, whose auto side margins centre it */
.page-header { margin-top: 30px; margin-bottom: 40px; }
@media (min-width: 48em) { .page-header { margin-bottom: 80px; } }
.page-header__bg {
  position: relative; overflow: hidden; border-radius: 30px; min-height: 144px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: var(--gradient-color-right);
}
@media (min-width: 48em) { .page-header__bg { min-height: 180px; } }
/* The photo is an inline style on its own element, not a CSS variable: a relative url()
   inside a custom property resolves against css/, not the page, and silently 404s. */
.page-header__bg::after { z-index: 1; }
.page-header__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(67, 67, 67, 0.55) 0%, rgba(19, 19, 19, 0.88) 100%); }
/* With a photo (2026-10-21): the photo in full colour, under a black wash that is darkest where the centred title
   and breadcrumbs sit, so they keep at least 4.5:1 on the brightest header photo. */
.page-header__bg:has(> .page-header__photo)::after {
  background: radial-gradient(ellipse 60% 75% at 50% 55%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 0.28) 100%);
}
.page-header__bg > * { position: relative; z-index: 2; }
.page-header__bg > .page-header__photo { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; }
.page-header h1 { color: var(--text-on-gradient); font-size: 2rem; margin: 0 0 8px; padding: 0 15px; }
@media (min-width: 48em) { .page-header h1 { font-size: 2.25rem; } }
.page-header .crumbs { justify-content: center; margin: 0; color: var(--text-on-gradient); }
/* Full-width variant (Number Plates) */
.page-header--full { margin-top: 0; max-width: none; padding: 0; }
.page-header--full .page-header__bg { border-radius: 0; align-items: center; }
.page-header--full .crumbs { position: absolute; top: 14px; left: max(15px, calc((100% - var(--container)) / 2 + 15px)); }

/* ---------- Content + sidebar ---------- */
.page-main { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 75em) {
  .page-main--sidebar { flex-direction: row; align-items: flex-start; gap: 60px; }
  .page-main--sidebar > .prose { flex: 1; min-width: 0; }
  .page-main--sidebar > aside { width: 300px; flex-shrink: 0; position: sticky; top: 90px; }
}
.prose { font-size: 1rem; line-height: 1.6; }
.prose p { margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; margin: 1.6rem 0 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 1.4rem 0 0.75rem; }
.prose h3.accent, .prose .accent { color: var(--primary-color); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: #fff; }
.prose strong { font-weight: 700; }
.prose a:not(.button) { color: var(--primary-color); text-decoration: underline; }
.prose .button { margin: 0.25rem 0 1rem; min-height: 40px; padding: 0 28px; font-size: 0.875rem; }
.page-main + .page-main { margin-top: 40px; }

.need-help {
  background: var(--alternate-background); border-radius: var(--radius-panel); padding: 30px 25px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.need-help__icon { color: var(--primary-color); font-size: 2rem; }
.need-help h2 { font-size: 1.75rem; margin: 0; }
.need-help p { font-size: 0.8125rem; line-height: 1.6; margin: 0 0 4px; }
.need-help .button { min-height: 40px; width: 190px; padding: 0 15px; font-size: 0.875rem; gap: 6px; }
.button--whatsapp { background: #00c853; color: #fff; }
.button--green { background: #4fa23c; color: #fff; }
.button--red { background: #cc0c0c; color: #fff; }
.button--light { background: var(--secondary-color); color: var(--text-on-secondary-color); }
.button--small { min-height: 40px; padding: 0 28px; font-size: 0.875rem; }

/* ---------- Forms ---------- */
.cform-wrap { margin-top: 40px; }
.cform-wrap h2 { font-size: 1.375rem; text-align: center; margin-bottom: 15px; }
.cform-wrap--narrow { max-width: 400px; margin-left: auto; margin-right: auto; }
.cform { display: grid; grid-template-columns: 1fr; gap: 14px 30px; }
@media (min-width: 48em) { .cform--2col { grid-template-columns: 1fr 1fr; } }
.cform__field { position: relative; }
.cform__field--full, .cform__check, .cform__actions, .cform__hint, .cform__step, .cform__tabs { grid-column: 1 / -1; }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform input[type=number],
.cform input[type=date], .cform select, .cform textarea {
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0.5px solid var(--lines-color); border-radius: var(--radius-field);
  background: var(--fields-background); color: var(--fields-font-color);
  font-family: var(--font-body); font-size: 0.9375rem;
}
.cform select {
  -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.cform textarea { min-height: 110px; resize: vertical; }
.cform ::placeholder { color: #000; opacity: 1; }
.cform [aria-invalid="true"] { border-color: #ff5c5c; box-shadow: 0 0 0 1px #ff5c5c; }
.cform__error { display: block; margin-top: 4px; color: #ff8a8a; font-size: 0.8125rem; }
.cform__check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.75rem; line-height: 1.4; }
.cform__check input { margin: 1px 0 0; accent-color: var(--primary-color); }
.cform__actions { display: flex; gap: 10px; }
.cform__actions .button { min-height: 38px; padding: 0 30px; font-size: 0.875rem; }
.cform__actions--full .button { width: 100%; }
.cform__label { display: block; font-size: 0.8125rem; margin-bottom: 4px; }
.cform__hint { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); margin: -4px 0 0; }
.cform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__done { text-align: center; padding: 30px 20px; border-radius: var(--radius-panel); background: var(--alternate-background); }
.cform__done i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 10px; }
.cform__done h3 { font-size: 1.5rem; }
.cform__done p { margin: 0; }
.cform__step { border: 0; padding: 0; margin: 0; display: grid; gap: 14px 30px; grid-template-columns: 1fr; }
@media (min-width: 48em) { .cform__step { grid-template-columns: 1fr 1fr; } }
.cform__step[hidden] { display: none; }
.cform__tabs { list-style: none; display: flex; gap: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.cform__tab { padding: 8px 4px; margin-right: 14px; font-weight: 700; font-size: 0.9375rem; border-bottom: 3px solid transparent; margin-bottom: -2px; color: rgba(255, 255, 255, 0.6); }
.cform__tab.is-active { color: #fff; border-color: var(--primary-color); }
.cform__radios { display: flex; gap: 16px; align-items: center; font-size: 0.9375rem; }
.cform__radios label { display: inline-flex; gap: 6px; align-items: center; }
.cform__radios input { accent-color: var(--primary-color); }
/* Grouped sections inside one form (Sell Your Car). Not .cform__step: those become wizard pages. */
.cform__group { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 10px; min-width: 0; display: grid; gap: 14px 30px; grid-template-columns: 1fr; }
@media (min-width: 48em) { .cform__group { grid-template-columns: 1fr 1fr; } }
.cform__legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; }
.cform__legend span {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-color); color: var(--text-on-primary-color); font-size: 0.875rem;
}
.cform__reg { text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; }
.cform__reg::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; }
.cform__consent a { color: var(--primary-color); text-decoration: underline; }
.cform__q { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.9375rem; }

/* ---------- Pop-ups ---------- */
.modal {
  width: min(720px, calc(100% - 24px)); max-height: calc(100% - 40px); padding: 30px 20px; border: 1px solid var(--lines-color);
  border-radius: var(--radius-panel); background: var(--alternate-background); color: var(--text-on-alternate-background);
}
@media (min-width: 48em) { .modal { padding: 45px 45px 40px; } }
.modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.modal__close { position: absolute; top: 10px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; font-weight: 200; line-height: 1; cursor: pointer; }
.modal h2 { font-size: 1.5rem; margin-bottom: 6px; }
.modal__sub { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; }

/* ---------- Dark selects (stocklist toolbar) ---------- */
.dark-select {
  height: 48px; padding: 0 38px 0 8px; border: 1px solid var(--lines-color); border-radius: var(--radius-field);
  background: transparent; color: #fff; font-family: var(--font-body); font-size: 1rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.dark-select option { color: #000; }

/* ---------- Stocklist ---------- */
.results-head { padding-top: 25px; }
.results-head h1 { font-size: 1.75rem; margin-bottom: 18px; }
.results-head__row { display: flex; flex-direction: column; gap: 18px; margin-bottom: 25px; }
@media (min-width: 75em) { .results-head__row { flex-direction: row; justify-content: space-between; align-items: center; } }
.results-head__intro { max-width: 720px; margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.results-head__intro a { font-weight: 700; }
.results-tools { display: flex; flex-wrap: wrap; gap: 20px; }
.results-tools .button { min-width: 198px; gap: 6px; }
.results-tools .sort { width: 264px; }
.results-tools .per-page { width: 88px; }
@media (max-width: 47.99em) {
  .results-tools { gap: 10px; }
  .results-tools .button { width: 100%; }
  .results-tools .sort { flex: 1; width: auto; min-width: 0; }
}
.results-count { font-size: 0.9375rem; margin: 0 0 15px; color: rgba(255, 255, 255, 0.8); }
.rep-box { background: var(--alternate-background); border-radius: 10px; padding: 12px 10px; font-size: 0.75rem; line-height: 1.4; margin-bottom: 30px; }
.rep-box p { margin: 0; line-height: 1.4; }
.vgrid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 40em) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .vgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75em) { .vgrid { grid-template-columns: repeat(4, 1fr); } }
.vgrid--narrow { max-width: 1100px; }
.vgrid > li { min-width: 0; }
.no-results { grid-column: 1 / -1; list-style: none; text-align: center; padding: 50px 20px; background: var(--alternate-background); border-radius: var(--radius-panel); }
.no-results h2 { font-size: 1.5rem; }
.no-results__icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 14px; }
.no-results__lead { margin: 0 0 10px; font-weight: 300; }
.no-results__filters { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 18px; max-width: 640px; }
.no-results__filters li { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.no-results__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.no-results__actions .button { padding: 0 26px; }

/* Keyword search: a real GET form (works without JS) and the target of the header's search link. */
.stock-search {
  position: relative; display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 0 22px; padding: 6px;
  border-radius: calc(var(--radius-field) + 4px); background: var(--fields-background); scroll-margin-top: 90px;
}
.stock-search__icon { position: absolute; left: 20px; color: #555; pointer-events: none; }
.stock-search input[type=search] {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 42px; border: 0; border-radius: var(--radius-field);
  background: transparent; color: var(--fields-font-color); font: 1rem var(--font-body);
}
.stock-search input[type=search]::placeholder { color: #666; }
.stock-search input[type=search]:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 0; }
.stock-search__submit { min-height: 46px; padding: 0 22px; gap: 8px; flex-shrink: 0; }
@media (max-width: 29.99em) { .stock-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .stock-search__submit { padding: 0 16px; } }
.results-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 15px; }
.results-meta .results-count { margin: 0; }
.kw-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 14px; border-radius: 999px;
  background: var(--primary-color); color: var(--text-on-primary-color); font-weight: 600; font-size: 0.875rem; transition: opacity 0.2s;
}
.kw-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-chip:hover, .kw-chip:focus-visible { opacity: 0.85; }

.vcard__media { position: relative; }
.compare-star {
  position: absolute; z-index: 2; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.75); color: #000;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem;
}
.compare-star.is-on { color: var(--primary-color); background: #fff; }
.vcard__sash--reserved { background: #e00; color: #fff; }
.vcard__sold { text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; border-top: 1px solid var(--card-divider); padding: 18px 0 15px; }

.pager { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--alternate-background); color: #fff; font-weight: 600;
}
.pager a:hover { background: var(--primary-color); color: var(--text-on-primary-color); }
.pager [aria-current="page"] { background: var(--primary-color); color: var(--text-on-primary-color); }

/* Filter drawer */
.drawer-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; z-index: 121; top: 0; bottom: 0; left: 0; width: min(400px, 92vw); overflow-y: auto;
  background: var(--alternate-background); padding: 25px 25px 30px; transform: translateX(-102%); transition: transform 0.3s ease;
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.drawer__head h2 { font-size: 1.5rem; margin: 0; }
.drawer__close { background: none; border: 0; color: #fff; font-size: 34px; font-weight: 200; cursor: pointer; line-height: 1; }
.drawer__count { font-size: 0.9375rem; margin-bottom: 15px; color: var(--primary-color); font-weight: 700; }
.drawer .select { margin-bottom: 12px; }
.drawer .pay-toggle { margin: 6px auto 14px; }
.drawer__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drawer__more { display: block; width: 100%; background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; margin: 4px 0 14px; }
.drawer__actions { display: grid; gap: 10px; margin-top: 10px; }
.drawer__actions .button { width: 100%; }
.drawer__actions .link { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; padding: 6px; text-align: center; }
.switch { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; cursor: pointer; font-size: 0.9375rem; }
.switch input { position: absolute; opacity: 0; }
.switch__ui { position: relative; width: 44px; height: 24px; border-radius: 24px; background: #777; transition: background 0.2s; flex-shrink: 0; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.switch input:checked + .switch__ui { background: var(--primary-color); }
.switch input:checked + .switch__ui::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid #fff; outline-offset: 2px; }
body.no-scroll { overflow: hidden; }

/* ---------- Sold gallery ---------- */
.sold-head { max-width: 1100px; padding-top: 25px; }
.sold-head h1 { font-size: 1.75rem; margin: 40px 0 20px; }

/* ---------- Contact page ---------- */
.contact-top { display: flex; flex-direction: column; gap: 30px; align-items: center; }
@media (min-width: 48em) { .contact-top { flex-direction: row; justify-content: space-between; } }
.contact-hello { text-align: center; width: 100%; }
@media (min-width: 48em) { .contact-hello { width: 42%; } }
.contact-hello h2 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 25px; }
@media (min-width: 48em) { .contact-hello h2 { font-size: 2.375rem; } }
.contact-hello h2 span { color: var(--primary-color); }
.contact-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.contact-btn {
  flex: 1 1 200px; border-radius: 10px; padding: 12px 8px; line-height: 1.3; text-align: center;
  background: var(--primary-color); color: var(--text-on-primary-color); transition: opacity 0.2s;
}
.contact-btn:hover { opacity: 0.9; }
.contact-btn small { display: block; font-size: 0.875rem; font-weight: 600; }
.contact-btn strong { font-size: 1.5rem; font-weight: 700; }
.contact-btn strong i { font-size: 1.2rem; margin-right: 4px; }
.contact-btn--chat { background: #4fa23c; color: #fff; }
.contact-hours { width: 100%; background: var(--alternate-background); border-radius: var(--radius-panel); padding: 30px; }
@media (min-width: 48em) { .contact-hours { width: 50%; padding: 30px 50px 30px 70px; } }
.contact-hours h3 { font-family: var(--font-body); font-size: 1.0625rem; margin-bottom: 10px; }
.contact-hours p { margin: 8px 0 0; font-size: 0.9375rem; }
.hours-list { list-style: none; max-width: 100%; }
.hours-list li { display: flex; align-items: flex-end; gap: 5px; margin-bottom: 5px; line-height: 1.5; }
.hours-list__leader { flex: 1; margin-bottom: 7px; border-bottom: 1px dotted var(--lines-color); }
.contact-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.6); margin: 50px 0; }
.contact-bottom { display: flex; flex-direction: column; gap: 30px; }
@media (min-width: 48em) { .contact-bottom { flex-direction: row; } .contact-bottom > * { width: 50%; } }
@media (min-width: 75em) { .contact-bottom .contact-form-col { width: 41.6667%; } .contact-bottom .contact-map-col { margin-left: auto; } }
.contact-form-col h2 { font-size: 1.375rem; text-align: left; margin-bottom: 20px; }
.contact-form-col .cform__actions .button { width: 100%; }
.contact-map-col { display: flex; flex-direction: column; }
.contact-addr { display: flex; gap: 10px; margin-bottom: 20px; font-size: 0.9375rem; }
.contact-addr .icon-section__icon { margin-top: 4px; }
.contact-addr a { display: inline-block; margin-top: 4px; color: var(--primary-color); text-decoration: underline; font-weight: 700; }
.contact-map-col--no-map .contact-addr { padding: 30px; border-radius: var(--radius-panel); background: var(--alternate-background); font-size: 1.0625rem; }
.contact-map { flex: 1; min-height: 300px; width: 100%; border: 0; border-radius: var(--radius-panel); background: #ddd; }

/* ---------- Vehicle detail ---------- */
.vgallery { position: relative; margin-top: 0; background: #1c1c1c; }
.vgallery__track { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vgallery__track::-webkit-scrollbar { display: none; }
.vgallery__track > img {
  flex: 0 0 auto; height: 260px; width: auto; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: center; cursor: zoom-in;
}
@media (min-width: 48em) { .vgallery__track > img { height: 380px; } }
@media (min-width: 75em) { .vgallery__track > img { height: 460px; } }
.vgallery__track--single { justify-content: center; }
.vgallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, 0.9); color: #000; cursor: pointer;
}
.vgallery__nav--prev { left: max(10px, calc(50% - 330px)); }
.vgallery__nav--next { right: max(10px, calc(50% - 330px)); }
.vgallery__badges { position: absolute; z-index: 2; left: max(10px, calc(50% - 330px)); bottom: 10px; display: flex; gap: 6px; }
.vgallery__badges span, .vgallery__badges button {
  border: 0.5px solid rgba(209, 209, 209, 0.7); background: rgba(0, 0, 0, 0.7); color: #fff; border-radius: 3px;
  font-size: 0.75rem; padding: 3px 8px; font-family: var(--font-body); cursor: pointer;
}
.vdetail { display: flex; flex-direction: column; gap: 30px; padding-top: 25px; }
@media (min-width: 75em) {
  .vdetail { flex-direction: row; align-items: flex-start; gap: 30px; }
  .vdetail__main { width: 62.5%; }
  .vdetail__side { flex: 1; position: sticky; top: 80px; }
}
.vtitle { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
@media (min-width: 48em) { .vtitle { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.vtitle .vcard__sash { position: static; display: inline-block; margin-bottom: 10px; max-width: 100%; }
.vtitle h1 { font-size: 1.75rem; margin-bottom: 6px; }
.vtitle p { margin: 0; font-size: 1rem; }
.vtitle__ctas { display: flex; gap: 20px; flex-shrink: 0; }
.vtitle__ctas button, .vtitle__ctas a { background: none; text-decoration: none; border: 0; color: #fff; cursor: pointer; font: inherit; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 6px; }
.vtitle__ctas button i, .vtitle__ctas a i { width: 28px; height: 28px; border-radius: 50%; background: var(--alternate-background); display: inline-flex; align-items: center; justify-content: center; }
.vtitle__ctas button.is-on i { color: var(--primary-color); }

.specs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 5px; margin-bottom: 25px; }
.specs li { width: calc(50% - 3px); }
@media (min-width: 48em) { .specs li { width: calc(25% - 4px); } }
.spec {
  position: relative; height: 100%; min-height: 60px; border: 1px solid var(--lines-color); border-radius: 10px;
  padding: 6px 8px 6px 42px; display: flex; flex-direction: column; justify-content: center; font-size: 0.875rem; line-height: 1.3;
}
.spec svg, .spec i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; font-size: 18px; text-align: center; }
.spec b { font-weight: 700; }

.vpanel { background: var(--alternate-background); border-radius: var(--radius-panel); padding: 20px; margin-bottom: 25px; }
.vpanel__head { display: flex; align-items: center; gap: 12px; }
.vpanel__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--primary-color); color: #000; display: flex; align-items: center; justify-content: center; }
.vpanel h2 { font-size: 1.125rem; margin: 0; }
.vpanel p { margin: 6px 0 0; font-size: 0.9375rem; }
.vpanel--px { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 48em) { .vpanel--px { flex-direction: row; align-items: center; justify-content: space-between; } }
.vpanel--px .button { flex-shrink: 0; min-height: 40px; padding: 0 28px; font-size: 0.9375rem; }

.calc { background: #fff; color: #000; border-radius: 6px; padding: 20px; margin-top: 16px; }
.calc__inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 48em) { .calc__inputs { grid-template-columns: repeat(4, 1fr); } }
.calc label { display: block; font-size: 0.8125rem; text-align: center; margin-bottom: 4px; }
.calc input, .calc select { width: 100%; height: 34px; border: 1px solid #aaa; border-radius: 4px; padding: 0 8px; font: inherit; font-size: 0.875rem; background: #fff; }
.calc__result { margin-top: 18px; display: grid; gap: 0; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.calc__result h3 { margin: 0; padding: 10px; text-align: center; background: #f1f1f1; font-family: var(--font-body); font-size: 0.9375rem; }
.calc__row { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid #e5e5e5; font-size: 0.875rem; }
.calc__row b { font-weight: 700; }
.calc__note { font-size: 0.75rem; color: #444; margin: 12px 0 0; line-height: 1.4; }

.accordion { border-top: 1px solid rgba(255, 255, 255, 0.25); }
.accordion > details { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion__body { padding: 0 0 20px; font-size: 0.9375rem; line-height: 1.6; }
.accordion__body h3 { font-family: var(--font-heading); font-size: 1rem; margin: 10px 0 12px; }
.feature-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 30px; margin-bottom: 15px; }
@media (min-width: 48em) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.875rem; }
.feature-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.65rem; width: 18px; height: 18px; border-radius: 50%; background: #555; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tech-table { width: 100%; border-collapse: collapse; }
.tech-table th, .tech-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.875rem; }
.tech-table th { font-weight: 400; color: rgba(255, 255, 255, 0.75); width: 50%; }

.vside { background: var(--alternate-background); border-radius: var(--radius-panel); padding: 15px; }
.vprice { background: var(--body-background); border-radius: 15px; text-align: center; padding: 15px 30px; margin-bottom: 15px; }
.vprice__line { font-size: 0.9375rem; }
.vprice__line b { font-size: 1.75rem; font-weight: 800; margin-left: 4px; }
.vprice .button { width: 100%; margin-top: 15px; min-height: 40px; font-size: 0.9375rem; }
.vprice small { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.vcontact { text-align: center; padding: 6px 0 4px; }
.vcontact h3 { font-family: var(--font-body); font-size: 1rem; margin-bottom: 4px; }
.vcontact__phone { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.vcontact__addr { display: block; font-size: 0.75rem; text-decoration: underline; margin-top: 4px; }
.vside .button--light, .vside .button--red { width: 100%; min-height: 40px; margin-top: 12px; font-size: 0.9375rem; }
.vside-sold { text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 2rem; padding: 20px 0; }
.vnotfound { text-align: center; padding: 80px 15px; }

@media print {
  .site-header, .site-nav, .site-footer, .chat-fab, .to-top, .vgallery__nav, .vtitle__ctas, .vpanel--px, .vside .button, .vprice .button { display: none !important; }
  body { background: #fff; color: #000; }
  .vside, .vpanel, .vprice { background: #fff; color: #000; border: 1px solid #ccc; }
}

/* ---------- Sending a form to Carventory (js/forms.js) ---------- */
.cform__alert { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius-field); background: #fdecea; color: #8a1c14; font-size: 0.9375rem; line-height: 1.45; }
.cform__alert i { margin-top: 3px; }
.cform [type="submit"].is-sending { opacity: 1; cursor: progress; }
.cform__spinner { display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cform-spin .7s linear infinite; }
@keyframes cform-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cform__spinner { animation-duration: 2s; } }
.cform__done:focus { outline: none; }
.cform__ref { margin-top: 6px; font-size: 0.9375rem; }
.cform__ref strong { font-family: var(--font-heading); letter-spacing: .04em; }

/* ---------- Policy pages (Privacy, Cookie, Disclaimer) — text from Carventory ---------- */
.policy { max-width: 70ch; margin: 0 auto 20px; font-size: 1.0625rem; line-height: 1.7; }
.policy h2 { font-size: 1.375rem; margin: 2.2rem 0 0.75rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.policy h2:first-child, .policy .policy__updated + h2 { margin-top: 0.5rem; padding-top: 0; border-top: 0; }
.policy p, .policy li { font-weight: 300; overflow-wrap: anywhere; }
.policy ul { padding-left: 1.3rem; }
.policy li::marker { color: var(--primary-color); }
.policy .policy__updated {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 1.6rem; padding: 6px 14px;
  border-radius: 999px; background: var(--alternate-background); font-size: 0.875rem; font-weight: 600;
}
.policy__notice { padding: 24px; border-radius: var(--radius-panel); background: var(--alternate-background); border-left: 4px solid var(--primary-color); }
.policy__contact { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9375rem; }

/* ---------- Reviews page ---------- */
.rsummary {
  display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: 80px; padding: 30px 24px;
  border-radius: var(--radius-panel); background: var(--gradient); border-top: 4px solid var(--primary-color); text-align: center;
}
@media (min-width: 48em) { .rsummary { flex-direction: row; justify-content: space-between; padding: 30px 40px; text-align: left; } }
.rsummary__score { display: flex; align-items: center; gap: 18px; }
.rsummary__avg { font-family: var(--font-heading); font-weight: 800; font-size: 4rem; line-height: 1; color: var(--primary-color); }
.rsummary__detail { display: flex; flex-direction: column; gap: 6px; }
.rsummary__stars { font-size: 1.25rem; gap: 4px; }
.rsummary__count { font-weight: 300; }
.rchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rchip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 600; font-size: 0.9375rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.rchip:hover { border-color: var(--primary-color); }
.rchip[aria-current="page"] { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary-color); }
.rgrid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 72px 24px; margin-bottom: 40px; }
@media (min-width: 48em) { .rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .rgrid { grid-template-columns: repeat(3, 1fr); } }
.rgrid > li { min-width: 0; }
.rempty { margin: 0 auto 40px; }
.rcta { margin-top: 60px; }

/* ---------- Sell Your Car ---------- */
.sell { flex: 1; min-width: 0; }
.sell__lead { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; color: var(--primary-color); margin-bottom: 30px; }
@media (min-width: 48em) { .sell__lead { font-size: 1.625rem; } }
.sell__title { font-size: 1.5rem; margin-bottom: 18px; }
.sell-steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 50px; counter-reset: none; }
@media (min-width: 48em) { .sell-steps { grid-template-columns: repeat(3, 1fr); } }
.sell-step { position: relative; padding: 24px 22px 22px; border-radius: var(--radius-panel); background: var(--alternate-background); }
.sell-step__num {
  width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-color); color: var(--text-on-primary-color); font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem;
}
.sell-step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.sell-step p { margin: 0; font-size: 0.9375rem; font-weight: 300; }
.sell-form { padding: 26px 20px; border-radius: var(--radius-panel); background: var(--gradient); border-top: 4px solid var(--primary-color); scroll-margin-top: 90px; }
@media (min-width: 48em) { .sell-form { padding: 36px 40px; } }
.sell-form .cform__actions .button { min-height: 46px; padding: 0 36px; font-size: 1rem; }

/* ---------- HTML sitemap ---------- */
.smap { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 20px; }
@media (min-width: 48em) { .smap { grid-template-columns: 1fr 1fr; } .smap__col--cars { grid-row: span 2; } }
@media (min-width: 75em) { .smap { grid-template-columns: 1fr 2fr 1fr; } .smap__col--cars { grid-row: auto; } }
.smap h2 { position: relative; display: flex; align-items: center; gap: 10px; font-size: 1.25rem; padding-bottom: 10px; margin-bottom: 18px; }
.smap h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 3px; background: var(--primary-color); }
.smap__count { padding: 1px 10px; border-radius: 999px; background: var(--alternate-background); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; }
.smap__list { list-style: none; }
.smap__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.smap__list a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; transition: color 0.2s; }
.smap__list a:hover, .smap__list a:focus-visible { color: var(--primary-color); }
.smap__price { flex-shrink: 0; font-weight: 700; color: var(--primary-color); }
.smap__note { font-weight: 300; }
.smap__note a { color: var(--primary-color); text-decoration: underline; }

/* AA warranty section (/warranty). Shared offer tokens and .promo-* live in site.css with the MOT band. */
/* ============ 2. AA warranties (warranty page) ============ */
.aa { padding: 24px 0 0; }
.aa__card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-panel); color: #fff;
  background: linear-gradient(160deg, var(--gradient-color-left) 0%, #2b2b2b 50%, var(--gradient-color-right) 100%);
  padding: 34px 40px 30px; box-shadow: var(--shadow-bar);
}
.aa__photo { position: absolute; top: 0; right: 0; width: 42%; height: 260px; z-index: -1; opacity: .55;
  background: url('/images/offers/aa-headlight.jpg') 40% 45% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 60%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 60%); mask-composite: intersect; }

.aa__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.aa__head h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin: 0; }
.aa__head h2 span { color: var(--promo-gold); }
.aa__tagline { margin: 0; font-size: 1.35rem; transform: rotate(-4deg); }

.aa__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.aa-plan { display: flex; flex-direction: column; }
.paper { position: relative; color: var(--promo-ink); }
.paper--white { background: linear-gradient(170deg, #fafafa 0%, #e6e6e6 100%); }
.paper--yellow { background: linear-gradient(175deg, #f0c84b 0%, var(--promo-gold) 60%, #d3a92a 100%); }
.aa-plan__head { display: flex; align-items: center; gap: 16px; padding: 22px 22px 20px; transform: rotate(-.6deg); }
.aa__badge { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: #ffd200; border-radius: 3px; }
.aa-plan--lite .aa__badge { background: #111; }
.aa__badge img { width: 58px; height: auto; display: block; }
.aa__name { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1; margin: 0; letter-spacing: -.01em; }
.aa__name em { font-style: normal; color: var(--promo-gold); }
.aa__strap { font-family: var(--font-heading); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; margin: .5rem 0 0; }
.aa-plan__copy { margin: 16px 0 0; font-size: .95rem; line-height: 1.5; color: #e6e6e6; }
.aa-plan__feat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; list-style: none; margin: 14px 0 0; padding: 0; }
.aa-plan__feat li { display: flex; align-items: center; gap: 10px; font-size: .88rem; line-height: 1.3; }
.aa-plan__feat i { flex: none; width: 32px; height: 32px; border: 1.5px solid var(--promo-gold); border-radius: 50%; display: grid; place-items: center; color: var(--promo-gold); font-size: .85rem; }

.aa__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--font-heading); font-weight: 700; color: var(--promo-gold); text-decoration: none; }
.aa__cta i { width: 34px; height: 34px; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; transition: background .2s, color .2s; }
.aa__cta:hover i, .aa__cta:focus-visible i { background: var(--promo-gold); color: #000; }

@media (max-width: 991px) {
  .aa__plans { grid-template-columns: 1fr; gap: 26px; }
  .aa__photo { width: 70%; opacity: .35; }
}
@media (max-width: 560px) {
  .aa__card { padding: 26px 18px 24px; }
  .aa-plan__feat { grid-template-columns: 1fr; }
  .aa__tagline { font-size: 1.15rem; }
}

/* Torn-paper edges: fixed jagged polygons (generated once, not random per load). */
.torn--a{clip-path:polygon(0.00% 1.04%,2.08% 0.48%,4.17% 2.08%,6.25% 0.23%,8.33% 1.71%,10.42% 1.17%,12.50% 0.19%,14.58% 1.62%,16.67% 0.12%,18.75% 1.39%,20.83% 0.22%,22.92% 0.29%,25.00% 1.36%,27.08% 2.65%,29.17% 0.4%,31.25% 0.71%,33.33% 2.01%,35.42% 3.03%,37.50% 1.85%,39.58% 1.27%,41.67% 3.12%,43.75% 0.15%,45.83% 2.75%,47.92% 0.93%,50.00% 0.46%,52.08% 0.38%,54.17% 0.99%,56.25% 2.61%,58.33% 0.58%,60.42% 1.86%,62.50% 2.04%,64.58% 1.19%,66.67% 1.75%,68.75% 0.2%,70.83% 0.19%,72.92% 0.66%,75.00% 2.18%,77.08% 1.37%,79.17% 1.01%,81.25% 1.87%,83.33% 1.45%,85.42% 0.96%,87.50% 2.54%,89.58% 2.24%,91.67% 0.78%,93.75% 1.84%,95.83% 1.68%,97.92% 2.8%,100.00% 2.33%,99.85% 10%,99.82% 20%,99.77% 30%,99.77% 40%,99.52% 50%,99.41% 60%,99.74% 70%,100.0% 80%,99.58% 90%,100.00% 97.17%,97.92% 98.85%,95.83% 98.67%,93.75% 99.11%,91.67% 97.24%,89.58% 97.38%,87.50% 97.17%,85.42% 98.24%,83.33% 98.56%,81.25% 99.74%,79.17% 97.21%,77.08% 98.75%,75.00% 99.21%,72.92% 99.59%,70.83% 97.54%,68.75% 99.81%,66.67% 99.63%,64.58% 99.46%,62.50% 98.52%,60.42% 99.93%,58.33% 97.86%,56.25% 98.77%,54.17% 99.09%,52.08% 97.37%,50.00% 96.82%,47.92% 97.93%,45.83% 97.76%,43.75% 99.81%,41.67% 97.87%,39.58% 98.48%,37.50% 96.98%,35.42% 97.31%,33.33% 98.54%,31.25% 98.14%,29.17% 98.1%,27.08% 97.78%,25.00% 99.0%,22.92% 97.2%,20.83% 98.17%,18.75% 97.55%,16.67% 97.86%,14.58% 99.87%,12.50% 98.44%,10.42% 99.51%,8.33% 97.58%,6.25% 98.66%,4.17% 99.62%,2.08% 96.86%,0.00% 99.08%,0.87% 90%,0.78% 80%,0.9% 70%,0.05% 60%,0.68% 50%,0.62% 40%,0.52% 30%,0.69% 20%,0.95% 10%)}
.torn--b{clip-path:polygon(0.00% 1.77%,2.08% 1.8%,4.17% 0.47%,6.25% 2.85%,8.33% 0.28%,10.42% 0.3%,12.50% 0.94%,14.58% 0.73%,16.67% 1.53%,18.75% 0.24%,20.83% 0.0%,22.92% 0.68%,25.00% 0.46%,27.08% 1.64%,29.17% 0.11%,31.25% 3.93%,33.33% 2.76%,35.42% 0.67%,37.50% 1.14%,39.58% 1.56%,41.67% 1.64%,43.75% 0.55%,45.83% 3.82%,47.92% 4.47%,50.00% 2.1%,52.08% 2.18%,54.17% 0.39%,56.25% 0.46%,58.33% 1.54%,60.42% 1.19%,62.50% 3.73%,64.58% 0.73%,66.67% 0.1%,68.75% 4.28%,70.83% 2.38%,72.92% 0.66%,75.00% 2.44%,77.08% 0.12%,79.17% 2.38%,81.25% 4.4%,83.33% 3.88%,85.42% 3.13%,87.50% 1.18%,89.58% 1.65%,91.67% 0.75%,93.75% 3.47%,95.83% 2.4%,97.92% 3.51%,100.00% 1.48%,98.87% 10%,99.8% 20%,98.84% 30%,98.63% 40%,99.08% 50%,99.51% 60%,99.23% 70%,99.82% 80%,99.98% 90%,100.00% 99.32%,97.92% 99.43%,95.83% 99.23%,93.75% 96.74%,91.67% 95.74%,89.58% 98.19%,87.50% 98.22%,85.42% 95.63%,83.33% 96.4%,81.25% 98.5%,79.17% 96.45%,77.08% 99.2%,75.00% 97.85%,72.92% 96.62%,70.83% 96.48%,68.75% 95.91%,66.67% 97.03%,64.58% 99.62%,62.50% 96.4%,60.42% 97.06%,58.33% 97.84%,56.25% 96.22%,54.17% 95.95%,52.08% 97.19%,50.00% 99.08%,47.92% 99.11%,45.83% 98.98%,43.75% 99.01%,41.67% 98.36%,39.58% 95.7%,37.50% 95.55%,35.42% 95.78%,33.33% 97.99%,31.25% 95.7%,29.17% 96.88%,27.08% 98.83%,25.00% 98.74%,22.92% 99.87%,20.83% 99.87%,18.75% 98.4%,16.67% 97.67%,14.58% 98.98%,12.50% 96.67%,10.42% 96.32%,8.33% 96.37%,6.25% 96.16%,4.17% 95.57%,2.08% 96.35%,0.00% 99.0%,0.34% 90%,0.41% 80%,0.35% 70%,0.3% 60%,1.16% 50%,1.22% 40%,0.61% 30%,1.31% 20%,0.74% 10%)}