/* ============================================================
   ТОКЕНЫ (design tokens) — вся палитра и типографика в одном месте.
   Меняете тут — меняется везде. Это главное правило поддерживаемого CSS.
   ============================================================ */
:root {   /* бирюзовый — "экран сканера" */   /* янтарный — "индикатор" */

  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
}

/* Фоновое свечение — статичное, без лишней анимации (не перегружаем) */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.topbar__logo { font-size: 20px; }
.topbar__logo .accent { color: var(--accent); }
.topbar__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px var(--accent-soft);
  margin-right: 10px;
}
.topbar__status {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ============================================================
   STAGE / заголовок
   ============================================================ */
.stage {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
}
.stage__subtitle {
  margin-bottom: 56px;
}

/* ============================================================
   STEPPER — три "разъёма" + соединяющий кабель
   ============================================================ */
.stepper {
  display: grid;
}

/* Кабель — линия между шагами, "загорается" по мере прогресса */
.cable {
  position: absolute;
  top: 46px;
  height: 2px;
  background: var(--glass-border);
  z-index: 0;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
#cable1 { left: calc(12.5% + 10px); width: calc(25% - 20px); }
#cable2 { left: calc(37.5% + 10px); width: calc(25% - 20px); }
#cable3 { left: calc(62.5% + 10px); width: calc(25% - 20px); }
.cable--active {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

.step {
  position: relative;
  z-index: 1;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 20px;
  text-align: left;
  transition: opacity 0.4s ease, filter 0.4s ease, border-color 0.3s ease;
}
.step--disabled {
  filter: grayscale(0.4);
}
.step--done {
  border-color: var(--accent-soft);
}

.step__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

/* Кастомный dropdown — не нативный <select>, чтобы полностью стилизовать */
.dropdown {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}
.dropdown:disabled { cursor: not-allowed; }
.dropdown__chevron { flex-shrink: 0; transition: transform 0.2s; }
.dropdown[aria-expanded="true"] .dropdown__chevron { transform: rotate(180deg); }

.dropdown__list {
  list-style: none;
  margin: 8px 0 0;
}
.dropdown__list li {
  font-size: 14px;
  cursor: pointer;
}
.dropdown__list li:hover,
.dropdown__list li:focus {
  outline: none;
}

/* ============================================================
   RESULT — карточка сборки
   ============================================================ */
.result {
  padding: 32px;
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  animation: rise 0.5s ease;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result__scan {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.result__title {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 18px;
}
.result__specs {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}
.result__specs span {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.result__reset {
  background: transparent;
  border: 1px solid var(--glass-border);
  padding: 10px 20px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.result__reset:hover { border-color: var(--accent); color: var(--accent); }

/* Доступность: видимый фокус клавиатуры */
button:focus-visible, li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Уважение к reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .result { animation: none; }
}

/* Мобильная адаптация */
@media (max-width: 720px) {
  .stepper { grid-template-columns: 1fr; }
  .cable { display: none; }
  .topbar { padding: 18px 20px; }
}

/* ============================================================
   CATALOG RESULT — карточка автомобиля, масла и фильтры
   Вынесено из app.js без изменения внешнего вида.
   ============================================================ */
.result {
      max-width: 1600px;
    }

    .result__specs {
      display: block !important;
    }

    .catalog-result {
      width: 100%;
      text-align: left;
      margin-top: 28px;
    }

    .catalog-car {
      margin-bottom: 34px;
      padding: 22px;
      border: 1px solid rgba(76, 236, 220, .18);
      border-radius: 18px;
      background: rgba(255,255,255,.018);
    }

    .catalog-car__media {
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(255,255,255,.035);
    }

    .catalog-car__image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .catalog-car__specs {
      flex-wrap: wrap;
    }

    .catalog-spec {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 145px;
      padding: 10px 14px;
      border: 1px solid rgba(126, 157, 160, .25);
      border-radius: 11px;
      background: rgba(5, 20, 23, .28);
    }

    .catalog-spec__label {
      font-family: Inter, sans-serif;
      font-size: 12px;
      color: #789497;
    }

    .catalog-spec__value {
      font-family: "IBM Plex Mono", monospace;
      font-size: 14px;
      font-weight: 500;
      color: #d7e5e6;
    }

    .catalog-section {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(126, 157, 160, .18);
    }

    .catalog-section__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .catalog-section__title {
      margin: 0;
      font-family: Rajdhani, sans-serif;
      font-size: 25px;
      font-weight: 700;
      color: #e5eeee;
    }

    .catalog-section__count {
      min-width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      border-radius: 999px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      color: #47e5d4;
      background: rgba(71,229,212,.09);
      border: 1px solid rgba(71,229,212,.25);
    }

    .catalog-products {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 12px;
    }

    .catalog-product {
      min-height: 126px;
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 14px;
      padding: 14px;
      border: 1px solid rgba(126, 157, 160, .18);
      border-radius: 14px;
      background: rgba(255,255,255,.018);
    }

    .catalog-product:not(:has(.catalog-product__media)) {
      grid-template-columns: 1fr;
    }

    .catalog-product__media {
      width: 96px;
      height: 96px;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
    }

    .catalog-product__image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .catalog-product__image--filter {
      padding: 6px;
      box-sizing: border-box;
    }

    .catalog-product__content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .catalog-product__brand {
      margin-bottom: 4px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #47e5d4;
    }

    .catalog-product__name {
      margin: 0 0 10px;
      font-family: Inter, sans-serif;
      font-size: 14px;
      line-height: 1.35;
      font-weight: 500;
      color: #dbe8e9;
    }

    .catalog-product__price-row {
      display: flex;
      gap: 10px;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .catalog-product__unit-price,
    .catalog-product__formula {
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px;
      color: #89a3a5;
    }

    .catalog-product__total {
      font-family: "IBM Plex Mono", monospace;
      font-size: 17px;
      color: #ff9c43;
    }

    .catalog-product__total--request {
      font-family: Inter, sans-serif;
      font-size: 14px;
      line-height: 1.35;
    }

    .catalog-product__formula {
      margin-top: 5px;
    }

    .catalog-empty {
      padding: 16px;
      border: 1px dashed rgba(126, 157, 160, .22);
      border-radius: 12px;
      font-family: Inter, sans-serif;
      font-size: 13px;
      color: #718c8f;
    }

    @media (max-width: 800px) {
      .catalog-car {
        grid-template-columns: 1fr;
      }

      .catalog-car__media {
        height: 160px;
      }

      .catalog-products {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .catalog-product {
        grid-template-columns: 74px 1fr;
      }

      .catalog-product__media {
        width: 74px;
        height: 74px;
      }

      .catalog-product__name {
        font-size: 13px;
      }
    }

/* ============================================================
   CATALOG CALCULATOR — функциональный слой
   Внешний дизайн можно менять позже без правок app.js.
   ============================================================ */

.catalog-product {
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.catalog-product--selected {
  border-color: var(--accent);
  background: rgba(77, 216, 200, .07);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.catalog-product__select {
  align-self: flex-start;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}

.catalog-product__select:hover,
.catalog-product__select[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.catalog-calculator {
  padding-top: 24px;
  border-top: 1px solid var(--accent-soft);
}

.catalog-calculator__row {
  border-bottom: 1px solid rgba(180, 225, 225, .09);
}

.catalog-calculator__row--work {
  padding-left: 18px;
}

.catalog-calculator__price--request {
  max-width: 190px;
  font-family: var(--font-body);
  font-size: 13px;
}

.catalog-calculator__totals {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.catalog-calculator__total-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
}

.catalog-calculator__total-row strong {
  font-family: var(--font-mono);
}

.catalog-calculator__total-row--grand {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  font-size: 17px;
  color: var(--accent);
}

.catalog-calculator__note {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .stage {
    padding-left: 14px;
    padding-right: 14px;
  }

  .result {
    margin-top: 36px;
    padding: 20px 14px;
  }

  .catalog-car {
    padding: 14px;
    gap: 16px;
  }

  .catalog-car__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-spec {
    min-width: 0;
  }

  .catalog-product__select {
    width: 100%;
    text-align: center;
  }

  .catalog-calculator__row {
    gap: 10px;
  }
}

@media (max-width: 440px) {
  .topbar {
    align-items: flex-start;
    gap: 12px;
  }

  .topbar__status {
    text-align: right;
  }

  .catalog-car__specs {
    grid-template-columns: 1fr;
  }

  .catalog-product {
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 10px;
  }

  .catalog-product__media {
    width: 64px;
    height: 64px;
  }

  .catalog-product__price-row {
    align-items: flex-start;
  }

  .catalog-calculator__row,
  .catalog-calculator__total-row {
    flex-direction: column;
    gap: 5px;
  }

  .catalog-calculator__price {
    text-align: left;
  }
}

/* ============================================================
   OIL COMMERCIAL GROUPING
   ============================================================ */

.catalog-product__benefit {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.catalog-other-oils {
  margin-top: 22px;
  border-top: 1px solid rgba(180, 225, 225, .12);
  padding-top: 16px;
}

.catalog-other-oils__summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
}

.catalog-other-oils__summary::-webkit-details-marker {
  display: none;
}

.catalog-other-oils__summary::after {
  content: " ▾";
  color: var(--accent);
}

.catalog-other-oils[open] .catalog-other-oils__summary::after {
  content: " ▴";
}

.catalog-other-oils__body {
  margin-top: 14px;
}


/* ============================================================
   UI V1 — LIGHT LAYERED GLASS / VEHICLE PICKER
   Переопределения ниже намеренно идут последними, чтобы не ломать app.js.
   ============================================================ */

:root {
  --bg-base: #eef3f2;
  --bg-glow-1: rgba(91, 224, 205, .42);
  --bg-glow-2: rgba(126, 170, 255, .30);
  --bg-glow-3: rgba(242, 209, 111, .30);

  --glass-fill: rgba(255,255,255,.48);
  --glass-fill-hover: rgba(255,255,255,.68);
  --glass-border: rgba(255,255,255,.76);
  --glass-border-dark: rgba(22,49,51,.08);

  --accent: #14b8a6;
  --accent-soft: rgba(20,184,166,.20);
  --amber: #c97927;

  --text-main: #142729;
  --text-muted: #6d7d7f;
  --radius: 26px;
}

html, body {
  background: var(--bg-base);
  color: var(--text-main);
}

body { min-width: 320px; }

.bg-glow {
  background:
    radial-gradient(ellipse 38% 34% at 11% 7%, var(--bg-glow-1), transparent 68%),
    radial-gradient(ellipse 42% 38% at 92% 15%, var(--bg-glow-2), transparent 70%),
    radial-gradient(ellipse 44% 35% at 55% 91%, var(--bg-glow-3), transparent 72%);
  filter: blur(14px);
}

.topbar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px;
}

.topbar__status { color: #829092; }

.stage {
  padding: 42px 28px 100px;
}

.stage__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  color: #31847d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(18px) saturate(135%);
}

.stage__title {
  max-width: 860px;
  margin: 18px auto 12px;
  font-family: var(--font-body);
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance;
}

.stage__subtitle {
  max-width: 720px;
  margin: 0 auto 38px;
  color: var(--text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  text-wrap: balance;
}

.vehicle-picker {
  position: relative;
  overflow: visible;
  padding: 26px;
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  background: rgba(255,255,255,.42);
  box-shadow:
    0 30px 80px rgba(38,72,72,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}

.vehicle-picker::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -130px;
  right: 80px;
  border-radius: 50%;
  background: rgba(93,231,210,.18);
  filter: blur(55px);
  pointer-events: none;
}

.vehicle-picker__head {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  text-align: left;
}

.vehicle-picker__kicker {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vehicle-picker__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.vehicle-picker__hint {
  color: #7a898a;
  font-size: 13px;
  white-space: nowrap;
}

.stepper {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.cable { display: none; }

.step,
.step--disabled,
.step--done {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  filter: none;
}

.step--disabled { opacity: .58; }
.step--done { opacity: 1; }

.step__head {
  margin: 0 0 8px;
  font-family: var(--font-body);
}

.step__num { display: none; }

.step__label {
  font-size: 12px;
  font-weight: 600;
  color: #617173;
  letter-spacing: 0;
}

.dropdown {
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid rgba(34,61,64,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 24px rgba(36,72,73,.035);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dropdown:not(:disabled):hover {
  background: rgba(255,255,255,.74);
  border-color: rgba(20,184,166,.34);
  box-shadow: 0 10px 26px rgba(36,72,73,.065);
}

.dropdown:not(:disabled):active { transform: translateY(1px); }
.dropdown:disabled { color: #879496; }
.dropdown__chevron { color: #738587; }

.dropdown__list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 8px;
  padding: 7px;
  max-height: 270px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 16px;
  background: rgba(247,251,250,.92);
  box-shadow: 0 22px 55px rgba(38,72,72,.16);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}

.step__body { position: relative; }

.dropdown__list li {
  color: #294043;
  padding: 10px 11px;
  border-radius: 10px;
}

.dropdown__list li:hover,
.dropdown__list li:focus {
  color: #0d8d80;
  background: rgba(20,184,166,.10);
}


.vehicle-picker__footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
  text-align: left;
}

.vehicle-picker__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #738285;
  font-size: 12px;
  line-height: 1.45;
}

.vehicle-picker__note::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(20,184,166,.08);
}

/* Когда первые три шага уже заполнены (в том числе вход ?generation=slug),
   контекст автомобиля становится компактным, а двигатель — главным действием. */
#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) {
  grid-template-columns: .82fr .82fr 1fr 1.55fr;
}

#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMark .dropdown,
#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepModel .dropdown,
#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepGen .dropdown {
  background: rgba(255,255,255,.34);
  color: #526466;
  box-shadow: none;
}

#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMod .step__label {
  color: #0f8f82;
}

#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMod .dropdown {
  border-color: rgba(20,184,166,.34);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(20,184,166,.09);
}

/* RESULT пока не редизайним глубоко: делаем его совместимым со светлой системой,
   коммерческие карточки будут следующим этапом. */
.result {
  margin-top: 30px;
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 24px 70px rgba(38,72,72,.10);
  color: var(--text-main);
}

.result__scan { color: #a8682a; }
.result__reset { color: var(--text-main); border-color: rgba(34,61,64,.12); }

@media (max-width: 900px) {
  .stage { padding-top: 24px; }
  .vehicle-picker__head { align-items: flex-start; }
  .vehicle-picker__hint { white-space: normal; text-align: right; max-width: 260px; }
  .stepper,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .topbar { padding: 18px 18px; }
  .stage { padding: 26px 14px 90px; }
  .stage__title { font-size: clamp(34px, 10vw, 48px); }
  .stage__subtitle { margin-bottom: 28px; font-size: 15px; }

  .vehicle-picker {
    padding: 18px;
    border-radius: 24px;
  }

  .vehicle-picker__head {
    margin-bottom: 18px;
  }

  .vehicle-picker__title { font-size: 21px; }

  .stepper,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .dropdown { min-height: 56px; }
  .vehicle-picker__footer { margin-top: 16px; }

  /* На мобильном, когда первые три шага выбраны, визуально приглушаем их,
     но не прячем: пользователь сохраняет контроль и может быстро изменить выбор. */
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMark,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepModel,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepGen {
    opacity: .72;
  }

  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMod {
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(34,61,64,.08);
  }
}




.vehicle-picker__meta .vehicle-picker__hint {
  font-size: 12px;
  color: #819092;
  line-height: 1.35;
}

/* ============================================================
   VEHICLE BRAND — logo next to title
   ============================================================ */

.vehicle-picker__heading {
  min-width: 0;
}

.vehicle-picker__title-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.vehicle-picker__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.vehicle-picker__brand-logo {
  display: block;
  width: auto;
  height: 30px;
  max-width: 110px;
  object-fit: contain;
  object-position: left center;
}

.vehicle-picker__brand-logo[hidden] {
  display: none;
}


.vehicle-picker__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}


/* Mobile vehicle header */


/* ============================================================
   BRAND PICKER — responsive fullscreen selector
   Desktop: glass mega-menu
   Mobile: one-column scroll list
   ============================================================ */

body.brand-picker-open {
  overflow: hidden;
}

.brand-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.brand-picker[hidden] {
  display: none;
}

.brand-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(225, 236, 234, .56);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.brand-picker__panel {
  position: absolute;
  inset: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.88);
  border-radius: 32px;

  background:
    radial-gradient(circle at 15% 0%, rgba(83,226,207,.13), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(126,170,255,.12), transparent 35%),
    rgba(247,251,250,.90);

  box-shadow:
    0 35px 100px rgba(38,72,72,.18),
    inset 0 1px 0 rgba(255,255,255,.95);

  backdrop-filter: blur(34px) saturate(150%);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
}

.brand-picker__header {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 34px 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  flex: 0 0 auto;
}

.brand-picker__kicker {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.brand-picker__title {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 600;
}

.brand-picker__close {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  border: 1px solid rgba(34,61,64,.10);
  border-radius: 50%;

  background: rgba(255,255,255,.58);
  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

.brand-picker__close:hover {
  background: rgba(255,255,255,.90);
  border-color: rgba(20,184,166,.28);
  transform: rotate(4deg);
}

.brand-picker__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: #425557;
}

.brand-picker__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.brand-picker__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.brand-picker__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 32px 38px;
}

.brand-picker__list {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;

  list-style: none;
}

.brand-picker__item {
  min-width: 0;
  min-height: 126px;
  padding: 18px 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;

  border: 1px solid rgba(34,61,64,.075);
  border-radius: 20px;

  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);

  cursor: pointer;
}

.brand-picker__item:hover,
.brand-picker__item:focus {
  outline: none;
  transform: translateY(-2px);

  background: rgba(255,255,255,.80);
  border-color: rgba(20,184,166,.25);

  box-shadow:
    0 13px 30px rgba(36,72,73,.07),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.brand-picker__logo {
  order: 1;
  display: block;
  width: auto;
  height: 42px;
  max-width: 100px;
  object-fit: contain;
}

.brand-picker__name {
  order: 2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #2a4143;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  /* Header автомобиля:
     title + logo всегда в одной строке */
  .vehicle-picker__head {
    display: block;
  }

  .vehicle-picker__title-row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .vehicle-picker__title {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .vehicle-picker__brand {
    flex: 0 0 auto;
  }

  .vehicle-picker__brand-logo {
    height: 26px;
    width: auto;
    max-width: 90px;
  }

  /* Подсказка всегда отдельной строкой во всю ширину */
  .vehicle-picker__hint {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 10px;

    font-size: 10.5px;
    line-height: 1.3;
    white-space: nowrap;
    text-align: left;
  }


  /* Mobile Brand Picker */
  .brand-picker__backdrop {
    display: none;
  }

  .brand-picker__panel {
    inset: 0;
    height: 100dvh;
  }

  .brand-picker__header {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0;
    padding:
      max(18px, env(safe-area-inset-top))
      18px
      16px;
  }

  .brand-picker__kicker {
    font-size: 10px;
  }

  .brand-picker__title {
    font-size: 26px;
  }

  .brand-picker__close {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .brand-picker__scroll {
    padding: 8px 14px max(22px, env(safe-area-inset-bottom));
  }

  .brand-picker__list {
    display: block;
    width: 100%;
  }

  .brand-picker__item {
    width: 100%;
    padding: 8px 10px;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 0;
  }

  .brand-picker__item:hover,
  .brand-picker__item:focus {
    transform: none;
    background: rgba(20,184,166,.055);
    border-color: rgba(34,61,64,.075);
    box-shadow: none;
  }

  .brand-picker__name {
    flex: 1 1 auto;
  }

  .brand-picker__logo {
    order: 2;
    flex: 0 0 auto;

    height: 30px;
    max-width: 82px;
  }
}



/* ============================================================
   BRAND PICKER — PREMIUM MOTION
   ============================================================ */

/* Сам overlay существует сразу, но визуально ещё закрыт */
.brand-picker {
  opacity: 1;
}

/* Фон */
.brand-picker__backdrop {
  opacity: 0;
  transition:
    opacity 320ms cubic-bezier(.22, .8, .28, 1),
    backdrop-filter 320ms cubic-bezier(.22, .8, .28, 1);
}

/* Главная glass-панель */
.brand-picker__panel {
  opacity: 0;
  transform:
    translate3d(0, 18px, 0)
    scale(.985);

  transform-origin: 50% 45%;

  transition:
    opacity 280ms cubic-bezier(.22, .8, .28, 1),
    transform 360ms cubic-bezier(.16, 1, .3, 1);
}

/* Header появляется немного быстрее каталога */
.brand-picker__header {
  opacity: 0;
  transform: translate3d(0, 8px, 0);

  transition:
    opacity 260ms cubic-bezier(.22, .8, .28, 1),
    transform 340ms cubic-bezier(.16, 1, .3, 1);
}

/* Карточки в исходном состоянии */
.brand-picker__item {
  opacity: 0;
  transform: translate3d(0, 9px, 0) scale(.99);
}


/* ---------------- OPEN ---------------- */

.brand-picker--open .brand-picker__backdrop {
  opacity: 1;
}

.brand-picker--open .brand-picker__panel {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    scale(1);
}

.brand-picker--open .brand-picker__header {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*
 * Очень короткая волна.
 * Даже при 56 элементах задержка не растёт бесконечно,
 * потому что JS ограничивает --brand-index.
 */
.brand-picker--open .brand-picker__item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}


/* Hover должен оставаться живым после entrance */
.brand-picker--open .brand-picker__item:hover,
.brand-picker--open .brand-picker__item:focus {
  transform: translate3d(0, -3px, 0) scale(1.012);
}


/* ============================================================
   MOBILE MOTION
   Не zoom, а мягкий подъём — ближе к нативной sheet.
   ============================================================ */

@media (max-width: 620px) {

  .brand-picker__panel {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(1);

    transition:
      opacity 260ms cubic-bezier(.22, .8, .28, 1),
      transform 360ms cubic-bezier(.16, 1, .3, 1);
  }

  .brand-picker--open .brand-picker__panel {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .brand-picker__item {
    transform: translate3d(0, 7px, 0);
  }

  .brand-picker--open .brand-picker__item {
    transform: translate3d(0, 0, 0);
  }

  .brand-picker--open .brand-picker__item:hover,
  .brand-picker--open .brand-picker__item:focus {
    transform: none;
  }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .brand-picker__backdrop,
  .brand-picker__panel,
  .brand-picker__header,
  .brand-picker__item {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}


/* Brand stagger: лёгкая микрозадержка появления каждой марки */
.brand-picker__item {
  transition:
    opacity 240ms cubic-bezier(.22, .8, .28, 1),
    transform 300ms cubic-bezier(.16, 1, .3, 1),
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.brand-picker--open .brand-picker__item {
  transition-delay:
    calc(45ms + (var(--brand-index, 0) * 22ms)),
    calc(30ms + (var(--brand-index, 0) * 10ms)),
    0ms,
    0ms,
    0ms;
}

@media (max-width: 620px) {
  .brand-picker--open .brand-picker__item {
    transition-delay:
      calc(35ms + (var(--brand-index, 0) * 18ms)),
      calc(25ms + (var(--brand-index, 0) * 8ms)),
      0ms,
      0ms,
      0ms;
  }
}



/* ============================================================
   BRAND PICKER — HI-END DARK GLASS V2
   ============================================================ */

@media (min-width: 621px) {

  /*
   * Затемняем страницу под fullscreen selector.
   */


  /*
   * Сам fullscreen glass.
   */
  .brand-picker__panel {
    inset: 18px;
  }


  /* HEADER */


  /*
   * Чуть шире рабочая область:
   * именно здесь начинается ощущение mega-menu.
   */
  .brand-picker__header,
  .brand-picker__list {
    width: min(1320px, calc(100% - 40px));
  }

  .brand-picker__scroll {
    padding:
      0
      26px
      44px;
  }


  /* GRID */

  .brand-picker__list {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    gap: 16px;
  }


  /* ==========================================================
     CARD
     ========================================================== */

  .brand-picker__item {
    position: relative;

    min-height: 210px;
    padding: 0;

    display: block;

    overflow: hidden;

    border-radius: 24px;

    isolation: isolate;
  }


  /*
   * Лёгкий внутренний свет.
   * Карточки становятся не просто серыми прямоугольниками.
   */
  .brand-picker__item::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;
  }


  /* VISUAL AREA */

  .brand-picker__visual {

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;
  }


  /*
   * Большой логотип.
   * CSS filter делает любой SVG практически серебристо-белым.
   */
  .brand-picker__hero-logo {
    display: block;

    transform:
      translate3d(0, -3px, 0)
      scale(1);

    transition:
      opacity 420ms cubic-bezier(.16,1,.3,1),
      transform 620ms cubic-bezier(.16,1,.3,1),
      filter 420ms ease;
  }


  /*
   * Горизонтальные логотипы всё равно получают максимальную ширину.
   */
  .brand-picker__item:hover
  .brand-picker__hero-logo,
  .brand-picker__item:focus
  .brand-picker__hero-logo {

    transform:
      translate3d(0, -7px, 0)
      scale(1.055);
  }


  /* ==========================================================
     BOTTOM GLASS BAR
     ========================================================== */

  .brand-picker__item-footer {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 62px;

    z-index: 3;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
      9px
      13px;
  }


  /*
   * Небольшой halo вверх —
   * создаёт тот самый мягкий blur-переход,
   * который есть в референсе.
   */
  .brand-picker__item-footer::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 32px;

    top: -30px;

    pointer-events: none;
  }


  /* ==========================================================
     LOGO BUBBLE
     ========================================================== */

  .brand-picker__logo-bubble {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
  }


  /*
   * Маленький логотип — чёрный,
   * как ты и предложил.
   */
  .brand-picker__mini-logo {
    display: block;

    width: 25px;
    height: 25px;

    object-fit: contain;
  }


  .brand-picker__name {
    position: relative;

    z-index: 2;

    max-width: calc(100% - 55px);

    font-size: 14px;

    letter-spacing: -.01em;

    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  /* ==========================================================
     PREMIUM HOVER
     ========================================================== */

  .brand-picker--open
  .brand-picker__item:hover,

  .brand-picker--open
  .brand-picker__item:focus {
    transform:
      translate3d(0,-5px,0)
      scale(1.012);
  }

}


/* ============================================================
   TABLET DESKTOP
   ============================================================ */

@media (min-width: 621px) and (max-width: 1100px) {

  .brand-picker__list {
    grid-template-columns:
      repeat(4, minmax(0,1fr));
  }

}


/* ============================================================
   MOBILE — сохраняем список, но переносим premium visual language
   ============================================================ */

@media (max-width: 620px) {

  .brand-picker__item {

    min-height: 72px;
  }

  /*
   * На mobile огромный background logo тоже остаётся,
   * но намного спокойнее.
   */
  .brand-picker__visual {
    align-items: center;
    justify-content: center;
  }

  .brand-picker__hero-logo {

    max-width: 112px;
  }

  .brand-picker__logo-bubble {

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
  }

  .brand-picker__mini-logo {
    width: 25px;
    height: 25px;

    object-fit: contain;
  }

  .brand-picker__name {
    order: initial;

    font-size: 15px;

    text-align: left;
  }

}



/* ============================================================
   BRAND PICKER — HI-END LIGHT GLASS
   Final override over Dark V2
   ============================================================ */

@media (min-width: 621px) {

  /* Светлый размытый фон страницы */
  .brand-picker__backdrop {
    background:
      radial-gradient(
        circle at 76% 10%,
        rgba(207, 236, 238, .34),
        transparent 36%
      ),
      rgba(234, 240, 240, .48);

    backdrop-filter: blur(28px) saturate(108%);
    -webkit-backdrop-filter: blur(28px) saturate(108%);
  }


  /* Большая milky glass panel */
  .brand-picker__panel {
    border:
      1px solid rgba(255,255,255,.76);

    background:
      radial-gradient(
        circle at 72% -10%,
        rgba(255,255,255,.82),
        transparent 38%
      ),
      radial-gradient(
        circle at 4% 70%,
        rgba(222,231,228,.42),
        transparent 40%
      ),
      rgba(245,248,248,.70);

    box-shadow:
      0 34px 100px rgba(39,55,58,.16),
      inset 0 1px 0 rgba(255,255,255,.96);

    backdrop-filter:
      blur(44px)
      saturate(112%);

    -webkit-backdrop-filter:
      blur(44px)
      saturate(112%);
  }


  /* HEADER */

  .brand-picker__kicker {
    color: #18b7a7;
  }

  .brand-picker__title {
    color: #101b1d;
  }

  .brand-picker__close {
    border-color: rgba(22,39,42,.08);

    background:
      rgba(255,255,255,.72);

    box-shadow:
      0 7px 24px rgba(25,42,45,.07),
      inset 0 1px 0 rgba(255,255,255,.96);
  }

  .brand-picker__close:hover {
    border-color: rgba(24,183,167,.22);
    background: rgba(255,255,255,.94);
  }

  .brand-picker__close span {
    background: #142123;
  }


  /* ==========================================================
     CARD — frosted silver
     ========================================================== */

  .brand-picker__item {
    border:
      1px solid rgba(255,255,255,.82);
  }


  /*
   * Небольшая вариативность света между карточками.
   * Они перестают выглядеть как одна повторённая плитка.
   */
  .brand-picker__item:nth-child(3n + 1) {
    background:
      radial-gradient(
        circle at 20% 8%,
        rgba(255,255,255,.90),
        transparent 44%
      ),
      linear-gradient(
        145deg,
        rgba(222,230,231,.76),
        rgba(202,213,214,.54)
      );
  }

  .brand-picker__item:nth-child(3n + 2) {
    background:
      radial-gradient(
        circle at 78% 10%,
        rgba(255,255,255,.72),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        rgba(216,226,228,.70),
        rgba(194,207,210,.51)
      );
  }

  .brand-picker__item:nth-child(3n) {
    background:
      radial-gradient(
        circle at 30% 12%,
        rgba(255,255,255,.82),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        rgba(226,231,229,.72),
        rgba(207,215,213,.54)
      );
  }


  .brand-picker__item::before {
    background:
      radial-gradient(
        circle at 24% 10%,
        rgba(255,255,255,.52),
        transparent 42%
      ),
      radial-gradient(
        circle at 90% 90%,
        rgba(127,165,167,.10),
        transparent 38%
      );
  }


  /* Большой серебристый логотип */

  .brand-picker__hero-logo {

    mix-blend-mode: multiply;
  }


  /* ==========================================================
     Нижний frosted слой
     ========================================================== */

  .brand-picker__item-footer {
    border-top:
      1px solid rgba(255,255,255,.64);

    background:
      linear-gradient(
        to bottom,
        rgba(248,250,250,.52),
        rgba(239,244,244,.82)
      );

    backdrop-filter:
      blur(22px)
      saturate(110%);

    -webkit-backdrop-filter:
      blur(22px)
      saturate(110%);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.80);
  }


  .brand-picker__item-footer::before {
    background:
      linear-gradient(
        to top,
        rgba(238,243,243,.52),
        transparent
      );
  }


  /* Белый bubble + чёрный SVG */

  .brand-picker__logo-bubble {
    border:
      1px solid rgba(255,255,255,.94);

    background:
      rgba(250,252,252,.92);

    box-shadow:
      0 6px 17px rgba(31,47,50,.12),
      inset 0 1px 0 #fff;
  }

  .brand-picker__mini-logo {
    filter:
      grayscale(1)
      brightness(0);

    opacity: .88;
  }


  .brand-picker__name {
    color: #172224;
    font-weight: 550;
  }


  /* ==========================================================
     HOVER
     ========================================================== */

  .brand-picker--open
  .brand-picker__item:hover,

  .brand-picker--open
  .brand-picker__item:focus {
    border-color:
      rgba(255,255,255,.98);
  }

}


/* ============================================================
   MOBILE — LIGHT
   ============================================================ */

@media (max-width: 620px) {


  .brand-picker__header {
    background:
      rgba(247,250,250,.88);

    border-bottom:
      1px solid rgba(25,46,49,.07);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }


  .brand-picker__kicker {
    color: #18b7a7;
  }

  .brand-picker__title {
    color: #111d1f;
  }


  .brand-picker__close {
    border-color:
      rgba(20,38,41,.08);

    background:
      rgba(255,255,255,.78);
  }

  .brand-picker__close span {
    background: #142123;
  }


  .brand-picker__scroll {
    background:
      rgba(242,247,247,.92);
  }


  .brand-picker__item {
    border-bottom:
      1px solid rgba(23,43,46,.07);
  }

}


/* Background brand logo — depth blur */
@media (min-width: 621px) {

  .brand-picker__hero-logo {
    filter:
      grayscale(1)
      brightness(.40)
      contrast(.82)
      blur(2.5px);

    opacity: .18;
  }

  .brand-picker__item:hover .brand-picker__hero-logo,
  .brand-picker__item:focus .brand-picker__hero-logo {
    filter:
      grayscale(1)
      brightness(.30)
      contrast(.90)
      blur(1.5px);

    opacity: .27;
  }

}



/* ============================================================
   BRAND CARD — AUTOMATIC CAR COLOR AMBIENCE
   ============================================================ */

@media (min-width: 621px) {

  .brand-picker__item {
    --brand-rgb: 118, 143, 146;
    --brand-rgb-2: 175, 190, 190;
  }

  .brand-picker__visual {
    position: absolute;
    inset: 0 0 58px 0;
  }

  /*
   * Реальная машина.
   * Находится над большим логотипом,
   * но под нижним glass-footer.
   */
  .brand-picker__hero-car {
    position: absolute;

    object-fit: contain;
    object-position: right bottom;

    pointer-events: none;

    filter:
      drop-shadow(
        0 15px 16px
        rgba(28,43,45,.16)
      );

    transform:
      translate3d(0,0,0)
      scale(1);

    transition:
      transform 650ms cubic-bezier(.16,1,.3,1),
      filter 450ms ease;
  }

  /*
   * Большой фирменный знак уходит в фон
   * и освобождает правую часть машине.
   */
  .brand-picker__hero-logo {
    position: absolute;

    left: 5%;
    top: 8%;

    width: 60%;
    height: 68%;
    max-width: 60%;

    object-fit: contain;
    object-position: left center;
  }

  /*
   * Hover: машина слегка выходит вперёд.
   */
  .brand-picker--open
  .brand-picker__item:hover
  .brand-picker__hero-car,

  .brand-picker--open
  .brand-picker__item:focus
  .brand-picker__hero-car {

    filter:
      drop-shadow(
        0 20px 20px
        rgba(28,43,45,.20)
      );
  }

  /*
   * Hover усиливает именно тот цвет,
   * который JS вытащил из изображения машины.
   */

}


/* ============================================================
   MOBILE
   Пока не показываем hero car, чтобы не перегрузить список.
   ============================================================ */


/* Auto palette — stronger ambient color */


/* ============================================================
   BRAND CARD — persistent ambient color
   ============================================================ */

@media (min-width: 621px) {

  /* Спокойное состояние — лёгкий цвет кузова уже виден */


  /* Hover — тот же ambient становится богаче */

}


/* ============================================================
   BRAND CARD — V2 persistent color ambience
   ============================================================ */

@media (min-width: 621px) {

  .brand-picker__item {
    background:
      linear-gradient(
        135deg,
        rgba(var(--brand-rgb), .30) 0%,
        rgba(var(--brand-rgb), .12) 48%,
        rgba(var(--brand-rgb-2), .16) 100%
      ),
      rgba(238, 243, 243, .62) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 12px 30px rgba(var(--brand-rgb), .08);

    transition:
      opacity 240ms cubic-bezier(.22,.8,.28,1),
      transform 300ms cubic-bezier(.16,1,.3,1),
      background 450ms cubic-bezier(.16,1,.3,1),
      box-shadow 350ms ease,
      border-color 220ms ease;
  }

  .brand-picker--open .brand-picker__item:hover,
  .brand-picker--open .brand-picker__item:focus {
    background:
      linear-gradient(
        135deg,
        rgba(var(--brand-rgb), .48) 0%,
        rgba(var(--brand-rgb), .25) 48%,
        rgba(var(--brand-rgb-2), .30) 100%
      ),
      rgba(238, 243, 243, .52) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 18px 42px rgba(var(--brand-rgb), .12);
  }

}


/* ============================================================
   BRAND CARDS — HERO SCALE + BLACK LOGO BUBBLE + MOBILE CAR
   ============================================================ */

/* ---------- DESKTOP ---------- */
@media (min-width: 621px) {

  /*
   * Разрешаем машине немного зайти под нижний glass-footer.
   * Footer остаётся выше по z-index, поэтому получается
   * аккуратный эффект "машина входит в стекло".
   */
  .brand-picker__visual {
    overflow: visible;
  }

  /* Машина примерно +15% относительно текущего размера */
  .brand-picker__hero-car {
    width: 87%;
    height: 90%;

    right: -8%;
    bottom: -17%;

    transform-origin: right bottom;
  }

  .brand-picker--open
  .brand-picker__item:hover
  .brand-picker__hero-car,

  .brand-picker--open
  .brand-picker__item:focus
  .brand-picker__hero-car {
    transform:
      translate3d(-3px,-4px,0)
      scale(1.045);
  }
}


/* ---------- LOGO BUBBLE: BLACK + WHITE LOGO ---------- */

.brand-picker__logo-bubble {
  background: rgba(13, 16, 17, .96) !important;

  border:
    1px solid rgba(255,255,255,.30) !important;

  box-shadow:
    0 7px 18px rgba(20,30,32,.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.brand-picker__mini-logo {
  filter:
    grayscale(1)
    brightness(0)
    invert(1) !important;

  opacity: .96 !important;
}


/* ---------- MOBILE ---------- */
@media (max-width: 620px) {

  /*
   * Справа теперь показываем именно автомобиль,
   * а не только огромный фоновый логотип.
   */

  /*
   * Большой background-logo на mobile убираем:
   * иначе он начинает конкурировать с машиной.
   * Маленький логотип в bubble остаётся.
   */

  /*
   * Оставляем место машине справа.
   */
  .brand-picker__item-footer {
    padding-right: 47%;
  }
}


/* ============================================================
   MOBILE BRAND CARDS — HERO + BACKGROUND LOGO + FROSTED LABEL
   ============================================================ */

@media (max-width: 620px) {

  /* Правая визуальная половина карточки */
  .brand-picker__visual {

    top: 0;
    right: 0;
    bottom: 0;

    display: block;
  }


  /*
   * Возвращаем большой размытый логотип марки.
   * Он находится ЗА автомобилем.
   */
  .brand-picker__hero-logo {

    pointer-events: none;
  }


  /*
   * Машина:
   * немного меньше всей visual-зоны,
   * но сдвинута внутрь карточки, ближе к центру.
   *
   * За счёт этого за ней снова виден background-logo.
   */
  .brand-picker__hero-car {

    transform:
      translate3d(0,0,0)
      scale(1);
  }


  /*
   * Левая frosted-зона.
   * Не растягиваем её под машину —
   * поэтому автомобиль остаётся резким.
   */


  /* Старый вертикальный frost-halo здесь уже не нужен */


  /* Чёрный bubble + белый монохромный SVG */


  /* Название всегда поверх glass */
}


/* ============================================================
   MOBILE — FULL FROSTED BRAND CARD
   ============================================================ */

@media (max-width: 620px) {

  /* Вся строка = единая glass-карточка */
  .brand-picker__item {
    position: relative;

    overflow: hidden;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.54) 0%,
        rgba(255,255,255,.30) 48%,
        rgba(242,247,247,.42) 100%
      ) !important;

    border:
      1px solid rgba(255,255,255,.72) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 8px 24px rgba(28,43,45,.08) !important;

    backdrop-filter:
      blur(18px)
      saturate(125%);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(125%);
  }


  /* Цвет машины остаётся мягким под общим стеклом */
  .brand-picker__item::before {
    opacity: .58;
  }


  /* Вся visual-зона теперь занимает карточку целиком */
  .brand-picker__visual {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;
  }


  /* Большой размытый логотип — фон всей карточки */
  .brand-picker__hero-logo {
    display: block !important;

    position: absolute;

    z-index: 1;

    width: 46%;
    height: 82%;

    left: 34%;
    top: 50%;

    transform:
      translateY(-50%);

    object-fit: contain;
    object-position: center;

    filter:
      grayscale(1)
      brightness(.45)
      contrast(.80)
      blur(2.5px) !important;

    opacity: .11 !important;
  }


  /* Машина справа, но заметно ближе к центру */
  .brand-picker__hero-car {
    display: block !important;

    position: absolute;

    z-index: 2;

    width: 48%;
    height: 92%;

    right: 2%;
    bottom: -3%;

    object-fit: contain;
    object-position: center;

    filter:
      drop-shadow(
        0 8px 11px
        rgba(25,38,40,.16)
      );

    pointer-events: none;
  }


  /*
   * Footer больше НЕ отдельная карточка.
   * Он просто содержит название поверх общего frost.
   */
  .brand-picker__item-footer {
    position: relative;

    z-index: 4;

    width: 52%;
    min-height: 100%;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 12px;

    box-sizing: border-box;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }


  .brand-picker__item-footer::before {
    display: none !important;
  }


  /* Чёрный круг */
  .brand-picker__logo-bubble {
    position: relative;

    z-index: 5;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    background:
      rgba(11,14,15,.96) !important;

    border:
      1px solid rgba(255,255,255,.34) !important;

    box-shadow:
      0 6px 16px rgba(20,30,32,.18),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }


  /* Белый монохромный знак производителя */
  .brand-picker__mini-logo {
    filter:
      grayscale(1)
      brightness(0)
      invert(1) !important;

    opacity: .96 !important;
  }


  .brand-picker__name {
    position: relative;

    z-index: 5;

    max-width:
      calc(100% - 53px);

    color: #172224 !important;

    font-weight: 650;

    line-height: 1.12;

    text-shadow:
      0 1px 0
      rgba(255,255,255,.55);
  }
}


/* ============================================================
   DESKTOP BRAND CARDS — AMBIENT LANDSCAPE SCENE
   sun / mountains / horizon
   ============================================================ */

@media (min-width: 621px) {

  /*
   * Сцена живёт внутри visual.
   * Порядок слоёв:
   *
   * mountains/sun -> background logo -> car -> footer
   */
  .brand-picker__visual {
    isolation: isolate;
  }


  /* ----------------------------------------------------------
     SUN / HORIZON GLOW
     ---------------------------------------------------------- */

  .brand-picker__visual::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 150px;
    height: 150px;

    right: 15%;
    top: 8%;

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        rgba(var(--brand-rgb), .34) 0%,
        rgba(var(--brand-rgb), .18) 29%,
        rgba(var(--brand-rgb-2), .08) 48%,
        transparent 72%
      );

    filter:
      blur(7px);

    opacity: .78;

    transform:
      translate3d(0,0,0);

    pointer-events: none;
  }


  /* ----------------------------------------------------------
     MOUNTAINS
     ---------------------------------------------------------- */

  .brand-picker__visual::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -4%;
    right: -4%;
    bottom: -5%;

    height: 47%;

    background:
      linear-gradient(
        to bottom,
        rgba(var(--brand-rgb-2), .13),
        rgba(70,83,85,.10)
      );

    clip-path:
      polygon(
        0% 82%,
        0% 60%,
        11% 48%,
        18% 60%,
        29% 32%,
        38% 53%,
        48% 28%,
        59% 57%,
        70% 38%,
        80% 61%,
        91% 43%,
        100% 58%,
        100% 100%,
        0% 100%
      );

    filter:
      blur(3.5px);

    opacity: .52;

    transform:
      scale(1.04);

    transform-origin:
      center bottom;

    pointer-events: none;
  }


  /*
   * Сохраняем background-logo поверх пейзажа,
   * но под автомобилем.
   */
  .brand-picker__hero-logo {
    z-index: 1;
  }

  .brand-picker__hero-car {
    z-index: 2;
  }


  /* ==========================================================
     SCENE VARIATIONS

     Не даём всем 56 карточкам выглядеть одинаково.
     ========================================================== */


  /* ---------- Variant A: sunset справа ---------- */

  .brand-picker__item:nth-child(3n + 1)
  .brand-picker__visual::before {
    right: 10%;
    top: 4%;

    width: 175px;
    height: 175px;

    opacity: .72;
  }

  .brand-picker__item:nth-child(3n + 1)
  .brand-picker__visual::after {
    height: 48%;

    transform:
      translateX(-2%)
      scale(1.06);
  }


  /* ---------- Variant B: sun ближе к центру ---------- */

  .brand-picker__item:nth-child(3n + 2)
  .brand-picker__visual::before {
    right: 33%;
    top: 14%;

    width: 125px;
    height: 125px;

    opacity: .60;
  }

  .brand-picker__item:nth-child(3n + 2)
  .brand-picker__visual::after {
    clip-path:
      polygon(
        0% 100%,
        0% 70%,
        12% 54%,
        23% 65%,
        38% 38%,
        48% 56%,
        62% 42%,
        75% 67%,
        87% 51%,
        100% 68%,
        100% 100%
      );

    opacity: .43;
  }


  /* ---------- Variant C: широкий холодный горизонт ---------- */

  .brand-picker__item:nth-child(3n)
  .brand-picker__visual::before {
    width: 230px;
    height: 100px;

    right: 5%;
    top: 18%;

    border-radius: 50%;

    background:
      radial-gradient(
        ellipse,
        rgba(var(--brand-rgb), .22),
        rgba(var(--brand-rgb-2), .11) 42%,
        transparent 73%
      );

    filter:
      blur(11px);

    opacity: .72;
  }

  .brand-picker__item:nth-child(3n)
  .brand-picker__visual::after {
    height: 42%;

    clip-path:
      polygon(
        0% 100%,
        0% 76%,
        16% 62%,
        29% 70%,
        43% 53%,
        57% 68%,
        71% 51%,
        84% 67%,
        100% 56%,
        100% 100%
      );

    opacity: .38;

    filter:
      blur(4px);
  }


  /* ==========================================================
     HOVER — пейзаж слегка оживает, но не двигается агрессивно
     ========================================================== */

  .brand-picker--open
  .brand-picker__item:hover
  .brand-picker__visual::before,

  .brand-picker--open
  .brand-picker__item:focus
  .brand-picker__visual::before {
    opacity: .92;

    transform:
      translate3d(-3px,-2px,0)
      scale(1.045);

    transition:
      opacity 450ms ease,
      transform 650ms cubic-bezier(.16,1,.3,1);
  }


  .brand-picker--open
  .brand-picker__item:hover
  .brand-picker__visual::after,

  .brand-picker--open
  .brand-picker__item:focus
  .brand-picker__visual::after {
    opacity: .62;

    transition:
      opacity 500ms ease;
  }

}


/*
 * Mobile намеренно оставляем чистым.
 * Пейзаж там сейчас не нужен.
 */
@media (max-width: 620px) {

  .brand-picker__visual::before,
  .brand-picker__visual::after {
    display: none !important;
  }

}


/* ============================================================
   UNIVERSAL SELECTION PICKER — FROZEN ICE
   model / generation / modification
   ============================================================ */

.selection-picker[hidden] {
  display: none !important;
}

body.selection-picker-open {
  overflow: hidden;
}


/* ---------- ROOT ---------- */

.selection-picker {
  position: fixed;
  inset: 0;

  z-index: 10020;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    clamp(18px, 3vw, 42px);

  opacity: 0;

  transition:
    opacity 260ms ease;
}

.selection-picker--open {
  opacity: 1;
}


/* ---------- BACKDROP ---------- */

.selection-picker__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(218,228,229,.38);

  backdrop-filter:
    blur(18px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(115%);
}


/* ---------- ICE PANEL ---------- */

.selection-picker__panel {
  position: relative;

  z-index: 1;

  width:
    min(1040px, calc(100vw - 56px));

  max-height:
    min(760px, calc(100dvh - 56px));

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.90);

  border-radius:
    32px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.69) 0%,
      rgba(244,249,249,.54) 42%,
      rgba(224,234,235,.60) 100%
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.98),

    inset 0 -1px 0
      rgba(119,145,148,.10),

    0 34px 90px
      rgba(38,61,64,.18),

    0 8px 28px
      rgba(38,61,64,.08);

  backdrop-filter:
    blur(42px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(42px)
    saturate(145%);

  transform:
    translate3d(0,18px,0)
    scale(.975);

  opacity: 0;

  transition:
    opacity 300ms ease,
    transform 480ms
      cubic-bezier(.16,1,.3,1);
}


/*
 * Ледяная верхняя кромка.
 */
.selection-picker__panel::before {
  content: "";

  position: absolute;

  z-index: 5;

  left: 22px;
  right: 22px;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.96) 14%,
      #fff 50%,
      rgba(255,255,255,.96) 86%,
      transparent
    );

  pointer-events: none;
}


/*
 * Едва заметный icy bloom.
 */
.selection-picker__panel::after {
  content: "";

  position: absolute;

  z-index: -1;

  width: 420px;
  height: 420px;

  right: -150px;
  top: -190px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(126,207,219,.22),
      transparent 69%
    );

  filter: blur(10px);

  pointer-events: none;
}


.selection-picker--open
.selection-picker__panel {
  transform:
    translate3d(0,0,0)
    scale(1);

  opacity: 1;
}


/* ---------- HEADER ---------- */

.selection-picker__header {
  position: relative;

  z-index: 3;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  padding:
    27px
    30px
    23px;

  border-bottom:
    1px solid rgba(255,255,255,.58);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.22),
      rgba(255,255,255,.04)
    );
}


.selection-picker__kicker {
  margin-bottom: 5px;

  color:
    rgba(60,101,104,.70);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .10em;
  text-transform: uppercase;
}


.selection-picker__title {
  margin: 0;

  color: #152729;

  font-size:
    clamp(25px, 3vw, 36px);

  line-height: 1.05;

  letter-spacing: -.035em;

  font-weight: 620;
}


.selection-picker__context {
  min-height: 18px;

  margin-top: 7px;

  color:
    rgba(57,78,80,.58);

  font-size: 13px;
  font-weight: 500;
}


/* ---------- CLOSE ---------- */

.selection-picker__close {
  position: relative;

  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  border:
    1px solid rgba(255,255,255,.86);

  border-radius: 50%;

  background:
    rgba(255,255,255,.43);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.96),

    0 7px 20px
      rgba(38,62,64,.08);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  cursor: pointer;

  transition:
    transform 220ms ease,
    background 220ms ease;
}


.selection-picker__close:hover {
  transform:
    rotate(4deg)
    scale(1.05);

  background:
    rgba(255,255,255,.72);
}


.selection-picker__close span {
  position: absolute;

  width: 17px;
  height: 1.5px;

  left: 50%;
  top: 50%;

  border-radius: 2px;

  background: #415456;
}


.selection-picker__close span:first-child {
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}

.selection-picker__close span:last-child {
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


/* ---------- SCROLL ---------- */

.selection-picker__scroll {
  position: relative;

  flex: 1 1 auto;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding:
    24px
    28px
    30px;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(79,116,119,.24)
    transparent;
}


/* ---------- LIST ---------- */

.selection-picker__list {
  list-style: none;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 12px;

  margin: 0;
  padding: 0;
}


/* ---------- TILE ---------- */

.selection-picker__item {
  position: relative;

  min-width: 0;
  min-height: 82px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    15px
    48px
    15px
    17px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.78);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.57),
      rgba(238,245,245,.38)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.90),

    0 7px 20px
      rgba(41,67,69,.045);

  backdrop-filter:
    blur(18px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%);

  cursor: pointer;

  opacity: 0;

  transform:
    translate3d(0,8px,0)
    scale(.985);

  transition:
    transform 280ms
      cubic-bezier(.16,1,.3,1),

    border-color 220ms ease,

    background 260ms ease,

    box-shadow 280ms ease;
}


.selection-picker--open
.selection-picker__item {
  animation:
    selectionIceItemIn
    440ms
    cubic-bezier(.16,1,.3,1)
    forwards;

  animation-delay:
    calc(
      min(var(--selection-index), 14)
      * 24ms
    );
}


@keyframes selectionIceItemIn {
  to {
    opacity: 1;

    transform:
      translate3d(0,0,0)
      scale(1);
  }
}


.selection-picker__item:hover,
.selection-picker__item:focus {
  outline: none;

  transform:
    translate3d(0,-2px,0)
    scale(1.012);

  border-color:
    rgba(255,255,255,.98);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(237,247,247,.57)
    );

  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 28px
      rgba(49,91,91,.09);
}


.selection-picker__item-main {
  display: block;

  overflow: hidden;

  color: #17292b;

  font-size: 15px;
  font-weight: 620;

  line-height: 1.24;

  text-overflow: ellipsis;
}


.selection-picker__item-meta {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color:
    rgba(56,79,81,.58);

  font-size: 12px;
  font-weight: 500;

  line-height: 1.25;

  text-overflow: ellipsis;
}


.selection-picker__item-arrow {
  position: absolute;

  right: 17px;
  top: 50%;

  transform:
    translateY(-50%);

  color:
    rgba(49,102,102,.38);

  font-size: 19px;

  transition:
    transform 240ms ease,
    color 240ms ease;
}


.selection-picker__item:hover
.selection-picker__item-arrow,
.selection-picker__item:focus
.selection-picker__item-arrow {
  transform:
    translate(3px,-50%);

  color:
    #168f84;
}


/* Модификации обычно длиннее моделей */
.selection-picker[data-type="modification"]
.selection-picker__list {
  grid-template-columns:
    repeat(2, minmax(0,1fr));
}


.selection-picker[data-type="modification"]
.selection-picker__item {
  min-height: 92px;
}


/* ============================================================
   MOBILE FROZEN ICE SHEET
   ============================================================ */

@media (max-width: 620px) {

  .selection-picker {
    align-items: flex-end;

    padding:
      10px
      10px
      max(10px, env(safe-area-inset-bottom));
  }


  .selection-picker__backdrop {
    background:
      rgba(209,221,222,.44);

    backdrop-filter:
      blur(14px)
      saturate(112%);

    -webkit-backdrop-filter:
      blur(14px)
      saturate(112%);
  }


  .selection-picker__panel {
    width: 100%;

    max-height:
      calc(
        100dvh
        - 20px
        - env(safe-area-inset-top)
      );

    border-radius:
      30px;

    transform:
      translate3d(0,34px,0)
      scale(.985);
  }


  .selection-picker--open
  .selection-picker__panel {
    transform:
      translate3d(0,0,0)
      scale(1);
  }


  .selection-picker__header {
    padding:
      21px
      20px
      17px;
  }


  .selection-picker__title {
    font-size: 27px;
  }


  .selection-picker__context {
    font-size: 12px;
  }


  .selection-picker__close {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }


  .selection-picker__scroll {
    padding:
      15px
      14px
      22px;
  }


  /*
   * Именно список, а не desktop grid.
   * Теперь модель/поколение/модификация визуально
   * продолжают наш mobile brand picker.
   */
  .selection-picker__list,
  .selection-picker[data-type="modification"]
  .selection-picker__list {
    grid-template-columns: 1fr;

    gap: 9px;
  }


  .selection-picker__item,
  .selection-picker[data-type="modification"]
  .selection-picker__item {
    min-height: 68px;

    padding:
      12px
      45px
      12px
      15px;

    border-radius: 18px;
  }


  .selection-picker__item-main {
    font-size: 15px;
  }


  .selection-picker__item-meta {
    font-size: 12px;
  }

}


/* ============================================================
   OLD NESTED DROPDOWNS
   Теперь они только data-source для JS.
   Не даём им физически появляться и убираем z-index проблему.
   ============================================================ */

#modelList,
#genList,
#modList {
  display: none !important;
}


/* ============================================================
   MOBILE BRAND PICKER — FROZEN ICE WINDOW
   ============================================================ */

@media (max-width: 620px) {

  .brand-picker {
    padding:
      10px
      10px
      max(10px, env(safe-area-inset-bottom));
  }


  .brand-picker__backdrop {
    background:
      rgba(209,221,222,.44);

    backdrop-filter:
      blur(14px)
      saturate(112%);

    -webkit-backdrop-filter:
      blur(14px)
      saturate(112%);
  }


  .brand-picker__panel {
    width: 100%;

    max-height:
      calc(
        100dvh
        - 20px
        - env(safe-area-inset-top)
      );

    border:
      1px solid
      rgba(255,255,255,.90);

    border-radius:
      30px !important;

    overflow: hidden;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.68),
        rgba(239,247,247,.54)
      );

    box-shadow:
      inset 0 1px 0
        rgba(255,255,255,.98),

      0 26px 70px
        rgba(37,60,63,.18);

    backdrop-filter:
      blur(38px)
      saturate(140%);

    -webkit-backdrop-filter:
      blur(38px)
      saturate(140%);
  }


  .brand-picker__panel::before {
    content: "";

    position: absolute;

    z-index: 10;

    left: 20px;
    right: 20px;
    top: 0;

    height: 1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.98),
        transparent
      );

    pointer-events: none;
  }

}


/* ============================================================
   BRAND FINDER — FROZEN SEARCH + ALPHABET
   ============================================================ */

.brand-finder {
  position: relative;
  z-index: 8;

  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    13px
    clamp(18px, 3vw, 30px)
    14px;

  border-bottom:
    1px solid rgba(255,255,255,.56);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.20),
      rgba(255,255,255,.06)
    );

  backdrop-filter:
    blur(22px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(125%);
}


/* ============================================================
   SEARCH ICE CAPSULE
   ============================================================ */

.brand-finder__search {
  position: relative;

  flex:
    0 1 285px;

  min-width: 210px;
}


.brand-finder__input {
  width: 100%;
  height: 46px;

  box-sizing: border-box;

  padding:
    0
    43px
    0
    43px;

  border:
    1px solid
    rgba(255,255,255,.86);

  border-radius:
    17px;

  outline: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.63),
      rgba(239,247,247,.40)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.98),

    0 7px 22px
      rgba(40,71,73,.055);

  color: #17292b;

  font: inherit;
  font-size: 14px;
  font-weight: 550;

  backdrop-filter:
    blur(20px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%);

  transition:
    border-color 200ms ease,
    background 220ms ease,
    box-shadow 240ms ease;
}


.brand-finder__input::placeholder {
  color:
    rgba(62,82,84,.48);
}


.brand-finder__input:focus {
  border-color:
    rgba(255,255,255,.98);

  background:
    rgba(255,255,255,.72);

  box-shadow:
    inset 0 1px 0 #fff,
    0 9px 28px
      rgba(46,98,96,.10),

    0 0 0 3px
      rgba(20,184,166,.06);
}


/* Chrome search decoration */
.brand-finder__input::-webkit-search-cancel-button {
  display: none;
}


.brand-finder__search-icon {
  position: absolute;

  z-index: 2;

  width: 18px;
  height: 18px;

  left: 15px;
  top: 50%;

  transform:
    translateY(-50%);

  fill: none;

  stroke:
    rgba(45,78,80,.54);

  stroke-width: 1.7;

  stroke-linecap: round;
}


.brand-finder__clear {
  position: absolute;

  z-index: 3;

  right: 8px;
  top: 50%;

  width: 30px;
  height: 30px;

  transform:
    translateY(-50%);

  padding: 0;

  border: 0;

  border-radius: 50%;

  background:
    rgba(41,61,63,.07);

  color:
    rgba(34,54,56,.57);

  font-size: 21px;
  line-height: 28px;

  cursor: pointer;

  transition:
    background 180ms ease,
    transform 180ms ease;
}


.brand-finder__clear:hover {
  background:
    rgba(41,61,63,.12);

  transform:
    translateY(-50%)
    scale(1.06);
}


/* ============================================================
   ALPHABET
   ============================================================ */

.brand-finder__alphabet {
  flex: 1 1 auto;

  display: flex;
  align-items: center;

  gap: 5px;

  min-width: 0;

  overflow-x: auto;

  scrollbar-width: none;

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 94%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 94%,
      transparent 100%
    );
}


.brand-finder__alphabet::-webkit-scrollbar {
  display: none;
}


.brand-finder__letter {
  flex: 0 0 auto;

  min-width: 33px;
  height: 33px;

  padding:
    0
    9px;

  border:
    1px solid
    rgba(255,255,255,.58);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.22);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.65);

  color:
    rgba(49,70,72,.62);

  font-size: 12px;
  font-weight: 650;

  cursor: pointer;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    color 180ms ease,
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms
      cubic-bezier(.16,1,.3,1),
    box-shadow 200ms ease;
}


.brand-finder__letter:hover {
  color: #17292b;

  background:
    rgba(255,255,255,.54);

  transform:
    translateY(-1px);
}


.brand-finder__letter--active {
  color: #f5ffff;

  border-color:
    rgba(26,129,122,.34);

  background:
    linear-gradient(
      145deg,
      rgba(26,154,144,.94),
      rgba(18,121,115,.90)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.32),

    0 5px 15px
      rgba(18,119,112,.16);
}


/* ============================================================
   FILTER TRANSITION
   ============================================================ */

.brand-picker__list {
  transition:
    opacity 145ms ease,
    transform 180ms ease;
}


.brand-picker__list--filtering {
  opacity: .14;

  transform:
    translate3d(0,4px,0)
    scale(.995);
}


.brand-picker__item--finder-visible {
  animation:
    brandFinderReveal
    440ms
    cubic-bezier(.16,1,.3,1)
    both;

  animation-delay:
    calc(
      min(var(--finder-index), 14)
      * 25ms
    );
}


@keyframes brandFinderReveal {
  from {
    opacity: 0;

    transform:
      translate3d(0,10px,0)
      scale(.982);
  }

  to {
    opacity: 1;

    transform:
      translate3d(0,0,0)
      scale(1);
  }
}


/* ============================================================
   EMPTY
   ============================================================ */

.brand-finder__empty {
  padding:
    46px
    20px
    54px;

  text-align: center;

  color:
    rgba(44,66,68,.55);
}


.brand-finder__empty strong {
  display: block;

  margin-bottom: 5px;

  color: #263b3d;

  font-size: 16px;
}


.brand-finder__empty span {
  font-size: 13px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .brand-finder {
    display: block;

    padding:
      10px
      14px
      12px;
  }


  .brand-finder__search {
    width: 100%;
    min-width: 0;
  }


  .brand-finder__input {
    height: 48px;

    border-radius:
      16px;
  }


  .brand-finder__alphabet {
    margin-top: 9px;

    gap: 6px;

    /*
     * Горизонтальный свайп букв —
     * не отнимаем высоту экрана.
     */
    padding-bottom: 1px;
  }


  .brand-finder__letter {
    min-width: 34px;
    height: 34px;

    border-radius:
      11px;
  }

}


/* ============================================================
   DYNAMIC VEHICLE HERO — FROZEN ICE
   ============================================================ */

.stage {
  max-width: 1180px;
}


/* ---------- HERO ---------- */

.vehicle-hero {
  --brand-rgb: 78, 184, 174;
  --brand-rgb-2: 106, 168, 214;

  position: relative;

  margin: 8px 0 26px;

  padding:
    24px
    28px
    22px;

  text-align: left;

  border:
    1px solid rgba(255,255,255,.82);

  border-radius: 32px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.54),
      rgba(244,249,249,.34)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.96),

    0 24px 70px
      rgba(38,72,72,.09);

  backdrop-filter:
    blur(30px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(135%);

  transition:
    background 500ms ease,
    border-color 400ms ease;
}


/* Ледяная верхняя кромка */
.vehicle-hero::before {
  content: "";

  position: absolute;

  z-index: 5;

  left: 24px;
  right: 24px;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.98) 18%,
      #fff 50%,
      rgba(255,255,255,.98) 82%,
      transparent
    );

  pointer-events: none;
}


/* dynamic colour bloom */
.vehicle-hero__ambient {
  position: absolute;

  z-index: 0;

  width: 560px;
  height: 430px;

  right: -160px;
  top: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(var(--brand-rgb), .28),
      rgba(var(--brand-rgb-2), .13) 44%,
      transparent 72%
    );

  filter: blur(12px);

  opacity: .34;

  transition:
    opacity 500ms ease;

  pointer-events: none;
}


.vehicle-hero--selected
.vehicle-hero__ambient {
  opacity: .92;
}


/* ---------- TOP ---------- */

.vehicle-hero__top {
  position: relative;

  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.vehicle-hero__eyebrow {
  display: inline-flex;
  align-items: center;

  min-height: 31px;

  padding: 0 12px;

  border:
    1px solid rgba(255,255,255,.70);

  border-radius: 999px;

  background:
    rgba(255,255,255,.34);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.84);

  color: #367e78;

  font-size: 11px;
  font-weight: 650;

  letter-spacing: .05em;

  text-transform: uppercase;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.vehicle-hero__status {
  display: flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(54,75,77,.58);

  font-size: 12px;
  font-weight: 600;
}


.vehicle-hero__status-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #14b8a6;

  box-shadow:
    0 0 0 5px
      rgba(20,184,166,.08);
}


/* ---------- 7 / 5 GRID ---------- */

.vehicle-hero__grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 7fr)
    minmax(280px, 5fr);

  gap: 22px;

  min-height: 238px;

  align-items: center;
}


.vehicle-hero:not(.vehicle-hero--selected)
.vehicle-hero__grid {
  grid-template-columns: 1fr;
  min-height: 205px;
}


.vehicle-hero__content {
  position: relative;

  z-index: 4;

  max-width: 710px;
}


/* ---------- H1 ---------- */

.vehicle-hero .stage__title {
  margin: 0;

  max-width: 760px;

  font-family: var(--font-body);

  font-size:
    clamp(38px, 5vw, 64px);

  line-height: 1.01;

  letter-spacing: -.048em;

  font-weight: 620;

  color: #112527;

  text-wrap: balance;

  transition:
    opacity 220ms ease,
    transform 320ms ease;
}


.vehicle-hero .stage__subtitle {
  max-width: 610px;

  margin:
    18px
    0
    0;

  color:
    rgba(52,73,75,.64);

  font-size: 16px;

  line-height: 1.55;

  text-wrap: balance;
}


/* ---------- CAR VISUAL ---------- */

.vehicle-hero__visual {
  position: relative;

  min-width: 0;
  height: 230px;

  pointer-events: none;
}


.vehicle-hero__visual[hidden] {
  display: none !important;
}


/* огромный размытый SVG */
.vehicle-hero__brand-mark {
  position: absolute;

  z-index: 1;

  width: 66%;
  height: 72%;

  left: 2%;
  top: 4%;

  object-fit: contain;

  filter:
    grayscale(1)
    brightness(.45)
    contrast(.82)
    blur(2px);

  opacity: .09;

  transform:
    translate3d(0,0,0);
}


/*
 * Каталожные изображения моделей и поколений
 * обычно подготовлены на белом фоне.
 *
 * Вместо ручного удаления фона у тысяч файлов
 * создаём единую белую frozen-сцену.
 */
.vehicle-hero--frozen-car
.vehicle-hero__visual {
  border: 1px solid rgba(30, 54, 57, .07);
  border-radius: 24px;

  background:
    radial-gradient(
      ellipse 76% 54% at 70% 78%,
      rgba(211, 222, 221, .30),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfcfc 58%,
      #f5f8f7 100%
    );

  box-shadow:
    0 24px 55px rgba(35, 65, 67, .10),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  transition:
    background 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}


/*
 * Логотип бренда остаётся фоновым слоем,
 * но на белой сцене делаем его чуть спокойнее.
 */
.vehicle-hero--frozen-car
.vehicle-hero__brand-mark {
  opacity: .055;

  filter:
    grayscale(1)
    brightness(.58)
    contrast(.78)
    blur(2px);
}


/*
 * Каталожное изображение должно сливаться
 * с белой сценой, не выглядя отдельной карточкой.
 */
.vehicle-hero--frozen-car
.vehicle-hero__car {
  /*
   * Отменяем увеличенную геометрию brand hero.
   * Каталожная фотография должна целиком помещаться
   * внутри белой frozen-сцены.
   */
  width: 94%;
  height: 92%;

  right: 3%;
  bottom: 4%;

  object-fit: contain;
  object-position: center center;

  filter:
    drop-shadow(
      0 12px 15px
      rgba(28, 48, 50, .10)
    );
}


/* curated car */
.vehicle-hero__car {
  position: absolute;

  z-index: 2;

  width: 108%;
  height: 112%;

  right: -10%;
  bottom: -12%;

  object-fit: contain;
  object-position: center bottom;

  filter:
    drop-shadow(
      0 17px 17px
      rgba(27,44,46,.17)
    );

  animation:
    vehicleHeroCarIn
    600ms
    cubic-bezier(.16,1,.3,1)
    both;
}


@keyframes vehicleHeroCarIn {
  from {
    opacity: 0;

    transform:
      translate3d(22px,8px,0)
      scale(.96);
  }

  to {
    opacity: 1;

    transform:
      translate3d(0,0,0)
      scale(1);
  }
}


/* ============================================================
   PROGRESS
   ============================================================ */

.vehicle-progress {
  position: relative;

  z-index: 5;

  display: grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto 1fr
    auto;

  align-items: start;

  gap: 10px;

  margin-top: 18px;

  padding-top: 18px;

  border-top:
    1px solid rgba(255,255,255,.52);
}


.vehicle-progress__item {
  display: grid;

  justify-items: center;

  gap: 7px;

  min-width: 68px;

  transition:
    color 280ms ease;
}


.vehicle-progress__node {
  position: relative;

  width: 11px;
  height: 11px;

  border:
    2px solid rgba(73,99,101,.23);

  border-radius: 50%;

  transition:
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    transform 320ms ease;
}


.vehicle-progress__label {
  font-size: 11px;
  font-weight: 600;
}


.vehicle-progress__line {
  height: 2px;

  margin-top: 5px;

  border-radius: 999px;

  transition:
    background 420ms ease,
    box-shadow 420ms ease;
}


/* ---------- DONE STATES ---------- */

.stage:has(#stepMark.step--done)
[data-progress-step="mark"],

.stage:has(#stepModel.step--done)
[data-progress-step="model"],

.stage:has(#stepGen.step--done)
[data-progress-step="generation"],

.stage:has(#stepMod.step--done)
[data-progress-step="modification"] {
  color: #188f84;
}


.stage:has(#stepMark.step--done)
[data-progress-step="mark"]
.vehicle-progress__node,

.stage:has(#stepModel.step--done)
[data-progress-step="model"]
.vehicle-progress__node,

.stage:has(#stepGen.step--done)
[data-progress-step="generation"]
.vehicle-progress__node,

.stage:has(#stepMod.step--done)
[data-progress-step="modification"]
.vehicle-progress__node {
  border-color: #14b8a6;

  background: #14b8a6;

  box-shadow:
    0 0 0 5px
      rgba(20,184,166,.09);

  transform:
    scale(1.08);
}


/*
 * Три progress-линии:
 * они соответствуют существующим cable1/2/3.
 */

.stage:has(#stepMark.step--done)
.vehicle-progress__line:nth-of-type(1),

.stage:has(#stepModel.step--done)
.vehicle-progress__line:nth-of-type(2),

.stage:has(#stepGen.step--done)
.vehicle-progress__line:nth-of-type(3) {
  background:
    rgba(20,184,166,.72);

  box-shadow:
    0 0 8px
      rgba(20,184,166,.12);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .vehicle-hero {
    margin:
      0
      0
      18px;

    padding:
      18px
      17px
      16px;

    border-radius:
      26px;
  }


  .vehicle-hero__top {
    margin-bottom: 17px;
  }


  .vehicle-hero__eyebrow {
    min-height: 28px;

    padding:
      0
      10px;

    font-size: 10px;
  }


  .vehicle-hero__status {
    font-size: 10px;
  }


  .vehicle-hero__grid,
  .vehicle-hero:not(.vehicle-hero--selected)
  .vehicle-hero__grid {
    grid-template-columns: 1fr;

    gap: 4px;

    min-height: auto;
  }


  .vehicle-hero .stage__title {
    font-size:
      clamp(36px, 11vw, 50px);

    line-height: 1.01;
  }


  .vehicle-hero .stage__subtitle {
    margin-top: 13px;

    font-size: 14px;

    line-height: 1.48;
  }


  /*
   * После выбора марки машина становится
   * отдельной нижней частью Hero.
   */
  .vehicle-hero__visual {
    height: 175px;

    margin-top: 4px;
  }


  .vehicle-hero__brand-mark {
    width: 49%;
    height: 78%;

    left: 7%;
    top: 2%;

    opacity: .075;
  }


  .vehicle-hero__car {
    width: 72%;
    height: 112%;

    right: -4%;
    bottom: -12%;
  }


  .vehicle-progress {
    gap: 5px;

    padding-top: 14px;

    grid-template-columns:
      auto 1fr
      auto 1fr
      auto 1fr
      auto;
  }


  .vehicle-progress__item {
    min-width: 42px;

    gap: 5px;
  }


  .vehicle-progress__line {
    margin-top: 5px;
  }

}


/* ============================================================
   VEHICLE HERO — CLIPPING FIX
   Убираем прямоугольные compositing-артефакты backdrop/filter
   в скруглённых углах.
   ============================================================ */

.vehicle-hero {
  overflow: hidden !important;
  isolation: isolate;

  clip-path:
    inset(0 round 32px);

  -webkit-clip-path:
    inset(0 round 32px);

  contain: paint;
}

.vehicle-hero__ambient,
.vehicle-hero__visual {
  overflow: hidden;
}

@media (max-width: 620px) {
  .vehicle-hero {
    clip-path:
      inset(0 round 26px);

    -webkit-clip-path:
      inset(0 round 26px);
  }
}


/* ============================================================
   VEHICLE PROGRESS V2
   pending = amber
   active  = animated amber
   done    = green
   ============================================================ */


/* Сначала нейтрализуем старую :has()-логику */

.vehicle-progress__item {
  color:
    rgba(104,88,43,.62) !important;
}

.vehicle-progress__node {
  border-color:
    rgba(232,176,43,.42) !important;

  background:
    rgba(255,205,72,.28) !important;

  box-shadow:
    0 0 0 5px
      rgba(244,188,49,.07) !important;

  transform: none !important;
}

.vehicle-progress__line {
  position: relative;

  overflow: hidden;

  background:
    rgba(225,183,71,.18) !important;

  box-shadow: none !important;
}


/* ============================================================
   PENDING
   ============================================================ */

.vehicle-progress__item--pending {
  color:
    rgba(118,98,45,.55) !important;
}


.vehicle-progress__item--pending
.vehicle-progress__node {
  border-color:
    rgba(227,178,54,.32) !important;

  background:
    rgba(255,209,89,.18) !important;
}


/* ============================================================
   ACTIVE — текущий этап
   ============================================================ */

.vehicle-progress__item--active {
  color:
    #9b7315 !important;
}


.vehicle-progress__item--active
.vehicle-progress__node {
  border-color:
    rgba(242,179,25,.86) !important;

  background:
    #f4b91f !important;

  box-shadow:
    0 0 0 6px rgba(244,185,31,.12),
    0 0 18px rgba(244,185,31,.19) !important;

  transform:
    scale(1.13) !important;

  animation:
    vehicleProgressPulse
    1.8s
    ease-in-out
    infinite;
}


@keyframes vehicleProgressPulse {

  0%,
  100% {
    box-shadow:
      0 0 0 5px rgba(244,185,31,.10),
      0 0 12px rgba(244,185,31,.12);
  }

  50% {
    box-shadow:
      0 0 0 8px rgba(244,185,31,.04),
      0 0 20px rgba(244,185,31,.22);
  }
}


/* ============================================================
   DONE
   ============================================================ */

.vehicle-progress__item--done {
  color:
    #168f84 !important;
}


.vehicle-progress__item--done
.vehicle-progress__node {
  border-color:
    #14b8a6 !important;

  background:
    #14b8a6 !important;

  box-shadow:
    0 0 0 5px rgba(20,184,166,.09) !important;

  transform:
    scale(1.08) !important;
}


/*
 * Маленькая галочка внутри завершённого этапа.
 */
.vehicle-progress__item--done
.vehicle-progress__node::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 46%;

  width: 4px;
  height: 7px;

  border:
    solid rgba(255,255,255,.96);

  border-width:
    0 1.5px 1.5px 0;

  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


/* ============================================================
   LINES
   ============================================================ */

.vehicle-progress__line--done {
  background:
    rgba(20,184,166,.68) !important;

  box-shadow:
    0 0 8px
      rgba(20,184,166,.10) !important;
}


/*
 * Линия ведёт пользователя к следующему этапу.
 */
.vehicle-progress__line--loading {
  background:
    linear-gradient(
      90deg,
      rgba(20,184,166,.78) 0%,
      rgba(20,184,166,.78) 35%,
      rgba(246,191,44,.72) 70%,
      rgba(246,191,44,.28) 100%
    ) !important;
}


.vehicle-progress__line--loading::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  width: 34%;

  left: -38%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.82),
      transparent
    );

  filter:
    blur(.5px);

  animation:
    vehicleProgressTravel
    1.65s
    cubic-bezier(.45,0,.55,1)
    infinite;
}


@keyframes vehicleProgressTravel {

  from {
    left: -38%;
  }

  to {
    left: 105%;
  }

}


/* ============================================================
   MOBILE — progress получает собственный Frozen Ice tray
   ============================================================ */

@media (max-width: 620px) {

  .vehicle-progress {
    margin-top: 15px;

    padding:
      15px
      12px
      11px;

    border:
      1px solid
      rgba(255,255,255,.68);

    border-radius:
      19px;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.45),
        rgba(239,247,247,.25)
      );

    box-shadow:
      inset 0 1px 0
        rgba(255,255,255,.82),

      0 7px 20px
        rgba(38,67,69,.045);

    backdrop-filter:
      blur(16px)
      saturate(130%);

    -webkit-backdrop-filter:
      blur(16px)
      saturate(130%);
  }


  /*
   * Старая border-top здесь больше не нужна:
   * теперь весь progress сам является frozen tray.
   */
  .vehicle-progress {
    border-top:
      1px solid
      rgba(255,255,255,.68);
  }


  .vehicle-progress__label {
    font-size: 9px;

    line-height: 1.1;

    white-space: nowrap;
  }


  .vehicle-progress__line {
    margin-left: -1px;
    margin-right: -1px;
  }

}


/* reduced motion */
@media (prefers-reduced-motion: reduce) {

  .vehicle-progress__item--active
  .vehicle-progress__node,

  .vehicle-progress__line--loading::after {
    animation: none !important;
  }

}

/* ============================================================
   COMMERCIAL OIL CARD — RESTORE
   Изолировано: обычные карточки масел и фильтров не затрагивает.
   ============================================================ */

.commercial-oils__head {
  margin-bottom: 20px;
}

.commercial-oils__kicker {
  margin-bottom: 6px;

  color: var(--accent);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.commercial-oils__title {
  margin: 0;

  font-family: var(--font-body);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--text-main);
}

.commercial-oils__subtitle {
  max-width: 680px;

  margin: 8px 0 0;

  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}


/* Primary и alternative идут вертикально, НЕ конкурируют рядом */
.commercial-oils {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}


/* ============================================================
   CARD
   ============================================================ */

.catalog-product--commercial {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(150px, 190px)
    minmax(0, 1fr);

  grid-template-areas:
    "badge badge"
    "media content";

  column-gap: 24px;
  row-gap: 12px;

  width: 100%;
  box-sizing: border-box;

  padding: 18px;

  border:
    1px solid rgba(255,255,255,.72);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.52),
      rgba(240,247,247,.31)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 12px 34px rgba(38,68,70,.055);

  overflow: hidden;

  backdrop-filter:
    blur(18px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%);
}


/* ============================================================
   LABEL
   ============================================================ */

.catalog-product--commercial
.oil-card__badge {
  grid-area: badge;

  justify-self: start;

  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 0 10px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}


.catalog-product--primary
.oil-card__badge {
  color: #148f84;

  border:
    1px solid rgba(20,184,166,.18);

  background:
    rgba(20,184,166,.08);
}


.catalog-product--alternative
.oil-card__badge {
  color: #947019;

  border:
    1px solid rgba(215,168,47,.20);

  background:
    rgba(230,183,57,.09);
}


/* ============================================================
   IMAGE
   ============================================================ */

.catalog-product--commercial
.oil-card__media {
  grid-area: media;

  width: auto;
  height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}


/* ============================================================
   CONTENT
   ============================================================ */

.catalog-product--commercial
.oil-card__content {
  grid-area: content;

  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 2px 0;
}


.catalog-product--commercial
.catalog-product__brand {
  margin-bottom: 5px;

  color: var(--accent);

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;

  text-transform: uppercase;
}


.catalog-product--commercial
.oil-card__name {
  margin: 0;

  max-width: 720px;

  color: var(--text-main);

  font-family: var(--font-body);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.02em;
}


/* ============================================================
   TECHNICAL CHIPS
   ============================================================ */

.oil-card__technical {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: 10px;
}

.oil-card__viscosity,
.oil-card__approval {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  padding: 0 9px;

  border:
    1px solid rgba(20,184,166,.13);

  border-radius: 999px;

  background:
    rgba(255,255,255,.34);

  color: #496466;

  font-size: 10px;
  font-weight: 600;
}


/* ============================================================
   FACTS
   ============================================================ */

.oil-card__facts {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 7px;

  margin-top: 16px;
}


.oil-card__fact {
  min-width: 0;

  padding: 9px 10px;

  border:
    1px solid rgba(255,255,255,.60);

  border-radius: 12px;

  background:
    rgba(255,255,255,.25);
}


.oil-card__fact-label {
  display: block;

  margin-bottom: 3px;

  color: var(--text-muted);

  font-size: 9px;
  line-height: 1.25;
}


.oil-card__fact-value {
  display: block;

  color: var(--text-main);

  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}


.oil-card__fact--total {
  border-color:
    rgba(20,184,166,.18);

  background:
    rgba(20,184,166,.07);
}


.oil-card__fact--total
.oil-card__fact-value {
  color: #128f84;
  font-weight: 700;
}


/* ============================================================
   BUTTON
   ============================================================ */

.catalog-product--commercial
.oil-card__select {
  align-self: flex-start;

  margin-top: 14px;
}


/* Alternative намеренно немного спокойнее primary */
.catalog-product--alternative {
  opacity: .92;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .catalog-product--commercial {
    grid-template-columns: 1fr;

    grid-template-areas:
      "badge"
      "media"
      "content";

    gap: 10px;

    padding: 14px;

    border-radius: 20px;
  }


  .catalog-product--commercial
  .oil-card__media {
    width: 100%;
    height: 155px;
  }


  .oil-card__facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .oil-card__fact--total {
    grid-column:
      1 / -1;
  }


  .catalog-product--commercial
  .oil-card__select {
    width: 100%;
  }

}


/* ============================================================
   OTHER OILS — VERTICAL FROZEN LIST
   Не затрагивает recommended / alternative / filters.
   ============================================================ */


/* ---------- HEADER ---------- */

.oil-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 11px;

  padding: 0 5px;
}


.oil-choice__heading {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;
}


.oil-choice__title {
  margin: 0;

  color: var(--text-main);

  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 650;

  letter-spacing: -.018em;
}


.oil-choice__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 25px;
  height: 25px;

  padding: 0 7px;

  border-radius: 999px;

  background:
    rgba(20,184,166,.09);

  color: #168f84;

  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}


.oil-choice__hint {
  color: rgba(73,93,95,.44);

  font-size: 11px;
  font-weight: 500;
}


/* ============================================================
   FROZEN VIEWPORT
   ============================================================ */

.oil-choice__viewport {
  position: relative;

  overflow: hidden;

  padding: 7px;

  border:
    1px solid rgba(255,255,255,.75);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.48),
      rgba(239,247,247,.28)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.91),

    0 14px 36px
      rgba(39,68,70,.05);

  backdrop-filter:
    blur(22px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(130%);
}


/*
 * Нижний frost-fade показывает,
 * что внутри есть продолжение списка.
 */
.oil-choice__viewport::after {
  content: "";

  position: absolute;

  z-index: 4;

  pointer-events: none;

  left: 8px;
  right: 14px;
  bottom: 7px;

  height: 34px;

  border-radius:
    0 0 17px 17px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(239,246,246,.84)
    );
}


/* ============================================================
   INTERNAL SCROLL
   ============================================================ */

.oil-choice__list {
  position: relative;

  z-index: 2;

  display: grid;

  max-height: 520px;

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    1px
    7px
    24px
    1px;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(20,184,166,.30)
    transparent;
}


.oil-choice__list::-webkit-scrollbar {
  width: 5px;
}


.oil-choice__list::-webkit-scrollbar-track {
  background: transparent;
}


.oil-choice__list::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(20,184,166,.28);
}


/* ============================================================
   ROW
   ============================================================ */

.oil-choice-row {
  position: relative;

  display: grid;

  grid-template-columns:
    82px
    minmax(0, 1fr)
    126px
    112px;

  align-items: center;

  gap: 15px;

  min-height: 104px;

  box-sizing: border-box;

  padding:
    11px
    12px;

  transition:
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}


/* ---------- IMAGE ---------- */

.oil-choice-row__media {
  width: 82px;
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 13px;
}


.oil-choice-row__image {
  display: block;

  max-width: 74px;
  max-height: 74px;

  object-fit: contain;
}


/* ---------- PRODUCT ---------- */

.oil-choice-row__info {
  min-width: 0;
}


.oil-choice-row__brand {
  margin-bottom: 4px;

  color: #178f85;

  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;

  letter-spacing: .07em;
  text-transform: uppercase;
}


.oil-choice-row__name {
  margin: 0;

  color: var(--text-main);

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;

  line-height: 1.32;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.oil-choice-row__meta {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap: 7px;

  margin-top: 7px;
}


.oil-choice-row__chip {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  padding: 0 8px;

  border:
    1px solid rgba(20,184,166,.14);

  border-radius: 999px;

  background:
    rgba(20,184,166,.06);

  color: #39706c;

  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}


.oil-choice-row__meta-text {
  color: var(--text-muted);

  font-size: 10px;
}


/* ============================================================
   PRICE
   ============================================================ */

.oil-choice-row__price {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 3px;

  text-align: right;
}


.oil-choice-row__unit-price {
  color: var(--text-muted);

  font-size: 10px;

  white-space: nowrap;
}


.oil-choice-row__total {
  color: var(--text-main);

  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 650;

  white-space: nowrap;
}


.oil-choice-row__total--request {
  font-family: var(--font-body);
  font-size: 12px;
}


/* ============================================================
   ACTION
   ============================================================ */

.oil-choice-row__action {
  display: flex;

  justify-content: flex-end;
}


.oil-choice-row
.oil-choice-row__select {
  width: 100%;

  text-align: center;

  white-space: nowrap;
}


/* ============================================================
   SELECTED
   refreshProductSelectionUI() сам добавляет этот класс.
   ============================================================ */


.oil-choice-row.catalog-product--selected
.oil-choice-row__total {
  color: #128f84;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 820px) {

  .oil-choice-row {
    grid-template-columns:
      72px
      minmax(0, 1fr)
      115px;

    grid-template-areas:
      "media info price"
      "media info action";
  }


  .oil-choice-row__media {
    grid-area: media;

    width: 72px;
    height: 72px;
  }


  .oil-choice-row__image {
    max-width: 66px;
    max-height: 66px;
  }


  .oil-choice-row__info {
    grid-area: info;
  }


  .oil-choice-row__price {
    grid-area: price;
  }


  .oil-choice-row__action {
    grid-area: action;

    align-self: end;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .oil-choice {
    margin-top: 19px;
  }


  .oil-choice__head {
    margin-bottom: 9px;
  }


  .oil-choice__hint {
    display: none;
  }


  .oil-choice__title {
    font-size: 17px;
  }


  .oil-choice__viewport {
    padding: 6px;

    border-radius: 20px;
  }


  .oil-choice__list {
    max-height: 440px;

    padding-right: 4px;
  }


  .oil-choice-row {
    grid-template-columns:
      67px
      minmax(0,1fr);

    grid-template-areas:
      "media info"
      "media price"
      "action action";

    gap:
      7px
      11px;

    min-height: 0;

    padding: 10px;
  }


  .oil-choice-row:hover {
    transform: none;
  }


  .oil-choice-row__media {
    width: 67px;
    height: 67px;
  }


  .oil-choice-row__image {
    max-width: 61px;
    max-height: 61px;
  }


  .oil-choice-row__name {
    font-size: 12px;
  }


  .oil-choice-row__price {
    align-items: flex-start;

    text-align: left;
  }


  .oil-choice-row__total {
    font-size: 15px;
  }


  .oil-choice-row__action {
    margin-top: 3px;
  }


  .oil-choice-row
  .oil-choice-row__select {
    width: 100%;
  }

}


/* ============================================================
   OTHER OILS — FROZEN MATTE ROWS / ACCENT ACTION V2
   Только визуальный слой. JS не затрагивается.
   ============================================================ */


/* ------------------------------------------------------------
   FROZEN MATTE ROW
   ------------------------------------------------------------ */

.oil-choice-row {
  isolation: isolate;
  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.88);

  border-radius:
    19px 15px 20px 14px;

  background:
    linear-gradient(
      132deg,
      rgba(255,255,255,.64) 0%,
      rgba(255,255,255,.37) 42%,
      rgba(226,241,240,.30) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(73,118,116,.055),
    0 7px 18px rgba(47,76,77,.045);

  backdrop-filter:
    blur(18px)
    saturate(122%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(122%);
}


/*
 * Мягкий frozen-блик в верхней части.
 */
.oil-choice-row::before {
  content: "";

  position: absolute;
  z-index: -1;

  pointer-events: none;

  top: -35px;
  left: 12%;
  right: 18%;

  height: 70px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.58);

  filter: blur(22px);

  opacity: .68;
}


/*
 * Очень лёгкий ледяной tint справа.
 * Заодно визуально связывает цену и CTA.
 */
.oil-choice-row::after {
  content: "";

  position: absolute;
  z-index: -1;

  pointer-events: none;

  top: 0;
  right: 0;
  bottom: 0;

  width: 31%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(20,184,166,.035)
    );
}


/* Между плитками появляется настоящая граница */
.oil-choice__list {
  gap: 9px;
}


/* ------------------------------------------------------------
   HOVER ROW
   ------------------------------------------------------------ */

.oil-choice-row:hover {
  border-color:
    rgba(255,255,255,.98);

  background:
    linear-gradient(
      132deg,
      rgba(255,255,255,.76),
      rgba(255,255,255,.45) 45%,
      rgba(222,243,240,.38)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.62),
    0 10px 26px rgba(43,82,80,.07);

  transform:
    translateX(2px);
}


/* ------------------------------------------------------------
   IMAGE WELL
   Чуть сильнее отделяем товар от matte-поверхности.
   ------------------------------------------------------------ */

.oil-choice-row__media {
  border:
    1px solid rgba(255,255,255,.78);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(238,246,245,.38)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 3px 10px rgba(50,80,80,.035);
}


/* ------------------------------------------------------------
   CTA — ОСНОВНОЙ АКЦЕНТ
   ------------------------------------------------------------ */

.oil-choice-row
.oil-choice-row__select {
  position: relative;

  overflow: hidden;

  min-height: 40px;

  margin: 0;
  padding: 0 16px;

  border:
    1px solid rgba(20,184,166,.28);

  border-radius:
    13px 10px 14px 10px;

  background:
    linear-gradient(
      145deg,
      rgba(25,193,177,.14),
      rgba(20,184,166,.075)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 5px 13px rgba(20,150,138,.075);

  color: #128c82;

  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 650;

  letter-spacing: .015em;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


/*
 * Ледяной блик внутри кнопки.
 */
.oil-choice-row
.oil-choice-row__select::before {
  content: "";

  position: absolute;

  pointer-events: none;

  top: 0;
  left: 10%;
  right: 10%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.95),
      transparent
    );
}


/* ------------------------------------------------------------
   CTA HOVER
   ------------------------------------------------------------ */

.oil-choice-row
.oil-choice-row__select:hover {
  border-color:
    rgba(20,184,166,.55);

  background:
    linear-gradient(
      145deg,
      rgba(29,199,182,.23),
      rgba(20,184,166,.13)
    );

  color: #087e75;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 7px 17px rgba(20,150,138,.13);

  transform:
    translateY(-1px);
}


/* Нажатие */
.oil-choice-row
.oil-choice-row__select:active {
  transform:
    translateY(0);

  box-shadow:
    inset 0 1px 3px rgba(18,112,105,.10);
}


/* ------------------------------------------------------------
   SELECTED ROW
   ------------------------------------------------------------ */

.oil-choice-row.catalog-product--selected {
  border-color:
    rgba(20,184,166,.42);

  background:
    linear-gradient(
      132deg,
      rgba(236,252,249,.78),
      rgba(255,255,255,.48) 47%,
      rgba(211,244,239,.40)
    );

  box-shadow:
    inset 3px 0 0 rgba(20,184,166,.78),
    inset 0 1px 0 rgba(255,255,255,1),
    0 9px 23px rgba(20,130,120,.075);
}


/*
 * После выбора кнопка становится заполненной.
 */
.oil-choice-row.catalog-product--selected
.oil-choice-row__select {
  border-color:
    rgba(12,151,138,.78);

  background:
    linear-gradient(
      145deg,
      rgba(20,184,166,.94),
      rgba(15,157,145,.91)
    );

  color: #fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.31),
    0 6px 16px rgba(15,145,134,.18);
}


/*
 * Выбранная кнопка уже не должна визуально
 * приглашать нажать её ещё раз.
 */
.oil-choice-row.catalog-product--selected
.oil-choice-row__select:hover {
  color: #fff;

  transform: none;

  background:
    linear-gradient(
      145deg,
      rgba(20,184,166,.94),
      rgba(15,157,145,.91)
    );
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 620px) {

  .oil-choice__list {
    gap: 8px;
  }

  .oil-choice-row {
    border-radius:
      17px 13px 18px 12px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.66),
        rgba(244,250,249,.39)
      );

    backdrop-filter:
      blur(20px)
      saturate(125%);

    -webkit-backdrop-filter:
      blur(20px)
      saturate(125%);
  }

  .oil-choice-row::after {
    width: 45%;
  }

  .oil-choice-row
  .oil-choice-row__select {
    min-height: 42px;

    border-radius:
      13px 10px 14px 10px;

    font-size: 13px;
  }
}


/* ============================================================
   FILTER CHOICE — FROZEN MATTE
   Масляный / воздушный / салонный фильтры
   ============================================================ */


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.filter-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 10px;

  padding: 0 5px;
}


.filter-choice__heading {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;
}


.filter-choice__title {
  margin: 0;

  color: var(--text-main);

  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 650;

  letter-spacing: -.018em;
}


.filter-choice__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 25px;
  height: 25px;

  padding: 0 7px;

  border-radius: 999px;

  background:
    rgba(20,184,166,.09);

  color: #168f84;

  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}


.filter-choice__service {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 0 10px;

  border:
    1px solid rgba(20,184,166,.14);

  border-radius: 999px;

  background:
    rgba(255,255,255,.34);

  color: #527270;

  font-size: 10px;
  font-weight: 600;
}


/* ============================================================
   OUTER FROZEN SHELL
   ============================================================ */

.filter-choice__viewport {
  position: relative;

  overflow: hidden;

  padding: 7px;

  border:
    1px solid rgba(255,255,255,.76);

  border-radius:
    24px 19px 25px 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.48),
      rgba(237,246,245,.29)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 1px 0 0 rgba(255,255,255,.42),
    0 14px 36px rgba(39,68,70,.05);

  backdrop-filter:
    blur(22px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(130%);
}


/*
 * Если вдруг фильтров станет много,
 * блок не растянет страницу бесконечно.
 */
.filter-choice__list {
  display: grid;

  gap: 9px;

  max-height: 520px;

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 5px;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(20,184,166,.27)
    transparent;
}


.filter-choice__list::-webkit-scrollbar {
  width: 5px;
}

.filter-choice__list::-webkit-scrollbar-track {
  background: transparent;
}

.filter-choice__list::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(20,184,166,.26);
}


/* ============================================================
   FILTER ROW — FROZEN MATTE TILE
   ============================================================ */

.filter-choice-row {
  position: relative;

  isolation: isolate;
  overflow: hidden;

  display: grid;

  grid-template-columns:
    82px
    minmax(0, 1fr)
    130px
    112px;

  align-items: center;

  gap: 15px;

  min-height: 104px;

  box-sizing: border-box;

  padding: 11px 12px;

  border:
    1px solid rgba(255,255,255,.88);

  border-radius:
    19px 15px 20px 14px;

  background:
    linear-gradient(
      132deg,
      rgba(255,255,255,.64),
      rgba(255,255,255,.37) 42%,
      rgba(226,241,240,.30)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(73,118,116,.055),
    0 7px 18px rgba(47,76,77,.045);

  backdrop-filter:
    blur(18px)
    saturate(122%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(122%);

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


/* верхний ice highlight */

.filter-choice-row::before {
  content: "";

  position: absolute;
  z-index: -1;

  pointer-events: none;

  top: -35px;
  left: 12%;
  right: 18%;

  height: 70px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.58);

  filter: blur(22px);

  opacity: .68;
}


/* лёгкий teal haze справа */

.filter-choice-row::after {
  content: "";

  position: absolute;
  z-index: -1;

  pointer-events: none;

  top: 0;
  right: 0;
  bottom: 0;

  width: 31%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(20,184,166,.035)
    );
}


.filter-choice-row:hover {
  border-color:
    rgba(255,255,255,.98);

  background:
    linear-gradient(
      132deg,
      rgba(255,255,255,.76),
      rgba(255,255,255,.45) 45%,
      rgba(222,243,240,.38)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.62),
    0 10px 26px rgba(43,82,80,.07);

  transform:
    translateX(2px);
}


/* ============================================================
   IMAGE
   ============================================================ */

.filter-choice-row__media {
  width: 82px;
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.78);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(238,246,245,.38)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 3px 10px rgba(50,80,80,.035);
}


.filter-choice-row__image {
  display: block;

  max-width: 74px;
  max-height: 74px;

  object-fit: contain;
}


/* ============================================================
   INFO
   ============================================================ */

.filter-choice-row__info {
  min-width: 0;
}


.filter-choice-row__brand {
  margin-bottom: 4px;

  color: #178f85;

  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;

  letter-spacing: .07em;
  text-transform: uppercase;
}


.filter-choice-row__name {
  margin: 0;

  color: var(--text-main);

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;

  line-height: 1.32;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* ============================================================
   PRICE
   ============================================================ */

.filter-choice-row__price {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 3px;

  text-align: right;
}


.filter-choice-row__price-label {
  color: var(--text-muted);

  font-size: 9px;
}


.filter-choice-row__total {
  color: var(--text-main);

  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 650;

  white-space: nowrap;
}


.filter-choice-row__total--request {
  font-family: var(--font-body);
  font-size: 12px;
}


.filter-choice-row__work {
  color: #5f7977;

  font-size: 9px;

  white-space: nowrap;
}


/* ============================================================
   CTA
   ============================================================ */

.filter-choice-row__action {
  display: flex;

  justify-content: flex-end;
}


.filter-choice-row
.filter-choice-row__select {
  position: relative;

  overflow: hidden;

  width: 100%;
  min-height: 40px;

  margin: 0;
  padding: 0 16px;

  border:
    1px solid rgba(20,184,166,.28);

  border-radius:
    13px 10px 14px 10px;

  background:
    linear-gradient(
      145deg,
      rgba(25,193,177,.14),
      rgba(20,184,166,.075)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 5px 13px rgba(20,150,138,.075);

  color: #128c82;

  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 650;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


.filter-choice-row
.filter-choice-row__select::before {
  content: "";

  position: absolute;

  pointer-events: none;

  top: 0;
  left: 10%;
  right: 10%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.95),
      transparent
    );
}


.filter-choice-row
.filter-choice-row__select:hover {
  border-color:
    rgba(20,184,166,.55);

  background:
    linear-gradient(
      145deg,
      rgba(29,199,182,.23),
      rgba(20,184,166,.13)
    );

  color: #087e75;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 7px 17px rgba(20,150,138,.13);

  transform:
    translateY(-1px);
}


/* ============================================================
   SELECTED
   ============================================================ */

.filter-choice-row.catalog-product--selected {
  border-color:
    rgba(20,184,166,.42);

  background:
    linear-gradient(
      132deg,
      rgba(236,252,249,.78),
      rgba(255,255,255,.48) 47%,
      rgba(211,244,239,.40)
    );

  box-shadow:
    inset 3px 0 0 rgba(20,184,166,.78),
    inset 0 1px 0 rgba(255,255,255,1),
    0 9px 23px rgba(20,130,120,.075);
}


.filter-choice-row.catalog-product--selected
.filter-choice-row__total {
  color: #128f84;
}


.filter-choice-row.catalog-product--selected
.filter-choice-row__select {
  border-color:
    rgba(12,151,138,.78);

  background:
    linear-gradient(
      145deg,
      rgba(20,184,166,.94),
      rgba(15,157,145,.91)
    );

  color: #fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.31),
    0 6px 16px rgba(15,145,134,.18);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 820px) {

  .filter-choice-row {
    grid-template-columns:
      72px
      minmax(0,1fr)
      115px;

    grid-template-areas:
      "media info price"
      "media info action";
  }

  .filter-choice-row__media {
    grid-area: media;

    width: 72px;
    height: 72px;
  }

  .filter-choice-row__image {
    max-width: 66px;
    max-height: 66px;
  }

  .filter-choice-row__info {
    grid-area: info;
  }

  .filter-choice-row__price {
    grid-area: price;
  }

  .filter-choice-row__action {
    grid-area: action;

    align-self: end;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .filter-choice {
    margin-top: 19px;
  }

  .filter-choice__head {
    margin-bottom: 9px;
  }

  .filter-choice__title {
    font-size: 17px;
  }

  .filter-choice__service {
    display: none;
  }

  .filter-choice__viewport {
    padding: 6px;

    border-radius:
      20px 16px 21px 15px;
  }

  .filter-choice__list {
    max-height: 440px;

    gap: 8px;

    padding-right: 4px;
  }

  .filter-choice-row {
    grid-template-columns:
      67px
      minmax(0,1fr);

    grid-template-areas:
      "media info"
      "media price"
      "action action";

    gap:
      7px
      11px;

    min-height: 0;

    padding: 10px;

    border-radius:
      17px 13px 18px 12px;
  }

  .filter-choice-row:hover {
    transform: none;
  }

  .filter-choice-row__media {
    width: 67px;
    height: 67px;
  }

  .filter-choice-row__image {
    max-width: 61px;
    max-height: 61px;
  }

  .filter-choice-row__name {
    font-size: 12px;
  }

  .filter-choice-row__price {
    align-items: flex-start;

    text-align: left;
  }

  .filter-choice-row__total {
    font-size: 15px;
  }

  .filter-choice-row__action {
    margin-top: 3px;
  }

  .filter-choice-row
  .filter-choice-row__select {
    min-height: 42px;

    font-size: 13px;
  }
}


/* ============================================================
   NESTED SCROLL CHAINING
   Внутренний список → после его конца продолжает скролл страницы
   ============================================================ */

.oil-choice__list,
.filter-choice__list {
  overscroll-behavior-y: auto;
  overscroll-behavior: auto;
}


/* ============================================================
   RESULT INNER SECTIONS — FROZEN ROUNDED ISLANDS
   Визуально разделяет блоки внутри большой карточки.
   ============================================================ */


/* ------------------------------------------------------------
   Общая внутренняя оболочка секций
   ------------------------------------------------------------ */

.catalog-section--commercial,
.oil-choice,
.filter-choice {
  position: relative;

  box-sizing: border-box;

  margin-top: 22px;
  padding: 20px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.74);

  border-radius:
    28px 22px 30px 21px;

  background:
    linear-gradient(
      137deg,
      rgba(255,255,255,.43) 0%,
      rgba(255,255,255,.23) 48%,
      rgba(225,241,239,.22) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 1px 0 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(55,99,97,.035),
    0 13px 34px rgba(39,67,69,.045);

  backdrop-filter:
    blur(22px)
    saturate(122%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(122%);
}


/*
 * Верхний frozen highlight.
 */
.catalog-section--commercial::before,
.oil-choice::before,
.filter-choice::before {
  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  top: -80px;
  left: 6%;
  right: 26%;

  height: 130px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.46);

  filter:
    blur(35px);
}


/*
 * Лёгкая teal-дымка в правом нижнем углу.
 */
.catalog-section--commercial::after,
.oil-choice::after,
.filter-choice::after {
  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  width: 250px;
  height: 250px;

  right: -140px;
  bottom: -160px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.055),
      transparent 70%
    );
}


/*
 * Всё содержимое секций держим поверх декоративных слоёв.
 */
.catalog-section--commercial > *,
.oil-choice > *,
.filter-choice > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   COMMERCIAL / RECOMMENDED
   ============================================================ */

.catalog-section--commercial {
  margin-top: 8px;

  /*
   * Немного теплее и чище остальных:
   * это главный рекомендательный блок.
   */
  background:
    linear-gradient(
      137deg,
      rgba(255,255,255,.53),
      rgba(246,250,249,.30) 50%,
      rgba(221,242,238,.25)
    );
}


/* ============================================================
   OTHER OILS
   ============================================================ */

.oil-choice {
  /*
   * Убираем старый внешний margin,
   * потому что теперь его задаёт общая оболочка.
   */
  margin-top: 18px;
}


/*
 * Внутренний scroll viewport уже сам является Frozen.
 * Внутри новой секции делаем его чуть спокойнее,
 * чтобы не было "стекло внутри стекла внутри стекла".
 */
.oil-choice .oil-choice__viewport {
  border-color:
    rgba(255,255,255,.55);

  background:
    rgba(255,255,255,.17);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60);
}


/* ============================================================
   FILTER GROUPS
   ============================================================ */

.filter-choice {
  margin-top: 18px;
}


/*
 * Каждому типу фильтра даём очень лёгкую индивидуальность,
 * но не превращаем интерфейс в радугу.
 */

.filter-choice[data-filter-type="oilFilter"] {
  border-radius:
    27px 21px 29px 20px;
}

.filter-choice[data-filter-type="airFilter"] {
  border-radius:
    23px 29px 21px 28px;
}

.filter-choice[data-filter-type="salonFilter"] {
  border-radius:
    30px 22px 27px 20px;
}


/*
 * Внутренний контейнер фильтров тоже успокаиваем,
 * потому что внешний island уже создаёт границу секции.
 */
.filter-choice .filter-choice__viewport {
  border-color:
    rgba(255,255,255,.54);

  background:
    rgba(255,255,255,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58);
}


/* ============================================================
   SECTION HEADERS
   ============================================================ */

.catalog-section--commercial .commercial-oils__head,
.oil-choice__head,
.filter-choice__head {
  margin-bottom: 15px;
}


/*
 * Маленький визуальный маркер секции.
 */
.oil-choice__title::before,
.filter-choice__title::before {
  content: "";

  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 9px;

  vertical-align: 2px;

  border-radius: 50%;

  background:
    rgba(20,184,166,.72);

  box-shadow:
    0 0 0 5px rgba(20,184,166,.07);
}


/* ============================================================
   SPACE BETWEEN ISLANDS
   ============================================================ */

.catalog-section--commercial + .oil-choice,
.oil-choice + .filter-choice,
.filter-choice + .filter-choice {
  margin-top: 16px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .catalog-section--commercial,
  .oil-choice,
  .filter-choice {
    padding: 14px;

    border-radius:
      22px 17px 24px 16px;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.90),
      0 9px 24px rgba(39,67,69,.04);
  }


  .catalog-section--commercial + .oil-choice,
  .oil-choice + .filter-choice,
  .filter-choice + .filter-choice {
    margin-top: 12px;
  }


  .oil-choice__title::before,
  .filter-choice__title::before {
    width: 6px;
    height: 6px;

    margin-right: 7px;

    box-shadow:
      0 0 0 4px rgba(20,184,166,.065);
  }

}


/* ============================================================
   CHECKOUT / CALCULATOR V2
   Финальный расчёт выбранного комплекта
   ============================================================ */

.catalog-calculator {
  position: relative;

  margin-top: 24px;
  padding: 26px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.86);

  border-radius:
    32px 24px 34px 23px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.62),
      rgba(244,250,249,.37) 48%,
      rgba(218,241,237,.29)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.44),
    0 18px 46px rgba(39,72,72,.065);

  backdrop-filter:
    blur(28px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(135%);
}


/* ледяной свет */

.catalog-calculator::before {
  content: "";

  position: absolute;

  pointer-events: none;

  width: 450px;
  height: 220px;

  left: 5%;
  top: -170px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.62);

  filter: blur(45px);
}


/* teal glow около финальной цены */

.catalog-calculator::after {
  content: "";

  position: absolute;

  pointer-events: none;

  width: 330px;
  height: 330px;

  right: -170px;
  bottom: -190px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.11),
      transparent 69%
    );
}


.catalog-calculator > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   HEAD
   ============================================================ */

.catalog-calculator__head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 23px;
}


.catalog-calculator__heading {
  min-width: 0;
}


.catalog-calculator__kicker {
  margin-bottom: 6px;

  color: #168f84;

  font-size: 10px;
  font-weight: 750;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.catalog-calculator__title {
  margin: 0;

  font-family: var(--font-body);

  font-size:
    clamp(25px,3vw,34px);

  font-weight: 650;

  line-height: 1.08;

  letter-spacing: -.03em;

  color: var(--text-main);
}


.catalog-calculator__subtitle {
  margin:
    8px 0 0;

  color: var(--text-muted);

  font-size: 12px;

  line-height: 1.45;
}


.catalog-calculator__status {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 26px;

  padding:
    0 11px;

  border:
    1px solid rgba(20,184,166,.17);

  border-radius: 999px;

  background:
    rgba(20,184,166,.075);

  color: #128c82;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .055em;

  text-transform: uppercase;
}


.catalog-calculator__status::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #14b8a6;

  box-shadow:
    0 0 0 5px rgba(20,184,166,.09);
}


/* ============================================================
   EMPTY
   ============================================================ */

.catalog-calculator__empty {
  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 70px;

  padding: 16px;

  border:
    1px solid rgba(255,255,255,.58);

  border-radius:
    18px 14px 19px 13px;

  background:
    rgba(255,255,255,.22);
}


.catalog-calculator__empty-icon {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(20,184,166,.08);

  color: #168f84;

  font-size: 19px;
}


.catalog-calculator__empty-text {
  color: var(--text-muted);

  font-size: 12px;

  line-height: 1.45;
}


/* ============================================================
   GROUPS
   ============================================================ */

.catalog-calculator__group {
  margin-top: 13px;

  padding: 7px;

  border:
    1px solid rgba(255,255,255,.66);

  border-radius:
    22px 17px 23px 16px;

  background:
    rgba(255,255,255,.21);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70);
}


.catalog-calculator__group-title {
  padding:
    7px 10px 10px;

  color: #587270;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.catalog-calculator__rows {
  display: grid;

  gap: 6px;
}


/* ============================================================
   PRODUCT ROW
   ============================================================ */

.catalog-calculator__row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    13px 14px;

  border: 0;

  border-radius:
    16px 13px 17px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.48),
      rgba(255,255,255,.28)
    );
}


.catalog-calculator__item {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.catalog-calculator__label {
  color: #168f84;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.catalog-calculator__name {
  color: var(--text-main);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.35;
}


.catalog-calculator__meta {
  margin-top: 2px;

  color: var(--text-muted);

  font-size: 10px;
}


.catalog-calculator__price {
  flex-shrink: 0;

  color: var(--text-main);

  font-family: var(--font-mono);

  font-size: 15px;
  font-weight: 650;

  text-align: right;

  white-space: nowrap;
}


/* ============================================================
   WORKS
   ============================================================ */

.catalog-calculator__group--works {
  background:
    rgba(236,247,245,.20);
}


.catalog-calculator__row--work {
  padding:
    10px 14px;

  background:
    rgba(255,255,255,.18);

  color: var(--text-muted);
}


.catalog-calculator__work-name {
  color: #5d7775;

  font-size: 11px;
}


.catalog-calculator__price--free {
  color: #128f84;

  font-family: var(--font-body);

  font-size: 11px;
  font-weight: 700;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.catalog-calculator__summary {
  margin-top: 18px;

  padding:
    18px;

  overflow: hidden;

  border:
    1px solid rgba(20,184,166,.18);

  border-radius:
    24px 18px 26px 17px;

  background:
    linear-gradient(
      135deg,
      rgba(229,250,246,.56),
      rgba(255,255,255,.37)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88);
}


.catalog-calculator__breakdown {
  display: grid;

  gap: 7px;

  padding-bottom: 15px;

  border-bottom:
    1px solid rgba(20,184,166,.13);
}


.catalog-calculator__breakdown-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: #607977;

  font-size: 11px;
}


.catalog-calculator__breakdown-row strong {
  color: var(--text-main);

  font-family: var(--font-mono);

  font-size: 12px;
}


/* ============================================================
   GRAND TOTAL
   ============================================================ */

.catalog-calculator__grand {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 25px;

  padding-top: 17px;
}


.catalog-calculator__grand-label {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.catalog-calculator__grand-label span {
  color: #178f85;

  font-size: 11px;
  font-weight: 750;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.catalog-calculator__grand-label small {
  color: var(--text-muted);

  font-size: 9px;
}


.catalog-calculator__grand-value {
  color: #128f84;

  font-family: var(--font-mono);

  font-size:
    clamp(30px,4.5vw,48px);

  font-weight: 600;

  line-height: .95;

  letter-spacing: -.045em;

  white-space: nowrap;

  text-shadow:
    0 7px 24px rgba(20,184,166,.11);
}


.catalog-calculator__note {
  margin:
    13px 0 0;

  padding-top: 12px;

  border-top:
    1px solid rgba(20,184,166,.10);

  color: var(--text-muted);

  font-size: 10px;

  line-height: 1.45;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .catalog-calculator {
    margin-top: 18px;

    padding: 15px;

    border-radius:
      25px 19px 27px 18px;
  }


  .catalog-calculator__head {
    gap: 12px;

    margin-bottom: 17px;
  }


  .catalog-calculator__title {
    font-size: 25px;
  }


  .catalog-calculator__status {
    min-height: 27px;

    padding: 0 9px;

    font-size: 8px;
  }


  .catalog-calculator__group {
    padding: 5px;

    border-radius:
      18px 14px 19px 13px;
  }


  .catalog-calculator__row {
    align-items: flex-start;

    gap: 11px;

    padding: 11px;

    border-radius:
      14px 11px 15px 10px;
  }


  .catalog-calculator__name {
    font-size: 12px;
  }


  .catalog-calculator__price {
    font-size: 13px;
  }


  .catalog-calculator__summary {
    padding: 14px;

    border-radius:
      20px 15px 22px 14px;
  }


  .catalog-calculator__grand {
    align-items: flex-start;

    flex-direction: column;

    gap: 10px;
  }


  .catalog-calculator__grand-value {
    font-size: 36px;
  }

}


/* ============================================================
   PRODUCT FLOW AUTO-SCROLL
   Воздух над секцией после автоматического перехода
   ============================================================ */

.filter-choice,
.catalog-calculator {
  scroll-margin-top: 28px;
}

@media (max-width: 620px) {
  .filter-choice,
  .catalog-calculator {
    scroll-margin-top: 18px;
  }
}


/* ============================================================
   COMMERCIAL OIL — SACRED CARD V3
   Recommendation metrics / image / CTA
   ============================================================ */


/* ------------------------------------------------------------
   PHOTO
   ------------------------------------------------------------ */

.catalog-product--commercial
.oil-card__media {

  min-height: 220px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.46),
    0 8px 22px rgba(42,70,71,.045);
}


.catalog-product--commercial
.oil-card__image {

  box-sizing: border-box;
}


/* ============================================================
   METRIC GRID
   ============================================================ */

.oil-card__metrics {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 9px;

  margin-top: 19px;
}


.oil-card__metric {
  position: relative;

  min-width: 0;

  min-height: 106px;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  padding:
    14px 13px 12px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.82);

  border-radius:
    20px 14px 21px 13px;

  background:
    linear-gradient(
      137deg,
      rgba(255,255,255,.59),
      rgba(238,246,245,.31)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 0 rgba(255,255,255,.38),
    0 6px 16px rgba(44,72,73,.035);

  backdrop-filter:
    blur(15px)
    saturate(118%);

  -webkit-backdrop-filter:
    blur(15px)
    saturate(118%);
}


.oil-card__metric::before {
  content: "";

  position: absolute;

  pointer-events: none;

  width: 75px;
  height: 75px;

  right: -30px;
  top: -38px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.64);

  filter: blur(15px);
}


/* ------------------------------------------------------------
   MONO SVG
   ------------------------------------------------------------ */

.oil-card__metric-icon {
  width: 24px;
  height: 24px;

  margin-bottom: auto;

  color:
    rgba(19,31,32,.88);
}


.oil-card__metric-label {
  display: block;

  margin-top: 12px;

  color:
    rgba(58,76,78,.53);

  font-size: 9px;
  font-weight: 600;

  line-height: 1.2;
}


.oil-card__metric-value {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #162728;

  font-family: var(--font-mono);

  font-size: 13px;
  font-weight: 650;

  line-height: 1.2;

  text-overflow: ellipsis;
}


/* ============================================================
   FOOTER — TOTAL + CTA
   ============================================================ */

.oil-card__footer {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(145px,190px);

  align-items: stretch;

  gap: 10px;

  margin-top: 11px;
}


.oil-card__grand {
  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    12px 15px;

  border:
    1px solid rgba(20,184,166,.16);

  border-radius:
    18px 13px 20px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(221,248,244,.54),
      rgba(255,255,255,.37)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88);
}


.oil-card__grand-label {
  color:
    rgba(51,86,83,.60);

  font-size: 10px;
  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: .05em;
}


.oil-card__grand-value {
  flex-shrink: 0;

  color: #128f84;

  font-family: var(--font-mono);

  font-size: 20px;
  font-weight: 650;

  white-space: nowrap;
}


/* ============================================================
   PRIMARY CTA
   ============================================================ */

.catalog-product--commercial
.oil-card__select {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 55px;

  margin: 0;

  overflow: hidden;

  border:
    1px solid rgba(15,156,144,.62);

  border-radius:
    18px 13px 20px 12px;

  background:
    linear-gradient(
      145deg,
      rgba(24,194,177,.93),
      rgba(13,154,143,.92)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 20px rgba(14,145,134,.15);

  color: #fff;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: .015em;

  text-align: center;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}


.catalog-product--commercial
.oil-card__select::before {
  content: "";

  position: absolute;

  pointer-events: none;

  left: 12%;
  right: 12%;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.90),
      transparent
    );
}


.catalog-product--commercial
.oil-card__select:hover {
  color: #fff;

  transform:
    translateY(-1px);

  filter:
    saturate(108%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 11px 25px rgba(14,145,134,.22);
}


/* выбранная recommendation */

.catalog-product--commercial.catalog-product--selected
.oil-card__select {
  background:
    linear-gradient(
      145deg,
      rgba(13,145,134,.97),
      rgba(8,125,117,.96)
    );

  color: #fff;
}


/* ============================================================
   ALTERNATIVE чуть спокойнее
   ============================================================ */

.catalog-product--alternative
.oil-card__metric {
  background:
    linear-gradient(
      137deg,
      rgba(255,255,255,.51),
      rgba(245,246,241,.29)
    );
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {

  .oil-card__metrics {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .catalog-product--commercial
  .oil-card__media {
    min-height: 180px;
  }


  .catalog-product--commercial
  .oil-card__image {
    height: 165px;
  }


  .oil-card__metrics {
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap: 7px;
  }


  .oil-card__metric {
    min-height: 95px;

    padding: 12px;

    border-radius:
      17px 12px 18px 11px;
  }


  .oil-card__metric-icon {
    width: 22px;
    height: 22px;
  }


  .oil-card__footer {
    grid-template-columns: 1fr;
  }


  .oil-card__grand {
    min-height: 52px;
  }


  .catalog-product--commercial
  .oil-card__select {
    min-height: 48px;
  }

}


/* ============================================================
   COMMERCIAL OIL IMAGE — TWISTED CLIP
   ============================================================ */


/*
 * Само изображение немного увеличиваем внутри clip,
 * чтобы оно не выглядело слишком маленьким после обрезки.
 */
.catalog-product--commercial .oil-card__image {
  transform-origin: center;
}


/* MOBILE — делаем cut чуть мягче */


/* ============================================================
   COMMERCIAL OIL IMAGE — TRUE CROPPED VIEWPORT
   ============================================================ */


/* MOBILE */


/* ============================================================
   COMMERCIAL OIL IMAGE — CLIPPED FRAME FIX
   Рамка повторяет скрученные углы
   ============================================================ */

.catalog-product--commercial .oil-card__media {
  position: relative;

  padding: 0;
  overflow: hidden;

  background: #fff;

  border: 0;
  border-radius: 0;

  clip-path: polygon(
    0 10px,
    10px 0,
    calc(100% - 18px) 0,
    100% 16px,
    100% calc(100% - 9px),
    calc(100% - 11px) 100%,
    17px 100%,
    0 calc(100% - 18px)
  );

  -webkit-clip-path: polygon(
    0 10px,
    10px 0,
    calc(100% - 18px) 0,
    100% 16px,
    100% calc(100% - 9px),
    calc(100% - 11px) 100%,
    17px 100%,
    0 calc(100% - 18px)
  );
}


/*
 * Рамку рисуем внутренним inset-shadow.
 * Он тоже обрезается тем же clip-path,
 * поэтому углы будут аккуратными.
 */
.catalog-product--commercial .oil-card__media::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(20,184,166,.42);

  clip-path: inherit;
  -webkit-clip-path: inherit;
}


.catalog-product--commercial .oil-card__image {
  display: block;

  width: 100%;
  height: 100%;

  padding: 0;

  object-fit: cover;
  object-position: center;

  transform: none;
}


/* MOBILE */
@media (max-width: 620px) {

  .catalog-product--commercial .oil-card__media {
    clip-path: polygon(
      0 8px,
      8px 0,
      calc(100% - 14px) 0,
      100% 12px,
      100% calc(100% - 7px),
      calc(100% - 9px) 100%,
      13px 100%,
      0 calc(100% - 14px)
    );

    -webkit-clip-path: polygon(
      0 8px,
      8px 0,
      calc(100% - 14px) 0,
      100% 12px,
      100% calc(100% - 7px),
      calc(100% - 9px) 100%,
      13px 100%,
      0 calc(100% - 14px)
    );
  }
}


/* ==========================================================
   OIL BRAND LOGOS
   ========================================================== */


/* ==========================================================
   OIL BRAND LOGOS — NORMALIZED BY WIDTH
   ========================================================== */

.oil-brand-mark__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: none;
  object-fit: contain;
  flex: 0 0 auto;
}


/* ==========================================================
   OIL BRAND LOGOS — FINAL NORMALIZATION
   единая зона 160 × 50 px
   ========================================================== */


/* ==========================================================
   RECOMMENDED OIL BRAND LOGOS — NORMALIZED
   ========================================================== */

.catalog-product--commercial .oil-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin: 0 0 8px;
}

.catalog-product--commercial .oil-brand-mark__logo {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 160px !important;
  max-height: 50px !important;

  object-fit: contain !important;
  object-position: left center !important;

  flex: 0 0 auto !important;
}


/* ==========================================================
   REGULAR OIL CARDS — BRAND LOGO + NAME VERTICAL
   ========================================================== */

.oil-choice-row .oil-brand-mark {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-height: 0 !important;
  margin: 0 0 4px !important;
}

.oil-choice-row .oil-brand-mark__logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 160px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  flex: none !important;
}

.oil-choice-row .oil-brand-mark__name {
  display: block;
  margin: 0;
}


/* ==========================================================
   CAR SUMMARY — GLASS UI
   ========================================================== */

.catalog-car {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr);
  gap: 28px;
  align-items: center;
}


/* PHOTO + VEHICLE IDENTITY */

.catalog-car__media {
  margin-bottom: 18px;
}


/* SPEC GRID */

.catalog-car__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.catalog-spec--glass {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-width: 0;
  min-height: 118px;
  padding: 16px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.82);

  border-radius:
    18px 18px 18px 5px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.68),
      rgba(255,255,255,.32)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 28px rgba(42,75,74,.06);

  backdrop-filter:
    blur(18px) saturate(135%);

  -webkit-backdrop-filter:
    blur(18px) saturate(135%);
}

.catalog-spec--glass::after {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(20,184,166,.05),
      transparent 55%
    );
}


/* ICON */

.catalog-spec__icon {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  margin-bottom: 14px;

  color: var(--text-main);
}

.catalog-spec__icon svg {
  display: block;
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* TEXT */

.catalog-spec__text {
  position: relative;
  z-index: 1;

  min-width: 0;
}

.catalog-spec--glass .catalog-spec__label {
  display: block;

  margin-bottom: 5px;

  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;

  color: var(--text-muted);
}

.catalog-spec--glass .catalog-spec__value {
  display: block;

  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;

  color: var(--text-main);
}


/* RESPONSIVE */

@media (max-width: 820px) {

  .catalog-car {
    grid-template-columns: 1fr;
  }

  .catalog-car__media {
    margin-bottom: 0;
  }

}

@media (max-width: 520px) {

  .catalog-car__specs {
    grid-template-columns: 1fr 1fr;
  }

  .catalog-spec--glass {
    min-height: 105px;
    padding: 13px;
  }

}


/* ==========================================================
   VEHICLE SUMMARY — FROZEN GLASS
   ========================================================== */

.catalog-car--summary {
  display: grid;
  grid-template-columns:
    minmax(300px, .9fr)
    minmax(0, 1.6fr);

  gap: 30px;
  align-items: center;
}


/* PHOTO + VEHICLE NAME */

.catalog-car__identity {
  min-width: 0;
}

.catalog-car--summary .catalog-car__media {
  margin: 0 0 18px;
}

.catalog-car__heading {
  padding: 0 8px;
}

.catalog-car__model {
  margin-bottom: 6px;

  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;

  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--accent);
}

.catalog-car__modification {
  font-family: var(--font-body);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.08;

  letter-spacing: -.035em;

  color: var(--text-main);
}


/* SPEC GRID */

.catalog-car--summary .catalog-car__specs {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}


/* FROZEN TILE */

.catalog-car--summary .catalog-spec--glass {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-width: 0;
  min-height: 116px;

  padding: 16px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.86);

  border-radius:
    19px 19px 19px 6px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.34)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 32px rgba(31,71,69,.055);

  backdrop-filter:
    blur(20px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(140%);
}

.catalog-car--summary
.catalog-spec--glass::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(20,184,166,.10),
      transparent 42%
    );
}


/* SVG */

.catalog-car--summary
.catalog-spec__icon {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin-bottom: 15px;

  color: #243536;
}

.catalog-car--summary
.catalog-spec__icon svg {
  display: block;

  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* TEXT */

.catalog-car--summary
.catalog-spec__text {
  position: relative;
  z-index: 1;

  min-width: 0;
}

.catalog-car--summary
.catalog-spec__label {
  display: block;

  margin-bottom: 5px;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;

  color: var(--text-muted);
}

.catalog-car--summary
.catalog-spec__value {
  display: block;

  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;

  color: var(--text-main);
}


/* TABLET */

@media (max-width: 820px) {

  .catalog-car--summary {
    grid-template-columns: 1fr;
  }

  .catalog-car__identity {
    display: grid;

    grid-template-columns:
      minmax(120px, 180px)
      1fr;

    gap: 20px;
    align-items: center;
  }

  .catalog-car--summary
  .catalog-car__media {
    margin: 0;
  }

}


/* MOBILE */

@media (max-width: 520px) {

  .catalog-car__identity {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .catalog-car__heading {
    padding: 0;
  }

  /*
   * Перебиваем старое правило @media 440px,
   * которое делало specs одной колонкой.
   */
  .catalog-car--summary
  .catalog-car__specs {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .catalog-car--summary
  .catalog-spec--glass {
    min-height: 104px;
    padding: 13px;
  }

  .catalog-car--summary
  .catalog-spec__value {
    font-size: 14px;
  }

}


/* ============================================================
   OTHER OILS — BRAND LOGO FILTER
   Панель находится над внутренним scroll viewport.
   Вертикальный scroll .oil-choice__list не изменяется.
   ============================================================ */

.oil-brand-filter {
  position: relative;
  margin: -2px 0 13px;
}

.oil-brand-filter__track {
  display: flex;
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 3px 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,184,166,.24) transparent;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.oil-brand-filter__track::-webkit-scrollbar {
  height: 4px;
}

.oil-brand-filter__track::-webkit-scrollbar-track {
  background: transparent;
}

.oil-brand-filter__track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(20,184,166,.22);
}

.oil-brand-filter__item {
  min-width: 104px;
  min-height: 66px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 29px auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 16px 13px 17px 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.66),
      rgba(235,245,244,.31)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 6px 16px rgba(42,72,73,.04);
  color: var(--text-main);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.oil-brand-filter__item:hover {
  transform: translateY(-1px);
  border-color: rgba(20,184,166,.27);
  background: rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 19px rgba(20,130,120,.07);
}

.oil-brand-filter__item--active {
  border-color: rgba(20,184,166,.46);
  background:
    linear-gradient(
      135deg,
      rgba(231,251,248,.88),
      rgba(255,255,255,.59)
    );
  box-shadow:
    inset 3px 0 0 rgba(20,184,166,.72),
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 19px rgba(20,130,120,.08);
}

.oil-brand-filter__logo {
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  width: auto;
  height: 25px;
  max-width: 82px;
  object-fit: contain;
}

.oil-brand-filter__name {
  min-width: 0;
  overflow: hidden;
  color: #334b4d;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oil-brand-filter__count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(20,184,166,.08);
  color: #168f84;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
}

.oil-brand-filter__item--active
.oil-brand-filter__count {
  background: rgba(20,184,166,.15);
}

.oil-choice-row[hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  .oil-brand-filter {
    margin-bottom: 10px;
  }

  .oil-brand-filter__track {
    gap: 7px;
    margin-right: -8px;
    padding-right: 11px;
  }

  .oil-brand-filter__item {
    min-width: 92px;
    min-height: 59px;
    grid-template-rows: 24px auto;
    padding: 7px 8px;
    border-radius: 14px 11px 15px 10px;
  }

  .oil-brand-filter__logo {
    height: 21px;
    max-width: 70px;
  }

  .oil-brand-filter__name {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oil-brand-filter__item {
    transition: none;
  }
}


/* ============================================================
   VEHICLE CARD — SERVICE SPECS + SEO-READY SUMMARY
   ============================================================ */

.catalog-car__specs {
  align-items: stretch;
}

.catalog-spec {
  min-height: 82px;
}

.catalog-spec__value {
  overflow-wrap: anywhere;
}

.catalog-car__seo-summary {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 17px 19px;
  border: 1px solid rgba(20,184,166,.13);
  border-radius: 16px 12px 17px 11px;
  background:
    linear-gradient(
      135deg,
      rgba(234,250,247,.68),
      rgba(255,255,255,.36)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88);
}

.catalog-car__seo-summary::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 190px;
  height: 90px;
  top: -63px;
  left: 8%;
  border-radius: 50%;
  background: rgba(255,255,255,.64);
  filter: blur(27px);
}

.catalog-car__seo-title,
.catalog-car__seo-text {
  position: relative;
  z-index: 1;
}

.catalog-car__seo-title {
  margin: 0 0 7px;
  color: #168f84;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.catalog-car__seo-text {
  max-width: 900px;
  margin: 0;
  color: #536e70;
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .catalog-spec {
    min-height: 72px;
  }

  .catalog-car__seo-summary {
    margin-top: 10px;
    padding: 13px 14px;
  }

  .catalog-car__seo-title {
    font-size: 13px;
  }

  .catalog-car__seo-text {
    font-size: 11px;
    line-height: 1.5;
  }
}


/* ============================================================
   WHY THESE OILS FIT
   ============================================================ */

.oil-fit-explanation {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 16px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(20,184,166,.16);
  border-radius: 24px 18px 25px 17px;
  background:
    linear-gradient(
      135deg,
      rgba(236,252,249,.75),
      rgba(255,255,255,.44) 55%,
      rgba(224,245,241,.36)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 28px rgba(35,91,86,.05);
}

.oil-fit-explanation::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 250px;
  height: 130px;
  top: -95px;
  left: 16%;
  border-radius: 50%;
  background: rgba(255,255,255,.67);
  filter: blur(35px);
}

.oil-fit-explanation__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20,184,166,.22);
  border-radius: 17px 13px 18px 12px;
  background:
    linear-gradient(
      145deg,
      rgba(20,184,166,.16),
      rgba(255,255,255,.58)
    );
  color: #108f84;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92);
}

.oil-fit-explanation__content {
  min-width: 0;
}

.oil-fit-explanation__title {
  margin: 1px 0 7px;
  color: #24494a;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.016em;
}

.oil-fit-explanation__text {
  margin: 0;
  color: #587173;
  font-size: 12.5px;
  line-height: 1.58;
}

@media (max-width: 620px) {
  .oil-fit-explanation {
    grid-template-columns: 39px minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 20px 15px 21px 14px;
  }

  .oil-fit-explanation__icon {
    width: 39px;
    height: 39px;
    border-radius: 14px 11px 15px 10px;
    font-size: 18px;
  }

  .oil-fit-explanation__title {
    margin-top: 0;
    font-size: 14px;
  }

  .oil-fit-explanation__text {
    font-size: 11px;
    line-height: 1.52;
  }
}


/* ============================================================
   OIL CARDS V3 — SERVICE PRODUCT EXPERIENCE
   Полный визуальный слой поверх прежнего sketch UI.
   ============================================================ */

/* ---------- COMMERCIAL GRID ---------- */

.commercial-oils__grid {
  gap: 16px;
}

.catalog-product--commercial {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 30px 22px 32px 21px;
  background:
    linear-gradient(
      137deg,
      rgba(255,255,255,.76) 0%,
      rgba(247,251,250,.52) 47%,
      rgba(221,243,239,.44) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.48),
    0 17px 45px rgba(35,70,70,.075);
}

.catalog-product--commercial::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 330px;
  height: 150px;
  top: -118px;
  left: 8%;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  filter: blur(42px);
}

.catalog-product--primary {
  border-color: rgba(20,184,166,.27);
  box-shadow:
    inset 4px 0 0 rgba(20,184,166,.74),
    inset 0 1px 0 rgba(255,255,255,1),
    0 20px 48px rgba(20,120,112,.09);
}

.catalog-product--alternative {
  border-color: rgba(93,117,119,.15);
}

.oil-card__badge {
  top: 15px;
  left: 15px;
  right: auto;
  min-height: 29px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 7px 18px rgba(38,90,86,.10);
  font-size: 10px;
  letter-spacing: .025em;
}

.oil-card__badge--primary {
  background:
    linear-gradient(
      145deg,
      rgba(20,184,166,.95),
      rgba(14,151,140,.93)
    );
}

.oil-card__badge--alternative {
  background:
    linear-gradient(
      145deg,
      rgba(82,106,108,.88),
      rgba(62,85,88,.86)
    );
}

.oil-card__media {
  min-height: 240px;
  padding: 52px 24px 12px;
  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(20,184,166,.075),
      transparent 58%
    );
}

.oil-card__media img {
  max-height: 190px;
  filter:
    drop-shadow(0 17px 17px rgba(31,56,58,.13));
}

.oil-card__content {
  padding: 14px 21px 21px;
}

.oil-card__eyebrow {
  margin-bottom: 7px;
  color: #168f84;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.oil-card__name {
  min-height: 0;
  margin-bottom: 13px;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.oil-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 13px;
}

.oil-card__fact {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(84,111,112,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}

.oil-card__fact--primary {
  border-color: rgba(20,184,166,.18);
  background: rgba(20,184,166,.07);
}

.oil-card__fact--approval {
  border-color: rgba(20,184,166,.13);
  background: rgba(236,250,248,.72);
}

.oil-card__fact-label {
  color: #718688;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.oil-card__fact-value {
  color: #344f51;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
}

.oil-card__reason {
  display: grid;
  grid-template-columns: 23px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  padding: 9px 11px;
  border: 1px solid rgba(20,184,166,.11);
  border-radius: 13px 10px 14px 10px;
  background: rgba(20,184,166,.045);
}

.oil-card__reason-icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 6px 9px 6px;
  background: rgba(20,184,166,.12);
  color: #118f84;
  font-size: 12px;
  font-weight: 800;
}

.oil-card__reason-text {
  color: #587274;
  font-size: 10.5px;
  line-height: 1.4;
}

.oil-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 0;
}

.oil-card__metric {
  min-height: 67px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 15px 11px 16px 10px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.62),
      rgba(234,245,243,.30)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88);
}

.oil-card__metric-label {
  font-size: 9px;
}

.oil-card__metric-value {
  font-size: 12px;
}

.oil-card__footer {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(69,107,107,.09);
}

.oil-card__grand-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.oil-card__grand-value {
  font-size: 23px;
  letter-spacing: -.03em;
}

.oil-card__select {
  min-height: 48px;
  padding-inline: 19px;
  border-radius: 15px 11px 16px 10px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- OTHER OILS ---------- */

.oil-choice-row {
  grid-template-columns:
    92px
    minmax(0,1fr)
    128px
    138px;
  min-height: 124px;
  padding: 13px 14px;
  border-radius: 22px 17px 23px 16px;
}

.oil-choice-row__media {
  width: 88px;
  height: 88px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.74);
  background: rgba(255,255,255,.31);
}

.oil-choice-row__image {
  max-width: 78px;
  max-height: 78px;
  filter:
    drop-shadow(0 8px 8px rgba(36,63,64,.10));
}

.oil-choice-row__name {
  max-width: 620px;
  font-size: 14.5px;
  line-height: 1.3;
}

.oil-choice-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.oil-choice-row__fact {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 4px;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(76,110,110,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.43);
}

.oil-choice-row__fact--primary {
  border-color: rgba(20,184,166,.16);
  background: rgba(20,184,166,.055);
}

.oil-choice-row__fact--approval {
  border-color: rgba(20,184,166,.12);
}

.oil-choice-row__fact-label {
  color: #829294;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.oil-choice-row__fact-value {
  color: #486263;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 650;
}

.oil-choice-row__select {
  min-width: 128px;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 11.5px;
}

/* ---------- MOBILE ---------- */

@media (max-width: 820px) {
  .oil-choice-row {
    grid-template-columns:
      82px
      minmax(0,1fr)
      120px;
    grid-template-areas:
      "media info price"
      "media info action";
  }
}

@media (max-width: 620px) {
  .commercial-oils__grid {
    gap: 12px;
  }

  .catalog-product--commercial {
    border-radius: 24px 18px 26px 17px;
  }

  .oil-card__media {
    min-height: 205px;
    padding-top: 46px;
  }

  .oil-card__media img {
    max-height: 160px;
  }

  .oil-card__content {
    padding: 12px 15px 16px;
  }

  .oil-card__name {
    font-size: 17px;
  }

  .oil-card__metrics {
    gap: 6px;
  }

  .oil-card__metric {
    min-height: 61px;
    padding: 8px;
  }

  .oil-card__footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .oil-card__select {
    width: 100%;
  }

  .oil-choice-row {
    grid-template-columns:
      72px
      minmax(0,1fr);
    grid-template-areas:
      "media info"
      "price price"
      "action action";
    gap: 8px 11px;
    min-height: 0;
    padding: 11px;
  }

  .oil-choice-row__media {
    width: 70px;
    height: 70px;
  }

  .oil-choice-row__image {
    max-width: 62px;
    max-height: 62px;
  }

  .oil-choice-row__price {
    grid-area: price;
    align-items: flex-start;
    padding-top: 4px;
    text-align: left;
  }

  .oil-choice-row__action {
    grid-area: action;
  }

  .oil-choice-row__select {
    width: 100%;
    min-height: 43px;
  }
}


/* ============================================================
   KNOWLEDGE ENGINE V1 — OIL REASON DETAILS
   ============================================================ */

.oil-card__reason-list {
  display: grid;
  gap: 5px;
  margin: -5px 0 15px;
  padding: 0;
  list-style: none;
}

.oil-card__reason-item {
  position: relative;
  padding-left: 16px;
  color: #617879;
  font-size: 9.5px;
  line-height: 1.42;
}

.oil-card__reason-item::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: 0;
  color: #17a596;
  font-weight: 800;
}

@media (max-width: 620px) {
  .oil-card__reason-item {
    font-size: 9px;
  }
}


/* ============================================================
   SERVICE DASHBOARD V1
   Главный hero обслуживания автомобиля.
   ============================================================ */

.service-dashboard {
  position: relative;
  isolation: isolate;

  display: block;

  margin-bottom: 18px;
  padding: 18px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.92);
  border-radius: 34px 25px 36px 23px;

  background:
    linear-gradient(
      137deg,
      rgba(255,255,255,.82),
      rgba(239,249,247,.56) 52%,
      rgba(220,243,239,.45)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 22px 58px rgba(30,71,70,.09);
}

.service-dashboard::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 470px;
  height: 220px;
  top: -165px;
  left: 7%;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  filter: blur(55px);
}

.service-dashboard__hero {
  padding: 10px 23px 20px;
}

.service-dashboard__hero
.service-dashboard__title {
  max-width: 1220px;
}

.service-dashboard__hero
.service-dashboard__trust {
  margin-top: 17px;
}

.service-dashboard__body {
  display: grid;
  grid-template-columns:
    minmax(330px, .76fr)
    minmax(540px, 1.44fr);

  align-items: stretch;
  gap: 16px;

  min-width: 0;
}

.service-dashboard__identity,
.service-dashboard__summary {
  position: relative;

  min-width: 0;
  padding: 18px;

  border: 1px solid rgba(255,255,255,.78);
  border-radius: 25px 18px 27px 17px;

  background: rgba(255,255,255,.34);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.91);
}

.service-dashboard__identity {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
  align-self: start;

  padding: 18px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.84);
  border-radius: 27px 19px 29px 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.61),
      rgba(231,247,244,.36)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 16px 38px rgba(38,68,70,.055);
}

.service-dashboard__eyebrow {
  margin-bottom: 11px;
  color: #168f84;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.service-dashboard__title {
  max-width: 760px;
  margin: 0;
  color: #213f40;
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 47px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.042em;
}

.service-dashboard__modification {
  margin: 12px 0 0;
  color: #5e7678;
  font-size: 14px;
  line-height: 1.45;
}

.service-dashboard__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 21px;
}

.service-dashboard__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b7374;
  font-size: 10.5px;
  line-height: 1.3;
}

.service-dashboard__trust-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px 5px 8px 5px;
  background: rgba(20,184,166,.11);
  color: #118f84;
  font-size: 10px;
  font-weight: 800;
}

.service-dashboard__media {
  position: relative;

  flex: 0 0 auto;
  min-height: 230px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 3px 0 9px;
  padding: 3px 4px 0;

  overflow: hidden;

  border-radius: 23px 16px 24px 15px;

  background:
    radial-gradient(
      ellipse at 50% 58%,
      rgba(255,255,255,.92),
      rgba(223,244,240,.35) 55%,
      rgba(223,244,240,0) 72%
    );
}

.service-dashboard__image {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  max-width: 590px;
  max-height: 270px;

  object-fit: contain;
  object-position: center;

  filter:
    drop-shadow(
      0 23px 18px
      rgba(27,56,58,.17)
    );
}

.service-dashboard__summary {
  padding: 24px;
  border-radius: 25px 18px 27px 17px;
}

.service-dashboard__summary-title {
  margin: 0 0 15px;
  color: #2b4a4b;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.service-dashboard__facts {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap: 9px;
}

.service-dashboard__fact {
  min-height: 93px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.83);
  border-radius: 17px 12px 18px 11px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.67),
      rgba(231,245,242,.32)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92);
}

.service-dashboard__fact .catalog-spec__icon {
  width: 27px;
  height: 27px;
  padding: 6px;
  border-radius: 10px 7px 11px 7px;
  background: rgba(20,184,166,.08);
  color: #16998e;
}

.service-dashboard__fact-content {
  min-width: 0;
}

.service-dashboard__fact-label {
  display: block;
  margin-bottom: 5px;
  color: #718789;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.service-dashboard__fact-value {
  display: block;
  color: #2f4d4e;
  font-size: 13px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.service-dashboard__fact-note {
  display: block;
  margin-top: 5px;
  color: #859597;
  font-size: 8.5px;
  line-height: 1.35;
}

.service-dashboard__oil {
  margin-top: 10px;
  padding: 14px 15px;
  border: 1px solid rgba(20,184,166,.16);
  border-radius: 17px 12px 18px 11px;
  background:
    linear-gradient(
      135deg,
      rgba(225,249,245,.77),
      rgba(255,255,255,.47)
    );
}

.service-dashboard__oil-label {
  display: block;
  margin-bottom: 5px;
  color: #168f84;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.service-dashboard__oil-name {
  display: block;
  color: #294849;
  font-size: 14px;
  line-height: 1.3;
}

.service-dashboard__oil-note {
  display: block;
  margin-top: 5px;
  color: #607879;
  font-size: 9px;
  line-height: 1.4;
}

.service-dashboard__price {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid rgba(55,92,92,.10);
  border-radius: 17px 12px 18px 11px;
  background: rgba(255,255,255,.48);
}

.service-dashboard__price-label,
.service-dashboard__price-breakdown {
  color: #76898b;
  font-size: 8.5px;
  line-height: 1.35;
}

.service-dashboard__price-value {
  display: block;
  margin-top: 3px;
  color: #213f40;
  font-family: var(--font-mono);
  font-size: 25px;
  letter-spacing: -.04em;
}

.service-dashboard__price-breakdown {
  max-width: 145px;
  text-align: right;
}

.service-dashboard__actions {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 8px;
  margin-top: 12px;
}

.service-dashboard__action {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 0;
  border-radius: 16px 11px 17px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.service-dashboard__action:hover {
  transform: translateY(-1px);
}

.service-dashboard__action--primary {
  background:
    linear-gradient(
      145deg,
      #1bb9aa,
      #12968b
    );
  color: #fff;
  box-shadow:
    0 11px 23px rgba(18,150,139,.20);
}

.service-dashboard__action--secondary {
  border: 1px solid rgba(20,184,166,.16);
  background: rgba(255,255,255,.63);
  color: #26706b;
}

.service-dashboard__disclaimer {
  margin: 10px 2px 0;
  color: #8b999a;
  font-size: 8.5px;
  line-height: 1.4;
  text-align: center;
}

.service-dashboard__explanation {
  margin-top: 0;
  margin-bottom: 16px;
}

@media (max-width: 920px) {
  .service-dashboard {
    grid-template-columns: 1fr;
  }

  .service-dashboard__identity {
    min-height: 390px;
  }
}

@media (max-width: 620px) {
  .service-dashboard {
    gap: 10px;
    padding: 10px;
    border-radius: 26px 19px 28px 18px;
  }

  .service-dashboard__identity {
    min-height: 330px;
    padding: 21px 18px 13px;
    border-radius: 21px 15px 23px 14px;
  }

  .service-dashboard__title {
    font-size: 29px;
  }

  .service-dashboard__modification {
    font-size: 12px;
  }

  .service-dashboard__trust {
    margin-top: 15px;
  }

  .service-dashboard__trust-item {
    font-size: 9px;
  }

  .service-dashboard__media {
    min-height: 150px;
  }

  .service-dashboard__image {
    max-height: 170px;
  }

  .service-dashboard__summary {
    padding: 15px;
    border-radius: 21px 15px 23px 14px;
  }

  .service-dashboard__facts {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .service-dashboard__fact {
    min-height: 84px;
    grid-template-columns: 25px minmax(0,1fr);
    gap: 7px;
    padding: 10px;
  }

  .service-dashboard__fact .catalog-spec__icon {
    width: 23px;
    height: 23px;
    padding: 5px;
  }

  .service-dashboard__fact-value {
    font-size: 11px;
  }

  .service-dashboard__price {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .service-dashboard__price-breakdown {
    max-width: none;
    text-align: left;
  }

  .service-dashboard__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-dashboard__action {
    transition: none;
  }
}


/* ============================================================
   SERVICE DASHBOARD V1.1 — PRIMARY + ALTERNATIVE OILS
   ============================================================ */

.service-dashboard__oils {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.service-dashboard__oil {
  min-width: 0;
  margin-top: 0;
}

.service-dashboard__oil--primary {
  border-color: rgba(20,184,166,.22);
  box-shadow:
    inset 3px 0 0 rgba(20,184,166,.65),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.service-dashboard__oil--alternative {
  border-color: rgba(91,116,118,.13);
  background:
    linear-gradient(
      135deg,
      rgba(244,248,247,.78),
      rgba(255,255,255,.45)
    );
}

.service-dashboard__oil-head {
  min-height: 27px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.service-dashboard__oil-head
.service-dashboard__oil-label {
  margin-bottom: 0;
}

.service-dashboard__oil-logo {
  display: block;
  width: auto;
  height: 23px;
  max-width: 76px;
  object-fit: contain;
  flex: 0 0 auto;
}

.service-dashboard__oil-name {
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .service-dashboard__oils {
    grid-template-columns: 1fr;
  }

  .service-dashboard__oil-logo {
    height: 21px;
    max-width: 70px;
  }
}


@media (max-width: 980px) {
  .service-dashboard__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .service-dashboard__hero {
    padding: 8px 8px 16px;
  }

  .service-dashboard__body {
    gap: 10px;
  }
}



/* ============================================================
   VEHICLE CARD — STEP 2
   Фото, характеристики и объём системы.
   ============================================================ */

.service-dashboard__identity-head {
  min-height: 35px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 3px;

  color: #0b8f83;
}

.service-dashboard__identity-head
.catalog-spec__icon {
  width: 29px;
  height: 29px;

  padding: 6px;

  border-radius: 10px 7px 11px 7px;

  background: rgba(20,184,166,.09);
  color: #0b8f83;
}

.service-dashboard__identity-status {
  width: 25px;
  height: 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 9px 6px 10px 6px;

  background: rgba(20,184,166,.12);
  color: #0b9185;

  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}


.service-dashboard__identity-kicker {
  color: #0c897e;

  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .085em;
  text-transform: uppercase;
}

.service-dashboard__media::after {
  content: "";

  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 20px;

  height: 28px;

  border-radius: 50%;

  background: rgba(38,82,80,.12);

  filter: blur(15px);
  transform: scaleX(.92);
}


/* Характеристики автомобиля */

.service-dashboard__vehicle-facts {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 8px;

  margin-top: auto;
}

.service-dashboard__vehicle-fact {
  min-width: 0;
  min-height: 76px;

  display: grid;
  grid-template-columns:
    30px
    minmax(0,1fr);

  align-items: center;
  gap: 10px;

  padding: 11px 12px;

  border: 1px solid rgba(55,92,92,.075);
  border-radius: 16px 11px 17px 10px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.71),
      rgba(239,248,246,.48)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.93);
}

.service-dashboard__vehicle-fact
.catalog-spec__icon {
  width: 28px;
  height: 28px;

  padding: 6px;

  border-radius: 10px 7px 11px 7px;

  background: rgba(20,184,166,.07);
  color: #168f84;
}

.service-dashboard__vehicle-fact-content {
  min-width: 0;
}

.service-dashboard__vehicle-fact-label {
  display: block;

  margin-bottom: 5px;

  color: #728789;

  font-size: 7px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .065em;
  text-transform: uppercase;
}

.service-dashboard__vehicle-fact-value {
  display: block;

  color: #294849;

  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;

  overflow-wrap: anywhere;
}


/* Акцентный объём масла */

.service-dashboard__volume-card {
  position: relative;

  display: grid;
  grid-template-columns:
    43px
    minmax(0,1fr);

  align-items: center;
  gap: 13px;

  margin-top: 10px;
  padding: 15px 17px;

  overflow: hidden;

  border: 1px solid rgba(20,184,166,.24);
  border-radius: 19px 13px 20px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(224,249,245,.89),
      rgba(255,255,255,.67)
    );

  box-shadow:
    inset 4px 0 0 rgba(20,184,166,.55),
    inset 0 1px 0 rgba(255,255,255,.96),
    0 12px 27px rgba(20,125,116,.07);
}

.service-dashboard__volume-card
.catalog-spec__icon {
  width: 43px;
  height: 43px;

  padding: 10px;

  border-radius: 15px 10px 16px 9px;

  background: rgba(20,184,166,.09);
  color: #0d978a;
}

.service-dashboard__volume-content {
  min-width: 0;
}

.service-dashboard__volume-label {
  display: block;

  color: #247d76;

  font-size: 8px;
  line-height: 1.25;
  font-weight: 800;

  letter-spacing: .055em;
  text-transform: uppercase;
}

.service-dashboard__volume-value {
  display: block;

  margin-top: 4px;

  color: #173f40;

  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  font-weight: 750;

  letter-spacing: -.035em;
}

.service-dashboard__volume-note {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  margin-top: 8px;
  padding: 0 8px;

  border-radius: 999px;

  background: rgba(20,184,166,.10);
  color: #28756f;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
}


@media (max-width: 620px) {
  .service-dashboard__identity {
    min-height: 0;
    padding: 12px;
  }

  .service-dashboard__media {
    min-height: 205px;
  }

  .service-dashboard__image {
    max-height: 220px;
  }

  .service-dashboard__vehicle-facts {
    gap: 6px;
  }

  .service-dashboard__vehicle-fact {
    min-height: 67px;

    grid-template-columns:
      24px
      minmax(0,1fr);

    gap: 7px;
    padding: 9px;
  }

  .service-dashboard__vehicle-fact
  .catalog-spec__icon {
    width: 23px;
    height: 23px;
    padding: 5px;
  }

  .service-dashboard__vehicle-fact-value {
    font-size: 9px;
  }

  .service-dashboard__volume-card {
    grid-template-columns:
      35px
      minmax(0,1fr);

    padding: 12px;
  }

  .service-dashboard__volume-card
  .catalog-spec__icon {
    width: 35px;
    height: 35px;
    padding: 8px;
  }

  .service-dashboard__volume-value {
    font-size: 21px;
  }
}


/* ============================================================
   COMMERCIAL OIL PICKER
   Изолированный компонент коммерческих рекомендаций.
   ============================================================ */

.commercial-oil-picker {
  container-type: inline-size;

  margin-top: 14px;
  padding: 15px;

  border: 1px solid rgba(20,184,166,.25);
  border-radius: 24px 17px 25px 16px;

  background:
    linear-gradient(
      135deg,
      rgba(218,249,244,.78),
      rgba(246,253,252,.70) 54%,
      rgba(255,255,255,.62)
    );

  box-shadow:
    inset 5px 0 0 rgba(20,184,166,.67),
    inset 0 1px 0 rgba(255,255,255,.96),
    0 14px 34px rgba(20,125,116,.07);
}

.commercial-oil-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin: 0 3px 13px;
}

.commercial-oil-picker__kicker {
  color: #0f887e;

  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;

  letter-spacing: .075em;
  text-transform: uppercase;
}

.commercial-oil-picker__subtitle {
  color: #6d8586;

  font-size: 9px;
  line-height: 1.4;

  text-align: right;
}

.commercial-oil-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;

  width: 100%;
  min-width: 0;
}


/* CARD */

.commercial-oil-card {
  width: 100%;
  position: relative;

  display: block;

  min-width: 0;
  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid rgba(34,61,64,.09);
  border-radius: 24px 17px 25px 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.86),
      rgba(247,252,251,.72)
    );

  box-shadow:
    0 14px 34px rgba(36,72,73,.055),
    inset 0 1px 0 rgba(255,255,255,.97);
}

.commercial-oil-card--primary {
  border-color: rgba(20,184,166,.24);
}

.commercial-oil-card--alternative {
  border-color: rgba(76,122,142,.14);
}


/* HEADER: LOGO + NAME */

.commercial-oil-card__head {
  width: 100%;
  min-width: 0;
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;

  margin: 0;
  padding: 14px 18px;

  border: 0;
  border-bottom: 1px solid rgba(34,61,64,.075);
  border-radius: 0;

  background: rgba(255,255,255,.30);
  box-shadow: none;
}

.commercial-oil-card__logo {
  display: block;

  width: auto;
  height: 34px;
  max-width: 94px;

  flex: 0 0 auto;

  object-fit: contain;
  object-position: left center;
}

.commercial-oil-card__name {
  display: block;

  min-width: 0;
  margin: 0;

  color: #213b3d;

  font-size: 17px;
  line-height: 1.22;
  font-weight: 750;
  letter-spacing: -.018em;

  overflow-wrap: anywhere;
}


/* BODY */

.commercial-oil-card__body {
  min-width: 0;

  display: grid;
  grid-template-columns:
    minmax(150px, 176px)
    minmax(240px, 1fr)
    minmax(150px, 170px);

  align-items: stretch;
  gap: 14px;

  padding: 15px;
}


/* CANISTER */

.commercial-oil-card__visual {
  min-width: 0;
  min-height: 174px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.90);
  border-radius: 22px 14px 23px 13px;

  background:
    radial-gradient(
      circle at 45% 34%,
      rgba(255,255,255,.98),
      rgba(225,246,242,.68)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 26px rgba(36,72,73,.055);
}

.commercial-oil-card__canister {
  display: block;

  width: min(148px, 92%);
  height: 154px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 14px 12px
      rgba(31,55,57,.16)
    );
}


/* DESCRIPTION */

.commercial-oil-card__description {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.commercial-oil-card__note {
  display: block;

  margin: 0 0 13px;

  color: #617577;

  font-size: 10.5px;
  line-height: 1.48;
}

.commercial-oil-card__badge {
  min-height: 30px;

  display: inline-flex;
  align-items: center;

  margin: 0 0 10px;
  padding: 0 10px;

  border-radius: 999px;

  font-size: 7.5px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: .04em;
  text-transform: uppercase;
}

.commercial-oil-card__badge--primary {
  color: #0a8479;
  background: rgba(20,184,166,.13);
}

.commercial-oil-card__badge--alternative {
  color: #397c9b;
  background: rgba(96,171,216,.13);
}


/* TECHNICAL FACTS */

.commercial-oil-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.commercial-oil-card__fact {
  min-height: 27px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 0 9px;

  border: 1px solid rgba(34,61,64,.065);
  border-radius: 9px;

  background: rgba(245,248,247,.90);
}

.commercial-oil-card__fact-label {
  color: #849294;

  font-size: 7px;
  font-weight: 700;

  text-transform: uppercase;
}

.commercial-oil-card__fact-value {
  color: #405557;

  font-size: 9px;
  font-weight: 650;
}


/* VOLUME + PRICES */

.commercial-oil-card__commerce {
  min-width: 0;

  display: flex;
  flex-direction: column;

  padding-left: 17px;

  border-left: 1px solid rgba(34,61,64,.075);
}

.commercial-oil-card__metric {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 3px;

  padding: 8px 2px 10px 34px;

  border-bottom: 1px solid rgba(34,61,64,.075);
}

.commercial-oil-card__metric::before {
  position: absolute;
  left: 4px;
  top: 13px;

  width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(20,184,166,.26);
  border-radius: 50%;

  color: #0c978a;

  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

.commercial-oil-card__metric--volume::before {
  content: "●";
}

.commercial-oil-card__metric--liter::before {
  content: "₽";
}

.commercial-oil-card__metric--total::before {
  content: "Σ";
}

.commercial-oil-card__metric-label {
  color: #78898b;

  font-size: 8px;
  line-height: 1.25;
}

.commercial-oil-card__metric-value {
  color: #213638;

  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
}

.commercial-oil-card__metric--total
.commercial-oil-card__metric-value {
  font-size: 15px;
  font-weight: 750;
}


/* SELECT */

.commercial-oil-card__select {
  width: 100%;
  min-height: 44px;

  margin: auto 0 0;
  padding: 0 14px;

  border: 1px solid rgba(10,151,138,.35);
  border-radius: 14px 10px 15px 9px;

  background:
    linear-gradient(
      135deg,
      #0ca594,
      #0b9488
    );

  box-shadow:
    0 12px 24px rgba(11,148,136,.17),
    inset 0 1px 0 rgba(255,255,255,.25);

  color: #fff;

  font-size: 11px;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.commercial-oil-card__select:hover {
  transform: translateY(-1px);

  background:
    linear-gradient(
      135deg,
      #0db3a1,
      #0a8e82
    );

  box-shadow:
    0 15px 30px rgba(11,148,136,.23),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.commercial-oil-card__select[aria-pressed="true"] {
  background:
    linear-gradient(
      135deg,
      #087e75,
      #076f68
    );
}


/* NARROW COMPONENT */

@container (max-width: 690px) {
  .commercial-oil-card__body {
    grid-template-columns:
      minmax(125px, 160px)
      minmax(180px, 1fr);
  }

  .commercial-oil-card__commerce {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns:
      repeat(3, minmax(0,1fr));

    gap: 7px;

    padding: 11px 0 0;

    border-left: 0;
    border-top: 1px solid rgba(34,61,64,.075);
  }

  .commercial-oil-card__metric {
    padding: 6px;

    border: 0;

    text-align: center;
  }

  .commercial-oil-card__metric::before {
    display: none;
  }

  .commercial-oil-card__select {
    grid-column: 1 / -1;

    margin-top: 2px;
  }
}


/* MOBILE */

@container (max-width: 440px) {
  .commercial-oil-picker {
    padding: 10px;
  }

  .commercial-oil-picker__head {
    display: block;
  }

  .commercial-oil-picker__subtitle {
    display: block;

    margin-top: 4px;

    text-align: left;
  }

  .commercial-oil-card__head {
    min-height: 54px;

    gap: 11px;

    padding: 11px 12px;
  }

  .commercial-oil-card__logo {
    height: 26px;
    max-width: 68px;
  }

  .commercial-oil-card__name {
    font-size: 13px;
  }

  .commercial-oil-card__body {
    grid-template-columns:
      104px
      minmax(0,1fr);

    gap: 11px;

    padding: 11px;
  }

  .commercial-oil-card__visual {
    min-height: 142px;
  }

  .commercial-oil-card__canister {
    height: 124px;
  }

  .commercial-oil-card__note {
    font-size: 9px;
    line-height: 1.4;
  }

  .commercial-oil-card__badge {
    min-height: 25px;

    padding-inline: 8px;

    font-size: 6.5px;
  }

  .commercial-oil-card__fact-label {
    display: none;
  }

  .commercial-oil-card__fact-value {
    font-size: 7px;
  }
}

.catalog-section--commercial-compact {
  padding: 17px !important;
  border-radius: 26px 19px 28px 18px !important;
}

.catalog-section--commercial-compact .commercial-oils__head { margin-bottom: 11px; }
.catalog-section--commercial-compact .commercial-oils__kicker { font-size: 9px; }
.catalog-section--commercial-compact .commercial-oils__title { font-size: 20px; }
.catalog-section--commercial-compact .commercial-oils__subtitle { margin-top: 4px; font-size: 10.5px; }
.catalog-section--commercial-compact .commercial-oils__grid { gap: 10px; }

.catalog-section--commercial-compact .catalog-product--commercial {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  min-height: 0;
  border-radius: 22px 16px 23px 15px;
}

.catalog-section--commercial-compact .oil-card__badge { top: 10px; left: 10px; min-height: 24px; padding: 0 8px; font-size: 8px; }
.catalog-section--commercial-compact .oil-card__media { min-height: 0; height: auto; padding: 39px 10px 12px; border-right: 1px solid rgba(65,98,99,.07); }
.catalog-section--commercial-compact .oil-card__media img { max-width: 104px; max-height: 126px; }
.catalog-section--commercial-compact .oil-card__content { min-width: 0; padding: 13px 14px 14px; }
.catalog-section--commercial-compact .oil-card__eyebrow { margin-bottom: 4px; font-size: 8px; }
.catalog-section--commercial-compact .oil-card__name { margin-bottom: 8px; font-size: 14px; line-height: 1.24; }
.catalog-section--commercial-compact .oil-card__facts { gap: 4px; margin-bottom: 8px; }
.catalog-section--commercial-compact .oil-card__fact { min-height: 21px; padding: 0 7px; }
.catalog-section--commercial-compact .oil-card__fact-label { font-size: 6.5px; }
.catalog-section--commercial-compact .oil-card__fact-value { font-size: 7.5px; }
.catalog-section--commercial-compact .oil-card__reason { grid-template-columns: 19px minmax(0,1fr); gap: 6px; margin-bottom: 8px; padding: 6px 8px; }
.catalog-section--commercial-compact .oil-card__reason-icon { width: 19px; height: 19px; font-size: 9px; }
.catalog-section--commercial-compact .oil-card__reason-text { font-size: 8px; }
.catalog-section--commercial-compact .oil-card__reason-list { gap: 3px; margin: -2px 0 8px; }
.catalog-section--commercial-compact .oil-card__reason-item { padding-left: 12px; font-size: 7.5px; }
.catalog-section--commercial-compact .oil-card__metrics { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.catalog-section--commercial-compact .oil-card__metric { min-height: 47px; padding: 6px; border-radius: 11px 8px 12px 7px; }
.catalog-section--commercial-compact .oil-card__metric-label { font-size: 6.5px; }
.catalog-section--commercial-compact .oil-card__metric-value { font-size: 8.5px; }
.catalog-section--commercial-compact .oil-card__footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; }
.catalog-section--commercial-compact .oil-card__grand-label { font-size: 7px; }
.catalog-section--commercial-compact .oil-card__grand-value { font-size: 17px; }
.catalog-section--commercial-compact .oil-card__select { min-height: 38px; padding-inline: 12px; font-size: 9.5px; }

@media (max-width: 860px) {
  .catalog-section--commercial-compact .oil-card__metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .service-dashboard__oil-selection { padding: 10px; }
  .service-dashboard__oil-selection-head { display: block; }
  .service-dashboard__oil-selection-text { display: block; margin-top: 3px; text-align: left; }
  .service-dashboard__oil { grid-template-columns: 66px minmax(0,1fr); min-height: 75px; }
  .service-dashboard__oil-logo { height: 24px; max-width: 56px; }
  .catalog-section--commercial-compact { padding: 12px !important; }
  .catalog-section--commercial-compact .catalog-product--commercial { grid-template-columns: 92px minmax(0,1fr); }
  .catalog-section--commercial-compact .oil-card__media { padding: 36px 7px 9px; }
  .catalog-section--commercial-compact .oil-card__media img { max-width: 80px; max-height: 105px; }
  .catalog-section--commercial-compact .oil-card__content { padding: 11px 10px 11px; }
  .catalog-section--commercial-compact .oil-card__metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-section--commercial-compact .oil-card__footer { grid-template-columns: 1fr; }
  .catalog-section--commercial-compact .oil-card__select { width: 100%; }
}


/* ============================================================
   RECOMMENDED OILS ROW V1
   Изолированный компонент рекомендованных масел.
   Не влияет на каталог и блок других подходящих масел.
   ============================================================ */

.recommended-oils {
  container-type: inline-size;

  margin-top: 12px;
  padding: 13px;

  border: 1px solid rgba(20,184,166,.19);
  border-radius: 22px 16px 23px 15px;

  background:
    linear-gradient(
      135deg,
      rgba(242,252,250,.79),
      rgba(255,255,255,.68)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.97),
    0 12px 30px rgba(20,125,116,.05);
}

.recommended-oils__head {
  margin: 0 3px 10px;
}

.recommended-oils__title {
  display: block;

  color: #0d887d;

  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.recommended-oils__subtitle {
  display: none;
}

.recommended-oils__list {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 9px;

  min-width: 0;
}


/* ОДНА СТРОКА МАСЛА */

.recommended-oil-row {
  display: grid;
  grid-template-columns:
    minmax(100px, 122px)
    minmax(250px, 1fr)
    minmax(175px, 200px);

  align-items: stretch;
  gap: 15px;

  min-width: 0;
  min-height: 154px;

  padding: 11px 13px;

  overflow: hidden;

  border: 1px solid rgba(34,61,64,.085);
  border-radius: 18px 13px 19px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.92),
      rgba(249,253,252,.78)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 20px rgba(36,72,73,.04);
}

.recommended-oil-row--primary {
  border-color: rgba(20,184,166,.19);
}


/* КАНИСТРА */

.recommended-oil-row__visual {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 3px;

  border-radius: 15px 10px 16px 9px;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(255,255,255,.98),
      rgba(230,247,244,.44) 67%,
      rgba(230,247,244,0)
    );
}

.recommended-oil-row__canister {
  display: block;

  width: min(104px, 94%);
  height: 128px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 10px 9px
      rgba(31,55,57,.14)
    );
}


/* ИНФОРМАЦИЯ */

.recommended-oil-row__information {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recommended-oil-row__title-line {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 12px;
}

.recommended-oil-row__logo {
  display: block;

  width: auto;
  height: 27px;
  max-width: 82px;

  flex: 0 0 auto;

  object-fit: contain;
  object-position: left center;
}

.recommended-oil-row__name {
  min-width: 0;

  color: #173638;

  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: -.012em;

  overflow-wrap: anywhere;
}

.recommended-oil-row__description {
  display: -webkit-box;

  margin: 9px 0 8px;

  overflow: hidden;

  color: #4f6769;

  font-size: 9px;
  line-height: 1.4;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ДОПУСКИ */

.recommended-oil-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  min-width: 0;
}

.recommended-oil-row__fact {
  min-height: 23px;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 0 8px;

  border: 1px solid rgba(34,61,64,.075);
  border-radius: 8px;

  background: rgba(247,250,249,.92);
}

.recommended-oil-row__fact-label {
  color: #7c8b8d;

  font-size: 6.2px;
  line-height: 1;
  font-weight: 750;

  text-transform: uppercase;
}

.recommended-oil-row__fact-value {
  color: #405557;

  font-size: 7.5px;
  line-height: 1;
  font-weight: 650;
}


/* ПРАВАЯ КОММЕРЧЕСКАЯ КОЛОНКА */

.recommended-oil-row__commerce {
  min-width: 0;

  display: flex;
  flex-direction: column;

  padding-left: 16px;

  border-left: 1px solid rgba(34,61,64,.08);
}

.recommended-oil-row__role {
  min-height: 20px;

  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 5px;

  color: #13887e;

  font-size: 6.8px;
  line-height: 1.15;
  font-weight: 800;

  letter-spacing: .035em;
  text-transform: uppercase;
}

.recommended-oil-row__role-icon {
  width: 11px;
  height: 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #149f91;
}

.recommended-oil-row__role--primary
.recommended-oil-row__role-icon {
  width: 16px;
  height: 16px;

  background: #ffbc12;
  color: #fff;

  font-size: 8px;
  line-height: 1;
}

.recommended-oil-row__free-labor {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 7px;

  box-sizing: border-box;

  padding: 7px 9px;

  border:
    1px solid rgba(20,184,166,.17);
  border-radius: 10px 7px 11px 7px;

  background:
    rgba(20,184,166,.065);

  color: #176f69;
}

.recommended-oil-row__free-labor-icon {
  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 7px 5px 8px 5px;

  background:
    rgba(20,184,166,.13);

  color: #0b9185;

  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

.recommended-oil-row__free-labor-text {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 1px;
}

.recommended-oil-row__free-labor-text strong {
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 750;
}

.recommended-oil-row__free-labor-text small {
  color: #718786;

  font-size: 7.5px;
  line-height: 1.2;
  font-weight: 500;
}

.recommended-oil-row__commerce-line--labor
.recommended-oil-row__commerce-value {
  color: #0c8c80;
}

.oil-choice-row__metric--labor
.oil-choice-row__metric-value {
  color: #315f5c;
}

.recommended-oil-row__commerce-line {
  display: flex;
  align-items: baseline;
  gap: 5px;

  padding: 2px 0;
}

.recommended-oil-row__commerce-label {
  color: #6c8082;

  font-size: 7.5px;
  line-height: 1.2;
}

.recommended-oil-row__commerce-value {
  color: #173436;

  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 650;

  white-space: nowrap;
}

.recommended-oil-row__commerce-line--liter
.recommended-oil-row__commerce-value {
  font-size: 11px;
  font-weight: 750;
}

.recommended-oil-row__commerce-line--total
.recommended-oil-row__commerce-value {
  font-size: 11.5px;
  font-weight: 750;
}

.recommended-oil-row__select {
  width: 100%;
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: auto;
  padding: 0 10px;

  border: 0;
  border-radius: 10px 7px 11px 7px;

  background:
    linear-gradient(
      135deg,
      #14b8a6,
      #078f83
    );

  color: #fff;

  font-size: 8.5px;
  line-height: 1;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 7px 16px rgba(9,148,135,.15);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.recommended-oil-row__select:hover {
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 10px 21px rgba(9,148,135,.21);
}


/* УЗКИЙ DASHBOARD */

@container (max-width: 690px) {
  .recommended-oil-row {
    grid-template-columns:
      88px
      minmax(0,1fr)
      154px;

    gap: 10px;

    min-height: 142px;
    padding: 10px;
  }

  .recommended-oil-row__canister {
    width: min(82px, 94%);
    height: 108px;
  }

  .recommended-oil-row__logo {
    height: 23px;
    max-width: 67px;
  }

  .recommended-oil-row__name {
    font-size: 10.5px;
  }

  .recommended-oil-row__description {
    margin: 7px 0;
    font-size: 7.8px;
  }

  .recommended-oil-row__commerce {
    padding-left: 10px;
  }
}


/* МОБИЛЬНЫЙ */

@container (max-width: 470px) {
  .recommended-oil-row {
    grid-template-columns:
      80px
      minmax(0,1fr);

    gap: 9px;

    min-height: 0;
  }

  .recommended-oil-row__visual {
    grid-column: 1;
    grid-row: 1;
  }

  .recommended-oil-row__information {
    grid-column: 2;
    grid-row: 1;
  }

  .recommended-oil-row__commerce {
    grid-column: 1 / -1;
    grid-row: 2;

    display: grid;
    grid-template-columns:
      repeat(3, minmax(0,1fr));

    gap: 5px;

    margin-top: 3px;
    padding: 8px 0 0;

    border-left: 0;
    border-top: 1px solid rgba(34,61,64,.08);
  }

  .recommended-oil-row__role {
    grid-column: 1 / -1;
  }

  .recommended-oil-row__commerce-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .recommended-oil-row__select {
    grid-column: 1 / -1;

    min-height: 38px;
    margin-top: 3px;
  }
}


/* ============================================================
   RECOMMENDED OILS — RIGHT COLUMN FINAL
   ============================================================ */

.recommended-oil-row {
  grid-template-columns:
    minmax(96px, 116px)
    minmax(230px, 1fr)
    minmax(190px, 210px);

  column-gap: 15px;
}

.recommended-oil-row__commerce {
  min-width: 190px;

  padding-left: 18px;

  border-left:
    1px solid rgba(34,61,64,.09);
}

.recommended-oil-row__role {
  min-height: 18px;

  gap: 7px;
  margin: 0 0 5px;

  font-size: 7px;
  line-height: 1.15;
  letter-spacing: .025em;

  white-space: nowrap;
}

.recommended-oil-row__role-text {
  display: block;
  min-width: 0;

  white-space: nowrap;
}

.recommended-oil-row__commerce-line {
  min-width: 0;

  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;

  padding: 2px 0;
}

.recommended-oil-row__commerce-label {
  flex: 0 0 auto;

  color: #6c8082;

  font-size: 7.5px;
  line-height: 1.2;

  white-space: nowrap;
}

.recommended-oil-row__commerce-value {
  flex: 0 0 auto;

  font-size: 9px;
  line-height: 1.2;

  white-space: nowrap;
}

.recommended-oil-row__commerce-line--liter {
  margin-bottom: 1px;
}

.recommended-oil-row__commerce-line--liter
.recommended-oil-row__commerce-value {
  font-size: 11.5px;
  font-weight: 750;
}

.recommended-oil-row__commerce-line--total
.recommended-oil-row__commerce-value {
  font-size: 9.5px;
  font-weight: 700;
}

.recommended-oil-row__select {
  width: 100%;
  min-height: 33px;

  margin-top: auto;
}


/*
 * Старый переход на компактную сетку был слишком ранним.
 * Полноценные три колонки сохраняем вплоть до 560px.
 */

@container (min-width: 561px) and (max-width: 690px) {
  .recommended-oil-row {
    grid-template-columns:
      minmax(88px, 104px)
      minmax(205px, 1fr)
      minmax(182px, 198px);

    gap: 11px;

    min-height: 142px;
    padding: 10px 11px;
  }

  .recommended-oil-row__canister {
    width: min(88px, 94%);
    height: 112px;
  }

  .recommended-oil-row__logo {
    height: 23px;
    max-width: 68px;
  }

  .recommended-oil-row__name {
    font-size: 10.5px;
  }

  .recommended-oil-row__description {
    margin: 7px 0;
    font-size: 7.8px;
  }

  .recommended-oil-row__commerce {
    min-width: 182px;
    padding-left: 12px;
  }

  .recommended-oil-row__role {
    font-size: 6.5px;
  }
}


/* Настоящий компактный режим */

@container (max-width: 560px) {
  .recommended-oil-row {
    grid-template-columns:
      82px
      minmax(0,1fr);

    gap: 9px;

    min-height: 0;
  }

  .recommended-oil-row__visual {
    grid-column: 1;
    grid-row: 1;
  }

  .recommended-oil-row__information {
    grid-column: 2;
    grid-row: 1;
  }

  .recommended-oil-row__canister {
    width: min(74px, 94%);
    height: 100px;
  }

  .recommended-oil-row__commerce {
    grid-column: 1 / -1;
    grid-row: 2;

    min-width: 0;

    display: grid;
    grid-template-columns:
      repeat(3, minmax(0,1fr));

    gap: 6px;

    margin-top: 4px;
    padding: 9px 0 0;

    border-left: 0;
    border-top:
      1px solid rgba(34,61,64,.08);
  }

  .recommended-oil-row__role {
    grid-column: 1 / -1;
  }

  .recommended-oil-row__commerce-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .recommended-oil-row__select {
    grid-column: 1 / -1;

    min-height: 38px;
    margin-top: 3px;
  }
}


/* ============================================================
   RECOMMENDED OILS — VISUAL POLISH V2
   Типографика и пропорции по финальному эскизу.
   ============================================================ */


/* СТРОКА МАСЛА */

.recommended-oil-row {
  grid-template-columns:
    minmax(96px, 112px)
    minmax(250px, 1fr)
    minmax(186px, 202px);

  gap: 14px;

  min-height: 148px;
  padding: 10px 12px;
}


/* КАНИСТРА */

.recommended-oil-row__visual {
  padding: 2px;
}

.recommended-oil-row__canister {
  width: min(98px, 94%);
  height: 120px;
}


/* ЛОГОТИП + НАЗВАНИЕ */

.recommended-oil-row__title-line {
  gap: 11px;
}

.recommended-oil-row__logo {
  height: 27px;
  max-width: 80px;
}

.recommended-oil-row__name {
  color: #153638;

  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
}


/* ОПИСАНИЕ */

.recommended-oil-row__description {
  margin: 8px 0 8px;

  color: #435f62;

  font-family: var(--font-body);
  font-size: 8.8px;
  line-height: 1.42;
  font-weight: 400;

  -webkit-line-clamp: 2;
}


/* ДОПУСКИ — ЛЁГКИЕ PILLS КАК НА ЭСКИЗЕ */

.recommended-oil-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: auto;
}

.recommended-oil-row__fact {
  min-height: 25px;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 0 9px;

  border:
    1px solid rgba(53,91,94,.09);
  border-radius: 9px;

  background:
    rgba(248,251,250,.94);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95);
}

.recommended-oil-row__fact-label,
.recommended-oil-row__fact-value {
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
}

.recommended-oil-row__fact-label {
  color: #526a6c;

  font-size: 7.3px;
  font-weight: 500;

  letter-spacing: 0;
  text-transform: none;
}

.recommended-oil-row__fact-value {
  color: #344f51;

  font-size: 7.3px;
  font-weight: 500;
}


/* ПРАВАЯ КОЛОНКА */

.recommended-oil-row__commerce {
  min-width: 186px;

  justify-content: flex-start;

  padding-left: 16px;
}


/* РОЛЬ — ОБЫЧНЫЙ ЧИТАЕМЫЙ ШРИФТ, БЕЗ GLASS-ПЛАШКИ */

.recommended-oil-row__role {
  min-height: 18px;

  display: flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 5px;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  color: #07877c;

  font-family: var(--font-body);
  font-size: 7.2px;
  line-height: 1.15;
  font-weight: 700;

  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.recommended-oil-row__role-text {
  display: inline;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;

  white-space: nowrap;
}

.recommended-oil-row__role-icon {
  width: 11px;
  height: 11px;

  margin: 0;
  padding: 0;

  border: 0;

  box-shadow: none;
}

.recommended-oil-row__role--primary
.recommended-oil-row__role-icon {
  width: 16px;
  height: 16px;

  font-family: Arial, sans-serif;
  font-size: 8px;
}


/* ЦЕНА ЗА ЛИТР */

.recommended-oil-row__commerce-line {
  min-height: 0;

  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;

  margin: 0;
  padding: 2px 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.recommended-oil-row__commerce-label {
  display: inline;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  color: #667d7f;

  font-family: var(--font-body);
  font-size: 7.5px;
  line-height: 1.2;
  font-weight: 400;

  white-space: nowrap;
}

.recommended-oil-row__commerce-value {
  display: inline;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  color: #132f31;

  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.2;
  font-weight: 600;

  white-space: nowrap;
}

.recommended-oil-row__commerce-line--liter {
  margin: 0 0 2px;
}

.recommended-oil-row__commerce-line--liter
.recommended-oil-row__commerce-value {
  font-size: 11.5px;
  font-weight: 700;
}

.recommended-oil-row__commerce-line--total {
  margin-top: 1px;
}

.recommended-oil-row__commerce-line--total
.recommended-oil-row__commerce-value {
  font-size: 9px;
  font-weight: 650;
}


/* КНОПКА */

.recommended-oil-row__select {
  min-height: 32px;

  margin-top: auto;
  padding: 0 10px;

  border-radius: 9px 7px 10px 7px;

  font-family: var(--font-body);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 700;
}


/* УЗКИЙ ДЕСКТОПНЫЙ DASHBOARD */

@container (min-width: 561px) and (max-width: 690px) {
  .recommended-oil-row {
    grid-template-columns:
      86px
      minmax(190px,1fr)
      minmax(174px,188px);

    gap: 10px;

    min-height: 136px;
    padding: 9px 10px;
  }

  .recommended-oil-row__canister {
    width: min(78px,94%);
    height: 102px;
  }

  .recommended-oil-row__logo {
    height: 22px;
    max-width: 64px;
  }

  .recommended-oil-row__name {
    font-size: 10px;
  }

  .recommended-oil-row__description {
    margin: 6px 0;
    font-size: 7.6px;
  }

  .recommended-oil-row__fact {
    min-height: 21px;
    padding-inline: 7px;
  }

  .recommended-oil-row__fact-label,
  .recommended-oil-row__fact-value {
    font-size: 6.3px;
  }

  .recommended-oil-row__commerce {
    min-width: 174px;
    padding-left: 11px;
  }

  .recommended-oil-row__role {
    font-size: 6.3px;
  }

  .recommended-oil-row__commerce-label {
    font-size: 6.8px;
  }

  .recommended-oil-row__commerce-value {
    font-size: 7.8px;
  }

  .recommended-oil-row__commerce-line--liter
  .recommended-oil-row__commerce-value {
    font-size: 10px;
  }
}


/* ============================================================
   RECOMMENDED OILS — COMPACT SPEC BADGES FINAL
   ============================================================ */

.recommended-oils
.recommended-oil-row__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;

  width: 100%;
  min-width: 0;
  margin: 2px 0 0;
}

.recommended-oils
.recommended-oil-row__fact {
  width: auto;
  min-width: 0;
  min-height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;

  flex: 0 0 auto;

  margin: 0;
  padding: 0 8px;

  border:
    1px solid rgba(51,87,89,.09);
  border-radius: 8px;

  background:
    rgba(248,251,250,.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96);

  white-space: nowrap;
}

.recommended-oils
.recommended-oil-row__fact-label,
.recommended-oils
.recommended-oil-row__fact-value {
  width: auto;
  min-width: 0;

  display: inline;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  font-family: var(--font-body);
  line-height: 1;

  white-space: nowrap;
}

.recommended-oils
.recommended-oil-row__fact-label {
  color: #607476;

  font-size: 6.6px;
  font-weight: 600;

  letter-spacing: 0;
  text-transform: uppercase;
}

.recommended-oils
.recommended-oil-row__fact-value {
  color: #304b4d;

  font-size: 7px;
  font-weight: 500;
}


/* Чуть более компактный режим внутри узкого Dashboard */

@container (max-width: 690px) {
  .recommended-oils
  .recommended-oil-row__facts {
    gap: 4px;
  }

  .recommended-oils
  .recommended-oil-row__fact {
    min-height: 20px;
    padding-inline: 7px;
    border-radius: 7px;
  }

  .recommended-oils
  .recommended-oil-row__fact-label {
    font-size: 5.9px;
  }

  .recommended-oils
  .recommended-oil-row__fact-value {
    font-size: 6.3px;
  }
}


/* Мобильный режим */

@container (max-width: 470px) {
  .recommended-oils
  .recommended-oil-row__facts {
    gap: 4px;
    margin-top: 5px;
  }

  .recommended-oils
  .recommended-oil-row__fact {
    min-height: 21px;
    padding-inline: 7px;
  }

  .recommended-oils
  .recommended-oil-row__fact-label,
  .recommended-oils
  .recommended-oil-row__fact-value {
    font-size: 6.2px;
  }
}


/* ============================================================
   RECOMMENDED OILS — COMMERCE ALIGNMENT GRID
   Одинаковая геометрия правой колонки во всех карточках.
   ============================================================ */

.recommended-oils
.recommended-oil-row__commerce {
  min-width: 186px;
  height: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr);

  /*
   * 1 — статус
   * 2 — цена за литр
   * 3 — необходимый объём
   * 4 — полная цена
   * 5 — кнопка
   */
  grid-template-rows:
    minmax(25px, auto)
    25px
    25px
    25px
    34px;

  align-content: center;
  align-items: center;
  gap: 3px;

  padding-left: 16px;
}


/* СТАТУС */

.recommended-oils
.recommended-oil-row__role {
  grid-row: 1;

  width: 100%;
  min-width: 0;
  min-height: 25px;

  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 7px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 0;
  background: transparent;
  box-shadow: none;

  white-space: normal;
}

.recommended-oils
.recommended-oil-row__role-icon {
  grid-column: 1;

  justify-self: center;

  margin: 0;
}

.recommended-oils
.recommended-oil-row__role-text {
  grid-column: 2;

  min-width: 0;

  display: block;

  overflow: hidden;

  color: inherit;

  font-family: var(--font-body);
  font-size: 7px;
  line-height: 1.15;
  font-weight: 700;

  letter-spacing: .01em;
  text-transform: uppercase;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ЦЕНА ЗА ЛИТР */

.recommended-oils
.recommended-oil-row__commerce-line--liter {
  grid-row: 2;

  margin: 0;
}


/* НЕОБХОДИМЫЙ ОБЪЁМ */

.recommended-oils
.recommended-oil-row__commerce-line--volume {
  grid-row: 3;
}


/* ПОЛНАЯ ЦЕНА */

.recommended-oils
.recommended-oil-row__commerce-line--total {
  grid-row: 4;

  margin: 0;
}


/* ОБЩАЯ ГЕОМЕТРИЯ СТРОК */

.recommended-oils
.recommended-oil-row__commerce-line {
  width: 100%;
  min-width: 0;
  height: 25px;

  display: grid;
  grid-template-columns:
    minmax(0, auto)
    minmax(max-content, 1fr);

  align-items: center;
  justify-content: start;
  column-gap: 7px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.recommended-oils
.recommended-oil-row__commerce-label {
  min-width: 0;

  display: block;

  margin: 0;
  padding: 0;

  color: #687d7f;

  font-family: var(--font-body);
  font-size: 7.5px;
  line-height: 1.15;
  font-weight: 400;

  white-space: nowrap;
}

.recommended-oils
.recommended-oil-row__commerce-value {
  min-width: 0;

  display: block;

  margin: 0;
  padding: 0;

  color: #132f31;

  font-family: var(--font-mono);
  font-size: 8.8px;
  line-height: 1;
  font-weight: 650;

  white-space: nowrap;
}


/*
 * У цены за литр нет подписи,
 * поэтому значение начинается с левого края.
 */

.recommended-oils
.recommended-oil-row__commerce-line--liter {
  display: flex;
  align-items: center;
}

.recommended-oils
.recommended-oil-row__commerce-line--liter
.recommended-oil-row__commerce-value {
  font-size: 11px;
  font-weight: 700;
}


/* ПОЛНАЯ ЦЕНА ЧУТЬ АКЦЕНТНЕЕ */

.recommended-oils
.recommended-oil-row__commerce-line--total
.recommended-oil-row__commerce-value {
  font-size: 9.5px;
  font-weight: 700;
}


/* КНОПКА ВСЕГДА НА ОДНОЙ ВЫСОТЕ */

.recommended-oils
.recommended-oil-row__select {
  grid-row: 5;

  width: 100%;
  min-width: 0;
  min-height: 34px;

  align-self: stretch;

  margin: 0;
  padding: 0 10px;

  font-family: var(--font-body);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 700;
}


/* УЗКИЙ ДЕСКТОПНЫЙ DASHBOARD */

@container (min-width: 561px) and (max-width: 690px) {
  .recommended-oils
  .recommended-oil-row__commerce {
    min-width: 174px;

    grid-template-rows:
      minmax(23px, auto)
      23px
      23px
      23px
      32px;

    gap: 2px;

    padding-left: 11px;
  }

  .recommended-oils
  .recommended-oil-row__role {
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 5px;
  }

  .recommended-oils
  .recommended-oil-row__role-text {
    font-size: 6.2px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line {
    height: 23px;
    column-gap: 5px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-label {
    font-size: 6.6px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-value {
    font-size: 7.6px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line--liter
  .recommended-oil-row__commerce-value {
    font-size: 9.8px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line--total
  .recommended-oil-row__commerce-value {
    font-size: 8.2px;
  }

  .recommended-oils
  .recommended-oil-row__select {
    min-height: 32px;
    font-size: 7.8px;
  }
}


/* МОБИЛЬНЫЙ РЕЖИМ ОСТАЁТСЯ ГОРИЗОНТАЛЬНЫМ */

@container (max-width: 560px) {
  .recommended-oils
  .recommended-oil-row__commerce {
    height: auto;

    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-template-rows:
      auto
      auto
      38px;

    gap: 6px;
  }

  .recommended-oils
  .recommended-oil-row__role {
    grid-column: 1 / -1;
    grid-row: 1;

    min-height: 22px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line {
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line--liter {
    grid-column: 1;
    grid-row: 2;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line--volume {
    grid-column: 2;
    grid-row: 2;
  }

  .recommended-oils
  .recommended-oil-row__commerce-line--total {
    grid-column: 3;
    grid-row: 2;
  }

  .recommended-oils
  .recommended-oil-row__select {
    grid-column: 1 / -1;
    grid-row: 3;

    min-height: 38px;
  }
}


/* ============================================================
   RECOMMENDED OILS — TEXT FINAL
   ============================================================ */

.recommended-oils
.recommended-oil-row__name {
  color: #173638;

  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
}


/* Полное описание без обрезки */

.recommended-oils
.recommended-oil-row__description {
  display: block;

  margin: 8px 0 10px;

  overflow: visible;

  color: #53686b;

  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;

  white-space: normal;
  text-overflow: clip;

  max-height: none;

  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}


/* Подписи «Нужно» и «Полная цена» */

.recommended-oils
.recommended-oil-row__commerce-label {
  color: #6b7f81;

  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;

  white-space: nowrap;
}


/* Чуть больше воздуха перед допусками */

.recommended-oils
.recommended-oil-row__facts {
  margin-top: 2px;
}


/* На узком Dashboard сохраняем читаемость */

@container (min-width: 561px) and (max-width: 690px) {
  .recommended-oils
  .recommended-oil-row__name {
    font-size: 12px;
  }

  .recommended-oils
  .recommended-oil-row__description {
    font-size: 10px;
    line-height: 1.4;
  }

  .recommended-oils
  .recommended-oil-row__commerce-label {
    font-size: 10px;
  }
}


/* Мобильный */

@container (max-width: 560px) {
  .recommended-oils
  .recommended-oil-row__name {
    font-size: 13px;
  }

  .recommended-oils
  .recommended-oil-row__description {
    font-size: 11px;
  }

  .recommended-oils
  .recommended-oil-row__commerce-label {
    font-size: 10px;
  }
}


/* ============================================================
   SERVICE DASHBOARD — HERO SERVICE FACTS
   Быстрые данные рядом с главным заголовком.
   ============================================================ */

.service-dashboard__hero-facts {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(150px, 1fr));

  gap: 9px;

  max-width: 1020px;
  margin-top: 17px;
}

.service-dashboard__hero-fact {
  min-width: 0;
  min-height: 70px;

  display: grid;
  grid-template-columns:
    34px minmax(0, 1fr);

  align-items: center;
  gap: 10px;

  padding: 11px 13px;

  border:
    1px solid rgba(37,75,77,.075);
  border-radius: 16px 11px 17px 10px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.74),
      rgba(241,250,248,.58)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 7px 18px rgba(35,69,71,.035);
}

.service-dashboard__hero-fact
.catalog-spec__icon {
  width: 31px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 7px;

  border-radius: 11px 7px 12px 7px;

  background: rgba(20,184,166,.10);
  color: #0d9488;
}

.service-dashboard__hero-fact-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.service-dashboard__hero-fact-label {
  color: #718486;

  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 650;

  letter-spacing: .035em;
  text-transform: uppercase;
}

.service-dashboard__hero-fact-value {
  min-width: 0;

  color: #183a3c;

  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;

  overflow-wrap: anywhere;
}

.service-dashboard__hero-fact-note {
  color: #77898b;

  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1.2;
}


/*
 * После появления быстрых фактов
 * контрольные отметки идут чуть ближе.
 */

.service-dashboard__hero
.service-dashboard__trust {
  margin-top: 12px;
}


/* Средняя ширина */

@media (max-width: 1080px) {
  .service-dashboard__hero-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    max-width: 760px;
  }
}


/* Мобильный */

@media (max-width: 620px) {
  .service-dashboard__hero {
    padding-inline: 15px;
  }

  .service-dashboard__hero-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;
    margin-top: 14px;
  }

  .service-dashboard__hero-fact {
    min-height: 64px;

    grid-template-columns:
      29px minmax(0, 1fr);

    gap: 8px;

    padding: 9px;
  }

  .service-dashboard__hero-fact
  .catalog-spec__icon {
    width: 28px;
    height: 28px;

    padding: 6px;
  }

  .service-dashboard__hero-fact-label {
    font-size: 7.5px;
  }

  .service-dashboard__hero-fact-value {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .service-dashboard__hero-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ============================================================
   RECOMMENDED OILS — REMOVE NESTED SHELL
   Оставляем два уровня: общая панель + карточки масел.
   ============================================================ */

.service-dashboard__summary
.recommended-oils {
  margin-top: 4px;
  padding: 0;

  overflow: visible;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;
}


/* Заголовок раздела без дополнительной rounded-плашки */

.service-dashboard__summary
.recommended-oils__head {
  margin: 0 0 12px;
  padding: 0 2px;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;
}

.service-dashboard__summary
.recommended-oils__title {
  display: block;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;

  color: #178c82;

  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 750;

  letter-spacing: .025em;
}


/* Небольшой воздух между карточками */

.service-dashboard__summary
.recommended-oils__list {
  gap: 10px;
}


/* Карточки масел остаются самостоятельными объектами */

.service-dashboard__summary
.recommended-oil-row {
  border-color: rgba(20,184,166,.13);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 9px 23px rgba(32,74,74,.045);
}


/* ============================================================
   SERVICE DASHBOARD — HERO BRAND LOGO
   ============================================================ */

.service-dashboard__hero-heading {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;
  gap: 18px;

  min-width: 0;
}

.service-dashboard__brand-mark {
  width: 74px;
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 5px;

  overflow: hidden;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.service-dashboard__brand-logo {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  filter:
    drop-shadow(
      0 8px 10px
      rgba(24,49,51,.10)
    );
}

.service-dashboard__heading-content {
  min-width: 0;
}

.service-dashboard__hero-heading
.service-dashboard__eyebrow {
  margin-bottom: 7px;
}

.service-dashboard__hero-heading
.service-dashboard__title {
  max-width: none;
}

.service-dashboard__hero-heading
.service-dashboard__modification {
  margin-top: 9px;
}


/* Средняя ширина */

@media (max-width: 900px) {
  .service-dashboard__hero-heading {
    gap: 14px;
  }

  .service-dashboard__brand-mark {
    width: 62px;
    height: 70px;
  }
}


/* Мобильный */

@media (max-width: 620px) {
  .service-dashboard__hero-heading {
    grid-template-columns:
      52px
      minmax(0, 1fr);

    align-items: start;
    gap: 11px;
  }

  .service-dashboard__brand-mark {
    width: 52px;
    height: 58px;

    padding: 3px;
  }

  .service-dashboard__hero-heading
  .service-dashboard__eyebrow {
    margin-bottom: 5px;
  }

  .service-dashboard__hero-heading
  .service-dashboard__modification {
    margin-top: 7px;
  }
}


/* Очень узкий экран */

@media (max-width: 390px) {
  .service-dashboard__hero-heading {
    grid-template-columns:
      44px
      minmax(0, 1fr);

    gap: 9px;
  }

  .service-dashboard__brand-mark {
    width: 44px;
    height: 50px;
  }
}
/* ============================================================
   OIL FIT EXPLANATION — HERO PREMIUM
   ============================================================ */

.service-dashboard__hero
.oil-fit-explanation--hero{

margin-top:16px;
padding:0;

display:block;

border:0;
border-radius:0;

background:none;

box-shadow:none;
}


.service-dashboard__hero
.oil-fit-explanation__icon{

display:none;
}


.service-dashboard__hero
.oil-fit-explanation__content{

max-width:980px;
}


.service-dashboard__hero
.oil-fit-explanation__title{

margin:0 0 8px;

color:#1f4647;

font-size:15px;
font-weight:760;

letter-spacing:-.01em;
}


.service-dashboard__hero
.oil-fit-explanation__text{

margin:0;

color:#60797b;

font-size:13px;
line-height:1.78;

text-wrap:pretty;
}


.service-dashboard__hero
.oil-fit-explanation--hero
+
.service-dashboard__trust{

margin-top:18px;
}


@media(max-width:700px){

.service-dashboard__hero
.oil-fit-explanation__title{

font-size:13px;
}

.service-dashboard__hero
.oil-fit-explanation__text{

font-size:11px;
line-height:1.65;
}

}

/* ============================================================
   COMPATIBLE OIL ROW V1
   Канистра | информация | коммерческая колонка
   Механика прокрутки oil-choice__list не изменяется.
   ============================================================ */

.oil-choice
.oil-choice-row--catalog {
  display: grid;

  grid-template-columns:
    96px
    minmax(0,1fr)
    250px;

  grid-template-areas:
    "media info commerce";

  align-items: stretch;
  gap: 13px;

  min-height: 154px;
  padding: 12px 14px;

  border-radius:
    20px 15px 21px 14px;
}


/* КАНИСТРА */

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__media {
  grid-area: media;

  width: 96px;
  height: 100%;
  min-height: 126px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 5px;

  border:
    1px solid rgba(255,255,255,.76);
  border-radius:
    16px 11px 17px 10px;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,255,255,.86),
      rgba(234,247,244,.34) 72%
    );
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__image {
  display: block;

  width: 100%;
  max-width: 86px;
  max-height: 118px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 9px 9px
      rgba(34,62,63,.12)
    );
}


/* ЦЕНТРАЛЬНАЯ КОЛОНКА */

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__info {
  grid-area: info;

  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.oil-choice-row__title-line {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;
}

.oil-choice-row__brand-logo {
  display: block;

  width: auto;
  height: 25px;
  max-width: 72px;

  flex: 0 0 auto;

  object-fit: contain;
  object-position: left center;
}

.oil-choice-row__brand-text {
  flex: 0 0 auto;

  color: #128c82;

  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 750;

  letter-spacing: .035em;
  text-transform: uppercase;
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__name {
  min-width: 0;
  max-width: none;

  display: block;

  margin: 0;

  overflow: visible;

  color: #173638;

  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;

  letter-spacing: -.012em;

  -webkit-line-clamp: unset;
}

.oil-choice-row__viscosity {
  min-height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 0 8px;

  border:
    1px solid rgba(20,184,166,.15);
  border-radius: 8px;

  background:
    rgba(20,184,166,.055);

  color: #178d83;

  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;

  white-space: nowrap;
}


/* ОПИСАНИЕ */

.oil-choice-row__description {
  display: block;

  margin: 8px 0 9px;

  overflow: visible;

  color: #5b7274;

  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;

  white-space: normal;
}


/* КОРОТКИЙ ЭКСПЕРТНЫЙ ВЫВОД */

.oil-choice-row__insight {
  min-width: 0;

  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;

  margin: -2px 0 8px;
  padding: 5px 8px;

  border:
    1px solid rgba(20,184,166,.13);
  border-radius: 8px;

  background:
    rgba(20,184,166,.045);

  color: #3e6e6b;

  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.3;
  font-weight: 600;
}

.oil-choice-row__insight-icon {
  width: 16px;
  height: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 6px 4px 7px 4px;

  background:
    rgba(20,184,166,.10);

  color: #108f84;

  font-size: 8px;
  line-height: 1;
  font-weight: 800;
}

.oil-choice-row__insight-text {
  min-width: 0;
}

.oil-choice-row__insight--approval {
  border-color:
    rgba(20,184,166,.16);

  background:
    rgba(20,184,166,.055);
}

.oil-choice-row__insight--standards {
  border-color:
    rgba(70,135,160,.13);

  background:
    rgba(70,135,160,.045);
}

.oil-choice-row__insight--engine {
  border-color:
    rgba(68,113,111,.12);

  background:
    rgba(255,255,255,.36);
}


/* ДОПУСКИ */

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 0;
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__fact {
  width: auto;
  min-width: 0;
  min-height: 22px;

  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 4px;

  flex: 0 0 auto;

  padding: 0 7px;

  border-radius: 8px;

  white-space: nowrap;
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__fact-label {
  font-family: var(--font-body);
  font-size: 6.5px;
  line-height: 1;
  font-weight: 700;
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__fact-value {
  font-family: var(--font-body);
  font-size: 7px;
  line-height: 1;
  font-weight: 550;
}


/* ПРАВАЯ КОЛОНКА */

.oil-choice-row__commerce {
  grid-area: commerce;

  min-width: 0;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows:
    auto
    auto
    auto
    minmax(36px,1fr);

  align-content: center;
  gap: 5px;

  padding-left: 17px;

  border-left:
    1px solid rgba(34,61,64,.085);
}

.oil-choice-row__metric {
  min-width: 0;

  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    max-content;

  align-items: baseline;
  gap: 10px;

  padding: 1px 0;
}

.oil-choice-row__metric-label {
  color: #6d8183;

  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 450;

  white-space: nowrap;
}

.oil-choice-row__metric-value {
  color: #173638;

  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 650;

  white-space: nowrap;
}

.oil-choice-row__metric--liter
.oil-choice-row__metric-value {
  font-size: 12px;
  font-weight: 750;
}

.oil-choice-row__metric--total
.oil-choice-row__metric-value {
  font-size: 13px;
  font-weight: 750;
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__action {
  width: 100%;

  display: flex;
  align-items: flex-end;
}

.oil-choice
.oil-choice-row--catalog
.oil-choice-row__select {
  width: 100%;
  min-width: 0;
  min-height: 36px;

  margin-top: auto;
  padding: 0 10px;

  font-size: 9px;
}


/* ПЛАНШЕТ */

@media (max-width: 900px) {
  .oil-choice
  .oil-choice-row--catalog {
    grid-template-columns:
      88px
      minmax(0,1fr)
      minmax(168px,182px);

    gap: 11px;

    min-height: 146px;
    padding: 10px 11px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__media {
    width: 88px;
    min-height: 112px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__image {
    max-width: 78px;
    max-height: 102px;
  }

  .oil-choice-row__brand-logo {
    height: 21px;
    max-width: 60px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__name {
    font-size: 12px;
  }

  .oil-choice-row__description {
    font-size: 9.5px;
  }

  .oil-choice-row__commerce {
    min-width: 168px;
    padding-left: 11px;
  }
}


/* МОБИЛЬНЫЙ */

@media (max-width: 620px) {
  .oil-choice
  .oil-choice-row--catalog {
    grid-template-columns:
      88px
      minmax(0, 1fr);

    grid-template-areas: none;

    align-items: start;
    gap: 10px 12px;

    min-height: 0;
    padding: 12px;

    overflow: hidden;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__media {
    grid-column: 1;
    grid-row: 1;

    width: 88px;
    height: 112px;
    min-height: 112px;

    align-self: start;

    padding: 5px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__image {
    width: 100%;
    max-width: 78px;
    max-height: 102px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__info {
    display: contents;
  }

  .oil-choice-row__title-line {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;

    align-self: stretch;
  }

  .oil-choice-row__brand-logo {
    width: auto;
    height: 27px;
    max-width: 92px;
  }

  .oil-choice-row__brand-text {
    font-size: 9px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__name {
    width: 100%;
    min-width: 0;

    font-size: 13px;
    line-height: 1.3;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  .oil-choice-row__viscosity {
    min-height: 27px;

    padding: 0 10px;

    font-size: 10px;
  }

  .oil-choice-row__description {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;
    min-width: 0;

    margin: 1px 0 0;

    font-size: 11px;
    line-height: 1.55;

    overflow-wrap: anywhere;
  }

  .oil-choice-row__insight {
    grid-column: 1 / -1;
    grid-row: 3;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    align-self: stretch;

    margin: 0;
    padding: 8px 10px;

    font-size: 10px;
    line-height: 1.4;

    overflow-wrap: anywhere;
  }

  .oil-choice-row__insight-icon {
    width: 18px;
    height: 18px;

    font-size: 9px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__facts {
    grid-column: 1 / -1;
    grid-row: 4;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin: 0;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__fact {
    max-width: 100%;
    min-height: 25px;

    padding: 0 8px;

    white-space: normal;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__fact-label {
    font-size: 7px;
    white-space: nowrap;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__fact-value {
    min-width: 0;

    font-size: 7.5px;
    line-height: 1.2;

    overflow-wrap: anywhere;
  }

  .oil-choice-row__commerce {
    grid-column: 1 / -1;
    grid-row: 5;

    width: 100%;
    min-width: 0;
    height: auto;

    display: grid;
    grid-template-columns:
      minmax(0, 1fr);
    grid-template-rows: auto;

    gap: 6px;

    box-sizing: border-box;

    margin-top: 4px;
    padding: 11px 0 0;

    border-left: 0;
    border-top:
      1px solid rgba(34,61,64,.085);
  }

  .oil-choice-row__metric {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      max-content;

    align-items: baseline;
    gap: 12px;

    box-sizing: border-box;

    padding: 7px 9px;

    border:
      1px solid rgba(255,255,255,.68);
    border-radius: 10px 7px 11px 7px;

    background:
      rgba(255,255,255,.25);
  }

  .oil-choice-row__metric-label {
    min-width: 0;

    font-size: 10px;
    line-height: 1.25;

    white-space: normal;
  }

  .oil-choice-row__metric-value {
    min-width: max-content;

    font-size: 11px;
    line-height: 1.2;

    text-align: right;
    white-space: nowrap;
  }

  .oil-choice-row__metric--liter
  .oil-choice-row__metric-value {
    font-size: 12px;
  }

  .oil-choice-row__metric--total
  .oil-choice-row__metric-value {
    font-size: 14px;
    font-weight: 800;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__action {
    grid-column: auto;

    width: 100%;
    min-width: 0;

    margin-top: 2px;
  }

  .oil-choice
  .oil-choice-row--catalog
  .oil-choice-row__select {
    width: 100%;
    min-width: 0;
    min-height: 44px;

    margin: 0;
    padding: 0 14px;

    font-size: 10px;
  }
}


/* ============================================================
   BOOKING DIALOG V1
   ============================================================ */

body.booking-dialog-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.booking-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: grid;
  place-items: center;

  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));

  box-sizing: border-box;
}

.booking-dialog[hidden] {
  display: none;
}

.booking-dialog__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(15, 35, 37, .56);

  -webkit-backdrop-filter:
    blur(14px);
  backdrop-filter:
    blur(14px);

  opacity: 0;
  transition:
    opacity .28s ease;
}

.booking-dialog__panel {
  position: relative;
  z-index: 1;

  width:
    min(100%, 760px);
  max-height:
    min(880px, calc(100dvh - 36px));

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.82);
  border-radius:
    28px 19px 30px 18px;

  background:
    linear-gradient(
      145deg,
      rgba(250,255,254,.98),
      rgba(232,246,243,.98)
    );

  box-shadow:
    0 35px 90px
    rgba(8,32,34,.30);

  opacity: 0;
  transform:
    translateY(18px)
    scale(.975);

  transition:
    opacity .28s ease,
    transform .32s
    cubic-bezier(.2,.8,.2,1);
}

.booking-dialog--open
.booking-dialog__backdrop {
  opacity: 1;
}

.booking-dialog--open
.booking-dialog__panel {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);
}

.booking-dialog__scroll {
  max-height:
    min(880px, calc(100dvh - 36px));

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.booking-dialog__content {
  padding:
    32px 34px 30px;
}

.booking-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;

  width: 40px;
  height: 40px;

  border: 0;
  border-radius:
    13px 9px 14px 9px;

  background:
    rgba(255,255,255,.72);

  box-shadow:
    0 8px 22px
    rgba(27,62,64,.10);

  cursor: pointer;
}

.booking-dialog__close span {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 2px;

  border-radius: 2px;
  background: #31575a;
}

.booking-dialog__close span:first-child {
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}

.booking-dialog__close span:last-child {
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}

.booking-dialog__header {
  padding-right: 52px;
  margin-bottom: 22px;
}

.booking-dialog__kicker {
  margin-bottom: 7px;

  color: #158f84;

  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.booking-dialog__title {
  margin: 0 0 14px;

  color: #173638;

  font-size:
    clamp(25px,4vw,38px);
  line-height: 1.06;
  font-weight: 750;

  letter-spacing: -.035em;
}

.booking-dialog__vehicle {
  display: block;

  color: #234b4e;

  font-size: 15px;
  line-height: 1.35;
  font-weight: 750;
}

.booking-dialog__vehicle-meta {
  display: block;
  margin-top: 4px;

  color: #6a8081;

  font-size: 11px;
  line-height: 1.4;
}

.booking-dialog__order,
.booking-dialog__form {
  padding: 20px;

  border:
    1px solid rgba(255,255,255,.82);
  border-radius:
    20px 14px 22px 13px;

  background:
    rgba(255,255,255,.48);

  box-shadow:
    0 16px 42px
    rgba(40,79,80,.075);
}

.booking-dialog__form {
  margin-top: 16px;
}

.booking-dialog__section-title {
  margin-bottom: 13px;

  color: #587173;

  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .1em;
  text-transform: uppercase;
}

.booking-dialog__products {
  display: grid;
  gap: 1px;
}

.booking-dialog__product {
  min-width: 0;

  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    max-content;
  align-items: center;
  gap: 16px;

  padding: 11px 0;

  border-bottom:
    1px solid rgba(35,72,74,.075);
}

.booking-dialog__product-info {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.booking-dialog__product-label {
  color: #748788;

  font-size: 8px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: .07em;
  text-transform: uppercase;
}

.booking-dialog__product-name {
  color: #1f4143;

  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;

  overflow-wrap: anywhere;
}

.booking-dialog__product-meta {
  color: #708485;

  font-size: 9px;
  line-height: 1.35;
}

.booking-dialog__product-price {
  color: #173638;

  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 750;

  white-space: nowrap;
}

.booking-dialog__product-price--request {
  color: #748788;
  font-family: var(--font-body);
  font-size: 10px;
}

.booking-dialog__benefit {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 14px;
  padding: 10px 12px;

  border:
    1px solid rgba(42,98,99,.10);
  border-radius:
    12px 8px 13px 8px;

  background:
    rgba(42,98,99,.045);

  color: #315e60;
}

.booking-dialog__benefit--free {
  border-color:
    rgba(20,184,166,.17);

  background:
    rgba(20,184,166,.065);

  color: #147d74;
}

.booking-dialog__benefit-icon {
  width: 23px;
  height: 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius:
    8px 5px 9px 5px;

  background:
    rgba(20,184,166,.13);

  font-size: 10px;
  font-weight: 850;
}

.booking-dialog__benefit-text {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.booking-dialog__totals {
  margin-top: 16px;
  padding-top: 12px;

  border-top:
    1px solid rgba(35,72,74,.09);
}

.booking-dialog__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;

  padding: 4px 0;

  color: #607779;

  font-size: 10px;
  line-height: 1.3;
}

.booking-dialog__total strong {
  color: #294d50;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.booking-dialog__total--grand {
  margin-top: 9px;
  padding-top: 12px;

  border-top:
    1px solid rgba(35,72,74,.10);

  color: #173638;

  font-size: 13px;
  font-weight: 800;
}

.booking-dialog__total--grand strong {
  color: #173638;

  font-size: 22px;
  font-weight: 800;
}

.booking-dialog__field {
  display: block;
  margin-top: 13px;
}

.booking-dialog__field > span {
  display: block;
  margin-bottom: 6px;

  color: #405f61;

  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
}

.booking-dialog__field b {
  color: #158f84;
}

.booking-dialog__field input {
  width: 100%;
  min-height: 48px;

  box-sizing: border-box;

  padding: 0 14px;

  border:
    1px solid rgba(45,83,85,.12);
  border-radius:
    13px 9px 14px 9px;

  outline: 0;

  background:
    rgba(255,255,255,.72);

  color: #173638;

  font: inherit;
  font-size: 13px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.booking-dialog__field input:focus {
  border-color:
    rgba(20,184,166,.40);

  background: #fff;

  box-shadow:
    0 0 0 4px
    rgba(20,184,166,.08);
}

.booking-dialog__field
.booking-dialog__input--invalid {
  border-color:
    rgba(197,75,75,.46);

  box-shadow:
    0 0 0 4px
    rgba(197,75,75,.07);
}

.booking-dialog__error {
  display: block;
  min-height: 14px;
  margin-top: 4px;

  color: #a64f4f;

  font-size: 8px;
  line-height: 1.3;
}

.booking-dialog__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  margin-top: 10px;

  color: #617779;

  font-size: 9px;
  line-height: 1.45;

  cursor: default;
}

.booking-dialog__consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-dialog__consent-mark {
  width: 21px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border:
    1px solid rgba(20,184,166,.22);
  border-radius:
    7px 5px 8px 5px;

  background:
    rgba(20,184,166,.10);

  color: #0d8f83;

  font-size: 10px;
  font-weight: 850;
}

.booking-dialog__form-status {
  min-height: 16px;
  margin-top: 8px;

  color: #a64f4f;

  font-size: 9px;
}

.booking-dialog__submit,
.booking-dialog__success-button,
.catalog-calculator__booking {
  width: 100%;
  min-height: 48px;

  border: 0;
  border-radius:
    14px 9px 15px 9px;

  background:
    linear-gradient(
      135deg,
      #159b8f,
      #107d75
    );

  color: #fff;

  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .015em;

  cursor: pointer;

  box-shadow:
    0 13px 28px
    rgba(15,127,117,.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.booking-dialog__submit:hover,
.booking-dialog__success-button:hover,
.catalog-calculator__booking:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 16px 32px
    rgba(15,127,117,.25);
}

.booking-dialog__submit:disabled {
  cursor: wait;
  opacity: .68;
  transform: none;
}

.booking-dialog__notice {
  margin: 10px 0 0;

  color: #7b8d8e;

  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.catalog-calculator__booking {
  display: block;

  width:
    calc(100% - 32px);
  margin:
    0 16px 18px;
}

.booking-dialog__success {
  min-height: 440px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 35px 20px;

  text-align: center;
}

.booking-dialog__success-icon {
  width: 72px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  border-radius:
    24px 17px 26px 16px;

  background:
    rgba(20,184,166,.10);

  color: #0d9185;

  font-size: 28px;
  font-weight: 850;
}

.booking-dialog__success-title {
  margin: 0 0 12px;

  color: #173638;

  font-size: 32px;
  line-height: 1.1;
}

.booking-dialog__success-text {
  max-width: 430px;
  margin: 0 0 25px;

  color: #62797a;

  font-size: 12px;
  line-height: 1.65;
}

.booking-dialog__success-button {
  width: auto;
  min-width: 220px;
  padding: 0 24px;
}


@media (max-width: 620px) {
  .booking-dialog {
    align-items: end;

    padding:
      max(8px, env(safe-area-inset-top))
      0
      0;
  }

  .booking-dialog__panel {
    width: 100%;
    max-height:
      calc(100dvh - 8px);

    border-radius:
      24px 24px 0 0;

    transform:
      translateY(30px);
  }

  .booking-dialog__scroll {
    max-height:
      calc(100dvh - 8px);

    padding-bottom:
      env(safe-area-inset-bottom);
  }

  .booking-dialog__content {
    padding:
      25px 15px 22px;
  }

  .booking-dialog__close {
    top: 12px;
    right: 12px;
  }

  .booking-dialog__header {
    padding-right: 44px;
    margin-bottom: 17px;
  }

  .booking-dialog__title {
    font-size: 27px;
  }

  .booking-dialog__order,
  .booking-dialog__form {
    padding: 15px;

    border-radius:
      17px 13px 18px 12px;
  }

  .booking-dialog__product {
    gap: 10px;
  }

  .booking-dialog__product-name {
    font-size: 11px;
  }

  .booking-dialog__product-price {
    font-size: 10px;
  }

  .booking-dialog__total--grand strong {
    font-size: 19px;
  }

  .booking-dialog__field input {
    font-size: 16px;
  }

  .catalog-calculator__booking {
    width:
      calc(100% - 24px);
    margin:
      0 12px 14px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .booking-dialog__backdrop,
  .booking-dialog__panel,
  .booking-dialog__submit,
  .booking-dialog__success-button,
  .catalog-calculator__booking {
    transition: none;
  }
}