/* Стили вида «ДС» (дизайн-система) конфигуратора. Подключаются плагином только при
   `avtogates_configurator_layout` = `ds`, строго после configurator.css; в виде `classic`
   файл не загружается. Классы этого вида — `avtogates-configurator-ds__*`, атрибуты `data-*`
   те же, что у `classic`. Справочник классов — в начале src/configurator-ds-view.js.

   Оглавление: 1 токены · 2 раскладка · 3 визуализация · 4 шаги · 5 размер · 6 варианты ·
   7 «Уточнить» · 8 кнопки · 9 панель результата · 10 форма и успех · 11 ошибки и фото ·
   12 телефон · 13 компьютер · 14 без анимаций.

   Цвета берутся из токенов темы ДС (--surface, --ink, --slab …), внутри var() стоят запасные значения
   светлой темы ДС: если токена нет, вид остаётся читаемым. Тёмная тема получается сама — её файл
   темы переопределяет те же токены. Границу телефона (720 px) держи равной MOBILE_BREAKPOINT_PX
   в src/configurator-ui.js. */

/* ---- 1. Токены вида ----
   Локальные псевдонимы --agds-* собраны в одном месте; --ag-* переназначены на них, чтобы повторно
   используемые классы configurator.css (сцена, выноски, строки сводки, фото) выглядели как ДС. */
.avtogates-configurator[data-layout="ds"] {
  --agds-surface: var(--surface, #f3f2ef);
  --agds-raised: var(--surface-raised, #ffffff);
  --agds-sunken: var(--surface-sunken, #e5e3de);
  --agds-tag: var(--fill-tag, #f0eeea);
  --agds-line: var(--line, #e2e0db);
  --agds-line-strong: var(--line-strong, #d2cfc8);
  --agds-ink: var(--ink, #17191c);
  --agds-body: var(--ink-body, #33363b);
  --agds-soft: var(--ink-soft, #44474d);
  --agds-muted: var(--ink-muted, #5b5f66);
  --agds-slab: var(--slab, #17191c);
  --agds-on-slab: var(--on-slab, #ffffff);
  --agds-on-slab-muted: var(--on-slab-muted, #b9bcc2);
  --agds-slab-line: var(--slab-line, #3a3d41);
  --agds-accent: var(--accent, #c2410c);
  --agds-on-accent: var(--on-accent, #ffffff);
  --agds-accent-on-slab: var(--accent-on-slab, #f26b47);
  --agds-disabled: var(--disabled-fill, #cfccc6);
  --agds-on-disabled: var(--on-disabled, #4a4d52);
  --agds-error-surface: var(--error-surface, #fef3f2);
  --agds-error-line: var(--error-line, #b42318);
  --agds-error-ink: var(--error-ink, #912018);
  --agds-focus: var(--focus-ring, 0 0 0 2px #f3f2ef, 0 0 0 4px #17191c);
  --agds-segment-shadow: var(--shadow-segment, 0 1px 2px rgba(0, 0, 0, .12));
  --agds-r-xs: var(--radius-xs, 6px);
  --agds-r-md: var(--radius-md, 12px);
  --agds-r-lg: var(--radius-lg, 14px);
  --agds-r-xl: var(--radius-xl, 16px);
  --agds-r-2xl: var(--radius-2xl, 18px);
  --agds-r-sheet: var(--radius-sheet, 22px);
  --agds-r-pill: var(--radius-pill, 9999px);
  --agds-hit: var(--hit-min, 44px);
  --agds-btn: var(--btn-m, 52px);
  --agds-font: var(--font-sans, "Golos Text", "Segoe UI", system-ui, sans-serif);
  --agds-numeric: var(--font-numeric, "Unbounded", "Arial Black", sans-serif);
  --agds-gap: 12px;
  /* Высота нижнего меню темы (0 — меню нет): панель результата встаёт над ним, тема задаёт значение сама.
     Единицу пишем всегда (0px): внутри calc() безразмерный 0 к px не прибавляется. */
  --avtogates-configurator-bottom-offset: 0px;

  --ag-ink: var(--agds-ink);
  --ag-paper: var(--agds-surface);
  --ag-surface: var(--agds-raised);
  --ag-surface-card: var(--agds-tag);
  --ag-surface-card-alt: var(--agds-sunken);
  --ag-pine: var(--agds-ink);
  --ag-lime: var(--agds-accent);
  --ag-line: var(--agds-line-strong);
  --ag-muted: var(--agds-muted);
  --ag-eyebrow: var(--agds-muted);
  --ag-ink-subtle: var(--agds-soft);
  --ag-error-bg: var(--agds-error-surface);
  --ag-error-border: var(--agds-error-line);
  --ag-font-body: var(--agds-font);
  --ag-font-price: var(--agds-numeric);

  /* Страницу и поля даёт тема: корень без собственного фона и внешних отступов configurator.css. */
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--agds-ink);
  font: 400 15px/1.45 var(--agds-font);
}
.avtogates-configurator[data-layout="ds"] p { margin: 0; }
.avtogates-configurator[data-layout="ds"] button,
.avtogates-configurator[data-layout="ds"] input,
.avtogates-configurator[data-layout="ds"] select { font-family: inherit; }
/* Единое кольцо фокуса ДС для всех управляющих элементов вида. */
.avtogates-configurator[data-layout="ds"] :is(button, a, input, select, summary, [role="checkbox"], [role="switch"]):focus-visible {
  outline: none;
  box-shadow: var(--agds-focus);
}
.avtogates-configurator-ds__sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 2. Раскладка (телефон: одна колонка; компьютер — раздел 13) ---- */
.avtogates-configurator-ds__layout { display: flex; flex-direction: column; gap: 16px; }
.avtogates-configurator-ds__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avtogates-configurator-ds__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avtogates-configurator-ds__panel { display: flex; flex-direction: column; gap: 12px; }
.avtogates-configurator-ds__steps { display: flex; flex-direction: column; gap: 12px; }
.avtogates-configurator-ds__form-host { min-width: 0; }

/* ---- 3. Визуализация ---- */
.avtogates-configurator-ds__scene-card {
  overflow: hidden; background: var(--agds-raised); border: 1px solid var(--agds-line); border-radius: var(--agds-r-2xl);
}
.avtogates-configurator-ds__scene-caption { padding: 10px 14px 12px; font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }

/* ---- 4. Шаги ---- */
.avtogates-configurator-ds__step {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  background: var(--agds-raised); border: 1px solid var(--agds-line); border-radius: var(--agds-r-2xl);
}
.avtogates-configurator-ds__step-head { display: flex; align-items: flex-start; gap: 12px; }
.avtogates-configurator-ds__step-number { flex: none; padding-top: 4px; font: 500 12px/16px var(--agds-numeric); letter-spacing: .04em; color: var(--agds-muted); }
.avtogates-configurator-ds__step-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avtogates-configurator-ds__step-title { margin: 0; font: 600 18px/24px var(--agds-font); color: var(--agds-ink); }
.avtogates-configurator-ds__step-note { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__step-picked { flex: none; max-width: 40%; padding-top: 4px; font: 500 13px/18px var(--agds-font); color: var(--agds-muted); text-align: right; overflow-wrap: anywhere; }
.avtogates-configurator-ds__step-picked:empty { display: none; }
.avtogates-configurator-ds__step-body { display: flex; flex-direction: column; gap: 14px; }
.avtogates-configurator-ds__substep { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--agds-line); }
.avtogates-configurator-ds__substep-title { font: 600 15px/20px var(--agds-font); color: var(--agds-ink); }

/* ---- 5. Размер проёма (шаг 01) ---- */
.avtogates-configurator-ds__size-step .avtogates-configurator-ds__step-body { gap: 18px; }
.avtogates-configurator-ds__field-label { font: 500 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.avtogates-configurator-ds__field-value { font: 600 15px/20px var(--agds-font); color: var(--agds-ink); }
.avtogates-configurator-ds__stepper { display: flex; flex-direction: column; gap: 8px; }
.avtogates-configurator-ds__stepper-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; }
.avtogates-configurator-ds__stepper-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
  background: var(--agds-surface); color: var(--agds-ink); border: 1.5px solid var(--agds-line-strong); border-radius: var(--agds-r-lg);
  font: 500 28px/1 var(--agds-font); cursor: pointer; touch-action: manipulation;
  transition: background-color .15s, border-color .15s;
}
.avtogates-configurator-ds__stepper-btn:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--agds-ink); }
.avtogates-configurator-ds__stepper-btn:disabled,
.avtogates-configurator-ds__stepper-btn[aria-disabled="true"] { color: var(--agds-on-disabled); background: var(--agds-disabled); border-color: transparent; cursor: not-allowed; }
.avtogates-configurator-ds__stepper-value { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.avtogates-configurator-ds__stepper-number { font: 500 30px/36px var(--agds-numeric); letter-spacing: -.02em; color: var(--agds-ink); }
.avtogates-configurator-ds__stepper-unit { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__tiles-group { display: flex; flex-direction: column; }
.avtogates-configurator-ds__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.avtogates-configurator-ds__tile {
  min-height: 48px; padding: 8px 6px; background: var(--agds-surface); color: var(--agds-ink);
  border: 1.5px solid var(--agds-line); border-radius: var(--agds-r-md); font: 600 15px/20px var(--agds-font);
  cursor: pointer; touch-action: manipulation; transition: background-color .15s, border-color .15s;
}
.avtogates-configurator-ds__tile[aria-pressed="true"] { background: var(--agds-ink); color: var(--agds-raised); border-color: var(--agds-ink); }
.avtogates-configurator-ds__tile:hover:not([aria-pressed="true"]) { border-color: var(--agds-line-strong); }
.avtogates-configurator-ds__tile:disabled, .avtogates-configurator-ds__tile[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Строка-флажок («Не знаю размеры», согласие): вся строка — зона касания. */
.avtogates-configurator-ds__check-row { display: flex; align-items: center; gap: 12px; min-height: var(--agds-hit); cursor: pointer; font: 400 15px/20px var(--agds-font); color: var(--agds-body); }
.avtogates-configurator-ds__check-box {
  position: relative; flex: none; width: 24px; height: 24px; background: var(--agds-raised);
  border: 1.5px solid var(--agds-line-strong); border-radius: var(--agds-r-xs); transition: background-color .15s, border-color .15s;
}
.avtogates-configurator-ds__check-row[aria-checked="true"] .avtogates-configurator-ds__check-box { background: var(--agds-ink); border-color: var(--agds-ink); }
.avtogates-configurator-ds__check-row[aria-checked="true"] .avtogates-configurator-ds__check-box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--agds-raised); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.avtogates-configurator-ds__check-row[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.avtogates-configurator-ds__measurer-cta { align-self: stretch; }

/* ---- 6. Варианты: крупные, чипы, образцы цвета, переключатель ---- */
.avtogates-configurator-ds__choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.avtogates-configurator-ds__choice {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  min-height: 64px; padding: 12px 14px; text-align: left;
  background: var(--agds-surface); color: var(--agds-ink); border: 1.5px solid var(--agds-line); border-radius: var(--agds-r-xl);
  cursor: pointer; touch-action: manipulation; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.avtogates-configurator-ds__choice:hover:not([aria-pressed="true"]) { border-color: var(--agds-line-strong); }
.avtogates-configurator-ds__choice[aria-pressed="true"] { background: var(--agds-raised); border-color: var(--agds-ink); box-shadow: inset 0 0 0 1px var(--agds-ink); }
.avtogates-configurator-ds__choice-name { font: 600 15px/20px var(--agds-font); overflow-wrap: anywhere; }
.avtogates-configurator-ds__choice-price { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__choice-price:empty { display: none; }

.avtogates-configurator-ds__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.avtogates-configurator-ds__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--agds-hit); padding: 8px 16px;
  background: var(--agds-surface); color: var(--agds-ink); border: 1.5px solid var(--agds-line); border-radius: var(--agds-r-pill);
  font: 500 14px/20px var(--agds-font); cursor: pointer; touch-action: manipulation; transition: background-color .15s, border-color .15s;
}
.avtogates-configurator-ds__chip:hover:not([aria-pressed="true"]) { border-color: var(--agds-line-strong); }
.avtogates-configurator-ds__chip[aria-pressed="true"] { background: var(--agds-ink); color: var(--agds-raised); border-color: var(--agds-ink); }
.avtogates-configurator-ds__chip-name { min-width: 0; overflow-wrap: anywhere; }
.avtogates-configurator-ds__chip-price { font: 400 13px/18px var(--agds-font); opacity: .75; }
.avtogates-configurator-ds__chip-price:empty { display: none; }
.avtogates-configurator-ds__swatch-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
/* Светлый образец (белый, слоновая кость): на светлом фоне чипа нужна видимая граница. */
.avtogates-configurator-ds__swatch-dot--light { box-shadow: inset 0 0 0 1.5px var(--agds-line-strong); }
.avtogates-configurator-ds__chip[aria-pressed="true"] .avtogates-configurator-ds__swatch-dot { box-shadow: 0 0 0 2px var(--agds-raised); }
.avtogates-configurator-ds__chip[aria-pressed="true"] .avtogates-configurator-ds__swatch-dot--light { box-shadow: 0 0 0 2px var(--agds-raised), inset 0 0 0 1.5px var(--agds-line-strong); }

/* Переключатель «Без … | С …». */
.avtogates-configurator-ds__segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--agds-tag); border-radius: var(--agds-r-lg); }
.avtogates-configurator-ds__segment {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 8px 10px; background: transparent; color: var(--agds-muted); border: 0; border-radius: var(--agds-r-md);
  text-align: center; cursor: pointer; touch-action: manipulation; transition: background-color .15s, color .15s;
}
.avtogates-configurator-ds__segment[aria-pressed="true"] { background: var(--agds-raised); color: var(--agds-ink); box-shadow: var(--agds-segment-shadow); }
.avtogates-configurator-ds__segment-name { font: 600 14px/20px var(--agds-font); }
.avtogates-configurator-ds__segment-price { font: 400 12px/16px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__segment-price:empty { display: none; }

/* Позиция недоступна по правилам каталога. */
.avtogates-configurator-ds__choice[aria-disabled="true"],
.avtogates-configurator-ds__chip[aria-disabled="true"],
.avtogates-configurator-ds__segment[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---- 7. «Уточнить комплектацию» ---- */
.avtogates-configurator-ds__extras { background: var(--agds-raised); border: 1px solid var(--agds-line); border-radius: var(--agds-r-2xl); overflow: hidden; }
.avtogates-configurator-ds__extras-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px;
  background: transparent; color: var(--agds-ink); border: 0; text-align: left; cursor: pointer; touch-action: manipulation;
}
.avtogates-configurator-ds__extras-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avtogates-configurator-ds__extras-title { font: 600 16px/22px var(--agds-font); }
.avtogates-configurator-ds__extras-picked { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__extras-icon { flex: none; width: 10px; height: 10px; border: solid var(--agds-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.avtogates-configurator-ds__extras-toggle[aria-expanded="true"] .avtogates-configurator-ds__extras-icon { transform: rotate(-135deg) translateY(-2px); }
.avtogates-configurator-ds__extras-body { display: flex; flex-direction: column; gap: 18px; padding: 4px 16px 18px; border-top: 1px solid var(--agds-line); }
.avtogates-configurator-ds__extras-sections { display: flex; flex-direction: column; gap: 18px; }
.avtogates-configurator-ds__extras-body > .avtogates-configurator-ds__extra:first-child,
.avtogates-configurator-ds__extras-sections > .avtogates-configurator-ds__extra:first-child { margin-top: 14px; }
.avtogates-configurator-ds__extra { display: flex; flex-direction: column; gap: 10px; }
.avtogates-configurator-ds__extra-title { font: 600 15px/20px var(--agds-font); color: var(--agds-ink); }
.avtogates-configurator-ds__extra-note, .avtogates-configurator-ds__direction-note, .avtogates-configurator-ds__distance-note { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }

/* ---- 8. Кнопки: радиус lg, Golos 600 16/20, высота 52 ---- */
.avtogates-configurator-ds__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--agds-btn); padding: 16px 20px;
  border: 1.5px solid transparent; border-radius: var(--agds-r-lg); font: 600 16px/20px var(--agds-font);
  text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: filter .15s, background-color .15s, border-color .15s;
}
.avtogates-configurator-ds__button--full { display: flex; width: 100%; }
.avtogates-configurator-ds__button--primary { background: var(--agds-accent); color: var(--agds-on-accent); }
.avtogates-configurator-ds__button--primary:hover:not(:disabled, [aria-disabled="true"]) { filter: brightness(1.08); }
.avtogates-configurator-ds__button--outline { background: transparent; color: var(--agds-ink); border-color: var(--agds-ink); }
.avtogates-configurator-ds__button--outline:hover:not(:disabled, [aria-disabled="true"]) { background: var(--agds-tag); }
.avtogates-configurator-ds__button--link { min-height: var(--agds-hit); padding: 10px 8px; background: transparent; color: var(--agds-ink); text-decoration: underline; text-underline-offset: 3px; }
.avtogates-configurator-ds__button:disabled,
.avtogates-configurator-ds__button[aria-disabled="true"] { background: var(--agds-disabled); color: var(--agds-on-disabled); border-color: transparent; text-decoration: none; cursor: not-allowed; }

/* ---- 9. Панель результата ----
   Цвета панели — через локальные --agds-r-*: на телефоне панель тёмная (--slab), на компьютере светлая карточка. */
.avtogates-configurator-ds__result {
  --agds-r-bg: var(--agds-slab);
  --agds-r-ink: var(--agds-on-slab);
  --agds-r-muted: var(--agds-on-slab-muted);
  --agds-r-line: var(--agds-slab-line);
  display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 20px;
  background: var(--agds-r-bg); color: var(--agds-r-ink); border-radius: var(--agds-r-sheet);
}
.avtogates-configurator-ds__result-main { display: flex; flex-direction: column; gap: 4px; }
.avtogates-configurator-ds__result-label { font: 500 13px/18px var(--agds-font); color: var(--agds-r-muted); }
.avtogates-configurator-ds__result-price { font: 500 30px/36px var(--agds-numeric); letter-spacing: -.02em; color: var(--agds-r-ink); overflow-wrap: anywhere; }
.avtogates-configurator-ds__result-range, .avtogates-configurator-ds__result-opening, .avtogates-configurator-ds__result-note,
.avtogates-configurator-ds__result-breakdown { font: 400 13px/18px var(--agds-font); color: var(--agds-r-muted); }
.avtogates-configurator-ds__result-note:empty { display: none; }
.avtogates-configurator-ds__result-summary { font: 500 14px/20px var(--agds-font); color: var(--agds-r-ink); overflow-wrap: anywhere; }
.avtogates-configurator-ds__result-summary:empty { display: none; }
/* Ожидание пересчёта: сумма приглушена, рядом — «Пересчитываем…». */
.avtogates-configurator-ds__result[aria-busy="true"] .avtogates-configurator-ds__result-price { opacity: .45; }
.avtogates-configurator-ds__result-pending { font: 500 13px/18px var(--agds-font); color: var(--agds-r-muted); }
/* Каталог недоступен / individual: сообщение и действия вместо цены. */
.avtogates-configurator-ds__result-error { display: flex; flex-direction: column; gap: 10px; font: 500 14px/20px var(--agds-font); color: var(--agds-r-ink); }
.avtogates-configurator-ds__result .avtogates-configurator-ds__button--outline,
.avtogates-configurator-ds__result .avtogates-configurator-ds__button--link { color: var(--agds-r-ink); border-color: var(--agds-r-ink); }
.avtogates-configurator-ds__result .avtogates-configurator-ds__button--link { border-color: transparent; }
.avtogates-configurator-ds__result .avtogates-configurator-ds__button--outline:hover:not(:disabled, [aria-disabled="true"]) { background: var(--agds-r-line); }
.avtogates-configurator-ds__result .avtogates-configurator-ds__button:focus-visible { box-shadow: 0 0 0 2px var(--agds-r-bg), 0 0 0 4px var(--agds-r-ink); }
.avtogates-configurator-ds__result-cta { width: 100%; gap: 0; background: var(--agds-accent-on-slab); color: var(--agds-slab); }
/* Базовая кнопка — inline-flex с gap: 8px, а значков в главной кнопке нет: без gap: 0 текст и хвост подписи («на замере»)
   становятся отдельными flex-элементами и между ними встаёт лишний промежуток. pre-wrap сохраняет ведущий пробел хвоста
   как обычный пробел (в flex-элементе он иначе схлопывается). На телефоне хвост скрыт правилом раздела 12. */
.avtogates-configurator-ds__result-cta-tail { white-space: pre-wrap; }
.avtogates-configurator-ds__result-cta-note { font: 400 13px/18px var(--agds-font); color: var(--agds-r-muted); text-align: center; }
.avtogates-configurator-ds__result-trust { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font: 400 13px/18px var(--agds-font); color: var(--agds-r-muted); }

/* ---- 10. Форма заявки и успех ---- */
.avtogates-configurator-ds__form, .avtogates-configurator-ds__sent {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px;
  background: var(--agds-raised); border: 1px solid var(--agds-line); border-radius: var(--agds-r-2xl);
}
/* «Свернуть» — текстовая кнопка-ссылка в начале формы: закрывает форму и возвращает панель результата. */
.avtogates-configurator-ds__form-collapse {
  align-self: flex-start; min-height: var(--agds-hit); margin: -6px -8px -4px; padding: 10px 8px; border: 0; background: transparent;
  color: var(--agds-ink); font: 600 15px/20px var(--agds-font); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; touch-action: manipulation; border-radius: var(--agds-r-lg);
}
.avtogates-configurator-ds__form-collapse:hover { text-decoration-thickness: 2px; }
.avtogates-configurator-ds__form-title { margin: 0; font: 600 20px/26px var(--agds-font); color: var(--agds-ink); }
.avtogates-configurator-ds__form-lead { font: 400 15px/22px var(--agds-font); color: var(--agds-body); }
.avtogates-configurator-ds__form-terms { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__config { background: var(--agds-surface); border: 1px solid var(--agds-line); border-radius: var(--agds-r-xl); }
.avtogates-configurator-ds__config-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--agds-hit); padding: 12px 14px; cursor: pointer; list-style: none; }
.avtogates-configurator-ds__config-summary::-webkit-details-marker { display: none; }
.avtogates-configurator-ds__config-text { display: flex; flex-direction: column; gap: 2px; }
.avtogates-configurator-ds__config-price { font: 500 20px/26px var(--agds-numeric); color: var(--agds-ink); }
.avtogates-configurator-ds__config-hint { font: 500 13px/18px var(--agds-font); color: var(--agds-muted); text-decoration: underline; text-underline-offset: 3px; }
.avtogates-configurator-ds__config-hint-open, .avtogates-configurator-ds__config[open] .avtogates-configurator-ds__config-hint-closed { display: none; }
.avtogates-configurator-ds__config[open] .avtogates-configurator-ds__config-hint-open { display: inline; }
.avtogates-configurator-ds__summary-list { padding: 0 14px 8px; }
.avtogates-configurator-ds__status { min-height: 0; font: 500 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator-ds__status:empty { display: none; }
.avtogates-configurator__status--error.avtogates-configurator-ds__status { padding: 10px 12px; background: var(--agds-error-surface); border-left: 3px solid var(--agds-error-line); border-radius: var(--agds-r-md); color: var(--agds-error-ink); font-weight: 600; }

.avtogates-configurator-ds__fields { display: flex; flex-direction: column; gap: 14px; }
.avtogates-configurator-ds__field { display: flex; flex-direction: column; gap: 6px; }
.avtogates-configurator-ds__field input, .avtogates-configurator-ds__field select {
  width: 100%; min-height: var(--agds-btn); padding: 12px 14px; background: var(--agds-surface); color: var(--agds-ink);
  border: 1.5px solid var(--agds-line-strong); border-radius: var(--agds-r-lg); font: 500 16px/22px var(--agds-font);
}
.avtogates-configurator-ds__field input::placeholder { color: var(--agds-muted); opacity: 1; }
.avtogates-configurator-ds__field input:focus-visible, .avtogates-configurator-ds__field select:focus-visible { border-color: var(--agds-ink); }

/* Переключатель «Перезвоним через 15 минут». */
.avtogates-configurator-ds__switch {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left;
  background: var(--agds-surface); color: var(--agds-ink); border: 1.5px solid var(--agds-line); border-radius: var(--agds-r-lg);
  cursor: pointer; touch-action: manipulation;
}
.avtogates-configurator-ds__switch-track { display: flex; align-items: center; flex: none; width: 48px; height: 28px; padding: 3px; background: var(--agds-line-strong); border-radius: var(--agds-r-pill); transition: background-color .18s; }
.avtogates-configurator-ds__switch-knob { width: 22px; height: 22px; background: var(--agds-raised); border-radius: 50%; transition: transform .18s; }
.avtogates-configurator-ds__switch[aria-checked="true"] .avtogates-configurator-ds__switch-track { background: var(--agds-accent); }
.avtogates-configurator-ds__switch[aria-checked="true"] .avtogates-configurator-ds__switch-knob { transform: translateX(20px); }
.avtogates-configurator-ds__switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avtogates-configurator-ds__switch-title { font: 600 15px/20px var(--agds-font); }

.avtogates-configurator-ds__more { display: flex; flex-direction: column; gap: 14px; }
.avtogates-configurator-ds__more[open] { padding: 0 0 4px; }
.avtogates-configurator-ds__more-summary { display: flex; align-items: center; min-height: var(--agds-hit); font: 600 15px/20px var(--agds-font); color: var(--agds-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.avtogates-configurator-ds__more > :not(summary) { margin-top: 14px; }
.avtogates-configurator-ds__slots { display: flex; flex-direction: column; gap: 8px; }

.avtogates-configurator-ds__sent { align-items: flex-start; }
.avtogates-configurator-ds__sent-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--agds-accent); color: var(--agds-on-accent); border-radius: 50%; font: 600 24px/1 var(--agds-font); }
.avtogates-configurator-ds__sent-message { font: 600 18px/26px var(--agds-font); color: var(--agds-ink); }
.avtogates-configurator-ds__sent-config { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 14px; background: var(--agds-surface); border-radius: var(--agds-r-xl); font: 400 14px/20px var(--agds-font); color: var(--agds-body); }
.avtogates-configurator-ds__sent-price { font: 500 20px/26px var(--agds-numeric); color: var(--agds-ink); }
.avtogates-configurator-ds__sent .avtogates-configurator-ds__button { align-self: stretch; }
.avtogates-configurator-ds__sent-mail { font: 500 15px/22px var(--agds-font); color: var(--agds-body); }
.avtogates-configurator-ds__sent-mail[hidden] { display: none; }

/* Блок «Сохранить расчёт» (0.9.0): переключатель Telegram | Почта использует общий __segmented. */
.avtogates-configurator-ds__spec { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--agds-line); }
.avtogates-configurator-ds__spec-title { margin: 0; font: 600 17px/24px var(--agds-font); color: var(--agds-ink); }
.avtogates-configurator-ds__spec-lead { margin: 0; font: 400 14px/20px var(--agds-font); color: var(--agds-body); }
.avtogates-configurator-ds__spec-email { display: flex; flex-direction: column; gap: 12px; }
/* Строка под кнопкой «Прислать спецификацию» (только режим «Почта»): шрифт задаёт __form-terms, ссылки подчёркнуты. */
.avtogates-configurator-ds__spec-send-terms[hidden] { display: none; }
.avtogates-configurator-ds__spec-send-terms a { color: inherit; text-decoration: underline; }
.avtogates-configurator-ds__spec-email[hidden], .avtogates-configurator-ds__spec [data-spec-telegram-fields][hidden] { display: none; }

/* ---- 11. Ошибки полей и блок фото (классы создаёт JS, они общие с видом classic) ---- */
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__error { margin: 4px 0 0; font: 500 13px/18px var(--agds-font); color: var(--agds-error-ink); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator-ds__field :is(input, select).avtogates-configurator__field--error { border-color: var(--agds-error-line); background: var(--agds-error-surface); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__checkbox-row--error .avtogates-configurator-ds__check-box { border-color: var(--agds-error-line); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__photos { display: flex; flex-direction: column; gap: 8px; }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__photos.avtogates-configurator__photos--error { padding: 10px; border: 1.5px solid var(--agds-error-line); border-radius: var(--agds-r-lg); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__dropzone { min-height: 88px; border: 1.5px dashed var(--agds-line-strong); border-radius: var(--agds-r-lg); background: var(--agds-surface); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__dropzone--drag { border-color: var(--agds-ink); background: var(--agds-tag); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__file-input:focus-visible + .avtogates-configurator__dropzone { outline: none; box-shadow: var(--agds-focus); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__help { font: 400 13px/18px var(--agds-font); color: var(--agds-muted); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__summary-row { padding: 10px 0; border-bottom: 1px solid var(--agds-line); }
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__summary-row--price dd { font: 500 20px/26px var(--agds-numeric); }

/* Сброс кнопок вида ДС: нулевая специфичность, чтобы font/color из правил классов ДС (в т. ч. главной кнопки
   панели) побеждали; общий сброс classic в configurator.css сужен до корней не ДС. */
:where(.avtogates-configurator[data-layout="ds"]) button { font: inherit; color: inherit; }
/* Бирка направления отката: в configurator.css фон светлый, а текст --ag-ink в тёмной теме ДС тоже светлый.
   Оформляем как соседние бирки размеров (raised + ink). */
.avtogates-configurator[data-layout="ds"] .avtogates-configurator__dim-direction {
  background: var(--agds-raised);
  background: color-mix(in srgb, var(--agds-raised) 92%, transparent);
  color: var(--agds-ink);
}

/* ---- 12. Телефон (до 720 px): одна колонка, низкая панель результата липнет к низу корня ----
   Решение владельца 22.10.2026, «вариант 1»: одна тёмная строка над нижним меню темы — слева сумма и под ней
   одна второстепенная строка, справа главная кнопка. Высота в обычном состоянии 64 px. */
@media (max-width: 720px) {
  /* Карточка визуализации не липкая: идёт первой в потоке. Панель — последний узел раскладки:
     sticky держит её у нижнего края окна внутри корня (вплотную к нижнему меню темы), у конца
     калькулятора она встаёт на своё место. Ширина — во всю ширину экрана, а не корня. */
  .avtogates-configurator-ds__result {
    position: sticky; bottom: var(--avtogates-configurator-bottom-offset, 0px);
    z-index: 5; margin-inline: calc(50% - 50vw);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 8px;
    min-height: 64px; box-sizing: border-box; border-radius: 16px 16px 0 0;
    /* Нижний отступ: смещение темы (--avtogates-configurator-bottom-offset) уже включает безопасную зону iPhone,
       поэтому над поднятой панелью отступ остаётся 10px; при смещении 0 (меню скрыто, панель у края экрана)
       панель сама добавляет безопасную зону. */
    padding: 10px 12px max(10px, calc(10px + env(safe-area-inset-bottom, 0px) - var(--avtogates-configurator-bottom-offset, 0px))) 16px;
  }
  .avtogates-configurator-ds__result-main { gap: 0; min-width: 0; }
  .avtogates-configurator-ds__result-price { font-size: 22px; line-height: 26px; }
  /* Подробности («для проёма…», «В цене: …», пояснения под кнопкой, строки доверия) на телефоне скрыты, как и
     «Ориентировочно» (приблизительность передаёт знак ≈) и строка выбора; «В цене» и «Замерщик проверит…»
     остаются в форме заявки. */
  .avtogates-configurator-ds__result-label, .avtogates-configurator-ds__result-summary,
  .avtogates-configurator-ds__result-opening, .avtogates-configurator-ds__result-breakdown,
  .avtogates-configurator-ds__result-cta-note, .avtogates-configurator-ds__result-trust { display: none; }
  /* Вторая строка под суммой — ровно одна, по приоритету: сообщение статуса (individual, лимит, каталог
     недоступен) > пометка замерщика («Не знаю размеры») > вилка. Статус ставит updatePriceDisplay()
     в data-quote-status карточки. */
  .avtogates-configurator-ds__result-range, .avtogates-configurator-ds__result-note {
    font-size: 12px; line-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .avtogates-configurator-ds__result-note[data-price-note] { display: none; white-space: normal; }
  .avtogates-configurator-ds__result[data-quote-status="individual"] .avtogates-configurator-ds__result-note[data-price-note],
  .avtogates-configurator-ds__result[data-quote-status="rate_limited"] .avtogates-configurator-ds__result-note[data-price-note],
  .avtogates-configurator-ds__result[data-quote-status="unavailable"] .avtogates-configurator-ds__result-note[data-price-note] { display: block; }
  .avtogates-configurator-ds__result[data-quote-status="individual"] .avtogates-configurator-ds__result-range,
  .avtogates-configurator-ds__result[data-quote-status="rate_limited"] .avtogates-configurator-ds__result-range,
  .avtogates-configurator-ds__result[data-quote-status="unavailable"] .avtogates-configurator-ds__result-range { display: none; }
  /* «Не знаю размеры»: пометка вместо вилки. Без поддержки :has видны обе строки — это допустимо. */
  .avtogates-configurator-ds__result-main:has([data-measurer-note]:not([hidden])) [data-price-range] { display: none; }
  /* «Пересчитываем…» — только для экранного диктора (role=status), не на глаз: строка не мигает при каждом
     нажатии; сумма по-прежнему приглушается по aria-busy. */
  .avtogates-configurator-ds__result-pending {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* Главная кнопка: компактная, подпись — короткая («Зафиксировать цену»); остаток подписи скрыт визуально, но
     входит в доступное имя кнопки. */
  .avtogates-configurator-ds__result-cta {
    position: relative; width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; white-space: nowrap;
  }
  .avtogates-configurator-ds__result-cta-tail {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* Редкие состояния, где панель выше 64 px. Длинная подпись individual переносится внутри кнопки и не шире
     ~55% строки; */
  .avtogates-configurator-ds__result[data-quote-status="individual"] .avtogates-configurator-ds__result-cta {
    white-space: normal; text-align: center; max-width: 55vw; padding-block: 6px;
  }
  /* блок ошибки каталога занимает всю ширину (панель перестраивается в колонку). */
  .avtogates-configurator-ds__result-error { grid-column: 1 / -1; }
  .avtogates-configurator-ds__result:has(> [data-catalog-error]:not([hidden])) { display: flex; flex-direction: column; align-items: stretch; }
}

/* ---- 13. Компьютер (от 721 px): шаги слева, липкая карточка справа ---- */
@media (min-width: 721px) {
  /* Колонка шагов и правая колонка. __main раскрыт (display: contents), чтобы форма заявки могла встать
     в правую колонку под карточку, а шаги остались в левой. */
  .avtogates-configurator-ds__layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); grid-template-rows: auto 1fr; column-gap: 28px; row-gap: 16px; align-items: start;
  }
  .avtogates-configurator-ds__main { display: contents; }
  .avtogates-configurator-ds__panel { grid-column: 1; grid-row: 1 / -1; }
  /* Визуализация, цена, кнопка и строка доверия — одна липкая колонка (панель результата переносит сюда управляющий код). */
  .avtogates-configurator-ds__aside {
    grid-column: 2; grid-row: 1 / -1; position: sticky; top: calc(var(--header-h, 60px) + 16px); align-self: start;
  }
  .avtogates-configurator-ds__form-host { grid-column: 2; grid-row: 2; }
  /* Форма открыта: колонка перестаёт липнуть, форма раскрывается под карточкой в той же колонке. */
  .avtogates-configurator-ds__layout:has(.avtogates-configurator-ds__form-host:not([hidden])) .avtogates-configurator-ds__aside { grid-row: 1; position: static; }
  /* Если панель результата ещё не перенесена в колонку — она стоит под визуализацией. */
  .avtogates-configurator-ds__layout > .avtogates-configurator-ds__result { grid-column: 2; grid-row: 1 / -1; align-self: end; }
  /* На компьютере панель — светлая карточка с рамкой, а не тёмный лист. */
  .avtogates-configurator-ds__result {
    --agds-r-bg: var(--agds-raised);
    --agds-r-ink: var(--agds-ink);
    --agds-r-muted: var(--agds-muted);
    --agds-r-line: var(--agds-tag);
    padding: 18px 20px 20px; border: 1px solid var(--agds-line); border-radius: var(--agds-r-2xl);
  }
  .avtogates-configurator-ds__result-cta { background: var(--agds-accent); color: var(--agds-on-accent); }
  .avtogates-configurator-ds__result-price { font-size: 32px; line-height: 40px; }
  .avtogates-configurator-ds__form, .avtogates-configurator-ds__sent { padding: 20px; }
}

/* ---- 14. Без анимаций ---- */
@media (prefers-reduced-motion: reduce) {
  .avtogates-configurator[data-layout="ds"] *,
  .avtogates-configurator[data-layout="ds"] *::before,
  .avtogates-configurator[data-layout="ds"] *::after { transition: none; animation: none; }
}