/*
 * «Программы мытья» (/wash-programs): раздел пакета владельца (public/assets/magicclean-wash/, без правок) — адаптация к сайту.
 * Владелец 2026-10-17: «я дал тебе заготовку, твоя задача адаптировать все к нашему сайту», «что с этим шрифтом?»,
 * «эти кнопки тоже - не наши», про выпадающий список исполнения: «это тоже херня».
 * Файл подключается ДО раздела (src/pages/wash-programs.astro) — шрифты пакета не успевают скачаться. Правила сильнее правил
 * пакета (.wp-z.wp-z #mc-wash-programs …) и побеждают его правила, в том числе с !important.
 *  — шрифты сайта (Manrope Variable / Inter Variable) вместо шрифтов пакета; заголовки — Manrope 600, разрядка как у сайта;
 *  — шкала сайта: заголовки блоков до 52px, подзаголовки 21px, текст 15px, лиды 17px, надписи Inter 600 прописными 12–13px;
 *  — цвета текста сайта (#0f1420, #4b5567);
 *  — кнопки сайта: «Включить живой пульт» — .btn-primary, «Четыре программы…» и «Вернуться к обзору» — та же кнопка
 *    с обводкой на светлом, «Как работают технологии» — .btn-ghost (тёмный низ раздела), «Этот этап подробнее» — красная
 *    ссылка как «Подробнее →»; исполнение пульта — клавиши как «Модель» на страницах товара (.oc-k).
 * Композиция (машина, пульт, цифры 01–04, порядок блоков) — пакета. Крупные слова с 2026-10-20 — заголовки блоков сайта
 * (до 52px), верх раздела под них перестроен. Раздел на широком экране увеличен (zoom, --z — коэффициент); размеры текста
 * делятся на --z, чтобы на экране они были ровно размерами сайта.
 */

/* ---------- основа ---------- */
.wp-z.wp-z #mc-wash-programs .d-page {
  --d-ink: #0f1420;
  --d-grey: #4b5567;
  --d-red: #e31e24;
  font-family: var(--font-sans);
  font-size: calc(15px / var(--z));
  line-height: 1.55;
}
.wp-z.wp-z #mc-wash-programs .d-page h2,
.wp-z.wp-z #mc-wash-programs .d-page h3,
.wp-z.wp-z #mc-wash-programs .d-page h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ---------- надписи разделов — как .pay-ey ---------- */
.wp-z.wp-z #mc-wash-programs .d-meta {
  font-family: var(--font-sans);
  font-size: calc(12px / var(--z));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
}

/* ---------- крупные слова → заголовки блоков по шкале сайта ----------
   Владелец 2026-10-20: «приведи шрифты к принятым на сайте». «У чистоты есть глубина.», «Очистить.», «Смыть.», «Защитить.»,
   «Завершить.», слово живого пульта были 113–164px — на сайте заголовок блока Manrope 600 до 52px (на телефоне 34px).
   Цифры 01–04 с фактурой — изображение раздела, остаются крупными (крупные номера есть и на CarWash Premium). */
.wp-z.wp-z #mc-wash-programs .d-title,
.wp-z.wp-z #mc-wash-programs .d-step-heading h3,
.wp-z.wp-z #mc-wash-programs .d-step.rinse .d-step-heading h3,
.wp-z.wp-z #mc-wash-programs .d-step.finish .d-step-heading h3,
.wp-z.wp-z #mc-wash-programs .d-step.wax .d-step-heading h3,
.wp-z.wp-z #mc-wash-programs .d-live-word,
.wp-z.wp-z #mc-wash-programs .d-live[data-program=rinse] .d-live-word,
.wp-z.wp-z #mc-wash-programs .d-live[data-program=finish] .d-live-word,
.wp-z.wp-z #mc-wash-programs .d-live[data-program=wax] .d-live-word {
  font-size: calc(clamp(34px, 3.6vw, 52px) / var(--z)) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}
.wp-z.wp-z #mc-wash-programs .d-title { max-width: none; }
/* ---------- программы 01–04: у каждой своя цветовая среда и своё фото ----------
   Владелец 2026-10-21: «я обновил модули для этой странице, внеси изменения согласно новым решениям» — концепция
   «Программы мытья/Концепции/10-programme-atmospheres» (цвет и фактура программ): 01 — тёплый перламутр (активная пена),
   02 — водяной голубой (направленный поток), 03 — шампанское (полимерная защита, капли), 04 — ледяной мятный (чистый кузов
   после финишного ополаскивания); цифра залита фото своей программы, надписи — цветом среды. Значения — его atmospheres.css.
   Полоса каждой программы — на всю ширину монитора, текст и цифры — в ширине страницы (владелец 2026-10-20: «эти разделы
   сделай на всю ширину монитора, текст и надписи оставь в размере страницы»); --wp-bl / --wp-br — поля от контента до краёв
   экрана, считает скрипт страницы. Шрифты и размеры — сайта (выше). */
.wp-z.wp-z #mc-wash-programs .d-programs { background: transparent; }
.wp-z.wp-z #mc-wash-programs .d-programs::before { display: none; }
.wp-z.wp-z #mc-wash-programs .d-step.clean { --scene-paper: #f1e5df; --scene-ink: #302c2c; --scene-accent: #965b55; --scene-photo: url("/assets/wash-atmo/01-clean.webp"); --scene-veil-near: #f1e5dfb5; --scene-veil-far: #f1e5dff2; }
.wp-z.wp-z #mc-wash-programs .d-step.rinse { --scene-paper: #deebf1; --scene-ink: #203744; --scene-accent: #287598; --scene-photo: url("/assets/wash-atmo/02-rinse.webp"); --scene-veil-near: #deebf1ad; --scene-veil-far: #deebf1f2; }
.wp-z.wp-z #mc-wash-programs .d-step.wax { --scene-paper: #efe2c9; --scene-ink: #3d3428; --scene-accent: #957024; --scene-photo: url("/assets/wash-atmo/03-wax.webp"); --scene-veil-near: #efe2c99e; --scene-veil-far: #efe2c9f0; }
.wp-z.wp-z #mc-wash-programs .d-step.finish { --scene-paper: #e0eee8; --scene-ink: #203c36; --scene-accent: #347b6b; --scene-photo: url("/assets/wash-atmo/04-finish.webp"); --scene-veil-near: #e0eee8ad; --scene-veil-far: #e0eee8f2; }
/* полоса программы: цвет среды + фото под вуалью, от края до края экрана (фон шире самой программы — overflow не режет) */
.wp-z.wp-z #mc-wash-programs .d-step { --photo: var(--scene-photo); overflow: visible; background: transparent; color: var(--scene-ink); isolation: isolate; }
.wp-z.wp-z #mc-wash-programs .d-step::before,
.wp-z.wp-z #mc-wash-programs .d-step.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--wp-bl, 0px));
  right: calc(-1 * var(--wp-br, 0px));
  width: auto;
  z-index: -2;
  background-color: var(--scene-paper);
  background-image: linear-gradient(90deg, var(--scene-veil-near), var(--scene-veil-far)), var(--scene-photo);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.wp-z.wp-z #mc-wash-programs .d-step.rinse::before,
.wp-z.wp-z #mc-wash-programs .d-step.finish::before { background-image: linear-gradient(90deg, var(--scene-veil-far), var(--scene-veil-near)), var(--scene-photo); }
/* линия между программами не нужна — их разделяет цвет; программа, выбранная в живом пульте, — красная черта слева */
.wp-z.wp-z #mc-wash-programs .d-step::after { display: none; }
.wp-z.wp-z #mc-wash-programs .d-step.is-active { box-shadow: inset 3px 0 var(--d-red); }
/* цифра и дымка вокруг неё — фото своей программы */
.wp-z.wp-z #mc-wash-programs .d-step [data-photo] { --photo: var(--scene-photo); }
.wp-z.wp-z #mc-wash-programs .d-step .d-mcwp-art::before { background-image: var(--scene-photo); background-size: cover; background-position: center; opacity: .18; filter: blur(.3px); }
.wp-z.wp-z #mc-wash-programs .d-step .d-mcwp-digit { background-image: var(--scene-photo); background-size: cover; background-position: center; opacity: .98; filter: contrast(1.04); mix-blend-mode: multiply; }
/* надписи и текст — цвета среды */
.wp-z.wp-z #mc-wash-programs .d-step .d-step-heading > span,
.wp-z.wp-z #mc-wash-programs .d-step .d-step-copy .d-tech,
.wp-z.wp-z #mc-wash-programs .d-step .d-methods h4 span { color: var(--scene-accent); }
.wp-z.wp-z #mc-wash-programs .d-step .d-step-heading h3 { color: var(--scene-ink); text-shadow: 0 0 18px var(--scene-paper), 0 2px 6px var(--scene-paper); }
.wp-z.wp-z #mc-wash-programs .d-step.wax .d-step-heading h3 { color: var(--scene-accent); }
.wp-z.wp-z #mc-wash-programs .d-step .d-step-heading > p { color: var(--scene-ink); text-shadow: 0 0 12px var(--scene-paper); }
.wp-z.wp-z #mc-wash-programs .d-step .d-step-copy > p,
.wp-z.wp-z #mc-wash-programs .d-step .d-methods p { color: var(--scene-ink); }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-step::before,
  .wp-z.wp-z #mc-wash-programs .d-step.rinse::before,
  .wp-z.wp-z #mc-wash-programs .d-step.finish::before { background-image: linear-gradient(90deg, var(--scene-veil-near), var(--scene-veil-far)), var(--scene-photo); background-position: 40% center; }
}
.wp-z.wp-z #mc-wash-programs .d-mcwp-digit { font-family: var(--font-display); }
/* верх раздела под заголовок 52px: пояснение — сразу под заголовком (в пакете стояло на высоте 348px под заголовок 110px),
   высота блока — по тексту: пульт (36% ширины, кадр 2 : 3, снизу 100px) начинается под пояснением, машина — за ним */
.wp-z.wp-z #mc-wash-programs .d-lead { position: relative; left: auto; top: auto; margin: calc(20px / var(--z)) 5% 0; }
/* шире 1024px высоту верха задают правила пакета «Широкие экраны» (с 2026-10-20) — пульт и машина и так начинаются под текстом */
@container mcwp (min-width: 651px) and (max-width: 1024px) {
  .wp-z.wp-z #mc-wash-programs .d-hero {
    --wp-head: calc(66px + 24px / var(--z) + (1.08 * clamp(34px, 3.6vw, 52px) + 20px + 82px) / var(--z));
    min-height: calc(var(--wp-head) + 54cqw + 110px);
  }
}
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-lead { margin: 20px 6% 0; }
}

/* ---------- подписи слоёв над машиной (в пакете с 2026-10-20: «Защитная плёнка», «Очищенная вода», «Активная пена») ----------
   малое слово — надпись сайта (Inter 600 прописными, 12px), крупное — Manrope 600 30px (на телефоне 21px), как подписи серий */
.wp-z.wp-z #mc-wash-programs .d-layer-kicker { font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; color: var(--d-ink); }
.wp-z.wp-z #mc-wash-programs .d-layer-word { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-layer-word { font-size: 21px; }
}

/* ---------- заголовки блоков — шкала сайта ---------- */
.wp-z.wp-z #mc-wash-programs .d-opening h3,
.wp-z.wp-z #mc-wash-programs .d-engineering-intro h3 { font-size: calc(clamp(34px, 3.6vw, 52px) / var(--z)); line-height: 1.08; }
.wp-z.wp-z #mc-wash-programs .d-pause h3 { font-size: calc(30px / var(--z)); line-height: 1.12; }
.wp-z.wp-z #mc-wash-programs .d-step-copy > h4,
.wp-z.wp-z #mc-wash-programs .d-systems h4 { font-size: calc(21px / var(--z)); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.wp-z.wp-z #mc-wash-programs .d-methods h4 { font-size: calc(17px / var(--z)); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.wp-z.wp-z #mc-wash-programs .d-live-title { font-family: var(--font-display); font-weight: 700; font-size: calc(21px / var(--z)); line-height: 1.25; letter-spacing: -0.02em; }
.wp-z.wp-z #mc-wash-programs .d-finale figcaption > strong { font-family: var(--font-display); font-weight: 600; font-size: calc(34px / var(--z)); line-height: 1.05; letter-spacing: -0.03em; }

/* ---------- текст ---------- */
.wp-z.wp-z #mc-wash-programs .d-lead,
.wp-z.wp-z #mc-wash-programs .d-opening p,
.wp-z.wp-z #mc-wash-programs .d-engineering-intro > p { font-size: calc(17px / var(--z)); line-height: 1.6; }
.wp-z.wp-z #mc-wash-programs .d-lead,
.wp-z.wp-z #mc-wash-programs .d-opening p { color: var(--d-grey); }
.wp-z.wp-z #mc-wash-programs .d-step-heading > p,
.wp-z.wp-z #mc-wash-programs .d-step-copy > p,
.wp-z.wp-z #mc-wash-programs .d-pause > p,
.wp-z.wp-z #mc-wash-programs .d-live-body,
.wp-z.wp-z #mc-wash-programs .d-live-hint,
.wp-z.wp-z #mc-wash-programs .d-systems p,
.wp-z.wp-z #mc-wash-programs .d-footer { font-size: calc(15px / var(--z)); line-height: 1.55; }
.wp-z.wp-z #mc-wash-programs .d-step-heading > p,
.wp-z.wp-z #mc-wash-programs .d-step-copy > p,
.wp-z.wp-z #mc-wash-programs .d-pause > p,
.wp-z.wp-z #mc-wash-programs .d-live-body,
.wp-z.wp-z #mc-wash-programs .d-live-hint { color: var(--d-grey); }
.wp-z.wp-z #mc-wash-programs .d-methods p { font-size: calc(14px / var(--z)); line-height: 1.5; }

/* ---------- подписи: красные номера этапов, технологии, мелкие строки ---------- */
.wp-z.wp-z #mc-wash-programs .d-step-heading > span,
.wp-z.wp-z #mc-wash-programs .d-live-label { font-family: var(--font-sans); font-size: calc(13px / var(--z)); font-weight: 600; line-height: 1.4; letter-spacing: .1em; }
.wp-z.wp-z #mc-wash-programs .d-step-copy .d-tech,
.wp-z.wp-z #mc-wash-programs .d-live-tech,
.wp-z.wp-z #mc-wash-programs .d-methods h4 span { font-family: var(--font-sans); font-size: calc(13px / var(--z)); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.wp-z.wp-z #mc-wash-programs .d-pause-mark { font-size: calc(12px / var(--z)); font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--d-ink); }
.wp-z.wp-z #mc-wash-programs .d-invitation > span,
.wp-z.wp-z #mc-wash-programs .d-live-caption,
.wp-z.wp-z #mc-wash-programs .d-live-toolbar,
.wp-z.wp-z #mc-wash-programs .d-finale figcaption { font-size: calc(13px / var(--z)); }
.wp-z.wp-z #mc-wash-programs .d-live-status { font-size: calc(12px / var(--z)); font-weight: 600; letter-spacing: .16em; }

/* ---------- кнопки ---------- */
/* «Живой пульт» — круглая металлическая кнопка, как кнопки программ на пульте; по ободку бежит красный огонёк, при наведении
   горит весь ободок (владелец 2026-10-21: красная «Включить живой пульт →» «мне не нравится» → из вариантов выбран 2 «Кнопка,
   как на пульте» → из его развитий 2.3 «Бегущий огонёк»). Разметка внутри кнопки пакета — scratchpad wash/adapt-enter.cjs. */
.wp-z.wp-z #mc-wash-programs .d-invitation { gap: 18px; }
.wp-z.wp-z #mc-wash-programs .d-enter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--d-ink) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px !important;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wp-z.wp-z #mc-wash-programs .d-enter:focus-visible { outline: 2px solid var(--d-red); outline-offset: 6px; border-radius: 40px; }
.wp-z.wp-z #mc-wash-programs .d-enter-disk {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #3a4048;
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #e7e9eb 38%, #b9bec4 78%, #9aa0a7 100%);
  box-shadow: 0 0 0 4px #1b1e23, 0 6px 14px -4px rgba(15, 20, 32, .45), inset 0 -3px 6px rgba(0, 0, 0, .18), inset 0 2px 2px rgba(255, 255, 255, .9);
  transition: transform .12s ease, box-shadow .2s ease;
}
.wp-z.wp-z #mc-wash-programs .d-enter-disk svg { width: 20px; height: 20px; }
/* бегущий огонёк — красная дуга на кольце вокруг ободка */
.wp-z.wp-z #mc-wash-programs .d-enter-disk::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(#ff3b40 0deg, rgba(227, 30, 36, .9) 50deg, rgba(227, 30, 36, 0) 120deg, rgba(227, 30, 36, 0) 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: mcwp-orbit 1.6s linear infinite;
}
@keyframes mcwp-orbit { to { transform: rotate(360deg); } }
.wp-z.wp-z #mc-wash-programs .d-enter:hover .d-enter-disk::before,
.wp-z.wp-z #mc-wash-programs .d-enter:focus-visible .d-enter-disk::before { animation: none; background: var(--d-red); }
.wp-z.wp-z #mc-wash-programs .d-enter:hover .d-enter-disk { transform: translateY(-1px); }
.wp-z.wp-z #mc-wash-programs .d-enter:active .d-enter-disk { transform: translateY(1px) scale(.97); box-shadow: 0 0 0 4px #1b1e23, 0 2px 6px -2px rgba(15, 20, 32, .45), inset 0 3px 6px rgba(0, 0, 0, .25); }
.wp-z.wp-z #mc-wash-programs .d-enter-t { display: flex; flex-direction: column; gap: 2px; }
.wp-z.wp-z #mc-wash-programs .d-enter-t b { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; color: var(--d-ink); }
.wp-z.wp-z #mc-wash-programs .d-enter-t span { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--d-grey); }
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .d-enter-disk::before { animation: none; } }
/* «Четыре программы одной системы», «Вернуться к обзору» — та же кнопка, с обводкой (как .btn-ghost, на светлом) */
.wp-z.wp-z #mc-wash-programs .d-hero-foot > a,
.wp-z.wp-z #mc-wash-programs .d-leave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px / var(--z));
  max-width: none;
  min-height: 0;
  padding: calc(14.4px / var(--z)) calc(25.6px / var(--z));
  border: 1px solid rgba(15, 20, 32, .2);
  border-radius: calc(12px / var(--z));
  background: transparent;
  color: var(--d-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(15.2px / var(--z)) !important;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: transform .25s var(--ease-out-quart), border-color .25s ease, background-color .25s ease;
}
.wp-z.wp-z #mc-wash-programs .d-hero-foot > a:hover,
.wp-z.wp-z #mc-wash-programs .d-leave:hover { border-color: rgba(15, 20, 32, .45); background: rgba(15, 20, 32, .03); color: var(--d-ink); transform: translateY(-2px); }
/* «Как работают технологии» — .btn-ghost на тёмном низу раздела */
.wp-z.wp-z #mc-wash-programs .d-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px / var(--z));
  padding: calc(14.4px / var(--z)) calc(25.6px / var(--z));
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: calc(12px / var(--z));
  color: #fff;
  font-weight: 600;
  font-size: calc(15.2px / var(--z));
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .25s var(--ease-out-quart), border-color .25s ease, background-color .25s ease;
}
.wp-z.wp-z #mc-wash-programs .d-footer a:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); color: #fff; transform: translateY(-2px); }
.wp-z.wp-z #mc-wash-programs .d-leave svg,
.wp-z.wp-z #mc-wash-programs .d-footer a svg { width: calc(16px / var(--z)); height: calc(16px / var(--z)); }
/* «Этот этап подробнее», «Вернуться к живому пульту» — красная ссылка, как «Подробнее →» в карточках */
.wp-z.wp-z #mc-wash-programs .d-program-link,
.wp-z.wp-z #mc-wash-programs .d-return-live {
  display: inline-flex;
  align-items: center;
  gap: calc(6px / var(--z));
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--d-red) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(15px / var(--z)) !important;
  line-height: 1.4;
}
.wp-z.wp-z #mc-wash-programs .d-program-link:hover,
.wp-z.wp-z #mc-wash-programs .d-return-live:hover { text-decoration: underline; text-underline-offset: 3px; }
.wp-z.wp-z #mc-wash-programs .d-page a:focus-visible,
.wp-z.wp-z #mc-wash-programs .d-page button:focus-visible { outline: 2px solid var(--d-red); outline-offset: 3px; }

/* ---------- исполнение пульта — клавиши как «Модель» на страницах товара (.oc-k) ---------- */
.wp-z.wp-z #mc-wash-programs .d-model-picker { flex: 0 1 auto; min-width: 0; }
.wp-z.wp-z #mc-wash-programs .mc-opt-l { display: block; margin-bottom: calc(7px / var(--z)); font-size: calc(13px / var(--z)); line-height: 1.3; color: var(--d-grey); }
.wp-z.wp-z #mc-wash-programs .mc-keys { display: flex; flex-wrap: wrap; gap: calc(6px / var(--z)); }
.wp-z.wp-z #mc-wash-programs .mc-k {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(36px / var(--z));
  padding: calc(6px / var(--z)) calc(13px / var(--z));
  border: 1px solid rgba(15, 20, 32, .2);
  border-radius: calc(10px / var(--z));
  background: #fff;
  color: var(--d-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(14px / var(--z));
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.wp-z.wp-z #mc-wash-programs .mc-k::before { content: ""; position: absolute; inset: -4px 0; }
.wp-z.wp-z #mc-wash-programs .mc-k:hover { border-color: var(--d-ink); }
.wp-z.wp-z #mc-wash-programs .mc-k.on { border-color: var(--d-ink); background: var(--d-ink); color: #fff; }
.wp-z.wp-z #mc-wash-programs .mc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- планшет и телефон (композиция пакета до 850 / 650px) ---------- */
@container mcwp (max-width: 850px) {
  .wp-z.wp-z #mc-wash-programs .d-model-picker { display: block; }
}
@container mcwp (max-width: 650px) {
  /* низ обзора: кнопки друг под другом во всю ширину строки, «Включить живой пульт» — в одну строку */
  .wp-z.wp-z #mc-wash-programs .d-hero-foot { flex-direction: column; align-items: flex-start; }
  .wp-z.wp-z #mc-wash-programs .d-invitation { max-width: none; }
  .wp-z.wp-z #mc-wash-programs .d-hero-foot > a { white-space: nowrap; }
  /* живой пульт: надпись, клавиши исполнения и «Вернуться к обзору» — друг под другом */
  .wp-z.wp-z #mc-wash-programs .d-live-toolbar { grid-template-columns: 1fr; }
  .wp-z.wp-z #mc-wash-programs .d-live-status { max-width: none; letter-spacing: .1em; }
  .wp-z.wp-z #mc-wash-programs .d-leave { grid-row: 3; justify-self: start; max-width: none; }
  .wp-z.wp-z #mc-wash-programs .d-footer a { margin-top: 20px; }
}
/* самые узкие телефоны (320px): длинные кнопки переносятся, а не выходят за край */
@container mcwp (max-width: 360px) {
  .wp-z.wp-z #mc-wash-programs .d-hero-foot > a,
  .wp-z.wp-z #mc-wash-programs .d-footer a { white-space: normal; }
}

/* ---------- выбор пульта под фото пульта — «Линейка» (владелец 2026-10-21: «здесь нужно сделать выбор пультов управления…» →
   «вариант 4») ----------
   Три пульта в ряд, имя и назначение, у выбранного — красная черта над именем (как в буклетах владельца). Строка стоит между
   подписью под фото и «Включить живой пульт»; имя и назначение уже в строке — подпись под фото не повторяется. Выбор идёт через
   скрытый список пакета: скрипт пакета сам меняет фото и подпись, живой пульт открывается с выбранным пультом.
   Пульт, сцена и подписи слоёв поднимаются на --pick (считает скрипт страницы: не меньше высоты строки выбора, на телефоне — так,
   чтобы видимый низ пульта был на 20px выше строки), высота верха растёт на столько же — композиция над строкой прежняя. */
.wp-z.wp-z #mc-wash-programs .d-invitation { max-width: none; }
.wp-z.wp-z #mc-wash-programs .d-invitation > span[data-overview-caption] { display: none; }
.wp-z.wp-z #mc-wash-programs .d-terminal-angle,
.wp-z.wp-z #mc-wash-programs .d-world,
.wp-z.wp-z #mc-wash-programs .d-layer-map { margin-bottom: var(--pick, 0px); }
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(max(1090px, 58.8cqw + 400px) + var(--pick, 0px)); } }
@container mcwp (min-width: 651px) and (max-width: 1024px) { .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(var(--wp-head) + 54cqw + 110px + var(--pick, 0px)); } }
@container mcwp (max-width: 650px) { .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(920px + var(--pick, 0px)); } }
.wp-z.wp-z #mc-wash-programs .pk-line { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; }
.wp-z.wp-z #mc-wash-programs .pk-line button { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-z.wp-z #mc-wash-programs .pk-line button:focus-visible { outline: 2px solid var(--d-red); outline-offset: 3px; }
.wp-z.wp-z #mc-wash-programs .pk-line .ph { display: flex; align-items: flex-end; height: 112px; margin-bottom: 12px; }
.wp-z.wp-z #mc-wash-programs .pk-line .ph img { display: block; height: 100%; width: auto; filter: drop-shadow(3px 6px 4px #2b343820); opacity: .42; transition: opacity .2s; }
.wp-z.wp-z #mc-wash-programs .pk-line b { position: relative; padding-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; color: #6b7486; transition: color .2s; }
.wp-z.wp-z #mc-wash-programs .pk-line b::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: transparent; transition: background-color .2s; }
.wp-z.wp-z #mc-wash-programs .pk-line .rl { font-family: var(--font-sans); font-size: 12px; line-height: 1.35; color: #6b7486; white-space: nowrap; }
@media (hover: hover) { .wp-z.wp-z #mc-wash-programs .pk-line button:hover .ph img { opacity: .75; } }
.wp-z.wp-z #mc-wash-programs .pk-line button.on .ph img { opacity: 1; }
.wp-z.wp-z #mc-wash-programs .pk-line button.on b { color: #0f1420; }
.wp-z.wp-z #mc-wash-programs .pk-line button.on b::before { background: var(--d-red); }
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .pk-line .ph { height: clamp(112px, 8cqw, 170px); } }
@container mcwp (max-width: 650px) {
  /* выбор и кнопки — на ровном фоне страницы, сцена заканчивается над ними */
  .wp-z.wp-z #mc-wash-programs .d-hero-foot { background: linear-gradient(180deg, rgba(250, 251, 249, 0), #fafbf9 24px); }
  .wp-z.wp-z #mc-wash-programs .pk-line { gap: 20px; }
  .wp-z.wp-z #mc-wash-programs .pk-line .ph { height: 92px; }
}
/* узкие телефоны: назначение переносится, а не выходит за край */
@container mcwp (max-width: 380px) {
  .wp-z.wp-z #mc-wash-programs .pk-line { gap: 14px; }
  .wp-z.wp-z #mc-wash-programs .pk-line .rl { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .pk-line * { transition: none !important; } }

/* ---------- пульт в верху раздела крупнее на четверть (владелец 2026-10-21: «пульты сделай больше по размеру») ----------
   ширина фото пульта ×1,25 во всех исполнениях; верх раздела выше на столько же, насколько выросла высота пульта
   (пульт стоит от низа раздела) — над ним остаётся прежний текст. */
@container mcwp (min-width: 1025px) {
  .wp-z.wp-z #mc-wash-programs .d-terminal-angle { width: max(461px, 30cqw); }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=slimline] .d-terminal-angle { width: max(359px, 27.5cqw); }
}
@container mcwp (min-width: 651px) and (max-width: 1024px) {
  .wp-z.wp-z #mc-wash-programs .d-terminal-angle { width: 45%; }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=slimline] .d-terminal-angle { width: 35%; }
  /* +24px — воздух между пояснением над пультом и крупным пультом */
  .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(var(--wp-head) + 67.5cqw + 134px + var(--pick, 0px)); }
}
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-terminal-angle { width: 80%; }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=slimline] .d-terminal-angle { width: 70%; }
  .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(920px + 18cqw + var(--pick, 0px)); }
}

/* ---------- программы 01–04: «окно» — подложка стоит, маска, номер и текст едут с полосой ----------
   Владелец 2026-10-21: прокрутка как на старом сайте (old.magicclean.pro/carwash.html#programs: фото программы неподвижно, секция
   едет над ним) → «вариант 1, но нужно чтобы двигалась только цветная маска с номером программы и текстом» → фоны из его комплекта
   «Фоны-программ-комплект» → «цифры должны быть прозрачными и открывать фон подложку» → «убери вшитую в подложку дымку» → «убери
   размытие, сделай прозрачность выше» → «A». Слои полосы:
   — .d-step::before — чистая подложка программы (пена + фото в блоке цифры, как в пакете, без дымки; /assets/wash-fony/tall-hr-*,
     16:9; с 2026-10-22 — кадры высокого разрешения из «Прежние-кадры-3440», без растяжения, cover по центру блока цифры) — position: fixed на весь экран, обрезана полосой (clip-path) → стоит неподвижно, её держит браузер;
   — .d-step::after — маска: едва заметный цвет программы (светлый тон в режиме multiply — кадр не закрывается), прикреплена к
     полосе; у 04 маски нет («маску сделай едва заметной цветом, прозрачность при этом сохрани» → «2, на 4 программе маску не делай»);
   — номер 01–04 — окно в маске: залит той же подложкой, закреплённой к экрану (background-attachment: fixed, cover) → через цифры
     подложка видна без маски; тонкий белый контур номера — слой ::after с SVG-фильтром кольца. Телефон: подложка — фото программы (/assets/wash-fony/ph-*) на весь экран, маска по вертикали. */
/* 01 — кадр на весь экран из серии «Новые-фото-3440» (владелец 2026-10-22: «…Новые-фото-3440PNG-3440x1440 поставь первой»):
   передок в густой пене, 3440 × 1440 — вместо подложки «пена + фото в блоке цифры» */
.wp-z.wp-z #mc-wash-programs .d-step.d-step.clean { --bg-img: url("/assets/wash-fony/new-01-clean-2560.webp"); --dig: url("/assets/wash-fony/new-01-clean-2560.webp"); --tint: #f1e5df; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step.rinse { --bg-img: url("/assets/wash-fony/tall-hr-02-rinse-2560.webp"); --dig: url("/assets/wash-fony/ph-hr-02-rinse.webp"); --tint: #deebf1; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step.wax { --bg-img: url("/assets/wash-fony/tall-hr-03-wax-2560.webp"); --dig: url("/assets/wash-fony/ph-hr-03-wax.webp"); --tint: #efe2c9; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step.finish { --bg-img: url("/assets/wash-fony/tall-hr-04-finish-2560.webp"); --dig: url("/assets/wash-fony/ph-hr-04-finish.webp"); --tint: transparent; }
/* мониторы шире 2000px — подложки 3840 */
@media (min-width: 2001px) {
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.clean { --bg-img: url("/assets/wash-fony/new-01-clean-3440.webp"); }
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.rinse { --bg-img: url("/assets/wash-fony/tall-hr-02-rinse.webp"); }
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.wax { --bg-img: url("/assets/wash-fony/tall-hr-03-wax.webp"); }
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.finish { --bg-img: url("/assets/wash-fony/tall-hr-04-finish.webp"); }
}
.wp-z.wp-z #mc-wash-programs .d-step.d-step { background: none; clip-path: inset(0 calc(-1 * var(--wp-br, 0px)) 0 calc(-1 * var(--wp-bl, 0px))); }
.wp-z.wp-z #mc-wash-programs .d-step.d-step::before,
.wp-z.wp-z #mc-wash-programs .d-step.d-step.is-active::before {
  content: ""; position: fixed; left: 0; top: 0; right: auto; bottom: auto; width: var(--vw, 100vw); height: 100vh; height: 100lvh; z-index: -2;
  background-color: #fafbf9; background-image: var(--bg-img); background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: none; pointer-events: none;
}
.wp-z.wp-z #mc-wash-programs .d-step.d-step::after {
  content: ""; display: block; position: absolute; top: 0; bottom: 0; height: auto; left: calc(-1 * var(--wp-bl, 0px)); right: calc(-1 * var(--wp-br, 0px)); width: auto;
  z-index: -2; pointer-events: none; mix-blend-mode: multiply; background: var(--tint);
}
/* 04 «Завершить» — без маски (владелец 2026-10-21: «на 4 программе маску не делай») */
.wp-z.wp-z #mc-wash-programs .d-step.d-step.finish::after { display: none; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step .d-mcwp-digit {
  background-color: transparent; background-image: var(--bg-img); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
  mix-blend-mode: normal; opacity: 1; filter: none; -webkit-text-stroke: 0;
}
/* контур номера — отдельный слой (тот же номер белым), SVG-фильтр #mc-digit-ring (страница) оставляет только кольцо 2px по
   внешнему краю цифр. Не обводка текста: у переменного шрифта внутри цифр контуры частей накладываются, и обводка рисует их
   шипами на стыках; не тень и не фильтр на самом номере — с ними браузер перестаёт закреплять фото в номере (окно съезжает). */
.wp-z.wp-z #mc-wash-programs .d-step.d-step .d-mcwp-digit::after {
  position: absolute; inset: 0; display: flex; align-items: inherit; justify-content: inherit;
  color: #fff; -webkit-text-fill-color: #fff; background: none; filter: url(#mc-digit-ring); opacity: .9; pointer-events: none;
}
.wp-z.wp-z #mc-wash-programs .d-step.d-step.clean .d-mcwp-digit::after { content: "01"; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step.rinse .d-mcwp-digit::after { content: "02"; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step.wax .d-mcwp-digit::after { content: "03"; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step.finish .d-mcwp-digit::after { content: "04"; }
.wp-z.wp-z #mc-wash-programs .d-step.d-step .d-mcwp-art::before { display: none; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-step.d-step::before,
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.is-active::before { background-image: var(--dig); background-position: 40% center; }
  .wp-z.wp-z #mc-wash-programs .d-step.d-step .d-mcwp-digit { background-image: var(--dig); background-position: 40% center; }
  /* 01: широкий кадр — на телефоне в кадре фара (правее центра) */
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.clean::before,
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.clean.is-active::before,
  .wp-z.wp-z #mc-wash-programs .d-step.d-step.clean .d-mcwp-digit { background-position: 66% center; }
}

/* ── Полосы программ: номер-счётчик, название, подписи колонками (владелец 2026-10-22: по образцу старого сайта — «Программа»,
   крупное название, переключатели способа; из 17 концепций «16 подписи и 17», счётчик «сначала 1 на первой программе, на второй
   1 сменяется на 2 и так далее» → «2, выкладывай на тест»). Разметка — adapt-steps.cjs (блок .kx в каждой .d-step, цифры-окна
   больше нет), поведение — скрипт в wash-programs.astro: .kx-js на разделе, .in — полоса появилась, .go — номер сменился на свой.
   Без скрипта всё видно сразу и номера стоят свои. Подложка, маска и прозрачность полос — правила выше, не менялись. ── */
.wp-z.wp-z #mc-wash-programs .d-step.d-step { min-height: 0; align-content: start; }
.wp-z.wp-z #mc-wash-programs .kx { grid-column: 1 / -1; min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(18px, 2.2cqw, 40px); padding-block: clamp(10px, 1.6cqw, 30px); color: var(--scene-ink, #0f1420); }
.wp-z.wp-z #mc-wash-programs .kx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.wp-z.wp-z #mc-wash-programs .kx-label { font: 600 13px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--scene-ink, #0f1420); }
.wp-z.wp-z #mc-wash-programs .kx-label b { font-weight: 600; color: var(--scene-accent, #e31e24); }
/* переключатели способа у 01 — клавиши сайта; выбранный способ ярче, второй бледнее */
.wp-z.wp-z #mc-wash-programs .kx-tg { display: flex; gap: 8px; flex-wrap: wrap; }
.wp-z.wp-z #mc-wash-programs .kx-k { min-height: 40px; padding: 8px 16px; border: 1px solid rgba(15, 20, 32, .28); border-radius: 10px; background: rgba(255, 255, 255, .75); color: #0f1420; font: 800 14px/1.2 var(--font-display); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.wp-z.wp-z #mc-wash-programs .kx-k:hover { border-color: #0f1420; }
.wp-z.wp-z #mc-wash-programs .kx-k.on { background: #0f1420; border-color: #0f1420; color: #fff; }
.wp-z.wp-z #mc-wash-programs .kx-k:focus-visible { outline: 2px solid #e31e24; outline-offset: 2px; }
/* номер-счётчик и название */
.wp-z.wp-z #mc-wash-programs .kx-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(18px, 2.6cqw, 48px); row-gap: 8px; align-items: end; }
.wp-z.wp-z #mc-wash-programs .kx-odo { display: flex; grid-row: 1 / span 2; font: 700 clamp(84px, 12.5cqw, 240px)/1 var(--font-display); letter-spacing: -.04em; color: var(--scene-ink, #0f1420); }
/* светлый ореол номера — по контуру цифр (drop-shadow на всём номере): тень текста у цифр обрезалась окошками прокрутки
   (.kx-od, overflow: hidden) и давала светлый прямоугольник под номером (владелец 2026-10-22: «почему под цифрами какая то маска
   прямоугольная?») */
.wp-z.wp-z #mc-wash-programs .kx-odo { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--scene-paper, #fff) 85%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, var(--scene-paper, #fff) 70%, transparent)); }
.wp-z.wp-z #mc-wash-programs .kx-od { display: block; height: .82em; overflow: hidden; margin-right: -.03em; }
.wp-z.wp-z #mc-wash-programs .kx-os { display: flex; flex-direction: column; }
.wp-z.wp-z #mc-wash-programs .kx-os i { display: block; height: .82em; line-height: .82; font-style: normal; }
.wp-z.wp-z #mc-wash-programs .kx-d { transform: translateY(calc(var(--to) * -.82em)); transition: transform .75s cubic-bezier(.2, .75, .15, 1); }
.wp-z.wp-z #mc-wash-programs.kx-js .kx-d { transform: translateY(calc(var(--from) * -.82em)); }
.wp-z.wp-z #mc-wash-programs.kx-js .kx.go .kx-d { transform: translateY(calc(var(--to) * -.82em)); }
.wp-z.wp-z #mc-wash-programs.kx-js .kx[data-k="clean"] .kx-odo { opacity: 0; transition: opacity .5s ease; }
.wp-z.wp-z #mc-wash-programs.kx-js .kx[data-k="clean"].go .kx-odo { opacity: 1; }
.wp-z.wp-z #mc-wash-programs .kx-name { grid-column: 2; margin: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 5.4cqw, 104px); line-height: .92; letter-spacing: -.025em; color: var(--scene-ink, #0f1420); text-shadow: 0 0 24px var(--scene-paper, #fff), 0 2px 8px var(--scene-paper, #fff); }
.wp-z.wp-z #mc-wash-programs .kx-sub { grid-column: 2; display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--scene-ink, #0f1420); }
.wp-z.wp-z #mc-wash-programs .kx-sub i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--scene-accent, #e31e24); }
/* подписи — строка таблицы: верхняя линия и линии между колонками */
.wp-z.wp-z #mc-wash-programs .kx-cols { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.wp-z.wp-z #mc-wash-programs .kx-cols.has-tg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-z.wp-z #mc-wash-programs .kx-cols::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--scene-ink, #0f1420); opacity: .35; transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .2s; }
.wp-z.wp-z #mc-wash-programs .kx-col { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px clamp(18px, 1.8cqw, 32px) 6px; transition: opacity .3s ease; }
.wp-z.wp-z #mc-wash-programs .kx-col:first-child { padding-left: 0; }
.wp-z.wp-z #mc-wash-programs .kx-col + .kx-col::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--scene-ink, #0f1420); opacity: .3; transform-origin: 50% 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .5s; }
.wp-z.wp-z #mc-wash-programs .kx-col h4 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; color: var(--scene-ink, #0f1420); }
.wp-z.wp-z #mc-wash-programs .kx-col p { margin: 0; font: 500 15px/1.55 var(--font-sans); color: var(--scene-ink, #0f1420); }
.wp-z.wp-z #mc-wash-programs .kx-col p.kx-intro { margin-top: 6px; opacity: .85; }
.wp-z.wp-z #mc-wash-programs .kx-t { font: 600 13px/1.3 var(--font-sans); color: var(--scene-accent, #e31e24); }
.wp-z.wp-z #mc-wash-programs .kx-cols[data-sel="0"] .kx-m[data-col="1"],
.wp-z.wp-z #mc-wash-programs .kx-cols[data-sel="1"] .kx-m[data-col="0"] { opacity: .55; }
/* текст читается на чётком фото — ореол цветом среды программы */
.wp-z.wp-z #mc-wash-programs .kx-label, .wp-z.wp-z #mc-wash-programs .kx-sub, .wp-z.wp-z #mc-wash-programs .kx-t,
.wp-z.wp-z #mc-wash-programs .kx-col h4, .wp-z.wp-z #mc-wash-programs .kx-col p {
  text-shadow: 0 0 1px var(--scene-paper, #fff), 0 0 2px var(--scene-paper, #fff), 0 0 3px var(--scene-paper, #fff), 0 0 6px var(--scene-paper, #fff), 0 0 6px var(--scene-paper, #fff), 0 0 14px var(--scene-paper, #fff), 0 0 28px var(--scene-paper, #fff);
}
/* появление полосы (только со скриптом): надпись и подписи поднимаются, линии прочерчиваются */
.wp-z.wp-z #mc-wash-programs.kx-js .kx-top, .wp-z.wp-z #mc-wash-programs.kx-js .kx-cols { opacity: 0; transform: translateY(24px); transition: opacity .8s ease .25s, transform .8s cubic-bezier(.2, .7, .2, 1) .25s; }
.wp-z.wp-z #mc-wash-programs.kx-js .kx.in .kx-top, .wp-z.wp-z #mc-wash-programs.kx-js .kx.in .kx-cols { opacity: 1; transform: none; }
.wp-z.wp-z #mc-wash-programs.kx-js .kx-cols::before { transform: scaleX(0); }
.wp-z.wp-z #mc-wash-programs.kx-js .kx-col + .kx-col::before { transform: scaleY(0); }
.wp-z.wp-z #mc-wash-programs.kx-js .kx.in .kx-cols::before, .wp-z.wp-z #mc-wash-programs.kx-js .kx.in .kx-col + .kx-col::before { transform: none; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .kx-head { grid-template-columns: minmax(0, 1fr); }
  .wp-z.wp-z #mc-wash-programs .kx-odo { grid-row: auto; font-size: 92px; }
  .wp-z.wp-z #mc-wash-programs .kx-name, .wp-z.wp-z #mc-wash-programs .kx-sub { grid-column: 1; }
  /* самое длинное слово — «ОПОЛАСКИВАНИЕ» — должно вставать в строку целиком */
  .wp-z.wp-z #mc-wash-programs .kx-name { font-size: clamp(26px, 8.4cqw, 52px); }
  .wp-z.wp-z #mc-wash-programs .kx-cols, .wp-z.wp-z #mc-wash-programs .kx-cols.has-tg { grid-template-columns: 1fr; }
  .wp-z.wp-z #mc-wash-programs .kx-col, .wp-z.wp-z #mc-wash-programs .kx-col:first-child { padding: 16px 0 6px; }
  .wp-z.wp-z #mc-wash-programs .kx-col + .kx-col::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; transform-origin: 0 50%; }
  .wp-z.wp-z #mc-wash-programs.kx-js .kx-col + .kx-col::before { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-z.wp-z #mc-wash-programs .kx-d { transition: none; }
  .wp-z.wp-z #mc-wash-programs.kx-js .kx-top, .wp-z.wp-z #mc-wash-programs.kx-js .kx-cols,
  .wp-z.wp-z #mc-wash-programs.kx-js .kx-cols::before, .wp-z.wp-z #mc-wash-programs.kx-js .kx-col + .kx-col::before { opacity: 1; transform: none; transition: none; }
}

/* ── Стекло под подписями (владелец 2026-10-22, снимок строки «Очистить. / Активный шампунь / Горячая пена» над фарой:
   «под надписями сделай маску полупрозрачное стекло»): строка подписей — матовое стекло: размытый фон за ней и светлый тон
   цвета программы. На стекле ореол у текста не нужен. Остальное в полосе (номер, название, фото) — как было. ── */
.wp-z.wp-z #mc-wash-programs .kx-cols {
  background: color-mix(in srgb, var(--scene-paper, #fff) 46%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -20px rgba(15, 20, 32, .4);
}
.wp-z.wp-z #mc-wash-programs .kx-col { padding: 22px clamp(18px, 1.8cqw, 32px) 24px; }
.wp-z.wp-z #mc-wash-programs .kx-col:first-child { padding-left: clamp(18px, 1.8cqw, 32px); }
.wp-z.wp-z #mc-wash-programs .kx-cols .kx-t, .wp-z.wp-z #mc-wash-programs .kx-cols .kx-col h4, .wp-z.wp-z #mc-wash-programs .kx-cols .kx-col p { text-shadow: none; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .kx-col, .wp-z.wp-z #mc-wash-programs .kx-col:first-child { padding: 16px 16px 14px; }
  .wp-z.wp-z #mc-wash-programs .kx-col + .kx-col::before { left: 16px; right: 16px; }
}
/* номер возвращается к предыдущему без анимации, пока программа за нижним краем экрана (скрипт: .kx-still) */
.wp-z.wp-z #mc-wash-programs .kx.kx-still .kx-d, .wp-z.wp-z #mc-wash-programs .kx.kx-still .kx-odo { transition: none !important; }

/* ── Стекло под подписями с мягкими краями (владелец 2026-10-22: «сделай полупрозрачность под надписями с размытыми плавными
   переходами»): стекло — отдельный слой .kx-cols::after чуть шире строки подписей, к краям плавно растворяется (маска из двух
   градиентов), без рамки и тени. Строка при появлении только поднимается, а проявляются текст и стекло — прозрачность на самой
   строке выключила бы размытие под стеклом на время появления. ── */
.wp-z.wp-z #mc-wash-programs .kx-cols { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; --gx: 44px; --gy: 30px; }
.wp-z.wp-z #mc-wash-programs .kx-cols::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--gy)); bottom: calc(-1 * var(--gy)); left: calc(-1 * var(--gx)); right: calc(-1 * var(--gx));
  background: color-mix(in srgb, var(--scene-paper, #fff) 48%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--gx) * 1.5), #000 calc(100% - var(--gx) * 1.5), transparent), linear-gradient(180deg, transparent, #000 calc(var(--gy) * 1.5), #000 calc(100% - var(--gy) * 1.5), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 calc(var(--gx) * 1.5), #000 calc(100% - var(--gx) * 1.5), transparent), linear-gradient(180deg, transparent, #000 calc(var(--gy) * 1.5), #000 calc(100% - var(--gy) * 1.5), transparent);
  mask-composite: intersect;
  transition: opacity .8s ease .25s;
}
.wp-z.wp-z #mc-wash-programs.kx-js .kx-cols { opacity: 1; }
.wp-z.wp-z #mc-wash-programs.kx-js .kx:not(.in) .kx-col, .wp-z.wp-z #mc-wash-programs.kx-js .kx:not(.in) .kx-cols::after { opacity: 0; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .kx-cols { --gx: 18px; --gy: 20px; }
}

/* ── Стекло под подписями — слабее и незаметнее (владелец 2026-10-22: «ослабь непрозрачность и сделай еще плавнее, чтобы было
   незаметно»): тон 48 → 24 %, размытие 14 → 10 px, слой шире (120/60 px за строкой), края растворяются на 1,6 своей ширины по
   плавной кривой (несколько точек градиента вместо прямой). Тексту — лёгкий ореол цветом среды. ── */
.wp-z.wp-z #mc-wash-programs .kx-cols { --gx: 120px; --gy: 60px; }
.wp-z.wp-z #mc-wash-programs .kx-cols::after {
  --fx: calc(var(--gx) * 1.6); --fy: calc(var(--gy) * 1.6);
  background: color-mix(in srgb, var(--scene-paper, #fff) 24%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .06) calc(var(--fx) * .2), rgba(0, 0, 0, .25) calc(var(--fx) * .42), rgba(0, 0, 0, .55) calc(var(--fx) * .64), rgba(0, 0, 0, .85) calc(var(--fx) * .84), #000 var(--fx), #000 calc(100% - var(--fx)), rgba(0, 0, 0, .85) calc(100% - var(--fx) * .84), rgba(0, 0, 0, .55) calc(100% - var(--fx) * .64), rgba(0, 0, 0, .25) calc(100% - var(--fx) * .42), rgba(0, 0, 0, .06) calc(100% - var(--fx) * .2), transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .06) calc(var(--fy) * .2), rgba(0, 0, 0, .25) calc(var(--fy) * .42), rgba(0, 0, 0, .55) calc(var(--fy) * .64), rgba(0, 0, 0, .85) calc(var(--fy) * .84), #000 var(--fy), #000 calc(100% - var(--fy)), rgba(0, 0, 0, .85) calc(100% - var(--fy) * .84), rgba(0, 0, 0, .55) calc(100% - var(--fy) * .64), rgba(0, 0, 0, .25) calc(100% - var(--fy) * .42), rgba(0, 0, 0, .06) calc(100% - var(--fy) * .2), transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .06) calc(var(--fx) * .2), rgba(0, 0, 0, .25) calc(var(--fx) * .42), rgba(0, 0, 0, .55) calc(var(--fx) * .64), rgba(0, 0, 0, .85) calc(var(--fx) * .84), #000 var(--fx), #000 calc(100% - var(--fx)), rgba(0, 0, 0, .85) calc(100% - var(--fx) * .84), rgba(0, 0, 0, .55) calc(100% - var(--fx) * .64), rgba(0, 0, 0, .25) calc(100% - var(--fx) * .42), rgba(0, 0, 0, .06) calc(100% - var(--fx) * .2), transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .06) calc(var(--fy) * .2), rgba(0, 0, 0, .25) calc(var(--fy) * .42), rgba(0, 0, 0, .55) calc(var(--fy) * .64), rgba(0, 0, 0, .85) calc(var(--fy) * .84), #000 var(--fy), #000 calc(100% - var(--fy)), rgba(0, 0, 0, .85) calc(100% - var(--fy) * .84), rgba(0, 0, 0, .55) calc(100% - var(--fy) * .64), rgba(0, 0, 0, .25) calc(100% - var(--fy) * .42), rgba(0, 0, 0, .06) calc(100% - var(--fy) * .2), transparent 100%);
}
.wp-z.wp-z #mc-wash-programs .kx-cols .kx-t, .wp-z.wp-z #mc-wash-programs .kx-cols .kx-col h4, .wp-z.wp-z #mc-wash-programs .kx-cols .kx-col p {
  text-shadow: 0 0 2px var(--scene-paper, #fff), 0 0 8px var(--scene-paper, #fff), 0 0 16px var(--scene-paper, #fff);
}
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .kx-cols { --gx: 22px; --gy: 44px; }
}

/* ── Клавиша STOP / PAUSE в блоке паузы (владелец 2026-10-22: снимок красной глянцевой кнопки в хромовом ободе со знаком
   MagicClean → превью трёх размещений → «в, выкладывай на тест»). Разметка — adapt-stop.cjs (кнопка .pk вместо значка «||»),
   нажатие — скрипт в wash-programs.astro (aria-pressed). Размещение «В»: заголовок и пояснение слева, клавиша с надписью под ней —
   справа. Префикс .wp-z.wp-z #mc-wash-programs обязателен: правило пакета «.d-pause-mark svg {28px}» иначе сжимает клавишу. ── */
.wp-z.wp-z #mc-wash-programs .pk { --pk: clamp(116px, 10cqw, 170px); display: block; flex-shrink: 0; width: var(--pk); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-z.wp-z #mc-wash-programs .pk .pk-svg { display: block; width: 100%; height: 100%; color: inherit; overflow: visible; filter: drop-shadow(0 calc(var(--pk) * .08) calc(var(--pk) * .1) rgba(15, 20, 32, .32)); transition: filter .25s ease; }
.wp-z.wp-z #mc-wash-programs .pk-cap { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .14s ease, filter .2s ease; }
.wp-z.wp-z #mc-wash-programs .pk:hover .pk-cap { filter: brightness(1.07); }
.wp-z.wp-z #mc-wash-programs .pk:active .pk-cap, .wp-z.wp-z #mc-wash-programs .pk[aria-pressed="true"] .pk-cap { transform: translateY(1.5%) scale(.975); filter: brightness(.9) saturate(1.05); }
.wp-z.wp-z #mc-wash-programs .pk[aria-pressed="true"] .pk-svg { filter: drop-shadow(0 calc(var(--pk) * .04) calc(var(--pk) * .06) rgba(15, 20, 32, .3)) drop-shadow(0 0 calc(var(--pk) * .18) rgba(227, 30, 36, .55)); }
.wp-z.wp-z #mc-wash-programs .pk:focus-visible { outline: 2px solid #e31e24; outline-offset: 4px; }
/* клавиша с надписью — слева от заголовка «Пена работает. Время — на паузе.», пояснение — справа (владелец 2026-10-22:
   «поставь слева от этой надписи»); клавиша слева от своей надписи, в один ряд («поставь кнопку рядом с надписью слева») */
.wp-z.wp-z #mc-wash-programs .d-pause { grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1fr); }
.wp-z.wp-z #mc-wash-programs .d-pause-mark { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; text-align: left; gap: 18px; }
.wp-z.wp-z #mc-wash-programs .d-pause h3 { grid-column: 2; grid-row: 1; }
.wp-z.wp-z #mc-wash-programs .d-pause > p { grid-column: 3; grid-row: 1; }
/* средняя ширина: клавиша слева, заголовок и пояснение справа от неё друг под другом (в три колонки пояснение было бы узким) */
@container mcwp (min-width: 651px) and (max-width: 1100px) {
  .wp-z.wp-z #mc-wash-programs .d-pause { grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; }
  .wp-z.wp-z #mc-wash-programs .d-pause-mark { grid-column: 1; grid-row: 1 / span 2; }
  .wp-z.wp-z #mc-wash-programs .d-pause h3 { grid-column: 2; grid-row: 1; }
  .wp-z.wp-z #mc-wash-programs .d-pause > p { grid-column: 2; grid-row: 2; max-width: 52ch; }
}
/* телефон: клавиша с надписью — над заголовком */
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .pk { --pk: 108px; }
  .wp-z.wp-z #mc-wash-programs .d-pause { grid-template-columns: 1fr; }
  .wp-z.wp-z #mc-wash-programs .d-pause-mark { grid-column: 1; grid-row: auto; order: 0; flex-direction: row; text-align: left; }
  .wp-z.wp-z #mc-wash-programs .d-pause h3, .wp-z.wp-z #mc-wash-programs .d-pause > p { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .pk-cap, .wp-z.wp-z #mc-wash-programs .pk-svg { transition: none; } }

/* ── Белые клавиши программ (владелец 2026-10-22/23: «сделай кнопки пена, шампунь, вода, воск и блеск, точно такие же [как STOP]
   только белые, надписи размести внутри клавиш» → «вариант А, при нажатии свечение сделай белым» → «на тест»). Разметка —
   adapt-steps.cjs (группа .wk-g в строке «Программа 0N»): у 01 «Горячая пена» и «Активный шампунь» вместо прежних переключателей,
   у 02–04 «Вода», «Воск», «Блеск». Нажатие — скрипт в wash-programs.astro (aria-pressed; у 01 ещё data-sel описания).
   Нажатая клавиша утоплена и светится белым: ореол снаружи + светлое кольцо вокруг купола (на светлой пене один ореол не виден). ── */
.wp-z.wp-z #mc-wash-programs .wk-g { display: flex; gap: clamp(10px, 1.2cqw, 20px); align-items: center; }
.wp-z.wp-z #mc-wash-programs .wk { --wk: clamp(84px, 6.4cqw, 110px); display: block; flex-shrink: 0; width: var(--wk); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-z.wp-z #mc-wash-programs .wk .wk-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--wk) * .08) calc(var(--wk) * .1) rgba(15, 20, 32, .3)); transition: filter .25s ease; }
.wp-z.wp-z #mc-wash-programs .wk-t { font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; }
.wp-z.wp-z #mc-wash-programs .wk-cap { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .14s ease, filter .2s ease; }
.wp-z.wp-z #mc-wash-programs .wk:hover .wk-cap { filter: brightness(1.03); }
.wp-z.wp-z #mc-wash-programs .wk:active .wk-cap, .wp-z.wp-z #mc-wash-programs .wk[aria-pressed="true"] .wk-cap { transform: translateY(1.5%) scale(.975); filter: brightness(1.04); }
.wp-z.wp-z #mc-wash-programs .wk-gap { transition: fill .2s ease; }
.wp-z.wp-z #mc-wash-programs .wk-lit { opacity: 0; transition: opacity .2s ease; }
.wp-z.wp-z #mc-wash-programs .wk[aria-pressed="true"] .wk-gap { fill: #fff; }
.wp-z.wp-z #mc-wash-programs .wk[aria-pressed="true"] .wk-lit { opacity: .75; }
/* ореол умеренный (владелец 2026-10-23: «сделай свечение более умеренным») — было три слоя #fff до 0,32 ширины клавиши */
.wp-z.wp-z #mc-wash-programs .wk[aria-pressed="true"] .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(15, 20, 32, .28)) drop-shadow(0 0 calc(var(--wk) * .04) rgba(255, 255, 255, .75)) drop-shadow(0 0 calc(var(--wk) * .13) rgba(255, 255, 255, .4)); }
.wp-z.wp-z #mc-wash-programs .wk:focus-visible { outline: 2px solid #e31e24; outline-offset: 4px; }
@container mcwp (max-width: 650px) { .wp-z.wp-z #mc-wash-programs .wk { --wk: 96px; } }
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .wk-cap, .wp-z.wp-z #mc-wash-programs .wk-svg, .wp-z.wp-z #mc-wash-programs .wk-gap, .wp-z.wp-z #mc-wash-programs .wk-lit { transition: none; } }

/* ── Выравнивание по сетке сайта (владелец 2026-10-23: «приведи выравнивание в разделе программы мытья к уже принятому, как
   например в разделе автоматы, проверь шрифты и размеры, все должно соответствовать принятому стилю»).
   Край текста — край контента сайта (.container-mc: 1600px, поля 2rem; уже 1024px — 1.25rem), как в «Автоматах»: в пакете
   текст стоял на 5–6 % ширины правее (на 1920 — 77px). --wp-gut — поле текста внутри раздела: с 1088px раздел сам стоит в
   ширине контента (.wp-in), уже — во всю ширину экрана, и поле равно полю контейнера сайта. Фон полос и картинки не сдвигаются.
   Надписи разделов — как .pay-ey (черта 28px перед надписью); правые надписи шапок убраны — в принятых разделах справа только
   пояснение («Оборудование создаёт результат» повторяло надпись первого экрана страницы). Пояснение справа от заголовка
   (1.1fr / .9fr, как .pay-head) — в блоке «Результат, за которым возвращаются» и в тёмном блоке; в шапке раздела пояснение под
   заголовком: «Ничего лишнего. Только результат.» по слову владельца в одну строку и в левую колонку не помещается (851 > 821px). ── */
.wp-z.wp-z #mc-wash-programs { --wp-gut: 1.25rem; }
@media (min-width: 1024px) { .wp-z.wp-z #mc-wash-programs { --wp-gut: 2rem; } }
@media (min-width: 1088px) { .wp-z.wp-z #mc-wash-programs { --wp-gut: 0px; } }
/* шапка раздела */
.wp-z.wp-z #mc-wash-programs .d-hero > .d-meta { padding: 30px var(--wp-gut) 0; justify-content: flex-start; }
.wp-z.wp-z #mc-wash-programs .d-title { padding: 14px var(--wp-gut) 0; }
.wp-z.wp-z #mc-wash-programs .d-lead { margin: 20px var(--wp-gut) 0; max-width: 50ch; }
.wp-z.wp-z #mc-wash-programs .d-hero-foot { padding-left: var(--wp-gut); padding-right: var(--wp-gut); }
/* надписи разделов — черта перед надписью, справа ничего */
.wp-z.wp-z #mc-wash-programs .d-meta > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.wp-z.wp-z #mc-wash-programs .d-meta > span:first-child::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
.wp-z.wp-z #mc-wash-programs .d-hero > .d-meta > span:last-child,
.wp-z.wp-z #mc-wash-programs .d-engineering > .d-meta > span:last-child { display: none; }
/* живой пульт: строка инструментов и подпись внизу — по тому же краю */
.wp-z.wp-z #mc-wash-programs .d-live-toolbar { padding-left: var(--wp-gut); padding-right: var(--wp-gut); }
.wp-z.wp-z #mc-wash-programs .d-live-caption { left: var(--wp-gut); right: var(--wp-gut); }
/* «Результат, за которым возвращаются.» и тёмный блок: заголовок слева, пояснение справа внизу — как .pay-head */
.wp-z.wp-z #mc-wash-programs .d-opening { padding-left: var(--wp-gut); padding-right: var(--wp-gut); grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wp-z.wp-z #mc-wash-programs .d-engineering-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wp-z.wp-z #mc-wash-programs .d-opening p,
.wp-z.wp-z #mc-wash-programs .d-engineering-intro > p { max-width: 50ch; }
@media (min-width: 1024px) {
  .wp-z.wp-z #mc-wash-programs .d-opening,
  .wp-z.wp-z #mc-wash-programs .d-engineering-intro { grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
}
/* программы 01–04: текст от края контента; надпись «Программа 0N» — как надписи разделов */
.wp-z.wp-z #mc-wash-programs .d-step.d-step { padding-left: var(--wp-gut); padding-right: var(--wp-gut); }
.wp-z.wp-z #mc-wash-programs .kx-col:first-child { padding-left: 0; }
.wp-z.wp-z #mc-wash-programs .kx-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .16em; line-height: 1.5; }
.wp-z.wp-z #mc-wash-programs .kx-label::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
.wp-z.wp-z #mc-wash-programs .kx-sub { font-size: 13px; letter-spacing: .16em; }
.wp-z.wp-z #mc-wash-programs .kx-col h4 { line-height: 1.2; letter-spacing: -.02em; }
/* блок паузы */
.wp-z.wp-z #mc-wash-programs .d-pause { padding-left: var(--wp-gut); padding-right: var(--wp-gut); }
.wp-z.wp-z #mc-wash-programs .d-pause-mark { letter-spacing: .16em; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-lead { margin: 20px var(--wp-gut) 0; }
  .wp-z.wp-z #mc-wash-programs .kx-col, .wp-z.wp-z #mc-wash-programs .kx-col:first-child { padding-left: 0; padding-right: 0; }
}
/* тёмный блок и низ раздела: с 1088px — карточка в ширине контента со своим внутренним полем; уже раздел во всю ширину экрана —
   текст по краю контента сайта, фото внизу — от края до края */
@media (max-width: 1087px) {
  .wp-z.wp-z #mc-wash-programs .d-engineering { padding-left: var(--wp-gut); padding-right: var(--wp-gut); }
  .wp-z.wp-z #mc-wash-programs .d-finale { margin-left: calc(-1 * var(--wp-gut)) !important; margin-right: calc(-1 * var(--wp-gut)) !important; }
  .wp-z.wp-z #mc-wash-programs .d-finale figcaption { left: var(--wp-gut); right: var(--wp-gut); }
  .wp-z.wp-z #mc-wash-programs .d-footer { padding-left: var(--wp-gut); padding-right: var(--wp-gut); }
}

/* ── ProLine — навесной пульт (владелец 2026-10-23: «подними выше, это навесной пульт»): висит над полом сцены на треть своей
   ширины (≈ пятая часть высоты). Где над пультом мало места (раздел уже 1400px), верх раздела выше на ту же величину — пульт
   остаётся под пояснением, а пол сцены уходит ниже; высота раздела одинакова при любом исполнении (выбор не дёргает страницу).
   StandartLine — напольный, стоит на полу; SlimLine — настенная панель, своя высота (правила пакета). ── */
.wp-z.wp-z #mc-wash-programs .d-hero { --pl-lift: calc(80cqw * .33); --pl-grow: var(--pl-lift); }
@container mcwp (min-width: 651px) and (max-width: 1024px) { .wp-z.wp-z #mc-wash-programs .d-hero { --pl-lift: calc(45cqw * .33); } }
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .d-hero { --pl-lift: calc(max(461px, 30cqw) * .33); } }
@container mcwp (min-width: 1400px) { .wp-z.wp-z #mc-wash-programs .d-hero { --pl-grow: 0px; } }
.wp-z.wp-z #mc-wash-programs .d-hero[data-model=proline] .d-terminal-angle { translate: 0 calc(-1 * var(--pl-lift)); }
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(max(1090px, 58.8cqw + 400px) + var(--pick, 0px) + var(--pl-grow)); } }
@container mcwp (min-width: 651px) and (max-width: 1024px) { .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(var(--wp-head) + 67.5cqw + 134px + var(--pick, 0px) + var(--pl-grow)); } }
@container mcwp (max-width: 650px) { .wp-z.wp-z #mc-wash-programs .d-hero { min-height: calc(920px + 18cqw + var(--pick, 0px) + var(--pl-grow)); } }

/* ── Живой пульт: миниатюры исполнений (владелец 2026-10-23: «сюда поставь миниатюры пультов и подписи к ним») — вместо клавиш
   ProLine / Standart / SlimLine в строке «Исполнение пульта» та же «Линейка», что под фото пульта (adapt-live-pick.cjs), мельче.
   Строка выше прежней — пульт и подсказка живого пульта стоят от её низа: --lt-h (высота строки) ставит скрипт страницы,
   без скрипта — прежнее место + 84px. ── */
.wp-z.wp-z #mc-wash-programs .pk-live { gap: 24px; }
.wp-z.wp-z #mc-wash-programs .pk-live .ph { height: 72px; margin-bottom: 10px; }
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .pk-live .ph { height: 72px; } }
@container mcwp (min-width: 851px) {
  .wp-z.wp-z #mc-wash-programs .d-console-area { top: var(--lt-h, calc(clamp(112px, 8cqw, 250px) + 84px)); }
  .wp-z.wp-z #mc-wash-programs .d-live-hint { top: calc(var(--lt-h, calc(clamp(112px, 8cqw, 250px) + 84px)) + 32px); }
  .wp-z.wp-z #mc-wash-programs .d-live { min-height: calc(1080px + 84px); }
}
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .d-live { min-height: calc(max(1080px, 75cqw) + 84px); } }
@container mcwp (max-width: 650px) { .wp-z.wp-z #mc-wash-programs .pk-live { gap: 18px; } .wp-z.wp-z #mc-wash-programs .pk-live .ph { height: 64px; } }

/* ── Живой пульт — красная клавиша (владелец 2026-10-23: «поменяй эту кнопку на красную с логотипом и придумай другое место» →
   превью четырёх мест → «вариант 4, на тест»): клавиша как STOP (adapt-livekey.cjs), вокруг — мягкая волна-приглашение вместо
   бегущего огонька; место — справа в строке выбора пульта, подпись слева от клавиши. На телефоне — под строкой выбора. ── */
.wp-z.wp-z #mc-wash-programs .d-enter.lk { --lk: clamp(100px, 7.4cqw, 132px); gap: 18px; position: relative; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-disk { width: var(--lk); height: var(--lk); background: none; box-shadow: none; color: inherit; transform: none; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk .lk-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--lk) * .08) calc(var(--lk) * .1) rgba(15, 20, 32, .32)); }
.wp-z.wp-z #mc-wash-programs .d-enter.lk .lk-cap { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .14s ease, filter .2s ease; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk:hover .lk-cap { filter: brightness(1.08); }
.wp-z.wp-z #mc-wash-programs .d-enter.lk:active .lk-cap { transform: translateY(1.5%) scale(.975); filter: brightness(.9); }
.wp-z.wp-z #mc-wash-programs .d-enter.lk:hover .d-enter-disk, .wp-z.wp-z #mc-wash-programs .d-enter.lk:active .d-enter-disk { transform: none; box-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-disk::before { inset: 4%; border-radius: 50%; background: none; -webkit-mask: none; mask: none; animation: lk-wave 2.6s ease-out infinite; }
@keyframes lk-wave { 0% { box-shadow: 0 0 0 0 rgba(227, 30, 36, .42); } 70%, 100% { box-shadow: 0 0 0 calc(var(--lk) * .2) rgba(227, 30, 36, 0); } }
.wp-z.wp-z #mc-wash-programs .d-enter.lk:hover .d-enter-disk::before, .wp-z.wp-z #mc-wash-programs .d-enter.lk:focus-visible .d-enter-disk::before { animation: none; background: none; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-t b { font-size: 21px; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-t span { font-size: 15px; }
/* место: строка выбора — слева пульты, справа клавиша */
.wp-z.wp-z #mc-wash-programs .d-hero-foot { align-items: stretch; }
.wp-z.wp-z #mc-wash-programs .d-invitation { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.wp-z.wp-z #mc-wash-programs .d-invitation .d-enter.lk { margin-left: auto; flex-direction: row-reverse; text-align: right; }
.wp-z.wp-z #mc-wash-programs .d-invitation .d-enter.lk .d-enter-t { align-items: flex-end; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-enter.lk { --lk: 84px; gap: 14px; }
  .wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-t b { font-size: 17px; }
  .wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-t span { font-size: 13px; }
  .wp-z.wp-z #mc-wash-programs .d-invitation { flex-direction: column; align-items: flex-start; }
  .wp-z.wp-z #mc-wash-programs .d-invitation .d-enter.lk { margin-left: 0; flex-direction: row; text-align: left; }
  .wp-z.wp-z #mc-wash-programs .d-invitation .d-enter.lk .d-enter-t { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .d-enter.lk .d-enter-disk::before { animation: none; } }

/* ── Живой пульт: выключить — та же клавиша (владелец 2026-10-23: «Вернуться к обзору ×» — «либо убрать, либо принципиально
   переделать возврат» → превью трёх вариантов → «1, на тест»): справа в строке исполнений — красная клавиша «Живой пульт»
   включённая (утоплена, светится), подпись «Нажмите, чтобы выключить»; разметка — adapt-livekey.cjs (кнопка пакета .d-leave). ── */
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off { --lk: clamp(100px, 7.4cqw, 132px); display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 18px; min-height: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: right; white-space: nowrap; cursor: pointer; transform: none; -webkit-tap-highlight-color: transparent; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:hover { border: 0; background: none; transform: none; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:focus-visible { outline: none; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:focus-visible .lk-disk { outline: 2px solid var(--d-red); outline-offset: 4px; border-radius: 50%; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .lk-disk { position: relative; display: block; flex: none; width: var(--lk); height: var(--lk); }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .lk-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--lk) * .04) calc(var(--lk) * .06) rgba(15, 20, 32, .3)) drop-shadow(0 0 calc(var(--lk) * .16) rgba(227, 30, 36, .55)); }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .lk-cap { transform-box: fill-box; transform-origin: 50% 50%; transform: translateY(1.5%) scale(.975); filter: brightness(1.06) saturate(1.1); transition: transform .14s ease, filter .2s ease; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:hover .lk-cap { filter: brightness(1.14) saturate(1.1); }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:active .lk-cap { transform: translateY(2.5%) scale(.96); }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t b { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; color: var(--d-ink); }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t span { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.35; color: var(--d-grey); }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off svg { width: 100%; height: 100%; }
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-leave.lk-off { --lk: 84px; gap: 14px; flex-direction: row; text-align: left; justify-self: start; }
  .wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t { align-items: flex-start; }
  .wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t b { font-size: 17px; }
  .wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t span { font-size: 13px; }
}

/* ── Клавиши «Живой пульт» у правого края не обрезаются (владелец 2026-10-23: «странно кнопка обрезана»): верх раздела и живой
   пульт режут содержимое по своей рамке (overflow: hidden пакета), а клавиши стоят вплотную к правому краю — тень, свечение и
   волна срезались. Теперь рамка режет только сверху, снизу и слева, справа есть запас 48px; сцену с машиной (в пакете шире
   верха на 1 % с каждой стороны) по-прежнему режем по правому краю. Кольцо фокуса вокруг клавиши (было видно после нажатия)
   заменено красной подписью — только при выборе клавиатурой. ── */
.wp-z.wp-z #mc-wash-programs .d-hero,
.wp-z.wp-z #mc-wash-programs .d-live { overflow: visible; clip-path: inset(0 -48px 0 0); }
/* сцена шире верха: справа на 5 % ширины верха при ширине сцены 94 % (на телефоне 6 % при 116 %) — режем ровно по краю */
.wp-z.wp-z #mc-wash-programs .d-world { clip-path: inset(0 calc(500% / 94) 0 0); }
@container mcwp (max-width: 650px) { .wp-z.wp-z #mc-wash-programs .d-world { clip-path: inset(0 calc(600% / 116) 0 0); } }
/* узкий планшет: три пульта и клавиша в одну строку не помещаются — клавиша под строкой, как на телефоне */
@container mcwp (min-width: 651px) and (max-width: 780px) {
  .wp-z.wp-z #mc-wash-programs .d-invitation { flex-direction: column; align-items: flex-start; }
  .wp-z.wp-z #mc-wash-programs .d-invitation .d-enter.lk { margin-left: 0; flex-direction: row; text-align: left; }
  .wp-z.wp-z #mc-wash-programs .d-invitation .d-enter.lk .d-enter-t { align-items: flex-start; }
}
.wp-z.wp-z #mc-wash-programs .d-enter.lk:focus-visible,
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:focus-visible { outline: none; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:focus-visible .lk-disk { outline: none; }
.wp-z.wp-z #mc-wash-programs .d-enter.lk:focus-visible .d-enter-t b,
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off:focus-visible .d-enter-t b { color: var(--d-red); }

/* ── Живой пульт: клавиши рядом с пультом (владелец 2026-10-23: о красном кольце с точкой у нажатой клавиши на фото пульта —
   «очень сильно не нравится такая подача призыва нажать клавишу» → превью пяти подач → «5, на тест»). Разметка — adapt-live-keys.cjs:
   над описанием программы ряд клавиш, как в полосах программ (01 «Активный шампунь», «Горячая пена», 02 «Вода», 03 «Воск», 04 «Блеск»,
   «Пауза» — красная STOP PAUSE), подпись «Нажмите клавишу — здесь или на пульте.» вместо прежней подсказки. Нажатие клавиши ряда
   нажимает ту же клавишу на фото, отмечена та же программа (скрипт страницы). Нажатая клавиша на фото пульта светится белым кольцом
   вместо красного кольца с точкой пакета; --kd — диаметр клавиши на фото (скрипт страницы: ширина пульта × доля для модели). ── */
.wp-z.wp-z #mc-wash-programs .d-live { --vk: clamp(56px, 5cqw, 84px); }
.wp-z.wp-z #mc-wash-programs .d-live .d-hit { width: calc(var(--kd, 30px) * 1.1); height: calc(var(--kd, 30px) * 1.1); border: 0; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-z.wp-z #mc-wash-programs .d-live .d-hit:hover, .wp-z.wp-z #mc-wash-programs .d-live .d-hit[aria-pressed=true] { border: 0; background: none; box-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-hit[aria-pressed=true]::after { content: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-hit::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--kd, 30px) * .96); height: calc(var(--kd, 30px) * .96); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  box-shadow: inset 0 0 0 calc(var(--kd, 30px) * .055) rgba(255, 255, 255, .92), 0 0 calc(var(--kd, 30px) * .1) calc(var(--kd, 30px) * .02) rgba(255, 255, 255, .85), 0 0 calc(var(--kd, 30px) * .6) calc(var(--kd, 30px) * .12) rgba(255, 255, 255, .45); }
@media (hover: hover) { .wp-z.wp-z #mc-wash-programs .d-live .d-hit:hover::before { opacity: .5; } }
.wp-z.wp-z #mc-wash-programs .d-live .d-hit[aria-pressed=true]::before { opacity: 1; }
.wp-z.wp-z #mc-wash-programs .d-live .d-hit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wp-z.wp-z #mc-wash-programs .vk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(10px, 1.6cqw, 26px); }
.wp-z.wp-z #mc-wash-programs .vk-g { display: flex; flex-direction: column; gap: 10px; }
.wp-z.wp-z #mc-wash-programs .vk-n { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 600; font-size: calc(12px / var(--z)); line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: #6b7486; transition: color .2s ease; }
.wp-z.wp-z #mc-wash-programs .vk-n::before { content: ""; width: 18px; height: 1px; background: currentColor; transition: background-color .2s ease; }
.wp-z.wp-z #mc-wash-programs .vk-g:has([aria-pressed="true"]) .vk-n { color: #0f1420; }
.wp-z.wp-z #mc-wash-programs .vk-g:has([aria-pressed="true"]) .vk-n::before { background: #e31e24; }
.wp-z.wp-z #mc-wash-programs .vk-keys { display: flex; gap: 12px; }
.wp-z.wp-z #mc-wash-programs .vk .wk { --wk: var(--vk); position: relative; }
/* нажатая клавиша ряда — красная черта под ней, как отметка выбранного исполнения пульта */
.wp-z.wp-z #mc-wash-programs .vk .wk::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 24px; height: 2px; margin-left: -12px; background: #e31e24; opacity: 0; transition: opacity .2s ease; }
.wp-z.wp-z #mc-wash-programs .vk .wk[aria-pressed="true"]::after { opacity: 1; }
.wp-z.wp-z #mc-wash-programs .vk .vk-red[aria-pressed="true"] .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(15, 20, 32, .28)) drop-shadow(0 0 calc(var(--wk) * .14) rgba(227, 30, 36, .5)); }
.wp-z.wp-z #mc-wash-programs .vk .vk-red[aria-pressed="true"] .wk-lit { opacity: .3; }
.wp-z.wp-z #mc-wash-programs .vk-cap { flex-basis: 100%; margin: 10px 0 0; font-size: calc(15px / var(--z)); line-height: 1.55; color: var(--d-grey); }
/* широкий экран: ряд — над описанием программы (на месте прежней подсказки), описание — ниже ряда */
@container mcwp (min-width: 851px) {
  .wp-z.wp-z #mc-wash-programs .vk { position: absolute; z-index: 4; top: calc(var(--lt-h, calc(clamp(112px, 8cqw, 250px) + 84px)) + 30px); left: 45%; right: 5%; }
  .wp-z.wp-z #mc-wash-programs .d-live .d-live-result { margin-top: calc(var(--vk) + 140px); }
}
/* телефон и планшет: ряд — под пультом, перед описанием */
@container mcwp (max-width: 850px) {
  .wp-z.wp-z #mc-wash-programs .d-live { --vk: 66px; }
  .wp-z.wp-z #mc-wash-programs .vk { position: relative; margin: 26px 6% 0; gap: 14px 18px; }
  .wp-z.wp-z #mc-wash-programs .d-live .d-live-result { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .d-live .d-hit::before, .wp-z.wp-z #mc-wash-programs .vk .wk::after, .wp-z.wp-z #mc-wash-programs .vk-n { transition: none; } }

/* ── Сцена верха: «Машина для программ мытья_1» (владелец 2026-10-23: «Машина для программ мытья_1 поставь вместо этого фото»).
   Разметка — adapt-world-car1.cjs: кадр 1916 × 821 (прежний — 1586 × 992), номера на корме нет, выноски в координатах нового кадра.
   Белое поле кадра заранее подкрашено в цвет фона раздела (#fafbf9) — краёв картинки не видно. Машина стоит справа от пульта
   (корма не под пультом) на одной плоскости пола с пультом (владелец: «поставь на нулевую отметку плоскости пола»): колёса
   (87,7 % высоты кадра) — на линии низа корпуса стоящего пульта (95,85 % высоты кадра пульта; ProLine навесной — поднят над ней); подписи — столбиком над правыми концами слоёв, сверху вниз в порядке
   мойки: пена, вода, плёнка (места подписей = начала линий в разметке: широкая раскладка — x 1150 из 1916, y 120 / 25 / −70 из 821;
   узкая — x 981, y −33 / −279 / −525). На планшете и телефоне — узкая раскладка, на телефоне кадр под пультом во всю ширину. ── */
.wp-z.wp-z #mc-wash-programs .d-world,
.wp-z.wp-z #mc-wash-programs .d-layer-map { left: 17%; right: -12%; aspect-ratio: 1916 / 821; }
.wp-z.wp-z #mc-wash-programs .d-world { clip-path: inset(0 calc(1200% / 95) 0 0); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 89%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 89%, transparent 100%); }
.wp-z.wp-z #mc-wash-programs .d-world::after { content: none; }
.wp-z.wp-z #mc-wash-programs .d-layer-foam { left: 60.02%; right: auto; top: -8.53%; }
.wp-z.wp-z #mc-wash-programs .d-layer-water { left: 60.02%; right: auto; top: 3.05%; }
.wp-z.wp-z #mc-wash-programs .d-layer-wax { left: 60.02%; right: auto; top: 14.62%; }
/* пол: низ сцены = низ пульта + поле под корпусом пульта (0,0622 × ширина пульта) − поле под колёсами (0,123 × высота сцены) */
@container mcwp (min-width: 1025px) {
  .wp-z.wp-z #mc-wash-programs .d-world,
  .wp-z.wp-z #mc-wash-programs .d-layer-map { bottom: calc(clamp(100px, 8.5cqw, 280px) + max(28.7px, 1.866cqw) - 5.006cqw); }
}
/* планшет и телефон: узкие выноски */
@container mcwp (max-width: 1024px) {
  .wp-z.wp-z #mc-wash-programs .d-layer-leaders-wide { display: none; }
  .wp-z.wp-z #mc-wash-programs .d-layer-leaders-narrow { display: block; }
  .wp-z.wp-z #mc-wash-programs .d-layer-foam { left: 51.2%; top: -64%; }
  .wp-z.wp-z #mc-wash-programs .d-layer-water { left: 51.2%; top: -34%; }
  .wp-z.wp-z #mc-wash-programs .d-layer-wax { left: 51.2%; top: -4%; }
}
@container mcwp (min-width: 651px) and (max-width: 1024px) {
  .wp-z.wp-z #mc-wash-programs .d-world,
  .wp-z.wp-z #mc-wash-programs .d-layer-map { left: 28%; right: 0%; bottom: calc(100px + 2.8cqw - 3.794cqw); }
  .wp-z.wp-z #mc-wash-programs .d-world { clip-path: none; }
}
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-world,
  .wp-z.wp-z #mc-wash-programs .d-layer-map { left: -2%; right: -13%; bottom: 75px; }
  .wp-z.wp-z #mc-wash-programs .d-world { clip-path: inset(0 calc(1300% / 115) 0 0); }
}

/* ── Пульт в верху — левее (владелец 2026-10-23: «пульт сдвинь левее»): левый край корпуса — по краю текста раздела (заголовок,
   пояснение, строка выбора пульта), между пультом и машиной — воздух. У фото пульта прозрачное поле слева: 20,44 % ширины кадра
   у ProLine, 23,56 % у Standart, 21 % у SlimLine. Телефон — без изменений (корпус там и так у края текста). ── */
@container mcwp (min-width: 1025px) {
  .wp-z.wp-z #mc-wash-programs .d-terminal-angle { left: calc(var(--wp-gut, 0px) - .2044 * max(461px, 30cqw)); }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=standart] .d-terminal-angle { left: calc(var(--wp-gut, 0px) - .2356 * max(461px, 30cqw)); }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=slimline] .d-terminal-angle { left: calc(var(--wp-gut, 0px) - .21 * max(359px, 27.5cqw)); }
}
@container mcwp (min-width: 651px) and (max-width: 1024px) {
  .wp-z.wp-z #mc-wash-programs .d-terminal-angle { left: calc(var(--wp-gut, 0px) - .2044 * 45cqw); }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=standart] .d-terminal-angle { left: calc(var(--wp-gut, 0px) - .2356 * 45cqw); }
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=slimline] .d-terminal-angle { left: calc(var(--wp-gut, 0px) - .21 * 35cqw); }
}

/* ── Верх раздела без лишнего воздуха (владелец 2026-10-23: «много пустого места, исправь»). Высота верха = текст сверху с отступом
   (--wp-head) + самое высокое из того, что стоит от низа: пульт (низ пульта + видимая часть кадра пульта; у навесного ProLine ещё
   подъём --pl-lift) или подписи слоёв над машиной (низ сцены + сцена + подписи). Прежняя формула (58,8cqw + 400px) была под высокий
   кадр машины 1586 × 992. Высота одна для всех пультов — композиция со Standart (владелец 2026-10-23: «при переключении между
   пультами у тебя прыгает картинка с автомобилем исправь» → снимок верха со Standart: «это исходная композиция, именно на ней меняй
   пульты»): машина и всё, что стоит от низа, при переключении на месте; запаса под подъём ProLine нет — ProLine (блок ниже) висит
   над полом и начинается на той же высоте, что Standart. ── */
.wp-z.wp-z #mc-wash-programs .d-hero { --pl-up: 0px; --pl-grow: 0px; }
@container mcwp (min-width: 1025px) {
  .wp-z.wp-z #mc-wash-programs .d-hero {
    --wp-head: calc(66px + 24px / var(--z) + (1.08 * clamp(34px, 3.6vw, 52px) + 20px + 82px) / var(--z));
    min-height: calc(var(--wp-head) + clamp(100px, 8.5cqw, 280px) + max(682px, 44.4cqw, 39.16cqw + 88px) + var(--pick, 0px) + var(--pl-up));
  }
}

/* ── Подписи слоёв над машиной («активная пена / очищенная вода / защитная плёнка» с линиями) скрыты (владелец 2026-10-23: «пока
   убери эти подписи»). Разметка и места остаются (adapt-world-car1.cjs, блок «Сцена верха»): вернуть — удалить это правило. ── */
.wp-z.wp-z #mc-wash-programs .d-layer-map { display: none; }

/* ── ProLine в исходной композиции (владелец 2026-10-23: «это исходная композиция, именно на ней меняй пульты»): навесной ProLine
   висит над полом на прежний подъём (--pl-lift = 0,33 ширины пульта), а его верх — на той же высоте, что у Standart, поэтому он
   ниже: ширина 0,7696 от ширины пульта (видимая часть кадра: Standart 1,4166 ширины от пола до верха, ProLine 1,412 своей ширины;
   (1,4166 − 0,33) / 1,412 = 0,7696). Сдвиг вверх = подъём + разница полей под корпусом (0,0622 у Standart − 0,0678 × 0,7696 у
   ProLine = 0,01 ширины пульта). Левый край корпуса — по краю текста (поле слева у кадра ProLine — 20,44 %). --pw — ширина пульта
   на этой ширине экрана. ── */
.wp-z.wp-z #mc-wash-programs .d-hero { --pw: 80cqw; }
@container mcwp (min-width: 651px) and (max-width: 1024px) { .wp-z.wp-z #mc-wash-programs .d-hero { --pw: 45cqw; } }
@container mcwp (min-width: 1025px) { .wp-z.wp-z #mc-wash-programs .d-hero { --pw: max(461px, 30cqw); } }
.wp-z.wp-z #mc-wash-programs .d-hero[data-model=proline] .d-terminal-angle { width: calc(.7696 * var(--pw)); left: calc(var(--wp-gut, 0px) - .2044 * .7696 * var(--pw)); translate: 0 calc(-1 * (var(--pl-lift) + .01 * var(--pw))); }

/* ── Живой пульт: ролик «Горячей пены» (владелец 2026-10-23: «Вместо фото на программе горячая пена выложи ролик, в папке видео»).
   Разметка — adapt-live-video.cjs: <video> в окне результата поверх фото, виден только у программы «Горячая пена» (foam); играет
   без звука по кругу, пока живой пульт открыт и окно на экране (скрипт страницы); у остальных программ — их фото. ── */
.wp-z.wp-z #mc-wash-programs .d-effect-video { position: absolute; inset: -1px; z-index: 1; display: none; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; background: #c4cacb; pointer-events: none; }
/* 25.10: три ролика (data-video foam / wax / finish) — виден ролик своей программы */
.wp-z.wp-z #mc-wash-programs .d-live[data-program=foam] .d-effect-video[data-video=foam],
.wp-z.wp-z #mc-wash-programs .d-live[data-program=wax] .d-effect-video[data-video=wax],
.wp-z.wp-z #mc-wash-programs .d-live[data-program=finish] .d-effect-video[data-video=finish],
.wp-z.wp-z #mc-wash-programs .d-live[data-program=pause] .d-effect-video[data-video=pause] { display: block; } /* 26.10: + ролик паузы */
/* под роликом фото не нужно: иначе по краю окна просвечивает полоска в пиксель */
.wp-z.wp-z #mc-wash-programs .d-live:is([data-program=foam], [data-program=wax], [data-program=finish], [data-program=pause]) .d-effect { background: transparent; }
.wp-z.wp-z #mc-wash-programs .d-live:is([data-program=foam], [data-program=wax], [data-program=finish], [data-program=pause]) .d-effect-image { visibility: hidden; }
/* окно результата — 16 : 9, как ролик (было 1,62 : 1, на телефоне 1,5 : 1): титр «Программа мытья / Горячая пена.» и знак MagicClean
   внизу кадра не обрезаются; у всех программ одно окно — текст под ним при переключении не прыгает */
.wp-z.wp-z #mc-wash-programs .d-live .d-effect { aspect-ratio: 16 / 9; }

/* ── Ряд клавиш живого пульта — на всю ширину картинки, клавиши крупнее (владелец 2026-10-23: «выровняй кнопки по ширине картинки»
   → превью CR4czwPHAJsq6JRLaiRmvJ → «3, выкладывай на тест»): шесть клавиш и пять промежутков по 24px ровно заполняют ширину
   окна с роликом / фото (на компьютере ~108px вместо 77px); на телефоне — две строки по три клавиши во всю ширину. Описание
   программы под рядом опускается на столько же (его отступ считается от --vk). ── */
.wp-z.wp-z #mc-wash-programs .vk { column-gap: 24px; }
.wp-z.wp-z #mc-wash-programs .vk-keys { gap: 24px; }
@container mcwp (min-width: 851px) { .wp-z.wp-z #mc-wash-programs .d-live { --vk: calc((50cqw - 120px) / 6 - .3px); } }
@container mcwp (min-width: 651px) and (max-width: 850px) { .wp-z.wp-z #mc-wash-programs .d-live { --vk: calc((88cqw - 120px) / 6 - .3px); } }
@container mcwp (max-width: 650px) { .wp-z.wp-z #mc-wash-programs .d-live { --vk: calc((88cqw - 48px) / 3 - .3px); } }
/* подписи групп не раздвигают ряд (иначе на узких экранах «— Пауза» шире клавиши и ряд переносится): подпись — над своей клавишей,
   у «Паузы» — по правому краю клавиши, выступает влево в промежуток */
.wp-z.wp-z #mc-wash-programs .vk-n { width: 0; white-space: nowrap; }
.wp-z.wp-z #mc-wash-programs .vk-n::before { flex-shrink: 0; }
.wp-z.wp-z #mc-wash-programs .vk-g:last-of-type { align-items: flex-end; }
.wp-z.wp-z #mc-wash-programs .vk-g:last-of-type .vk-n { justify-content: flex-end; }

/* ── Клавиши ряда — немного меньше (владелец 2026-10-23: «немного уменьши клавиши»): клавиша — 0,85 прежней (на компьютере ~92px
   вместо 108px, не меньше 52px), ряд по-прежнему от левого до правого края картинки: промежутки между всеми клавишами равные
   и шире (--vk-gap = (ширина ряда − клавиши) / число промежутков). ── */
@container mcwp (min-width: 851px) {
  .wp-z.wp-z #mc-wash-programs .d-live { --vk: max(52px, (50cqw - 120px) / 6 * .85); --vk-gap: calc((50cqw - 6 * var(--vk)) / 5 - .2px); }
}
@container mcwp (min-width: 651px) and (max-width: 850px) {
  .wp-z.wp-z #mc-wash-programs .d-live { --vk: calc((88cqw - 120px) / 6 * .85); --vk-gap: calc((88cqw - 6 * var(--vk)) / 5 - .2px); }
}
@container mcwp (max-width: 650px) {
  .wp-z.wp-z #mc-wash-programs .d-live { --vk: calc((88cqw - 48px) / 3 * .85); --vk-gap: calc((88cqw - 3 * var(--vk)) / 2 - .2px); }
}
.wp-z.wp-z #mc-wash-programs .vk { column-gap: var(--vk-gap, 24px); }
.wp-z.wp-z #mc-wash-programs .vk-keys { gap: var(--vk-gap, 24px); }

/* ── ProLine в верху — больше (владелец 2026-10-23: «сделай пульт немного больше» → «еще на 5% больше», снимок навесного ProLine):
   ширина 0,85 × 1,05 = 0,8925 ширины пульта (было 0,7696); верх — по-прежнему на высоте верха Standart, композиция и машина на
   месте, поэтому висит над полом ниже: подъём (1,4166 − 1,412 × 0,8925) = 0,1564 ширины пульта (на 1920 ~72px; было 152). Сдвиг
   вверх = (1,4788 − 1,4798 × 0,8925) = 0,1581 ширины пульта (подъём + разница полей под корпусом). ── */
.wp-z.wp-z #mc-wash-programs .d-hero[data-model=proline] .d-terminal-angle { width: calc(.8925 * var(--pw)); left: calc(var(--wp-gut, 0px) - .2044 * .8925 * var(--pw)); translate: 0 calc(-.1581 * var(--pw)); }

/* ── Standart в верху — немного больше (владелец 2026-10-23: «этот сделай немного больше, верхнюю границу позиционирования не
   меняй», снимок Standart): ширина 1,1 ширины пульта; верх корпуса — на прежней высоте (кадр сдвинут вниз на прирост высоты
   до верха: 0,9859 × 1,5 × 0,1 = 0,1479 ширины пульта), поэтому низ корпуса ниже линии пола машины (~65px на 1920) — пульт стоит
   ближе к зрителю. Левый край корпуса — по краю текста (поле слева у кадра Standart — 23,56 %). Телефон — без изменений. ── */
@container mcwp (min-width: 651px) {
  .wp-z.wp-z #mc-wash-programs .d-hero[data-model=standart] .d-terminal-angle { width: calc(1.1 * var(--pw)); left: calc(var(--wp-gut, 0px) - .2356 * 1.1 * var(--pw)); translate: 0 calc(.1479 * var(--pw)); }
}

/* ── Живой пульт — на всю ширину страницы (владелец 2026-10-23, снимок на широком мониторе: «этот модуль тоже не на всю ширину
   страницы - исправь»): левый край корпуса пульта — по краю текста (как в верху раздела), правый край описания программы, окна
   с роликом и ряда клавиш — по правому краю страницы (у пакета было поле 5 %). Поле слева у кадров пультов: ProLine 20,44 %,
   Standart 23,56 %, SlimLine 21 % ширины кадра; ширина кадра — как у пакета: max(--device-width, 32cqw) (--device-width ставит
   скрипт пакета на самом .d-console). Ряд клавиш — по новой ширине колонки (55 % − поле). Телефон и планшет без изменений. ── */
@container mcwp (min-width: 851px) {
  .wp-z.wp-z #mc-wash-programs .d-live .d-console { --lcw: max(var(--device-width, 600px), 32cqw); left: calc(var(--wp-gut, 0px) - .2044 * var(--lcw)); }
  .wp-z.wp-z #mc-wash-programs .d-live[data-model=standart] .d-console { left: calc(var(--wp-gut, 0px) - .2356 * var(--lcw)); }
  .wp-z.wp-z #mc-wash-programs .d-live[data-model=slimline] .d-console { left: calc(var(--wp-gut, 0px) - .21 * var(--lcw)); }
  .wp-z.wp-z #mc-wash-programs .d-live .d-live-result { margin-right: var(--wp-gut, 0px); }
  .wp-z.wp-z #mc-wash-programs .vk { right: var(--wp-gut, 0px); }
  .wp-z.wp-z #mc-wash-programs .d-live { --vkw: calc(55cqw - var(--wp-gut, 0px)); --vk: max(52px, (var(--vkw) - 120px) / 6 * .85); --vk-gap: calc((var(--vkw) - 6 * var(--vk)) / 5 - .2px); }
}

/* ── Живой пульт: строки меню на чёрной плите, пульт анфас на белом (владелец 2026-10-25: превью по векторному файлу «Меню ControlPanel
   ProLine» → выбрано «2» строки меню → «пульт справа, крупно» → «пульт не должен быть вставлен белой карточкой!!!» → выбрано В «Плита
   меню на белом» → «кнопки сделай крупнее, видео тоже» → «отступы слева и справа от видео должны быть одинаковыми» → «выкладывай на
   тест»). Модуль белый, как страницы товара. Строки меню (adapt-live-rows.cjs: цифра, плитка с автомобилем из векторного меню, клавиши
   сайта, подпись словами плиты; строка STOP) — на чёрной плите со скруглением 8px. Нажатая строка (.is-on — скрипт страницы) раскрывает
   .pr-open: окно ролика во всю ширину плиты (поля равны полям плиты), под ним слово программы слева, заголовок и описание справа
   (.pr-panel переезжает в нажатую строку). Клавиши 88px. Пульт — фото «01 — MagiClean_ProLine — анфас — студийный металл v6_1» на белом
   холсте 900 × 1350 (proline-front-live.cjs; корпус 19,7…80,3 % ширины холста), справа, 40 % ширины, без подложки — белое на белом;
   живой пульт всегда ProLine (скрипт пакета, adapt-package.cjs: lm = models.proline); выбор исполнения в живом пульте спрятан. ── */
.wp-z.wp-z #mc-wash-programs .d-live { background: #fff; color: #0f1420; min-height: 0; margin: 0 calc(-1 * var(--wp-br, 0px)) 0 calc(-1 * var(--wp-bl, 0px)); padding: 0 var(--wp-br, 0px) 44px var(--wp-bl, 0px); clip-path: none; overflow: visible; }
/* выбор исполнения в живом пульте снова показан (25.10 вечер: «сделай переключение между моделями пультов») */
.wp-z.wp-z #mc-wash-programs .d-live-toolbar { color: #0f1420; border-bottom: 1px solid rgba(15, 20, 32, .1); }
.wp-z.wp-z #mc-wash-programs .d-live-status { color: #0f1420; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t b { color: #0f1420; }
.wp-z.wp-z #mc-wash-programs .d-leave.lk-off .d-enter-t span { color: #5b6577; }
.wp-z.wp-z #mc-wash-programs .d-live-caption { position: static; display: flex; justify-content: space-between; margin: 40px var(--wp-gut, 0px) 0; padding-top: 20px; border-top: 1px solid rgba(15, 20, 32, .1); color: #6b7486; }
.wp-z.wp-z #mc-wash-programs .d-live .d-effect { margin: 0 !important; aspect-ratio: 16 / 9; background: #111; }
/* описание программы — на чёрной плите, шкала сайта */
.wp-z.wp-z #mc-wash-programs .d-live .mn-txt { min-width: 0; }
.wp-z.wp-z #mc-wash-programs .d-live .d-live-label { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: #ff4d52; text-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-live-label::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-live-word { margin-top: 14px !important; font-family: var(--font-display); font-size: clamp(52px, 4.6cqw, 76px) !important; font-weight: 600 !important; line-height: .95 !important; letter-spacing: -.045em !important; color: #fff; white-space: normal; text-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-live-title { margin-top: 2px !important; max-width: none; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: #fff; text-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-live-body { margin-top: 12px !important; max-width: none; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: #b9c1d1; text-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-live-tech { display: block; margin-top: 16px; max-width: none; font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.5; color: #ff4d52; text-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-program-link { margin-top: 10px; color: #fff; border-bottom-color: rgba(255, 255, 255, .35); text-shadow: none; }
.wp-z.wp-z #mc-wash-programs .d-live .d-program-link:hover { color: #ff4d52; }
/* чёрная плита и строки меню: цифра, плитка, клавиши, подпись; линии с метками-уголками, как на плите */
.wp-z.wp-z #mc-wash-programs .pr-list { --c1: clamp(56px, 5cqw, 72px); --c2: clamp(150px, 12cqw, 184px); --g: clamp(20px, 2.2cqw, 32px); min-width: 0; background: #000; border-radius: 8px; padding: 6px clamp(24px, 2.4cqw, 36px) 10px; color: #fff; }
.wp-z.wp-z #mc-wash-programs .pr-row { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.wp-z.wp-z #mc-wash-programs .pr-row:last-child { border-bottom: 0; }
.wp-z.wp-z #mc-wash-programs .pr-row:nth-child(-n+3)::after { content: ""; position: absolute; left: 0; bottom: -1px; border-left: 36px solid transparent; border-right: 36px solid transparent; border-top: 10px solid #fff; }
.wp-z.wp-z #mc-wash-programs .pr-head { display: grid; grid-template-columns: var(--c1) var(--c2) auto minmax(0, 1fr); gap: 0 var(--g); align-items: center; padding: clamp(20px, 1.8cqw, 28px) 0; }
.wp-z.wp-z #mc-wash-programs .pr-n { font-family: var(--font-sans); font-size: clamp(56px, 5cqw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; transition: opacity .3s ease; }
.wp-z.wp-z #mc-wash-programs .pr-tile { display: block; width: 100%; height: auto; aspect-ratio: 921 / 438; }
.wp-z.wp-z #mc-wash-programs .pr-keys { display: flex; gap: 16px; }
.wp-z.wp-z #mc-wash-programs .pr-keys .wk { --wk: clamp(72px, 5.7cqw, 88px); }
.wp-z.wp-z #mc-wash-programs .pr-keys .wk .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .1) calc(var(--wk) * .12) rgba(0, 0, 0, .7)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .wk[aria-pressed="true"] .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .04) rgba(255, 255, 255, .75)) drop-shadow(0 0 calc(var(--wk) * .13) rgba(255, 255, 255, .4)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .vk-red[aria-pressed="true"] .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .14) rgba(227, 30, 36, .55)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .vk-red[aria-pressed="true"] .wk-lit { opacity: .3; }
.wp-z.wp-z #mc-wash-programs .mn-cap { transition: opacity .3s ease; }
.wp-z.wp-z #mc-wash-programs .pr-head .mn-cap { max-width: 40ch; }
.wp-z.wp-z #mc-wash-programs .mn-cap b { display: block; font-family: var(--font-sans); font-size: clamp(13px, 1cqw, 16px); font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.wp-z.wp-z #mc-wash-programs .mn-cap span { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: clamp(13px, .95cqw, 15px); font-weight: 400; line-height: 1.4; color: #e6e9ee; }
.wp-z.wp-z #mc-wash-programs .mn-cap i { display: block; margin-top: 9px; font-family: var(--font-sans); font-size: clamp(11px, .8cqw, 12px); font-weight: 500; font-style: normal; line-height: 1.3; letter-spacing: .04em; color: #b9c1d1; }
.wp-z.wp-z #mc-wash-programs .pr-row:not(.is-on) .pr-n, .wp-z.wp-z #mc-wash-programs .pr-row:not(.is-on) .mn-cap { opacity: .72; } /* плитки остаются белыми, как на плите */
.wp-z.wp-z #mc-wash-programs .pr-stop .pr-head { grid-template-columns: var(--c1) minmax(0, 1fr) auto; }
.wp-z.wp-z #mc-wash-programs .pr-stop .mn-cap { grid-column: 2; }
/* нажатая строка раскрывается: окно ролика во всю ширину плиты, под ним слово слева, заголовок и описание справа */
.wp-z.wp-z #mc-wash-programs .pr-open { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1); }
.wp-z.wp-z #mc-wash-programs .pr-row.is-on .pr-open { grid-template-rows: 1fr; }
.wp-z.wp-z #mc-wash-programs .pr-open-in { min-height: 0; overflow: hidden; }
.wp-z.wp-z #mc-wash-programs .pr-panel { display: block; padding: 4px 0 clamp(28px, 2.6cqw, 40px); }
.wp-z.wp-z #mc-wash-programs .pr-panel > .d-effect { width: 100%; }
.wp-z.wp-z #mc-wash-programs .pr-panel .pr-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 var(--g); margin-top: 26px; align-items: start; min-width: 0; }
.wp-z.wp-z #mc-wash-programs .pr-txt .mn-txt { display: contents; }
.wp-z.wp-z #mc-wash-programs .pr-txt .d-live-label, .wp-z.wp-z #mc-wash-programs .pr-txt .d-live-word { grid-column: 1; }
.wp-z.wp-z #mc-wash-programs .pr-txt .d-live-title { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.wp-z.wp-z #mc-wash-programs .pr-txt .d-live-body, .wp-z.wp-z #mc-wash-programs .pr-txt .d-live-tech, .wp-z.wp-z #mc-wash-programs .pr-txt .d-program-link { grid-column: 2; }
/* широкий экран: плита слева, пульт справа крупно на белом, в высоту плиты */
@container mcwp (min-width: 851px) {
  .wp-z.wp-z #mc-wash-programs .pz { display: grid; grid-template-columns: minmax(0, 1fr) var(--pzc); gap: 0 clamp(32px, 3cqw, 48px); align-items: stretch; padding: clamp(20px, 2cqw, 32px) var(--wp-gut, 0px) 0; --pzc: clamp(420px, 40cqw, 640px); --pzw: calc(var(--pzc) / .756); }
  .wp-z.wp-z #mc-wash-programs .pz-pult { order: 2; position: relative; padding-top: calc(.05 * var(--pzc)); }
  .wp-z.wp-z #mc-wash-programs .pz-pult .d-console-area { position: static; inset: auto; height: auto; max-width: none; margin: 0; overflow: hidden; mask-image: none; }
  .wp-z.wp-z #mc-wash-programs .d-live .pz-pult .d-console { position: relative; left: auto; top: auto; width: var(--pzw); margin: 0 0 0 calc((var(--pzc) - var(--pzw)) / 2); }
  .wp-z.wp-z #mc-wash-programs .pz-pult .d-console > img { filter: none; }
}
/* телефон и планшет: пульт крупным планом на белом (кадр пакета), под ним чёрная плита со строками */
@container mcwp (max-width: 850px) {
  .wp-z.wp-z #mc-wash-programs .pz { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .wp-z.wp-z #mc-wash-programs .pz-pult { margin: 0 6%; }
  .wp-z.wp-z #mc-wash-programs .pr-list { margin: 8px 6% 0; padding: 4px 16px 8px; }
  .wp-z.wp-z #mc-wash-programs .pr-head { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "n t k" "c c c"; gap: 0 16px; padding: 20px 0; }
  .wp-z.wp-z #mc-wash-programs .pr-n { grid-area: n; font-size: 44px; }
  .wp-z.wp-z #mc-wash-programs .pr-tile { grid-area: t; }
  .wp-z.wp-z #mc-wash-programs .pr-keys { grid-area: k; gap: 10px; }
  .wp-z.wp-z #mc-wash-programs .pr-keys .wk { --wk: 64px; }
  .wp-z.wp-z #mc-wash-programs .pr-head .mn-cap { grid-area: c; margin-top: 14px; max-width: none; }
  .wp-z.wp-z #mc-wash-programs .pr-stop .pr-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c k"; }
  .wp-z.wp-z #mc-wash-programs .pr-stop .mn-cap { grid-column: auto; margin-top: 0; }
  .wp-z.wp-z #mc-wash-programs .pr-panel { padding: 4px 0 24px; }
  .wp-z.wp-z #mc-wash-programs .pr-panel .pr-txt { display: block; margin-top: 20px; }
  .wp-z.wp-z #mc-wash-programs .pr-txt .mn-txt { display: block; }
  .wp-z.wp-z #mc-wash-programs .d-live .d-live-word { font-size: 44px !important; }
  .wp-z.wp-z #mc-wash-programs .d-live .d-live-title { margin-top: 20px !important; }
  .wp-z.wp-z #mc-wash-programs .pr-row::after { border-left-width: 24px; border-right-width: 24px; border-top-width: 7px; }
  .wp-z.wp-z #mc-wash-programs .d-live-caption { margin: 32px 6% 0; }
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .pr-open, .wp-z.wp-z #mc-wash-programs .pr-n, .wp-z.wp-z #mc-wash-programs .mn-cap { transition: none; } }

/* ── Живой пульт: плита Standart — как в файле «Меню ControlPanel Standart.svg» (владелец 2026-10-25: «а где живой пульт стандарт?»;
   «смотри внимательно, там кнопки другие»; «в файле … изображение выглядит так, а ты не повторил в точности»). Второй список строк
   .pr-list[data-plate="standart"] (adapt-live-rows-std.cjs). По файлу: строки — отдельные тёмные полосы (#1c1b17) со скруглением
   и светлыми зазорами, без линий-разделителей и уголков; первая полоса двойная — строка без номера («Выбирайте предпочтительный режим
   мойки» по центру над местом цифры и плитки — клавиша — «Мойка / активным шампунем / MagicActivePower») и строка 1, между их
   подписями тонкая линия от колонки клавиш до правого края; подписи — по центру правой колонки: жирно в две строки, ниже обычным;
   клавиши — картинки с плиты (серебристый обод, серый купол; STOP / PAUSE красная, фирменный красный); STOP / PAUSE крупно слева,
   знак паузы на месте плитки, подпись по центру. Какой список показан — по исполнению (скрипт страницы: data-model; SlimLine — пока
   строки ProLine, своей плиты нет). ── */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] { background: transparent; border-radius: 0; padding: 0; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-row { background: #1c1b17; border-radius: 14px; border-bottom: 0; margin: 0 0 10px; padding: 0 clamp(20px, 2cqw, 30px); }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-row:last-child { margin-bottom: 0; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-row::after, .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-row:nth-child(-n+3)::after { content: none; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-head { padding: clamp(16px, 1.6cqw, 22px) 0; }
/* первая полоса двойная: строка без номера + строка 1, линия между подписями от колонки клавиш до края */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first { border-radius: 14px 14px 0 0; margin-bottom: 0; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first + .pr-row { border-radius: 0 0 14px 14px; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first .pr-head { position: relative; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first .pr-head::after { content: ""; position: absolute; left: calc(var(--c1) + var(--c2) + 2 * var(--g) - 12px); right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .8); }
.wp-z.wp-z #mc-wash-programs .st-hdr { grid-column: 1 / span 2; justify-self: stretch; max-width: none; text-align: center; font-family: var(--font-sans); font-size: clamp(15px, 1.2cqw, 18px); font-weight: 700; line-height: 1.3; color: #fff; transition: opacity .3s ease; }
.wp-z.wp-z #mc-wash-programs .pr-row:not(.is-on) .st-hdr { opacity: .72; }
/* плитки и подписи */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-tile { aspect-ratio: 1118 / 609; border-radius: 6px; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-keys { justify-self: center; translate: 5px 0; } /* владелец 25.10: «сдвинь кнопки вправо на 5 px» */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-head .mn-cap { max-width: none; justify-self: stretch; text-align: center; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .mn-cap b { text-transform: none; letter-spacing: 0; font-size: clamp(17px, 1.35cqw, 21px); line-height: 1.2; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .mn-cap span { margin-top: 2px; font-size: clamp(13px, 1cqw, 15px); color: #fff; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .mn-cap .st-s2 { margin-top: 10px; font-size: 13px; color: #fff; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .mn-cap i { margin-top: 2px; font-size: 13px; letter-spacing: 0; color: #fff; }
/* полоса STOP: надпись крупно слева, знак паузы на месте плитки, красная клавиша, подпись по центру */
/* те же колонки, что у строк программ: клавиша STOP — в одном вертикальном ряду с остальными (владелец 25.10: «кнопка стоп должна быть
   в одном вертикальном ряду с остальными, но только в пульте стандарт»); надпись STOP / PAUSE в колонке цифры, может выступать в зазор */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .pr-head { grid-template-columns: var(--c1) var(--c2) auto minmax(0, 1fr); }
.wp-z.wp-z #mc-wash-programs .st-stopn { grid-column: 1; font-size: clamp(22px, 1.8cqw, 28px) !important; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
.wp-z.wp-z #mc-wash-programs .st-pause { grid-column: 2; width: clamp(44px, 3.4cqw, 56px); height: auto; justify-self: center; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .pr-keys { grid-column: 3; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .mn-cap { grid-column: 4; }
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .mn-cap span { margin-top: 0; font-size: clamp(14px, 1.05cqw, 16px); }
/* клавиши плиты Standart: картинка; нажатая — чуть утоплена и светится, красная — красным */
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn { --wk: clamp(76px, 6cqw, 92px); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn .sk { display: block; width: 100%; height: 100%; transition: transform .14s ease, filter .2s ease; filter: drop-shadow(0 calc(var(--wk) * .08) calc(var(--wk) * .1) rgba(0, 0, 0, .65)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn:hover .sk { filter: drop-shadow(0 calc(var(--wk) * .08) calc(var(--wk) * .1) rgba(0, 0, 0, .65)) brightness(1.06); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn[aria-pressed="true"] .sk { transform: translateY(1.5%) scale(.975); filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .05) rgba(255, 255, 255, .8)) drop-shadow(0 0 calc(var(--wk) * .14) rgba(255, 255, 255, .45)) brightness(1.08); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn.vk-red[aria-pressed="true"] .sk { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .14) rgba(229, 36, 31, .65)) brightness(1.06); }
/* окно ролика в полосе — во всю ширину полосы */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-panel { padding-bottom: clamp(22px, 2.2cqw, 32px); }
@container mcwp (min-width: 851px) {
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first .pr-head { grid-template-columns: var(--c1) var(--c2) auto minmax(0, 1fr); }
}
@container mcwp (max-width: 850px) {
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] { margin: 8px 6% 0; padding: 0; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-row { padding: 0 16px; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first .pr-head { grid-template-areas: "h h k" "c c c"; grid-template-columns: 1fr 1fr auto; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .st-first .pr-head::after { left: 0; }
  .wp-z.wp-z #mc-wash-programs .st-hdr { grid-area: h; grid-column: auto; text-align: left; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-head .mn-cap { text-align: left; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-keys { justify-self: end; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .pr-head { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "n p k" "c c c"; gap: 0 18px; }
  .wp-z.wp-z #mc-wash-programs .st-stopn { grid-area: n; font-size: 20px !important; }
  .wp-z.wp-z #mc-wash-programs .st-pause { grid-area: p; width: 40px; justify-self: start; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .pr-keys { grid-area: k; grid-column: auto; justify-self: end; }
  .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="standart"] .pr-stop .mn-cap { grid-area: c; grid-column: auto; margin-top: 10px; }
  .wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn { --wk: 64px; }
}

/* ── Живой пульт: сворачивание окна, выбор исполнения внутри, STOP фирменного красного (владелец 2026-10-25: «при повторном нажатии
   на клавишу — видео сворачивай, в режиме живой пульт сделай переключение между моделями пультов, кнопку стоп сделай ярче красный
   цвет» → «красный сделай как на этой» — как у клавиши «Живой пульт»). data-collapsed на .d-live ставит скрипт страницы при повторном
   нажатии клавиши выбранной программы — строка остаётся отмеченной, окно с роликом сворачивается, ролик стоит. Строка «Исполнение
   пульта» с миниатюрами снова показана (прежнее display:none снято). STOP: купол клавиши ProLine перекрашен в разметке
   (adapt-stop-bright.cjs), картинка Standart перерисована из SVG тем же красным (render-std-keys.mjs); фильтров цвета нет —
   они уводили в оранжевый. ── */
.wp-z.wp-z #mc-wash-programs .d-live[data-collapsed] .pr-row.is-on .pr-open { grid-template-rows: 0fr; }
/* клавиша STOP / PAUSE мигает, пока выбрана пауза (владелец 26.10: «при нажатии кнопки пауза, она должна мигать») — на обеих плитах:
   нажатая красная картинка-клавиша (.sk-btn.vk-red[aria-pressed=true]) раз в секунду вспыхивает с красным ореолом и гаснет;
   при «уменьшить движение» — горит ровно */
/* 26.10: плавная пульсация (1,6 с ease-in-out) показана и отвергнута — «верни обратно»: резкое вкл/выкл раз в секунду */
@keyframes mc-stop-blink {
  0%, 48% { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .18) rgba(229, 36, 31, .9)) brightness(1.14); }
  52%, 100% { filter: drop-shadow(0 calc(var(--wk) * .06) calc(var(--wk) * .08) rgba(0, 0, 0, .55)) brightness(.72) saturate(.85); }
}
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn.vk-red[aria-pressed="true"] .sk { animation: mc-stop-blink 1s steps(1, end) infinite; }
/* 26.10: «и на пульте тоже сделай мигание» — клавиша STOP / PAUSE на фото пульта: вместо белого кольца нажатой клавиши — красное
   кольцо с ореолом и подсветкой купола, мигает в том же ритме (та же точка .d-hit пакета, --kd — диаметр клавиши на фото) */
@keyframes mc-hit-blink { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
.wp-z.wp-z #mc-wash-programs .d-live[data-program="pause"] .d-hit[data-action="pause"][aria-pressed="true"]::before {
  background: radial-gradient(circle at 50% 42%, rgba(255, 120, 110, .55), rgba(229, 36, 31, .35) 60%, rgba(229, 36, 31, 0) 72%);
  box-shadow: inset 0 0 0 calc(var(--kd, 30px) * .055) rgba(255, 110, 100, .95), 0 0 calc(var(--kd, 30px) * .12) calc(var(--kd, 30px) * .03) rgba(229, 36, 31, .9), 0 0 calc(var(--kd, 30px) * .7) calc(var(--kd, 30px) * .16) rgba(229, 36, 31, .6);
  animation: mc-hit-blink 1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .d-live[data-program="pause"] .d-hit[data-action="pause"][aria-pressed="true"]::before { animation: none; opacity: 1; } }
/* 26.10: из превью VUcGwbkJGe9Htqoqi6s3rA владелец выбрал «красное кольцо» (как было), «только на кнопке пролайн нужно усиливать белый
   в надписи» — на фото ProLine в момент вспышки надпись STOP / PAUSE на куполе ярче: фильтр подложки внутри круга клавиши
   (яркость и контраст самого фото под кольцом), заливка кольца над надписью прозрачнее */
.wp-z.wp-z #mc-wash-programs .d-live[data-model="proline"][data-program="pause"] .d-hit[data-action="pause"][aria-pressed="true"]::before {
  -webkit-backdrop-filter: brightness(1.22) contrast(1.4) saturate(1.1); backdrop-filter: brightness(1.22) contrast(1.4) saturate(1.1);
  background: radial-gradient(circle at 50% 42%, rgba(255, 120, 110, .18), rgba(229, 36, 31, .22) 60%, rgba(229, 36, 31, 0) 72%);
}
@media (prefers-reduced-motion: reduce) { .wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn.vk-red[aria-pressed="true"] .sk { animation: none; } }
/* плита ниже — вровень с верхом пульта (владелец 25.10: «опусти плиту немного ниже»); на телефоне отступ прежний */
@container mcwp (min-width: 851px) { .wp-z.wp-z #mc-wash-programs .pz .pr-list { margin-top: calc(.05 * var(--pzc)); } }
/* клавиши как на настоящем пульте ProLine (владелец 26.10: «выровняй кнопки как в настоящем пульте»): колонка клавиш во всех строках
   шириной в две клавиши; одиночная клавиша («Вода», «Воск», «Блеск») — по центру между «Горячей пеной» и «Активным шампунем»
   (в файле плиты: пена x=5494, шампунь x=7620, остальные x=6557 — ровно посередине); подписи встают одной колонкой */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-head .pr-keys { --wk: clamp(72px, 5.7cqw, 88px); width: calc(2 * var(--wk) + 16px); justify-content: center; }
@container mcwp (max-width: 850px) { .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-head .pr-keys { --wk: 64px; width: calc(2 * var(--wk) + 10px); } }
/* уголки и цифры — как в файле плиты (владелец 26.10: «стрелки смещены, посмотри файл, исправь»): в файле уголок — треугольник
   основанием 808 на линии и остриём 118 вниз (0,351 и 0,051 ширины плитки 2303), стоит по центру под цифрой (центр x=1170);
   цифры — по центру своей колонки («1» начинается правее «2»–«4»). У нас: цифра по центру колонки --c1, уголок по центру той же
   колонки, размеры от ширины плитки --c2; на телефоне колонка цифры 44px — уголок 44px */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-head .pr-n { justify-self: center; }
/* владелец 26.10: «стрелки должны быть под линией, а не над ней» — в файле основание треугольника лежит на линии (y 2418 при линии 2422),
   остриё на 118 ниже: top: 100% (от верха линии) вместо bottom: -1px */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-row:nth-child(-n+3)::after { top: 100%; bottom: auto; left: calc(var(--c1) / 2 - .1754 * var(--c2)); border-left-width: calc(.1754 * var(--c2)); border-right-width: calc(.1754 * var(--c2)); border-top-width: calc(.0512 * var(--c2)); }
@container mcwp (max-width: 850px) { .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-row:nth-child(-n+3)::after { left: 0; border-left-width: 22px; border-right-width: 22px; border-top-width: 7px; } }
/* STOP / PAUSE на плите ProLine — та же картинка-клавиша, что у Standart (владелец 26.10: «кнопку стоп в пролайн сделай аналогичную,
   как в стандарт»; разметка — adapt-live-stop-img.cjs), размером с остальные клавиши ProLine */
.wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-keys .sk-btn { --wk: clamp(72px, 5.7cqw, 88px); }
@container mcwp (max-width: 850px) { .wp-z.wp-z #mc-wash-programs .pr-list[data-plate="proline"] .pr-keys .sk-btn { --wk: 64px; } }
/* ── Шапка живого пульта как шапка раздела «Программы мытья» и «Исполнение пульта» под фото пульта (владелец 26.10: «заголовок
   раздела сделай как в программах мытья, исполнение пульта перенеси ниже, под пульт» → превью V7VA2FA98CQ9igDa7WNBkQ → «выкладывай
   на тест»). Разметка — adapt-live-head.cjs: .d-live-toolbar.lh = .lh-text (надпись .d-live-status с чертой вместо красной точки,
   заголовок .lh-title по шкале сайта 34–52, пояснение .lh-lead 17px серым) + красная клавиша .d-leave справа; .d-model-picker —
   в .pz-pult после .d-console-area, по центру под фото, миниатюры прежние ── */
.wp-z.wp-z #mc-wash-programs .d-live-toolbar.lh { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px var(--wp-gut, 0px) 30px; border-bottom: 1px solid rgba(15, 20, 32, .1); grid-template-columns: none; }
.wp-z.wp-z #mc-wash-programs .lh-text { min-width: 0; flex: 1 1 auto; }
.wp-z.wp-z #mc-wash-programs .lh .d-live-status { display: inline-flex; align-items: center; gap: 10px; max-width: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: #0f1420; }
.wp-z.wp-z #mc-wash-programs .lh .d-live-status::before { content: ""; flex: none; width: 28px; height: 1px; border-radius: 0; background: currentColor; }
.wp-z.wp-z #mc-wash-programs .lh-title { margin: 14px 0 0; max-width: 24ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.03em; color: #0f1420; text-wrap: balance; }
.wp-z.wp-z #mc-wash-programs .lh-lead { margin: 20px 0 0; max-width: 50ch; font-family: var(--font-sans); font-size: 17px; line-height: 1.6; color: var(--d-grey); }
.wp-z.wp-z #mc-wash-programs .lh .d-leave { flex: none; margin: 0; }
.wp-z.wp-z #mc-wash-programs .d-live .pz-pult .d-model-picker { display: block; flex: none; min-width: 0; margin: 28px 0 0; text-align: center; }
.wp-z.wp-z #mc-wash-programs .pz-pult .mc-opt-l { margin-bottom: 14px; text-align: center; }
.wp-z.wp-z #mc-wash-programs .pz-pult .pk-live { justify-content: center; gap: 32px; }
.wp-z.wp-z #mc-wash-programs .pz-pult .pk-live button { align-items: center; text-align: center; }
.wp-z.wp-z #mc-wash-programs .pz-pult .pk-live b::before { left: 50%; transform: translateX(-50%); }
@container mcwp (max-width: 850px) {
  .wp-z.wp-z #mc-wash-programs .d-live-toolbar.lh { flex-direction: column; align-items: flex-start; gap: 22px; padding: 26px 6% 24px; }
  .wp-z.wp-z #mc-wash-programs .lh .d-leave { align-self: flex-start; }
  .wp-z.wp-z #mc-wash-programs .d-live .pz-pult .d-model-picker { margin-top: 22px; }
}
.wp-z.wp-z #mc-wash-programs .pr-keys .vk-red .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .1) calc(var(--wk) * .12) rgba(0, 0, 0, .7)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .vk-red[aria-pressed="true"] .wk-svg { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .14) rgba(229, 36, 31, .65)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn.vk-red .sk { filter: drop-shadow(0 calc(var(--wk) * .08) calc(var(--wk) * .1) rgba(0, 0, 0, .65)); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn.vk-red:hover .sk { filter: drop-shadow(0 calc(var(--wk) * .08) calc(var(--wk) * .1) rgba(0, 0, 0, .65)) brightness(1.06); }
.wp-z.wp-z #mc-wash-programs .pr-keys .sk-btn.vk-red[aria-pressed="true"] .sk { filter: drop-shadow(0 calc(var(--wk) * .04) calc(var(--wk) * .06) rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--wk) * .14) rgba(229, 36, 31, .65)) brightness(1.06); }