/* ===== 360 viewer + colour picker ===== */
.cp{background:var(--beige)}
.cp__inner{padding:64px var(--section-pad)}
.cp__title{font-size:44px;line-height:52.8px;font-weight:700;color:var(--navy)}
.cp__nowrap{white-space:nowrap}

.cp__stage{position:relative;margin-top:32px}
.cp__viewer{
  height:660px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.cp__viewer:active{cursor:grabbing}
/* The 360 frames carry a wide transparent margin around the car, so fitting the
   file leaves the vehicle far smaller than the Figma. Scale past the stage width
   (the stage clips the empty margin) until the car itself measures as designed:
   876px wide on desktop, 306px on mobile. */
.cp__viewer img{width:134%;max-width:none;flex:none;pointer-events:none}

.cp__picker{position:absolute;bottom:0;right:0;width:auto;min-width:334px}
.cp__name{
  font-size:32px;line-height:40px;font-weight:600;color:var(--navy);
  text-align:right;
}
/* Swatches run left-to-right in the design, unlike the rest of the page. */
.cp__swatches{display:flex;direction:ltr;gap:26px;margin-top:16px}
/* Figma: 44px circles (26px apart on desktop, 18px on mobile). They may shrink
   below 44 so a six-colour model still fits its row instead of being clipped. */
.cp__sw{
  width:44px;aspect-ratio:1;border-radius:50%;flex:0 1 44px;min-width:0;
  border:1px solid rgba(2,11,36,.15);
  transition:box-shadow .2s ease;
}
.cp__sw.is-active{box-shadow:0 0 0 3px var(--beige),0 0 0 5px var(--navy)}

.cp__desc{
  width:492px;margin-top:28px;
  font-size:16px;line-height:21px;font-weight:400;color:var(--navy);
}

/* ===== Mobile: stacked and centred ===== */
@media (max-width:1024px){
  .cp__inner{padding:40px 16px}
  .cp__title{font-size:30px;line-height:36px}
  .cp__stage{margin-top:20px}
  .cp__viewer{height:220px}
  .cp__viewer img{width:169%}
  .cp__picker{position:static;width:auto;min-width:0;margin-top:8px}
  .cp__name{font-size:22px;line-height:28.78px;text-align:center}
  .cp__swatches{justify-content:center;gap:18px;margin-top:12px}
  .cp__desc{width:auto;margin-top:20px;font-size:14px;line-height:20px}
}