/* =====================================================================
   DriveX Design System — page and section layer
   ---------------------------------------------------------------------
   Applies the foundations in dx-ds.css to every screen of the site.
   Visual only: no markup, no behaviour, no route, no query is affected.
   ===================================================================== */

/* =====================================================================
   1. LAYOUT SHELL
   ===================================================================== */
.al-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
  box-sizing: border-box;
}
.al-section, .hp-cat-section, .dx-how-section, .dx-why-section, .dx-adtypes-section {
  padding-block: var(--ds-sec-y) !important;
}
.al-section-alt { background: var(--ds-surface-2) !important; }

/* Section headers share one shape everywhere. */
.al-section-title, .dx-sec-title {
  margin: 0 0 6px !important;
  font-size: var(--ds-fs-h2) !important;
  font-weight: 800 !important;
  color: var(--ds-ink) !important;
}
.al-section-title span, .dx-sec-title span { color: var(--ds-accent-text) !important; }
.al-section-sub, .dx-section-sub {
  margin: 0 !important;
  font-size: var(--ds-fs-sm) !important;
  color: var(--ds-ink-3) !important;
  line-height: 1.5;
}
.dx-compact-head { align-items: flex-end; gap: var(--ds-4); margin-bottom: var(--ds-6) !important; }

/* =====================================================================
   2. HERO + SEARCH
   ---------------------------------------------------------------------
   The search bar IS the primary call to action on a marketplace, so it
   gets the visual weight and the headline gets out of its way.
   ===================================================================== */
.al-hero { padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 36px) !important; }
.al-hero-title, body.home .al-hero-title {
  font-size: var(--ds-fs-display) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--ds-ink) !important;
  margin-bottom: 14px !important;
}
.al-hero-sub {
  font-size: clamp(14px, 1.6vw, 17px) !important;
  color: var(--ds-ink-2) !important;
  max-width: 56ch;
  margin-inline: auto;
}
.al-hero-badge, .al-hero-badge-ai {
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary) !important;
  border: 1px solid var(--ds-primary-line) !important;
  box-shadow: none !important;
  font-size: var(--ds-fs-caption) !important;
  font-weight: 700;
  padding: 6px 14px !important;
  border-radius: var(--ds-r-pill) !important;
}
/* Ambient orbs and the pulsing dot are decoration that competed with the
   content; they stay in the markup but stop drawing the eye. */
.al-hero-orbs, .al-orb { opacity: .35 !important; filter: blur(70px); }
.al-glow-dot { display: none !important; }

/* The typed headline word is animated in JS. Reserving its line stops the
   hero — and everything below it — from jumping on every keystroke. */
.al-hero-title .al-typed, .al-hero-title #alTyped, .al-typed-word {
  display: inline-block;
  min-height: 1em;
  min-width: 1ch;
}
.al-typed-cursor { color: var(--ds-accent) !important; font-weight: 400; }

.al-search-box {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-xl) !important;
  box-shadow: var(--ds-e3) !important;
  padding: 0 !important;
  overflow: hidden;
}
/* Scoped to the hero search box on purpose: `.al-search-tab` is re-used as
   the Seller Portal tab bar, where `flex: 1` collapsed the labels into each
   other and clipped the Wallet balance off the right edge. The portal keeps
   the scrolling tab treatment in §10. */
.al-search-box .al-search-tabs {
  display: flex;
  gap: 0 !important;
  padding: 6px !important;
  margin: 0 !important;
  background: var(--ds-surface-2) !important;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0 !important;
}
.al-search-box .al-search-tab {
  flex: 1;
  min-height: 40px !important;
  padding: 9px 12px !important;
  font-size: var(--ds-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--ds-ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow: none !important;
  transform: none !important;
}
.al-search-box .al-search-tab:hover { color: var(--ds-primary) !important; background: rgba(7,54,122,.05) !important; }
.al-search-box .al-search-tab.active {
  background: var(--ds-surface) !important;
  color: var(--ds-primary) !important;
  box-shadow: var(--ds-e1) !important;
  transform: none !important;
}
.al-search-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: var(--ds-3) !important;
  align-items: end;
  padding: var(--ds-5) !important;
}
.al-search-grid .al-field { min-width: 0; }
.al-search-grid > button[type="submit"],
.al-search-grid > .al-btn-primary { min-height: var(--ds-ctl-lg) !important; padding-inline: 26px !important; }

@media (max-width: 900px) {
  .al-search-grid { grid-template-columns: 1fr 1fr; }
  .al-search-grid > button[type="submit"],
  .al-search-grid > .al-btn-primary { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .al-search-grid { grid-template-columns: 1fr; gap: var(--ds-3) !important; padding: var(--ds-4) !important; }
  .al-search-box .al-search-tab { font-size: 12.5px !important; padding: 9px 6px !important; }
  .al-search-box .al-search-tab i { display: none; }
}

/* Trust strip — a grid, so the fifth item never orphans onto its own row. */
.al-trust-bar { background: var(--ds-surface-2) !important; border-block: 1px solid var(--ds-border) !important; }
.al-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(12px, 2vw, 28px) !important;
  align-items: center;
  justify-content: stretch !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.al-trust-item { gap: 10px; min-width: 0; padding: 0 !important; flex-shrink: 1 !important; }
.al-trust-text { min-width: 0; }
@media (max-width: 1024px) { .al-trust-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; row-gap: 16px !important; } }
@media (max-width: 640px) {
  .al-trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; row-gap: 14px !important; }
  .al-trust-item:last-child { grid-column: 1 / -1; }
}
.al-trust-icon {
  width: 34px; height: 34px;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-primary) !important;
  box-shadow: none !important;
}
.al-trust-text strong, .al-trust-text > *:first-child { font-size: var(--ds-fs-sm); color: var(--ds-ink); font-weight: 700; }
.al-trust-text small, .al-trust-text > *:last-child { font-size: var(--ds-fs-caption); color: var(--ds-ink-3); }

/* =====================================================================
   3. BROWSE BY CATEGORY
   ---------------------------------------------------------------------
   Card craft, not decoration: one surface, a quiet border, the artwork
   meeting the label with no seam, a chevron affordance, and a single
   coordinated hover (lift + artwork scale + chevron fill + accent rule).
   Desktop keeps the tall portrait framing of the supplied artwork; phones
   use a landscape cut of the same artwork, trimmed only of dead space.
   ===================================================================== */
.hp-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--ds-4) !important;
  margin-top: var(--ds-6) !important;
}
.hp-cat-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  aspect-ratio: auto !important;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: 0 1px 2px rgba(13,27,46,.04) !important;
  text-decoration: none !important;
  transform: none !important;
  isolation: isolate;
}
.hp-cat-card:hover {
  border-color: var(--ds-primary-line) !important;
  box-shadow: 0 10px 28px rgba(13,27,46,.10), 0 2px 6px rgba(13,27,46,.05) !important;
  transform: translateY(-4px) !important;
}

/* --- artwork ---------------------------------------------------------- */
.hp-cat-bg {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 209 / 237;
  flex: 0 0 auto !important;
  background-color: var(--ds-primary-soft) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-bottom: none !important;      /* the artwork meets the label, no seam */
  transform: none !important;
  transition: transform .45s var(--ds-ease) !important;
}
.hp-cat-card:hover .hp-cat-bg { transform: scale(1.045) !important; }
.hp-cat-overlay { display: none !important; }

/* --- badge over the artwork -------------------------------------------
   A real element, never baked into the image file, so it can be restyled
   or dropped without recutting anything. */
.hp-cat-illustration-icon {
  display: flex !important;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: clamp(38px, 26%, 58px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(13,27,46,.10);
  pointer-events: none;
  /* dx-light-theme.css sets opacity:0 and dx-homepage-v2.css 0.13 plus
     right/bottom offsets - both from when this was a faint corner watermark. */
  opacity: 1 !important;
  right: auto !important;
  bottom: auto !important;
  font-size: initial !important;
  transition: box-shadow var(--ds-base) var(--ds-ease);
}
.hp-cat-card:hover .hp-cat-illustration-icon {
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(13,27,46,.16);
}
.hp-cat-illustration-icon i { font-size: 20px; line-height: 1; color: var(--ds-primary); }
.hp-cat-motos .hp-cat-illustration-icon i,
.hp-cat-parts .hp-cat-illustration-icon i { color: var(--ds-accent); }
.hp-cat-vans  .hp-cat-illustration-icon i,
.hp-cat-suvs  .hp-cat-illustration-icon i { color: var(--ds-success); }

/* --- label ------------------------------------------------------------- */
.hp-cat-content {
  position: relative !important;
  inset: auto !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 44px 15px 15px !important;   /* room for the chevron */
  background: var(--ds-surface);
  z-index: 1;
  flex: 1 1 auto;
  text-align: left !important;
  align-items: flex-start !important;
}
.hp-cat-icon { display: none !important; }
.hp-cat-name {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: none !important;
  text-align: left !important;
}
.hp-cat-count {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ds-ink-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.35;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Chevron affordance, drawn on the card so no markup is needed. */
.hp-cat-card::before {
  content: '';
  position: absolute;
  right: 13px;
  bottom: 15px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ds-surface-3);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307367A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  z-index: 3;
  transition: background-color var(--ds-fast) var(--ds-ease);
}
.hp-cat-card:hover::before {
  background-color: var(--ds-primary);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.hp-cat-card::after { content: none !important; }

@media (max-width: 1100px) { .hp-cat-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 860px)  { .hp-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 640px) {
  /* Phones: two up, landscape artwork from the reference's own mobile
     design. Same subject, trimmed only of the dead space above it. */
  .hp-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
  .hp-cat-card { flex-direction: column; }
  .hp-cat-bg { aspect-ratio: 560 / 437; }
  .hp-cat-cars     .hp-cat-bg { background-image: url('../assets/categories/cars-m.jpg') !important; }
  .hp-cat-motos    .hp-cat-bg { background-image: url('../assets/categories/motorcycles-m.jpg') !important; }
  .hp-cat-vans     .hp-cat-bg { background-image: url('../assets/categories/vans-m.jpg') !important; }
  .hp-cat-buses    .hp-cat-bg { background-image: url('../assets/categories/buses-m.jpg') !important; }
  .hp-cat-tuk      .hp-cat-bg { background-image: url('../assets/categories/trucks-m.jpg') !important; }
  .hp-cat-suvs     .hp-cat-bg { background-image: url('../assets/categories/three-wheelers-m.jpg') !important; }
  .hp-cat-electric .hp-cat-bg { background-image: url('../assets/categories/electric-m.jpg') !important; }
  .hp-cat-parts    .hp-cat-bg { background-image: url('../assets/categories/parts-m.jpg') !important; }
  .hp-cat-rentals  .hp-cat-bg { background-image: url('../assets/categories/rentals-m.jpg') !important; }
  .hp-cat-taxi     .hp-cat-bg { background-image: url('../assets/categories/taxi-m.jpg') !important; }
  .hp-cat-illustration-icon { width: 34px; top: 9px; left: 9px; }
  .hp-cat-illustration-icon i { font-size: 16px; }
  .hp-cat-content { padding: 11px 34px 12px 12px !important; }
  .hp-cat-name  { font-size: 13.5px !important; }
  .hp-cat-count { font-size: 11.5px !important; }
  .hp-cat-card::before { width: 22px; height: 22px; right: 9px; bottom: 11px; background-size: 11px; }
  .hp-cat-card:hover { transform: none !important; }
}

/* =====================================================================
   4. BROWSE BY BRAND
   ---------------------------------------------------------------------
   The manufacturer mark is the content — it sits on white with room to
   breathe instead of on a white plate inside a navy block.
   ===================================================================== */
.hp-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)) !important;
  gap: var(--ds-3) !important;
}
.hp-brand-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 108px;
  padding: 16px 10px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.hp-brand-item::before, .hp-brand-item::after { display: none !important; }
.hp-brand-item:hover {
  border-color: var(--ds-primary-line) !important;
  background: var(--ds-surface) !important;
  box-shadow: var(--ds-e2) !important;
  transform: translateY(-2px) !important;
}
.hp-brand-logo {
  display: flex; align-items: center; justify-content: center;
  width: 52px !important; height: 52px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hp-brand-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(.72);
  transition: filter var(--ds-base) var(--ds-ease);
}
.hp-brand-item:hover .hp-brand-logo img { filter: none; }
.hp-brand-name {
  font-size: var(--ds-fs-caption) !important;
  font-weight: 700 !important;
  color: var(--ds-ink-2) !important;
  text-align: center;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.hp-brand-fallback {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 20px; font-weight: 800; color: var(--ds-primary);
}
@media (max-width: 640px) {
  .hp-brand-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 10px !important; }
  .hp-brand-item { min-height: 94px; padding: 13px 8px !important; }
  .hp-brand-logo { width: 42px !important; height: 42px !important; }
}

/* =====================================================================
   5. BROWSE BY DISTRICT
   ---------------------------------------------------------------------
   A location list should read as a list of places, not as a wall of
   identical blue blocks. Quiet rows, brand accent on hover.
   ===================================================================== */
.hp-district-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}
.hp-district-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 11px;
  min-height: 60px !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 14px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: left !important;
}
.hp-district-card::before, .hp-district-card::after { display: none !important; }
.hp-district-card:hover {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}
.hp-district-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important;
  flex-shrink: 0;
  margin: 0 !important;
  background: var(--ds-primary-soft) !important;
  border: none !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-primary) !important;
  font-size: 17px !important;
}
.hp-district-card:hover .hp-district-icon { background: var(--ds-surface) !important; }
.hp-district-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}
/* The collapsed state is set inline by the existing toggle; a rule that
   forces `display:flex !important` would outrank that inline style. */
.hp-district-extra[style*="display:none"],
.hp-brand-extra[style*="display:none"] { display: none !important; }
@media (max-width: 640px) {
  .hp-district-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .hp-district-card { min-height: 54px !important; padding: 10px 11px !important; gap: 9px; }
  .hp-district-icon { width: 30px !important; height: 30px !important; font-size: 15px !important; }
  .hp-district-name { font-size: 13px !important; }
}

/* =====================================================================
   6. WHAT YOU CAN ADVERTISE / HOW IT WORKS / WHY DRIVEX
   ===================================================================== */
.dx-adtype-grid, .dx-feature-grid, .dx-step-grid {
  display: grid !important;
  gap: var(--ds-4) !important;
}
.dx-adtype-grid  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
.dx-feature-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
.dx-step-grid    { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) !important; }

.dx-adtype-card, .dx-feature-card, .dx-step-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 22px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: none !important;
  color: var(--ds-ink-2) !important;
  overflow: hidden;
}
.dx-adtype-card::before, .dx-adtype-card::after,
.dx-feature-card::before, .dx-feature-card::after,
.dx-step-card::before { display: none !important; }
.dx-adtype-card:hover, .dx-feature-card:hover, .dx-step-card:hover {
  border-color: var(--ds-primary-line) !important;
  box-shadow: var(--ds-e2) !important;
  transform: translateY(-2px) !important;
}

.dx-adtype-icon, .dx-feature-icon, .dx-step-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px !important; height: 42px !important;
  margin-bottom: 4px;
  background: var(--ds-primary-soft) !important;
  border: none !important;
  border-radius: var(--ds-r-md) !important;
  color: var(--ds-primary) !important;
  font-size: 20px !important;
  box-shadow: none !important;
}
.dx-adtype-card .dx-adtype-icon i, .dx-feature-icon i, .dx-step-icon i { color: var(--ds-primary) !important; }

.dx-adtype-title, .dx-feature-card h3, .dx-step-title {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
  margin: 0 !important;
}
.dx-adtype-desc, .dx-feature-card p, .dx-step-desc {
  font-size: var(--ds-fs-sm) !important;
  line-height: 1.55 !important;
  color: var(--ds-ink-2) !important;
  margin: 0 !important;
}
.dx-adtype-cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: var(--ds-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--ds-accent-text) !important;
}

/* Numbered steps — the number is the anchor, so it is placed, not floated. */
.dx-step-card { padding-top: 26px !important; }
.dx-step-num,
body.home .dx-how-section .dx-step-num,
.dx-how-section .dx-step-card .dx-step-num {
  position: static !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: auto !important; height: auto !important;
  min-width: 34px; min-height: 26px;
  margin: 0 0 6px !important;
  padding: 3px 10px !important;
  background: var(--ds-accent-soft) !important;
  border: 1px solid var(--ds-accent-line) !important;
  border-radius: var(--ds-r-pill) !important;
  color: var(--ds-accent-text) !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.dx-step-connector { display: none !important; }

/* The section heading and its subtitle were overlapping because the
   heading carried a negative offset from an older layout. */
.dx-how-section .al-section-title,
.dx-why-section .al-section-title,
.dx-how-section .dx-sec-title {
  position: static !important;
  transform: none !important;
  margin-bottom: 8px !important;
}
.dx-how-section .dx-section-sub, .dx-why-section .dx-section-sub {
  margin-top: 0 !important; position: static !important; transform: none !important;
}

/* Dealer band */
.dx-dealer-band, .dx-dealer-cta {
  background: var(--ds-primary-soft) !important;
  border: 1px solid var(--ds-primary-line) !important;
  border-radius: var(--ds-r-xl) !important;
  box-shadow: none !important;
  padding: clamp(24px, 4vw, 40px) !important;
}
.dx-dealer-band-title { font-size: var(--ds-fs-h2) !important; color: var(--ds-ink) !important; }
.dx-dealer-band-sub   { font-size: var(--ds-fs-sm) !important; color: var(--ds-ink-2) !important; }
.dx-dealer-chip, .dx-dealer-pill {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-pill) !important;
  color: var(--ds-ink-2) !important;
  font-size: var(--ds-fs-caption) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
}
.dx-dealer-chip i { color: var(--ds-success) !important; }
.dx-dealer-note { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; }

/* Testimonials */
.dx-testimonial-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: none !important;
  padding: 22px !important;
}
.dx-testimonial-text { font-size: var(--ds-fs-body) !important; color: var(--ds-ink-2) !important; line-height: 1.6 !important; }
.dx-testimonial-name { font-size: 14px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.dx-testimonial-role { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; }
.dx-testimonial-stars i, .al-stars i { color: var(--ds-warning-fill) !important; }
.dx-testimonial-avatar { border-radius: 50% !important; background: var(--ds-primary-soft) !important; color: var(--ds-primary) !important; }

/* =====================================================================
   7. LISTING CARD  — the most important component on the site
   ---------------------------------------------------------------------
   Desktop: photo-led vertical card, one badge zone, price as the anchor.
   Mobile:  horizontal card with a real photo and the specs restored —
            they used to be hidden entirely, which left a phone user with
            no mileage, fuel or transmission anywhere in the results.
   ===================================================================== */
.al-vehicles-grid, .al-listing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)) !important;
  gap: var(--ds-4) !important;
}
.al-vcard {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-e1) !important;
  text-decoration: none !important;
  max-height: none !important;
}
.al-vcard:hover {
  border-color: var(--ds-primary-line) !important;
  box-shadow: var(--ds-e3) !important;
  transform: translateY(-3px) !important;
}
.al-vcard-img {
  position: relative;
  display: block !important;
  width: 100%;
  height: auto !important;          /* a fixed 215px height ignored the ratio */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ds-surface-3);
  border-radius: 0 !important;
  flex-shrink: 0;
}
/* The dark scrim across the bottom of every photo existed to carry badges
   that now sit at the top. It only muddied the vehicle. */
.al-vcard-img::after { display: none !important; }
.al-vcard-img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ds-ease);
}
.al-vcard:hover .al-vcard-img img { transform: scale(1.04); }
.al-vcard-img-icon { color: var(--ds-border-strong) !important; font-size: 34px !important; }

.al-vcard-badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-wrap: wrap; gap: 5px;
  z-index: 2;
  max-width: calc(100% - 20px);
}
.al-vcard-badges .al-badge { box-shadow: var(--ds-e1); }

.al-fav-btn {
  position: absolute; top: 8px; right: 8px;
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 50% !important;
  color: var(--ds-ink-3) !important;
  box-shadow: var(--ds-e1) !important;
  z-index: 3;
}
.al-fav-btn:hover, .al-fav-btn.active, .al-fav-btn.is-active {
  color: var(--ds-error-fill) !important;
  border-color: var(--ds-error-line) !important;
}

.al-vcard-body {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px !important;
  flex: 1;
}
.al-vcard-make {
  order: 1;
  margin: 0 0 1px !important;
}
.al-vcard-name {
  order: 2;
  margin: 0 !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ds-ink) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-vcard-price {
  order: 3;
  margin: 4px 0 2px !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--ds-primary) !important;
  letter-spacing: -0.02em;
}
.al-vcard-price .price-note {
  font-size: var(--ds-fs-caption) !important;
  font-weight: 600 !important;
  color: var(--ds-ink-3) !important;
  letter-spacing: 0;
}
.al-vcard-specs {
  order: 4;
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
  margin: 4px 0 0 !important;
}
.al-spec-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px !important;
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-xs) !important;
  color: var(--ds-ink-2) !important;
  font-weight: 600;
  white-space: nowrap;
}
.al-spec-tag i { font-size: 13px; color: var(--ds-ink-3); }
.al-vcard-footer {
  order: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--ds-border);
}
.al-vcard-loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.al-vcard-loc i { color: var(--ds-ink-3); flex-shrink: 0; }
.al-vcard-loc span, .al-vcard-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-vcard-time { flex-shrink: 0; }

@media (max-width: 768px) {
  .al-vehicles-grid, .al-listing-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .al-vcard {
    flex-direction: row !important;
    align-items: stretch;
    max-height: none !important;
    border-radius: var(--ds-r-md) !important;
  }
  .al-vcard-img {
    width: 122px !important; min-width: 122px !important;
    aspect-ratio: auto !important;
    height: auto !important; min-height: 116px;
    align-self: stretch;
  }
  .al-vcard-body { padding: 11px 12px !important; gap: 2px; min-width: 0; }
  .al-vcard-make { font-size: var(--ds-fs-label) !important; }
  .al-vcard-name { font-size: 14px !important; -webkit-line-clamp: 2; }
  .al-vcard-price { font-size: 16.5px !important; margin: 3px 0 1px !important; }
  /* Specs were `display:none` on mobile — restored as one compact line. */
  .al-vcard-specs {
    display: flex !important;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 4px !important;
    margin-top: 3px !important;
  }
  .al-spec-tag {
    font-size: 12.5px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  /* The dot separators do the grouping work in this compact line, so the
     per-spec icons would only collide with them. */
  .al-vcard-specs .al-spec-tag i { display: none !important; }
  .al-spec-tag + .al-spec-tag::before {
    content: '·';
    margin-inline: 5px;
    color: var(--ds-border-strong);
  }
  .al-vcard-footer { padding-top: 7px !important; margin-top: 6px !important; }
  .al-vcard-loc { font-size: 12.5px !important; }
  .al-vcard-time { font-size: 12px !important; }
  .al-vcard:hover { transform: none !important; }
  .al-fav-btn { width: 32px !important; height: 32px !important; top: 6px; right: 6px; }
  .al-vcard-badges { top: 6px; left: 6px; gap: 4px; }
  .al-vcard-badges .al-badge { padding: 3px 6px; font-size: 10px !important; }
}
@media (max-width: 360px) {
  .al-vcard-img { width: 104px !important; min-width: 104px !important; min-height: 104px; }
  .al-vcard-time { display: none; }
}

/* Airport-taxi archive cards use their own class set (dx-taxi-*). */
.dx-taxi-results-grid { display: grid !important; gap: var(--ds-3) !important; }
.dx-taxi-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-e1) !important;
  overflow: hidden;
}
.dx-taxi-card:hover { border-color: var(--ds-primary-line) !important; box-shadow: var(--ds-e2) !important; }
.dx-taxi-card-media { background: var(--ds-surface-3) !important; }
.dx-taxi-title { font-size: 15px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.dx-taxi-route, .dx-taxi-meta, .dx-taxi-specs {
  font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-2) !important;
}
.dx-taxi-price {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 18px !important; font-weight: 800 !important;
  color: var(--ds-primary) !important;
}
.dx-taxi-price-sfx { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; font-weight: 600; }
.dx-taxi-vt {
  background: var(--ds-primary) !important; color: #fff !important;
  border-radius: var(--ds-r-xs) !important;
  font-size: var(--ds-fs-label) !important; font-weight: 700 !important;
  padding: 3px 9px !important; letter-spacing: .04em;
}
.dx-taxi-boost { background: var(--ds-accent) !important; color: #fff !important; border-radius: var(--ds-r-xs) !important; }
.dx-taxi-cta {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px !important;
  padding: 9px 16px !important;
  background: var(--ds-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ds-r-sm) !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  text-decoration: none !important;
}
.dx-taxi-cta:hover { background: var(--ds-primary-hover) !important; color: #fff !important; }
.dx-page-head h1, .dx-page-head .al-section-title { color: var(--ds-ink) !important; }

/* Homepage taxi + rental cards inherit the same language. */
.dx-hp-taxi-card, .dx-hp-rent-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-e1) !important;
  overflow: hidden;
}
.dx-hp-taxi-card:hover, .dx-hp-rent-card:hover {
  border-color: var(--ds-primary-line) !important; box-shadow: var(--ds-e2) !important;
}
.dx-hp-taxi-media { background: var(--ds-surface-3) !important; }
.dx-hp-taxi-title { font-size: 14.5px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.dx-hp-taxi-route, .dx-hp-taxi-loc {
  font-size: var(--ds-fs-caption) !important;
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-ink-2) !important;
}
.dx-hp-taxi-price { font-size: 17px !important; font-weight: 800 !important; color: var(--ds-primary) !important; }
.dx-hp-taxi-type  { background: var(--ds-accent) !important; color: #fff !important; border-radius: var(--ds-r-xs) !important; }
.dx-hp-taxi-cta {
  background: var(--ds-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ds-r-sm) !important;
  font-size: 13px !important; font-weight: 700 !important;
  min-height: 36px; padding: 7px 14px !important;
}
.dx-hp-taxi-cta:hover { background: var(--ds-primary-hover) !important; }

/* =====================================================================
   8. ARCHIVES, SEARCH RESULTS AND FILTERS
   ---------------------------------------------------------------------
   On a phone the filter panel used to occupy the entire first screen, so
   the results — the reason for the page — began below the fold. It is now
   collapsed behind the toggle that already exists in the markup.
   ===================================================================== */
.al-archive-layout {
  display: grid !important;
  grid-template-columns: 288px minmax(0, 1fr) !important;
  gap: var(--ds-6) !important;
  align-items: start;
}
.al-filter-sidebar {
  position: sticky; top: 84px;
  padding: 18px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: none !important;
}
.al-filter-sidebar .al-label { margin-top: 14px; }
.al-filter-sidebar .al-label:first-of-type { margin-top: 0; }
.al-archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.al-archive-count { font-size: var(--ds-fs-sm); color: var(--ds-ink-3); }

@media (max-width: 1024px) {
  .al-archive-layout { grid-template-columns: 1fr !important; gap: var(--ds-4) !important; }
  .al-filter-sidebar { position: static; }
}
@media (max-width: 768px) {
  /* The toggle button is already in the template; this simply makes the
     panel obey it instead of always standing open. */
  .al-filter-sidebar {
    padding: 14px !important;
    border-radius: var(--ds-r-md) !important;
  }
  .al-filter-toggle, #alFilterToggle, .dx-filter-toggle {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
  }
  .al-sort-row { flex-wrap: wrap; gap: 8px; }
}

/* --- shared quick-search bar (vehicles / rentals / taxi) ---------------- */
.dx-search-form {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-e1) !important;
  padding: 14px !important;
  margin: 0 0 var(--ds-5) !important;
}
.dx-search-form .dx-sf-field > label {
  font-size: var(--ds-fs-label) !important;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ds-ink-3) !important;
}
.dx-search-form .dx-sf-control { min-width: 0; }
.dx-search-form .dx-sf-control select,
.dx-search-form .dx-sf-control input {
  min-height: var(--ds-ctl-md) !important;
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
}
.dx-sf-btn { min-height: var(--ds-ctl-md) !important; }
/* At 1280px the leading glyph plus a 4-column split left "All Categories"
   clipped to "All Categorie". */
@media (min-width: 769px) {
  .dx-search-form .dx-sf-control > i,
  .dx-search-form .dx-sf-icon { flex-shrink: 0; margin-right: 2px; }
  .dx-search-row.dx-sr-vehicle { grid-template-columns: 1.5fr 1.1fr 1.1fr 1fr auto !important; }
}

@media (max-width: 768px) {
  /* Stacked one-per-row this bar was 409px tall — the whole first screen —
     so results began below the fold. Two columns halve it. */
  .dx-search-row, .dx-search-row.dx-sr-vehicle,
  .dx-search-row.dx-sr-rental, .dx-search-row.dx-sr-taxi {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dx-search-row > .dx-sf-submit,
  .dx-search-row > button[type="submit"],
  .dx-search-row > .dx-sf-btn { grid-column: 1 / -1; }
  .dx-search-form { padding: 12px !important; margin-bottom: var(--ds-4) !important; }
  .dx-search-form .dx-sf-field > label { font-size: var(--ds-fs-label) !important; margin-bottom: 4px; }
  /* The decorative leading glyph inside each control ate roughly a third of
     a half-width field, clipping "All Categories" to "All Categor". */
  .dx-search-form .dx-sf-control > i,
  .dx-search-form .dx-sf-icon { display: none !important; }
  .dx-search-form .dx-sf-control { padding-left: 0 !important; }
  .dx-search-form .dx-sf-control select,
  .dx-search-form .dx-sf-control input {
    padding-left: 11px !important;
    text-overflow: ellipsis;
  }
}
@media (max-width: 380px) {
  .dx-search-row, .dx-search-row.dx-sr-vehicle,
  .dx-search-row.dx-sr-rental, .dx-search-row.dx-sr-taxi { grid-template-columns: 1fr !important; }
}

/* The mobile filter-drawer toggle carries inline styles, so it is matched
   here rather than through .al-btn. */
#alFilterToggleBar { width: 100%; }
#alFilterToggleBar button {
  width: 100% !important;
  justify-content: center !important;
  min-height: var(--ds-ctl-md) !important;
  padding: 10px 16px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.al-browse-sidebar {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  padding: 18px !important;
}
.al-browse-sidebar input:focus, .al-browse-sidebar select:focus {
  border-color: var(--ds-primary) !important;
  box-shadow: var(--ds-ring) !important;
}
.al-browse-sidebar input[type="radio"], .al-browse-sidebar input[type="checkbox"] { accent-color: var(--ds-primary); }
@media (max-width: 800px) {
  .al-browse-sidebar.open {
    padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    background: var(--ds-surface) !important;
  }
}

/* Pagination */
.al-pagination, .page-numbers { font-size: var(--ds-fs-sm); }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface);
  color: var(--ds-ink-2);
  font-weight: 600;
  text-decoration: none;
}
.page-numbers:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-primary-soft); }
.page-numbers.current {
  background: var(--ds-primary); border-color: var(--ds-primary); color: #fff;
}

/* The floating "save this search" control sat on top of the last result. */
.dx-save-search-float, #dxSaveSearchBtn {
  box-shadow: var(--ds-e3) !important;
  border-radius: var(--ds-r-pill) !important;
  font-size: var(--ds-fs-sm) !important;
  min-height: 42px;
}
@media (max-width: 768px) {
  .dx-save-search-float, #dxSaveSearchBtn {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    min-height: 40px;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  body.single-vehicle .dx-save-search-float,
  body.single-rental .dx-save-search-float { bottom: 84px !important; }
}

/* =====================================================================
   9. LISTING DETAIL PAGE
   ---------------------------------------------------------------------
   The audit found the asking price roughly 2,300px down the page on a
   phone — after the specifications, description, service history, map and
   comments — because the price column is second in the DOM. A title and
   price header is added at the top of the template (see single-*.php) and
   styled here; the sidebar keeps everything it always had.
   ===================================================================== */
.al-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 372px !important;
  gap: var(--ds-6) !important;
  align-items: start;
}
@media (max-width: 1024px) { .al-detail-layout { grid-template-columns: 1fr !important; } }

.al-breadcrumb { font-size: var(--ds-fs-caption); color: var(--ds-ink-3); margin-bottom: var(--ds-4); }
.al-breadcrumb a { color: var(--ds-ink-3); text-decoration: none; }
.al-breadcrumb a:hover { color: var(--ds-primary); }
.al-breadcrumb-sep i { font-size: 13px; opacity: .6; }

/* --- title header (new markup, ds-titlebar) ---------------------------- */
.ds-titlebar {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--ds-3);
  margin-bottom: var(--ds-4);
}
.ds-titlebar-main { min-width: 0; flex: 1 1 320px; }
.ds-titlebar h1 {
  margin: 0 0 6px !important;
  font-size: var(--ds-fs-h1) !important;
  line-height: 1.16 !important;
  font-weight: 800 !important;
  color: var(--ds-ink) !important;
}
.ds-titlebar-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: var(--ds-fs-sm);
  color: var(--ds-ink-3);
}
.ds-titlebar-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ds-titlebar-meta i { font-size: 15px; opacity: .85; }
.ds-titlebar-price {
  flex: 0 0 auto;
  text-align: right;
}
.ds-titlebar-price .ds-tp-amount {
  display: block;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ds-primary);
}
.ds-titlebar-price .ds-tp-note {
  display: block; margin-top: 2px;
  font-size: var(--ds-fs-caption); color: var(--ds-ink-3); font-weight: 600;
}
@media (max-width: 640px) {
  .ds-titlebar { flex-direction: column; gap: 10px; margin-bottom: var(--ds-3); }
  /* In a column flex container flex-basis sizes the HEIGHT, so the 320px
     basis used for the desktop row was opening a 320px hole above the price. */
  .ds-titlebar-main { flex: 0 0 auto !important; }
  .ds-titlebar-price { text-align: left; }
  .ds-titlebar h1 { font-size: 21px !important; }
  .ds-titlebar-meta { font-size: var(--ds-fs-caption); gap: 4px 12px; }
}

/* --- gallery ----------------------------------------------------------- */
.al-detail-gallery { margin-bottom: var(--ds-5) !important; }
.al-gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 560px;
  overflow: hidden;
  background: var(--ds-surface-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
}
.al-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-gallery-thumbs {
  display: flex; gap: 8px;
  margin-top: 10px;
  padding-bottom: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.al-thumb {
  flex: 0 0 auto;
  width: 88px; height: 66px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-3);
  opacity: .72;
  transition: opacity var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}
.al-thumb img { width: 100%; height: 100%; object-fit: cover; }
.al-thumb:hover { opacity: 1; }
.al-thumb.active { border-color: var(--ds-primary); opacity: 1; }
@media (max-width: 640px) {
  .al-gallery-main { aspect-ratio: 4 / 3; border-radius: var(--ds-r-md); }
  .al-thumb { width: 72px; height: 54px; }
}

/* --- price card -------------------------------------------------------- */
.al-detail-price-card {
  position: sticky; top: 84px;
  padding: 20px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-e2) !important;
}
@media (max-width: 1024px) { .al-detail-price-card { position: static; } }
.al-detail-price {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em;
  color: var(--ds-primary) !important;
}
.al-negotiable {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ds-fs-caption); font-weight: 700; color: var(--ds-success) !important;
}
.al-price-note-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* --- contact actions: one primary, the rest secondary ------------------ */
.al-contact-actions { display: flex; flex-direction: column; gap: 8px; }
.al-contact-actions .al-btn {
  width: 100%;
  min-height: 46px !important;
  font-size: 14.5px !important;
}
/* Calling is the action a Sri Lankan buyer takes first, so it leads. */
.al-contact-actions .al-btn-blue {
  background: var(--ds-primary) !important; order: 1;
}
.al-contact-actions .al-btn-whatsapp { order: 2; }
.al-contact-actions .dx-msg-btn, .al-contact-actions [class*="msg-btn"] {
  order: 3;
  background: #fff !important;
  color: var(--ds-primary) !important;
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: none !important;
}
.al-contact-actions .dx-msg-btn:hover { background: var(--ds-primary-soft) !important; border-color: var(--ds-primary) !important; }

/* --- market price toggle -------------------------------------------------
   Was a lavender gradient panel with purple text — the only purple on the
   site. It is a brand-tinted control now. */
.dx-bm-toggle {
  background: var(--ds-primary-soft) !important;
  border: 1px solid var(--ds-primary-line) !important;
  border-radius: var(--ds-r-md) !important;
  min-height: 46px;
  padding: 12px 16px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.dx-bm-toggle:hover { border-color: var(--ds-primary) !important; box-shadow: none !important; }
.dx-bm-toggle-label { color: var(--ds-primary) !important; }
.dx-bm-toggle .dx-bm-caret { color: var(--ds-primary) !important; }

/* --- make an offer ------------------------------------------------------
   The amount, the slider fill and the thumb were all orange, competing with
   the Post Your Ad CTA; WhatsApp keeps its own brand on the send button. */
.al-offer-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: none !important;
}
.al-offer-header { font-size: 15px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.al-offer-header i { color: var(--ds-primary) !important; }
.al-offer-amount { color: var(--ds-primary) !important; }
.al-offer-pct, .al-offer-note, .al-offer-range { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; }
/* The track background is painted inline by the widget to show where the
   offer sits, so it is deliberately NOT overridden here — the gradient's
   colours were re-pointed at the tokens in js/calendar.js instead. */
.al-offer-slider::-webkit-slider-thumb {
  background: var(--ds-primary) !important;
  border: 4px solid #fff !important;
  box-shadow: var(--ds-e2) !important;
  width: 28px !important; height: 28px !important;
}
.al-offer-slider::-moz-range-thumb {
  background: var(--ds-primary) !important;
  border: 4px solid #fff !important;
  box-shadow: var(--ds-e2) !important;
  width: 28px !important; height: 28px !important;
}
.al-offer-btn {
  background: var(--ds-whatsapp) !important;
  color: #fff !important;
  border-radius: var(--ds-r-md) !important;
  min-height: 46px !important;
  font-size: 14px !important;
}
.al-offer-btn:hover { background: var(--ds-whatsapp-hover) !important; }

/* The secondary price restatement ("Rs 8.45 Million") is a helper, not a
   second price — it was as loud as the CTA colour. */
.al-detail-price-card .al-detail-price + div { color: var(--ds-ink-3) !important; font-weight: 600 !important; }

/* --- specification grid ------------------------------------------------- */
.al-spec-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 1px !important;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  overflow: hidden;
}
.al-spec-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px !important;
  background: var(--ds-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.al-spec-val { font-size: 14.5px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
@media (max-width: 480px) { .al-spec-grid { grid-template-columns: 1fr 1fr !important; } }

/* --- safety and payment notices ---------------------------------------- */
.dx-pay-warn, .dx-payment-warning {
  display: flex; gap: 10px;
  padding: 13px 15px !important;
  background: var(--ds-warning-soft) !important;
  border: 1px solid var(--ds-warning-line) !important;
  border-left: 3px solid var(--ds-warning-fill) !important;
  border-radius: var(--ds-r-md) !important;
  margin-bottom: var(--ds-5) !important;
}
.dx-pay-warn-head { font-size: var(--ds-fs-sm) !important; font-weight: 700 !important; color: var(--ds-warning) !important; }
.dx-pay-warn-text { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-2) !important; line-height: 1.5 !important; }
.dx-safety-notes, .dx-sn-box {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
}
.dx-sn-btn {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
  font-weight: 600 !important;
}
.dx-sn-btn.active { background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: #fff !important; }

/* --- seller box --------------------------------------------------------- */
.al-seller-avatar {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: var(--ds-primary-soft) !important;
  border: 1px solid var(--ds-primary-line) !important;
  color: var(--ds-primary) !important;
  font-weight: 800;
  overflow: hidden;
}
.al-verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px !important;
  border-radius: var(--ds-r-xs) !important;
}

/* --- mobile action bar --------------------------------------------------
   Added by the templates as `.ds-actionbar`. It re-uses the page's own
   links: `tel:` and `wa.me` hrefs identical to the sidebar buttons, and a
   Message control that clicks the existing button so its handler — and the
   fresh nonce it fetches — runs exactly as before. */
.ds-actionbar { display: none; }
@media (max-width: 1024px) {
  .ds-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 200;
    display: flex; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ds-border);
    box-shadow: 0 -4px 20px rgba(13,27,46,.08);
  }
  .ds-actionbar .al-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px !important;
    padding-inline: 10px !important;
    font-size: 13.5px !important;
    overflow: hidden;
  }
  .ds-actionbar .ds-ab-price {
    display: flex; flex-direction: column; justify-content: center;
    padding-right: 4px; flex: 0 0 auto;
  }
  .ds-actionbar .ds-ab-price b {
    font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
    font-size: 15px; font-weight: 800; color: var(--ds-primary); line-height: 1.1;
  }
  .ds-actionbar .ds-ab-price small { font-size: var(--ds-fs-label); color: var(--ds-ink-3); }
  /* Keep the last section clear of the bar. */
  body.single-vehicle main, body.single-rental main,
  body.single-taxi main, body.single-dealer main { padding-bottom: 86px !important; }
}
/* Three actions plus a price will not fit a phone — the price is already the
   first thing on the page, so the bar keeps the actions. */
@media (max-width: 480px) {
  .ds-actionbar .ds-ab-price { display: none !important; }
}
@media (max-width: 360px) {
  .ds-actionbar { gap: 6px; padding-inline: 10px; }
  .ds-actionbar .al-btn { font-size: 12.5px !important; padding-inline: 6px !important; gap: 5px; }
  .ds-actionbar .al-btn i { font-size: 15px; }
}

/* --- comments ------------------------------------------------------------ */
.dx-comment, .dx-comment-item, .comment-body {
  display: flex; gap: 11px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--ds-border);
  background: transparent !important;
  border-radius: 0 !important;
}
.dx-comment-avatar, .comment-author img, .dx-comment .avatar {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  flex-shrink: 0;
}
.dx-comment-name, .comment-author { font-size: 14px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.dx-comment-time, .comment-meta { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; }
.dx-comment-text, .comment-content { font-size: var(--ds-fs-body) !important; color: var(--ds-ink-2) !important; line-height: 1.55 !important; }
.dx-comment-reply, .comment-reply-link {
  font-size: var(--ds-fs-caption) !important; font-weight: 700 !important;
  color: var(--ds-primary) !important; text-decoration: none !important;
}
.dx-comment-children, .children {
  margin-left: 22px; padding-left: 14px;
  border-left: 2px solid var(--ds-border);
  list-style: none;
}
@media (max-width: 640px) {
  .dx-comment-children, .children { margin-left: 10px; padding-left: 10px; }
}

/* =====================================================================
   10. SELLER PORTAL, DASHBOARDS AND ADMIN
   ---------------------------------------------------------------------
   Stat figures used four unrelated colours (green, blue, cyan, red) for
   values that carry no semantic difference. They are one colour now, and
   the tabs scroll properly instead of clipping.
   ===================================================================== */
.al-dash-stats, .al-portal-stats, .dx-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: var(--ds-3) !important;
}
.al-stat-card, .dx-stat-card, .al-dash-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: none !important;
  text-align: left !important;
}
.al-dash-stat-num, .al-stat-num, .dx-stat-num, .al-stat-value {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--ds-ink) !important;
}
.al-dash-stat-label, .al-stat-label, .dx-stat-label {
  font-size: var(--ds-fs-caption) !important;
  font-weight: 600 !important;
  color: var(--ds-ink-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Tabs — one row that scrolls, never a clipped grid.
   The Seller Portal re-uses `.al-search-tabs` for its tab bar, so it is
   matched here (outside the hero search box) rather than in §2. */
.al-portal-tabs, .al-dash-tabs, .dx-tabs, .al-tabs,
body:not(.home) .al-search-tabs:not(.al-search-box .al-search-tabs) {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  margin-bottom: var(--ds-4) !important;
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.al-portal-tabs::-webkit-scrollbar, .al-tabs::-webkit-scrollbar,
.al-search-tabs::-webkit-scrollbar { display: none; }
.al-portal-tab, .al-dash-tab, .dx-tab, .al-tab,
body:not(.home) .al-search-tabs .al-search-tab {
  flex: 0 0 auto !important;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px;
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--ds-r-sm) !important;
  font-size: var(--ds-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--ds-ink-3) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.al-portal-tab:hover, .dx-tab:hover, .al-tab:hover,
body:not(.home) .al-search-tabs .al-search-tab:hover {
  color: var(--ds-primary) !important; background: rgba(7,54,122,.06) !important;
}
.al-portal-tab.active, .al-dash-tab.active, .dx-tab.active, .al-tab.active,
body:not(.home) .al-search-tabs .al-search-tab.active {
  background: var(--ds-surface) !important;
  color: var(--ds-primary) !important;
  box-shadow: var(--ds-e1) !important;
}

/* Listing rows in the portal.
   The six row actions were six different colours — blue, orange, green,
   amber, violet and red — which made every action look equally urgent and
   put a violet on an otherwise blue-and-orange site. They are one quiet
   control now; only Delete keeps a colour, because it destroys something. */
.al-lc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.al-lc-btn {
  min-height: 36px !important;
  padding: 7px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: var(--ds-r-sm) !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-strong) !important;
  color: var(--ds-ink-2) !important;
}
.al-lc-btn:hover {
  border-color: var(--ds-primary) !important;
  color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
}
.al-lc-btn.view, .al-lc-btn.edit, .al-lc-btn.sold,
.al-lc-btn.feat, .al-lc-btn.boost {
  color: var(--ds-ink-2) !important;
  border-color: var(--ds-border-strong) !important;
  background: var(--ds-surface) !important;
}
/* Boost is the one revenue action in the row, so it carries the brand. */
.al-lc-btn.boost {
  color: var(--ds-accent-text) !important;
  border-color: var(--ds-accent-line) !important;
  background: var(--ds-accent-soft) !important;
}
.al-lc-btn.boost:hover { background: var(--ds-accent) !important; color: #fff !important; border-color: var(--ds-accent) !important; }
.al-lc-btn.del { color: var(--ds-error) !important; border-color: var(--ds-error-line) !important; }
.al-lc-btn.del:hover { background: var(--ds-error-soft) !important; color: var(--ds-error) !important; border-color: var(--ds-error-fill) !important; }
.al-listing-price, .al-lc-price, .al-listing-row .al-price {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ds-primary) !important;
}

/* Row actions in the portal listing rows */
.al-listing-row, .al-portal-listing {
  display: flex; gap: 12px;
  padding: 14px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: none !important;
}
.al-listing-row:hover { border-color: var(--ds-primary-line) !important; }
.al-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.al-row-actions .al-btn { min-height: 34px !important; padding: 6px 12px !important; font-size: 12.5px !important; }

/* Admin shell */
.al-admin-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: var(--ds-5); align-items: start; }
@media (max-width: 900px) { .al-admin-layout { grid-template-columns: 1fr; } }
.al-admin-sidebar {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); padding: 8px;
}

/* Wallet */
.al-wallet-balance {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--ds-primary) !important;
}

/* =====================================================================
   11. MESSAGING
   ---------------------------------------------------------------------
   A marketplace inbox: the selected conversation is marked with the brand,
   not with a peach slab, and outgoing bubbles are brand blue with white
   text rather than orange with near-black text.
   Class names are the template's own (.dx-mrow / .dx-b).
   ===================================================================== */
.dx-msgs-title { font-size: var(--ds-fs-h1) !important; color: var(--ds-ink) !important; }
.dx-msgs-title i { color: var(--ds-primary) !important; }
.dx-msgs-list, .dx-msgs-chat {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  background: var(--ds-surface) !important;
}
.dx-msgs-search {
  border-radius: var(--ds-r-sm) !important;
  border: 1px solid var(--ds-border-strong) !important;
  background: var(--ds-surface) !important;
}
.dx-msgs-search input { border: none !important; box-shadow: none !important; min-height: 40px; }

.dx-mrow {
  padding: 13px 14px !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  align-items: flex-start !important;
}
.dx-mrow:hover { background: var(--ds-surface-2) !important; }
.dx-mrow.active {
  background: var(--ds-primary-soft) !important;
  border-left: 3px solid var(--ds-primary) !important;
  padding-left: 11px !important;
}
.dx-mrow.unread { background: var(--ds-surface) !important; }
.dx-mrow.unread .dx-mrow-name { font-weight: 800 !important; color: var(--ds-ink) !important; }
.dx-mrow.unread .dx-mrow-last { font-weight: 600 !important; color: var(--ds-ink-2) !important; }
.dx-mrow-av {
  width: 42px !important; height: 42px !important;
  background: var(--ds-primary-soft) !important;
  border: 1px solid var(--ds-primary-line);
}
.dx-mrow-ini  { color: var(--ds-primary) !important; }
.dx-mrow-name { font-size: 14.5px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.dx-mrow-time { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; }
.dx-mrow-ad   { font-size: var(--ds-fs-caption) !important; color: var(--ds-primary) !important; font-weight: 600; }
.dx-mrow-last { font-size: var(--ds-fs-sm) !important; color: var(--ds-ink-3) !important; }
.dx-mrow-badge {
  background: var(--ds-accent) !important;
  color: #fff !important;
  font-size: var(--ds-fs-label) !important;
  min-width: 20px !important; height: 20px !important;
}

/* Thread bubbles */
.dx-b {
  max-width: 76%;
  padding: 10px 14px !important;
  border-radius: var(--ds-r-lg) !important;
  font-size: var(--ds-fs-body) !important;
  line-height: 1.5 !important;
}
.dx-b-me {
  background: var(--ds-primary) !important;
  color: #fff !important;
  border-bottom-right-radius: var(--ds-r-xs) !important;
}
.dx-b-them {
  background: var(--ds-surface-3) !important;
  color: var(--ds-ink) !important;
  border-bottom-left-radius: var(--ds-r-xs) !important;
}
.dx-b-time { font-size: var(--ds-fs-label) !important; opacity: .8; margin-top: 3px !important; }
.dx-b-me .dx-b-time { color: rgba(255,255,255,.82) !important; opacity: 1; }
.dx-b-day {
  font-size: var(--ds-fs-caption) !important;
  color: var(--ds-ink-3) !important;
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border);
  padding: 3px 12px !important;
}
.dx-msgs-empty, .dx-msgs-pick, .dx-msgs-nores { color: var(--ds-ink-3) !important; }
.dx-msgs-empty-t { font-size: var(--ds-fs-h4) !important; color: var(--ds-ink) !important; font-weight: 700; }

/* =====================================================================
   12. POST AN AD / LONG FORMS
   ---------------------------------------------------------------------
   Section grouping, one input height, a summary submit area that is not a
   full-width slab. Field names, order, validation and submission are
   untouched.
   ===================================================================== */
.al-form-section, .dx-form-section, .al-post-section {
  padding: 20px !important;
  margin-bottom: var(--ds-4) !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: none !important;
}
.al-form-section-title, .dx-form-section-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
}
.al-form-section-sub { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; margin-bottom: 16px !important; }
.al-form-grid, .dx-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: var(--ds-4) !important;
}
.al-form-row { margin-bottom: var(--ds-4); }
.al-form-footer, .dx-form-footer {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: var(--ds-4);
  border-top: 1px solid var(--ds-border);
}
.al-form-footer .al-btn-primary { min-width: 190px; }
@media (max-width: 640px) {
  .al-form-section { padding: 16px !important; }
  .al-form-footer { flex-direction: column-reverse; align-items: stretch; }
  .al-form-footer .al-btn { width: 100%; }
}

/* Required marker */
.al-required, .required-star { color: var(--ds-error) !important; font-weight: 700; }

/* Photo uploader */
.al-upload-zone, .dx-upload-zone {
  padding: 26px 18px !important;
  background: var(--ds-surface-2) !important;
  border: 2px dashed var(--ds-border-strong) !important;
  border-radius: var(--ds-r-lg) !important;
  text-align: center;
  color: var(--ds-ink-3);
}
.al-upload-zone:hover, .al-upload-zone.dragover {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
}
.al-photo-preview, .dx-photo-item {
  border-radius: var(--ds-r-sm) !important;
  border: 1px solid var(--ds-border) !important;
  overflow: hidden;
}

/* Mobile stepped post-ad flow (class names are the template's own, dx-mwf-*) */
.dx-mwf-bar { gap: 5px !important; }
.dx-mwf-bar span {
  height: 4px !important;
  border-radius: var(--ds-r-pill) !important;
  background: var(--ds-border) !important;
}
.dx-mwf-bar span.done   { background: var(--ds-primary-line) !important; }
.dx-mwf-bar span.active { background: var(--ds-primary) !important; }
.dx-mwf-stepnum {
  font-size: var(--ds-fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  color: var(--ds-ink-3) !important;
}
.dx-mwf-steptitle { font-size: 16px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }

.dx-mwf-nav {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid var(--ds-border) !important;
  /* The coloured glow bled out from under the bar as an orange sliver. */
  box-shadow: 0 -4px 20px rgba(13,27,46,.08) !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 8px !important;
}
.dx-mwf-nav .dx-mwf-next {
  min-height: 48px !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--ds-r-md) !important;
  background: var(--ds-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.dx-mwf-nav .dx-mwf-next:hover { background: var(--ds-accent-hover) !important; }
.dx-mwf-nav .dx-mwf-back {
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--ds-r-md) !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-strong) !important;
  color: var(--ds-ink-2) !important;
}
.dx-mwf-modepick button {
  border-radius: var(--ds-r-sm) !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-ink-2) !important;
  min-height: 46px;
}
.dx-mwf-modepick button.active {
  background: var(--ds-primary) !important; color: #fff !important; border-color: var(--ds-primary) !important;
}
.dx-mwf-modepick button small { color: inherit !important; opacity: .8; font-size: var(--ds-fs-label) !important; }
#listingTypeGrid .al-listing-type-card {
  border-radius: var(--ds-r-md) !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
}
#listingTypeGrid .al-listing-type-card.selected {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ds-primary) !important;
}
#listingTypeGrid .al-listing-type-card i { color: var(--ds-primary) !important; }

/* Choice tiles (Sell / Rent / Wedding / Taxi) */
.dx-mw-choice, .al-type-card, .dx-choice-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 16px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  font-size: 14px; font-weight: 700; color: var(--ds-ink) !important;
}
.dx-mw-choice.selected, .al-type-card.selected, .dx-choice-card.selected,
.dx-mw-choice[aria-pressed="true"] {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ds-primary) !important;
}
.dx-mw-choice i, .al-type-card i { font-size: 24px; color: var(--ds-primary); }

/* =====================================================================
   13. MARKET PRICE PAGE
   ---------------------------------------------------------------------
   Brand names were tinted per manufacturer (red, orange, blue), which put
   four unrelated hues on one screen. One ink colour, one price colour.
   ===================================================================== */
.bm-card, .bm-result-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: none !important;
  padding: 16px !important;
}
.bm-card:hover { border-color: var(--ds-primary-line) !important; }
.bm-brand, .bm-make {
  color: var(--ds-ink-3) !important;
  font-size: var(--ds-fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bm-model, .bm-title { font-size: 16px !important; font-weight: 700 !important; color: var(--ds-ink) !important; }
.bm-year, .bm-range-note { font-size: var(--ds-fs-caption) !important; color: var(--ds-ink-3) !important; }
.bm-price, .bm-range {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 18px !important; font-weight: 800 !important;
  color: var(--ds-primary) !important;
}
.bm-fuel, .bm-tag {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
  border-radius: var(--ds-r-xs) !important;
  font-size: var(--ds-fs-label) !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}
.bm-chip {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
  font-weight: 600 !important;
}
.bm-chip.on, .bm-chip.active {
  background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: #fff !important;
}
.bm-vote-btn {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
  font-weight: 600 !important;
}
.bm-vote-btn:hover { border-color: var(--ds-primary) !important; color: var(--ds-primary) !important; }
.bm-page-btn {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
}
.bm-page-btn.on, .bm-page-btn.current { background: var(--ds-primary) !important; color: #fff !important; border-color: var(--ds-primary) !important; }

/* =====================================================================
   14. DEALER AND SELLER PROFILES
   ===================================================================== */
.al-dealer-hero, .dx-dealer-header {
  background: var(--ds-primary-soft) !important;
  border: 1px solid var(--ds-primary-line) !important;
  border-radius: var(--ds-r-xl) !important;
  padding: clamp(20px, 3vw, 32px) !important;
  box-shadow: none !important;
}
.al-dealer-logo, .dx-dealer-logo {
  width: clamp(64px, 12vw, 96px) !important;
  height: clamp(64px, 12vw, 96px) !important;
  object-fit: contain;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: 8px;
}
.al-dealer-name, .dx-dealer-name { font-size: var(--ds-fs-h1) !important; font-weight: 800 !important; color: var(--ds-ink) !important; }
.al-dealer-meta { font-size: var(--ds-fs-sm) !important; color: var(--ds-ink-2) !important; }

/* Dealer inventory strip — the same card language as the listing grid. */
.dx-dstrip { gap: var(--ds-3) !important; }
.dx-dcard {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-e1) !important;
}
.dx-dcard:hover {
  border-color: var(--ds-primary-line) !important;
  box-shadow: var(--ds-e2) !important;
  transform: translateY(-2px) !important;
}
.dx-dcard-img { background: var(--ds-surface-3) !important; }
.dx-dcard-body { padding: 11px 12px !important; }
.dx-dcard-make { color: var(--ds-ink-3) !important; }
.dx-dcard-name { font-size: 14px !important; color: var(--ds-ink) !important; }
.dx-dcard-price {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ds-primary) !important;
}
.dx-dp-social {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-strong) !important;
  color: var(--ds-ink-2) !important;
  min-width: 38px; min-height: 38px;
  border-radius: var(--ds-r-sm) !important;
}
.dx-dp-social:hover {
  background: var(--ds-primary) !important; border-color: var(--ds-primary) !important;
  color: #fff !important; transform: none !important;
}

/* =====================================================================
   15. FOOTER
   ===================================================================== */
.al-footer { background: var(--ds-navy) !important; border-top: none !important; }
.al-footer, .al-footer p, .al-footer li,
.al-footer div, .al-footer span, .al-footer .al-container {
  color: rgba(255,255,255,.72) !important;
}
.al-footer, .al-footer p, .al-footer li { font-size: var(--ds-fs-sm) !important; }
.al-footer a { color: rgba(255,255,255,.72) !important; text-decoration: none !important; }
.al-footer a:hover { color: #fff !important; }
.al-footer-col-title {
  font-size: var(--ds-fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  color: #fff !important;
}
.al-footer-grid { gap: clamp(20px, 4vw, 44px) !important; }
.al-footer-brand { background: transparent !important; border: none !important; }
.al-social-btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.al-social-btn:hover { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.35) !important; }
.al-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: var(--ds-fs-caption) !important;
}
/* `.al-footer-col-title::after` IS the mobile accordion chevron — decorative
   rules on it must stay desktop-only or the chevron disappears. */
@media (min-width: 769px) {
  .al-footer-col-title::after { content: none; }
}

/* =====================================================================
   16. RESPONSIVE GUARDS
   ===================================================================== */
html, body { max-width: 100%; overflow-x: clip; }
.al-container, main, section, .al-detail-layout, .al-archive-layout { min-width: 0; }
* { min-width: 0; }
table { max-width: 100%; }

/* Long unbroken strings (registration numbers, URLs, emails) never widen a
   phone screen. */
.al-vcard-name, .ds-titlebar h1, .dx-conv-last, .al-spec-val,
.dx-comment-text, .al-detail-desc { overflow-wrap: anywhere; }

/* =====================================================================
   17. RE-ASSERTIONS  (see dx-ds.css §14 — same reason)
   ===================================================================== */
.al-vcard-price, .al-detail-price, .dx-hp-taxi-price, .bm-price { color: var(--ds-primary) !important; }
.al-contact-actions .al-btn-whatsapp { background: var(--ds-whatsapp) !important; color: #fff !important; }
.al-contact-actions .al-btn-blue { background: var(--ds-primary) !important; color: #fff !important; }
.hp-cat-name { color: var(--ds-ink) !important; }
.hp-district-name { color: var(--ds-ink) !important; }
.al-nav-link.active { color: #fff !important; }

/* =====================================================================
   18. CONTRAST CORRECTIONS  (must be last — dx-ds-pages.css loads after
   dx-ds.css, so equal-specificity rules there would otherwise win)
   ---------------------------------------------------------------------
   Measured on the rendered page with every semi-transparent layer
   composited, not on the palette in isolation.
   ===================================================================== */

/* White on the logo orange is 3.05:1. Where the label is small text — badges,
   header CTA, inline buttons — the fill deepens to #CB4C00 (4.6:1), which is
   the same hue, one step darker. The logo itself is never recoloured. */
.al-badge-featured, .al-badge-boosted,
.dx-hp-taxi-type, .dx-taxi-vt, .dx-taxi-boost,
.al-badge-rent, .al-badge-wedding,
body.home .al-section .al-badge-featured,
body .al-vcard-badges .al-badge-featured,
.al-nav-right .al-post-btn,
.al-post-btn, body.home .al-post-btn,
.al-btn-accent, .dx-promo-cta, .dx-dealer-cta-btn,
.al-btn-accent:hover, .al-post-btn:hover, .dx-dealer-cta-btn:hover {
  background: var(--ds-accent-deep, #C44A00) !important;
  color: #fff !important;
}
.al-post-btn:hover, .al-btn-accent:hover, .dx-dealer-cta-btn:hover {
  background: #A93F00 !important;
}
/* The accent stays the bright logo orange wherever it is not carrying text:
   focus rings, underlines, the category-card hover bar, icon fills. */
.al-typed-cursor { background: none !important; color: var(--ds-accent) !important; }

/* Orange, green and blue used as TEXT need the deeper tones. */
.dx-adtype-cta, .al-section-title span, .dx-sec-title span,
.dx-eyebrow, .dx-eyebrow-gold { color: var(--ds-accent-text) !important; }
[style*="color:var(--green)"], [style*="color: var(--green)"],
[style*="color:#12905A"], [style*="color:#25D366"], [style*="color:#25d366"] {
  color: var(--ds-success) !important;
}
[style*="color:#0A4A9E"] { color: var(--ds-primary) !important; }

/* Dark ink on a mid-blue fill was 2.05:1. */
[style*="background:var(--dx-blue-hi)"], [style*="background:#0A4A9E"],
[style*="background:var(--ds-primary-light)"] { color: #fff !important; }
.dx-step-num, .al-step-num { color: var(--ds-accent-text) !important; }

/* WhatsApp: the brand green is 1.9:1 with white, so text and fills use the
   darkened tone (5.0:1). The icon keeps the recognisable shape. */
.al-btn-whatsapp, .dx-wa-btn, .al-offer-btn,
[style*="background:rgba(37,211,102,.9"], [style*="background:rgba(37,211,102,1"] {
  background: var(--ds-whatsapp) !important;
  color: #fff !important;
  border-color: var(--ds-whatsapp) !important;
}
/* The low-alpha WhatsApp tint stays a soft pill; only the label deepens. */
[style*="background:rgba(37,211,102,.1"], [style*="background:rgba(37,211,102,.12"],
[style*="background: rgba(37, 211, 102, 0.1"] {
  background: var(--ds-success-soft) !important;
  color: var(--ds-whatsapp) !important;
  border-color: var(--ds-success-line) !important;
}
[style*="color:#25D366"], [style*="color:#25d366"],
.dx-wa-text, .al-wa-link { color: var(--ds-whatsapp) !important; }

/* Step circles on About / Advertise were four different fills (orange, mid
   blue, green, blue) carrying near-black labels — 1.5:1 to 3:1. One fill,
   white label, and the sequence reads as a sequence. */
[style*="border-radius:50%"][style*="background:var(--blue)"],
[style*="border-radius:50%"][style*="background:var(--green)"],
[style*="border-radius:50%"][style*="background:var(--purple)"],
[style*="border-radius:50%"][style*="background:var(--accent)"],
[style*="border-radius:50%"][style*="background:var(--cyan)"] {
  background: var(--ds-primary) !important;
  color: #fff !important;
}

/* Small text on the soft tints was landing between 4.1 and 4.3 — the deeper
   semantic tones clear 4.5 against them. */
.dx-pay-warn-text, .dx-pay-warn-head,
[style*="background:rgba(249,115,22,.1)"] , [style*="background:rgba(249, 115, 22, 0.1)"] {
  color: var(--ds-ink-2) !important;
}
.al-notice-error, .al-alert-error, .dx-warn-strong,
[style*="color:var(--red)"] { color: var(--ds-error) !important; }

/* Remaining orange-fill labels that are small text. */
.al-badge-icon, .al-hero-badge .al-badge-icon,
[style*="background:var(--accent)"][style*="font-size:1"],
.dx-pop-badge, .al-popular-badge {
  background: var(--ds-accent-deep, #C44A00) !important;
  color: #fff !important;
}
.al-section-title span, .dx-sec-title span,
h1 span.highlight, h2 span { color: var(--ds-accent-text) !important; }

/* Highest-specificity closers. `:root:root` is (0,2,0) on its own, so these
   land above every earlier attribute rule regardless of file order. */
:root:root [style*="border-radius:50%"][style*="color:#0a0c0f"],
:root:root [style*="border-radius:50%"][style*="background:var(--blue)"],
:root:root [style*="border-radius:50%"][style*="background:var(--green)"],
:root:root [style*="border-radius:50%"][style*="background:var(--purple)"],
:root:root [style*="border-radius:50%"][style*="background:var(--accent)"] {
  background: var(--ds-primary) !important;
  color: #fff !important;
}
/* Orange as a heading accent on a tinted band needs the deeper tone to clear
   3:1 for large text. */
:root:root h1 span[style*="var(--accent)"],
:root:root h2 span[style*="var(--accent)"],
:root:root h3 span[style*="var(--accent)"],
:root:root .dx-dealer-band-title span,
:root:root .al-section-title span,
:root:root .dx-sec-title span { color: var(--ds-accent-text) !important; }

/* Orange text sitting on an orange tint is 4.18:1 — one step deeper clears AA
   (5.3:1) while staying in the same hue. */
:root:root [style*="rgba(249,115,22,.1)"] [style*="color:var(--accent)"],
:root:root [style*="rgba(249,115,22,.1)"] a,
:root:root [style*="rgba(249,101,1,.1)"] a,
:root:root .dx-contact-tile a,
:root:root .al-contact-value { color: #A93F00 !important; }

/* =====================================================================
   19. EMPTY STATES
   ---------------------------------------------------------------------
   `.al-empty-state i` was styled as a 78px decorative circle, which also
   caught the small icon inside the "Clear Filters" button sitting in the
   same block — turning the button into a large orange slab wrapped round a
   giant X. The circle now belongs to the illustration icon only.
   ===================================================================== */
.al-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 48px 24px !important;
  text-align: center;
  background: var(--ds-surface-2) !important;
  border: 1px dashed var(--ds-border-strong) !important;
  border-radius: var(--ds-r-lg) !important;
  color: var(--ds-ink-3) !important;
}
.al-empty-state h2, .al-empty-state h3 {
  margin: 4px 0 6px !important;
  font-size: var(--ds-fs-h3) !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
}
.al-empty-state p {
  margin: 0 0 18px !important;
  font-size: var(--ds-fs-sm) !important;
  color: var(--ds-ink-3) !important;
  max-width: 44ch;
}
/* Only the illustration icon gets the circle. */
.al-empty-state > i, .al-empty-icon, .al-empty > i, .dx-empty > i {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 66px !important; height: 66px !important;
  margin-bottom: 6px !important;
  border-radius: 50% !important;
  font-size: 28px !important;
  background: var(--ds-surface-3) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-3) !important;
}
/* Icons inside a control in an empty state stay icon-sized. */
:root:root .al-empty-state a i,
:root:root .al-empty-state button i,
:root:root .al-empty-state .al-btn i,
:root:root .al-empty a i, :root:root .dx-empty a i {
  display: inline-flex !important;
  width: auto !important; height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 16px !important;
  color: inherit !important;
}
/* The "Clear Filters" link is a button — give it the button treatment. */
:root:root .al-empty-state a[href] {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ds-ctl-md);
  padding: 10px 20px !important;
  background: var(--ds-primary) !important;
  color: #fff !important;
  border-radius: var(--ds-r-sm) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  width: auto !important;
}
:root:root .al-empty-state a[href]:hover { background: var(--ds-primary-hover) !important; }

/* Orange text on an orange-tinted card is 4.18:1. Matched on the exact inline
   signature the template writes, since the tint lives on a distant ancestor. */
:root:root [style*="font-size:13px;color:var(--accent);word-break"],
:root:root .dx-contact-value, :root:root .al-contact-value {
  color: #A93F00 !important;
}

/* The 404 numeral is decoration, but at 1.5:1 it read as a rendering fault
   rather than a deliberate graphic. */
:root:root [style*="font-size:80px"][style*="color:var(--border2)"] {
  color: var(--ds-ink-3) !important;
  opacity: .55;
}

/* The call/WhatsApp pill on the Contact page: orange label on a 10% orange
   tint was 4.18:1. Same hue, one step deeper (5.3:1). */
:root:root a[style*="background:rgba(249,115,22,.10)"],
:root:root a[style*="background:rgba(249,115,22,.1)"],
:root:root a[style*="background:rgba(249,101,1,.10)"] { color: #A93F00 !important; }

/* Admin bottom navigation — the labels were 10.5px, below the readable
   floor, and the bar carried a heavy dark-theme shadow. */
:root:root .dx-admin-bnav {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid var(--ds-border) !important;
  box-shadow: 0 -4px 20px rgba(13,27,46,.08) !important;
}
:root:root .dx-admin-bnav a {
  font-size: var(--ds-fs-label) !important;
  font-weight: 700 !important;
  color: var(--ds-ink-3) !important;
  min-height: 58px;
}
:root:root .dx-admin-bnav a i { font-size: 20px !important; }
:root:root .dx-admin-bnav a.active { color: var(--ds-primary) !important; }
:root:root .dx-admin-bnav a .dx-bnav-badge {
  background: var(--ds-accent-deep, #C44A00) !important; color: #fff !important;
}

/* The sign-in / register / recover modals are rendered from footer.php, so
   these labels appear on every page, not just Register as Dealer. They were
   11.5px uppercase; the account-type card descriptions were 11px. */
:root:root .al-modal-label {
  font-size: var(--ds-fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  color: var(--ds-ink-3) !important;
  margin-bottom: 6px !important;
}
:root:root .al-modal-label span { font-size: var(--ds-fs-label) !important; }
:root:root .al-acct-desc {
  font-size: var(--ds-fs-caption) !important;
  color: var(--ds-ink-3) !important;
}
:root:root .al-acct-card {
  border-radius: var(--ds-r-md) !important;
  border: 1px solid var(--ds-border) !important;
}
:root:root .al-acct-card.selected {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ds-primary) !important;
}
:root:root .al-modal-input {
  min-height: var(--ds-ctl-lg);
  border-radius: var(--ds-r-sm) !important;
  border: 1px solid var(--ds-border-strong) !important;
  font-size: 15px !important;
}
:root:root .al-modal-input:focus {
  border-color: var(--ds-primary) !important;
  box-shadow: var(--ds-ring) !important;
  outline: none !important;
}

/* Register-as-Dealer benefits grid.
   The page carries its own compaction rules at
   `body.dx-regpage main .al-container div[style*="repeat(3,1fr)"] > div > div:last-child`
   — roughly (0,5,4) — which squeezed the descriptions to 11.5px so three
   cards could become two 146px columns on a phone. One column below 560px
   gives them room, and the text returns to the readable floor. These
   selectors mirror that specificity, plus `:root:root`, so they win. */
:root:root body.dx-regpage main .al-container div[style*="repeat(3,1fr)"] > div > div:last-child {
  font-size: var(--ds-fs-sm) !important;
  line-height: 1.55 !important;
  color: var(--ds-ink-2) !important;
}
@media (max-width: 560px) {
  :root:root body.dx-regpage main .al-container div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  :root:root body.dx-regpage main .al-container div[style*="repeat(3,1fr)"] > div {
    flex-direction: row !important;
    align-items: center;
    padding: 14px !important;
  }
}
/* The "100% FREE" pill used the old mint tint and sat below the type floor. */
:root:root [style*="rgba(61,214,140,.1)"],
:root:root [style*="rgba(61,214,140,.08)"] {
  background: var(--ds-success-soft) !important;
  border-color: var(--ds-success-line) !important;
  color: var(--ds-success) !important;
  font-size: var(--ds-fs-label) !important;
}

/* The "100% FREE" pill: inline 13px, pulled to 11.5px by another page-scoped
   rule. Triple :root plus the page body class clears it. */
:root:root:root body.dx-regpage [style*="rgba(61,214,140,.1)"] {
  font-size: var(--ds-fs-caption) !important;
  background: var(--ds-success-soft) !important;
  border-color: var(--ds-success-line) !important;
  color: var(--ds-success) !important;
}