/* ============================================================
   Экран 11 — Конфигуратор: весь путь (обзор 5 шагов).
   Карта процесса: карточки-шаги 1–5 (объект → поверхность → финиш → цвет → система).
   Значения — 1:1 из хендоффа (десктоп-канон, справочник «ЭКРАН 11 / КОНФИГУРАТОР — ВСЕ ШАГИ»).
   ============================================================ */

.vk-cfgall__head{
  padding:44px var(--pad) 6px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
}
.vk-cfgall__title{font:500 40px/1.06 var(--ff-serif);letter-spacing:-.02em;margin:0}
.vk-cfgall__sub{font:400 14px var(--ff-sans);color:var(--ink-55);white-space:nowrap}

.vk-cfgall__grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  padding:28px var(--pad) 20px;
}

/* ---- карточка-шаг (база: 1, 2, 3, 5) ---- */
.vk-cfgall__card{
  background:var(--surface);border-radius:14px;padding:18px 18px 16px;
  display:grid;gap:12px;align-content:start;
}
.vk-cfgall__card-head{display:flex;align-items:center;gap:9px}
.vk-cfgall__num{
  width:26px;height:26px;border-radius:50%;background:var(--graphite);color:var(--surface);
  display:grid;place-items:center;font:600 13px var(--ff-sans);flex:none;
}
.vk-cfgall__name{font:600 14px var(--ff-sans)}
.vk-cfgall__q{font:400 12px var(--ff-sans);color:var(--ink-55)}
.vk-cfgall__note{font:400 11px var(--ff-sans);color:var(--ink-5);margin-top:2px}

.vk-cfgall__chips{display:flex;flex-wrap:wrap;gap:6px}
.vk-cfgall__chip{
  font:500 12px var(--ff-sans);border:1px solid var(--line-25);
  padding:7px 13px;border-radius:8px;display:inline-block;
}
.vk-cfgall__chip.is-active{
  font-weight:600;background:var(--graphite);color:var(--surface);border-color:var(--graphite);
}

/* ---- карточка-шаг 4: Цвет (акцент, иммерсивная) ---- */
.vk-cfgall__card--color{
  background:#4A5D4E;color:var(--surface);padding:18px;gap:10px;
  outline:2px solid var(--terracotta);outline-offset:-2px;
}
.vk-cfgall__card--color .vk-cfgall__num{background:var(--terracotta)}
.vk-cfgall__color-lead{font:400 12px var(--ff-sans);color:rgba(251,249,245,.75)}
.vk-cfgall__color-name{font:500 34px/1 var(--ff-serif);margin:4px 0}

.vk-cfgall__swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.vk-cfgall__swatches span{aspect-ratio:1;border-radius:6px;display:block}
.vk-cfgall__swatches span.is-active{outline:2px solid var(--surface);outline-offset:1px}

.vk-cfgall__expand{font:600 11.5px var(--ff-sans);color:var(--surface);text-decoration:underline}

/* ---- карточка-шаг 5: Система (мини-смета внутри .vk-cfgall__chips) ---- */
.vk-cfgall__sysgrid{width:100%;display:grid;gap:6px;font:400 12px var(--ff-sans)}
.vk-cfgall__sysrow{display:flex;justify-content:space-between}
.vk-cfgall__sysval{color:var(--ink-6)}
.vk-cfgall__sysrow--total{
  border-top:1px solid var(--line-12);padding-top:5px;font-weight:600;
}

/* ---- полоса-примечание ---- */
.vk-cfgall__banner{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:8px var(--pad) 20px;background:var(--surface);border-radius:12px;padding:16px 22px;
}
.vk-cfgall__banner span{font:400 13.5px var(--ff-sans);color:var(--ink-70)}

/* ---- CTA ---- */
.vk-cfgall__cta{text-align:center;padding:0 0 56px}
.vk-cfgall__cta .vk-btn{padding:15px 34px}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1024px){
  .vk-cfgall__title{font-size:32px}
  .vk-cfgall__grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:600px){
  .vk-cfgall__head{flex-direction:column;align-items:flex-start;gap:10px;padding-top:32px}
  .vk-cfgall__title{font-size:26px}
  .vk-cfgall__sub{white-space:normal}
  .vk-cfgall__grid{grid-template-columns:1fr;padding-top:20px}
  .vk-cfgall__banner{align-items:flex-start;padding:14px 16px}
  .vk-cfgall__cta .vk-btn{width:100%}
}