/* ============================================================
   vroomr components — canonical, stateful, theme-proof
   ============================================================
   Two parts:
     PART 1  canonical .vr-* components (use these for new work)
     PART 2  state retrofit for the existing .cl-* components
             (adds the hover/active/focus/disabled states the
              audit found missing, without rewriting markup)
   ============================================================ */

/* ============================================================
   PART 0 — theme isolation
   The WP theme (Astra) and Elementor inject type, decoration and
   shadow onto bare elements. Neutralise inside our scopes only.
   ============================================================ */

.vr-scope,
.vr-scope *,
.vr-scope *::before,
.vr-scope *::after {
  box-sizing: border-box;
}

.vr-scope {
  font-family: var(--v-font);
  color: var(--v-body);
}

/* Theme adds underlines + inset shadows to controls; strip inside our UI. */
.cl-chrome :is(a, button):where(:hover, :focus, :active),
.cl-home :is(a, button):where(:hover, :focus, :active),
.cl-detail :is(a, button):where(:hover, :focus, :active),
.vr-scope :is(a, button):where(:hover, :focus, :active) {
  text-decoration: none;
}

.vr-scope :is(button, input, select, textarea) {
  font-family: inherit;
}

/* Astra's scroll-to-top floats over our pages in the theme's own blue
   (#046bd2) with a 2px radius — off-brand chrome that belongs to no component
   in this system, and Turo ships no equivalent control. */
body.carlot-home-page #ast-scroll-top,
body.carlot-detail-page #ast-scroll-top,
body.vroomr-design-system #ast-scroll-top {
  display: none !important;
}

/* ------------------------------------------------------------
   Universal keyboard focus ring.
   The audit found zero :focus-visible rules sitewide, so keyboard
   users had no visible focus at all. This is the safety net; it
   only shows for keyboard/AT users, never on mouse click.
   ------------------------------------------------------------ */
.cl-chrome :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cl-home :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cl-detail :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.vr-scope :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: 2px;
  box-shadow: var(--v-focus-ring);
  border-radius: var(--v-r-sm);
}

/* Underline tabs already use a bottom stroke as the selected mark.
   The universal ring + radius turns Address/About into a purple pill
   on click (Safari treats button click as :focus-visible). */
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:focus,
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:focus-visible,
.vr-tabs:not(.vr-tabs--pill) .vr-tab:focus,
.vr-tabs:not(.vr-tabs--pill) .vr-tab:focus-visible {
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

.cl-detail__tablist--pill .cl-detail__tab:focus,
.cl-detail__tablist--pill .cl-detail__tab:focus-visible,
.vr-tabs--pill .vr-tab:focus,
.vr-tabs--pill .vr-tab:focus-visible {
  outline: none;
}

/* Dark surfaces need the inverse ring to stay visible */
.cl-detail__lightbox :is(a, button):focus-visible,
.cl-chrome__promo :is(a, button):focus-visible {
  outline-color: #fff;
  box-shadow: var(--v-focus-ring-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .vr-scope *,
  .cl-chrome *,
  .cl-home *,
  .cl-detail * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   PART 1 — canonical components
   ============================================================ */

/* ---------- Button ---------------------------------------- */

.vr-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--v-h-lg);
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--v-r);
  background: transparent;
  font-family: var(--v-font);
  font-size: var(--v-fs);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--v-t), border-color var(--v-t), color var(--v-t),
    box-shadow var(--v-t), transform var(--v-t);
  user-select: none;
  position: relative;
}

.vr-btn:active,
.vr-btn.is-pressed {
  transform: translateY(1px);
}

/* Primary */
.vr-btn--primary {
  background: var(--v-accent);
  border-color: var(--v-accent);
  color: var(--v-accent-ink);
}

.vr-btn--primary:hover,
.vr-btn--primary.is-hover {
  background: var(--v-accent-hover);
  border-color: var(--v-accent-hover);
}

.vr-btn--primary:active,
.vr-btn--primary.is-pressed {
  background: var(--v-accent-active);
  border-color: var(--v-accent-active);
}

/* Secondary — outlined */
.vr-btn--secondary {
  background: var(--v-surface);
  border-color: var(--v-border);
  color: var(--v-ink);
}

.vr-btn--secondary:hover,
.vr-btn--secondary.is-hover {
  border-color: var(--v-border-hover);
  background: var(--v-fill);
}

.vr-btn--secondary:active,
.vr-btn--secondary.is-pressed {
  background: var(--v-fill-hover);
}

/* Subtle — filled grey, no border */
.vr-btn--subtle {
  background: var(--v-fill);
  border-color: transparent;
  color: var(--v-ink);
}

.vr-btn--subtle:hover,
.vr-btn--subtle.is-hover {
  background: var(--v-fill-hover);
}

.vr-btn--subtle:active,
.vr-btn--subtle.is-pressed {
  background: var(--v-fill-active);
}

/* Ink — solid black */
.vr-btn--ink {
  background: var(--v-ink);
  border-color: var(--v-ink);
  color: #fff;
}

.vr-btn--ink:hover,
.vr-btn--ink.is-hover {
  background: #2a2a2e;
  border-color: #2a2a2e;
}

/* Quiet — text only */
.vr-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--v-ink);
  padding: 0 12px;
}

.vr-btn--quiet:hover,
.vr-btn--quiet.is-hover {
  background: var(--v-fill);
}

/* WhatsApp */
.vr-btn--whatsapp {
  background: var(--v-surface);
  border-color: var(--v-border);
  color: var(--v-ink);
}

.vr-btn--whatsapp:hover,
.vr-btn--whatsapp.is-hover {
  border-color: #25d366;
  background: #f2fdf6;
}

.vr-btn--whatsapp .bi,
.vr-btn--whatsapp svg {
  color: #25d366;
}

/* Danger */
.vr-btn--danger {
  background: var(--v-neg-ink);
  border-color: var(--v-neg-ink);
  color: #fff;
}

.vr-btn--danger:hover,
.vr-btn--danger.is-hover {
  background: #8e0e2e;
  border-color: #8e0e2e;
}

/* Sizes — Turo ships two: 32px small and 48px primary */
.vr-btn--sm {
  min-height: var(--v-h-sm);
  padding: 0 11px;
  font-size: var(--v-fs-xs);
  line-height: 16px;
}

.vr-btn--md {
  min-height: var(--v-h);
  padding: 0 14px;
  font-size: var(--v-fs-sm);
}

/* Pill shape for the AutoTrader-derived home search controls. Turo's own
   product uses 8px everywhere, so this is opt-in. */
.vr-btn--pill {
  border-radius: var(--v-r-pill);
}

.vr-btn--block {
  display: flex;
  width: 100%;
}

/* Disabled — applies to real buttons and aria-disabled links */
.vr-btn:disabled,
.vr-btn[disabled],
.vr-btn[aria-disabled="true"] {
  background: var(--v-fill);
  border-color: var(--v-line);
  color: var(--v-disabled-ink);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* Loading — hides the label and spins a ring in place */
.vr-btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.vr-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: vr-spin 600ms linear infinite;
  color: var(--v-accent-ink);
}

.vr-btn--secondary[aria-busy="true"]::after,
.vr-btn--subtle[aria-busy="true"]::after,
.vr-btn--quiet[aria-busy="true"]::after,
.vr-btn--whatsapp[aria-busy="true"]::after {
  color: var(--v-ink);
}

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

/* ---------- Icon button ----------------------------------- */

.vr-iconbtn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v-h-sm);
  height: var(--v-h-sm);
  padding: 0;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r);
  background: var(--v-surface);
  color: var(--v-subtle);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--v-t), border-color var(--v-t), color var(--v-t),
    box-shadow var(--v-t);
}

.vr-iconbtn:hover,
.vr-iconbtn.is-hover {
  background: var(--v-fill);
  border-color: var(--v-border-hover);
}

.vr-iconbtn:active,
.vr-iconbtn.is-pressed {
  background: var(--v-fill-hover);
}

.vr-iconbtn--lg {
  width: var(--v-h-lg);
  height: var(--v-h-lg);
  font-size: 18px;
}

/* Circles are still right for controls floating on photos (mobile back/share) */
.vr-iconbtn--round {
  border-radius: var(--v-r-pill);
}

.vr-iconbtn--floating {
  border-color: transparent;
  box-shadow: var(--v-shadow-sm);
}

.vr-iconbtn--floating:hover {
  box-shadow: var(--v-shadow);
}

/* Pressed / toggled — paired with aria-pressed, not colour alone */
.vr-iconbtn[aria-pressed="true"] {
  color: var(--v-neg-ink);
}

.vr-iconbtn:disabled,
.vr-iconbtn[disabled] {
  color: var(--v-disabled-ink);
  background: var(--v-fill);
  border-color: var(--v-line);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Chip ------------------------------------------ */

.vr-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--v-h);
  padding: 0 14px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-md);
  background: var(--v-surface);
  color: var(--v-ink);
  font-family: var(--v-font);
  font-size: var(--v-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--v-t), border-color var(--v-t), color var(--v-t);
}

.vr-chip:hover,
.vr-chip.is-hover {
  border-color: var(--v-border-hover);
  background: var(--v-fill);
}

.vr-chip:active,
.vr-chip.is-pressed {
  background: var(--v-fill-hover);
}

/* Selected — drives off aria-selected/aria-pressed so state is
   exposed to assistive tech, with .is-active kept for legacy JS. */
.vr-chip[aria-selected="true"],
.vr-chip[aria-pressed="true"],
.vr-chip.is-active {
  background: var(--v-ink);
  border-color: var(--v-ink);
  color: #fff;
}

.vr-chip:disabled,
.vr-chip[disabled] {
  color: var(--v-disabled-ink);
  background: var(--v-fill);
  border-color: var(--v-line);
  cursor: not-allowed;
  pointer-events: none;
}

.vr-chip--pill {
  border-radius: var(--v-r-pill);
}

/* Static, non-interactive spec chip */
.vr-chip--static {
  background: var(--v-fill);
  border-color: transparent;
  font-weight: 400;
  cursor: default;
}

.vr-chip--static:hover {
  background: var(--v-fill);
  border-color: transparent;
}

/* ---------- Badge ----------------------------------------- */

.vr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--v-r-sm);
  background: var(--v-fill);
  color: var(--v-ink);
  font-family: var(--v-font);
  font-size: var(--v-fs-xs);
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.vr-badge--positive {
  background: var(--v-pos-bg);
  color: var(--v-pos-ink);
}

.vr-badge--warning {
  background: var(--v-warn-bg);
  color: var(--v-warn-ink);
}

.vr-badge--negative {
  background: var(--v-neg-bg);
  color: var(--v-neg-ink);
}

.vr-badge--info {
  background: var(--v-info-bg);
  color: var(--v-info-ink);
}

.vr-badge--accent {
  background: var(--v-accent);
  color: #fff;
}

.vr-badge--pill {
  border-radius: var(--v-r-pill);
}

/* ---------- Form field ------------------------------------ */

.vr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vr-field__label {
  font-size: var(--v-fs-sm);
  font-weight: 600;
  color: var(--v-ink);
}

.vr-field__hint {
  font-size: var(--v-fs-xs);
  color: var(--v-muted);
}

.vr-field__error {
  font-size: var(--v-fs-xs);
  font-weight: 600;
  color: var(--v-neg-ink);
}

.vr-input.vr-input,
.vr-select.vr-select,
.vr-textarea.vr-textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--v-h-lg);
  padding: 11px 14px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r);
  background: var(--v-surface);
  color: var(--v-ink);
  font-family: var(--v-font);
  font-size: var(--v-fs);
  line-height: 1.4;
  transition: border-color var(--v-t), box-shadow var(--v-t);
}

.vr-input.vr-input::placeholder,
.vr-textarea.vr-textarea::placeholder {
  color: var(--v-muted);
}

.vr-input.vr-input:hover,
.vr-select.vr-select:hover,
.vr-textarea.vr-textarea:hover,
.vr-input.vr-input.is-hover,
.vr-select.vr-select.is-hover,
.vr-textarea.vr-textarea.is-hover {
  border-color: var(--v-border-hover);
}

.vr-input.vr-input:focus,
.vr-select.vr-select:focus,
.vr-textarea.vr-textarea:focus,
.vr-input.vr-input.is-focus,
.vr-select.vr-select.is-focus,
.vr-textarea.vr-textarea.is-focus {
  outline: none;
  border-color: var(--v-accent);
  box-shadow: var(--v-focus-ring);
}

.vr-textarea.vr-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Native select needs its own chevron once appearance is stripped */
.vr-select.vr-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23414143' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Invalid */
.vr-input.vr-input[aria-invalid="true"],
.vr-select.vr-select[aria-invalid="true"],
.vr-textarea.vr-textarea[aria-invalid="true"] {
  border-color: var(--v-neg-ink);
}

.vr-input.vr-input[aria-invalid="true"]:focus,
.vr-select.vr-select[aria-invalid="true"]:focus,
.vr-textarea.vr-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179, 18, 58, 0.22);
}

/* Disabled + readonly — must look unmistakably inert */
.vr-input.vr-input:disabled,
.vr-select.vr-select:disabled,
.vr-textarea.vr-textarea:disabled,
.vr-input.vr-input[readonly] {
  background: var(--v-fill);
  border-color: var(--v-line);
  color: var(--v-disabled-ink);
  cursor: not-allowed;
}

.vr-input.vr-input:disabled::placeholder,
.vr-textarea.vr-textarea:disabled::placeholder {
  color: var(--v-disabled-ink);
}

/* ---------- Checkbox + radio ------------------------------ */

.vr-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--v-fs-sm);
  color: var(--v-ink);
  cursor: pointer;
}

.vr-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-sm);
  background: var(--v-surface);
  cursor: pointer;
  transition: background var(--v-t), border-color var(--v-t);
  flex: 0 0 auto;
}

.vr-check input[type="radio"] {
  border-radius: 50%;
}

.vr-check input:hover {
  border-color: var(--v-border-hover);
}

.vr-check input:checked {
  background: var(--v-accent)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
  border-color: var(--v-accent);
}

.vr-check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--v-surface);
}

.vr-check input:disabled {
  background: var(--v-fill);
  border-color: var(--v-line);
  cursor: not-allowed;
}

.vr-check:has(input:disabled) {
  color: var(--v-disabled-ink);
  cursor: not-allowed;
}

/* ---------- Switch ---------------------------------------- */

.vr-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--v-fs-sm);
  color: var(--v-ink);
}

.vr-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-border);
  cursor: pointer;
  transition: background var(--v-t);
  flex: 0 0 auto;
}

.vr-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--v-t);
}

.vr-switch input:checked {
  background: var(--v-accent);
}

.vr-switch input:checked::after {
  transform: translateX(18px);
}

.vr-switch input:disabled {
  background: var(--v-line);
  cursor: not-allowed;
}

/* ---------- Tabs ------------------------------------------ */

.vr-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--v-line);
}

.vr-tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--v-muted);
  font-family: var(--v-font);
  font-size: var(--v-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--v-t), border-color var(--v-t);
}

.vr-tab:hover,
.vr-tab.is-hover {
  color: var(--v-ink);
  border-bottom-color: var(--v-border);
}

.vr-tab[aria-selected="true"],
.vr-tab.is-active {
  color: var(--v-ink);
  border-bottom-color: var(--v-ink);
}

.vr-tab:disabled {
  color: var(--v-disabled-ink);
  cursor: not-allowed;
}

/* Segmented pill variant */
.vr-tabs--pill {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--v-r-md);
  background: var(--v-fill);
}

.vr-tabs--pill .vr-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--v-h-sm);
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: var(--v-r);
  font-size: var(--v-fs-sm);
  font-weight: 500;
  line-height: 20px;
}

.vr-tabs--pill .vr-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: transparent;
}

.vr-tabs--pill .vr-tab[aria-selected="true"],
.vr-tabs--pill .vr-tab.is-active {
  background: var(--v-surface);
  color: var(--v-ink);
  font-weight: 700;
  box-shadow: var(--v-shadow-sm);
}

/* ---------- Card ------------------------------------------ */

.vr-card {
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-lg);
  overflow: hidden;
}

.vr-card--pad {
  padding: 20px;
}

.vr-card--shadow {
  border-color: transparent;
  box-shadow: var(--v-shadow);
}

/* Whole-card link */
a.vr-card,
.vr-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--v-t), transform var(--v-t), border-color var(--v-t);
}

a.vr-card:hover,
.vr-card--link:hover {
  border-color: var(--v-border);
  box-shadow: var(--v-shadow);
}

/* ---------- Notice ---------------------------------------- */

.vr-notice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--v-r);
  background: var(--v-fill);
  color: var(--v-body);
  font-size: var(--v-fs-sm);
  line-height: 1.45;
}

.vr-notice--positive {
  background: var(--v-pos-bg);
  color: var(--v-pos-ink);
}

.vr-notice--warning {
  background: var(--v-warn-bg);
  color: var(--v-warn-ink);
}

.vr-notice--negative {
  background: var(--v-neg-bg);
  color: var(--v-neg-ink);
}

.vr-notice--info {
  background: var(--v-info-bg);
  color: var(--v-info-ink);
}

/* ---------- Avatar ---------------------------------------- */

.vr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v-fill);
  color: var(--v-subtle);
  font-size: var(--v-fs-sm);
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}

.vr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--v-fs-xs);
}

.vr-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--v-fs);
}

/* ---------- Range ----------------------------------------- */

/* Attribute-qualified because Astra styles input[type="range"] and its thumb
   at (0,1,1), which outranks a single class. The input box is as tall as the
   thumb so the thumb isn't clipped; the visible line is the track pseudo. */
input[type="range"].vr-range {
  --vr-range-pct: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 22px;
  margin: 10px 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"].vr-range:focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: 3px;
  border-radius: var(--v-r-pill);
}

input[type="range"].vr-range::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: var(--v-r-pill);
  background: linear-gradient(
    to right,
    var(--v-accent) 0,
    var(--v-accent) var(--vr-range-pct),
    var(--v-border) var(--vr-range-pct),
    var(--v-border) 100%
  );
  box-shadow: none;
}

input[type="range"].vr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Centres the 22px thumb on the 4px track */
  margin-top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  box-shadow: var(--v-shadow-sm);
  cursor: grab;
  transition: transform var(--v-t);
}

input[type="range"].vr-range::-webkit-slider-thumb:hover {
  transform: scale(1.08);
}

input[type="range"].vr-range::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-border);
  box-shadow: none;
}

input[type="range"].vr-range::-moz-range-progress {
  height: 4px;
  border: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-accent);
}

input[type="range"].vr-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  box-shadow: var(--v-shadow-sm);
  cursor: grab;
}

input[type="range"].vr-range:disabled {
  cursor: not-allowed;
}

input[type="range"].vr-range:disabled::-webkit-slider-runnable-track {
  background: var(--v-line);
}

input[type="range"].vr-range:disabled::-moz-range-progress {
  background: var(--v-line);
}

input[type="range"].vr-range:disabled::-webkit-slider-thumb {
  background: var(--v-fill);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- Skeleton -------------------------------------- */

.vr-skeleton {
  display: block;
  border-radius: var(--v-r-sm);
  background: linear-gradient(
    90deg,
    var(--v-fill) 25%,
    #ececec 37%,
    var(--v-fill) 63%
  );
  background-size: 400% 100%;
  animation: vr-shimmer 1.4s ease infinite;
}

@keyframes vr-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.vr-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--v-border);
  border-top-color: var(--v-accent);
  animation: vr-spin 600ms linear infinite;
}

/* ---------- Link ------------------------------------------ */

.vr-link {
  color: var(--v-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--v-t);
}

.vr-link:hover {
  color: var(--v-accent);
  text-decoration: underline;
}

.vr-link--muted {
  color: var(--v-muted);
}

/* ============================================================
   PART 2 — state retrofit for existing components
   The audit found most of these had no hover, no pressed and no
   disabled state. Definitions live here so all three pages share
   one behaviour instead of drifting again.
   ============================================================ */

/* ---- Outlined / ghost buttons ---------------------------- */
.cl-chrome__ghost,
.cl-home__ghost,
.cl-detail__btn--ghost,
.cl-detail__btn--wa {
  transition: background var(--v-t), border-color var(--v-t), color var(--v-t);
}

.cl-chrome__ghost:hover,
.cl-home__ghost:hover,
.cl-detail__btn--ghost:hover {
  border-color: var(--v-border-hover);
  background: var(--v-fill);
}

.cl-chrome__ghost:active,
.cl-home__ghost:active,
.cl-detail__btn--ghost:active {
  background: var(--v-fill-hover);
}

.cl-detail__btn--wa:hover {
  border-color: #25d366;
  background: #f2fdf6;
}

/* ---- Primary buttons ------------------------------------- */
.cl-home__sell-btn,
.cl-detail__btn--primary,
.cl-detail__btn--sticky {
  transition: background var(--v-t), border-color var(--v-t), box-shadow var(--v-t);
}

.cl-detail__btn--primary:hover,
.cl-detail__btn--sticky:hover {
  background: var(--v-accent-hover);
  border-color: var(--v-accent-hover);
}

.cl-detail__btn--primary:active,
.cl-detail__btn--sticky:active {
  background: var(--v-accent-active);
  border-color: var(--v-accent-active);
}

.cl-home__sell-btn:hover {
  background: #2a2a2e;
}

/* ---- Disabled + loading for every legacy button ---------- */
.cl-chrome__ghost:disabled,
.cl-home__ghost:disabled,
.cl-home__sell-btn:disabled,
.cl-home__search-submit:disabled,
.cl-detail__btn:disabled,
.cl-detail__btn[disabled],
.cl-detail__btn[aria-disabled="true"] {
  background: var(--v-fill);
  border-color: var(--v-line);
  color: var(--v-disabled-ink);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.cl-detail__btn[aria-busy="true"],
.cl-home__search-submit[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.cl-detail__btn[aria-busy="true"]::after,
.cl-home__search-submit[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: transparent;
  animation: vr-spin 600ms linear infinite;
}

.cl-detail__btn--ghost[aria-busy="true"]::after,
.cl-detail__btn--wa[aria-busy="true"]::after {
  border-color: var(--v-ink);
  border-top-color: transparent;
}

/* ---- Icon buttons --------------------------------------------
   Astra ships `button { padding: 18px 30px }`. Our icon buttons set a fixed
   width but no padding, and horizontal padding floors an element's used width,
   so every one of them was rendering ~60px wide — circles became ellipses.
   Resetting padding here fixes the whole family at once. */
.cl-chrome__icon,
.cl-home__icon-btn,
.cl-home__rail-btn,
.cl-home__fav,
.cl-detail__round,
.cl-detail__fav,
.cl-detail__fav--desk,
.cl-detail__lb-close,
.cl-detail__lb-nav button,
.cl-detail__tile {
  padding: 0;
}

/* ---- Round icon buttons ---------------------------------- */
.cl-chrome__icon,
.cl-home__icon-btn,
.cl-home__rail-btn,
.cl-home__fav,
.cl-detail__round,
.cl-detail__fav {
  transition: background var(--v-t), border-color var(--v-t), color var(--v-t),
    box-shadow var(--v-t);
}

.cl-chrome__icon:hover,
.cl-home__icon-btn:hover,
.cl-home__rail-btn:hover {
  background: var(--v-fill);
  border-color: var(--v-border-hover);
}

.cl-home__fav:hover,
.cl-detail__round:hover,
.cl-detail__fav:hover {
  background: #fff;
  box-shadow: var(--v-shadow);
}

.cl-detail__header-actions .cl-detail__icon-btn:hover,
.cl-detail__header-actions .cl-detail__icon-btn:focus,
.cl-detail__header-actions .cl-detail__fav:hover,
.cl-detail__header-actions .cl-detail__fav:focus {
  background: var(--v-fill);
  box-shadow: none;
  color: var(--v-ink);
}

/* Astra styles `button:hover, button:focus { color: #fff }`, which turned the
   heart white against its own white field — invisible until you moved away.
   The saved-state rule below still wins for saved cars, as it comes later. */
.cl-home__fav:hover,
.cl-home__fav:focus,
.cl-detail__fav:hover,
.cl-detail__fav:focus {
  color: var(--v-subtle);
}

.cl-chrome__icon:active,
.cl-home__icon-btn:active,
.cl-home__rail-btn:active,
.cl-home__fav:active,
.cl-detail__round:active,
.cl-detail__fav:active {
  transform: scale(0.94);
}

.cl-home__rail-btn:disabled,
.cl-home__icon-btn:disabled {
  color: var(--v-disabled-ink);
  background: var(--v-fill);
  cursor: not-allowed;
  pointer-events: none;
}

/* Favourite toggles: pair colour with aria-pressed so the state
   isn't communicated by colour alone. */
.cl-home__fav[aria-pressed="true"],
.cl-detail__fav[aria-pressed="true"],
.cl-home__fav.is-on,
.cl-detail__fav.is-on {
  color: var(--v-neg-ink);
}

/* ---- Chips ----------------------------------------------- */
.cl-home__chip {
  transition: background var(--v-t), color var(--v-t);
}

.cl-home__chip:hover {
  background: var(--v-fill-hover, #ebebeb);
}

.cl-home__chip:active {
  background: var(--v-fill-active, #e0e0e0);
}

.cl-home__chip.is-active,
.cl-home__chip[aria-selected="true"] {
  background: var(--v-accent-soft, #eeeaff);
  color: var(--v-accent, #593cfb);
}

.cl-home__chip.is-active:hover,
.cl-home__chip[aria-selected="true"]:hover {
  background: #e4dcff;
}

/* ---- Tabs ------------------------------------------------ */
.cl-detail__tab {
  transition: color var(--v-t), background var(--v-t), border-color var(--v-t);
}

.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab {
  box-shadow: none;
  border-radius: 0;
}

.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:hover {
  color: var(--v-ink);
}

.cl-detail__tablist--pill .cl-detail__tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--v-ink);
}

/* Drive tab appearance off aria-selected as well as .is-active */
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab[aria-selected="true"] {
  color: var(--v-ink);
  border-bottom-color: var(--v-ink);
}

.cl-detail__tablist--pill .cl-detail__tab[aria-selected="true"] {
  background: var(--v-surface);
  color: var(--v-ink);
  box-shadow: var(--v-shadow-sm);
}

/* ---- Gallery tiles + view-all ---------------------------- */
.cl-detail__tile,
.cl-detail__view-all,
.cl-detail__strip-item {
  transition: opacity var(--v-t), box-shadow var(--v-t), transform var(--v-t);
  cursor: pointer;
}

.cl-detail__tile:hover,
.cl-detail__strip-item:hover {
  opacity: 0.92;
}

.cl-detail__view-all:hover {
  box-shadow: var(--v-shadow);
}

/* ---- Cards ----------------------------------------------- */
/* Turo listing hover: whole card fades to 0.9. No lift, no shadow. */
.cl-home__card,
.cl-detail__rec {
  transition: opacity 0.15s ease-in-out;
}

@media (hover: hover) {
  .cl-home__card:hover,
  .cl-detail__rec:hover {
    border-color: transparent;
    box-shadow: none;
    opacity: 0.9;
    color: inherit;
  }
}

/* ---- Disclosures ----------------------------------------- */
.cl-detail__disclosure {
  transition: border-color var(--v-t);
}

.cl-detail__disclosure:hover {
  border-color: var(--v-border-hover);
}

.cl-detail__disclosure summary {
  transition: background var(--v-t), color var(--v-t);
}

.cl-detail__disclosure summary:hover,
.cl-detail__disclosure summary:focus,
.cl-detail__disclosure summary.is-hover {
  background: var(--v-fill);
  color: var(--cl-ink);
  border-color: transparent;
}

.cl-detail__disclosure summary:active,
.cl-detail__disclosure summary.is-pressed {
  background: var(--v-fill-hover);
  color: var(--cl-ink);
}

/* ---- Form fields ----------------------------------------- */
.cl-detail__form :is(input, select, textarea),
.cl-home__drawer select {
  transition: border-color var(--v-t), box-shadow var(--v-t);
}

.cl-detail__form :is(input, select, textarea):hover:not(:disabled) {
  border-color: var(--v-border-hover);
}

.cl-detail__form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--v-accent);
  box-shadow: var(--v-focus-ring);
}

.cl-detail__form :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--v-neg-ink);
}

/* The old rule set disabled selects to opacity:1, making them
   indistinguishable from enabled ones. */
.cl-detail__form :is(input, select, textarea):disabled,
.cl-home__drawer select:disabled,
.cl-home__drawer .cl-home__field select:disabled {
  background: var(--v-fill) !important;
  border-color: var(--v-line) !important;
  color: var(--v-disabled-ink) !important;
  cursor: not-allowed !important;
  opacity: 1;
}

/* ---- Search bar focus. The pill is one control, so the ring goes on the whole
        bar, never on the text box inside it. Outline rather than box-shadow:
        this rule used to set box-shadow and so replaced the pill's elevation,
        flattening it while focused. :focus-within rather than :focus-visible so
        a click into the field also reads as active. */
.cl-home__search:focus-within {
  outline: 2px solid var(--v-accent);
  outline-offset: 2px;
}

/* ---- Lightbox controls: were rgba(255,255,255,0.16) on near
        black, far too low contrast to find. -------------------- */
.cl-detail__lb-close,
.cl-detail__lb-nav button {
  background: rgba(255, 255, 255, 0.9);
  color: var(--v-ink);
  transition: background var(--v-t), transform var(--v-t);
}

.cl-detail__lb-close:hover,
.cl-detail__lb-nav button:hover {
  background: #fff;
}

.cl-detail__lb-close:active,
.cl-detail__lb-nav button:active {
  transform: scale(0.94);
}

/* ---- Links ----------------------------------------------- */
.cl-detail__inline-link,
.cl-detail__source a,
.cl-detail__back {
  transition: color var(--v-t);
}

.cl-detail__inline-link:hover,
.cl-detail__source a:hover {
  color: var(--v-accent);
}

/* ------------------------------------------------------------
   Forced-state hooks (.is-hover / .is-pressed / .is-focus) let the
   design system page render every state at once. They mirror the
   real pseudo-class rules above, so states can't drift apart.
   ------------------------------------------------------------ */
.vr-scope .is-focus {
  outline: 2px solid var(--v-accent);
  outline-offset: 2px;
  box-shadow: var(--v-focus-ring);
}

/* ==========================================================
   Hover / focus paint guard

   Astra ships this, inline, on every page:

     button:hover, button:focus, .ast-button:hover, input#submit:hover, ... {
       color: #fff;
       background-color: var(--ast-global-color-1);
       border-color: var(--ast-global-color-1);
     }

   where --ast-global-color-1 is its blue, #045cb4.

   `button:hover` scores (0,1,1), which outranks a single-class component rule
   like `.vr-btn--secondary` at (0,1,0). So on hover Astra beat our *resting*
   declarations: any variant that did not restate `color` had its label painted
   white — white-on-white on every light button — and any variant that did not
   restate `background` flashed Astra's blue. Anchor tags took a second hit from
   `a:hover { color: <blue> }`, which is why the "Message" link went blue on
   purple.

   Each family therefore states its own hover paint below, from the same tokens
   as its resting rule. One class plus the pseudo-class is (0,2,0), enough to
   win, and stating it explicitly is what a design system should do anyway.
   ========================================================== */

/* ---- Canonical components -------------------------------- */

.vr-btn--primary:hover,
.vr-btn--primary:focus,
.vr-btn--ink:hover,
.vr-btn--ink:focus,
.vr-btn--danger:hover,
.vr-btn--danger:focus {
  color: var(--v-accent-ink);
}

.vr-btn--secondary:hover,
.vr-btn--secondary:focus,
.vr-btn--subtle:hover,
.vr-btn--subtle:focus,
.vr-btn--quiet:hover,
.vr-btn--quiet:focus,
.vr-btn--whatsapp:hover,
.vr-btn--whatsapp:focus {
  color: var(--v-ink);
}

/* These two are borderless at rest, so Astra's blue border-color showed as a
   1px ring around them — the background alone was being restated. */
.vr-btn--subtle:hover,
.vr-btn--subtle:focus,
.vr-btn--quiet:hover,
.vr-btn--quiet:focus {
  border-color: transparent;
}

.vr-iconbtn:hover,
.vr-iconbtn:focus {
  color: var(--v-subtle);
}

/* Floating icon buttons read as elevation, not as an outlined control, so the
   shared .vr-iconbtn hover border would add a ring they never have at rest. */
.vr-iconbtn--floating:hover,
.vr-iconbtn--floating:focus {
  border-color: transparent;
}

/* A toggled favourite keeps its accent on hover rather than reverting to grey */
.vr-iconbtn[aria-pressed="true"]:hover,
.vr-iconbtn[aria-pressed="true"]:focus {
  color: var(--v-neg-ink);
}

.vr-chip:hover,
.vr-chip:focus {
  color: var(--v-ink);
}

.vr-chip[aria-selected="true"]:hover,
.vr-chip[aria-pressed="true"]:hover,
.vr-chip.is-active:hover {
  background: var(--v-ink);
  border-color: var(--v-ink);
  color: #fff;
}

/* Underline tabs sit on the page background; the blue slab was Astra's */
.vr-tab:hover,
.vr-tab:focus {
  background: transparent;
  color: var(--v-ink);
}

/* ---- Header --------------------------------------------- */

.cl-chrome__ghost:hover,
.cl-chrome__ghost:focus {
  color: var(--v-ink);
}

/* The burger and the mobile menu's close button both sit on a light fill, so
   Astra's white label left an empty circle with no glyph in it. */
.cl-chrome__icon:hover,
.cl-chrome__icon:focus,
.cl-chrome__menu-close:hover,
.cl-chrome__menu-close:focus {
  background: var(--v-fill);
  border-color: var(--v-border-hover);
  color: var(--v-ink);
}

.cl-chrome__menu-links a:hover,
.cl-chrome__menu-links a:focus {
  background: var(--v-fill);
  color: var(--v-ink);
}

.cl-chrome__menu-signin:hover,
.cl-chrome__menu-signin:focus {
  background: var(--v-accent-hover);
  border-color: var(--v-accent-hover);
  color: var(--v-accent-ink);
}

/* ---- Home ----------------------------------------------- */

.cl-home__filters-btn:hover,
.cl-home__filters-btn:focus {
  background: var(--v-fill);
  border-color: transparent;
  color: var(--v-ink);
}

/* Models / Variants is a text control. Astra's button:hover paints a blue
   slab and a white label — restate every paint token so the link stays
   on the accent scale. */
.cl-home__suggest-toggle:hover,
.cl-home__suggest-toggle:focus,
.cl-home__suggest-toggle.is-hover {
  color: var(--v-ink);
  background: var(--v-fill-hover);
  border-color: transparent;
}

.cl-home__suggest-check:hover,
.cl-home__suggest-check:focus {
  color: inherit;
  background-color: var(--v-surface);
  border-color: var(--v-border-hover);
  box-shadow: none;
}

.cl-home__suggest-check[aria-checked="true"]:hover,
.cl-home__suggest-check[aria-checked="true"]:focus,
.cl-home__suggest-check[aria-checked="mixed"]:hover,
.cl-home__suggest-check[aria-checked="mixed"]:focus {
  background-color: var(--v-accent-hover);
  border-color: var(--v-accent-hover);
  color: inherit;
}

.cl-home__suggest-toggle:active {
  color: var(--v-ink);
  background: var(--v-fill-active);
}

.cl-home__search-back:hover,
.cl-home__search-back:focus {
  background: var(--v-fill);
  border-color: transparent;
  color: var(--v-ink);
}

.cl-chip:hover,
.cl-chip:focus {
  background: var(--v-fill-hover, #ebebeb);
  border-color: var(--v-line, #e7e7e8);
  color: var(--v-ink, #121214);
  text-decoration: none;
}

.cl-home__rail-btn:hover,
.cl-home__rail-btn:focus {
  color: var(--v-ink);
}

.cl-home__sell-btn:hover,
.cl-home__sell-btn:focus {
  color: #fff;
}

/* ---- Detail --------------------------------------------- */

/* Gallery thumbnails are images: hovering one must not paint a slab behind it */
.cl-detail__tile:hover,
.cl-detail__tile:focus {
  background: var(--v-fill);
  border-color: transparent;
}

.cl-detail__fav:hover,
.cl-detail__fav:focus,
.cl-detail__round:hover,
.cl-detail__round:focus {
  border-color: transparent;
}

.cl-detail__view-all:hover,
.cl-detail__view-all:focus {
  background: var(--v-fill);
  border-color: var(--v-border-hover);
  color: var(--v-ink);
}

/* The underline is a border-bottom, so Astra's border-color shorthand turned it
   blue on hover; matches .vr-tab, which states its own colour and was spared.
   Scoped off the pill list — those keep a white selected fill. */
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:hover,
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:focus {
  background: transparent;
  color: var(--v-ink);
  box-shadow: none;
  border-radius: 0;
  outline: none;
}

/* Excludes the selected tab, whose ink underline must survive the pointer. */
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:not(.is-active):not([aria-selected="true"]):hover,
.cl-detail__tablist:not(.cl-detail__tablist--pill) .cl-detail__tab:not(.is-active):not([aria-selected="true"]):focus {
  border-bottom-color: var(--v-border);
}

.cl-detail__disclosure summary:hover,
.cl-detail__disclosure summary:focus {
  color: var(--cl-ink);
}

.cl-detail__btn--primary:hover,
.cl-detail__btn--primary:focus {
  color: #fff;
}

.cl-detail__btn--ghost:hover,
.cl-detail__btn--ghost:focus,
.cl-detail__btn--wa:hover,
.cl-detail__btn--wa:focus {
  color: var(--v-ink);
}

/* ==========================================================
   Simulated states stay authoritative

   The design system page renders hover / pressed / focus side by side as
   documentation. A real pointer over the swatch labelled "Pressed" was
   repainting it with the hover style, so the page misreported the very
   states it exists to show. Doubled classes outrank the `:hover` rules
   above without needing !important.
   ========================================================== */

.vr-btn--primary.is-pressed.is-pressed {
  background: var(--v-accent-active);
  border-color: var(--v-accent-active);
}

.vr-btn--secondary.is-pressed.is-pressed,
.vr-btn--subtle.is-pressed.is-pressed {
  background: var(--v-fill-active);
}

.vr-btn--ink.is-pressed.is-pressed {
  background: var(--v-ink);
  border-color: var(--v-ink);
}

.vr-btn--danger.is-pressed.is-pressed {
  background: #8e0e2e;
  border-color: #8e0e2e;
}

.vr-iconbtn.is-pressed.is-pressed,
.vr-chip.is-pressed.is-pressed {
  background: var(--v-fill-active);
}

/* Focus swatches show the ring on the resting fill, not the hover fill */
.vr-btn--secondary.is-focus.is-focus,
.vr-btn--whatsapp.is-focus.is-focus,
.vr-iconbtn.is-focus.is-focus,
.vr-chip.is-focus.is-focus {
  background: var(--v-surface);
}

.vr-btn--subtle.is-focus.is-focus {
  background: var(--v-fill);
}

.vr-btn--quiet.is-focus.is-focus {
  background: transparent;
}

/* ==========================================================
   Breadcrumb + back to results

   One component for both the results page and the car page,
   which previously had separate implementations that had
   drifted: dot separators on one, chevrons on the other, and
   a bold ink current crumb on one, plain grey on the other.

   Treatment follows AutoTrader: a single row holding the back
   link and then the trail, all at one size and weight. The
   crumb for the page you are on is deliberately styled the
   same as the rest — emphasising it competes with the h1
   directly below for no gain, since aria-current already
   carries that meaning to anyone who needs it.
   ========================================================== */

.cl-crumb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* AutoTrader's inner row is flex with an 8px gap; the trail is
     display:contents so Home sits 8px after the back link, not in a
     second cluster. */
  gap: 2px 8px;
}

/* ---------- Back to results ---------- */

.cl-back.cl-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  /* The row gap is 8px; this is the extra air between Back and Home. */
  margin-inline-end: 16px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--v-accent);
  text-decoration: none;
}

.cl-back.cl-back:hover,
.cl-back.cl-back:focus {
  background: none;
  color: var(--v-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cl-back.cl-back:focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.cl-back__chev {
  font-size: 10px;
  /* The glyph sits high in its box; nudge it onto the text baseline. */
  transform: translateY(0.5px);
}

/* ---------- Trail ---------- */

.cl-crumb {
  min-width: 0;
}

/* Doubled class: Astra indents every ol and ul in the content area. */
.cl-crumb__list.cl-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-crumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--v-subtle);
}

.cl-crumb__link {
  color: var(--v-subtle);
  text-decoration: none;
}

.cl-crumb__link:hover,
.cl-crumb__link:focus {
  color: var(--v-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cl-crumb__link:focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Same weight and colour as every other crumb, but not a link, so it must
   not offer a pointer or a hover state. */
.cl-crumb__current {
  color: var(--v-subtle);
  font-weight: 400;
  cursor: default;
}

.cl-crumb__sep {
  font-size: 10px;
  /* A step lighter than the labels, so the trail reads as words first and
     separators second. */
  color: var(--v-border);
}