:root{
  --autolot-radius: 18px;
  --autolot-radius-sm: 14px;
  --autolot-border: rgba(0,0,0,.10);
  --autolot-shadow: 0 10px 30px rgba(0,0,0,.10);
  --autolot-shadow-soft: 0 6px 18px rgba(0,0,0,.10);
  --autolot-text: #111;
  --autolot-muted: rgba(17,17,17,.70);

  /* Neutral (fácil de adaptar a cualquier dealer) */
  --autolot-accent: #e11d48; /* puedes cambiarlo a cualquier color */
  --autolot-accent-2: #111827;

  /* Glass */
  --autolot-glass: rgba(255,255,255,.70);
  --autolot-glass-2: rgba(255,255,255,.55);
  --autolot-blur: 12px;
}

/* ===== Filters ===== */
.autolot-filters{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--autolot-border);
  border-radius: var(--autolot-radius);
  background: var(--autolot-glass);
  backdrop-filter: blur(var(--autolot-blur));
  -webkit-backdrop-filter: blur(var(--autolot-blur));
  box-shadow: var(--autolot-shadow-soft);
}

.autolot-filters select,
.autolot-filters input{
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--autolot-border);
  border-radius: var(--autolot-radius-sm);
  background: rgba(255,255,255,.92);
  color: var(--autolot-text);
  outline: none;
}

.autolot-filters select:focus,
.autolot-filters input:focus{
  border-color: rgba(225,29,72,.45);
  box-shadow: 0 0 0 4px rgba(225,29,72,.12);
}

.autolot-filter-btn{
  height: 46px;
  border: 0;
  border-radius: var(--autolot-radius-sm);
  background: linear-gradient(135deg, var(--autolot-accent-2), #000);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.autolot-filter-btn:hover{ filter: brightness(1.05); }

.autolot-reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--autolot-radius-sm);
  border: 1px solid var(--autolot-border);
  text-decoration: none;
  color: var(--autolot-text);
  background: rgba(255,255,255,.75);
}

/* Desktop filters layout */
@media (min-width: 900px){
  .autolot-filters{
    grid-template-columns: 1.2fr 1.2fr .8fr .8fr 1fr auto auto;
    align-items: center;
  }
  .autolot-filter-btn{ padding: 0 18px; }
}

/* ===== Grid ===== */
.autolot-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px){
  .autolot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .autolot-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Card ===== */
.autolot-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--autolot-radius);
  overflow: hidden;
  background: var(--autolot-glass);
  border: 1px solid var(--autolot-border);
  box-shadow: var(--autolot-shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.autolot-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--autolot-shadow);
  border-color: rgba(0,0,0,.16);
}

.autolot-card-media{
  position: relative;
  aspect-ratio: 16/10;
  background: #e9e9e9;
}

.autolot-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.autolot-no-photo{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(0,0,0,.55);
}

/* subtle overlay (glass highlight) */
.autolot-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 55%);
  pointer-events:none;
  opacity:.9;
}

/* Badge */
.autolot-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111;
}

/* Body */
.autolot-card-body{
  padding: 14px 14px 16px;
}

.autolot-title{
  font-weight: 900;
  color: var(--autolot-text);
  line-height: 1.15;
  margin-bottom: 8px;
}

.autolot-price{
  font-weight: 950;
  font-size: 22px;
  color: var(--autolot-accent);
  margin-bottom: 6px;
}

.autolot-mileage{
  color: var(--autolot-muted);
  font-size: 13px;
  font-weight: 700;
}

/* ===== Load More ===== */
.ucd-load-more-wrap{
  margin-top: 18px;
  text-align: center;
}

.ucd-load-more-btn{
  padding: 12px 18px;
  border: 1px solid var(--autolot-border);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  cursor: pointer;
  font-weight: 900;
}

.ucd-load-more-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

.ucd-load-more-status{
  margin-top: 10px;
  opacity: .8;
}

/* ===== Vehicle Single helpers ===== */
.autolot-only-mobile{ display: block; }
.autolot-only-desktop{ display: none; }

@media (min-width: 900px){
  .autolot-only-mobile{ display: none; }
  .autolot-only-desktop{ display: block; }
}

.autolot-cta-bar{
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.85);
  border-top: 1px solid var(--autolot-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.autolot-cta-btn{
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, var(--autolot-accent-2), #000);
}

.autolot-cta-secondary{
  background: rgba(255,255,255,.85);
  color: #111;
  border: 1px solid var(--autolot-border);
}

/* ===== Vehicle Gallery (Carousel) ===== */
.autolot-gallery{
  position: relative;
  border-radius: var(--autolot-radius);
  overflow: hidden;
  border: 1px solid var(--autolot-border);
  background: #e9e9e9;
  box-shadow: var(--autolot-shadow-soft);
}

.autolot-gallery-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.autolot-gallery-track::-webkit-scrollbar{ display:none; }

.autolot-gallery-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16/10;
  position: relative;
}
.autolot-gallery-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.autolot-gallery-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.autolot-gallery-btn:hover{ background: rgba(0,0,0,.45); }
.autolot-prev{ left: 12px; }
.autolot-next{ right: 12px; }
/* ============================================================
   SINGLE VEHICLE PAGE — autolot-single-page.css
   Append to autolot-pro.css  (or enqueue as a separate file)
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.als-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 18px 60px;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.als-breadcrumb {
  font-size: 13px;
  color: rgba(17,17,17,.5);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.als-breadcrumb a {
  color: rgba(17,17,17,.65);
  text-decoration: none;
}
.als-breadcrumb a:hover { text-decoration: underline; }

/* ── Lead-sent notice ─────────────────────────────────────── */
.als-notice {
  background: #eaf3de;
  color: #3b6d11;
  border: 0.5px solid rgba(59,109,17,.25);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
}

/* ── Two-column layout ────────────────────────────────────── */
.als-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

@media (min-width: 860px) {
  .als-layout {
    grid-template-columns: 1fr 340px;
  }
}

/* ── Gallery column ───────────────────────────────────────── */
.als-gallery {
  border-radius: 14px;
  overflow: hidden;
  border: 0.5px solid rgba(17,17,17,.1);
  background: #eee;
  position: relative;
}

.als-gallery .autolot-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.als-gallery .autolot-gallery-track::-webkit-scrollbar { display: none; }

.als-gallery .autolot-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16/10;
}
.als-gallery .autolot-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.als-no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(17,17,17,.4);
  font-weight: 500;
}

/* Gallery nav buttons (re-uses autolot-gallery-btn from existing CSS) */

/* ── Thumbnail strip ──────────────────────────────────────── */
.als-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.als-thumb {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  background: #eee;
  position: relative;
}
.als-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.als-thumb-active {
  border-color: #111;
}
.als-thumb-more {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.als-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 860px) {
  .als-sidebar {
    position: sticky;
    top: 20px;
  }
}

/* ── Card base ────────────────────────────────────────────── */
.als-card {
  background: #fff;
  border: 0.5px solid rgba(17,17,17,.1);
  border-radius: 14px;
  padding: 16px 18px;
}

/* ── Info card ────────────────────────────────────────────── */
.als-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.als-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 0.5px solid transparent;
}
.als-badge-available {
  background: rgba(10,122,47,.1);
  color: #0a7a2f;
  border-color: rgba(10,122,47,.2);
}
.als-badge-pending {
  background: rgba(180,117,11,.12);
  color: #8f5c08;
  border-color: rgba(180,117,11,.2);
}
.als-badge-sold {
  background: rgba(175,0,25,.09);
  color: #af0019;
  border-color: rgba(175,0,25,.18);
}

.als-vin {
  font-size: 11px;
  color: rgba(17,17,17,.45);
  font-family: monospace;
}

.als-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  margin-bottom: 6px;
}

.als-price {
  font-size: 28px;
  font-weight: 900;
  color: #111;
  margin-bottom: 14px;
}

/* ── Quick chips ──────────────────────────────────────────── */
.als-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.als-chip {
  font-size: 12px;
  font-weight: 500;
  color: rgba(17,17,17,.65);
  background: rgba(17,17,17,.05);
  border: 0.5px solid rgba(17,17,17,.1);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── CTA buttons ──────────────────────────────────────────── */
.als-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.als-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: opacity .12s;
}
.als-btn:hover { opacity: .85; }

.als-btn-primary {
  background: #111;
  color: #fff;
}
.als-btn-secondary {
  background: #fff;
  color: #111;
  border: 0.5px solid rgba(17,17,17,.18);
}
.als-btn-outline {
  grid-column: 1 / -1;
  background: #fff;
  color: #111;
  border: 0.5px solid rgba(17,17,17,.18);
}

/* ── Specs table ──────────────────────────────────────────── */
.als-specs-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(17,17,17,.45);
  margin-bottom: 12px;
}

.als-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.als-specs-table th,
.als-specs-table td {
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(17,17,17,.07);
  text-align: left;
  font-size: 13px;
}
.als-specs-table tr:last-child th,
.als-specs-table tr:last-child td { border-bottom: none; }
.als-specs-table th {
  font-weight: 400;
  color: rgba(17,17,17,.55);
  width: 42%;
}
.als-specs-table td {
  font-weight: 700;
  color: #111;
}

/* ── Request form ─────────────────────────────────────────── */
.als-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.als-form input,
.als-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 0.5px solid rgba(17,17,17,.18);
  border-radius: 10px;
  font-size: 14px;
  background: #fafafa;
  color: #111;
  outline: none;
  transition: border-color .12s;
}
.als-form input:focus,
.als-form textarea:focus {
  border-color: rgba(17,17,17,.45);
  background: #fff;
}
.als-form textarea { resize: vertical; min-height: 80px; }
.als-form button {
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.als-form button:hover { opacity: .85; }

/* ── Similar vehicles ─────────────────────────────────────── */
.als-similar {
  margin-top: 32px;
}
.als-similar-heading {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
}
.als-similar-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
  gap: 14px;
}
.als-sim-card {
  border: 0.5px solid rgba(17,17,17,.1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .12s, border-color .12s;
}
.als-sim-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17,17,17,.2);
}
.als-sim-img {
  aspect-ratio: 16/10;
  background: #eee;
  overflow: hidden;
}
.als-sim-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.als-sim-body {
  padding: 10px 12px 12px;
}
.als-sim-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 3px;
}
.als-sim-price {
  font-size: 15px;
  font-weight: 900;
  color: #111;
}

/* ── Thumbnail JS sync ───────────────────────────────────── */
/* active state set via JS in autolot-gallery.js (see companion JS snippet) */