/* ============================================================
   car-detail.css — Single car page (Evodrive-inspired)
   Author: Temlines — templines.com
   ============================================================ */

:root {
  --cd-r:     1.5rem;
  --cd-r-lg:  1.75rem;
  --cd-white: #ffffff;
  --cd-grey:  #f4f4f2;
  --cd-border: rgba(31,31,30,0.08);
  --gx-lime-dark: #5a8a00;
}

.cd-page {
  background: var(--gx-white);
  color: var(--gx-g500);
}

/* ============================================================
   Header (light)
   ============================================================ */
.cd-header {
  background: rgba(248,248,246,0.94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cd-border);
}

.cd-header .gx-header__logo,
.cd-header .gx-header__link         { color: var(--gx-g500); }
.cd-header .gx-header__link--active  { color: var(--gx-g500); text-decoration: underline; text-decoration-color: var(--gx-lime); text-underline-offset: 4px; }
.cd-header .gx-header__link:hover    { opacity: 0.55; }

.cd-nav-cta { height: 2.625rem; font-size: 0.875rem; padding: 0 1.25rem; }
.cd-nav-cta .gx-btn__circle { width: 1.875rem; height: 1.875rem; }

/* Badges → see .gx-badge in main.css */

/* Outline button for light bg */
.cd-btn--outline-dark { color: var(--gx-g500); border-color: rgba(31,31,30,0.2); }
.cd-btn--outline-dark:hover { background: var(--gx-g500); color: var(--gx-white); border-color: var(--gx-g500); }

/* ============================================================
   1. INTRO (breadcrumb + hero title)
   ============================================================ */
.cd-intro {
  background: var(--gx-white);
  padding: 3rem 0 2.5rem;
}

.cd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gx-font-mono);
  font-size: 0.6875rem;
  color: var(--gx-g100);
  margin-bottom: 2rem;
}

.cd-breadcrumb__link { color: var(--gx-g100); text-decoration: none; transition: color var(--gx-t); }
.cd-breadcrumb__link:hover { color: var(--gx-g500); }
.cd-breadcrumb__sep  { opacity: 0.3; }
.cd-breadcrumb__current { color: var(--gx-g500); }

.cd-intro__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: flex-start;
}

.cd-intro__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.cd-intro__title {
  font-family: var(--gx-font-heading);
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gx-g500);
  margin-bottom: 1rem;
}

.cd-intro__subtitle {
  font-size: 1rem;
  color: var(--gx-g100);
  line-height: 1.7;
  max-width: 36rem;
}

/* Price hero (right side) */
.cd-price-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.cd-price-hero__label {
  font-family: var(--gx-font-mono);
  font-size: 0.6875rem;
  color: var(--gx-g100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cd-price-hero__amount {
  font-family: var(--gx-font-heading);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  color: var(--gx-g500);
  letter-spacing: -0.03em;
  line-height: 1;
}

.cd-price-hero__note {
  font-size: 0.75rem;
  color: var(--gx-g75);
}

.cd-intro__ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; justify-content: flex-end; }

/* ============================================================
   2. GALLERY — tile grid
   ============================================================ */
.cd-gallery {
  background: var(--gx-white);
  padding: 0 0 3rem;
}

/* ---- Color picker ---- */
.cd-colors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  padding: 1.25rem 0 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gx-gray-light);
}
.cd-colors__label {
  font-size: 0.875rem;
  color: rgba(31,31,30,0.6);
  letter-spacing: 0.01em;
}
.cd-colors__label strong {
  color: var(--gx-dark);
  font-weight: 600;
  margin-left: 0.15rem;
}
.cd-colors__swatches {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.cd-color {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c, #ccc);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 1px rgba(31,31,30,0.08);
}
.cd-color:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 1px var(--gx-dark);
}
.cd-color.is-active {
  box-shadow: 0 0 0 2px var(--gx-dark), 0 0 0 4px var(--gx-lime);
}
.cd-color:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gx-dark), 0 0 0 4px var(--gx-lime);
}

.cd-gallery__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0.5rem;
  height: 32rem;
  border-radius: var(--cd-r-lg);
  overflow: hidden;
}

/* Individual cell (all images share this) */
.cd-gallery__cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--cd-grey);
}

.cd-gallery__cell:focus-visible {
  outline: 2px solid var(--gx-lime);
  outline-offset: -2px;
  z-index: 1;
}

.cd-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cd-gallery__cell:hover .cd-gallery__img {
  transform: scale(1.05);
}

/* Right 2×2 grid */
.cd-gallery__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
}

/* "View all" overlay on last tile */
.cd-gallery__cell--more { cursor: pointer; }

.cd-gallery__more-btn {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.52);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--gx-white);
  cursor: pointer;
  border: none;
  transition: background var(--gx-t);
  font-family: var(--gx-font-body);
}

.cd-gallery__more-btn:hover { background: rgba(15,15,15,0.68); }

.cd-gallery__more-btn span {
  font-family: var(--gx-font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gx-white);
}

/* ============================================================
   3. MAIN 2-COLUMN LAYOUT
   ============================================================ */
.cd-main {
  background: var(--gx-white);
  padding: 0 0 5rem;
}

.cd-main__grid {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: 2.5rem;
  align-items: flex-start;
}

/* ---- Content blocks ---- */
.cd-block {
  border-radius: var(--cd-r-lg);
  padding: 2.5rem;
  margin-bottom: 1.5rem;
}

.cd-block--white { background: var(--cd-white); border: 1.5px solid var(--cd-border); }
.cd-block--grey  { background: var(--cd-grey);  border: 1.5px solid transparent; }

.cd-block__title {
  font-family: var(--gx-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--gx-g500);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* Description */
.cd-description p {
  font-size: 0.9375rem;
  color: var(--gx-g100);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.cd-description p:last-child { margin-bottom: 0; }

/* Key specs strip */
.cd-keyspecs {
  display: flex;
  align-items: center;
  background: var(--gx-g500);
  border-radius: var(--cd-r-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.cd-keyspec {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 0.125rem;
}

.cd-keyspec__val {
  font-family: var(--gx-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gx-white);
  line-height: 1;
}

.cd-keyspec__unit {
  font-family: var(--gx-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gx-lime);
  line-height: 1;
  margin-left: 0.125rem;
}

/* num + unit inline */
.cd-keyspec__val,
.cd-keyspec__unit {
  display: inline;
}

.cd-keyspec-numrow {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
}

.cd-keyspec__label {
  font-family: var(--gx-font-mono);
  font-size: 0.5625rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.375rem;
}

.cd-keyspec__sep {
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* Specs head with trim tabs */
.cd-spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cd-spec-head .cd-block__title { margin-bottom: 0; }

.cd-trim-tabs {
  display: inline-flex;
  background: var(--gx-white);
  border: 1px solid var(--gx-gray-light);
  border-radius: 100px;
  padding: 0.3rem;
  gap: 0.2rem;
}
.cd-trim-tab {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(31,31,30,0.6);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.cd-trim-tab:hover { color: var(--gx-dark); }
.cd-trim-tab.is-active {
  background: var(--gx-dark);
  color: var(--gx-lime);
}

/* Trim summary row */
.cd-trim-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--gx-white);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--gx-gray-light);
  flex-wrap: wrap;
}
.cd-trim-info__name {
  font-family: var(--gx-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gx-dark);
  margin-right: 0.5rem;
}
.cd-trim-info__sub {
  font-size: 0.8125rem;
  color: rgba(31,31,30,0.55);
  display: block;
  margin-top: 0.15rem;
}
.cd-trim-info__price {
  font-size: 0.875rem;
  color: rgba(31,31,30,0.6);
}
.cd-trim-info__price strong {
  font-family: var(--gx-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--gx-dark);
  margin-left: 0.25rem;
}

/* Specs grid */
.cd-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  transition: opacity 0.2s ease;
}
.cd-specs-grid.is-changing { opacity: 0.4; }

.cd-spec-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(31,31,30,0.07);
  border-right: 1px solid rgba(31,31,30,0.07);
}

.cd-spec-row:nth-child(even) { border-right: none; }
.cd-spec-row:nth-last-child(-n+2) { border-bottom: none; }

.cd-spec-row__label {
    font-family: var(--gx-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.cd-spec-row__val {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gx-g500);
}

/* Equipment */
.cd-equipment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cd-equip-col__head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cd-equip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cd-equip-list li {
  font-size: 0.875rem;
  color: var(--gx-g100);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.cd-equip-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--gx-lime);
}

/* ============================================================
   Sidebar
   ============================================================ */
.cd-sidebar {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cd-sidebar__card {
  border-radius: var(--cd-r-lg);
  border: 1.5px solid var(--cd-border);
  background: var(--cd-white);
  padding: 2rem;
}

/* Price card */
.cd-price-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cd-price-card__label {
  font-family: var(--gx-font-mono);
  font-size: 0.625rem;
  color: var(--gx-g75);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.cd-price-card__amount {
  font-family: var(--gx-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gx-g500);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cd-price-card__note {
  font-size: 0.75rem;
  color: var(--gx-g75);
  display: block;
  margin-top: 0.25rem;
}

.cd-price-card__delivery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--cd-lime-dark, #5a8a00);
  font-weight: 500;
  margin-bottom: 1.75rem;
  padding: 0.75rem 1rem;
  background: rgba(90,138,0,0.06);
  border-radius: var(--gx-r-lg);
}

.cd-price-card__form-title {
  font-family: var(--gx-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gx-g500);
  margin-bottom: 1.25rem;
}

/* Form */
.cd-form { display: flex; flex-direction: column; gap: 0.875rem; }

.cd-form__row { display: flex; flex-direction: column; gap: 0.375rem; }

.cd-form__label {
  font-family: var(--gx-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gx-g200);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cd-form__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(31,31,30,0.12);
  border-radius: var(--gx-r-lg);
  font-size: 0.9375rem;
  color: var(--gx-g500);
  background: var(--cd-grey);
  outline: none;
  transition: border-color var(--gx-t), background var(--gx-t);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.cd-form__input::placeholder { color: var(--gx-g75); }
.cd-form__input:focus { border-color: var(--gx-g500); background: var(--cd-white); }

.cd-form__textarea { resize: vertical; min-height: 5rem; }

.cd-form__submit { width: 100%; justify-content: center; margin-top: 0.25rem; }

.cd-form__note {
  font-size: 0.6875rem;
  color: var(--gx-g75);
  text-align: center;
  margin-top: 0.25rem;
  line-height: 1.5;
}

.cd-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1.5rem 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--gx-g200);
  line-height: 1.6;
}

.cd-form__success--hidden { display: none; }

/* Contact mini */
.cd-contact-mini__title {
  font-family: var(--gx-font-mono);
  font-size: 0.625rem;
  color: var(--gx-g100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.cd-contact-mini__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gx-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gx-g500);
  text-decoration: none;
  margin-bottom: 0.375rem;
  transition: opacity var(--gx-t);
}

.cd-contact-mini__phone:hover { opacity: 0.65; }

.cd-contact-mini__hours {
  font-size: 0.8125rem;
  color: var(--gx-g75);
  margin-bottom: 1rem;
}

.cd-contact-mini__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--gx-font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gx-g500);
  text-decoration: underline;
  text-decoration-color: var(--gx-lime);
  text-underline-offset: 3px;
  transition: opacity var(--gx-t);
}

.cd-contact-mini__link:hover { opacity: 0.6; }

/* Trust */
.cd-trust { display: flex; flex-direction: column; gap: 1.125rem; }

.cd-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.cd-trust__item svg { flex-shrink: 0; margin-top: 0.125rem; }

.cd-trust__item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gx-g500);
  margin-bottom: 0.125rem;
}

.cd-trust__item span {
  font-size: 0.8125rem;
  color: var(--gx-g75);
}

/* ============================================================
   4. PHOTO STRIP
   ============================================================ */
.cd-photostrip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 3rem;
  scrollbar-width: none;
}

.cd-photostrip::-webkit-scrollbar { display: none; }

.cd-photostrip__track {
  display: flex;
  gap: 1rem;
  padding: 0 var(--gx-pad, 2rem);
  width: max-content;
}

.cd-photostrip__item {
  width: 22rem;
  height: 14rem;
  border-radius: var(--cd-r-lg);
  display: block;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

/* ============================================================
   5. CTA SECTION (animated headline)
   ============================================================ */
.cd-cta-section {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
}

.cd-cta-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cd-cta-section__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
  z-index: 1;
}

.cd-cta-section__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

/* Animated headline */
.cd-cta-section__sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    padding-left: 2px;
}

.cd-cta-section__headline {
    position: relative;
    font-family: monospace;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--gx-white);
    min-height: 1.15em;
}

.cd-cta-word {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: cdWordIn 9s ease-in-out infinite;
  color: var(--gx-lime);
  white-space: nowrap;
}

.cd-cta-word--2 { animation-delay: 3s; }
.cd-cta-word--3 { animation-delay: 6s; }

@keyframes cdWordIn {
  0%   { opacity: 0; transform: translateY(20px); }
  8%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  36%  { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* CTA form */
.cd-cta-section__form-title {
  font-family: var(--gx-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gx-white);
  margin-bottom: 1.5rem;
}

.cd-cta-form { display: flex; flex-direction: column; gap: 1rem; }




.cd-cta-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.cd-cta-form__input {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--gx-r-lg);
  font-size: 0.9375rem;
  color: var(--gx-white);
  background: rgba(255,255,255,0.06);
  outline: none;
  transition: border-color var(--gx-t), background var(--gx-t);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.cd-cta-form__input::placeholder { color: rgba(255,255,255,0.3); }
.cd-cta-form__input:focus { border-color: var(--gx-lime); background: rgba(255,255,255,0.1); }

.cd-cta-form__select option { color: var(--gx-g500); background: var(--gx-white); }

.cd-cta-form__btn { margin-top: 0.25rem; }

/* ============================================================
   6. LOCATION
   ============================================================ */
.cd-location {
  background: var(--gx-white);
  padding: 7rem 0;
}

.cd-location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.cd-location__map-img {
  width: 100%;
  height: 28rem;
  border-radius: var(--cd-r-lg);
  border: 0;
  display: block;
  filter: grayscale(20%);
}

.cd-location__title {
  font-family: var(--gx-font-heading);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 700;
  color: var(--gx-g500);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.cd-location__desc {
  font-size: 0.9375rem;
  color: var(--gx-g100);
  line-height: 1.75;
  margin-bottom: 2rem;
}

.cd-location__details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.cd-location__detail {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.cd-location__detail svg { flex-shrink: 0; margin-top: 0.125rem; color: var(--gx-g200); }

.cd-location__detail strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gx-g500);
  margin-bottom: 0.125rem;
}

.cd-location__detail span,
.cd-location__detail a {
  font-size: 0.875rem;
  color: var(--gx-g100);
  text-decoration: none;
}

.cd-location__detail a:hover { text-decoration: underline; }

/* ============================================================
   7. RELATED CARS
   ============================================================ */
.cd-related {
  background: var(--gx-off-white);
  padding: 7rem 0;
}

.cd-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.cd-related__title {
  font-family: var(--gx-font-heading);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--gx-g500);
  letter-spacing: -0.03em;
}

.cd-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cd-rcard {
  background: var(--gx-white);
  border-radius: var(--cd-r-lg);
  overflow: hidden;
  border: 1.5px solid var(--cd-border);
  text-decoration: none;
  display: block;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cd-rcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.1);
}

.cd-rcard__img {
  height: 12rem;
  width: 100%;
  border-radius: 0;
  transition: transform 0.5s ease;
}

.cd-rcard:hover .cd-rcard__img { transform: scale(1.04); }

.cd-rcard__body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cd-rcard__name {
  font-family: var(--gx-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gx-g500);
}

.cd-rcard__specs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cd-rcard__specs span {
  font-family: var(--gx-font-mono);
  font-size: 0.625rem;
  color: var(--gx-g100);
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(31,31,30,0.1);
  border-radius: var(--gx-r-full);
}

.cd-rcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cd-border);
}

.cd-rcard__price {
  font-family: var(--gx-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gx-g500);
}

.cd-rcard__cta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--gx-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gx-g200);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--gx-t);
}

.cd-rcard:hover .cd-rcard__cta { color: var(--gx-g500); }

/* ============================================================
   Lightbox (navigable)
   ============================================================ */
.cd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cd-lightbox.cd-lightbox--open { opacity: 1; pointer-events: all; }

.cd-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--gx-r-full);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gx-t);
  z-index: 2;
}

.cd-lightbox__close:hover { background: rgba(255,255,255,0.22); }

.cd-lightbox__stage {
  flex: 1;
  max-width: 72rem;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cd-lightbox__img {
  width: 100%;
  height: 80vh;
  max-height: 52rem;
  border-radius: var(--cd-r-lg);
  transition: opacity 0.25s ease;
}

.cd-lightbox__img--fade { opacity: 0; }

/* Prev / Next nav buttons */
.cd-lightbox__nav {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--gx-r-full);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gx-t), transform var(--gx-t);
  z-index: 2;
  position: relative;
}

.cd-lightbox__nav:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.cd-lightbox__nav:disabled { opacity: 0.2; cursor: default; transform: none; }

/* Counter */
.cd-lightbox__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--gx-font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  z-index: 2;
}

.cd-lightbox__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cd-lightbox__backdrop--show { opacity: 1; pointer-events: all; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
  .cd-main__grid       { grid-template-columns: 1fr 22rem; }
  .cd-equipment        { grid-template-columns: 1fr 1fr; }
  .cd-gallery__grid    { grid-template-columns: 3fr 2fr; height: 26rem; }
}

@media (max-width: 1024px) {
  .cd-intro__row         { grid-template-columns: 1fr; }
  .cd-intro__right       { border-top: 1px solid var(--cd-border); padding-top: 1.5rem; }
  .cd-price-hero         { align-items: flex-start; }
  .cd-intro__ctas        { justify-content: flex-start; }
  .cd-main__grid         { grid-template-columns: 1fr; }
  .cd-sidebar            { position: static; }
  .cd-gallery__grid      { grid-template-columns: 1fr; height: auto; }
  .cd-gallery__cell--main { height: 20rem; }
  .cd-gallery__tiles     { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 7rem; }
  .cd-cta-section__inner { grid-template-columns: 1fr; gap: 3rem; }
  .cd-location__grid     { grid-template-columns: 1fr; gap: 3rem; }
  .cd-related__grid      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .cd-block                { padding: 1.5rem; }
  .cd-equipment            { grid-template-columns: 1fr; gap: 1.5rem; }
  .cd-specs-grid           { grid-template-columns: 1fr; }
  .cd-spec-row             { border-right: none; }
  .cd-spec-row:nth-last-child(-n+2) { border-bottom: 1px solid rgba(31,31,30,0.07); }
  .cd-spec-row:last-child  { border-bottom: none; }
  .cd-keyspecs             { gap: 0; overflow-x: auto; }
  .cd-keyspec              { padding: 0 1rem; }
  .cd-related__grid        { grid-template-columns: 1fr; }
  .cd-cta-form__row        { grid-template-columns: 1fr; }
  .cd-photostrip__item     { width: 16rem; height: 10rem; }
}