/* Konfigūratorius — maketas 1:1 pagal gamintojo parduotuvę
   (shop.zeekr.eu/../configuration). Visi dydžiai, spalvos ir tarpai paimti
   matuojant tikrą puslapį (computed values), o ne iš ekrano kopijos:

     kairė (vaizdas)  #e8e8e8, juostelė apačioje 56 px kvadratėliai
     juostelė         60 px, #f5f5f5, aktyvus punktas baltas
     panelė           406 px, balta, viduje 358 px turinys (24 px paraštės)
     apačios juosta   fiksuota, 20 px paraštės, mygtukas 48 px, #24292b

   Šriftas paliktas svetainės (ZeekrText/ZeekrHeadline) — parduotuvė naudoja
   senesnį SuisseIntl, o mišrus šriftas viename puslapyje atrodytų blogiau nei
   raidžių formos skirtumas. Dydžiai ir svoriai — tikslūs. */

.cfg {
  --cfg-panel: 406px;
  --cfg-rail: 60px;
  --cfg-gutter: 24px;
  --cfg-ink: #24292b;
  --cfg-stage: #e8e8e8;
  --cfg-rail-bg: #f5f5f5;
  --cfg-hair: rgba(157, 154, 149, 0.35);
  --cfg-line: #d9d9d9;
  background-color: #fff;
  color: var(--cfg-ink);
  display: flex;
  min-height: 100vh;
}

/* ---------- kairė: automobilio vaizdas ---------- */

.cfg__left {
  background-color: var(--cfg-stage);
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.cfg__logo {
  left: var(--cfg-gutter);
  position: absolute;
  top: var(--cfg-gutter);
  z-index: 2;
}

.cfg__logo svg,
.cfg__logo img {
  display: block;
  height: 28px;
  width: auto;
}

.cfg__viewport {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  padding: 0 68px;
}

.cfg__render {
  animation: cfg-fade 0.3s ease-out;
  display: block;
  height: 100%;
  object-fit: contain;
  padding: 0 24px;
  width: 100%;
}

/* salono kadras pildo visą vaizdo plotą, be pilko fono (kaip gamintojo
   konfigūratoriuje); išorės kadrai lieka contain */
.cfg__viewport--int { padding: 0 }
.cfg__viewport--int .cfg__render { object-fit: cover; padding: 0 }
/* tamsiame salono kadre logotipas baltas */
.cfg__left:has(.cfg__viewport--int) .cfg__logo { color: #fff }

@keyframes cfg-fade {
  from { opacity: 0 }
  to { opacity: 1 }
}

.cfg__nav {
  background: none;
  border: 0;
  color: #88888a;
  cursor: pointer;
  height: 26px;
  padding: 0;
  position: absolute;
  top: calc(50% - 68px);
  width: 26px;
}

.cfg__nav svg { display: block; height: 26px; width: 26px }
.cfg__nav--prev { left: 50px }
.cfg__nav--next { right: 50px }
.cfg__nav[hidden] { display: none }

.cfg__thumbs {
  bottom: 40px;
  display: flex;
  left: 42px;
  position: absolute;
  right: 42px;
}

.cfg__thumb {
  background-color: var(--cfg-stage);
  border: 1px solid var(--cfg-hair);
  border-radius: 2px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 56px;
  margin-right: 12px;
  overflow: hidden;
  padding: 0;
  width: 56px;
}

.cfg__thumb img {
  border-radius: 2px;
  display: block;
  height: 100%;
  /* visas kadras, ne iškarpa — originale taip pat contain */
  object-fit: contain;
  width: 100%;
}

/* salono kadras pildo visą langelį — kaip originale (interjero thumb cover) */
.cfg__thumb--int img { object-fit: cover }

.cfg__thumb--active { border: 2px solid var(--cfg-ink) }

/* ---------- vidurinė juostelė ---------- */

.cfg__rail {
  background-color: var(--cfg-rail-bg);
  display: flex;
  flex: 0 0 var(--cfg-rail);
  flex-direction: column;
  width: var(--cfg-rail);
}

.cfg__rail-toggle {
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  height: 60px;
  margin-top: 8px;
  padding: 0;
  width: 60px;
}

.cfg__rail-toggle img { display: block; height: 60px; width: 60px }

.cfg__rail-items {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

/* naršyklė mygtuko turinį centruoja vertikaliai — dėl to ikonos 15 px paraštė
   nesuveikdavo ir varnelė lįsdavo ant ikonos; flex grąžina originalo elgesį */
.cfg__rail-item {
  align-items: flex-start;
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 54px;
  justify-content: flex-start;
  padding: 0;
  position: relative;
  width: 60px;
}

/* ikonos proporcijos skiriasi (24x18, 24x21…) — fiksuojam tik plotį,
   antraip jos ištįsta */
.cfg__rail-item img {
  display: block;
  height: auto;
  margin: 15px 18px 0;
  width: 24px;
}
.cfg__rail-item--active { background-color: #fff }

/* paaiškinimas užvedus pele — tamsus burbulas kairėje nuo ikonos */
.cfg__rail-tip {
  background-color: #24292b;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 16.8px;
  opacity: 0;
  padding: 8px 12px;
  pointer-events: none;
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.15s;
  white-space: nowrap;
}

.cfg__rail-item:hover .cfg__rail-tip,
.cfg__rail-item:focus-visible .cfg__rail-tip { opacity: 1 }

/* varnelė po ikona — originale 8x8, paraštės 0 26px 7px */
.cfg__rail-item img.cfg__rail-check {
  bottom: 7px;
  height: 8px;
  left: 26px;
  margin: 0;
  position: absolute;
  width: 8px;
}

/* ---------- dešinė panelė ---------- */

.cfg__panel {
  background-color: #fff;
  flex: 0 0 var(--cfg-panel);
  height: 100vh;
  overflow-y: auto;
  position: relative;
  width: var(--cfg-panel);
}

.cfg__panel-inner { padding: 0 var(--cfg-gutter) 156px }

.cfg__nav-row {
  align-items: center;
  display: flex;
  height: 76px;
  justify-content: space-between;
  /* originale po eilute yra 40 px tuščias blokas — be jo pavadinimas per aukštai */
  margin-bottom: 40px;
}

.cfg__change {
  align-items: center;
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  line-height: 18px;
  padding: 0;
}

.cfg__change svg { flex: 0 0 24px; height: 24px; margin-right: 4px; width: 24px }

.cfg__title {
  font-family: var(--font-headline, inherit);
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  margin: 0 0 6px;
}

.cfg__tagline {
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  margin: 0;
}

.cfg__step { padding-bottom: 28px }

.cfg__heading {
  font-family: var(--font-headline, inherit);
  font-size: 24px;
  font-weight: 450;
  line-height: 28.8px;
  margin: 40px 0 24px;
}

/* bandomojo važiavimo mygtukas viršutinėje eilutėje */
.cfg__test-drive {
  border: 1px solid var(--cfg-ink);
  border-radius: 4px;
  color: var(--cfg-ink);
  font-size: 14px;
  line-height: 16.8px;
  padding: 6px 16px;
  text-decoration: none;
}

/* ---------- priedai (ZEEKR Care) ---------- */

.cfg__step-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 40px 0 24px;
}

.cfg__step-head .cfg__heading { margin: 0 }

.cfg__more {
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
  padding: 0;
  text-decoration: underline;
}

.cfg__acc {
  align-items: stretch;
  background-color: #fff;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--cfg-hair);
  cursor: pointer;
  display: flex;
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
  width: 100%;
}

.cfg__acc--active { box-shadow: 0 0 0 2px var(--cfg-ink) }

.cfg__acc-media {
  background-color: #f8f8f8;
  border-radius: 2px;
  flex: 0 0 138px;
  height: 138px;
  margin-right: 16px;
  overflow: hidden;
}

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

.cfg__acc-text {
  align-self: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 0;
}

.cfg__acc-name { display: block; font-size: 16px; font-weight: 450; line-height: 22.4px }
.cfg__acc-desc { display: block; font-size: 14px; line-height: 20px; opacity: 0.7; padding-top: 6px }
.cfg__acc-price { display: block; font-size: 16px; line-height: 22.4px; padding-top: 10px }

/* pasirinktas paketas — juodas langelis su balta varnele (kaip originale) */
.cfg__acc-box--checked {
  background-color: var(--cfg-ink);
  border-color: var(--cfg-ink);
}

.cfg__acc-box--checked::after {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: '';
  height: 4px;
  left: 4px;
  position: absolute;
  top: 5px;
  transform: rotate(-45deg);
  width: 9px;
}

/* įskaičiuota paslauga — langelis pažymėtas, bet neperjungiamas */
.cfg__acc--fixed { cursor: default }
.cfg__acc-box--fixed { background-color: #ebe8e3; border-color: var(--cfg-hair) }

.cfg__acc-box--fixed::after {
  border-bottom: 2px solid #9d9a95;
  border-left: 2px solid #9d9a95;
  content: '';
  height: 4px;
  left: 4px;
  position: absolute;
  top: 5px;
  transform: rotate(-45deg);
  width: 9px;
}

.cfg__acc-check {
  align-items: center;
  display: flex;
  flex: 0 0 20px;
  margin: 0 22px;
}

.cfg__acc-box {
  border: 1px solid var(--cfg-hair);
  border-radius: 2px;
  display: block;
  height: 20px;
  position: relative;
  width: 20px;
}

.cfg__acc--active .cfg__acc-box {
  background-color: var(--cfg-ink);
  border-color: var(--cfg-ink);
}

.cfg__acc--active .cfg__acc-box::after {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: '';
  height: 4px;
  left: 4px;
  position: absolute;
  top: 5px;
  transform: rotate(-45deg);
  width: 9px;
}

.cfg__empty { font-size: 14px; line-height: 20px; opacity: 0.6 }

/* ---------- santrauka (ZEEKR Finance) ---------- */

.cfg__sum-row {
  border-bottom: 1px solid var(--cfg-hair);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 0;
}

.cfg__sum-row--total {
  border-bottom: 0;
  font-size: 16px;
  font-weight: 450;
  padding-top: 20px;
}

.cfg__sum-label { font-size: 14px; line-height: 20px; opacity: 0.6 }
.cfg__sum-value { font-size: 14px; line-height: 20px; text-align: right }

/* ---------- versijos rodikliai ---------- */

/* originale rodiklių blokas turi 32 px paraštes; jos susilieja su antraštės
   ir kortelių paraštėmis — būtent taip gaunami tikslūs atstumai */
.cfg__stats { display: flex; margin: 32px 0 }

.cfg__stat { flex: 1 1 0; min-width: 0; text-align: center }

.cfg__stat-value {
  font-family: var(--font-headline, inherit);
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  margin-bottom: 4px;
}

.cfg__stat-unit {
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
  margin-left: 4px;
}

.cfg__stat-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  margin: 0 15px;
  min-height: 28.8px;
  opacity: 0.7;
}

.cfg__stat-line {
  background-color: var(--cfg-line);
  flex: 0 0 1px;
  height: 42px;
  margin: 10px 0;
  width: 1px;
}

/* ---------- versijos kortelė ---------- */

.cfg__cards { margin-top: 32px }

.cfg__card {
  background-color: #fff;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--cfg-hair);
  cursor: pointer;
  display: block;
  margin: 0 0 12px;
  padding: 0 20px 20px;
  text-align: left;
  width: 100%;
}

.cfg__card--active { box-shadow: 0 0 0 2px var(--cfg-ink) }

.cfg__card-row {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.cfg__card-name,
.cfg__card-price {
  font-size: 16px;
  font-weight: 450;
  line-height: 19.2px;
}

.cfg__card-desc {
  font-size: 14px;
  font-weight: 450;
  line-height: 16.8px;
  padding-top: 20px;
}

/* ---------- opcijų sekcijos ---------- */

.cfg__sep {
  background-color: var(--cfg-rail-bg);
  height: 8px;
  margin: 0 calc(var(--cfg-gutter) * -1);
}

.cfg__group { margin: 40px 0 28px }

.cfg__group-title {
  font-family: var(--font-headline, inherit);
  font-size: 24px;
  font-weight: 450;
  line-height: 33.6px;
  margin: 0 0 12px;
}

.cfg__group-selected {
  display: flex;
  justify-content: space-between;
  margin: 0 0 24px;
}

.cfg__group-name {
  font-size: 16px;
  font-weight: 450;
  line-height: 22.4px;
}

.cfg__group-price {
  font-size: 14px;
  font-weight: 400;
  line-height: 20.4px;
}

.cfg__tiles { display: flex; flex-wrap: wrap; gap: 12px }

/* Trys kortelės eilutėje bet kokiu atveju. Fiksuotas 111 px veikia tik tada,
   kai panelė lygiai 358 px pločio — o Windows naršyklėse slankiklis atima
   ~15 px ir trečia kortelė nukrisdavo žemyn. */
.cfg__tile {
  align-items: center;
  aspect-ratio: 1;
  background-color: #fff;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--cfg-hair);
  cursor: pointer;
  display: flex;
  flex: 0 0 calc((100% - 24px) / 3);
  justify-content: center;
  margin: 0;
  max-width: 111px;
  padding: 0;
}

.cfg__tile--active { box-shadow: 0 0 0 2px var(--cfg-ink) }

.cfg__tile-media {
  border-radius: 999px;
  display: block;
  height: 55.5px;
  overflow: hidden;
  width: 55.5px;
}

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

/* spalvos be importuotos nuotraukos — tas pats „rutulio" įspūdis kaip kortelėse
   iš parduotuvės, kad tinklelis neatrodytų mišrus */
.cfg__tile-media--swatch {
  background-image:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 68% 76%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 52%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* paketai neturi nuotraukos — vietoj apskritimo rodomas pavadinimas */
.cfg__tile--text {
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  text-align: center;
}

.cfg__tile-text { font-size: 13px; line-height: 15.6px }
.cfg__tile-price { font-size: 12px; line-height: 14.4px; opacity: 0.6 }

.cfg__note {
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  opacity: 0.6;
  padding-bottom: 8px;
}

/* ---------- paketai: plati kortelė su nuotrauka ---------- */

.cfg__pkg-list { margin: 40px 0 }

.cfg__pkg {
  background: none;
  border: 1px solid var(--cfg-hair);
  border-radius: 3px;
  cursor: pointer;
  display: block;
  margin: 0 0 12px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  width: 100%;
}

/* pasirinkimą rodo tik langelis — kortelės rėmelis lieka pilkas (kaip
   originale) */
.cfg__pkg--fixed { cursor: default }

.cfg__pkg-media { display: block; height: 205px; overflow: hidden; width: 100% }
.cfg__pkg-media img { display: block; height: 100%; object-fit: cover; width: 100% }

.cfg__pkg-body {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 20px;
}

.cfg__pkg-name { display: block; font-size: 16px; font-weight: 450; line-height: 22.4px }
.cfg__pkg-note { color: #66696b; display: block; font-size: 14px; line-height: 19.6px; padding-top: 4px }
.cfg__pkg-price { display: block; font-size: 16px; line-height: 22.4px; padding-top: 6px }

/* informacinė paslaugos kortelė — nespaudžiama, be žymimojo langelio */
.cfg__acc--info { cursor: default }

/* ---------- wallbox blokas (Power žingsnis) ---------- */

.cfg__wallbox { margin-bottom: 28px }

.cfg__wallbox-q { font-size: 16px; font-weight: 450; line-height: 22.4px; margin: 0 0 8px }
.cfg__wallbox-sub { font-size: 14px; line-height: 19.6px; margin: 0 0 16px; opacity: 0.8 }

.cfg__wallbox-radios { display: flex; gap: 28px; margin-bottom: 20px }

.cfg__wallbox-radio {
  align-items: center;
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 8px;
  padding: 0;
}

.cfg__wallbox-dot {
  border: 1px solid var(--cfg-hair);
  border-radius: 50%;
  display: block;
  height: 20px;
  position: relative;
  width: 20px;
}

.cfg__wallbox-radio--on .cfg__wallbox-dot { border-color: var(--cfg-ink) }

.cfg__wallbox-radio--on .cfg__wallbox-dot::after {
  background: var(--cfg-ink);
  border-radius: 50%;
  content: '';
  inset: 4px;
  position: absolute;
}

.cfg__wallbox-card {
  align-items: center;
  border: 1px solid var(--cfg-hair);
  border-radius: 3px;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
}

.cfg__wallbox-card img { display: block; height: 96px; object-fit: contain; width: 120px }
.cfg__wallbox-name { display: block; font-size: 16px; font-weight: 450; line-height: 22.4px }
.cfg__wallbox-desc { display: block; font-size: 14px; line-height: 19.6px; opacity: 0.7; padding-top: 4px }
.cfg__wallbox-note { font-size: 12px; line-height: 17px; margin: 0; opacity: 0.6 }

/* ---------- teisinė pastaba ---------- */

.cfg__disclaimer {
  color: var(--cfg-ink);
  font-size: 14px;
  line-height: 19.6px;
  margin: 40px 0 100px;
}

.cfg__disclaimer p { margin: 0 0 16px }
.cfg__disclaimer p:last-child { margin-bottom: 0 }

/* ---------- santraukos panelė (rodyklė prie kainos) ---------- */

.cfg__preview {
  background-color: #fff;
  bottom: 0;
  overflow-y: auto;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  width: 466px;
  z-index: 60;
}

.cfg__preview[hidden] { display: none }

.cfg__preview-close {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  height: 28px;
  padding: 0;
  position: absolute;
  right: 24px;
  top: 24px;
  width: 28px;
  z-index: 1;
}

.cfg__preview-close svg { display: block; height: 28px; width: 28px }
.cfg__preview-close:hover, .cfg__preview-edit:hover { opacity: 0.8 }

/* tamsi antraštės dalis su automobilio nuotrauka */
.cfg__preview-head {
  background-color: #2e2e33;
  color: #fff;
  margin: -24px -24px 0;
  padding: 0 24px;
}

.cfg__preview-title {
  font-family: var(--font-headline, inherit);
  font-size: 30px;
  font-weight: 450;
  line-height: 42px;
  margin: 0 0 24px;
  padding-top: 76px;
}

.cfg__preview-row {
  display: flex;
  justify-content: space-between;
}

.cfg__preview-version { font-size: 18px; font-weight: 450; line-height: 25.2px }
.cfg__preview-price { font-size: 14px; line-height: 19.6px }

.cfg__preview-edit {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 19.6px;
  padding: 0;
  text-decoration: underline;
}

.cfg__preview-img { display: block; margin-top: 20px; width: 100% }

.cfg__preview-block { padding: 40px 0 0 }
.cfg__preview-block--first { padding: 40px 0 }

.cfg__preview-heading { font-size: 18px; font-weight: 450; line-height: 25.2px }

/* pasirinkimai dviem stulpeliais su apvaliu paveikslėliu */
.cfg__preview-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
}

.cfg__preview-item { display: flex; gap: 12px; padding-bottom: 24px; width: 50% }
.cfg__preview-item-img { border-radius: 999px; flex: 0 0 40px; height: 40px; overflow: hidden }
.cfg__preview-item-img img { display: block; height: 100%; object-fit: cover; width: 100% }
.cfg__preview-item-name { display: block; font-size: 16px; font-weight: 450; line-height: 22.4px }
.cfg__preview-item-note { color: #66696b; display: block; font-size: 14px; line-height: 19.6px }

/* paslaugų įrašai — kortelė per visą plotį */
.cfg__preview-card {
  border: 1px solid var(--cfg-hair);
  border-radius: 3px;
  margin-top: 24px;
  padding: 20px;
}

.cfg__preview-sep {
  background-color: var(--cfg-rail-bg);
  height: 8px;
  margin: 0 -24px;
}

@media (max-width: 1023px) {
  .cfg__preview { width: auto }
}

/* ---------- paketo „Rodyti daugiau" modalas ----------
   Išmatuota iš originalo: juosta 586 aukščio per visą plotį (gretimos
   skaidrės kyšo), skaidrė 877.5+60 tarpas, kortelė 900x506 (40 0 paraštės),
   X eilutė 64 (svg 24, m20), tekstas 330 nuo viršaus, punktai 14/18 be tarpų,
   taškai 8px (aktyvus baltas) 8px nuo apačios, rodyklės 48 už 100px nuo
   kraštų — matomos tik užvedus. */

.cfg__pkg-more {
  color: var(--cfg-ink);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 19.6px;
  padding-top: 4px;
  text-decoration: underline;
}

.cfg__detail {
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 70;
}

.cfg__detail[hidden] { display: none }

.cfg__detail-strip {
  height: 586px;
  overflow: hidden;
  position: relative;
  /* tempiama horizontaliai; vertikalus slinkimas lieka naršyklei */
  touch-action: pan-y;
  width: 100%;
}

.cfg__detail-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}

.cfg__detail-slide { cursor: grab; flex: 0 0 877.5px; margin-right: 60px }

.cfg__detail-strip--dragging .cfg__detail-slide { cursor: grabbing }

.cfg__detail-slide--active .cfg__detail-card { filter: brightness(1) }

.cfg__detail-card {
  background: #fff;
  /* parduotuvė gretimas skaidres pritemdo: kortelė brightness(.5),
     aktyvi skaidrė kompensuoja atgal iki pilno ryškumo */
  filter: brightness(0.5);
  border-radius: 3px;
  display: flex;
  height: 506px;
  margin: 40px 0;
  position: relative;
  width: 900px;
}

.cfg__detail-media { border-radius: 3px 0 0 3px; flex: 0 0 506px; height: 506px; overflow: hidden }
.cfg__detail-media img { display: block; height: 100%; object-fit: cover; width: 100% }

.cfg__detail-right { flex: 1 1 auto; min-width: 0 }

/* X eilutė 64 aukščio — po ja iškart prasideda tekstas (lygiuota viršuje) */
.cfg__detail-x {
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  display: block;
  height: 24px;
  margin: 20px 20px 20px auto;
  padding: 0;
  width: 24px;
}

.cfg__detail-x svg { display: block; height: 24px; width: 24px }

.cfg__detail-text { display: block; margin: 0 32px; width: 330px }

.cfg__detail-title {
  color: var(--cfg-ink);
  font-family: var(--font-headline, inherit);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin: 0 0 32px;
}

.cfg__detail-msg { color: var(--cfg-ink); font-size: 14px; line-height: 18px; margin: 0 }

.cfg__detail-dots {
  bottom: 8px;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
}

.cfg__detail-dot {
  background: #66696b;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 8px;
  margin: 0 4px;
  padding: 0;
  width: 8px;
}

.cfg__detail-dot--active { background: #fff }

.cfg__detail-nav {
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s;
  width: 48px;
  z-index: 1;
}

.cfg__detail-strip:hover .cfg__detail-nav { opacity: 1 }
.cfg__detail-nav svg { height: 22px; width: 22px }
.cfg__detail-nav--prev { left: 100px }
.cfg__detail-nav--next { right: 100px }
.cfg__detail-nav[hidden] { display: none }

@media (max-width: 1023px) {
  .cfg__detail-strip { height: auto; max-height: 92vh; overflow-y: auto }
  .cfg__detail-track { display: block; transform: none !important }
  .cfg__detail-slide { display: none; margin: 0 }
  .cfg__detail-slide--active { display: block }
  .cfg__detail-card { flex-direction: column; height: auto; margin: 0 auto; width: 92vw }
  .cfg__detail-media { border-radius: 3px 3px 0 0; flex: none; height: auto }
  .cfg__detail-text { margin: 0 24px 24px; width: auto }
  .cfg__detail-nav { opacity: 1 }
  .cfg__detail-nav--prev { left: 12px }
  .cfg__detail-nav--next { right: 12px }
}

/* ---------- apačios juosta ---------- */

.cfg__bar {
  background-color: #fff;
  bottom: 0;
  box-shadow: inset 0 0.5px 0 rgba(36, 41, 43, 0.15);
  padding: 20px;
  position: fixed;
  right: 0;
  width: var(--cfg-panel);
  z-index: 20;
}

.cfg__bar-total {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 24px;
}

.cfg__bar-price { font-size: 20px; font-weight: 450; line-height: 24px; margin-right: 6px }

.cfg__bar-toggle {
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  height: 20px;
  padding: 0;
  width: 20px;
}

.cfg__bar-toggle svg { display: block; height: 20px; width: 20px }
.cfg__bar--open .cfg__bar-toggle svg { transform: rotate(180deg) }

/* išskleista kainos sudėtis */
.cfg__bar-break { display: none; padding-bottom: 12px }
.cfg__bar--open .cfg__bar-break { display: block }

.cfg__bar-line {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  line-height: 20px;
  padding: 4px 0;
}

.cfg__submit {
  align-items: center;
  background-color: var(--cfg-ink);
  border: 0;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 48px;
  justify-content: center;
  line-height: 16.8px;
  margin-top: 20px;
  width: 100%;
}

/* slapukų mygtukas svetainėje stovi kairėje apačioje — čia ten rakursų
   juostelė, todėl pakeliamas virš jos (tuščias vaizdo plotas) */
.zkc-fab { bottom: 120px !important }

/* panelė suskleista — automobilis per visą plotį */
.cfg--collapsed .cfg__panel,
.cfg--collapsed .cfg__bar { display: none }
/* suskleidus panelę rodyklė apsiverčia (ikona yra <img>, ne <svg>) */
.cfg--collapsed .cfg__rail-toggle img { transform: scaleX(-1) }

/* ---------- mobili versija ---------- */

@media (max-width: 1023px) {
  .cfg { display: block }
  .cfg__rail { display: none }

  .cfg__viewport { height: auto; padding: 56px 0 0 }
  .cfg__render { aspect-ratio: 3 / 2; height: auto; padding: 0 12px }
  /* mobiliajame logotipas stovi virš kadro (viewport viršutinėje paraštėje) */
  .cfg__viewport--int { padding: 56px 0 0 }
  .cfg__left:has(.cfg__viewport--int) .cfg__logo { color: inherit }
  .cfg__nav { top: calc(50% - 8px) }
  .cfg__nav--prev { left: 8px }
  .cfg__nav--next { right: 8px }

  .cfg__thumbs { bottom: 12px; left: 12px; overflow-x: auto; right: 12px }

  .cfg__panel { height: auto; overflow: visible; width: auto }
  .cfg__panel-inner { padding: 0 16px 180px }
  .cfg__title { font-size: 26px; line-height: 31px }
  .cfg__bar { left: 0; width: auto }
  .cfg__tile { max-width: 96px }
  .cfg__tile-media { height: 48px; width: 48px }
}

/* ---------- „Išsaugoti konfigūraciją" langas ---------- */

.cfg__dialog {
  align-items: center;
  background: rgba(36, 41, 43, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 60;
}

.cfg__dialog[hidden] { display: none }

.cfg__dialog-box {
  background: #fff;
  border-radius: 3px;
  max-height: 90vh;
  max-width: 560px;
  overflow-y: auto;
  padding: 32px 24px;
  position: relative;
  width: 100%;
}

.cfg__dialog-close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.cfg__dialog-title {
  font-family: var(--font-headline, inherit);
  font-size: 24px;
  font-weight: 450;
  line-height: 28.8px;
  margin: 0 0 8px;
}

.cfg__dialog-summary { font-size: 14px; line-height: 20px; margin: 0 0 20px; opacity: 0.7 }

.cfg__form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr }

.cfg__input {
  background: #fff;
  border: 1px solid var(--cfg-hair);
  border-radius: 3px;
  color: var(--cfg-ink);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
}

.cfg__input:focus { border-color: var(--cfg-ink); outline: none }
.cfg__input--full { grid-column: 1 / -1 }

.cfg__consent {
  align-items: flex-start;
  display: flex;
  font-size: 12px;
  gap: 10px;
  line-height: 18px;
  opacity: 0.7;
}

.cfg__consent input { flex-shrink: 0; margin-top: 2px }

/* spam robotų laukelis — matomas tik jiems */
.cfg__hp { height: 0; opacity: 0; pointer-events: none; position: absolute; width: 0 }

.cfg__toast {
  background: var(--cfg-ink);
  border-radius: 3px;
  bottom: 148px;
  color: #fff;
  font-size: 14px;
  left: 50%;
  line-height: 20px;
  max-width: 90vw;
  padding: 12px 18px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 70;
}

@media (max-width: 599px) {
  .cfg__form { grid-template-columns: 1fr }
}

/* ---------- modelių pasirinkimas: šoninė panelė ----------
   Originale tai ant-drawer iš dešinės: 466 px plotis, 24 px paraštės,
   kortelė 418 px su 3:2 nuotrauka ir baltu pavadinimu viršuje kairėje,
   apačioje fiksuotas „Tęsti" mygtukas (neaktyvus, kol nepasirinkta). */

.cfg__drawer {
  background-color: #fff;
  bottom: 0;
  overflow-y: auto;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  width: 466px;
  z-index: 60;
}

.cfg__drawer[hidden] { display: none }

.cfg__drawer-close {
  background: none;
  border: 0;
  color: var(--cfg-ink);
  cursor: pointer;
  height: 28px;
  padding: 0;
  position: absolute;
  right: 24px;
  top: 24px;
  width: 28px;
}

.cfg__drawer-close svg { display: block; height: 28px; width: 28px }
.cfg__dialog-close svg { display: block; height: 24px; width: 24px }

.cfg__drawer-title {
  font-family: var(--font-headline, inherit);
  font-size: 30px;
  font-weight: 450;
  line-height: 42px;
  margin: 0;
  padding: 52px 0 24px;
}

.cfg__drawer-list { padding-bottom: 136px }

.cfg__model-card {
  background: none;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  margin: 0 0 12px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.cfg__model-card--active { border-color: var(--cfg-ink) }

.cfg__model-media {
  border: 1px solid #fff;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  position: relative;
}

/* nuotraukos iš parduotuvės tamsios, bet 001 kadras šviesesnis — silpnas
   perėjimas viršuje garantuoja, kad baltas pavadinimas skaitysis visur */
.cfg__model-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 40%);
  content: '';
  inset: 0;
  position: absolute;
}

.cfg__model-card img {
  aspect-ratio: 3 / 2;
  display: block;
  object-fit: cover;
  width: 100%;
}

.cfg__model-name {
  color: #fff;
  z-index: 1;
  font-family: var(--font-headline, inherit);
  font-size: 24px;
  font-weight: 450;
  left: 24px;
  line-height: 34px;
  position: absolute;
  text-align: left;
  top: 24px;
}

.cfg__model-price {
  color: #fff;
  display: block;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.85;
}

/* fiksuota, kaip originale — antraip slenkant uždengia korteles */
.cfg__drawer-footer {
  background-color: #fff;
  bottom: 0;
  padding: 40px 24px;
  position: fixed;
  right: 0;
  width: 466px;
}

.cfg__drawer-btn {
  background-color: var(--cfg-ink);
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  height: 56px;
  line-height: 25px;
  width: 100%;
}

.cfg__drawer-btn[disabled] { background-color: #bdbfbf; cursor: default }

@media (max-width: 1023px) {
  .cfg__drawer { width: auto }
  .cfg__drawer-footer { left: 0; width: auto }
}