/* ============================================================
   car-detail.css — car detail page (build 2)
   Load AFTER css/style.css. Everything is scoped to .cd-* / body.cd-page
   (own prefix, so it can never collide with classes in style.css).
   Mobile-first; tablet >=768px; desktop >=1024px.
   Rows use flex + margins (no `gap`) so spacing is reliable in every browser.
   ============================================================ */

body.cd-page{
  --cd-build:2;                 /* design build 2 (hero card + Why cards + EMI/Ready cards). js/car-detail.js warns if it sees anything else */
  --cd-green:#18A76B;
  --cd-mint:#E2F3EA;
  --cd-muted:#8A8A80;
  --cd-tile:#F4F4F3;
  --cd-line:#DADAD6;
  --cd-ink:var(--ink,#16181B);
  --cd-header-h:70px;
  /* where the car sits inside a 360 photo (the photos are cropped to the same shape as the stage, so the car is simply centred) */
  --cd-frame-pos:50% 50%;
  background:#ECECEC;
  padding-bottom:0;
}
.cd-page [hidden]{display:none !important;}
.cd-main *,.cd-main *::before,.cd-main *::after{box-sizing:border-box;}
.cd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Header ----------
   Same .header-v2-overlay as the other pages. There's no dark hero here, so a dark band behind the
   header recreates the homepage look (its height is measured by JS to match the real header). */
.cd-main{position:relative;padding:calc(var(--cd-header-h) + 22px) 14px 48px;}
.cd-main::before{
  content:'';position:absolute;top:0;left:0;right:0;height:var(--cd-header-h);
  background:var(--green-dark,#0A2318);
}
.cd-wrap{max-width:1552px;margin:0 auto;}

/* ---------- Hero card ---------- */
.cd-hero{position:relative;background:#fff;border-radius:26px;padding:20px 16px 26px;box-shadow:0 6px 26px rgba(0,0,0,.06);}
.cd-media{position:relative;}

/* 360° viewer: the stage is a wide window onto the square photo, so the white space above/below the car is cropped away */
.cd-badge{
  position:absolute;top:0;left:0;z-index:3;
  padding:8px 14px;border-radius:999px;background:#1A1A1A;
  color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.01em;line-height:1;
}
.cd-viewer{
  position:relative;width:100%;padding-top:58%;     /* 100:58 box (padding trick works everywhere) */
  background:#fff;overflow:hidden;
}
.cd-frame{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:contain;padding:4%;
  -webkit-user-drag:none;user-select:none;
}
.cd-viewer.is-360 .cd-frame{object-fit:cover;object-position:var(--cd-frame-pos);padding:0;}
.cd-viewer.is-360{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.cd-viewer.is-360.is-dragging{cursor:grabbing;}
.cd-viewer:focus-visible{outline:2.5px solid var(--cd-ink);outline-offset:3px;}

.cd-hint{display:flex;justify-content:center;margin:14px 0 0;}
.cd-hint span{
  display:inline-block;padding:12px 28px;border:1px solid var(--cd-line);border-radius:999px;background:#fff;
  font-weight:700;font-size:.92rem;line-height:1.2;color:var(--cd-ink);
}

/* ---------- Title, price, spec tiles ---------- */
.cd-info{margin-top:26px;}
.cd-brand{margin:0;font-weight:600;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;color:var(--cd-muted);}
.cd-title{
  margin:10px 0 0;font-family:var(--display);font-weight:800;font-size:2rem;line-height:1.08;
  text-transform:uppercase;color:var(--cd-ink);
}
.cd-price{margin:12px 0 0;padding-bottom:20px;border-bottom:1px solid #E4E4E0;font-size:1.1rem;color:var(--cd-muted);}
.cd-specs{list-style:none;display:flex;flex-wrap:wrap;margin:22px -6px 0;padding:0;}
.cd-specs li{flex:1 1 calc(50% - 12px);min-width:0;margin:0 6px 12px;padding:16px 16px 15px;background:var(--cd-tile);border-radius:18px;}
.cd-specs strong{display:block;font-weight:700;font-size:1.05rem;line-height:1.2;color:var(--cd-ink);}
.cd-specs span{display:block;margin-top:9px;font-size:.8rem;color:var(--cd-muted);}

/* ---------- Shades ---------- */
.cd-shades-set{border:0;margin:14px 0 0;padding:0;min-width:0;}
.cd-label{display:block;width:100%;padding:0;margin:0 0 14px;font-weight:600;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--cd-muted);}
.cd-shades{display:flex;flex-wrap:wrap;align-items:center;margin:0 -6px;padding:5px 0;}
.cd-shade{position:relative;display:block;margin:0 6px 10px;cursor:pointer;}
.cd-shades-break{flex:0 0 100%;height:0;}                                       /* starts a new row (solid colours / two-tone colours) */
.cd-shade-name{margin-left:10px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cd-ink);}
.cd-shade input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.cd-swatch{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);}
.cd-shade input:checked + .cd-swatch{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cd-ink);}
.cd-shade input:focus-visible + .cd-swatch{outline:2.5px solid var(--cd-ink);outline-offset:6px;}
.cd-shade.is-off{opacity:.3;cursor:not-allowed;}
.cd-shade.is-off input{cursor:not-allowed;}
@media (max-width:340px){                                                      /* the very narrowest phones: slightly smaller swatches so the six solid colours still fit on one row */
  .cd-shades{margin:0 -4px;}
  .cd-shade{margin:0 4px 8px;}
  .cd-swatch{width:30px;height:30px;}
}

/* ---------- Buttons ---------- */
.cd-actions{display:flex;flex-wrap:wrap;margin:22px -7px 0;}
.cd-btn{
  display:inline-block;height:52px;line-height:52px;margin:0 7px 12px;padding:0 40px;border-radius:14px;
  font-weight:700;font-size:1rem;text-align:center;white-space:nowrap;color:var(--cd-ink);
}
.cd-btn-yellow{background:var(--yellow);}
.cd-btn-yellow:hover{filter:brightness(.97);}
.cd-btn-outline{background:#fff;border:1px solid var(--cd-line);line-height:50px;}
.cd-btn-outline:hover{border-color:#B9B9B4;}
.cd-btn-caps{text-transform:uppercase;letter-spacing:.02em;}
.cd-btn:focus-visible{outline:2.5px solid var(--cd-ink);outline-offset:3px;}

/* ---------- Why this car ---------- */
.cd-why{
  margin:44px 0 20px 4px;font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1.15;
  text-transform:uppercase;color:#000;
}
.cd-features{list-style:none;display:flex;flex-wrap:wrap;margin:0 -9px;padding:0;}
.cd-feature{
  flex:0 0 calc(100% - 18px);margin:0 9px 18px;padding:24px 22px 26px;background:#fff;border-radius:28px;
  box-shadow:0 6px 26px rgba(0,0,0,.06);
}
.cd-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--cd-mint);color:var(--cd-green);}
.cd-icon svg{width:17px;height:17px;}
.cd-feature strong{display:block;margin-top:20px;font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--cd-ink);}
.cd-feature-text{display:block;margin-top:8px;font-size:.88rem;line-height:1.4;color:var(--cd-muted);}

/* ---------- EMI + enquire ---------- */
.cd-lower{display:flex;flex-direction:column;margin:34px 0 0;}
.cd-card{display:flex;flex-direction:column;background:#fff;border-radius:28px;padding:26px 22px 20px;margin:0 0 18px;box-shadow:0 6px 26px rgba(0,0,0,.06);}
.cd-card-title{margin:0;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.2;color:var(--cd-ink);}
.cd-emi-tiles{list-style:none;display:flex;flex-wrap:wrap;margin:26px -6px 0;padding:0;}
.cd-emi-tiles li{flex:1 1 calc(50% - 12px);min-width:0;margin:0 6px 12px;padding:20px 18px 18px;background:var(--cd-tile);border-radius:18px;}
.cd-emi-tiles strong{display:block;font-weight:700;font-size:1.25rem;line-height:1.2;color:var(--cd-ink);}
.cd-emi-tiles span{display:block;margin-top:12px;font-size:.92rem;color:var(--cd-muted);}
.cd-emi > div{margin-top:16px;}
.cd-btn-wide{margin-left:0;padding:0 44px;}
.cd-ready-text{margin:14px 0 0;font-size:.95rem;line-height:1.4;color:var(--cd-muted);}
.cd-ready .cd-actions{margin:36px -7px 0;}

/* ============================================================
   TABLET (>=768px)
   ============================================================ */
@media (min-width:768px){
  .cd-main{padding-left:28px;padding-right:28px;padding-bottom:72px;}
  .cd-hero{border-radius:32px;padding:30px 30px 34px;}
  .cd-title{font-size:2.5rem;}
  .cd-price{font-size:1.2rem;}
  .cd-specs li{flex:1 1 0;}
  .cd-features{margin:0 -11px;}
  .cd-feature{flex:0 0 calc(50% - 22px);margin:0 11px 22px;}
  .cd-why{font-size:2rem;}
  .cd-card{padding:32px 30px 24px;}
  .cd-card-title{font-size:1.8rem;}
  .cd-emi-tiles li{flex:1 1 0;}
}

/* ============================================================
   DESKTOP (>=1024px): viewer left, details right; four Why cards; EMI + enquire side by side
   ============================================================ */
@media (min-width:1024px){
  body.cd-page{--cd-header-h:132px;}
  .cd-main{padding:calc(var(--cd-header-h) + 28px) 3% 96px;}
  .cd-hero{display:flex;align-items:center;border-radius:36px;padding:38px 46px 38px 38px;}
  .cd-media{flex:1 1 0;min-width:0;}
  .cd-info{flex:0 0 36%;max-width:36%;margin:0 0 0 56px;align-self:flex-start;padding-top:14px;}
  .cd-hint{margin-top:26px;}
  .cd-hint span{padding:13px 32px;font-size:.98rem;}
  .cd-brand{font-size:.9rem;}
  .cd-title{font-size:2.9rem;margin-top:12px;}
  .cd-price{font-size:1.3rem;padding-bottom:24px;}
  .cd-specs{margin-top:26px;}
  .cd-specs li{padding:20px 6px 18px 16px;border-radius:20px;}
  .cd-specs strong{font-size:1.1rem;white-space:nowrap;}
  .cd-swatch{width:36px;height:36px;}
  .cd-shades-set{margin-top:18px;}
  .cd-actions{margin-top:34px;}
  .cd-btn{padding:0 52px;font-size:1.05rem;}

  .cd-why{margin:64px 0 28px 4px;font-size:2.35rem;}
  .cd-features{margin:0 -19px;}
  .cd-feature{flex:1 1 calc(25% - 42px);max-width:calc(25% - 38px);min-width:0;margin:0 19px 0;padding:28px 26px 30px;min-height:208px;border-radius:30px;}
  .cd-icon{width:54px;height:54px;}
  .cd-feature strong{margin-top:24px;font-size:1.25rem;}
  .cd-feature-text{font-size:.9rem;}

  .cd-lower{flex-direction:row;margin:80px -19px 0;}
  .cd-card{flex:1 1 0;min-width:0;margin:0 19px;min-height:378px;padding:38px 40px;border-radius:34px;}
  .cd-card-title{font-size:2.15rem;}
  .cd-emi-tiles{margin:auto -9px 0;padding-top:30px;}
  .cd-emi-tiles li{margin:0 9px 0;padding:24px 22px 22px;}
  .cd-emi-tiles strong{font-size:1.4rem;}
  .cd-emi > div{margin-top:36px;}
  .cd-ready .cd-actions{margin-top:auto;padding-top:36px;}
  .cd-ready-text{font-size:1rem;}
}