/* =========================================================================
   CAR DETAIL PAGE (single listing, car.php) -- "cd-" prefixed
   Loaded ONLY on the car detail page (see $extra_css in car.php), on top
   of the shared style.css -- relies on shared tokens (--gold, --border,
   --surface, etc.) and shared classes (.btn, .prose, .car-grid,
   .car-card) defined there, so style.css must still load first.
   ========================================================================= */

.cd-container { width: 100%; margin: 0 auto; padding: 0 32px; }
.cd-head { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.cd-back-row { display: flex; flex-wrap: nowrap; gap: 0.75rem; margin-bottom: 2.5rem; overflow-x: auto; overflow-y: hidden; }
.cd-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; flex: 0 0 auto;
  font-family: "Oswald", sans-serif; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 999px; padding: 0.7rem 1.4rem; border: none;
  transition: opacity .2s ease, transform .2s ease;
}
.cd-back svg { width: 14px; height: 14px; }
.cd-back:hover { opacity: .85; }
.cd-back--light { background: #fff; color: #000; }
.cd-back--gold { background: var(--gold); color: #000; }
@media (max-width: 480px) { .cd-back { padding: 0.6rem 1.1rem; font-size: 0.72rem; } }
.cd-eyebrow { color: var(--gold); font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; font-weight: 600; margin: 0 0 1rem; }
.cd-title { font-size: 2rem; margin: 0 0 1rem; }
@media (min-width: 700px) { .cd-title { font-size: 2.6rem; } }

.cd-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1.5rem; padding-bottom: 3rem; align-items: start; min-width: 0; }
.cd-layout > * { min-width: 0; }
@media (min-width: 1024px) { .cd-layout { grid-template-columns: minmax(0, 1fr) 380px; } }

/* ---------- Gallery ---------- */
.cd-gallery { min-width: 0; width: 100%; }
.cd-gallery-main {
  position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 640px; background: #000;
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden; touch-action: manipulation;
}
.cd-gallery-main img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; background: #000; touch-action: manipulation; }
@media (max-width: 700px) { .cd-gallery-main img { object-fit: contain; } }
.cd-gallery-fullscreen, .cd-gallery-arrow {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); border: 1px solid var(--border); color: var(--foreground);
  cursor: pointer; transition: border-color .2s ease, color .2s ease; touch-action: manipulation;
}
.cd-gallery-fullscreen { top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 3px; }
.cd-gallery-fullscreen svg { width: 16px; height: 16px; }
.cd-gallery-arrow { top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; }
.cd-gallery-arrow svg { width: 18px; height: 18px; }
.cd-gallery-arrow--prev { left: 14px; }
.cd-gallery-arrow--next { right: 14px; }
.cd-gallery-fullscreen:hover, .cd-gallery-arrow:hover { border-color: rgba(217,182,78,.6); color: var(--gold); }
.cd-gallery-counter {
  position: absolute; bottom: 14px; left: 14px; background: rgba(0,0,0,.6); border: 1px solid var(--border);
  padding: 0.35rem 0.75rem; font-size: 0.78rem; letter-spacing: 0.05em; border-radius: 3px; color: var(--muted);
}
.cd-gallery-counter #cd-counter-current { color: var(--foreground); font-weight: 600; }

.cd-thumbs { display: flex; gap: 0.6rem; overflow-x: auto; overflow-y: hidden; margin-top: 0.75rem; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; }
.cd-thumbs::-webkit-scrollbar { display: none; }
.cd-thumb {
  flex: 0 0 auto; width: 104px; height: 78px; padding: 0; border: 1px solid var(--border); border-radius: 3px;
  background: #000; cursor: pointer; overflow: hidden; opacity: .6; transition: border-color .2s ease, opacity .2s ease;
}
.cd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cd-thumb:hover { opacity: .9; }
.cd-thumb.is-active { border-color: var(--gold); opacity: 1; }

/* ---------- Sidebar ---------- */
.cd-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .cd-sidebar { position: sticky; top: 90px; } }

.cd-price-box { border: 1px solid rgba(217,182,78,.4); border-radius: 4px; padding: 1.5rem; }
.cd-price-label { color: var(--gold); font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.72rem; margin: 0 0 0.5rem; }
.cd-price-msrp { color: var(--muted); text-decoration: line-through; font-size: 0.95rem; margin: 0 0 0.2rem; }
.cd-price-value { font-family: "Oswald", sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--gold); margin: 0 0 0.35rem; }
.cd-price-usd { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.25rem; }
.cd-price-value span { font-size: 1rem; font-weight: 500; margin-left: 0.3rem; }
.cd-price-value--text { font-size: 1.3rem; }
.cd-price-box .btn { margin-bottom: 0.75rem; }
.cd-price-box .btn:last-child { margin-bottom: 0; }
.cd-whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.cd-whatsapp-btn svg { width: 16px; height: 16px; fill: currentColor; }

.cd-specs { border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; }
.cd-specs-heading { color: var(--gold); font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; margin: 0 0 1rem; }
.cd-spec-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.cd-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.cd-spec-row:first-of-type { padding-top: 0; }
.cd-spec-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold); }
.cd-spec-icon svg { width: 100%; height: 100%; }
.cd-spec-text { display: flex; flex-direction: column; }
.cd-spec-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cd-spec-value { font-size: 0.9rem; color: var(--foreground); font-weight: 500; }

/* ---------- Tabs: Videos / Overview / Featured Options ---------- */
.cd-tabs-section { padding-bottom: 3rem; }
.cd-tabs { display: flex; gap: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; overflow-x: auto; overflow-y: hidden; }
.cd-tab {
  background: none; border: none; cursor: pointer; white-space: nowrap;
  color: var(--muted); font-family: "Oswald", sans-serif; font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 0.9rem; position: relative;
}
.cd-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); opacity: 0; transition: opacity .2s ease; }
.cd-tab:hover { color: var(--foreground); }
.cd-tab.is-active { color: var(--gold); }
.cd-tab.is-active::after { opacity: 1; }

.cd-tab-panel { display: none; max-width: 900px; }
.cd-tab-panel.is-active { display: block; }
.cd-tab-panel[data-panel="features"] { max-width: none; }

.cd-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.cd-video-embed iframe { width: 100%; height: 100%; border: 0; }

.cd-overview-content { max-height: 8.5em; overflow: hidden; position: relative; }
.cd-overview-content.is-expanded { max-height: none; }
.cd-viewfull {
  display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: none; cursor: pointer;
  color: var(--gold); font-family: "Oswald", sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; margin-top: 1rem; padding: 0;
}
.cd-viewfull svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cd-viewfull.is-open svg { transform: rotate(90deg); }

.cd-features-grid-wrap { max-height: 15em; overflow: hidden; position: relative; }
.cd-features-grid-wrap.is-expanded { max-height: none; }
.cd-features-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem 2rem; }
@media (min-width: 700px) { .cd-features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cd-features-grid { grid-template-columns: 1fr 1fr 1fr; } }
.cd-feature-heading { grid-column: 1 / -1; color: var(--gold); font-weight: 600; margin: 1rem 0 0; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }
.cd-feature-heading:first-child { margin-top: 0; }
.cd-feature-item { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.cd-feature-item svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gold); margin-top: 0.15em; }

/* ---------- Related vehicles ---------- */
.cd-related { padding-top: 2.5rem; padding-bottom: 3.5rem; border-top: 1px solid var(--border); margin-top: 1rem; }
.cd-related-eyebrow { color: var(--gold); font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; font-weight: 600; margin: 0 0 0.75rem; display: block; }
.cd-related-heading { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; font-size: 1.6rem; margin: 0 0 2rem; color: var(--foreground); }
.cd-related-carousel { position: relative; }
.cd-related-grid { grid-template-columns: repeat(3, 1fr); }
.cd-related-grid .car-card { max-width: none; margin: 0; }
.cd-related-arrow { display: none; }
@media (max-width: 768px) {
  .cd-related-grid {
    display: flex; grid-template-columns: none; gap: 0; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cd-related-grid::-webkit-scrollbar { display: none; }
  .cd-related-grid > * { flex: 0 0 100%; width: 100%; scroll-snap-align: center; }

  /* Visible tap targets so it's obvious the row is swipeable -- bounded,
     not an infinite loop: each arrow disables itself at the start/end
     rather than wrapping back around. */
  .cd-related-arrow {
    display: flex; position: absolute; top: 40%; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.65); border: 1px solid var(--gold); color: var(--gold);
    align-items: center; justify-content: center; cursor: pointer; z-index: 3; touch-action: manipulation;
    transition: opacity .2s ease;
  }
  .cd-related-arrow svg { width: 16px; height: 16px; }
  .cd-related-arrow--prev { left: 6px; }
  .cd-related-arrow--next { right: 6px; }
  .cd-related-arrow[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
}

/* ---------- Fullscreen lightbox ---------- */
.cd-lightbox {
  display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.95);
  align-items: center; justify-content: center; padding: 2rem;
}
.cd-lightbox.is-open { display: flex; }
.cd-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 600px) { .cd-lightbox { padding: 0.5rem; } }
.cd-lightbox-close {
  position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--foreground);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cd-lightbox-close:hover { border-color: rgba(217,182,78,.6); color: var(--gold); }
.cd-lightbox-close svg { width: 18px; height: 18px; }
.cd-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--foreground);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; touch-action: manipulation;
}
.cd-lightbox-arrow:hover { border-color: rgba(217,182,78,.6); color: var(--gold); }
.cd-lightbox-arrow svg { width: 20px; height: 20px; }
.cd-lightbox-arrow--prev { left: 16px; }
.cd-lightbox-arrow--next { right: 16px; }
@media (max-width: 600px) { .cd-lightbox-arrow { width: 42px; height: 42px; } .cd-lightbox-arrow--prev { left: 8px; } .cd-lightbox-arrow--next { right: 8px; } }

/* =========================================================================
   CAR DETAIL — layout fixes. Paste at the END of assets/css/car-detail.css
   (If you already pasted an earlier version of this block, REPLACE it.)
   ========================================================================= */

/* 1) Title lives in the left column (see car.php), so the price card starts
      at the top of the right column. */
.cd-main { min-width: 0; }

/* 2) Spacing: push the Back / View All buttons DOWN a little, and pull the
      title + price card UP. The old 2.5rem gap under the buttons was what
      pushed everything down. */
.cd-head      { padding-top: 3.5rem; padding-bottom: 0; }
.cd-back-row  { margin-bottom: 1.25rem; }   /* was 2.5rem */
.cd-layout    { padding-top: 0.5rem; }      /* was 1.5rem */

@media (max-width: 768px) {
  .cd-head     { padding-top: 2rem; }
  .cd-back-row { margin-bottom: 1rem; }
}

/* 3) Quick Specifications: 2 columns x 4 rows on tablet/mobile instead of
      8 stacked rows. (2 columns, not 4 — values like "Special Paint:
      Jetstream 2" need the width to stay readable on a phone.) */
@media (max-width: 1023px) {
  .cd-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
  .cd-specs-heading { grid-column: 1 / -1; }

  .cd-spec-row {
    min-width: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
  }
  /* Reset the single-column rules so every cell is uniform in the grid. */
  .cd-spec-row:first-of-type { padding-top: 0.75rem; }
  .cd-spec-row:last-child { border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }

  .cd-spec-text  { min-width: 0; }
  .cd-spec-value { overflow-wrap: anywhere; }
}

/* Very narrow phones: let a long value breathe rather than squashing it. */
@media (max-width: 360px) {
  .cd-spec-row   { gap: 0.6rem; }
  .cd-spec-value { font-size: 0.85rem; }
}