/*--------------------------------------------------------------
# Main Styles
--------------------------------------------------------------*/
body {
    overflow-x: hidden !important;
}

.single-defro-cars button {
    border-radius: 3px !important;
}

.single-defro-cars .rounded,
.single-defro-cars .badge {
    border-radius: 3px !important;
}

#filtering-by .accordion-button::after {
    width: 0;
    height: 0;
}

.text-small {
    font-size: 0.84em; /* 0.875em */
}

ul.li-mb-0 li {
    margin-bottom: 0;
}


/* Inventory list & grid — truncate long spec strings to a single line
   with ellipsis so cards stay uniform in height. Applies to all
   spec list items rendered inside cars-list rows (Engine, Drivetrain,
   Fuel Econ, Doors, Bodystyle, Interior, Exterior). */
.row.cars-list ul.list-unstyled li {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 20px;
  margin: 0px 0;
}

.sold-badge {
    top: 55px;
    right: -33px;
    background-color: red;
    padding: 5px 40px;
    transform: rotate(45deg);
    transform-origin: right top;
    z-index: 10;
}

.border-radius-3px {
    border-radius: 3px !important;
}

.border-radius-top-3px {
    border-radius: 3px 3px 0 0 !important;
}

.border-radius-left-3px {
    border-radius: 3px 0 0 3px !important;
}

.bg-gray {
    background-color: #ddd !important;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.toggle_filter {
    display: none;
}

.accordion-button {
    color: var(--bs-accordion-active-color) !important;
    background-color: var(--bs-accordion-active-bg) !important;
}

.accordion-button::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 1rem !important;
    transform: rotate(0deg) !important;
    width: 1rem !important;
    height: 1rem !important;
    float: right;
    margin-top: 3px;
    transition: transform 0.2s ease-in-out !important;
    opacity: 1 !important;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
}

@media (max-width: 767px) {
    #filter {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: 80%;
        padding-right: 0;
        padding-left: 0;
        z-index: 1000;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        background-color: white;
    }

    .admin-bar #filter {
        top: 46px;
    }

    #filter.show {
        left: 0;
    }

    .toggle_filter {
        display: inline-block;
    }

    .toggle_desktop_filter {
        display: none;
    }

    #filter_overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        transition: 0.3s ease-in-out;
    }
}

/*--------------------------------------------------------------
# Slick Carousel
--------------------------------------------------------------*/
#related_vehicles {
    overflow: hidden;
}

.slick-track {
    display: flex !important;
}

/* Hide previous and next buttons */
.slick-prev,
.slick-next {
    display: none !important;
}

/* Ensure dots are horizontal */
.slick-dots {
    display: flex !important; /* Use flexbox for horizontal alignment */
    justify-content: center; /* Center-align the dots */
    padding: 0;
    margin: 10px 0;
    list-style: none; /* Remove default list styling */
}

/* Style each dot container */
.slick-dots li {
    margin: 0 5px; /* Space between dots */
    display: inline-block;
}

/* Style the dots */
.slick-dots li button {
    font-size: 0;
    padding: 0; /* Remove button padding */
    border: none; /* Remove default border */
    background: none; /* Remove background */
    cursor: pointer; /* Change cursor to pointer */
}

.slick-dots li button:before {
    content: ' '; /* Remove the default circle */
    width: 30px; /* Width of the rectangle */
    height: 3px; /* Height of the rectangle */
    background-color: #ccc; /* Default dot color */
    display: block;
    border-radius: 0; /* Make it rectangular */
    transition: background-color 0.3s ease; /* Smooth color change */
}

/* Change the color of the active dot */
.slick-dots li.slick-active button:before {
    background-color: #fd390e; /* Active dot color */
}

#related_vehicles .slick-dots {
    position: relative !important;
}

#related_vehicles .slick-dots li button:hover,
#related_vehicles .slick-dots li button:focus {
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
}

/*--------------------------------------------------------------
# Carousel
--------------------------------------------------------------*/
#slide-show .carousel-control-prev,
#slide-show .carousel-control-next,
#slide-show .carousel-control-prev:hover,
#slide-show .carousel-control-next:hover,
.carousel .carousel-control-prev,
.carousel .carousel-control-next,
.carousel .carousel-control-prev:hover,
.carousel .carousel-control-prev:focus,
.carousel .carousel-control-next:hover,
.carousel .carousel-control-next:focus {
    border-radius: 0 !important;
    border: none;
    background: transparent;
}

.img-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.carousel .carousel-control-prev {
    padding-left: 8%;
}

.carousel .carousel-control-next {
    padding-right: 8%;
}

/* ============================================================
   PROMOTIONAL PRICING — defro-promo-badge
   ============================================================ */

.defro-promo-badge {
  display: inline-block;
  width: 100%;
}

/* "Promotional Price" label strip */
.defro-promo-label {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px 3px 0 0;
  margin-bottom: 3px;
}

/* Price row */
.defro-promo-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.1;
}

/* The promo (sale) price */
.defro-promo-price {
  font-size: 1.55rem;
  font-weight: 800;
  color: #c0392b;
}

/* The original price — crossed out, muted */
.defro-promo-original {
  font-size: 1rem;
  font-weight: 500;
  color: #888;
  text-decoration: line-through;
}

/* "Save $X" pill */
.defro-promo-savings {
  display: inline-block;
  margin-top: 4px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

/* Optional description text */
.defro-promo-desc {
  font-size: 0.8rem;
  color: #555;
  margin-top: 3px;
  font-style: italic;
}

/* "Ends on …" line */
.defro-promo-end {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
}

/* ── Price-box (single car page) sizing ── */
.price_box .defro-promo-price {
  font-size: 2rem;
}

/* ── Grid card compact sizing ── */
.defro-car-grid .defro-promo-price {
  font-size: 1.2rem;
}

.defro-car-grid .defro-promo-original {
  font-size: 0.85rem;
}

/* Was / Now labels */
.defro-promo-was {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.defro-promo-was-label,
.defro-promo-now-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  min-width: 32px;
}

.defro-promo-now-label {
  color: #c0392b;
}

/* Was price — muted and struck through */
.defro-promo-was .defro-promo-original {
  font-size: 0.95rem;
  color: #999;
  text-decoration: line-through;
}

/* Now price row */
.defro-promo-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Factory Options (single car page) */
.defro-factory-options {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
}

.defro-factory-options > h3 {
  color: #1f2937;
  border-bottom: 2px solid #1f2937;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.defro-factory-options > h3 .fa-cog {
  margin-right: 6px;
  color: #6b7280;
}

.defro-factory-category h4 {
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #6b7280 !important;
}

.defro-factory-item {
  font-size: 0.95rem;
}

.defro-factory-item:last-child {
  border-bottom: none !important;
}

.defro-factory-item strong {
  color: #1f2937;
  font-size: 0.95rem;
}

.defro-factory-item small {
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 2px;
}

/* CarGurus tab button — strip button defaults so badge sits clean */
.nav-link#car-gurus-tab {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}
.nav-link#car-gurus-tab:hover,
.nav-link#car-gurus-tab.active {
  opacity: 0.85;
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 4px;
}
.cargurus-badge-tab img {
  display: block;
}

/* CarGurus tab panel */
.cargurus-deal-panel {
  border: 1px solid #dee2e6;
}

/* Prevent CarGurus badge SDK's auto-injected link from hijacking clicks
   when it's inside our tab button. The button parent receives the click instead. */
.cargurus-badge-tab {
  pointer-events: none;
}
.cargurus-badge-tab a,
.cargurus-badge-tab img {
  pointer-events: none !important;
}

/* Force light theme on the CarGurus deal panel — override any dark theme inheritance */
#car-gurus.tab-pane .cargurus-deal-panel {
  background: #f8f9fa !important;
  color: #212529 !important;
}
#car-gurus.tab-pane .cargurus-deal-panel * {
  color: inherit;
}
#car-gurus.tab-pane .cargurus-deal-panel .text-muted,
#car-gurus.tab-pane .cargurus-deal-panel small {
  color: #6c757d !important;
}
#car-gurus.tab-pane .cargurus-deal-panel hr {
  border-color: #dee2e6 !important;
  opacity: 1;
}
#car-gurus.tab-pane .cargurus-deal-panel h5 {
  color: #212529 !important;
}
#car-gurus.tab-pane .cargurus-deal-panel .fw-bold {
  color: #212529 !important;
}
#car-gurus.tab-pane .cargurus-deal-panel .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

/* The large badge inside the deal panel — make it display-only.
   The "View full details on CarGurus" button below provides the real link. */
.cargurus-badge-large {
  pointer-events: none;
}
.cargurus-badge-large a,
.cargurus-badge-large img {
  pointer-events: none !important;
}

/* ============================================
 * Loading overlay — site-logo loader for AJAX
 * pagination, filtering, search, sort, and link
 * navigation to inventory pages.
 * ============================================ */
.defro-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.defro-loading-overlay.active {
  display: flex;
}

.defro-loading-overlay img {
  max-width: 180px;
  max-height: 120px;
  height: auto;
  width: auto;
  animation: defroPulse 1.2s ease-in-out infinite;
}

.defro-loading-overlay .defro-loading-bar {
  width: 160px;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.defro-loading-overlay .defro-loading-bar::after {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: #0d6efd;
  animation: defroSlide 1.2s ease-in-out infinite;
}

@keyframes defroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.96); }
}

@keyframes defroSlide {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ============================================
 * CarGurus iframe fallback panel — when CarGurus
 * blocks iframing (which they do with X-Frame-Options
 * and DataDome bot protection — they return 403),
 * the fallback panel is shown instead. Force light
 * theme so it's readable regardless of parent theme.
 * ============================================ */
.cargurus-iframe-fallback {
  background: #f8f9fa !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
}
.cargurus-iframe-fallback,
.cargurus-iframe-fallback * {
  color: #212529 !important;
}
.cargurus-iframe-fallback .text-muted,
.cargurus-iframe-fallback small,
.cargurus-iframe-fallback .small {
  color: #6c757d !important;
}
.cargurus-iframe-fallback hr {
  border-color: #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  opacity: 1 !important;
  background: transparent !important;
}
.cargurus-iframe-fallback h5,
.cargurus-iframe-fallback .fw-bold,
.cargurus-iframe-fallback .fs-5 {
  color: #212529 !important;
}
.cargurus-iframe-fallback p {
  color: #495057 !important;
}
.cargurus-iframe-fallback .btn-primary,
.cargurus-iframe-fallback a.btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
.cargurus-iframe-fallback .btn-primary:hover,
.cargurus-iframe-fallback a.btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #fff !important;
}

/* ============================================
 * Dealer Fees table (VDP)
 * Renders client.dealer-fees from the API
 * ============================================ */
.defro-dealer-fees .defro-dealer-fees-table {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  overflow: hidden;
}
.defro-dealer-fees .defro-dealer-fees-table td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  border-color: #e9ecef;
}
.defro-dealer-fees .defro-dealer-fees-table td.fee-name {
  color: #495057;
}
.defro-dealer-fees .defro-dealer-fees-table td.fee-amount {
  color: #212529;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 30%;
}
.defro-dealer-fees .defro-dealer-fees-table tr.fee-total td {
  border-top: 2px solid #dee2e6;
  background: #f8f9fa;
  color: #212529;
}

/* ============================================
 * Price-box breakdown table (dealer fees inside price box)
 * Renders Internet Price -> each dealer fee (+$XX) -> Sale Price total.
 * Auto-hides for sold cars, promo pricing, hidden prices, and dealers
 * with no fees configured.
 * ============================================ */
.defro-price-breakdown {
  border-top: 1px solid #dee2e6;
  padding-top: 0.5rem;
}
.defro-price-breakdown-table {
  margin-bottom: 0;
  background: transparent;
}
.defro-price-breakdown-table th,
.defro-price-breakdown-table td {
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: #212529;
  font-variant-numeric: tabular-nums;
}
.defro-price-breakdown-table .breakdown-fee th,
.defro-price-breakdown-table .breakdown-fee td {
  color: #495057;
}
.defro-price-breakdown-table .breakdown-sale th,
.defro-price-breakdown-table .breakdown-sale td {
  border-top: 1px solid #dee2e6;
  padding-top: 0.5rem;
  font-size: 1.05rem;
  color: #212529;
}

/* ============================================
 * Vehicle Disclaimers (financing + warranty from DF API)
 * ============================================ */
.defro-disclaimers .defro-disclaimer {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #6c757d;
}
.defro-disclaimers .defro-disclaimer p {
  margin-bottom: 0.75rem;
}
.defro-disclaimers .defro-disclaimer ul {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding-left: 0.5rem;
}
.defro-disclaimers .defro-disclaimer li {
  margin-bottom: 0.25rem;
}
.defro-disclaimers .defro-disclaimer-financing,
.defro-disclaimers .defro-disclaimer-warranty {
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-left: 3px solid #dee2e6;
  border-radius: 0.25rem;
}

/* Force white text on price-box breakdown rows and the smog exemption note.
   Used when the parent price-box has a dark/red background where default
   dark text would be unreadable. */
.defro-price-breakdown-table th.fw-bold,
.defro-price-breakdown-table td.text-end,
.defro-price-breakdown-table th.fw-normal,
.defro-price-breakdown p.small.text-muted.mb-0.mt-2 {
  color: #fff !important;
}


.defro-price-includes-fees:hover,
.defro-price-includes-fees:focus {
  background: #d4edda;
  border-color: #b7dfbe;
  color: #14532d !important;
  text-decoration: underline;
}
.defro-price-includes-fees .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #2e7d32;
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
}

/* ============================================
 * "Price includes fees" — white underlined text button, no background,
 * no border. Sits below the main price and opens the pricing details
 * bottom-sheet modal on click.
 * ============================================ */
.defro-price-includes-fees {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 0;
}
.defro-price-includes-fees:hover,
.defro-price-includes-fees:focus,
.defro-price-includes-fees:active {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: underline;
  opacity: 0.9;
}
.defro-price-includes-fees .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
}

/* ============================================
 * Pricing details modal — bottom sheet
 * Slides up from the bottom, takes ~half the viewport, with a dark
 * translucent overlay behind (backdrop). Matches the CarGurus mobile
 * pricing-details pattern.
 * ============================================ */
.defro-fees-modal {
  padding: 0 !important;
}
.defro-fees-modal .modal-dialog {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
.defro-fees-modal.show .modal-dialog {
  transform: translateY(0);
}
.defro-fees-modal .modal-content {
  border: 0;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  background: #fff;
  max-height: 65vh;
  overflow-y: auto;
}
.defro-fees-modal .modal-header {
  border-bottom: 1px solid #e9ecef;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.defro-fees-modal .modal-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #212529 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.defro-fees-modal .modal-body {
  padding: 1.25rem;
}

/* Dark translucent backdrop overlay */
.modal-backdrop.show {
  opacity: 0.6;
  background: #000;
}

/* Inside the modal, force readable dark colors on the breakdown table */
.defro-fees-modal .defro-price-breakdown-table {
  margin: 0;
}
.defro-fees-modal .defro-price-breakdown-table th,
.defro-fees-modal .defro-price-breakdown-table td {
  padding: 0.85rem 0 !important;
  color: #212529 !important;
  font-size: 1rem;
  border-bottom: 1px solid #e9ecef;
}
.defro-fees-modal .defro-price-breakdown-table tr:last-child th,
.defro-fees-modal .defro-price-breakdown-table tr:last-child td {
  border-bottom: 0;
}
.defro-fees-modal .defro-price-breakdown-table .breakdown-fee th,
.defro-fees-modal .defro-price-breakdown-table .breakdown-fee td {
  color: #495057 !important;
  font-weight: 400;
}
.defro-fees-modal .defro-price-breakdown-table .breakdown-sale th,
.defro-fees-modal .defro-price-breakdown-table .breakdown-sale td {
  color: #212529 !important;
  font-size: 1.05rem;
  font-weight: 700;
}
.defro-fees-modal .defro-price-breakdown p.small.text-muted {
  color: #6c757d !important;
  margin-top: 1rem !important;
  line-height: 1.5;
}
/* On desktop, still show as bottom sheet but constrain width and center it */
@media (min-width: 576px) {
  .defro-fees-modal .modal-dialog {
    max-width: 500px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 100%);
  }
  .defro-fees-modal.show .modal-dialog {
    transform: translate(-50%, 0);
  }
}

/* ============================================
 * Fees modal — bottom sheet + close button fixes
 * Scoped tightly to .defro-fees-modal to avoid clashing with other
 * modals on the site, and using stronger specificity + inline SVG
 * with size to prevent theme overrides.
 * ============================================ */

/* Bottom-align the fees modal only (do NOT affect other modals) */
.defro-fees-modal .modal-dialog-centered {
  align-items: end !important;
}

/* Close button — solid black circle with a clear white X.
   Using a large explicit size and background properties with !important
   so aggressive theme CSS can't hide the icon (K1 Motors was overriding
   the background-image and leaving the button as a blank black square). */
.defro-fees-modal .modal-header .btn-close,
.defro-fees-modal button.btn-close {
  position: relative;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #000 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Draw the X ourselves with two rotated pseudo-elements — this can't be
   hidden by theme rules stripping background-image */
.defro-fees-modal .modal-header .btn-close::before,
.defro-fees-modal button.btn-close::before,
.defro-fees-modal .modal-header .btn-close::after,
.defro-fees-modal button.btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transform-origin: center;
}
.defro-fees-modal .modal-header .btn-close::before,
.defro-fees-modal button.btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.defro-fees-modal .modal-header .btn-close::after,
.defro-fees-modal button.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.defro-fees-modal .modal-header .btn-close:hover,
.defro-fees-modal button.btn-close:hover {
  background-color: #333 !important;
  opacity: 1 !important;
}

/* Pricing details modal title icon — black */
.defro-fees-modal .modal-title i,
.defro-fees-modal .modal-title .fa-tag {
  color: #000 !important;
}

/* Modal footer with a big visible Close button — fallback in case the
   small X in the header is hidden by aggressive theme CSS. */
.defro-fees-modal .modal-footer.defro-fees-modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 1rem 1.25rem;
  display: block;
}
.defro-fees-modal .modal-footer.defro-fees-modal-footer .btn-dark {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  padding: 0.65rem 1rem;
  font-weight: 500;
}
.defro-fees-modal .modal-footer.defro-fees-modal-footer .btn-dark:hover {
  background-color: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

/*--------------------------------------------------------------
# Premium Design System (1.2.19)
#
# Every colour resolves through the two custom properties printed
# inline by Scripts::frontend(), which read the Brand and Accent
# colour pickers on the Design & SEO tab.
--------------------------------------------------------------*/
:root {
  --defro-brand: #0B1F3A;
  --defro-accent: #0B1F3A;
  /* RGB channel fallbacks for the rgba() tints below. Scripts::frontend()
     overrides all four values inline from the admin colour pickers; these
     defaults keep the tints working if that inline block is ever stripped
     or reordered by a CSS optimisation plugin. */
  --defro-brand-rgb: 11, 31, 58;
  --defro-accent-rgb: 11, 31, 58;
  --defro-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230B1F3A' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --defro-ink: #16202E;
  --defro-muted: #6B7280;
  --defro-line: #E4E7EC;
  --defro-surface: #FFFFFF;
  --defro-surface-alt: #F7F8FA;
  --defro-radius: 4px;
}

/*--------------------------------------------------------------
# Premium typography
#
# Hierarchy through size, spacing and colour rather than weight.
# Scoped to the inventory and vehicle pages via the body class so
# the rest of the theme is untouched.
--------------------------------------------------------------*/
.defro-premium-type .cars-list h1,
.defro-premium-type .cars-list h2,
.defro-premium-type .cars-list h3,
.defro-premium-type .cars-list h4,
.defro-premium-type .cars-list h5,
.defro-premium-type #filter h5,
.defro-premium-type .defro-seo-content h2,
.defro-premium-type .defro-seo-content h3,
.defro-premium-type .defro-brand-index__title {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.defro-premium-type .cars-list .fw-bold,
.defro-premium-type .cars-list strong {
  font-weight: 500;
}

.defro-premium-type .cars-list .btn,
.defro-premium-type .defro-toolbar .form-select {
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.defro-premium-type .defro-toolbar h3 {
  font-size: 1rem;
  font-weight: 500;
}

/*--------------------------------------------------------------
# Style 3 — premium vehicle card
--------------------------------------------------------------*/
.dfp-card {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  background: var(--defro-surface);
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dfp-card:hover {
  border-color: rgba(var(--defro-brand-rgb), 0.35);
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.08);
}

.dfp-card--grid {
  grid-template-columns: 1fr;
  height: 100%;
  margin-bottom: 0;
}

/* Media */
.dfp-media {
  position: relative;
  background: var(--defro-surface-alt);
  min-height: 240px;
}

.dfp-card--grid .dfp-media {
  min-height: 0;
}

.dfp-media .carousel,
.dfp-media .carousel-inner,
.dfp-media .carousel-item {
  height: 100%;
}

.dfp-media__img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}

.dfp-card--grid .dfp-media__img {
  min-height: 0;
  aspect-ratio: 4 / 3;
  height: auto;
}

.dfp-condition {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  background: rgba(255, 255, 255, 0.94);
  color: var(--defro-brand);
  border: 1px solid rgba(var(--defro-brand-rgb), 0.18);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
}

/* Body */
.dfp-body {
  padding: 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

.dfp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dfp-title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--defro-ink);
}

.dfp-title a {
  color: inherit;
  text-decoration: none;
}

.dfp-title a:hover {
  color: var(--defro-brand);
}

.dfp-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--defro-muted);
  line-height: 1.4;
}

.dfp-stock {
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--defro-muted);
  white-space: nowrap;
}

.dfp-stock__label {
  display: block;
  letter-spacing: 0.04em;
}

.dfp-stock__value {
  display: block;
  color: var(--defro-ink);
}

/* Price */
.dfp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dfp-price-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dfp-price-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

.dfp-price {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--defro-brand);
}

.dfp-price a {
  color: inherit;
  text-decoration: none;
  font-size: 1.25rem;
}

.dfp-price--sold {
  color: #B42318;
}

.dfp-payment {
  font-size: 0.8125rem;
  color: var(--defro-muted);
  margin-top: 0.125rem;
}

/* Spec strip */
.dfp-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0.875rem 0;
  border-top: 1px solid var(--defro-line);
  border-bottom: 1px solid var(--defro-line);
}

.dfp-spec {
  flex: 1 1 0;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.5rem;
  text-align: center;
  border-left: 1px solid var(--defro-line);
}

.dfp-spec:first-child {
  border-left: 0;
}

.dfp-spec__icon {
  display: block;
  color: var(--defro-brand);
  line-height: 0;
}

.dfp-spec__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.dfp-spec__value {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--defro-ink);
}

/* Footer */
.dfp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.dfp-footer--grid {
  flex-direction: column;
  align-items: stretch;
}

.dfp-logos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dfp-logos img {
  /* Superseded further down: badges render at their natural size */
  width: auto;
}

.dfp-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dfp-footer--grid .dfp-actions .dfp-btn {
  flex: 1 1 auto;
  text-align: center;
}

/* Buttons */
.dfp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.6875rem 1.125rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.dfp-btn--primary {
  background: var(--defro-brand);
  border-color: var(--defro-brand);
  color: #fff;
}

.dfp-btn--primary:hover,
.dfp-btn--primary:focus {
  background: var(--defro-accent);
  border-color: var(--defro-accent);
  color: #fff;
  filter: brightness(1.12);
}

.dfp-btn--outline {
  background: transparent;
  border-color: var(--defro-line);
  color: var(--defro-ink);
}

.dfp-btn--outline:hover,
.dfp-btn--outline:focus {
  border-color: var(--defro-brand);
  color: var(--defro-brand);
  background: rgba(var(--defro-brand-rgb), 0.04);
}

/* "Make an Offer" button inherits the card's button styling */
.dfp-actions .btn {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.6875rem 1.125rem;
  border-radius: 2px;
}

/* Address bar */
.dfp-address {
  grid-column: 1 / -1;
  background: var(--defro-brand);
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 0.625rem 1rem;
}

.dfp-card .carstory-container:empty {
  display: none;
}

@media (max-width: 767.98px) {

  .dfp-card {
    grid-template-columns: 1fr;
  }

  .dfp-media__img {
    min-height: 0;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .dfp-head {
    flex-direction: column;
    gap: 0.375rem;
  }

  .dfp-stock {
    text-align: left;
  }

  .dfp-price-row {
    align-items: flex-start;
  }

  .dfp-price-row .dfp-btn--primary {
    width: 100%;
  }

  .dfp-spec {
    flex: 1 1 33%;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    border-left: 0;
  }

  .dfp-actions {
    width: 100%;
  }

  .dfp-actions .dfp-btn {
    flex: 1 1 auto;
  }

}

/*--------------------------------------------------------------
# Premium spec icons on the classic Style 1 / Style 2 cards
--------------------------------------------------------------*/
.fuel-icon svg,
.mileage-icon svg,
.engine-icon svg,
.transmission-icon svg {
  width: 30px;
  height: 30px;
  color: var(--defro-brand);
}

/*--------------------------------------------------------------
# Results bar
--------------------------------------------------------------*/
.defro-results-bar {
  font-size: 0.875rem;
  color: var(--defro-muted);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--defro-line);
  margin-bottom: 1.25rem;
}

.defro-results-bar--bottom {
  border-bottom: 0;
  border-top: 1px solid var(--defro-line);
  margin: 1.25rem 0 0.5rem;
  text-align: center;
}

.defro-results-bar strong {
  color: var(--defro-ink);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Load More
--------------------------------------------------------------*/
.defro-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 0.5rem;
}

.defro-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 240px;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--defro-brand);
  background: transparent;
  border: 1px solid var(--defro-brand);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.defro-load-more:hover:not(:disabled) {
  background: var(--defro-brand);
  color: #fff;
}

.defro-load-more:disabled {
  opacity: 0.65;
  cursor: default;
}

.defro-load-more__spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: defro-spin 0.7s linear infinite;
}

.defro-load-more.is-loading .defro-load-more__spinner {
  display: inline-block;
}

@keyframes defro-spin {
  to { transform: rotate(360deg); }
}

.defro-just-loaded {
  animation: defro-fade-in 0.35s ease both;
}

@keyframes defro-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

  .defro-just-loaded {
    animation: none;
  }

  .defro-load-more__spinner {
    animation-duration: 2s;
  }

  .dfp-card {
    transition: none;
  }

}

/*--------------------------------------------------------------
# Filter panel — Simple and Branded styles
#
# Both variants share one modern base: white surfaces, hairline
# rules, black control text and square-ish corners. The variants
# differ only in how much of the brand colour they spend.
#
#   Simple   — neutral ink headings, brand used only on controls
#   Branded  — brand-coloured headings and a brand accent rule
#   Classic  — untouched, so existing sites are unaffected
#
# Selectors lead with #filter to outspecify the plugin's own
# .accordion-button !important rule and any theme overrides.
--------------------------------------------------------------*/
#filter.defro-filter--simple .bg-light,
#filter.defro-filter--branded .bg-light {
  background: var(--defro-surface) !important;
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
}

#filter.defro-filter--simple h5,
#filter.defro-filter--branded h5 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--defro-ink);
}

/* Section headings — white in both variants, never a filled block */
#filter.defro-filter--simple .accordion-button,
#filter.defro-filter--simple .defro-filter-heading,
#filter.defro-filter--branded .accordion-button,
#filter.defro-filter--branded .defro-filter-heading {
  background: var(--defro-surface) !important;
  background-color: var(--defro-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--defro-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0.6875rem 0 !important;
  transition: color 0.15s ease;
}

#filter.defro-filter--simple .accordion-button,
#filter.defro-filter--simple .defro-filter-heading {
  color: var(--defro-ink) !important;
}

/* Branded spends the colour on heading text and a left accent rule */
#filter.defro-filter--branded .accordion-button,
#filter.defro-filter--branded .defro-filter-heading {
  color: var(--defro-brand) !important;
  padding-left: 0.625rem !important;
  border-left: 2px solid var(--defro-brand) !important;
}

#filter.defro-filter--simple .accordion-button:hover,
#filter.defro-filter--branded .accordion-button:hover {
  color: var(--defro-accent) !important;
}

#filter.defro-filter--simple .accordion-button:not(.collapsed) {
  color: var(--defro-brand) !important;
}

#filter.defro-filter--simple .accordion-button:focus-visible,
#filter.defro-filter--branded .accordion-button:focus-visible {
  outline: 2px solid var(--defro-brand);
  outline-offset: -2px;
}

/* Selects and text inputs — white surface, black text, modern rule */
#filter.defro-filter--simple .form-select,
#filter.defro-filter--simple .form-control,
#filter.defro-filter--branded .form-select,
#filter.defro-filter--branded .form-control {
  background-color: var(--defro-surface) !important;
  color: var(--defro-ink) !important;
  border: 1px solid var(--defro-line) !important;
  border-radius: 3px;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#filter.defro-filter--simple .form-select,
#filter.defro-filter--branded .form-select {
  padding-right: 2rem;
}

#filter.defro-filter--simple .form-select option,
#filter.defro-filter--branded .form-select option {
  color: var(--defro-ink);
  background: var(--defro-surface);
}

#filter.defro-filter--simple .form-select:focus,
#filter.defro-filter--simple .form-control:focus,
#filter.defro-filter--branded .form-select:focus,
#filter.defro-filter--branded .form-control:focus {
  border-color: var(--defro-brand) !important;
  box-shadow: 0 0 0 3px rgba(var(--defro-brand-rgb), 0.12);
}

#filter.defro-filter--simple .form-control::placeholder,
#filter.defro-filter--branded .form-control::placeholder {
  color: var(--defro-muted);
  opacity: 1;
}

/* Free-text search — transparent field, brand button, one shared outline */
#filter.defro-filter--simple .input-group,
#filter.defro-filter--branded .input-group {
  border: 1px solid var(--defro-line);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#filter.defro-filter--simple .input-group:focus-within,
#filter.defro-filter--branded .input-group:focus-within {
  border-color: var(--defro-brand);
  box-shadow: 0 0 0 3px rgba(var(--defro-brand-rgb), 0.12);
}

#filter.defro-filter--simple #search,
#filter.defro-filter--branded #search {
  background: transparent !important;
  color: var(--defro-ink) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

#filter.defro-filter--simple #search:focus,
#filter.defro-filter--branded #search:focus {
  border: 0 !important;
  box-shadow: none !important;
}

#filter.defro-filter--simple .input-group .btn,
#filter.defro-filter--branded .input-group .btn {
  border-radius: 0 !important;
  border: 0 !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Filtering-by badges — quiet chips rather than solid fills */
#filter.defro-filter--simple .badge.bg-primary,
#filter.defro-filter--branded .badge.bg-primary {
  background: rgba(var(--defro-brand-rgb), 0.08) !important;
  color: var(--defro-brand) !important;
  border: 1px solid rgba(var(--defro-brand-rgb), 0.22);
  font-weight: 500;
  border-radius: 2px;
}

/* Checkboxes */
#filter.defro-filter--simple .form-check-input:checked,
#filter.defro-filter--branded .form-check-input:checked {
  background-color: var(--defro-brand);
  border-color: var(--defro-brand);
}

#filter.defro-filter--simple .form-check-input:focus,
#filter.defro-filter--branded .form-check-input:focus {
  border-color: var(--defro-brand);
  box-shadow: 0 0 0 3px rgba(var(--defro-brand-rgb), 0.12);
}

#filter.defro-filter--simple .form-check-label,
#filter.defro-filter--branded .form-check-label {
  font-size: 0.875rem;
  color: var(--defro-ink);
}

/*--------------------------------------------------------------
# Filter buttons
#
# Apply Filters, Reset Search, Find and the inline Filter buttons
# all take the same shape and colour as the Finance / Test Drive /
# Details buttons on the vehicle cards, so the page has one button
# language driven by the Brand and Accent colours.
--------------------------------------------------------------*/
#filter.defro-filter--simple .btn,
#filter.defro-filter--branded .btn {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.6875rem 1.125rem;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#filter.defro-filter--simple .btn-primary,
#filter.defro-filter--branded .btn-primary {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

#filter.defro-filter--simple .btn-primary:hover,
#filter.defro-filter--simple .btn-primary:focus,
#filter.defro-filter--branded .btn-primary:hover,
#filter.defro-filter--branded .btn-primary:focus {
  background: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
  color: #fff !important;
  filter: brightness(1.12);
}

#filter.defro-filter--simple .btn-primary:active,
#filter.defro-filter--branded .btn-primary:active {
  filter: brightness(0.92);
}

#filter.defro-filter--simple .btn-secondary,
#filter.defro-filter--branded .btn-secondary {
  background: transparent !important;
  border-color: var(--defro-line) !important;
  color: var(--defro-ink) !important;
}

#filter.defro-filter--simple .btn-secondary:hover,
#filter.defro-filter--simple .btn-secondary:focus,
#filter.defro-filter--branded .btn-secondary:hover,
#filter.defro-filter--branded .btn-secondary:focus {
  background: rgba(var(--defro-brand-rgb), 0.04) !important;
  border-color: var(--defro-accent) !important;
  color: var(--defro-accent) !important;
}

#filter.defro-filter--simple .btn:focus-visible,
#filter.defro-filter--branded .btn:focus-visible {
  outline: 2px solid var(--defro-brand);
  outline-offset: 2px;
}

/* Reset Search sits next to Apply Filters as an anchor, so it needs the
   same box model as the button beside it */
#filter.defro-filter--simple a.btn,
#filter.defro-filter--branded a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/*--------------------------------------------------------------
# Brand Index
--------------------------------------------------------------*/
.defro-brand-index {
  padding: 2.5rem 0;
}

.defro-brand-index__title {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--defro-ink);
  margin: 0 0 1.25rem;
}

.defro-brand-index__list {
  display: grid;
  grid-template-columns: repeat(var(--defro-brand-cols, 6), minmax(0, 1fr));
  gap: 1px;
  background: var(--defro-line);
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.defro-brand-index__item {
  margin: 0;
  background: var(--defro-surface);
}

.defro-brand-index__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
  color: var(--defro-ink);
  font-size: 0.9375rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.defro-brand-index__link:hover,
.defro-brand-index__link:focus {
  background: rgba(var(--defro-brand-rgb), 0.05);
  color: var(--defro-brand);
}

.defro-brand-index__count {
  font-size: 0.75rem;
  color: var(--defro-muted);
}

/* Inline variant — the pipe-separated single line from the brief */
.defro-brand-index--inline .defro-brand-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  background: transparent;
  border: 0;
}

.defro-brand-index--inline .defro-brand-index__item + .defro-brand-index__item::before {
  content: "|";
  color: var(--defro-line);
  margin-right: 0.25rem;
}

.defro-brand-index--inline .defro-brand-index__item {
  display: flex;
  align-items: center;
  background: transparent;
}

.defro-brand-index--inline .defro-brand-index__link {
  padding: 0.25rem 0.375rem;
  background: transparent;
}

.defro-brand-index--inline .defro-brand-index__count {
  margin-left: 0.25rem;
}

@media (max-width: 991.98px) {
  .defro-brand-index__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .defro-brand-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*--------------------------------------------------------------
# Inventory SEO content
--------------------------------------------------------------*/
.defro-seo-content {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--defro-line);
  color: var(--defro-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.defro-seo-content h2 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--defro-brand);
  margin: 0 0 0.625rem;
}

.defro-seo-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--defro-brand);
  margin: 1.5rem 0 0.5rem;
}

.defro-seo-content p {
  margin: 0 0 0.875rem;
}

.defro-seo-content ul {
  padding-left: 1.125rem;
  margin: 0 0 0.875rem;
}

.defro-seo-content strong {
  color: var(--defro-ink);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Keyboard focus — visible on every interactive element the
# premium styles introduce.
--------------------------------------------------------------*/
.dfp-btn:focus-visible,
.defro-load-more:focus-visible,
.defro-brand-index__link:focus-visible {
  outline: 2px solid var(--defro-brand);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# Style 3 grid refinements
#
# Five spec items in a narrow column wrap unevenly against the
# flex rules used for the wide list card, so grid cards lay the
# strip out on a fixed three-column grid instead.
--------------------------------------------------------------*/
.dfp-card--grid .dfp-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem 0;
}

.dfp-card--grid .dfp-spec {
  flex: none;
  min-width: 0;
  border-left: 1px solid var(--defro-line);
  padding: 0 0.25rem;
}

/* Reset the divider at the start of each row rather than only the first item */
.dfp-card--grid .dfp-spec:nth-child(3n + 1) {
  border-left: 0;
}

/* Keep card heights even when a long vehicle title wraps */
.dfp-card--grid .dfp-title {
  font-size: 1.0625rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dfp-card--grid .dfp-subtitle {
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dfp-card--grid .dfp-body {
  flex: 1 1 auto;
  padding: 1.125rem;
}

.dfp-card--grid .dfp-price {
  font-size: 1.5rem;
}

.dfp-card--grid .dfp-price-row {
  align-items: flex-end;
  flex-wrap: nowrap;
}

.dfp-card--grid .dfp-logos {
  justify-content: center;
  width: 100%;
}

@media (max-width: 767.98px) {

  /* The list card collapses to a single column on phones, so it needs the
     same three-column spec treatment as the grid card */
  .dfp-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem 0;
  }

  .dfp-spec {
    border-left: 1px solid var(--defro-line);
  }

  .dfp-spec:nth-child(3n + 1) {
    border-left: 0;
  }

}

/*--------------------------------------------------------------
# Inventory view toggle
#
# Replaces the List/Grid select with two icon buttons. Kept square
# and quiet so it reads as a control rather than a call to action.
--------------------------------------------------------------*/
.defro-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* These are bare <button> elements sitting inside the theme's content area,
   so almost every dealer theme has a rule such as "#content button" or
   ".site-content button" that would otherwise repaint them in the theme's own
   button colour and pill radius. An ID selector beats any number of classes
   no matter which stylesheet loads last, so class-only rules lose that fight
   even with !important. These selectors therefore lead with the toggle's own
   ID, paired with the #main-content wrapper, which outranks a single-ID theme
   rule and lets the Brand and Accent colours through without per-site CSS. */
#defro-view-toggle button.defro-view-btn,
#main-content #defro-view-toggle .defro-view-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0;
  background: var(--defro-surface) !important;
  background-color: var(--defro-surface) !important;
  background-image: none !important;
  border: 1px solid var(--defro-line) !important;
  border-radius: 3px !important;
  color: var(--defro-muted) !important;
  box-shadow: none !important;
  text-transform: none !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#defro-view-toggle button.defro-view-btn:hover,
#main-content #defro-view-toggle .defro-view-btn:hover {
  background: var(--defro-surface) !important;
  background-color: var(--defro-surface) !important;
  color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
}

#defro-view-toggle button.defro-view-btn.is-active,
#main-content #defro-view-toggle .defro-view-btn.is-active {
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

#defro-view-toggle button.defro-view-btn.is-active:hover,
#main-content #defro-view-toggle .defro-view-btn.is-active:hover {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
  color: #fff !important;
}

/* The icons are drawn with fill="currentColor", so a theme rule that sets a
   fill on button svgs has to be overridden too or the icon stays the theme's
   colour on a correctly coloured button */
#defro-view-toggle button.defro-view-btn svg,
#main-content #defro-view-toggle .defro-view-btn svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  color: inherit !important;
}

#defro-view-toggle button.defro-view-btn:focus-visible,
#main-content #defro-view-toggle .defro-view-btn:focus-visible {
  outline: 2px solid var(--defro-brand) !important;
  outline-offset: 2px;
}

/* The Make an Offer button is rendered by a shared method, so on Style 3 it
   picks up the premium button classes and needs no Bootstrap overrides. This
   just guards against a theme's global .btn rules leaking into it. */
.dfp-actions .dfp-btn.defro-offer-btn-card {
  background: transparent;
  border: 1px solid var(--defro-line);
  color: var(--defro-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: none;
  box-shadow: none;
}

.dfp-actions .dfp-btn.defro-offer-btn-card:hover,
.dfp-actions .dfp-btn.defro-offer-btn-card:focus {
  border-color: var(--defro-brand);
  color: var(--defro-brand);
  background: rgba(var(--defro-brand-rgb), 0.04);
}

/*--------------------------------------------------------------
# Card button states — list and grid
#
# Normal, hover, active and focus all resolve through the Brand
# and Accent colours, so the two pickers drive every state in
# both views rather than only the resting one.
--------------------------------------------------------------*/
.dfp-btn--primary:active,
.dfp-card--grid .dfp-btn--primary:active {
  background: var(--defro-accent);
  border-color: var(--defro-accent);
  color: #fff;
  filter: brightness(0.92);
}

.dfp-btn--outline:active,
.dfp-card--grid .dfp-btn--outline:active {
  background: rgba(var(--defro-brand-rgb), 0.1);
  border-color: var(--defro-accent);
  color: var(--defro-accent);
}

/* Hover on the outline buttons leans on the accent so a dealership can
   set a second colour and see it used, rather than both pickers
   resolving to the same navy */
.dfp-btn--outline:hover,
.dfp-btn--outline:focus,
.dfp-actions .dfp-btn.defro-offer-btn-card:hover,
.dfp-actions .dfp-btn.defro-offer-btn-card:focus {
  border-color: var(--defro-accent);
  color: var(--defro-accent);
  background: rgba(var(--defro-accent-rgb), 0.05);
}

/* Whole-card hover picks up the brand tint in both views */
.dfp-card:hover,
.dfp-card--grid:hover {
  border-color: rgba(var(--defro-brand-rgb), 0.35);
}

/* Title and price links */
.dfp-title a:hover,
.dfp-title a:focus {
  color: var(--defro-accent);
}

.dfp-price a:hover {
  color: var(--defro-accent);
}

/* Carousel controls tinted to brand instead of stock Bootstrap white */
.dfp-media .carousel-control-prev,
.dfp-media .carousel-control-next {
  width: 12%;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.dfp-card:hover .carousel-control-prev,
.dfp-card:hover .carousel-control-next,
.dfp-media .carousel-control-prev:focus-visible,
.dfp-media .carousel-control-next:focus-visible {
  opacity: 0.9;
}

.dfp-media .carousel-control-prev-icon,
.dfp-media .carousel-control-next-icon {
  background-color: rgba(var(--defro-brand-rgb), 0.75);
  border-radius: 50%;
  padding: 0.75rem;
  background-size: 45%;
}

/* Condition badge follows the brand */
.dfp-condition {
  color: var(--defro-brand);
}

/* Toolbar sort control matched to the view toggle */
.defro-toolbar .form-select {
  border-color: var(--defro-line);
  border-radius: 3px;
  color: var(--defro-ink);
}

.defro-toolbar .form-select:focus {
  border-color: var(--defro-brand);
  box-shadow: 0 0 0 3px rgba(var(--defro-brand-rgb), 0.12);
}

/* Numbered pagination driven by the brand colour */
#defro-pagination .page-link {
  color: var(--defro-ink);
  border-color: var(--defro-line);
  border-radius: 2px;
  margin: 0 2px;
}

#defro-pagination .page-link:hover {
  color: var(--defro-accent);
  border-color: var(--defro-accent);
  background: rgba(var(--defro-accent-rgb), 0.05);
}

#defro-pagination .page-item.active .page-link,
#defro-pagination .page-link.current {
  background: var(--defro-brand);
  border-color: var(--defro-brand);
  color: #fff;
}

/*--------------------------------------------------------------
# Filter panel structural fixes
--------------------------------------------------------------*/
/* Force full-width flex headings so the rule under each section spans the
   panel and the chevron sits hard right, regardless of theme button resets */
#filter.defro-filter--simple .accordion-button,
#filter.defro-filter--branded .accordion-button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  text-align: left;
}

/* Apply Filters and Reset Search sit in half-width columns with Bootstrap's
   px-0 utility stripping the horizontal padding, so the labels need to be
   held on one line */
#filter.defro-filter--simple .btn,
#filter.defro-filter--branded .btn {
  white-space: nowrap;
}

/*--------------------------------------------------------------
# List card spec strip
#
# Five specs should stay on one row in list view at desktop width.
# Allowing the flex row to wrap pushed the fifth item onto its own
# line whenever a long label such as "All Wheel Drive" could not
# shrink, so the row is held to a single line and the labels wrap
# inside their own cell instead.
--------------------------------------------------------------*/
@media (min-width: 768px) {

  .dfp-card:not(.dfp-card--grid) .dfp-specs {
    flex-wrap: nowrap;
  }

  .dfp-card:not(.dfp-card--grid) .dfp-spec {
    min-width: 0;
  }

}

/*--------------------------------------------------------------
# Filter arrows
#
# The collapse chevrons and the select dropdown arrows both use the
# brand colour. A custom property cannot be interpolated inside a
# url(), so Scripts::frontend() builds the arrow as a complete
# url() value with the colour already baked in and exposes it as
# --defro-chevron. The stylesheet only points at that value.
--------------------------------------------------------------*/
#filter.defro-filter--simple .accordion-button::after,
#filter.defro-filter--branded .accordion-button::after,
#filter.defro-filter--simple .defro-filter-heading::after,
#filter.defro-filter--branded .defro-filter-heading::after {
  background-image: var(--defro-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 0.8rem !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
  margin-top: 0 !important;
  flex: 0 0 auto;
  opacity: 1 !important;
  transition: transform 0.2s ease-in-out !important;
}

/* Points down when the section is closed, up when it is open */
#filter.defro-filter--simple .accordion-button.collapsed::after,
#filter.defro-filter--branded .accordion-button.collapsed::after {
  transform: rotate(0deg) !important;
}

#filter.defro-filter--simple .accordion-button:not(.collapsed)::after,
#filter.defro-filter--branded .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg) !important;
}

/* Selects — replace the native and Bootstrap arrows with the same brand
   chevron, sitting against the right edge of the field */
#filter.defro-filter--simple .form-select,
#filter.defro-filter--branded .form-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: var(--defro-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 0.8rem !important;
  padding-right: 2.25rem !important;
}

/* Hide the arrow Internet Explorer and older Edge draw on top */
#filter.defro-filter--simple .form-select::-ms-expand,
#filter.defro-filter--branded .form-select::-ms-expand {
  display: none;
}

/* Sort By in the toolbar uses the same arrow so the two controls match */
.defro-toolbar .form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--defro-chevron);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.75rem;
  padding-right: 2rem;
}

/*--------------------------------------------------------------
# Load More — theme-proofed
#
# Same problem as the view toggle: a bare <button> inside the
# theme's content area, so the selectors lead with its own ID
# paired with the #main-content wrapper to outrank single-ID
# theme button rules.
--------------------------------------------------------------*/
#defro-load-more.defro-load-more,
#main-content #defro-load-more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 240px;
  width: auto !important;
  padding: 0.875rem 1.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em;
  text-transform: none !important;
  line-height: 1 !important;
  color: var(--defro-brand) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--defro-brand) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#defro-load-more.defro-load-more:hover:not(:disabled),
#main-content #defro-load-more:hover:not(:disabled) {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
  color: #fff !important;
}

#defro-load-more.defro-load-more:active:not(:disabled),
#main-content #defro-load-more:active:not(:disabled) {
  filter: brightness(0.92);
}

#defro-load-more.defro-load-more:disabled,
#main-content #defro-load-more:disabled {
  opacity: 0.65;
  cursor: default;
}

#defro-load-more.defro-load-more:focus-visible,
#main-content #defro-load-more:focus-visible {
  outline: 2px solid var(--defro-brand) !important;
  outline-offset: 2px;
}

#defro-load-more .defro-load-more__spinner,
#main-content #defro-load-more .defro-load-more__spinner {
  border-color: currentColor;
  border-right-color: transparent;
}

/* Filter headings and buttons are <button> elements, so a theme rule such as
   "#content button { text-transform: uppercase }" would otherwise shout the
   section names. The premium direction calls for sentence case throughout. */
#filter.defro-filter--simple .accordion-button,
#filter.defro-filter--branded .accordion-button,
#filter.defro-filter--simple .defro-filter-heading,
#filter.defro-filter--branded .defro-filter-heading,
#filter.defro-filter--simple .btn,
#filter.defro-filter--branded .btn {
  text-transform: none !important;
}

/*--------------------------------------------------------------
# Brand Index — logos
#
# Logos arrive at wildly different aspect ratios and background
# colours, so each sits in a fixed-height box and is contained
# rather than cropped. They are held back to greyscale at rest so
# a row of mixed manufacturer colours does not fight the palette,
# and come up to full colour on hover.
--------------------------------------------------------------*/
.defro-brand-index--logos .defro-brand-index__link {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  padding: 1.25rem 0.875rem;
  text-align: center;
}

.defro-brand-index__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
}

.defro-brand-index__logo img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

.defro-brand-index__link:hover .defro-brand-index__logo img,
.defro-brand-index__link:focus .defro-brand-index__logo img {
  filter: grayscale(0);
  opacity: 1;
}

/* Lettered tile shown for any make with no logo supplied yet */
.defro-brand-index__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--defro-brand-rgb), 0.07);
  color: var(--defro-brand);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.defro-brand-index__link:hover .defro-brand-index__monogram,
.defro-brand-index__link:focus .defro-brand-index__monogram {
  background: rgba(var(--defro-accent-rgb), 0.12);
  color: var(--defro-accent);
}

.defro-brand-index--logos .defro-brand-index__name {
  font-size: 0.875rem;
}

.defro-brand-index--logos .defro-brand-index__count {
  display: block;
}

/* Inline layout keeps everything on one line, so the logo stays alongside
   the name rather than stacking above it */
.defro-brand-index--inline.defro-brand-index--logos .defro-brand-index__link {
  flex-direction: row;
  gap: 0.4375rem;
  padding: 0.375rem 0.5rem;
}

.defro-brand-index--inline.defro-brand-index--logos .defro-brand-index__logo {
  width: auto;
  height: 22px;
}

.defro-brand-index--inline.defro-brand-index--logos .defro-brand-index__logo img {
  max-height: 22px;
}

.defro-brand-index--inline.defro-brand-index--logos .defro-brand-index__monogram {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {

  .defro-brand-index__logo img,
  .defro-brand-index__monogram {
    transition: none;
  }

}

/*--------------------------------------------------------------
# Featured / Latest Cars slider card
#
# The compact variant of the Style 3 card. Same brand-driven
# colours and spec icons as the inventory cards, stacked into a
# single slider column, replacing the old dark spec boxes and
# FontAwesome glyphs.
--------------------------------------------------------------*/
.dfp-card--mini {
  grid-template-columns: 1fr;
  height: 100%;
  margin-bottom: 0;
}

.dfp-card--mini .dfp-media {
  min-height: 0;
}

.dfp-card--mini .dfp-media__img {
  min-height: 0;
  height: auto;
  aspect-ratio: 4 / 3;
}

.dfp-card--mini .dfp-body {
  padding: 1rem 1.125rem 1.125rem;
  gap: 0.75rem;
  flex: 1 1 auto;
}

.dfp-card--mini .dfp-title {
  font-size: 1rem;
  /* Two-line clamp keeps every slide the same height without truncating the
     title mid-word the way a fixed word count did */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dfp-card--mini .dfp-price {
  font-size: 1.375rem;
}

.dfp-card--mini .dfp-price-label {
  font-size: 0.625rem;
}

.dfp-card--mini .dfp-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.75rem 0;
}

.dfp-card--mini .dfp-spec {
  flex: none;
  min-width: 0;
  padding: 0 0.25rem;
}

.dfp-card--mini .dfp-spec__icon svg {
  width: 21px;
  height: 21px;
}

.dfp-card--mini .dfp-spec__value {
  font-size: 0.6875rem;
}

/* The button closes the card, so it is pushed to the bottom to keep the
   slider row even when titles run to different lengths */
.dfp-card--mini .dfp-btn {
  width: 100%;
  margin-top: auto;
}

/* The slider gives each slide a fixed width, so the card must fill it */
#latest_cars .tns-item {
  height: auto;
}

#latest_cars .tns-item > .dfp-card {
  height: 100%;
}

/*--------------------------------------------------------------
# Exterior colour swatches
#
# The checkbox itself is hidden rather than removed, so filtering,
# keyboard use and browser form state all behave exactly as they
# do for the other filters. The dot is the visible control.
--------------------------------------------------------------*/
.defro-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 0.25rem;
  padding: 0.5rem 0 0.25rem;
  /* Top-align so a two-line name does not push its neighbours' dots down */
  align-items: start;
}

.defro-swatch {
  position: relative;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}

.defro-swatch--extra {
  display: none;
}

.defro-swatches.is-expanded .defro-swatch--extra {
  display: block;
}

.defro-swatch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.defro-swatch__label,
.defro-swatch--more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
}

.defro-swatch__dot {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #C8CACC;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.1) inset;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Pale colours would disappear against the panel without an outline */
.defro-swatch__dot.is-light {
  box-shadow: 0 0 0 1px var(--defro-line) inset, 0 0 0 1px var(--defro-line);
}

/* Colour name the feed did not match — neutral, clearly not a real colour */
.defro-swatch__dot.is-unknown {
  background: linear-gradient(135deg, #E4E7EC 0%, #E4E7EC 45%, #FFFFFF 45%, #FFFFFF 55%, #E4E7EC 55%);
}

.defro-swatch__dot--more {
  background: conic-gradient(#C1121F, #EFC431, #2C6B3F, #20509E, #5B2C83, #C1121F);
}

.defro-swatch__name {
  font-size: 0.6875rem;
  color: var(--defro-ink);
  /* Feed colour names run long ("Midnight Blue Metallic"), so wrap on word
     boundaries only and clamp to two lines. The full value stays available
     as the label's title attribute. */
  word-break: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.defro-swatch__count {
  font-size: 0.625rem;
  color: var(--defro-muted);
}

/* Hover and selected states use the brand and accent colours */
.defro-swatch__label:hover .defro-swatch__dot,
.defro-swatch--more:hover .defro-swatch__dot {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--defro-accent);
}

.defro-swatch__input:checked + .defro-swatch__label .defro-swatch__dot {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--defro-brand);
}

.defro-swatch__input:checked + .defro-swatch__label .defro-swatch__name {
  color: var(--defro-brand);
  font-weight: 600;
}

.defro-swatch__input:focus-visible + .defro-swatch__label .defro-swatch__dot,
.defro-swatch--more:focus-visible .defro-swatch__dot {
  outline: 2px solid var(--defro-brand);
  outline-offset: 2px;
}

.defro-swatch--more .defro-swatch__name {
  color: var(--defro-brand);
}

@media (prefers-reduced-motion: reduce) {

  .defro-swatch__dot {
    transition: none;
  }

  .defro-swatch__label:hover .defro-swatch__dot,
  .defro-swatch--more:hover .defro-swatch__dot {
    transform: none;
  }

}

/*--------------------------------------------------------------
# Live stock count
#
# Technical/mono treatment: number and wording share one size,
# weight and colour, set uppercase with wide tracking so the
# whole line reads as a single stamped label rather than a
# headline number with a caption.
--------------------------------------------------------------*/
.defro-stock-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--defro-brand);
  /* The trailing letter-space would otherwise make a centred line sit
     fractionally left of true centre */
  text-indent: 0.12em;
}

.defro-stock-count__number,
.defro-stock-count__text {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Tabular figures stop the number jittering in width as stock changes */
.defro-stock-count__number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Badge variant for a hero strip or header */
.defro-stock-count--badge {
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--defro-line);
  border-radius: 2px;
  background: var(--defro-surface);
  font-size: 0.8125em;
}

/* Kept for anywhere the large-number treatment is still wanted */
.defro-stock-count--emphasis {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  gap: 0.375rem;
  color: var(--defro-ink);
}

.defro-stock-count--emphasis .defro-stock-count__number {
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--defro-brand);
}

.defro-stock-count--emphasis .defro-stock-count__text {
  font-size: 0.9375em;
  color: var(--defro-muted);
}

a.defro-stock-count--link {
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a.defro-stock-count--link:hover,
a.defro-stock-count--link:focus {
  color: var(--defro-accent);
}

a.defro-stock-count--link:hover.defro-stock-count--badge {
  border-color: var(--defro-accent);
}

a.defro-stock-count--link:focus-visible {
  outline: 2px solid var(--defro-brand);
  outline-offset: 2px;
}

.defro-stock-count--empty {
  color: var(--defro-muted);
}

/*--------------------------------------------------------------
# INVENTORY LAYOUT (HUD template)
#
# Filters live in a side drawer rather than a sidebar column, so
# the results get the full width. Every control applies on change,
# so the drawer footer carries a single live count instead of a
# per-group apply button.
--------------------------------------------------------------*/
.defro-scrim {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(10, 12, 15, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.defro-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

#filter.defro-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  width: 380px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  background: var(--defro-surface);
  box-shadow: 0 0 60px rgba(10, 12, 15, 0.3);
  transform: translateX(-100%);
  transition: transform 0.34s cubic-bezier(.22,.7,.3,1);
  padding: 0;
  margin: 0;
}

#filter.defro-drawer.is-open {
  transform: none;
}

.defro-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--defro-line);
}

.defro-drawer__head h5 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--defro-ink);
}

.defro-drawer__count,
.defro-filterbtn__n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--defro-brand);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
}

.defro-drawer__count[hidden],
.defro-filterbtn__n[hidden] {
  display: none;
}

.defro-drawer__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--defro-ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.defro-drawer__close:hover {
  background: var(--defro-surface-alt);
}

.defro-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.5rem;
}

/* The drawer supplies the panel chrome, so the inner Bootstrap wrapper
   must not add a second border or background */
#filter.defro-drawer .bg-light {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0 !important;
}

.defro-drawer__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--defro-line);
  background: var(--defro-surface);
}

#filter.defro-drawer .defro-drawer__apply {
  flex: 1;
  justify-content: center;
  padding: 0.9375rem 1rem !important;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
}

.defro-drawer__clear {
  flex: none;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--defro-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--defro-line);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.defro-drawer__clear:hover {
  color: var(--defro-brand);
  border-color: var(--defro-brand);
}

/*--------------------------------------------------------------
# Toolbar
--------------------------------------------------------------*/
.defro-toolbar {
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  padding: 0.75rem 0.875rem;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.defro-filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.3em;
  border: 0;
  border-radius: var(--defro-radius);
  background: var(--defro-brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.defro-filterbtn:hover {
  background: var(--defro-accent);
}

.defro-filterbtn .defro-filterbtn__n {
  background: var(--defro-accent);
}

.defro-toolsearch {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.375rem;
  margin: 0;
  color: var(--defro-muted);
}

.defro-toolsearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 0.92rem;
  padding: 0.625rem 0;
  color: var(--defro-ink);
}

.defro-toolsearch input:focus {
  outline: none;
}

.defro-toolbar__label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defro-muted);
  white-space: nowrap;
  margin: 0 0.5rem 0 0;
}

/*--------------------------------------------------------------
# Applied chips
--------------------------------------------------------------*/
.defro-chipbar {
  display: none;
  align-items: center;
  gap: 0.5625rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.defro-chipbar.is-on {
  display: flex;
}

.defro-chipbar__label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

.defro-fchip {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid var(--defro-line);
  border-radius: 20px;
  padding: 0.375rem 0.5rem 0.375rem 0.875rem;
  font-size: 0.8rem;
  color: var(--defro-ink);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.defro-fchip:hover {
  border-color: var(--defro-brand);
  color: var(--defro-ink);
}

.defro-fchip__x {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--defro-surface-alt);
  color: var(--defro-muted);
  font-size: 0.72rem;
  line-height: 1;
}

.defro-fchip:hover .defro-fchip__x {
  background: var(--defro-brand);
  color: #fff;
}

.defro-chipbar__clear {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--defro-brand);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--defro-brand);
}

/*--------------------------------------------------------------
# Report badges — Carfax, CarStory, CarGurus
#
# The brief: right aligned in grid view, left aligned in list view.
--------------------------------------------------------------*/
.dfp-logos {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dfp-card--grid .dfp-logos,
.defro-premium-wrap--grid .dfp-logos {
  justify-content: flex-end;
  width: 100%;
}

.dfp-card:not(.dfp-card--grid) .dfp-logos {
  justify-content: flex-start;
}

.dfp-logos img {
  /* Badges render at the size the supplied artwork defines. Only max-width is
     constrained, so an oversized file cannot break out of a narrow grid card.
     Note: a badge saved as an SVG with no width/height attributes has no
     intrinsic size and will collapse — export those with dimensions set. */
  height: auto;
  width: auto;
  max-width: 100%;
  padding: 0.4375rem 0.5625rem;
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  background: var(--defro-surface);
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dfp-logos a:hover img {
  border-color: var(--defro-brand);
  background: rgba(var(--defro-brand-rgb), 0.04);
}

/* Grid cards stack the report row above the buttons; list cards put the
   reports on the left of the same row as the buttons */
.dfp-card--grid .dfp-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.dfp-card:not(.dfp-card--grid) .dfp-footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.dfp-card--grid .dfp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

/* View Details spans the full width at the top of the button block */
.dfp-card--grid .dfp-actions .dfp-btn--primary {
  grid-column: 1 / -1;
}

@media (max-width: 767.98px) {

  .defro-toolbar {
    gap: 0.625rem;
  }

  .defro-filterbtn {
    width: 100%;
    justify-content: center;
  }

  .defro-toolsearch {
    order: 3;
    flex: 1 1 100%;
    border-top: 1px solid var(--defro-line);
    padding-top: 0.25rem;
  }

  .dfp-card:not(.dfp-card--grid) .dfp-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .dfp-card:not(.dfp-card--grid) .dfp-logos {
    justify-content: center;
  }

}

/*--------------------------------------------------------------
# Toolbar and drawer — theme-proofing
#
# The Filters button and the drawer's Apply button are bare
# <button> elements inside the theme's content area, so a rule
# such as "#content button" outranks a class-only selector no
# matter which stylesheet loads last. Leading with #main-content
# and #filter gives these ID-level weight.
--------------------------------------------------------------*/
#main-content .defro-filterbtn,
.defro-toolbar button.defro-filterbtn {
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  background-image: none !important;
  border: 1px solid var(--defro-brand) !important;
  border-radius: var(--defro-radius) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
  padding: 0.85em 1.3em !important;
  line-height: 1 !important;
  box-shadow: none !important;
  width: auto !important;
}

#main-content .defro-filterbtn:hover,
.defro-toolbar button.defro-filterbtn:hover {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
  color: #fff !important;
}

#main-content .defro-filterbtn svg,
.defro-toolbar button.defro-filterbtn svg {
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}

#main-content .defro-filterbtn .defro-filterbtn__n {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* Drawer Apply button */
#filter .defro-drawer__apply,
#filter button.defro-drawer__apply {
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  border: 1px solid var(--defro-brand) !important;
  color: #fff !important;
  border-radius: var(--defro-radius) !important;
  box-shadow: none !important;
}

#filter .defro-drawer__apply:hover {
  background: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
}

#filter .defro-drawer__close {
  background: transparent !important;
  border: 0 !important;
  color: var(--defro-ink) !important;
  padding: 0 !important;
}

/* The drawer must clear sticky headers, floating share bars, chat widgets and
   accessibility toolbars, which routinely sit in the millions */
#filter.defro-drawer {
  z-index: 9999999999 !important;
}

.defro-scrim {
  z-index: 9999999998 !important;
}

/* Toolbar search field, in case the theme styles inputs globally */
#main-content .defro-toolsearch input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--defro-ink) !important;
  height: auto !important;
}

/* Price and title colours follow the brand rather than the theme */
#main-content .dfp-price {
  color: var(--defro-brand) !important;
}

/*--------------------------------------------------------------
# Facet checkboxes
#
# Make and Model are checkbox groups rather than dropdowns, so
# several values can be picked at once and each option can carry
# its own count.
--------------------------------------------------------------*/
#filter .defro-facet-scroll {
  max-height: 224px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -0.5rem;
  padding-right: 0.5rem;
}

#filter .defro-opt {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.4375rem 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--defro-ink);
  cursor: pointer;
}

#filter .defro-opt:hover {
  color: var(--defro-brand);
}

#filter .defro-opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: none;
  position: relative;
  margin: 0;
  border: 1px solid var(--defro-line) !important;
  border-radius: 2px;
  background: var(--defro-surface) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#filter .defro-opt input[type="checkbox"]:checked {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
}

/* Drawn rather than a background image, so the tick follows the brand
   colour and stays crisp at any zoom */
#filter .defro-opt input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

#filter .defro-opt input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--defro-brand);
  outline-offset: 2px;
}

#filter .defro-opt__label {
  flex: 1 1 auto;
  min-width: 0;
}

#filter .defro-opt__n {
  flex: none;
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--defro-muted);
}

#filter .defro-facet-hint {
  font-size: 0.8rem;
  color: var(--defro-muted);
  line-height: 1.6;
  margin: 0;
}

/*--------------------------------------------------------------
# Toolbar — theme-proofed and matched to the reference
#
# The Filters button and view toggle are bare <button> elements
# inside the theme's content area, so a rule such as
# "#content button" outranks any class-only styling no matter
# which stylesheet loads last. These selectors lead with the
# toolbar's own ID so the intended colours come through.
#
# Per the reference: the Filters button is ink (near-black) with
# a brand-coloured count badge, not a brand-filled button. That
# keeps a single strong accent on the page rather than two.
--------------------------------------------------------------*/
#defro-toolbar.defro-toolbar {
  background: var(--defro-surface);
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
}

#defro-toolbar .defro-filterbtn,
#defro-toolbar button.defro-filterbtn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.3em !important;
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--defro-radius) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

#defro-toolbar .defro-filterbtn:hover,
#defro-toolbar button.defro-filterbtn:hover {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  color: #fff !important;
}

#defro-toolbar .defro-filterbtn svg {
  stroke: currentColor !important;
  fill: none !important;
}

/* The badge sat on the brand colour, which is now the button's own fill, so
   it would disappear into it. A translucent white pill reads clearly on any
   brand colour without introducing a third one. */
#defro-toolbar .defro-filterbtn__n {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
  font-family: inherit;
}

.defro-drawer__head .defro-drawer__count {
  background: var(--defro-brand) !important;
  color: #fff !important;
  font-family: inherit;
}

#defro-toolbar .defro-toolbar__label {
  font-size: 0.62rem !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defro-muted) !important;
}

#defro-toolbar .form-select,
#defro-toolbar select {
  background-color: var(--defro-surface) !important;
  color: var(--defro-ink) !important;
  border: 1px solid var(--defro-line) !important;
  border-radius: var(--defro-radius) !important;
  font-size: 0.86rem;
  padding: 0.55rem 2rem 0.55rem 0.75rem !important;
  min-width: 170px;
}

/* View toggle sits to the right of Sort by, active state in ink */
#defro-toolbar #defro-view-toggle .defro-view-btn {
  border-radius: 0 !important;
  border: 1px solid var(--defro-line) !important;
  margin: 0 !important;
}

#defro-toolbar #defro-view-toggle {
  gap: 0 !important;
  border-radius: var(--defro-radius);
  overflow: hidden;
}

#defro-toolbar #defro-view-toggle .defro-view-btn + .defro-view-btn {
  border-left: 0 !important;
}

#defro-toolbar #defro-view-toggle .defro-view-btn.is-active {
  background: var(--defro-ink) !important;
  background-color: var(--defro-ink) !important;
  border-color: var(--defro-ink) !important;
  color: #fff !important;
}

/* Drawer must clear sticky headers, the admin bar and any floating share rail */
.defro-scrim {
  z-index: 9999999998 !important;
}

#filter.defro-drawer {
  z-index: 9999999999 !important;
}

/* Apply button in the drawer footer stays brand-filled, as in the reference */
#filter.defro-drawer .defro-drawer__apply {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

#filter.defro-drawer .defro-drawer__apply:hover {
  background: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
}

/*--------------------------------------------------------------
# Grid card — matched to the supplied reference
#
# Order: title, price block, five specs on one row, View Details
# full width, Finance and Test Drive side by side, Make an Offer
# full width, then the report badges centred, then the address.
--------------------------------------------------------------*/
.dfp-card--grid .dfp-specs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.dfp-card--grid .dfp-spec {
  padding: 0 0.125rem;
}

/* Reset the divider on the first cell only, now that all five sit in one row */
.dfp-card--grid .dfp-spec:nth-child(3n + 1) {
  border-left: 1px solid var(--defro-line);
}

.dfp-card--grid .dfp-spec:first-child {
  border-left: 0;
}

.dfp-card--grid .dfp-spec__icon svg {
  width: 19px;
  height: 19px;
}

.dfp-card--grid .dfp-spec__value {
  font-size: 0.625rem;
}

/* Buttons: two per row, with the primary and the offer button spanning both */
.dfp-card--grid .dfp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  order: 1;
}

.dfp-card--grid .dfp-actions .dfp-btn--primary,
.dfp-card--grid .dfp-actions .defro-offer-btn-card {
  grid-column: 1 / -1;
}

.dfp-card--grid .dfp-actions .dfp-btn--primary {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.dfp-card--grid .dfp-actions .defro-offer-btn-card {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Report badges centred under the buttons in grid view */
.dfp-card--grid .dfp-logos,
.defro-premium-wrap--grid .dfp-logos {
  order: 2;
  justify-content: center !important;
  width: 100%;
}

/* List view keeps them bottom left, below the buttons */
.dfp-card:not(.dfp-card--grid) .dfp-footer {
  flex-wrap: wrap;
  align-items: flex-end;
}

.dfp-card:not(.dfp-card--grid) .dfp-logos {
  order: 2;
  justify-content: flex-start !important;
  width: 100%;
  margin-top: 0.75rem;
}

.dfp-card:not(.dfp-card--grid) .dfp-actions {
  order: 1;
  margin-left: auto;
}

/* Report badge boxes must shrink to the card, not the artwork: logo files come
   at very different widths and were overflowing their frame on narrow grid
   cards. Constrain the box and contain the image inside it. */
.dfp-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

.dfp-logos img {
  min-width: 0;
}

.dfp-card--grid .dfp-logos {
  gap: 0.375rem;
}

.dfp-card--grid .dfp-logos img {
  padding: 0.375rem 0.4375rem;
}

/*--------------------------------------------------------------
# VEHICLE DETAIL PAGE
#
# Gallery and detail on the left, sticky purchase rail on the
# right. Colours resolve through the Brand and Accent pickers, so
# the page follows whatever palette the dealership is set to.
--------------------------------------------------------------*/
.defro-vdp {
  padding: 2.25rem 0 var(--defro-pad, 4rem);
}

.vdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 3rem;
  align-items: start;
}

.vdp__layout > * {
  min-width: 0;
}

/* ---------- Title block ---------- */
.vdp__crumbs {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--defro-muted);
  margin-bottom: 1.25rem;
}

.vdp__crumbs a {
  color: inherit;
  text-decoration: none;
}

.vdp__crumbs a:hover {
  color: var(--defro-brand);
}

.vdp__crumbs span {
  margin: 0 0.375rem;
}

.vdp__crumbs-current {
  color: var(--defro-ink);
}

.vdp__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.625rem;
}

.vdp__title h1 {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--defro-ink);
  margin: 0 0 0.375rem;
}

.vdp__trim {
  color: var(--defro-muted);
  font-size: 1rem;
  margin: 0;
}

.vdp__ids {
  display: flex;
  gap: 1.375rem;
  flex-wrap: wrap;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--defro-muted);
  margin-top: 0.75rem;
}

.vdp__ids b {
  color: var(--defro-ink);
  font-weight: 500;
  margin-left: 0.375rem;
}

/* Price stands alone, not tied to a button or panel */
.vdp__pricetag {
  flex: none;
  text-align: right;
}

.vdp__pricetag-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

.vdp__pricetag-amount {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--defro-brand);
  margin-top: 0.25rem;
}

.vdp__pricetag-mo {
  font-size: 0.86rem;
  color: var(--defro-muted);
  margin-top: 0.375rem;
}

.vdp__pricetag-mo b {
  font-size: 1rem;
  font-weight: 500;
  color: var(--defro-ink);
}

/* ---------- Key spec strip ---------- */
.vdp__keyspecs {
  display: grid;
  grid-template-columns: repeat(var(--defro-keyspec-cols, 6), minmax(0, 1fr));
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.vdp__keyspecs li {
  padding: 1.25rem 0.625rem;
  text-align: center;
  border-left: 1px solid var(--defro-line);
  min-width: 0;
}

.vdp__keyspecs li:first-child {
  border-left: 0;
}

.vdp__keyspec-icon {
  display: block;
  color: var(--defro-brand);
  line-height: 0;
  margin-bottom: 0.625rem;
}

.vdp__keyspec-icon svg {
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

.vdp__keyspecs b {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--defro-ink);
}

.vdp__keyspec-label {
  display: block;
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--defro-muted);
  margin-top: 0.25rem;
}

/* ---------- Tabs ---------- */
.vdp-tabs {
  margin-top: 3.25rem;
}

.vdp-tabs__rail {
  display: flex;
  border-bottom: 1px solid var(--defro-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.vdp-tabs__rail::-webkit-scrollbar {
  display: none;
}

.vdp-tab {
  position: relative;
  flex: none;
  padding: 1rem 1.375rem;
  border: 0;
  background: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--defro-muted);
  cursor: pointer;
  transition: color 0.18s ease;
}

.vdp-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--defro-brand);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.vdp-tab:hover {
  color: var(--defro-ink);
}

.vdp-tab.is-active {
  color: var(--defro-ink);
}

.vdp-tab.is-active::after {
  transform: scaleX(1);
}

.vdp-tabs__pane {
  padding-top: 2.125rem;
}

.vdp-tabs__pane[hidden] {
  display: none;
}

/* ---------- Purchase rail ---------- */
.vdp__rail {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1rem;
}

/* The rail blocks come from existing methods, so they are normalised here
   rather than restyled individually: one border, one radius, one rhythm. */
.vdp__rail > div,
.vdp__rail > section,
.vdp__rail > aside {
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  background: var(--defro-surface);
  padding: 1.5rem 1.625rem;
  margin: 0 !important;
}

.vdp__rail h2,
.vdp__rail h3,
.vdp__rail h4,
.vdp__rail h5 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--defro-ink);
  margin: 0 0 1rem;
}

/* Every action in the rail reads as one control set */
.vdp__rail .btn,
.vdp__rail .dfp-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 1.05em 1.4em !important;
  margin-bottom: 0.5625rem;
  font-size: 0.74rem !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--defro-radius);
}

.vdp__rail .btn:last-child,
.vdp__rail .dfp-btn:last-child {
  margin-bottom: 0;
}

.vdp__rail .btn-primary,
.vdp__rail .dfp-btn--primary {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

.vdp__rail .btn-primary:hover,
.vdp__rail .dfp-btn--primary:hover {
  background: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
}

.vdp__rail .form-control,
.vdp__rail .form-select,
.vdp__rail input[type="text"],
.vdp__rail input[type="tel"],
.vdp__rail input[type="email"],
.vdp__rail textarea {
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  font-size: 0.9rem;
}

.vdp__rail .form-control:focus,
.vdp__rail .form-select:focus,
.vdp__rail textarea:focus {
  border-color: var(--defro-brand);
  box-shadow: 0 0 0 3px rgba(var(--defro-brand-rgb), 0.12);
}

/* ---------- Disclaimer ---------- */
.defro-vdp .disclaimer,
.defro-vdp .defro-disclaimer {
  margin-top: 3.5rem;
  background: var(--defro-surface-alt);
  border-left: 2px solid var(--defro-brand);
  border-radius: 0 var(--defro-radius) var(--defro-radius) 0;
  padding: 1.625rem 1.875rem;
  font-size: 0.81rem;
  line-height: 1.75;
  color: var(--defro-muted);
}

/* ---------- Mobile action bar ---------- */
.vdp-buybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--defro-surface);
  border-top: 1px solid var(--defro-line);
  box-shadow: 0 -6px 24px rgba(20, 22, 26, 0.1);
}

.vdp-buybar__price {
  flex: none;
}

.vdp-buybar__price span {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

.vdp-buybar__price b {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--defro-brand);
}

.vdp-buybar .dfp-btn {
  flex: 1;
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {

  .vdp__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* Rail cards vary a lot in height, so a plain two-column grid strands the
     short ones beside the tall ones. The action set runs full width and the
     forms sit side by side as equals. */
  .vdp__rail {
    position: static;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .vdp__rail > *:first-child {
    grid-column: 1 / -1;
  }

  .vdp__keyspecs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vdp__keyspecs li:nth-child(4) {
    border-left: 0;
  }

  .vdp__keyspecs li:nth-child(-n + 3) {
    border-bottom: 1px solid var(--defro-line);
  }

}

@media (max-width: 767.98px) {

  .defro-vdp {
    padding: 1.75rem 0 6rem;
  }

  .vdp__rail {
    grid-template-columns: 1fr;
  }

  .vdp__keyspecs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vdp__keyspecs li:nth-child(odd) {
    border-left: 0;
  }

  .vdp__keyspecs li:not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid var(--defro-line);
  }

  .vdp__title {
    flex-direction: column;
    align-items: stretch;
    gap: 1.125rem;
  }

  .vdp__pricetag {
    text-align: left;
    border-top: 1px solid var(--defro-line);
    border-bottom: 1px solid var(--defro-line);
    padding: 1rem 0;
  }

  .vdp-buybar {
    display: flex;
  }

  .vdp-tab {
    padding: 0.875rem 0.9375rem;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
  }

}

/* Rail actions are anchors, so the theme's link colour and underline come
   through unless they are reset here. Anything that is not the primary
   button renders as the outline variant. */
.vdp__rail a.btn,
.vdp__rail a.dfp-btn,
.vdp-buybar a.dfp-btn {
  text-decoration: none !important;
}

.vdp__rail a.btn:not(.btn-primary):not(.dfp-btn--primary),
.vdp__rail a.dfp-btn:not(.dfp-btn--primary) {
  border: 1px solid var(--defro-line) !important;
  background: var(--defro-surface) !important;
  color: var(--defro-ink) !important;
}

.vdp__rail a.btn:not(.btn-primary):not(.dfp-btn--primary):hover,
.vdp__rail a.dfp-btn:not(.dfp-btn--primary):hover {
  border-color: var(--defro-brand) !important;
  color: var(--defro-brand) !important;
  background: rgba(var(--defro-brand-rgb), 0.04) !important;
}

/* The call-for-info block is the one dark card in the rail */
.vdp__rail .defro-call-card,
.vdp__rail .call-for-info {
  background: var(--defro-ink) !important;
  border-color: var(--defro-ink) !important;
  color: #fff;
}

.vdp__rail .defro-call-card a,
.vdp__rail .call-for-info a {
  color: #fff;
  text-decoration: none;
}

/*--------------------------------------------------------------
# VDP gallery
--------------------------------------------------------------*/
.vdp-gal__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #14171C;
  border-radius: var(--defro-radius);
  overflow: hidden;
}

.vdp-gal__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.vdp-gal__shot.is-active {
  opacity: 1;
}

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

.vdp-gal__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--defro-brand);
  color: #fff;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5rem 0.875rem;
}

.vdp-gal__count {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  background: rgba(8, 9, 12, 0.72);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--defro-radius);
}

.vdp-gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(8, 9, 12, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.vdp-gal__nav:hover {
  background: var(--defro-brand);
  border-color: var(--defro-brand);
}

.vdp-gal__nav svg {
  width: 16px;
  height: 16px;
}

.vdp-gal__nav--prev { left: 1rem; }
.vdp-gal__nav--next { right: 1rem; }

.vdp-gal__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.625rem;
  margin-top: 0.625rem;
}

.vdp-gal__thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 2px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  background: #14171C;
  padding: 0;
  cursor: pointer;
  filter: brightness(0.62);
  transition: filter 0.18s ease, border-color 0.18s ease;
}

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

.vdp-gal__thumb:hover { filter: brightness(0.85); }

.vdp-gal__thumb.is-active {
  border-color: var(--defro-brand);
  filter: none;
}

.vdp-gal__thumb--more {
  display: grid;
  place-items: center;
  background: var(--defro-surface-alt);
  border: 1px solid var(--defro-line);
  filter: none;
}

.vdp-gal__thumb--more span {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--defro-muted);
  text-align: center;
  padding: 0 0.375rem;
}

.vdp-gal__thumb--more:hover {
  border-color: var(--defro-ink);
}

/*--------------------------------------------------------------
# VDP specification table
--------------------------------------------------------------*/
.vdp-spectable {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.5rem;
  margin: 0;
}

.vdp-spectable > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--defro-line);
}

.vdp-spectable dt {
  color: var(--defro-muted);
  font-size: 0.92rem;
  font-weight: 400;
  margin: 0;
}

.vdp-spectable dd {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--defro-ink);
  margin: 0;
}

/*--------------------------------------------------------------
# VDP rail
--------------------------------------------------------------*/
.vdp-rail__actions {
  display: grid;
  gap: 0.5625rem;
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  padding: 1.375rem 1.5rem;
}

.vdp-rail__sold {
  margin: 0 0 0.5rem;
  color: var(--defro-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* One size and shape for every action so the group reads as one control set */
.vdp-btn {
  display: inline-flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05em 1.4em !important;
  border: 1px solid transparent !important;
  border-radius: var(--defro-radius) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vdp-btn--brand {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

.vdp-btn--brand:hover {
  background: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
  color: #fff !important;
}

.vdp-btn--ink {
  background: var(--defro-ink) !important;
  border-color: var(--defro-ink) !important;
  color: #fff !important;
}

.vdp-btn--ink:hover {
  background: #000 !important;
  color: #fff !important;
}

.vdp-btn--line {
  background: var(--defro-surface) !important;
  border-color: var(--defro-line) !important;
  color: var(--defro-ink) !important;
}

.vdp-btn--line:hover {
  border-color: var(--defro-ink) !important;
  color: var(--defro-ink) !important;
}

/* Call card: the one dark block in the rail */
.vdp-callcard {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--defro-ink);
  color: #fff;
  border-radius: var(--defro-radius);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.vdp-callcard:hover {
  background: #000;
  color: #fff;
}

.vdp-callcard svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--defro-brand);
}

.vdp-callcard b {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.vdp-callcard small {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

.vdp-railbox {
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  padding: 1.5rem 1.625rem;
  background: var(--defro-surface);
}

.vdp-railbox h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--defro-ink);
  margin: 0 0 1rem;
}

.vdp-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin-bottom: 0.75rem;
}

.vdp-field--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vdp-field--split > div {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.vdp-field label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

.vdp-railbox .form-control,
.vdp-railbox textarea {
  width: 100%;
  border: 1px solid var(--defro-line);
  border-radius: var(--defro-radius);
  padding: 0.8125rem 0.875rem;
  font-size: 0.9rem;
  background: var(--defro-surface);
  color: var(--defro-ink);
}

.vdp-railbox .form-control:focus,
.vdp-railbox textarea:focus {
  outline: none;
  border-color: var(--defro-brand);
  box-shadow: 0 0 0 3px rgba(var(--defro-brand-rgb), 0.1);
}

/* Loan term selector */
.vdp-terms {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.375rem;
}

.vdp-terms .btn-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.vdp-term {
  display: block;
  padding: 0.625rem 0;
  border: 1px solid var(--defro-line);
  border-radius: 2px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--defro-ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vdp-term:hover {
  border-color: var(--defro-ink);
}

.vdp-terms .btn-check:checked + .vdp-term {
  background: var(--defro-brand);
  border-color: var(--defro-brand);
  color: #fff;
}

.vdp-calcout {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--defro-line);
  margin-bottom: 1rem;
}

.vdp-calcout span {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--defro-muted);
  margin-bottom: 0.25rem;
}

.vdp-calcout b {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--defro-ink);
}

@media (max-width: 767.98px) {

  .vdp-gal__thumbs {
    grid-template-columns: repeat(3, 1fr);
  }

  .vdp-terms {
    grid-template-columns: repeat(3, 1fr);
  }

  .vdp-spectable {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vdp-gal__nav {
    width: 38px;
    height: 38px;
  }

}

/*--------------------------------------------------------------
# VDP — theme-proofing
#
# The rail actions, tabs, gallery arrows and loan term selector are
# all bare <button> elements inside the theme's content area, so a
# rule such as "#content button" outranks class-only styling and
# repaints them. Leading with the page ID restores the intended
# Brand and Accent colours.
--------------------------------------------------------------*/
#defro-vdp .vdp-btn,
#defro-vdp button.vdp-btn,
#defro-vdp a.vdp-btn {
  text-transform: uppercase !important;
  box-shadow: none !important;
}

#defro-vdp .vdp-btn--brand,
#defro-vdp button.vdp-btn--brand,
#defro-vdp a.vdp-btn--brand {
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  background-image: none !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

#defro-vdp .vdp-btn--brand:hover,
#defro-vdp a.vdp-btn--brand:hover {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
}

#defro-vdp .vdp-btn--ink,
#defro-vdp button.vdp-btn--ink,
#defro-vdp a.vdp-btn--ink {
  background: var(--defro-ink) !important;
  background-color: var(--defro-ink) !important;
  background-image: none !important;
  border-color: var(--defro-ink) !important;
  color: #fff !important;
}

#defro-vdp .vdp-btn--line,
#defro-vdp button.vdp-btn--line,
#defro-vdp a.vdp-btn--line {
  background: var(--defro-surface) !important;
  background-color: var(--defro-surface) !important;
  background-image: none !important;
  border: 1px solid var(--defro-line) !important;
  color: var(--defro-ink) !important;
}

#defro-vdp .vdp-btn--line:hover {
  border-color: var(--defro-ink) !important;
  color: var(--defro-ink) !important;
}

/* Tabs are buttons too — the theme was drawing a bordered box round each */
#defro-vdp .vdp-tab,
#defro-vdp button.vdp-tab {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--defro-muted) !important;
  padding: 1rem 1.375rem !important;
  text-transform: uppercase !important;
}

#defro-vdp .vdp-tab.is-active,
#defro-vdp button.vdp-tab.is-active {
  color: var(--defro-ink) !important;
  background: none !important;
}

#defro-vdp .vdp-tab:hover {
  color: var(--defro-ink) !important;
}

/* Loan term selector */
#defro-vdp .vdp-term {
  background: var(--defro-surface) !important;
  border: 1px solid var(--defro-line) !important;
  color: var(--defro-ink) !important;
  border-radius: 2px !important;
  text-transform: none !important;
}

#defro-vdp .btn-check:checked + .vdp-term {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  color: #fff !important;
}

/* Gallery arrows */
#defro-vdp .vdp-gal__nav,
#defro-vdp button.vdp-gal__nav {
  background: rgba(8, 9, 12, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 50% !important;
  color: #fff !important;
  padding: 0 !important;
}

#defro-vdp .vdp-gal__nav:hover {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
}

#defro-vdp .vdp-gal__thumb,
#defro-vdp button.vdp-gal__thumb {
  background: #14171C !important;
  border: 2px solid transparent !important;
  border-radius: 2px !important;
  padding: 0 !important;
}

#defro-vdp .vdp-gal__thumb.is-active {
  border-color: var(--defro-brand) !important;
}

#defro-vdp .vdp-gal__thumb--more {
  background: var(--defro-surface-alt) !important;
  border: 1px solid var(--defro-line) !important;
}

/* The price and the report headings follow the brand colour */
#defro-vdp .vdp__pricetag-amount {
  color: var(--defro-brand) !important;
}

/*--------------------------------------------------------------
# Report panes
--------------------------------------------------------------*/
.vdp-report h3 {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--defro-ink);
  margin: 0 0 0.75rem;
}

.vdp-report p {
  color: var(--defro-muted);
  font-size: 0.94rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 1rem;
}

.vdp-report__flag {
  display: inline-block;
  background: rgba(var(--defro-brand-rgb), 0.08);
  border: 1px solid rgba(var(--defro-brand-rgb), 0.2);
  border-radius: var(--defro-radius);
  color: var(--defro-brand) !important;
  padding: 0.5rem 0.875rem;
  font-size: 0.84rem !important;
}

.vdp-report .vdp-btn {
  width: auto;
  display: inline-flex !important;
}

/*--------------------------------------------------------------
# Modal host
#
# check_availability() and make_an_offer() emit their own trigger
# buttons as well as the modal markup. The rail already provides
# those actions, so only the modals are allowed to show.
--------------------------------------------------------------*/
.vdp-modalhost > *:not(.modal) {
  display: none !important;
}

/*--------------------------------------------------------------
# Similar vehicles
--------------------------------------------------------------*/
.vdp-similar {
  margin-top: 4.5rem;
  padding: 3.5rem 0 1rem;
  border-top: 1px solid var(--defro-line);
}

.vdp-similar__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.vdp-similar__eyebrow {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--defro-brand);
  margin-bottom: 0.5rem;
}

.vdp-similar__eyebrow::before {
  content: "// ";
}

.vdp-similar__head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--defro-ink);
  margin: 0;
}

.vdp-similar__all {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--defro-ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--defro-brand);
}

.vdp-similar__all:hover {
  color: var(--defro-brand);
}

.vdp-similar__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.vdp-similar__row > .dfp-card {
  height: 100%;
}

@media (max-width: 1140px) {
  .vdp-similar__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vdp-similar__row > .dfp-card:nth-child(n + 7) { display: none; }
}

@media (max-width: 900px) {
  .vdp-similar__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .vdp-similar__row { grid-template-columns: 1fr; }
  .vdp-similar__row > .dfp-card:nth-child(n + 4) { display: none; }
}

/*--------------------------------------------------------------
# Detailed specification groups
--------------------------------------------------------------*/
.vdp-specs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}

.vdp-specs__count {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defro-muted);
}

#defro-vdp .vdp-specs__all,
.vdp-specs__all {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--defro-brand) !important;
  border-radius: 0 !important;
  padding: 0 0 2px !important;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--defro-brand) !important;
  cursor: pointer;
}

.vdp-spec-group {
  border-top: 1px solid var(--defro-line);
}

.vdp-spec-group:last-child {
  border-bottom: 1px solid var(--defro-line);
}

#defro-vdp .vdp-spec-group__head,
.vdp-spec-group__head {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.125rem 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  cursor: pointer;
  color: var(--defro-ink) !important;
}

.vdp-spec-group__name {
  font-size: 0.95rem;
  font-weight: 500;
}

.vdp-spec-group__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--defro-line);
  border-radius: 2px;
  font-size: 0.62rem;
  color: var(--defro-muted);
}

.vdp-spec-group__chev {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--defro-muted);
  transition: transform 0.22s ease;
}

.vdp-spec-group.is-open .vdp-spec-group__chev {
  transform: rotate(180deg);
  color: var(--defro-brand);
}

.vdp-spec-group__body {
  padding: 0 0 1.375rem;
}

.vdp-spec-group__body[hidden] {
  display: none;
}

.vdp-spec-group__body ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vdp-spec-group__body li {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--defro-muted);
}

.vdp-spec-group__body li svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--defro-brand);
}

/*--------------------------------------------------------------
# Tab rail — wrap rather than clip
#
# With Carfax and Car Story added the rail ran past the edge of
# the column and the last tab was cut off with no way to reach it.
--------------------------------------------------------------*/
#defro-vdp .vdp-tabs__rail {
  flex-wrap: wrap;
  overflow: visible;
}

/*--------------------------------------------------------------
# Disclaimer — the heading comes from the existing method, so it
# is normalised here to the quiet panel style.
--------------------------------------------------------------*/
#defro-vdp .disclaimer h3,
#defro-vdp .defro-disclaimer h3 {
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--defro-muted) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
}

#defro-vdp .disclaimer p,
#defro-vdp .defro-disclaimer p {
  font-size: 0.81rem;
  line-height: 1.75;
  color: var(--defro-muted);
}

@media (max-width: 900px) {
  .vdp-spec-group__body ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .vdp-spec-group__body ul { grid-template-columns: 1fr; }
}

/*--------------------------------------------------------------
# VDP — Brand and Accent only
#
# Every filled surface and every interactive accent on this page
# resolves through the two colour pickers. The neutral ink tone is
# reserved for body copy, where a brand-coloured paragraph would
# fail contrast and read as a link.
--------------------------------------------------------------*/

/* Secondary actions take the accent rather than a flat near-black */
#defro-vdp .vdp-btn--ink,
#defro-vdp button.vdp-btn--ink,
#defro-vdp a.vdp-btn--ink {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
  color: #fff !important;
}

#defro-vdp .vdp-btn--ink:hover,
#defro-vdp a.vdp-btn--ink:hover,
#defro-vdp button.vdp-btn--ink:hover {
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
}

/* Outline actions pick up the brand on hover */
#defro-vdp .vdp-btn--line:hover,
#defro-vdp a.vdp-btn--line:hover,
#defro-vdp button.vdp-btn--line:hover {
  border-color: var(--defro-brand) !important;
  color: var(--defro-brand) !important;
  background: rgba(var(--defro-brand-rgb), 0.04) !important;
}

/* Call card runs on the brand colour */
#defro-vdp .vdp-callcard {
  background: var(--defro-brand) !important;
  color: #fff !important;
}

#defro-vdp .vdp-callcard:hover {
  background: var(--defro-accent) !important;
}

#defro-vdp .vdp-callcard svg,
#defro-vdp .vdp-callcard b {
  color: #fff !important;
}

#defro-vdp .vdp-callcard small {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Active tab, active thumbnail and the estimator figure */
#defro-vdp .vdp-tab.is-active,
#defro-vdp button.vdp-tab.is-active {
  color: var(--defro-brand) !important;
}

#defro-vdp .vdp-calcout b {
  color: var(--defro-brand) !important;
}

#defro-vdp .vdp-similar__all,
#defro-vdp .vdp-similar__all:hover {
  color: var(--defro-brand) !important;
  border-bottom-color: var(--defro-brand) !important;
}

#defro-vdp .vdp-spec-group__name,
#defro-vdp .vdp-spectable dd,
#defro-vdp .vdp__keyspecs b {
  color: inherit;
}

/* Gallery tag and mobile bar price */
#defro-vdp .vdp-gal__tag,
.vdp-buybar__price b {
  background-color: var(--defro-brand);
  color: #fff;
}

.vdp-buybar__price b {
  background: none;
  color: var(--defro-brand);
}

/*--------------------------------------------------------------
# All photos grid
--------------------------------------------------------------*/
.vdp-photos {
  position: fixed;
  inset: 0;
  z-index: 9999999999;
  background: #0F1116;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vdp-photos[hidden] {
  display: none;
}

.vdp-photos__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.75rem;
  background: rgba(15, 17, 22, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#defro-vdp .vdp-photos__close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  cursor: pointer;
}

#defro-vdp .vdp-photos__close:hover {
  background: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
}

.vdp-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 1.75rem 3rem;
}

#defro-vdp .vdp-photos__item {
  padding: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 2px !important;
  background: #14171C !important;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 2;
}

#defro-vdp .vdp-photos__item:hover {
  border-color: var(--defro-brand) !important;
}

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

/*--------------------------------------------------------------
# Similar vehicles slider
--------------------------------------------------------------*/
.vdp-similar__row.is-slider,
.vdp-similar__row.slick-initialized {
  display: block;
}

.vdp-similar__row.slick-initialized .slick-track {
  display: flex;
  align-items: stretch;
  padding-bottom: 0.25rem;
}

.vdp-similar__row.slick-initialized .slick-slide {
  height: auto;
  padding: 0 0.625rem;
}

.vdp-similar__row.slick-initialized .slick-slide > div,
.vdp-similar__row.slick-initialized .slick-slide .dfp-card {
  height: 100%;
}

#defro-vdp .vdp-similar__row .slick-prev,
#defro-vdp .vdp-similar__row .slick-next {
  width: 40px;
  height: 40px;
  border: 1px solid var(--defro-line) !important;
  border-radius: 50% !important;
  background: var(--defro-surface) !important;
  z-index: 2;
}

#defro-vdp .vdp-similar__row .slick-prev { left: -18px; }
#defro-vdp .vdp-similar__row .slick-next { right: -18px; }

#defro-vdp .vdp-similar__row .slick-prev::before,
#defro-vdp .vdp-similar__row .slick-next::before {
  color: var(--defro-brand);
  opacity: 1;
  font-size: 18px;
}

#defro-vdp .vdp-similar__row .slick-prev:hover,
#defro-vdp .vdp-similar__row .slick-next:hover {
  border-color: var(--defro-brand) !important;
}

/* The responsive rules that hid overflow cards are not needed once the row
   is a slider, since Slick handles how many are visible */
@media (max-width: 1140px) {
  .vdp-similar__row.slick-initialized > .dfp-card:nth-child(n + 7) { display: block; }
}

@media (max-width: 575.98px) {
  .vdp-similar__row.slick-initialized > .dfp-card:nth-child(n + 4) { display: block; }
  .vdp-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
}

/*--------------------------------------------------------------
# Disclaimer spacing
--------------------------------------------------------------*/
#defro-vdp .disclaimer,
#defro-vdp .defro-disclaimer {
  margin-top: 3.5rem !important;
  padding: 1.75rem 1.875rem !important;
  background: var(--defro-surface-alt);
  border-left: 2px solid var(--defro-brand);
  border-radius: 0 var(--defro-radius) var(--defro-radius) 0;
}

/*--------------------------------------------------------------
# Tab rail — six tabs on one line
#
# With Overview, Vehicle specs, Detailed specs, Warranty, Carfax
# and Car Story the rail has to carry six labels, so the type and
# padding step down and the row no longer wraps.
--------------------------------------------------------------*/
#defro-vdp .vdp-tabs__rail {
  flex-wrap: nowrap;
  gap: 0;
}

#defro-vdp .vdp-tab,
#defro-vdp button.vdp-tab {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.9375rem 0.875rem !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.09em !important;
  white-space: nowrap;
}

@media (max-width: 1280px) {

  #defro-vdp .vdp-tab,
  #defro-vdp button.vdp-tab {
    padding: 0.875rem 0.625rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
  }

}

/* Below the desktop layout the rail scrolls sideways rather than shrinking
   the labels to the point of being unreadable */
@media (max-width: 900px) {

  #defro-vdp .vdp-tabs__rail {
    overflow-x: auto;
    scrollbar-width: none;
  }

  #defro-vdp .vdp-tabs__rail::-webkit-scrollbar {
    display: none;
  }

}

/*--------------------------------------------------------------
# Overview pane
--------------------------------------------------------------*/
.vdp-overview p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--defro-muted);
  max-width: 68ch;
  margin: 0 0 1rem;
}

.vdp-overview p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Disclaimer
#
# The block carries no distinguishing class of its own in the
# original markup, so the class added to it is targeted here for
# the spacing and panel treatment.
--------------------------------------------------------------*/
#defro-vdp .defro-disclaimer {
  margin-top: 4rem !important;
  padding: 1.75rem 1.875rem !important;
  background: var(--defro-surface-alt);
  border-left: 2px solid var(--defro-brand);
  border-radius: 0 var(--defro-radius) var(--defro-radius) 0;
}

#defro-vdp .defro-disclaimer h3 {
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--defro-muted) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.875rem !important;
}

#defro-vdp .defro-disclaimer p {
  font-size: 0.81rem;
  line-height: 1.75;
  color: var(--defro-muted);
  margin: 0 0 0.875rem;
}

#defro-vdp .defro-disclaimer p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Card buttons — guaranteed contrast
#
# The card actions are anchors, so a theme rule such as
# "#content a { color: <brand red> }" repaints the label and the
# text disappears into a brand-filled button. The label colour is
# forced against the fill it actually sits on.
--------------------------------------------------------------*/
.cars-list .dfp-btn--primary,
.cars-list a.dfp-btn--primary,
.vdp-similar__row .dfp-btn--primary,
.vdp-similar__row a.dfp-btn--primary,
#main-content .dfp-btn--primary,
#main-content a.dfp-btn--primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
  text-decoration: none !important;
}

.cars-list .dfp-btn--primary:hover,
.cars-list a.dfp-btn--primary:hover,
#main-content .dfp-btn--primary:hover,
#main-content a.dfp-btn--primary:hover,
.vdp-similar__row a.dfp-btn--primary:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
  border-color: var(--defro-accent) !important;
}

/* Outline actions keep a readable label on the card surface */
.cars-list .dfp-btn--outline,
.cars-list a.dfp-btn--outline,
#main-content .dfp-btn--outline,
#main-content a.dfp-btn--outline {
  color: var(--defro-ink) !important;
  -webkit-text-fill-color: var(--defro-ink) !important;
  background: var(--defro-surface) !important;
  text-decoration: none !important;
}

.cars-list .dfp-btn--outline:hover,
.cars-list a.dfp-btn--outline:hover,
#main-content .dfp-btn--outline:hover,
#main-content a.dfp-btn--outline:hover {
  color: var(--defro-brand) !important;
  -webkit-text-fill-color: var(--defro-brand) !important;
  border-color: var(--defro-brand) !important;
}

/* Same guarantee for the detail page rail and the mobile bar */
#defro-vdp .vdp-btn--brand,
#defro-vdp a.vdp-btn--brand,
#defro-vdp .vdp-btn--ink,
#defro-vdp a.vdp-btn--ink,
.vdp-buybar a.dfp-btn--primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* The address strip sits on the brand colour too */
.dfp-address {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/*--------------------------------------------------------------
# Price includes fees
--------------------------------------------------------------*/
.defro-price-includes-fees {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.5rem !important;
  padding: 0.3125rem 0.625rem !important;
  background: rgba(var(--defro-brand-rgb), 0.07) !important;
  border: 1px solid rgba(var(--defro-brand-rgb), 0.22) !important;
  border-radius: 2px !important;
  color: var(--defro-brand) !important;
  -webkit-text-fill-color: var(--defro-brand) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
}

.defro-price-includes-fees:hover {
  background: rgba(var(--defro-brand-rgb), 0.13) !important;
  border-color: var(--defro-brand) !important;
}

/* An earlier rule painted this as a filled green circle, which is the one
   spot of unbranded colour left on the card. It follows the brand now. */
.defro-price-includes-fees .check {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 14px !important;
  height: 14px !important;
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 50% !important;
  font-size: 0.6rem !important;
  line-height: 1 !important;
}

/* Modal sits above the filter drawer and the photo grid */
.defro-fees-modal {
  z-index: 10000000000;
}

.defro-fees-modal .modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--defro-ink);
}

.defro-fees-modal .breakdown-sale th,
.defro-fees-modal .breakdown-sale td {
  border-top: 2px solid var(--defro-line);
  color: var(--defro-brand);
}

/*--------------------------------------------------------------
# Gallery drag
--------------------------------------------------------------*/
.vdp-gal__stage {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.vdp-gal__stage.is-dragging {
  cursor: grabbing;
}

.vdp-gal__stage img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* The arrows and counter sit above the image, so they keep their own
   pointer handling after the image itself is made inert */
.vdp-gal__nav,
.vdp-gal__count,
.vdp-gal__stage .img-overlay {
  pointer-events: auto;
}

/*--------------------------------------------------------------
# Featured cars slider — overflow and narrow widths
#
# The track sits inside a negative-margin wrapper, so without a
# clip here the slides spill past the viewport on a phone and the
# page gains a horizontal scrollbar.
--------------------------------------------------------------*/
#latest_cars {
  overflow: hidden;
}

#latest_cars .slick-list {
  overflow: hidden;
}

#latest_cars .slick-track {
  display: flex;
  align-items: stretch;
}

#latest_cars .slick-slide {
  height: auto;
}

#latest_cars .slick-slide > div,
#latest_cars .tns-item {
  height: 100%;
}

/* The spec strip is the first thing to break when a card is squeezed:
   five cells against a narrow card left the values overlapping. */
.dfp-card--mini .dfp-spec {
  min-width: 0;
}

.dfp-card--mini .dfp-spec__value {
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 767.98px) {

  /* One card per view on phones, so the card has room to be read */
  #latest_cars .slick-slide {
    padding: 0 0.25rem;
  }

  .dfp-card--mini .dfp-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dfp-card--mini .dfp-spec__value {
    font-size: 0.66rem;
    line-height: 1.25;
  }

  .dfp-card--mini .dfp-title {
    font-size: 0.95rem;
  }

}

/* Three cells fit comfortably down to about 340px; below that they halve.
   Set higher, a 360 or 375px phone dropped to two columns and left the third
   spec stranded on its own row. */
@media (max-width: 339.98px) {

  .dfp-card--mini .dfp-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dfp-card--mini .dfp-spec:nth-child(2n + 1) {
    border-left: 0;
  }

}

/*--------------------------------------------------------------
# Toolbar search button
--------------------------------------------------------------*/
.defro-toolsearch {
  position: relative;
  padding-right: 0;
}

/* Matched to the Filters button: same padding, type size, tracking and
   radius, so the two controls read as a pair either side of the field */
#defro-toolbar .defro-toolsearch__go {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* The Filters button is taller than its text because of the icon inside it,
     so the height is matched explicitly rather than by padding alone */
  height: 38px;
  margin-left: 0.5rem;
  padding: 0 1.3em !important;
  background: var(--defro-brand) !important;
  background-color: var(--defro-brand) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--defro-radius) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.18s ease;
}

#defro-toolbar .defro-toolsearch__go:hover {
  background: var(--defro-accent) !important;
  background-color: var(--defro-accent) !important;
}

@media (max-width: 767.98px) {
  #defro-toolbar .defro-toolsearch__go {
    padding: 0.6em 0.8em !important;
  }
}

/*--------------------------------------------------------------
# Report panes — embedded widgets
#
# Carfax, CarStory and CarGurus each render their own panel in
# place. These panes are a single column so the provider's widget
# is not squeezed into the logo/copy grid used by the fallback.
--------------------------------------------------------------*/
.vdp-report--embed {
  display: block;
}

.vdp-report--embed .carfax-snapshot-embedded,
.vdp-report--embed .carstory-container,
.vdp-report--embed .cargurus-badge {
  max-width: 560px;
}

.vdp-report--embed .carfax-snapshot-embedded:empty::after,
.vdp-report--embed .carstory-container:empty::after {
  content: attr(data-loading);
  display: block;
  padding: 1.5rem 0;
  font-size: 0.8rem;
  color: var(--defro-muted);
}

/* The provider markup carries its own styling, so the theme's link colour is
   the one thing likely to bleed into it */
.vdp-report--embed a {
  text-decoration: none;
}

/*--------------------------------------------------------------
# VDP title block — sized to the approved reference
#
# The block was a flex row that wrapped, so a long vehicle name
# pushed the price underneath it and left-aligned. A two-column
# grid keeps the price on the right regardless of title length,
# with the title column allowed to shrink.
--------------------------------------------------------------*/
#defro-vdp .vdp__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem 2.5rem;
  flex-wrap: nowrap;
  margin-bottom: 1.5rem;
}

#defro-vdp .vdp__titletext {
  min-width: 0;
}

#defro-vdp .vdp__title h1 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.3125rem;
}

#defro-vdp .vdp__trim {
  font-size: 0.94rem;
  line-height: 1.4;
}

#defro-vdp .vdp__ids {
  margin-top: 0.5rem;
  gap: 1.125rem;
  font-size: 0.6rem;
}

/* Price column: fixed to the right, never wrapping under the title */
#defro-vdp .vdp__pricetag {
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
}

#defro-vdp .vdp__pricetag-label {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
}

#defro-vdp .vdp__pricetag-amount {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 0.1875rem;
}

#defro-vdp .vdp__pricetag-mo {
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

#defro-vdp .vdp__pricetag-mo b {
  font-size: 0.9rem;
  font-weight: 600;
}

/* The fees pill sits under the price, right aligned with it */
#defro-vdp .vdp__pricetag .defro-price-includes-fees {
  margin-top: 0.5rem !important;
}

@media (max-width: 767.98px) {

  /* Stacked on phones, where a right-hand price column has no room */
  #defro-vdp .vdp__title {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  #defro-vdp .vdp__pricetag {
    grid-column: 1;
    text-align: left;
    white-space: normal;
  }

}

/*--------------------------------------------------------------
# VDP tab rail on narrow screens
#
# The tabs were set to shrink (flex: 0 1 auto) so six labels could
# be squeezed onto one line on desktop. On a phone that shrinks
# them below their own text width, so the labels ran together with
# no gap. Below the desktop layout the rail scrolls sideways
# instead and the tabs keep their natural width.
--------------------------------------------------------------*/
@media (max-width: 900px) {

  /* Tabs wrap onto as many lines as they need. The underline marking the
     active tab is drawn on the tab itself rather than the rail's bottom
     edge, so it stays with its label once the row wraps. */
  #defro-vdp .vdp-tabs__rail {
    flex-wrap: wrap;
    overflow: visible;
    gap: 0 0.25rem;
    border-bottom: 1px solid var(--defro-line);
  }

  #defro-vdp .vdp-tab,
  #defro-vdp button.vdp-tab {
    flex: 0 0 auto !important;
    padding: 0.75rem 0.625rem !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.08em !important;
  }

  #defro-vdp .vdp-tab::after {
    bottom: 0;
  }

}

/*--------------------------------------------------------------
# Report widgets on narrow screens
#
# Carfax, CarStory and CarGurus render fixed-width panels of their
# own. On a phone those are wider than the column, and with the
# earlier max-width they had nowhere to go, so the tab looked
# empty. The pane scrolls sideways instead, and nothing constrains
# the provider markup below its own minimum.
--------------------------------------------------------------*/
.vdp-report--embed {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 120px;
}

.vdp-report--embed .carfax-snapshot-embedded,
.vdp-report--embed .carstory-container,
.vdp-report--embed .cargurus-badge {
  max-width: none;
  min-width: 0;
}

.vdp-report--embed iframe {
  max-width: 100%;
}

@media (max-width: 767.98px) {

  /* The tab panes carry no side padding of their own on mobile, so a wide
     provider panel is not clipped by the column before it can scroll */
  #defro-vdp .vdp-tabs__pane {
    padding-left: 0;
    padding-right: 0;
  }

  .vdp-report--embed {
    margin-left: 0;
    margin-right: 0;
  }

  /* Fallback layout keeps its single column on phones */
  .vdp-report:not(.vdp-report--embed) {
    grid-template-columns: 1fr;
  }

}

/*--------------------------------------------------------------
# Tab shown as a provider logo
#
# The Carfax tab carries the badge rather than a text label. The
# logo is greyed back while inactive so it reads as one tab among
# several rather than a call to action, and comes to full colour
# when its tab is open.
--------------------------------------------------------------*/
#defro-vdp .vdp-tab--logo,
#defro-vdp button.vdp-tab--logo {
  display: inline-flex !important;
  align-items: center;
  padding: 0.5rem 0.875rem !important;
}

#defro-vdp .vdp-tab--logo img {
  display: block;
  height: 24px !important;
  width: auto !important;
  max-width: none;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

#defro-vdp .vdp-tab--logo:hover img {
  opacity: 0.85;
}

#defro-vdp .vdp-tab--logo.is-active img {
  filter: none;
  opacity: 1;
}

@media (max-width: 900px) {

  #defro-vdp .vdp-tab--logo,
  #defro-vdp button.vdp-tab--logo {
    padding: 0.4375rem 0.5rem !important;
  }

  #defro-vdp .vdp-tab--logo img {
    height: 20px !important;
  }

}