/* Start:/local/templates/md2019/css/md-fonts.css?1783690075758*/
/* ───── Manrope (variable, оси веса 400–700; кириллица+латиница; woff2-only) ─────
   Один variable-файл покрывает все используемые в ДС веса:
   400 (--fw-regular), 500 (--fw-medium), 600 (--fw-semibold), 700 (--fw-bold).
   Сабсет: latin + cyrillic + ₽ (U+20BD). Греческий/вьетнамский вырезаны. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/local/templates/md2019/fonts/manrope-v20-cyrillic_latin-var.woff2') format('woff2') tech('variations'),
       url('/local/templates/md2019/fonts/manrope-v20-cyrillic_latin-var.woff2') format('woff2-variations');
}

/* End */


/* Start:/local/templates/md2019/css/md-tokens.css?178869186510192*/
/* =========================================================================
   Design System Tokens
   ========================================================================= */
:root {
  --navy-950: #001223;
  --navy-900: #001C38;
  --navy-800: #0B2B48;
  --navy-700: #1C3E5C;
  --navy-600: #355877;
  --navy-500: #597A96;
  --navy-400: #8AA4BC;
  --navy-300: #B8CBDB;
  --navy-200: #DCE5EE;
  --navy-100: #EEF2F7;
  --navy-050: #F6F8FB;

  --yellow-700: #8A6314;
  --yellow-600: #B78520;
  --yellow-500: #E3A82E;
  --yellow-400: #FFC94A;
  --yellow-300: #FFDA7E;
  --yellow-200: #FFE9AC;
  --yellow-100: #FFF4D6;
  --yellow-050: #FFFAEC;

  --ink-950: #0E1420;
  --ink-700: #3A4354;
  --ink-600: #656E7D;   /* добавлен в шкалу 2026-08-12: значение использовалось
                           text-tertiary/placeholder мимо шкалы. 5.15:1 на белом. */
  --ink-500: #6B7585;
  --ink-400: #98A0AE;
  --ink-300: #C4CAD4;
  --ink-200: #E2E5EB;
  --ink-150: #ECEEF2;
  --ink-100: #F2F3F6;
  --ink-050: #F8F8F5;
  --paper:   #FFFFFF;

  --success-600: #2D7A4A;
  --success-500: #3E9A5F;
  --success-100: #E6F3EB;
  --success-050: #F2F9F4;
  --error-600: #B23A3A;
  --error-500: #D04A4A;
  --error-100: #FAE8E8;
  --error-050: #FDF4F4;
  --warning-600: #976013;
  --warning-500: #C78422;
  --warning-100: #FBEED5;
  --warning-050: #FDF7E7;
  --info-600: #2A5A8F;
  --info-500: #3A74AC;
  --info-100: #E3EDF7;
  --info-050: #F1F6FB;

  --bg-app:          #ffffff;   /* фон КОНТЕНТА — белый (решение 2026-08-12) */
  --bg-shell:        var(--navy-050);  /* «ушки» — поля по бокам от контента.
                                          Холодный серый в тон палитре (решение 2026-08-12).
                                          Той же интенсивности, что прежний тёплый #F8F8F5. */
  --bg-surface:      var(--paper);
  /* Вторая поверхность: вложенная панель, чередование строк таблицы,
     блок внутри карточки. Пока не применён — роль зарезервирована. */
  --bg-surface-alt:  var(--ink-100);
  /* Тёмная поверхность и текст на ней — пара, использовать только вместе.
     Под подвал и тёмные промо-блоки. Пока не применены. */
  --bg-inverse:      var(--navy-900);

  --text-primary:    var(--ink-950);
  --text-secondary:  var(--ink-700);
  --text-tertiary:   var(--ink-600);
  --text-placeholder:var(--ink-600);
  --text-disabled:   var(--ink-300);
  --text-inverse:    var(--paper);
  --text-link:       var(--navy-800);
  --text-on-primary: var(--navy-900);

  --border-subtle:   var(--ink-150);
  --border-default:  var(--ink-200);
  /* Заметная граница для выделенного блока (выбранный тариф доставки,
     активная карточка). Пока не применена — роль зарезервирована. */
  --border-strong:   var(--navy-300);
  /* Цвет индикатора фокуса. navy-600 = 7.46:1 на белом, 4.87:1 на yellow-400 —
     проходит WCAG 2.1 SC 1.4.11 (порог 3:1) на всех фонах ДС.
     Вариант B из b4-focus-ring.md, утверждён 2026-08-12. */
  --border-focus:    var(--navy-600);
  /* Граница ИНТЕРАКТИВНЫХ контролов (input, select, qty, search, checkbox, radio).
     WCAG 2.1 SC 1.4.11 требует 3:1 для границ элементов управления.
     #8A93A1 на белом = 3.10:1. Декоративные границы (карточки, меню,
     разделители) под это требование не подпадают — там остаётся --border-default. */
  --border-input:    #8A93A1;

  /* --accent / --accent-strong / --accent-soft удалены 2026-08-12.
     Они дублировали --yellow-*, но их никто не использовал: компоненты брали
     жёлтый напрямую. Семантический алиас поверх палитры оправдан, когда акцентов
     несколько или они меняются; здесь акцент один и он же бренд. Лишний слой
     только создавал обещание, которого система не выполняла. */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --space-scale: 1;
  --space-0: 0;
  --space-1: calc(4px * var(--space-scale));
  --space-2: calc(8px * var(--space-scale));
  --space-3: calc(12px * var(--space-scale));
  --space-4: calc(16px * var(--space-scale));
  --space-5: calc(20px * var(--space-scale));
  --space-6: calc(24px * var(--space-scale));
  --space-8: calc(32px * var(--space-scale));
  --space-10: calc(40px * var(--space-scale));
  --space-12: calc(48px * var(--space-scale));
  --space-16: calc(64px * var(--space-scale));
  --space-20: calc(80px * var(--space-scale));

  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --text-h1-size:       clamp(32px, 3vw, 40px);
  --text-h1-lh:         1.15;
  --text-h2-size:       clamp(24px, 2.2vw, 30px);
  --text-h2-lh:         1.2;
  --text-h3-size:       clamp(20px, 1.6vw, 22px);
  --text-h3-lh:         1.3;
  --text-h4-size:       18px;
  --text-h4-lh:         1.35;
  --text-body-size:     15px;
  --text-body-lh:       1.55;
  --text-body-sm-size:  13px;
  --text-body-sm-lh:    1.5;
  --text-caption-size:  12px;
  --text-caption-lh:    1.4;
  /* Мельче caption — только для плавающих подписей полей и служебных меток
     внутри компонентов. В контентном тексте не использовать: 11px ниже
     комфортного минимума для чтения. */
  --text-label-size:    11px;

  /* Размеры иконок. Отдельная шкала, потому что --space-* по П3 запрещено
     использовать для размеров, а --text-* — это про текст, не про графику.
     Иконка масштабируется от font-size родителя (.ph = 1em), поэтому токен
     ставится именно в font-size. */
  --icon-sm: 14px;   /* подсказки полей, чипы */
  --icon-md: 18px;   /* кнопки, поля, тосты, алерты — размер по умолчанию */
  --icon-lg: 22px;   /* акценты в контролах, галочка выбора */
  --icon-xl: 28px;   /* пустые состояния, крупные иллюстративные иконки */

  --shadow-xs: 0 1px 0 rgba(0, 28, 56, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 28, 56, 0.06), 0 0 1px rgba(0,28,56,0.04);
  --shadow-md: 0 4px 12px rgba(0, 28, 56, 0.06), 0 1px 2px rgba(0,28,56,0.05);
  --shadow-lg: 0 12px 32px rgba(0, 28, 56, 0.10), 0 2px 6px rgba(0,28,56,0.05);
  --shadow-xl: 0 24px 64px rgba(0, 28, 56, 0.14), 0 4px 12px rgba(0,28,56,0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 28, 56, 0.28);
  --shadow-focus-danger: 0 0 0 3px rgba(208, 74, 74, 0.22);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;

  /* Слои. ДС НЕ владеет слоем оверлеев — попапы и галереи делает Fancybox v6
     (решение 2026-08-12). Занимаем только два уровня, и оба выше Fancybox:
     .fancybox__dialog = 1050, поэтому селект внутри попапа и тост поверх попапа
     должны быть выше, иначе они откроются под ним.
     Живые слои сайта для справки: #navbar 1000, .tfl-popup 1001, Fancybox 1050. */
  --z-backdrop: 110;    /* затемнение под открытым списком поиска: ниже .main-header (z 120), выше контента */
  --z-dropdown: 1060;   /* .md-select__menu, .md-sort__menu, .md-menu */
  --z-toast:    1070;   /* тост виден всегда, включая поверх попапа */

  --container-desktop: 1280px;

  /* Сетка (каркас страницы) — по утверждённой дизайн-системе.
     Контент центрируется и не растекается шире --container-desktop (1280).
     Значения адаптивны (мобайл-first): база — мобайл, оверрайды по брейкам 768/1440
     в @media ниже. Боковое поле (--grid-margin) — это боковой padding контейнера.
       мобайл ≤767 : 4 колонки, gutter 12, поле 16
       планшет 768 : 8 колонок, gutter 16, поле 32
       десктоп 1440: 12 колонок, gutter 24, поле 32 */
  --grid-columns: 4;
  --grid-gutter: var(--space-3);   /* 12px */
  --grid-margin: var(--space-4);   /* 16px */

  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
}

/* Адаптив сетки (каркас) — оверрайды грид-токенов по брейкам дизайн-системы.
   База (мобайл) — в :root выше; здесь только то, что меняется. */
@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-gutter: var(--space-4);   /* 16px */
    --grid-margin: var(--space-8);   /* 32px */
  }
}
@media (min-width: 1440px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: var(--space-6);   /* 24px; поле остаётся 32px, контент капается 1280 */
  }
}

/* End */


/* Start:/local/templates/md2019/css/md-components.css?178904610153714*/
/* =========================================================================
   DS Components
   ========================================================================= */

[class*="md-"] { box-sizing: border-box; }

/* ── Каркас страницы ──
   Добавлено 2026-08-12: токены --container-desktop и --bg-shell были заведены,
   но применять их было некуда — контейнера в системе не существовало,
   каждая страница ограничивала ширину по-своему.

   .md-page  — оболочка во всю ширину. Несёт серый фон «ушек».
   .md-container — контент. Ограничен по ширине и центрирован.

   Боковой padding обязателен: без него на узком экране текст упирается в край.  */
.md-page {
  background: var(--bg-shell);
  min-height: 100%;
}
.md-container {
  max-width: var(--container-desktop);
  margin-inline: auto;
  /* Боковое поле = грид-токен (16px мобайл / 32px ≥768) — один источник с сеткой ДС.
     Раньше был жёстко --space-6 (24px) с брейком 601; дизайн-система утвердила поле 32px. */
  padding-inline: var(--grid-margin);
  background: var(--bg-app);
}
/* Контент во всю ширину (баннер, карта) — вынести из контейнера,
   а не растягивать отрицательными margin. */
.md-container--flush { padding-inline: 0; }

/* ── Секционный ритм ── */
/* Заскоуплено под .md-scope: голое section+section меняло бы вертикальные отступы
   у ВСЕХ существующих <section> сайта (md-components подключается глобально). */
.md-scope section + section { margin-top: var(--space-8); }
@media (min-width: 601px) {
  .md-scope section + section { margin-top: var(--space-10); }
}

/* ── Button ── */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: var(--control-height-md);
  padding: 0 var(--space-5); border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold); font-size: var(--text-body-size);
  line-height: 1; letter-spacing: -0.002em; white-space: nowrap; user-select: none;
  border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
.md-btn:active:not(:disabled) { transform: translateY(1px); }
.md-btn:disabled { cursor: not-allowed; opacity: 1; }
.md-btn .ph { font-size: var(--icon-md); line-height: 1; }

.md-btn--primary { background: var(--yellow-400); color: var(--text-on-primary); }
.md-btn--primary:hover:not(:disabled) { background: var(--yellow-500); }
.md-btn--primary:active:not(:disabled) { background: var(--yellow-600); color: var(--text-on-primary); }
.md-btn--primary:focus-visible { box-shadow: var(--shadow-focus); }
.md-btn--primary:disabled { background: var(--ink-150); color: var(--text-disabled); }

.md-btn--outline {
  background: transparent; border-color: var(--navy-900); color: var(--text-primary);
}
.md-btn--outline:hover:not(:disabled) { border-color: var(--navy-900); background: var(--navy-050); }
.md-btn--outline:active:not(:disabled) { background: var(--navy-100); }
.md-btn--outline:focus-visible { box-shadow: var(--shadow-focus); }
.md-btn--outline:disabled { border-color: var(--ink-150); color: var(--text-disabled); }

.md-btn--ghost { background: transparent; color: var(--text-primary); }
.md-btn--ghost:hover:not(:disabled) { background: var(--navy-100); }
.md-btn--ghost:active:not(:disabled) { background: var(--navy-200); }
.md-btn--ghost:focus-visible { box-shadow: var(--shadow-focus); }
.md-btn--ghost:disabled { color: var(--text-disabled); }

.md-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--text-body-sm-size); border-radius: var(--radius-pill); }
.md-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--text-body-size); }
.md-btn--icon { padding: 0; width: var(--control-height-md); }
.md-btn--icon.md-btn--sm { width: var(--control-height-sm); }
.md-btn--icon.md-btn--lg { width: var(--control-height-lg); }

/* ── Link ── */
.md-link {
  color: var(--text-link); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease-standard);
}
.md-link:hover { text-decoration: none; }
.md-link:active { color: var(--navy-950); }
.md-link:visited { color: var(--navy-700); }
.md-link.is-disabled { color: var(--text-disabled); pointer-events: none; }
.md-link--standalone {
  display: inline-flex; align-items: center; gap: var(--space-1);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.md-link--standalone::after {
  content: '\2192'; transition: transform var(--dur-2) var(--ease-standard);
}
.md-link--standalone:hover::after { transform: translateX(3px); }
.md-link--external::after { content: '\2197'; }

/* ── Input (floating label) ── */
.md-field { position: relative; display: block; }
.md-field + .md-field { margin-top: var(--space-5); }
.md-field + .md-btn { margin-top: var(--space-6); }
.md-field__control {
  position: relative; display: flex; align-items: center;
  min-height: var(--control-height-lg);
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background var(--dur-2) var(--ease-standard);
}
.md-field__control:hover:not(.is-disabled):not(.is-focused):not(.is-error):not(.is-success) {
  border-color: var(--navy-400);
}
/* :focus-within продублирован рядом с .is-focused: класс ставит JS, и без него
   рамка не меняла бы цвет — а именно она является индикатором фокуса по WCAG. */
.md-field__control.is-focused,
.md-field__control:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.md-field__control.is-error { border-color: var(--error-500); }
.md-field__control.is-error.is-focused,
.md-field__control.is-error:focus-within { box-shadow: var(--shadow-focus-danger); }
.md-field__control.is-success { border-color: var(--success-500); }
.md-field__control.is-disabled { background: var(--ink-100); border-color: var(--ink-150); cursor: not-allowed; }

.md-field__leading,
.md-field__trailing {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-500); flex-shrink: 0;
}
.md-field__leading { margin-right: var(--space-2); font-size: var(--icon-md); }
.md-field__trailing { margin-left: var(--space-2); font-size: var(--icon-md); }
.md-field__trailing button { color: var(--ink-500); border-radius: var(--radius-sm); padding: var(--space-1); display: inline-flex; }
.md-field__trailing button:hover { color: var(--text-primary); background: var(--ink-100); }

.md-field__input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  outline: 0; padding: var(--space-6) 0 var(--space-1);
  font-size: var(--text-body-size); color: var(--text-primary);
}
.md-field__input::placeholder { color: transparent; }
.md-field__input:disabled { color: var(--text-disabled); }

.md-field__label {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  font-size: var(--text-body-size); color: var(--text-tertiary);
  pointer-events: none;
  transition: top var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard);
  background: transparent; padding: 0 2px;
}
.md-field__control.has-leading .md-field__label { left: calc(var(--space-4) + var(--icon-md) + var(--space-2)); }

.md-field__control.is-floating .md-field__label,
.md-field__input:focus + .md-field__label,
.md-field__input:not(:placeholder-shown) + .md-field__label {
  top: var(--space-2); transform: translateY(0);
  font-size: var(--text-label-size); font-weight: var(--fw-medium);
  color: var(--text-secondary); letter-spacing: 0.02em;
}
.md-field__control.is-error .md-field__label,
.md-field__control.is-error.is-floating .md-field__label { color: var(--error-600); }
.md-field__control.is-focused .md-field__label { color: var(--navy-800); }

.md-field__hint {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); padding: 0 2px;
  font-size: var(--text-caption-size); line-height: var(--text-caption-lh);
  color: var(--text-tertiary);
}
.md-field__hint.is-error { color: var(--error-600); }
.md-field__hint.is-success { color: var(--success-600); }
.md-field__hint .ph { font-size: var(--icon-sm); }

/* ── Textarea ── */
.md-field--textarea .md-field__control { align-items: stretch; min-height: 120px; padding-top: 0; padding-bottom: 0; }
.md-field--textarea .md-field__input { resize: vertical; padding-top: 26px; padding-bottom: var(--space-3); min-height: 120px; line-height: 1.55; }
.md-field--textarea .md-field__label { top: 18px; transform: none; }
.md-field--textarea .md-field__control.is-floating .md-field__label,
.md-field--textarea .md-field__input:focus + .md-field__label,
.md-field--textarea .md-field__input:not(:placeholder-shown) + .md-field__label { top: var(--space-2); }

/* ── Select ── */
.md-select { position: relative; }
.md-select__trigger {
  display: flex; align-items: center; width: 100%;
  min-height: var(--control-height-lg);
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
  position: relative; gap: var(--space-2);
}
.md-select__trigger:hover:not(:disabled) { border-color: var(--navy-400); }
.md-select__trigger.is-open,
.md-select__trigger:focus-visible { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: 0; }
.md-select__trigger.is-error { border-color: var(--error-500); }
.md-select__trigger.is-success { border-color: var(--success-500); }
.md-select__trigger:disabled { background: var(--ink-100); border-color: var(--ink-150); cursor: not-allowed; color: var(--text-disabled); }

.md-select__value { flex: 1; font-size: var(--text-body-size); color: var(--text-primary); padding: var(--space-6) 0 var(--space-1); min-width: 0; }
.md-select__value.is-placeholder { color: var(--text-placeholder); padding: 0; }
.md-select__label {
  position: absolute; left: var(--space-4); top: var(--space-2);
  font-size: var(--text-label-size); font-weight: var(--fw-medium);
  color: var(--text-secondary); letter-spacing: 0.02em;
  pointer-events: none;
}
.md-select__trigger.is-empty .md-select__label {
  top: 50%; transform: translateY(-50%);
  font-size: var(--text-body-size); font-weight: var(--fw-regular);
  color: var(--text-placeholder); letter-spacing: 0;
}
.md-select__caret {
  margin-left: auto; color: var(--ink-500);
  transition: transform var(--dur-2) var(--ease-standard);
  font-size: var(--icon-md); flex-shrink: 0; align-self: center;
}
.md-select__trigger.is-open .md-select__caret { transform: rotate(180deg); color: var(--navy-900); }

/* Dropdown menu */
.md-select__menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0;
  min-width: 100%; width: max-content; max-width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
  max-height: 320px;
  overflow: auto;
}
.md-select__option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-size);
  color: var(--text-primary);
  cursor: pointer;
}
.md-select__option:hover { background: var(--navy-050); }
.md-select__option.is-selected { background: var(--navy-100); color: var(--navy-900); font-weight: var(--fw-medium); }
.md-select__option .md-select__check { margin-left: auto; color: var(--navy-900); font-size: var(--icon-sm); }
.md-select__option.is-disabled { color: var(--text-disabled); cursor: not-allowed; }
.md-select__option mark { background: var(--yellow-200); color: inherit; padding: 0 2px; border-radius: 2px; }

.md-select__search {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2);
  position: sticky; top: calc(-1 * var(--space-2));
  background: var(--paper); z-index: 1;
}
.md-select__search input {
  width: 100%; height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--paper);
  outline: 0;
  font-size: var(--text-body-size);
}
.md-select__search input:focus { border-color: var(--navy-900); }

.md-select__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-body-sm-size);
  text-align: center;
}
.md-select__empty .ph { font-size: var(--icon-lg); color: var(--ink-300); }

/* Dropdown loading skeleton */
.md-select__loading { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }

.md-select__spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--ink-200);
  border-top-color: var(--navy-900);
  border-radius: 50%;
  animation: md-spin 0.8s linear infinite;
  margin-left: var(--space-2);
  flex-shrink: 0;
}

/* ── Menu (выпадающее меню действий — напр. аккаунт в шапке) ──
   Компонент ДС, не одноразовый класс: паттерн и токены взяты у .md-select__menu/
   .md-select__option выше (та же тень, радиус, паддинг, ховер), но без завязки на select —
   пункты произвольные ссылки/кнопки, а не варианты выбора. Родитель ставит .md-menu в
   position:relative и позиционирует сам компонент (top/right/left) — .md-menu не диктует
   привязку к конкретной кнопке, только собственное оформление и раскрытие через .is-open.
   Первый потребитель — 2026-09-03, docs/decisions/2026-09-03-header-account-menu.md. */
.md-menu {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
  min-width: 180px;
  display: none;
}
.md-menu.is-open { display: block; }
.md-menu__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-3);
  border: 0; background: none; appearance: none;
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-body-size); color: var(--text-primary);
  text-decoration: none; text-align: left; cursor: pointer;
}
.md-menu__item:hover { background: var(--navy-050); }
.md-menu__item .ph { font-size: var(--icon-md); color: var(--ink-500); }

/* ── Animations (shared) ── */
@keyframes md-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes md-spin { to { transform: rotate(360deg); } }

.md-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-150) 50%, var(--ink-100) 100%);
  background-size: 200% 100%;
  animation: md-shimmer 1.4s linear infinite;
}

/* ── Button spinner ── */
.md-btn__spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--navy-200);
  border-top-color: var(--navy-900);
  border-radius: 50%;
  animation: md-spin 0.8s linear infinite;
}
.md-btn--primary .md-btn__spinner { border-color: var(--yellow-600); border-top-color: var(--navy-900); }

/* ── Checkbox & Radio ── */
.md-check, .md-radio {
  display: inline-flex; align-items: flex-start; gap: var(--space-3);
  cursor: pointer; user-select: none; color: var(--text-primary);
}
.md-check input, .md-radio input { position: absolute; opacity: 0; pointer-events: none; }

.md-check__box, .md-radio__dot {
  flex-shrink: 0; width: 20px; height: 20px;
  background: var(--paper); border: 1.5px solid var(--border-input);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
  margin-top: 1px;
}
.md-check__box { border-radius: var(--radius-xs); }
.md-radio__dot { border-radius: 50%; }
.md-check__box::after {
  content: ''; width: 11px; height: 11px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.5l2.5 2.5L10 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  opacity: 0; transition: opacity var(--dur-1) var(--ease-standard);
}
.md-radio__dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); transform: scale(0);
  transition: transform var(--dur-2) var(--ease-standard);
}
.md-check:hover .md-check__box,
.md-radio:hover .md-radio__dot { border-color: var(--navy-900); }
input:checked + .md-check__box { background: var(--navy-900); border-color: var(--navy-900); }
input:checked + .md-check__box::after { opacity: 1; }
input:checked + .md-radio__dot { background: var(--navy-900); border-color: var(--navy-900); }
input:checked + .md-radio__dot::after { transform: scale(1); }
/* Настоящий input скрыт (opacity:0), поэтому глобальное кольцо :focus-visible
   рисуется на невидимом элементе. Индикатор переносим на видимый квадрат/кружок:
   мягкой тени мало — сама по себе она даёт 1.95:1 при пороге 3:1. */
input:focus-visible + .md-check__box,
input:focus-visible + .md-radio__dot {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  box-shadow: var(--shadow-focus);
}
.md-check.is-disabled, .md-radio.is-disabled { color: var(--text-disabled); cursor: not-allowed; }
.md-check.is-disabled .md-check__box,
.md-radio.is-disabled .md-radio__dot { background: var(--ink-100); border-color: var(--ink-200); }
.md-check__label, .md-radio__label { font-size: var(--text-body-size); line-height: 1.45; }
.md-check + .md-check,
.md-radio + .md-radio { margin-top: var(--space-3); }

/* ── Quantity stepper ── */
.md-qty {
  display: inline-flex; align-items: center;
  height: var(--control-height-md); border: 1px solid var(--border-input);
  border-radius: var(--radius-md); background: var(--paper); overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.md-qty:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.md-qty button {
  width: var(--control-height-md); height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  transition: background var(--dur-2) var(--ease-standard);
}
.md-qty button:hover:not(:disabled) { background: var(--navy-050); }
.md-qty button:active:not(:disabled) { background: var(--navy-100); }
.md-qty button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.md-qty input {
  width: 48px; height: 100%;
  border: 0; outline: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  background: transparent;
}
.md-qty__value {
  width: 48px; text-align: center; font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium); font-size: var(--text-body-size);
}
.md-qty.is-disabled { background: var(--ink-100); border-color: var(--ink-150); color: var(--text-disabled); }

/* ── Badge ── */
.md-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 22px; padding: 0 var(--space-2); /* 22px — одобренное исключение сетки: высота метки задаётся контентом, не шкалой контролов */
  font-size: var(--text-caption-size); font-weight: var(--fw-semibold);
  letter-spacing: 0.01em; border-radius: var(--radius-xs);
  line-height: 1; white-space: nowrap;
}
.md-badge--promo-yellow { background: var(--yellow-400); color: var(--navy-900); }
.md-badge--promo-navy   { background: var(--navy-900); color: var(--paper); }
.md-badge--promo-sand   { background: var(--yellow-100); color: var(--yellow-700); }
.md-badge--promo-fog    { background: var(--navy-100); color: var(--navy-800); }
.md-badge--success      { background: var(--success-100); color: var(--success-600); }
.md-badge--neutral      { background: var(--ink-100);     color: var(--ink-700); }
.md-badge--in-progress  { background: var(--info-100);    color: var(--info-600); }
.md-badge--error        { background: var(--error-100);   color: var(--error-600); }
.md-badge--numeric      { background: var(--error-600);   color: var(--paper); min-width: 22px; justify-content: center; padding: 0 var(--space-2); border-radius: var(--radius-pill); }

/* ── Price ── */
.md-price { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.md-price__main { font-size: var(--text-h3-size); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: -0.01em; }
.md-price__main--lg { font-size: var(--text-h2-size); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.md-price__main--discounted { color: var(--error-600); }
.md-price__old { font-size: var(--text-body-sm-size); color: var(--text-tertiary); text-decoration: line-through; text-decoration-thickness: 1px; }
.md-price__old--lg { font-size: var(--text-body-size); }
.md-price__discount {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); /* 22px — одобренное исключение сетки: высота метки задаётся контентом, не шкалой контролов */
  background: var(--yellow-400); color: var(--navy-900);
  border-radius: var(--radius-xs); font-size: var(--text-caption-size); font-weight: var(--fw-semibold);
}
.md-price__currency { font-size: 0.72em; color: var(--text-tertiary); margin-left: 2px; font-weight: var(--fw-regular); }

/* ── Indicator ── */
.md-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm-size); color: var(--text-primary); }
.md-indicator__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.md-indicator--success  .md-indicator__dot { background: var(--success-500); }
.md-indicator--warning  .md-indicator__dot { background: var(--warning-500); }
.md-indicator--error    .md-indicator__dot { background: var(--error-500); }
.md-indicator--progress .md-indicator__dot { background: var(--info-500); }
.md-indicator--info     .md-indicator__dot { background: var(--ink-500); }

/* ── Modal ──
   ВНИМАНИЕ: .md-modal — это ОФОРМЛЕНИЕ СОДЕРЖИМОГО, а не самостоятельное окно.
   Оверлей, затемнение, фокус-трап, Esc, блокировку скролла и возврат фокуса
   делает Fancybox v6 (подключён глобально в header.php). Своего оверлея у ДС нет
   и быть не должно — решение 2026-08-12, см. decisions/c2-z-index-scale.md.

   Применение:
     <a data-fancybox data-src="#my-dialog" href="javascript:;">Открыть</a>
     <div id="my-dialog" class="md-modal" style="display:none"> … </div>

   Внутри Fancybox своя кнопка закрытия, поэтому .md-modal__close нужен только
   когда окно рисуется без Fancybox (например, в прототипах). */
.md-modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  width: min(560px, calc(100vw - var(--space-8)));
  max-height: calc(100vh - var(--space-16));
  overflow: auto;
  box-shadow: var(--shadow-xl);
}
.md-modal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--space-6) var(--space-6) 0; gap: var(--space-4); }
.md-modal__title { font-size: var(--text-h4-size); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.md-modal__close { width: var(--control-height-sm); height: var(--control-height-sm); border-radius: var(--radius-sm); color: var(--ink-500); display: inline-flex; align-items: center; justify-content: center; }
.md-modal__close:hover { background: var(--ink-100); color: var(--text-primary); }
.md-modal__body { padding: var(--space-4) var(--space-6) var(--space-6); color: var(--text-secondary); }
.md-modal__foot { display: flex; gap: var(--space-3); justify-content: flex-end; padding: 0 var(--space-6) var(--space-6); }

/* ── Toast ── */
.md-toast-container {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); pointer-events: none;
}
/* Три типа сообщений — три разных поведения. Разведены 2026-08-12 по b3-toast.md.

   .md-toast--success  — исчезает сам через 5 сек. «Промокод применён».
   .md-toast--error    — НЕ исчезает сам, только по кнопке закрытия.
                         Ошибку, пропавшую через 5 секунд, покупатель не увидит
                         и не поймёт, почему действие не сработало.
   .md-toast--info     — нейтральное, исчезает само.

   Добавление в корзину тостом НЕ показываем: это не уведомление, а развилка
   («продолжить покупки» или «оформить»), и решение нельзя отбирать по таймеру.
   Для неё — панель корзины или переход, см. b3-toast.md.

   Роль в разметке (обязательно, иначе скринридер промолчит):
     success/info → role="status"  aria-live="polite"
     error        → role="alert"   aria-live="assertive" */
.md-toast {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--navy-100); color: var(--navy-900);
  font-size: var(--text-body-sm-size); font-weight: var(--fw-medium);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: md-toast-in var(--dur-3) var(--ease-standard) forwards;
}
.md-toast.is-leaving {
  animation: md-toast-out var(--dur-3) var(--ease-standard) forwards;
}

/* Визуально выделена только ошибка — светлый красный фон.
   .md-toast--success и .md-toast--info выглядят как обычный тост:
   тип там считывается иконкой. Классы всё равно ставим — по ним JS
   решает, скрывать по таймеру или нет. */
.md-toast--error { background: var(--error-050); }

/* У стойкого тоста кнопка закрытия обязательна — иначе его нечем убрать. */
.md-toast--error .md-toast__close { display: inline-flex; }

.md-toast__icon { font-size: var(--icon-md); flex-shrink: 0; line-height: 1; }
.md-toast__icon--success { color: var(--success-500); }
.md-toast__icon--error   { color: var(--error-500); }
.md-toast__icon--info    { color: var(--info-500); }
.md-toast__text { line-height: 1.35; }
.md-toast__action {
  font-size: var(--text-body-sm-size); font-weight: var(--fw-semibold);
  color: var(--navy-900); text-decoration: underline; white-space: nowrap;
  padding: var(--space-1) 0;
  transition: color var(--dur-2) var(--ease-standard);
}
.md-toast__action:hover { color: var(--navy-700); }
.md-toast__close {
  color: var(--navy-500); font-size: var(--icon-sm); flex-shrink: 0;
  padding: var(--space-1); margin: calc(-1 * var(--space-1)); margin-left: 0;
  transition: color var(--dur-2) var(--ease-standard);
}
.md-toast__close:hover { color: var(--navy-900); }

@keyframes md-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes md-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 600px) {
  .md-toast-container {
    left: var(--space-4); right: var(--space-4); transform: none;
  }
  .md-toast { width: 100%; }
}

/* ── Card ──
   База — спокойная: --shadow-sm, без подъёма. Карточка в сетке (товары) никуда
   не всплывает, поэтому и тень у неё маленькая — тень означает высоту над
   страницей (см. DS-GUIDE «Тени — это высота»). Прежний дефолт был --shadow-md
   с подъёмом на hover, что противоречило собственному правилу ДС.
   Подъём — осознанный опт-ин через --interactive, для отдельно кликабельной
   карточки (выбор тарифа, ссылка-карточка). */
.md-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.md-card + .md-card { margin-top: var(--space-4); }
.md-card--interactive { cursor: pointer; }
.md-card--interactive:hover { border-color: var(--border-default); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.md-card.is-active { border-color: var(--navy-900); }
.md-card.is-selected { border-color: var(--navy-900); box-shadow: 0 0 0 1px var(--navy-900) inset; }
.md-card.is-disabled { background: var(--ink-050); color: var(--text-disabled); }

/* ── Search ── */
.md-search {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--paper);
  gap: var(--space-2);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.md-search:hover { border-color: var(--navy-400); }
.md-search:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.md-search .ph { color: var(--ink-500); font-size: var(--icon-md); }
/* overflow/text-overflow/white-space — не обрезка введённого текста (ввод скроллится
   нативно), а именно плейсхолдера: на узких ширинах (планшетный диапазон 561–900px,
   инлайн-поиск сжат между лого и иконками действий) полный текст плейсхолдера шире
   поля — раньше решали сокращением текста до «Поиск» (р.25, 2026-08), из-за чего
   плейсхолдер перестал отвечать на вопрос «что можно искать» (решение Лены
   2026-09-05 — вернуть длинный текст и подрезать его вёрсткой, а не словами).
   min-width:0 обязателен: input — flex-элемент с flex-basis:0%, и без явного
   min-width автоматический минимум для <input> НЕ обнуляется одним overflow:hidden
   (в отличие от обычных блочных элементов) — проверено 2026-09-05 через
   getBoundingClientRect() в живом браузере на воссозданной разметке шапки:
   без min-width:0 input держит содержимое (~170px под текст плейсхолдера)
   и раздувает .md-search за пределы контейнера — кнопка «найти» вылезает наружу
   на ширинах ~680–900px (испр. по замечанию Лены). Изолированный тест без
   конкурирующих flex-соседей (просто .md-search в блочном div фиксированной
   ширины) эту раздачу не ловит — сам div, не flex-негоциация, диктует ширину;
   баг проявляется только внутри реальной flex-цепочки main-header__inner →
   hdr-search → md-search. */
.md-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--text-body-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-search input::placeholder { color: var(--text-placeholder); }
/* Кнопка «найти» — submit формы, встроена в конец инпута. Без рамки и подложки
   (решение Лены 2026-09-03, тот же принцип, что и у прочих ph-иконок ДС: обводка вокруг
   картинки не нужна, если сама картинка уже без внешних отступов) — просто иконка,
   меняющая цвет на ховере. Заменила крестик .md-search__clear (был только в шапке,
   других потребителей компонента в шаблоне нет — проверено grep, удалён вместе с ним). */
.md-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; border: 0; background: none; padding: 0;
  flex: none; cursor: pointer;
}
.md-search__submit:hover .ph { color: var(--text-primary); }

/* ── Chip ── */
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-input);
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm-size);
  color: var(--text-primary);
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
  cursor: pointer;
  white-space: nowrap;
}
.md-chip:hover { border-color: var(--navy-500); background: var(--navy-050); }
.md-chip.is-active, .md-chip:active { background: var(--navy-100); border-color: var(--navy-900); }
.md-chip.is-selected { background: var(--navy-900); border-color: var(--navy-900); color: var(--paper); font-weight: var(--fw-medium); }
.md-chip.is-disabled { background: var(--ink-100); color: var(--text-disabled); border-color: var(--ink-150); cursor: not-allowed; }
.md-chip .ph { font-size: var(--icon-sm); }
.md-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── List ── */
.md-list { padding-left: 22px; margin: 0 0 var(--space-4); color: var(--text-primary); }
.md-list:last-child { margin-bottom: 0; }
.md-list li { padding: var(--space-1) 0; line-height: 1.5; }
.md-list--bulleted { list-style: disc; }
.md-list--bulleted li::marker { color: var(--navy-500); }
.md-list--numbered { list-style: decimal; }
.md-list--numbered li::marker { color: var(--navy-500); font-weight: var(--fw-semibold); }

/* ── Breadcrumbs ── */
.md-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm-size); color: var(--text-tertiary); margin-bottom: var(--space-4); }
@media (min-width: 601px) {
  .md-crumbs { margin-bottom: var(--space-5); }
}
.md-crumbs a { color: var(--text-secondary); text-decoration: none; padding: 2px var(--space-1); }
.md-crumbs > a:first-child { padding-left: 0; }
.md-crumbs a:hover { color: var(--navy-900); text-decoration: underline; }
.md-crumbs__sep { color: var(--ink-300); }
.md-crumbs__current { color: var(--navy-900); font-weight: var(--fw-medium); padding: 2px var(--space-1); }

/* ── Table ── */
.md-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm-size); margin-bottom: var(--space-6); }
.md-table:last-child { margin-bottom: 0; }
@media (min-width: 601px) {
  .md-table { margin-bottom: var(--space-8); }
}
.md-table th, .md-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; }
.md-table thead th {
  color: var(--text-tertiary);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  font-size: var(--text-caption-size);
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-default);
  background: var(--ink-050);
}
.md-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--dur-2) var(--ease-standard); }
.md-table tbody tr:hover { background: var(--navy-050); }
.md-table tbody tr.is-selected { background: var(--yellow-050); }
.md-table tbody tr:last-child { border-bottom: 0; }
.md-table td.is-empty { color: var(--text-tertiary); }
.md-table td.is-empty::before { content: '—'; color: var(--ink-300); }
.md-table--comparison thead th:first-child,
.md-table--comparison tbody td:first-child { color: var(--text-tertiary); font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; font-size: var(--text-body-sm-size); width: 30%; }
.md-table--comparison thead th { background: var(--paper); border-bottom: 2px solid var(--navy-900); color: var(--text-primary); font-size: var(--text-body-size); text-transform: none; letter-spacing: 0; }
.md-table--comparison tbody td { color: var(--text-primary); }
.md-table--comparison td .md-indicator { font-size: var(--text-body-sm-size); }
.md-table--comparison td,
.md-table--comparison th { transition: background var(--dur-2) var(--ease-standard); position: relative; }
.md-table--comparison tbody tr.is-row-hover { background: var(--navy-050); }
.md-table--comparison .is-col-hover { background: var(--navy-050); }
.md-table--comparison tbody td.is-cell-hover { background: var(--navy-200); }
.md-table__empty {
  padding: var(--space-12);
  text-align: center;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}

/* ── Accordion ── */
.md-accordion { border-top: 1px solid var(--border-subtle); margin-bottom: var(--space-6); }
.md-accordion:last-child { margin-bottom: 0; }
@media (min-width: 601px) {
  .md-accordion { margin-bottom: var(--space-8); }
}
.md-accordion__item { border-bottom: 1px solid var(--border-subtle); }
.md-accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  font-size: var(--text-body-size);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  transition: color var(--dur-2) var(--ease-standard);
}
.md-accordion__trigger:hover { color: var(--navy-800); }
.md-accordion__trigger .ph { font-size: var(--icon-md); color: var(--ink-500); transition: color var(--dur-2) var(--ease-standard); }
.md-accordion__item.is-open .md-accordion__trigger .ph { color: var(--navy-900); }
.md-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-3) var(--ease-standard);
}
.md-accordion__inner {
  padding: 0 0 var(--space-5);
  color: var(--text-secondary);
}
.md-accordion__item.is-disabled .md-accordion__trigger { color: var(--text-disabled); cursor: not-allowed; }
.md-accordion__hint {
  font-weight: var(--fw-regular); color: var(--text-tertiary);
  font-size: var(--text-caption-size);
}
.md-accordion--compact .md-accordion__trigger {
  padding: var(--space-3) 0;
  font-size: var(--text-body-sm-size);
  font-weight: var(--fw-semibold);
}
.md-accordion--compact .md-accordion__trigger > .ph { font-size: var(--icon-sm); color: var(--ink-500); }
.md-accordion--compact .md-accordion__trigger span .ph { font-size: var(--icon-sm); color: var(--ink-500); }
.md-accordion--compact .md-accordion__item.is-open .md-accordion__trigger span .ph { color: var(--ink-500); }
.md-accordion--compact .md-accordion__inner { padding: 0 0 var(--space-4); }

/* ── Tooltip ── */
/* ── Tooltip ──
   Открывается ЯВНЫМ действием, а не только по hover: на мобильном наведения нет
   (см. DS-COMPONENTS). Видимостью управляет атрибут data-open, который ставит JS
   по тапу/клику/фокусу и снимает по Esc и тапу вне. hover на десктопе —
   дополнение, не единственный способ. Триггер обязан быть <button>. */
.md-tooltip-wrap { position: relative; display: inline-flex; }
.md-tooltip {
  position: absolute; bottom: calc(100% + var(--space-2)); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 280px;
  padding: var(--space-3) var(--space-4);
  background: var(--navy-900); color: var(--paper);
  font-size: var(--text-caption-size); line-height: 1.5;
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-standard), visibility var(--dur-2);
  z-index: 10;
}
.md-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--navy-900);
}
/* Открытие: по data-open (ставит JS) — работает на тач. hover/focus — только десктоп. */
.md-tooltip-wrap[data-open="true"] .md-tooltip { opacity: 1; visibility: visible; }
@media (hover: hover) {
  .md-tooltip-wrap:hover .md-tooltip,
  .md-tooltip-wrap:focus-within .md-tooltip { opacity: 1; visibility: visible; }
}
/* На узком экране — под элементом во всю ширину, не всплывашкой сбоку. */
@media (max-width: 600px) {
  .md-tooltip { position: fixed; left: var(--space-4); right: var(--space-4);
                bottom: auto; max-width: none; transform: none; }
  .md-tooltip::after { display: none; }
}

/* ── Carousel ── */
.md-carousel { position: relative; }
.md-carousel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.md-carousel__title { font-size: var(--text-h3-size); font-weight: var(--fw-semibold); }
.md-carousel__track {
  display: flex; gap: var(--space-4);
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.md-carousel__track::-webkit-scrollbar { display: none; }
.md-carousel__track > * { flex: 0 0 calc((100% - var(--space-4) * 3) / 4); scroll-snap-align: start; }
.md-carousel__nav { display: flex; gap: var(--space-2); }
.md-carousel__btn {
  width: var(--control-height-sm); height: var(--control-height-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-input); border-radius: var(--radius-md);
  color: var(--text-primary); background: var(--paper);
  transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}
.md-carousel__btn:hover:not(:disabled) { border-color: var(--navy-900); background: var(--navy-050); }
.md-carousel__btn:disabled { color: var(--text-disabled); border-color: var(--ink-150); cursor: not-allowed; }

/* ── Lightbox ── */
/* УДАЛЁН 2026-08-12. Галереи и просмотр изображений делает Fancybox v6
   (data-fancybox="gallery") — он уже подключён на всех страницах и решает
   свайпы, клавиатуру, зум и превью. Дублировать это в ДС незачем.
   Прежние классы: .md-lightbox, .md-lightbox__img, __placeholder, __close, __nav. */

/* ── Pagination ── */
.md-pagination { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-6); }
@media (min-width: 601px) {
  .md-pagination { margin-top: var(--space-8); }
}
.md-pagination button, .md-pagination a, .md-pagination span {
  min-width: var(--control-height-sm); height: var(--control-height-sm);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm-size);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.md-pagination button:hover:not(:disabled):not(.is-active), .md-pagination a:hover { background: var(--navy-100); color: var(--text-primary); text-decoration: none; }
.md-pagination a { text-decoration: none; }
.md-pagination button.is-active, .md-pagination span.is-active { background: var(--navy-900); color: var(--paper); }
.md-pagination button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.md-pagination button .ph { font-size: var(--icon-md); font-weight: bold; }
.md-pagination .md-pagination__ellipsis { color: var(--ink-400); }
.md-pagination__text { padding: 0 var(--space-3); color: var(--text-secondary); }

/* ── Sort ── */
.md-sort { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.md-sort__label { font-size: var(--text-body-sm-size); color: var(--text-tertiary); white-space: nowrap; }
.md-sort__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--text-primary);
  font-size: var(--text-body-size);
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.md-sort__trigger:hover { border-color: var(--navy-500); }
.md-sort__trigger:focus-visible, .md-sort__trigger.is-open { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: 0; }
.md-sort__trigger:disabled { background: var(--ink-100); color: var(--text-disabled); border-color: var(--ink-150); cursor: not-allowed; }
.md-sort__value { font-weight: var(--fw-medium); }
.md-sort__caret { color: var(--ink-500); transition: transform var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); font-size: 16px; }
.md-sort__trigger.is-open .md-sort__caret { transform: rotate(180deg); color: var(--navy-900); }
.md-sort__menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
}
.md-sort__option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-size);
  cursor: pointer;
  color: var(--text-primary);
}
.md-sort__option:hover { background: var(--navy-050); }
.md-sort__option.is-selected { color: var(--navy-900); font-weight: var(--fw-medium); }
.md-sort__option .ph { color: var(--ink-500); font-size: var(--icon-sm); margin-left: auto; }
.md-sort__option.is-selected .ph { color: var(--navy-900); }

/* ── Alert (form-level messages) ── */
.md-alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}
.md-alert__icon { font-size: var(--icon-md); flex-shrink: 0; margin-top: 1px; }
.md-alert__title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.md-alert__text { font-size: var(--text-body-sm-size); }
.md-alert--error { background: var(--error-050); border: 1px solid var(--error-100); color: var(--error-600); }
.md-alert--error .md-alert__text { color: var(--ink-700); }
.md-alert--success { background: var(--success-050); border: 1px solid var(--success-100); color: var(--success-600); }
.md-alert--success .md-alert__text { color: var(--ink-700); }
/* Добавлены 2026-08-12: у индикатора все четыре статуса, у плашки было только два.
   warning — «можно продолжать, но обрати внимание» (мало на складе, срок дольше).
   info — нейтральное пояснение. */
.md-alert--warning { background: var(--warning-050); border: 1px solid var(--warning-100); color: var(--warning-600); }
.md-alert--warning .md-alert__text { color: var(--ink-700); }
.md-alert--info { background: var(--info-050); border: 1px solid var(--info-100); color: var(--info-600); }
.md-alert--info .md-alert__text { color: var(--ink-700); }

/* ── Empty state ── */
.md-empty {
  padding: var(--space-12);
  text-align: center;
  color: var(--text-tertiary);
}
.md-empty__icon { font-size: var(--icon-xl); color: var(--ink-400); display: block; margin: 0 auto var(--space-3); }
.md-empty__title { font-size: var(--text-body-size); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.md-empty__text { font-size: var(--text-body-sm-size); color: var(--text-tertiary); }

/* ── Text roles ── */
.md-secondary { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-lh); color: var(--text-secondary); }
.md-secondary--medium { font-weight: var(--fw-medium); }
.md-caption { font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--text-tertiary); }

/* ── Иконки ──
   Шрифт Phosphor НЕ подключается. Иконки — SVG-спрайт (решение c1-icon-sprite.md).
   Разметка:  <svg class="ph" aria-hidden="true"><use href="<?=md_icons_sprite()?>#truck"></use></svg>

   Размер через 1em: все существующие правила вида `.md-btn .ph { font-size: var(--icon-md) }`
   продолжают работать без изменений — 1em считается от font-size элемента.
   Цвет через currentColor: символы в спрайте намеренно без атрибута fill,
   иначе покрасить их снаружи нельзя (внешний <use> создаёт shadow DOM,
   и CSS-селекторы страницы внутрь символа не достают). */
.ph {
  width: 1em; height: 1em;
  display: inline-block;
  flex: none;              /* без этого иконка схлопывается во flex-контейнерах кнопок и чипов */
  fill: currentColor;
  vertical-align: -0.125em;
}

/* ── Reduced motion ── */
/* Заскоуплено под [class*="md-"]: гасим анимации только ДС-компонентов,
   не трогая остальной сайт. Через body.md-page под селектор попадает и всё, что
   лежит в body (оверлей поиска, бургер-панель), — это ожидаемо.
   Длительность ровно 0s, а не «почти ноль»: с 0.001ms Safari 26 не доводил переход
   transform до конца, и .mobile-search-overlay.is-open оставался за экраном
   (ПРОВЕРЕНО 2026-09-10 на stage, разбор в docs/decisions/2026-09-10-stage-smoke-fixes.md).
   !important нужен:
   длительность задают сами компоненты (transition: transform var(--dur-3)), и без него
   правило проигрывает по порядку. */
@media (prefers-reduced-motion: reduce) {
  [class*="md-"], [class*="md-"] *,
  [class*="md-"]::before, [class*="md-"]::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* End */


/* Start:/local/templates/md2019/css/md-header.css?1788857384109682*/
/* md-header — стили шапки сайта. Источник: md-design-system/prototypes/header.html.
   Собран из токенов ДС + атомов (.md-search/.md-btn/.md-badge). Namespace: .main-header, .utility-, .cat-, .burger-, .hdr-. */

/* Шрифт ДС шапки — см. находку и объяснение в комментарии у .main-header{font-family}
   ниже. Только .catalog-dropdown/.catalog-backdrop наследуют его от .main-header (лежат
   внутри <header> в разметке, header.php:404-405); .utility-bar, .hdr-mobile-delivery,
   .mobile-search-overlay, .burger-overlay, .burger-panel — сиблинги <header> в разметке
   (header.php:264,304,445,456-457), каждому font-family задан отдельно, в их
   объявлениях-источниках. */

/* =========================================================================
   LAYOUT
   ========================================================================= */
.hdr-container {
  max-width: var(--container-desktop);
  margin: 0 auto;
  /* border-box обязателен: глобального ресета box-sizing на сайте нет (проверено 2026-09-03
     в браузере на превью — обычный div считается content-box). Без него боковое поле
     прибавлялось бы к max-width, и полосы шапки стали бы шире контента на 2×--grid-margin. */
  box-sizing: border-box;
  /* Боковое поле = грид-токен (16/32 по брейку 768) — вровень с контентом (.main_wrapper). */
  padding-inline: var(--grid-margin);
}

/* =========================================================================
   ROW 1: UTILITY BAR
   ========================================================================= */
.utility-bar {
  /* Сиблинг <header> в разметке (header.php:264), от .main-header{font-family} не наследует —
     разбор находки «разный шрифт» там же. */
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  line-height: 1;
  box-shadow: none;
}
/* color — объявление-источник у р.26 ниже (тёмная строка): здесь всегда было мёртвым
   кодом, перебитым той же специфичностью (0,1,0) в порядке подключения — убрано 2026-09-03. */
/* Строка живёт до узкого телефона, а не прячется на 900px. Раньше на 900 весь util-bar
   исчезал разом (отзывы/телефон/«Юрлицам» пропадали при куче свободного места — жалоба Лены
   №3, 2026-09-04), и его подменяла .hdr-mobile-delivery. Теперь строка сбрасывает элементы
   по приоритету через @container (ниже) и уступает мобильной строке только ≤480px, где
   остаётся смысл лишь у «город + телефон-иконка». Порог 480, а не 900. */
@media (max-width: 480px) {
  .utility-bar { display: none; }
}
/* Фолбэк для браузеров без @container (Safari <16, Chrome <105, Firefox <110): там правила
   сброса ниже не применяются вовсе, строка показывается целиком и не помещается — ПРОВЕРЕНО
   2026-09-04 в браузере (правила сброса отключены принудительно: появляется горизонтальный
   скролл страницы). Возвращаем таким браузерам прежнее поведение — скрытие строки на 900px,
   как было до этой правки, чтобы деградация была не хуже прежней, а не хуже неё.
   Опровергается: отсутствие горизонтального скролла при отключённых @container-правилах. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .utility-bar { display: none; }
  }
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--control-height-sm);
  gap: var(--space-6);
  /* Контейнер для адаптивного сброса элементов строки: пороги считаются от ширины САМОЙ
     строки (её content-box = вьюпорт минус боковые поля контейнера), а не от вьюпорта.
     Здесь строка полноширинная, поэтому по факту это близко к вьюпорту — но правила
     остаются самодостаточными (не завязаны на глобальные медиазапросы) и переживут смену
     ширины контейнера. Выбор @container — решение Лены 2026-09-04. */
  container-type: inline-size;
  container-name: utilbar;
}

/* Адаптивный сброс элементов утилитарной строки по приоритету (@container, а не медиа).
   Порядок сокрытия — от НАИМЕНЕЕ важного к более важному, ПО ВЕСОВОЙ МОДЕЛИ из анализа
   «Иерархия шапки через вопросы пользователя» от 21.08.2026 (срез в репозитории:
   docs/tasks/2026-08-21-header-hierarchy-analysis.md; решение Лены 2026-09-05 — делать по нему):
   «заказать звонок» (в модели отсутствует, самый лёгкий) → «Юрлицам» (вес 10) → отзывы (15) →
   ДАТА доставки. Цена и город НЕ прячутся: прототип v4 в том же документе требует дословно
   «город и цена — неразрывная пара, режется дата» — цифра «от 440 ₽» без города не читается.
   Город — последняя ступень, и он не прячется, а режется многоточием (правило ниже).
   Корзина в этой строке не живёт (она в .hdr-actions главной строки) и не трогается вовсе.
   NB: прежняя редакция прятала цену второй, раньше «Юрлицам» и отзывов. Это противоречило и
   весам (цена — часть кластера «Регион/Срок доставки», вес 24, против 10 и 15), и прототипу v4;
   отменено 2026-09-05.
   Пороги считаются от ИНТРИНСИК-ширин, замеренных в браузере 2026-09-05 на худшем названии
   («Петропавловск-Камчатский»): блок города 331, отзывы 186, «Юрлицам» 76, телефон 145,
   «заказать звонок» 119; зазор строки 24, шаг правой группы 20. Отсюда ступени: весь ряд —
   932, без звонка — 793, без «Юрлицам» — 697, без отзывов — 491. Пороги поставлены чуть выше
   каждой ступени. Опровергается: перенос города на две строки, наложение или горизонтальный
   скролл на любой ширине.
   Пороги настроены по САМОМУ длинному названию — иначе на длинном городе ряд переполнится,
   а по приоритету резать его нельзя. Цена этого: у короткого названия элемент уходит раньше,
   чем кончилось место (для «Москва» блок города 197 вместо 331, то есть ~130px запаса
   не используется). Полностью лечится только замером переполнения в JS — вариант отвергнут
   Леной 2026-09-04 в пользу @container. На ширинах от 1280px видно всё и для любого города.

   ЧИТАТЬ ВНИМАТЕЛЬНО: числа ниже — ширина КОНТЕЙНЕРА, а контейнер объявлен на
   .utility-bar__inner (он же .hdr-container) и имеет боковые поля --grid-margin.
   То есть контейнер = вьюпорт − 2 × --grid-margin, а поле не постоянно: 16px до 767px
   и 32px от 768px (md-tokens.css). В ширинах ОКНА ступени поэтому стоят так
   (замерено в браузере 2026-09-06):

     звонок    контейнер 930 → окно 994
     Юрлицам   контейнер 790 → окно 854
     отзывы    контейнер 695 → окно 759
     дата      контейнер 490 → окно 522   (ниже 768 поле уже 16px, а не 32px)

   Правя числа, помнить про это смещение: «790» не значит «на 790px окна». Переносить
   контейнер на .utility-bar (у неё полей нет) и пересчитывать пороги во вьюпортные НЕ надо —
   тогда они перестанут следовать за --grid-margin и разъедутся при правке сетки. */
/* Селекторы префиксованы .utility-bar (специфичность 0,2,0), иначе базовые правила ниже по
   файлу — .utility-reviews{display:inline-flex} (~строка 500) и .utility-link{display:inline-flex}
   (~строка 1030), обе 0,1,0 — перебивают display:none по более позднему месту в каскаде.
   Проверено детерминированно в браузере (инлайн-ширина контейнера, 2026-09-04): без префикса
   сворачивался только price (у него и так 0,2,0), остальные оставались видимы. */
@container utilbar (max-width: 930px) { .utility-bar .utility-callback { display: none; } }
@container utilbar (max-width: 790px) { .utility-bar .utility-link { display: none; } }
@container utilbar (max-width: 695px) { .utility-bar .utility-reviews { display: none; } }
@container utilbar (max-width: 490px) { .utility-bar .utility-city .hdr-del__date { display: none; } }
/* Парное к правилу выше: без срока точка перед суммой оказалась бы второй подряд («город · · сумма»). */
@container utilbar (max-width: 490px) { .utility-bar .utility-city .hdr-del__price::before { content: none; } }

/* Город: никогда не переносится на две строки, режется многоточием только когда сжимать уже
   нечего. Это САМАЯ ПОСЛЕДНЯЯ ступень деградации — цена и город остаются вместе до конца.
   Почему nowrap обязателен: у .hdr-del стоит min-width:0, поэтому при нехватке места бокс
   города сжимается, а текст с white-space:normal переносится на вторую строку. Полоса при этом
   не растёт (у .utility-bar__inner фиксированная высота 36px), поэтому дефект не виден ни по
   высоте полосы, ни по наложению — его находит только замер высоты самого города.
   ЗАМЕРЕНО 2026-09-05 в браузере: «Петропавловск-Камчатский» на 940px давал городу высоту 26px
   вместо 13px, то есть две строки внутри 36px-полосы. Опровергается: высота .hdr-del__city
   больше одной строки на любой ширине.
   Чип my:region.picker — инлайновая ссылка (region.picker/templates/.default/style.css),
   поэтому обрез с многоточием у родителя работает; прежнее правило display:inline для
   flex-ссылки twofingers снято вместе с компонентом (2026-09-06). */
.utility-bar .hdr-del__city { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.utility-bar__left,
.utility-bar__right {
  display: flex;
  /* Сами группы тянутся на всю высоту строки, иначе их высота считается по тексту
     и растягивать детей внутри уже некуда (проверено замером 2026-09-03).
     Внутри — по-прежнему center: тянутся только те дети, которым это явно задано ниже
     (align-self: stretch). Иначе пилюля «Юрлицам» и разделитель уезжают к верхнему краю. */
  align-self: stretch;
  align-items: center;
  gap: var(--space-5);
}

/* Тап-зоны утилитарной строки. Замер 2026-09-03 на 1280px: кликабельные элементы имели
   высоту 14–21px (город 122×16, телефон 110×21, «заказать звонок» 101×14) — по тексту,
   потому что бокс считался по содержимому. Растягиваем их на всю высоту строки (36px)
   и даём горизонтальный паддинг: 44px в 36px-строку не помещаются, поднимать строку
   Лена не захотела (решение 2026-09-03), 36px — потолок этой полосы.
   Крайние элементы компенсируют свой паддинг отрицательным margin, чтобы ТЕКСТ остался
   вровень с линией контента, а не уехал внутрь на величину паддинга. */
.utility-city,
.utility-phone,
.utility-callback {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
}
.utility-bar__left > .utility-city:first-child { margin-left: calc(var(--space-2) * -1); }
/* «Заказать звонок» — теперь всегда последний элемент строки (форма выхода переехала
   в дропдаун профиля, 2026-09-03) — компенсирует свой паддинг отрицательным margin,
   чтобы текст остался вровень с линией контента. */
.utility-bar__right > .utility-callback:last-child { margin-right: calc(var(--space-2) * -1); }

/* City */
.utility-city {
  gap: var(--space-1);
  cursor: pointer;
}
.utility-city .ph { font-size: 16px; color: var(--ink-500); }
.utility-city:hover { color: var(--text-primary); }
.utility-city:hover .ph { color: var(--navy-900); }

/* Reviews — separate G and Я */
.utility-review {
  transition: opacity var(--dur-2) var(--ease-standard);
}

/* Phone group — time always visible, tooltip for extras */
.utility-phone {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.utility-phone__number {
  display: flex;
  align-items: center;
  /* Тянемся вслед за .utility-phone: кликает покупатель не по этой обёртке, а по
     вложенной ссылке tel: (include_areas/phone.php печатает <a class="h_tel_num">),
     поэтому высоту надо довести до самой ссылки — иначе тап-зона снова по тексту.
     Прежний padding:4px 0 был именно такой мини-зоной и теперь только сжимал бы ссылку. */
  align-self: stretch;
  gap: var(--space-1);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
}
/* color — объявление-источник ниже (решение Лены 2026-09-05, единый цвет с .utility-city):
   здесь всегда было мёртвым кодом при той же специфичности (0,1,0) — убрано 2026-09-03. */
.utility-phone__number .h_tel_num { align-self: stretch; }
.utility-phone:hover .utility-phone__number { color: var(--text-secondary); }
.utility-phone__number .ph { font-size: var(--icon-sm); color: var(--ink-500); }

/* Tooltip — DS-style (navy-900 bg, white text) */
.utility-phone__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--navy-900);
  color: var(--paper);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-standard);
  z-index: 150;
}
.utility-phone__tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 16px;
  border: 5px solid transparent;
  border-bottom-color: var(--navy-900);
}
.utility-phone:hover .utility-phone__tooltip,
.utility-phone.is-tooltip-open .utility-phone__tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Separator */
.utility-sep {
  width: 1px;
  height: 14px;
  background: var(--ink-200);
  flex-shrink: 0;
}

/* =========================================================================
   ROW 2: MAIN HEADER (sticky)
   ========================================================================= */
.main-header {
  /* ПРОВЕРЕНО 2026-09-03 в браузере на превью: ни разу в файле не задавался font-family —
     computed font-family у ВСЕХ текстовых элементов шапки был Verdana (легаси body{}),
     кроме кнопки «Выйти» — на момент находки это были .hdr-logout__btn (утилитарная
     строка) и .burger-footer__logout-btn (бургер-подвал), оба <button>, шрифт от предков
     не наследуется, поэтому там уже стоял явный var(--font-sans). Отсюда жалоба «разный
     шрифт»: «Выйти» был единственным элементом с ПРАВИЛЬНЫМ шрифтом, не с неправильным.
     .hdr-logout__btn с тех пор удалён — выход на десктопе переехал в .md-menu__item
     дропдауна профиля (см. там же, ниже), факт находки от этого не меняется.
     Глобально типографику не грузим (см. .acc-grid) — задаём локально, как и там. */
  font-family: var(--font-sans);
  transition: box-shadow var(--dur-3) var(--ease-standard);
}

.main-header__inner {
  display: flex;
  align-items: center;
  /* Воздух сверху и снизу задаём отступами, а не фиксированной высотой: при height он
     зависел от содержимого и по факту различался (р.41). */
  /* Одна высота на всех ширинах — 44px содержимого плюс по 8px отступа сверху и снизу.
     Раньше здесь стояло 64px, а в @media(max-width:900px) — сначала 56px (не срабатывало
     ни разу: естественная высота была теми же 60), потом 52px. В обоих случаях на 900
     высота прыгала: 64→60, затем 64→52. Прыжок и был жалобой, а «на мобиле пониже» его
     только увеличивало: пока десктоп и мобильный ростом различаются, ступенька на
     брейкпоинте существует по определению. Поэтому брейкпоинта по высоте больше нет.
     min-height держит строку ровной там, где часть элементов скрыта (чекаут), — без него
     высота поехала бы за содержимым. Отступ 8px — по просьбе Ильи 2026-09-06, было 4. */
  min-height: 60px;
  /* padding-block, а НЕ шорткат «padding: X 0»: этот же div несёт класс .hdr-container,
     у которого боковое поле — --grid-margin. Шорткат обнулял его горизонтальную часть
     при равной специфичности (0,1,0) и более позднем месте в файле, из-за чего главная
     строка теряла боковое поле, а полосы шапки разъезжались с контентом. Механизм
     проверен 2026-09-03 в браузере на превью (el.matches по всем правилам с padding). */
  padding-block: var(--space-2);
  gap: var(--space-4);
}

/* Logo */
.hdr-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.hdr-logo svg {
  height: 30px;
  width: auto;
  display: block;
}
/* Логотип: полная надпись до 500px, ниже — мини-знак (решение Лены, р.42a).
   Полная надпись — картинка 303px шириной, а .hdr-logo стоял flex:0 0 auto и не сжимался:
   логотип выталкивал поиск и иконки за пределы строки. Поэтому на мобиле разрешаем сжатие
   (flex:0 1 auto + min-width:0), а сама картинка ужимается max-width:100%.
   Мини-знак ростом с кнопку бургера — обе высоты берутся из одного токена. */
.hdr-logo__mini { display: none; }
@media (max-width: 900px) {
  /* Своего margin-left у лого нет: отступ от бургера даёт общий gap строки
     (.main-header__inner, --space-4 на всех ширинах). Прежняя схема «gap:0 + margin
     у лого» держала два разных механизма на один отступ — решение Лены 2026-09-03
     свести к одному шагу сетки. */
  .hdr-logo { flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
  .hdr-logo__full { display: block; max-width: 100%; height: auto; }
  .hdr-logo__mini { display: none; }
}
/* Ниже 500px раньше показывался мини-знак; после снятия кнопки подбора в шапке освободилось
   место, и на мобиле показываем полное лого на всех ширинах (решение Лены, 2026-09-01).
   Резиновость дают правила ≤900 выше: flex:0 1 auto + min-width:0 + max-width:100% —
   лого сжимается и не выталкивает соседние элементы. Мини-знак пока не используется. */


/* Search — wide, always visible on desktop */
.hdr-search {
  min-width: 0;
}
.hdr-search .md-search {
  height: var(--control-height-md);
}
/* <input> не наследует font-family от предков по умолчанию (UA-стиль браузера) — без этого
   поле поиска рендерилось в Arial, а не в шрифте шапки (разбор — .main-header{font-family}). */
.hdr-search input { font-family: inherit; }
/* .hdr-search .md-search:focus-within{border-color/box-shadow} — объявление-источник ниже
   (ДС-кольцо фокуса, стр. ~580): здесь оба свойства были мёртвым кодом при одинаковой
   специфичности (0,3,0) — убрано 2026-09-03, вместе с !important без комментария. */
.hdr-search .md-search input:focus {
  outline: none;
  box-shadow: none;
}

/* Left group: burger + search (mobile) */

/* Icon button with badge overlay (cart, favorites) */
/* Logged-in badge — small green circle with white check */

/* Auth button */


/* =========================================================================
   CATALOG DROPDOWN
   ========================================================================= */
.catalog-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--dur-3) var(--ease-standard),
              transform var(--dur-3) var(--ease-standard);
}
.catalog-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.catalog-dropdown__inner {
  max-width: var(--container-desktop);
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

/* Backdrop */
.catalog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 28, 56, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-standard);
}
.catalog-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* =========================================================================
   MOBILE: BURGER PANEL (slides from left)
   ========================================================================= */
.burger-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 28, 56, 0.4);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-standard);
}
.burger-overlay.is-open { opacity: 1; pointer-events: auto; }

.burger-panel {
  /* Сиблинг <header> в разметке (header.php:457), от .main-header{font-family} не наследует —
     разбор находки «разный шрифт» там же. */
  font-family: var(--font-sans);
  position: fixed;
  top: 0; left: 0;
  /* Высота через 100dvh, а НЕ top:0/bottom:0. На iOS/мобильном Chrome нижняя часть
     fixed-элемента с bottom:0 уезжает под сворачивающуюся адресную строку — подвал бургера
     (профиль/регион/телефон/рейтинги) оказывался за пределами видимой области и был обрезан
     или не виден вовсе (баг Лены на iPhone XR+, 2026-09-04). dvh = высота ВИДИМОЙ области,
     она сжимается вместе с браузерным хромом. Тем же приёмом уже сделан .mobile-search-overlay
     (height:100dvh) — он этим не страдал. dvh-only, без vh-фолбэка, — тот же паттерн, что
     у .mobile-search-overlay в этом файле (единый подход к высоте оверлеев шапки). */
  height: 100dvh;
  width: 100%;   /* меню на всю ширину — единообразно с полноэкранным поиском (ревью Лены) */
  background: var(--paper);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform var(--dur-3) var(--ease-standard);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* панель не скроллится целиком: скроллится только .burger-nav, подвал закреплён снизу */
}
.burger-panel.is-open { transform: translateX(0); }

.burger-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.burger-nav { padding: var(--space-3) 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.burger-nav__section-title {
  padding: var(--space-3) var(--space-5) var(--space-1);
  font-size: var(--text-caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.burger-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body-size);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-standard);
}
.burger-nav__link:hover { background: var(--navy-050); }
.burger-nav__link .ph { font-size: 20px; color: var(--ink-500); }
.burger-nav__link--promo { color: var(--error-600); }
.burger-nav__link--promo .ph { color: var(--error-600); }

/* Служебная часть (профиль/регион/телефон/рейтинги) закреплена снизу — не теряется в списке.
   Тень сверху = подсказка, что над подвалом ещё есть прокручиваемый список (ревью Лены). */
.burger-footer {
  flex: none;
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 14px rgba(0,28,56,.06);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.burger-footer__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}
/* Строка региона — две строки: город сверху, «срок · сумма» под ним. Иконка стоит слева
   от обеих, поэтому сетка, а не колоночный flex. Это ВТОРОЕ место с такой раскладкой,
   первое — липкий чип в шапке; по правилу трёх на третьем поводе выносим в общий класс,
   пока дублируем осознанно (simplicity.md). Точку перед сроком гасим: она разделяла
   город и срок в одну строку, на своей строке читается как маркер списка. */
.burger-footer__row--del {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'pic city' 'pic meta';
  align-items: center;
  align-content: center;
  column-gap: var(--space-2);
  row-gap: 0;
}
.burger-footer__row--del .ph { grid-area: pic; }
.burger-footer__row--del .hdr-del__city { grid-area: city; min-width: 0; }
.burger-footer__row--del .hdr-del__meta {
  grid-area: meta; margin-left: 0; font-size: var(--text-body-sm-size);
}
.burger-footer__row--del .hdr-del__meta::before { content: none; }
/* Парное к чипу: без города вторая дорожка сетки не нужна — см. комментарий там же. */
.burger-footer__row--del:has(.hdr-del__meta[hidden]) { grid-template-areas: 'pic city'; }
/* font-size — объявление-источник у #m9 ниже (единый размер ЛК/региона/телефона):
   здесь было мёртвым кодом при той же специфичности (0,1,0) — убрано 2026-09-03. */
.burger-footer .hdr-action__ic .ph { font-size: 20px; color: var(--ink-500); }
/* .burger-footer__row .ph — font-size тоже source ниже (#m9); color жив только здесь,
   вынесен отдельным правилом, чтобы не задеть .burger-footer .hdr-action__ic .ph выше,
   у которого font-size:20px НЕ перебит и должен остаться. */
.burger-footer__row .ph { color: var(--ink-500); }
.burger-footer__phone {
  color: var(--text-primary);
}
.burger-footer__reviews {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* Звёзды рейтинга в подвале были серыми — .utility-review__star без своего цвета падает
   на базовый var(--text-tertiary) (объявление ниже, ROW 1 UTILITY BAR), а жёлтый был
   задан только для .utility-bar .utility-review__star. .burger-footer__reviews стоит
   вне .utility-bar (это подвал бургер-меню, не десктопная строка), то правило её не
   касалось — баг нашла Лена 2026-09-04. Только звезда — фон подвала остаётся светлым
   (var(--paper)), текст платформы/оценки не трогаем. */
.burger-footer__reviews .utility-review__star { color: var(--yellow-400); }

/* =========================================================================
   MOBILE SEARCH OVERLAY
   ========================================================================= */
/* Полноэкранный поиск на мобиле (по прототипу): поле сверху, ниже — быстрые разделы. */
.mobile-search-overlay {
  /* Сиблинг <header> в разметке (header.php:445), от .main-header{font-family} не наследует —
     разбор находки «разный шрифт» там же. Инпуту дополнительно нужен свой font-family:
     inherit — .hdr-search input, .mobile-search-overlay input ниже, у <input> нет
     наследования шрифта по умолчанию (UA-стиль браузера). */
  font-family: var(--font-sans);
  position: fixed;
  inset: 0;
  height: 100dvh;
  background: var(--paper);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--dur-3) var(--ease-standard);
}
.mobile-search-overlay input { font-family: inherit; }
.mobile-search-overlay.is-open { transform: translateY(0); }
.mobile-search-overlay__top {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); min-height: 56px; flex: none;
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-search-overlay .md-search { flex: 1; height: 40px; }

/* =========================================================================
   RESPONSIVE — breakpoint 900px
   ========================================================================= */
@media (max-width: 900px) {
  /* .utility-bar{display:none} — объявление-источник, ROW 1 выше. */
  .catalog-dropdown { display: none; }
  .catalog-backdrop { display: none; }
  .hdr-desktop-only { display: none; }

  /* gap строки НЕ обнуляется: шаг сетки один и тот же на всех ширинах (--space-4),
     как и у .hdr-actions ниже. Прежнее обнуление (2026-09-02) требовало компенсации
     margin-left у лого — два механизма на один отступ; сведено к одному 2026-09-03. */
  .hdr-search { display: none; }

  /* Make action icon buttons smaller on mobile */
  .hdr-actions .md-btn--icon { height: var(--control-height-md); width: var(--control-height-md); border-radius: var(--radius-sm); }
  .hdr-actions .md-btn--icon .ph { font-size: var(--hdr-icon-size); }

  /* .hdr-actions (margin-right, gap) на мобиле — объявление-источник у базового правила
     ниже, а не здесь: правило CSS №9, порядок в каскаде важнее специфичности. Этот
     @media(max-width:900px) стоит В ФАЙЛЕ раньше безусловного .hdr-actions{gap:...},
     и при равной специфичности (оба — голый .hdr-actions) побеждает то, что позже —
     то есть мобильный gap молча проигрывал десктопному, независимо от ширины экрана
     (найдено Леной 2026-09-04, проверено сравнением сработавших правил в DOM: margin-right
     применялся — его нет в безусловном правиле, а gap — нет, конфликтующее свойство есть). */
}
@media (min-width: 901px) {
  .hdr-mobile-only { display: none !important; }
  .burger-overlay, .burger-panel { display: none; }
  .mobile-search-overlay { display: none; }
}
/* ═══ Шапка р.19 — адаптивный поиск (ревью Лены): инлайн-поиск держим до узкого экрана,
   в иконку сворачиваем только ≤560. Подбор по авто виден с текстом на всех ширинах. ═══ */
@media (min-width: 561px) and (max-width: 900px) {
  /* Планшет/крупный телефон: показываем десктопный подбор (слева) и инлайн-поиск,
     прячем мобильные дубли (кнопка-иконка подбора и иконка поиска). */
  .hdr-search.hdr-desktop-only { display: block !important; flex: 1 1 auto; min-width: 0; }
  #mobileSearchToggle { display: none !important; }
}

/* =========================================================================
   STATES DEMO SECTION
   ========================================================================= */

/* ═══ Интеграция mirdvornikov (ревью Лены, р.3). Дизайн-решения свести в исходник ДС. ═══ */
/* .utility-bar{box-shadow:none} и font-size — объявление-источник, ROW 1 выше. */
.utility-bar__inner { min-height: 30px; }
.utility-bar * { font-size: var(--text-body-sm-size); }
/* Вес 500 (--fw-medium) — только у города (он же несёт дату и цену доставки, .hdr-del__date/
   __price): это единственный акцент строки. Телефон и остальное — 400, вес не задаёт здесь
   вообще ничего, наследует обычный текст (решение Лены 2026-09-05). */
.utility-city, .utility-city *, .utility-phone__number, .utility-phone__number * { color: var(--text-secondary); text-decoration: none; }
.utility-city, .utility-city * { font-weight: var(--fw-medium); }
/* !important обязателен, и вот почему (ПРОВЕРЕНО в браузере 2026-09-04, находка ревью
   MR !46, Low «!important без указания, что бьёт»): номер печатает легаси-инклюд
   include_areas/phone.php ссылкой <a class="h_tel_num">, а template_styles.css:342 даёт
   .h_tel_num{font-size:18px} и грузится ПОЗЖЕ md-header.css. Специфичность тут равная,
   а не большая, как кажется: в `.utility-phone__number *` универсальный селектор не
   добавляет веса, то есть (0,1,0) против (0,1,0) у .h_tel_num — при равенстве побеждает
   более поздний файл. Без !important замер даёт 18px вместо 13px. Правилом CSS №9
   (чинить порядок, а не важность) не решается: порядок задан подключением легаси-файла
   шаблона, а не нашим. */
.utility-phone__number, .utility-phone__number * { font-size: var(--text-body-sm-size) !important; }
/* Отзывы — простым текстом «Google ★ 4.9 · Яндекс ★ 4.8», без цвета/жирного/крупного (ревью Лены). */
.utility-reviews { display: inline-flex; align-items: center; gap: var(--space-4); }
.utility-review { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none;
  color: var(--text-secondary); font-size: var(--text-body-sm-size); font-weight: var(--fw-regular); }
.utility-review:hover { color: var(--navy-900); opacity: 1; }
.utility-review__platform { font-weight: var(--fw-regular); color: inherit; font-size: var(--text-body-sm-size); }
.utility-review__star { color: var(--text-tertiary); font-size: var(--text-body-sm-size); font-weight: var(--fw-regular); }
.utility-review__score { color: inherit; font-weight: var(--fw-regular); }
.utility-sep { display: none; }
.main-header { position: sticky; }
.main-header.is-scrolled { box-shadow: var(--shadow-md); }
.main-header__inner, .hdr-container { width: 100%; }
/* р.26: max-width убран — поиск забирает всё свободное место, иначе остаток ширины
   уходил в один плавающий зазор перед иконками (margin-left:auto ниже). */
.hdr-search { flex: 1 1 auto; }
.md-search input { border: none; outline: none; box-shadow: none; background: transparent; }
.md-search input:focus, .md-search *:focus { outline: none; box-shadow: none; }
.md-search:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
/* Шаг между иконками действий — тот же токен, что и gap всей строки (--space-4).
   На десктопе кнопки с подписью (см. .hdr-action ниже) шире тап-зоны за счёт текста —
   воздуха тап-зоны в боксе не остаётся, gap работает как обычный шаг между боксами.
   На мобиле бокс = голая тап-зона 44px, там gap:16px (--space-4) складывался с воздухом
   тап-зоны (10px с каждой стороны) и давал 36px между глифами вместо 16 — исправлено
   ниже, в @media(max-width:900px), той же переменной --hdr-icon-size, что и margin-right
   у выравнивания на линию сетки (найдено Леной 2026-09-04). */
.hdr-actions {
  display: flex; align-items: center; gap: var(--space-4); margin-left: auto;
  /* Размер глифа — один источник для .hdr-action .ph и .md-btn--icon .ph ниже
     (наследуется потомкам), и для компенсации воздуха под ним же. */
  --hdr-icon-size: 24px;
}
/* Мобильные переопределения .hdr-actions — СРАЗУ после базового правила (не в общем
   блоке @media(max-width:900px) выше по файлу): при равной специфичности побеждает то,
   что позже в источнике, порядок важнее того, где физически лежит медиазапрос
   (правило CSS №9; проверено 2026-09-04 — gap отсюда молча проигрывал строке 453,
   пока блок стоял раньше нее). */
@media (max-width: 900px) {
  /* Паддинг строки (--grid-margin) — это отступ до КРАЯ ТАП-ЗОНЫ, но зона у иконок
     действий шире самого глифа на воздух центрирования — глиф вставал ещё на этот
     воздух правее линии сетки (найдено Леной 2026-09-04). Тянуть глиф на линию, оставив
     тап-зону невидимо шире (по образцу apple.com/hu — там паддинг строки нулевой вовсе,
     потому что вся раскладка держится на этом же приёме). Дословно взять их модель
     нельзя: у Apple тап-зона фиксирована (48px) и без паддинга строки, а у нас
     --grid-margin меняется по брейку 768 (16→32px) внутри той же мобильной раскладки
     шапки (действует до 900px) — при паддинге 0 и тап-зоне 48 (24+2×32) иконки на 800px
     пришлось бы делать 88px, это неприменимо. Компенсируем воздух ЗАДАННОЙ тап-зоны
     отрицательным margin, а не убираем паддинг строки — формула не завязана на
     --grid-margin и работает на любом брейке. Подробности и отвергнутые варианты —
     docs/decisions/2026-09-04-header-icon-edge-alignment.md.

     Тот же воздух портит и gap МЕЖДУ иконками действий: между глифами поиска и корзины
     было 36px — gap:16px (--space-4) плюс воздух двух тап-зон (10+10), они складывались,
     а не заменяли друг друга. Формула вместо магического числа: между глифами нужен тот
     же шаг сетки --space-4, воздух с обеих сторон (control-height-md - hdr-icon-size) уже
     даёт его сам — gap = --space-4 минус этот воздух. Арифметика в текущих токенах
     (16 - (44-24)) уходит в минус — воздуха тап-зон уже больше шага сетки, ужимать нечем,
     дно 0px. Держит 20px между глифами — тот же минимум, что был посчитан в файле до
     2026-09-03 (44+44 впритык, меньше нельзя не наложив тап-зоны). */
  .hdr-actions {
    margin-right: calc(-1 * (var(--control-height-md) - var(--hdr-icon-size)) / 2);
    gap: max(0px, calc(var(--space-4) - (var(--control-height-md) - var(--hdr-icon-size))));
  }
}
/* Корзина и профиль — иконочные кнопки в рост с поиском (44px).
   Padding убран намеренно (р.31c). У .hdr-action нет border-box: глобального ресета в шаблоне
   нет, md-reset.css не подключён, а md-components.css даёт border-box только классам md-*.
   Поэтому min-width считался по СОДЕРЖИМОМУ и padding 8+8 прибавлялся сверху: кнопка выходила
   60px вместо 44, глиф оказывался в 18px от края. Тап-зону держит min-width/height 44px,
   padding для этого не нужен вовсе. */
.hdr-action {
  position: relative; display: inline-flex; align-items: center; gap: 2px; text-decoration: none;
  flex-direction: row;
  height: var(--control-height-md);
  min-width: var(--control-height-md);
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--navy-700);
}
.hdr-action:hover { background: none; color: var(--navy-900); }
.hdr-action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hdr-action .ph { font-size: var(--hdr-icon-size, 24px); color: var(--navy-700); }
.hdr-action:hover .ph { color: var(--navy-900); }
/* Аккаунт: якорь для .md-menu (компонент ДС, md-components.css) — позиционирование
   меню специфично для этого места (справа под кнопкой), сам компонент общий. */
.hdr-account { position: relative; }
.hdr-account .md-menu { top: 100%; right: 0; margin-top: var(--space-2); }
/* Вес цифры счётчика снижен с fw-semibold (600) до fw-medium (500) — решение Лены
   2026-09-05, «облегчить». Свойство общее для обоих типов бейджа (--count и --ok), но
   реально влияет только на цифру: у --ok внутри SVG-иконка, font-weight на неё не
   действует вовсе. */
.hdr-action__badge { position: absolute; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: var(--fw-medium); color: #fff; }
/* padding-inline — только цифровому бейджу: он растягивается под «10+»/«99+» и без
   внутренних отступов цифры встают впритык к скруглению. У --ok внутри SVG-галка с
   фиксированным viewBox 26×26, и вместе с box-sizing:border-box (ниже, там же, где
   min-width/height бейджа) те же 3px ужимали контент-бокс до 18−3−3=12px: круг рисовался
   12px внутри честного бокса 18×18 — заметно мельче цифрового бейджа. Поэтому объявление
   живёт на модификаторе, а не на общем .hdr-action__badge. */
.hdr-action__badge--count { background: var(--error-600); padding-inline: 3px; }
/* .menu-basket на корне корзины — точка стыковки для AJAX-подмены, оформления не несёт:
   легаси-правила под этот класс удалены из template_styles.css в р.30b (разметки под них
   в md2019 больше нет), поэтому гасить нечего. */
/* --ok (галочка профиля) больше не составной: раньше CSS рисовал круг фоном, а SVG-иконка
   красилась поверх через .ph — оказалось хрупко (кэш спрайта, конфликты font-size/цвета,
   контурная versus заливная фигура — три захода за двое суток, разбор в
   docs/decisions/2026-09-05-badge-checkmark-standard-icon.md). Решение Лены 2026-09-05:
   готовая картинка целиком (круг + галка одним <svg> прямо в разметке, header.php),
   ничего не компонуем в CSS. background и .ph-правила под --ok больше не нужны. */
/* Ниже 768px тап-зона .hdr-action раньше схлопывалась (min-width:0 + height 36px):
   замер 2026-09-03 на превью показал корзину 24×36 против нормы 44×44. Оба правила
   сняты; размер держит бокс .hdr-action__ic (см. ниже) — иконка внутри контейнера
   с заданными размерами, как в шапке apple.com (замечание Лены). */

/* ═══ Шапка р.4 — фиксы по ревью Лены (сессия 2026-08-19). Свести в исходник ДС. ═══
   Все правила подняты по специфичности, чтобы бить легаси-глобали template_styles.css,
   которые идут позже в склейке Битрикса (равная специфичность → побеждает поздний). */

/* #1 регион: чип my:region.picker; правило держим за размер и цвет (легаси .h_reg_name
   с 2026-09-06 не печатается — класс был у ссылки twofingers). */
.utility-city .md-region__chip {
  font-size: var(--text-body-sm-size);
  font-weight: var(--fw-medium);
  margin-top: 0;
  color: var(--text-secondary);
  text-decoration: none;
}
.burger-footer__row .md-region__chip {
  font-size: var(--text-body-size);
  margin-top: 0;
  color: var(--text-primary);
  text-decoration: none;
}

/* #3 поиск: легаси input[type="text"] (0,1,1) и :focus (0,2,1) перебивали
   .md-search input. Целимся в [type="text"] (0,2,1 / 0,3,1) — ДС побеждает
   независимо от порядка склейки. Внутренней рамки/фокуса у инпута нет —
   индикатор фокуса живёт на обёртке .md-search (кольцо ДС). */
.md-search input[type="text"] {
  border: 0;
  background: transparent;
}
.md-search input[type="text"]:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}
/* Кольцо фокуса поля поиска задаёт объявление-источник .md-search:focus-within выше
   (и такое же в md-components.css) — здесь правило не нужно.
   Удалено 2026-09-04 (находка ревью MR !46, Low): оно перебивало «глушитель»
   .hdr-search .md-search:focus-within{box-shadow:none!important}, которого в файле
   давно нет, и дублировало базовое правило теми же значениями, только с двумя
   !important. ПРОВЕРЕНО в браузере: с правилом и без него computed-значения совпадают —
   border-color rgb(53,88,119) (--border-focus) и box-shadow 0 0 0 3px rgba(0,28,56,.28)
   (--shadow-focus). NB для будущих замеров фокуса: у .md-search есть transition на
   border-color/box-shadow, а в неактивной вкладке переходы тормозятся — computed-стиль
   читается как стартовый. Мерить с transition:none, иначе кольцо выглядит «сломанным». */

/* #6 подборщик #filter-wrapper (легаси sticky, z-index:100) перекрывал шапку.
   Шапку поднимаем выше него, но ниже мобильного поиска (150), бургера (200),
   попапов локации/Fancybox (1001/1050). */
.main-header { z-index: 120; }

/* #7 ховер корзины/ЛК: круглая подложка под ИКОНКОЙ (не под галкой в бейдже) +
   иконка темнее. Падинг зарезервирован всегда, чтобы на ховере не было скачка.
   `> .ph` — только главная иконка; галка в бейдже (.hdr-action__badge .ph) не трогается. */
.hdr-action > .ph {
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}

/* #8 мобильное меню: ссылки в бургер-подвале (ЛК, Контакты) — без легаси-подчёркивания.
   .burger-footer__link (0,1,0) < легаси a{underline} (0,0,1) по типу, но добавляем
   свойство text-decoration в само правило класса — оно уже бьёт a по специфичности. */
.burger-footer__link {
  text-decoration: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.burger-footer__link:hover { color: var(--text-primary); }
.burger-footer__link .ph { color: var(--ink-500); }

/* ═══ Шапка р.5 — вторая волна ревью Лены (сессия 2026-08-19). Свести в исходник ДС. ═══ */

/* Обход #d5 удалён 2026-09-03 (ревью MR !46). Он дублировал box-sizing и padding-inline
   для трёх полос шапки под объяснением «базовое .hdr-container{padding-inline} стабильно
   теряется при склейке на этом контуре». ПРОВЕРЕНО в браузере на превью 2026-09-03:
   объяснение ложное — базовое правило доходит до браузера целым (найдено в
   document.styleSheets), склейка ни при чём. Реальная причина была одна и только у главной
   строки: тот же div несёт и .hdr-container, и .main-header__inner, а последний задавал
   боковое поле шорткатом «padding: var(--space-2) 0» — при равной специфичности (0,1,0)
   и более позднем месте в файле он обнулял горизонтальный паддинг. Починено в источнике:
   .main-header__inner теперь padding-block (см. там же), box-sizing переехал в базовое
   .hdr-container. Утилитарная строка и мобильная доставка в обходе не нуждались вовсе. */

/* Мобильный паддинг главной строки НЕ обнуляется (откат правила от 2026-09-02).
   Расчёт «по образцу Apple» не подтвердился: предполагалось, что видимый отступ
   до глифа даёт centering ВНУТРИ тап-зоны за счёт «подушки», зашитой в саму иконку
   (как у SF Symbols). Проверка 2026-09-03 (getBBox() иконок Phosphor в спрайте) показала,
   что это не так — «подушка» разная у каждой иконки и местами асимметричная (см.
   build-sprite.py), из-за чего бургер вставал вплотную к левому краю экрана (замерено:
   0px вместо --grid-margin). После обрезки спрайта по контуру (build-sprite.py,
   docs/decisions/2026-09-03-icon-sprite-tight-viewbox.md) иконки вообще перестают нести
   свой отступ — обнулённый паддинг оставил бы бургер и иконки действий буквально
   впритык к краю экрана. Паддинг строки — снова токен-паддинг из правила выше. */

.hdr-action > .ph { padding: 0; border-radius: 0; background: none; }
.hdr-action:hover > .ph { background: none; color: inherit; }
/* Иконки — чистые, без подложек (вариант A, ревью Лены; как в тулбарах Apple).
   Обратная связь на ховере — только цвет navy-700→navy-900 (см. .hdr-action:hover). */
.hdr-action__ic { position: relative; display: inline-flex; align-items: center; }
.hdr-action__ic .ph { font-size: 24px; color: inherit; }
/* Тап-зона живёт на самом контейнере иконки, а не на внешней кнопке: внешняя меняется
   от ширины к ширине (на десктопе — колонка с подписью, min-width обнулён ради выравнивания
   текста по сетке), и зона вслед за ней уже один раз схлопнулась до 24×36. Заданный бокс
   у .hdr-action__ic делает 44×44 независимым от этих правок — принцип apple.com, где иконка
   лежит в контейнере с фиксированными размерами (замечание Лены 2026-09-03).
   Скоуп — только шапка: тот же класс используется в подвале бургера, где иконка стоит
   в текстовой строке и бокс 44px разорвал бы её. */
/* Только ≤900: на десктопе тап-зону задаёт сама кнопка с подписью (замер: профиль 48×44,
   корзина 44×44 — норма уже выполнена), а бокс 44px у иконки прибавился бы к подписи
   и поднял бы высоту всей строки с 64 до 75px. */
@media (max-width: 900px) {
  .hdr-actions .hdr-action__ic { width: var(--control-height-md); height: var(--control-height-md); justify-content: center; }
  /* Бейдж считается от края ГЛИФА, а не бокса: глиф 24px по центру 44px бокса → до края 10px,
     поэтому 10-7=3, иначе счётчик уехал бы за пределы иконки. */
  .hdr-actions .hdr-action__badge { top: 3px; right: 3px; }
}
/* бейджи — относительно иконки (.hdr-action__ic), не всей кнопки.
   width не фиксирован — счётчик корзины кэпается только на 99+
   (см. sale.basket.basket.line/2019/template.php), «99+» шире 18px и вылезал бы за пределы
   круга (находка ревью MR !46, Low). min-width держит круг на одной цифре, padding-inline
   даёт воздух по бокам, когда знаков больше; right:-7px не трогаем, поэтому правый край
   стоит на месте, а лишняя ширина уходит влево, к центру иконки.
   box-sizing обязателен: глобального ресета в шаблоне нет, md-reset.css не подключён, а
   md-components.css даёт border-box только классам md-*. Без него min-width:18px — это ширина
   КОНТЕНТА, к ней прибавлялись паддинги 3+3, и бейдж выходил 24×18 — овалом уже на ОДНОЙ
   цифре (жалоба Лены 2026-09-05: «уже на 2 — овал»). ЗАМЕРЕНО 2026-09-05 в браузере:
   было 24×18 на «2» и на «12»; стало 18×18 (круг) на одной цифре, 20×18 на двух, 28×18 на
   «99+» — то есть круг до 9 включительно, овал только с 10. */
/* padding-inline здесь не задаётся: он нужен только --count и объявлен на нём (см. выше). */
.hdr-action__badge { box-sizing: border-box; top: -7px; right: -7px; min-width: 18px; height: 18px; font-size: var(--text-label-size); }
/* Подписи под иконками (только профиль и корзина — единственные .hdr-action) — десктоп,
   решение Лены 2026-09-02. Смысл подписи — заменить собой отступ: сама подпись должна
   вставать вровень с линией контента, без паддинга у кнопки (паддинг увёл бы текст глубже
   линии — та же проблема с «лишним отступом», которую и решали весь день). Поэтому:
   min-width обнулён (бокс = ширина подписи, не 44px тап-зоны), паддинга нет вовсе.
   Подпись корзины = ::after{content:attr(aria-label)} — у неё aria-label уже «Корзина»,
   не зависит от состояния. У профиля aria-label состояние-зависимый («Войти»/«Личный
   кабинет»), а подпись должна быть неизменной «Профиль» (решение Лены) — задаём её текстом
   отдельным правилом с более высокой специфичностью (.hdr-desktop-only), а не через attr().
   На мобиле (профиль скрыт hdr-desktop-only, ≤900) подписи нет — ::after гасим по умолчанию
   и включаем только ≥901px, тем же порогом, что делит desktop/mobile-only в шапке. */
.hdr-action::after { content: none; }
@media (min-width: 901px) {
  .hdr-action {
    flex-direction: column;
    height: auto;
    min-width: 0;
    min-height: var(--control-height-md);
    gap: var(--space-1);
  }
  .hdr-action::after {
    content: attr(aria-label);
    font-size: var(--text-label-size);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    color: inherit;
  }
  /* .hdr-account .hdr-action — авторизованный (триггер меню, hdr-desktop-only на обёртке
     .hdr-account, не на самом .hdr-action); .hdr-action.hdr-desktop-only — гость (класс
     прямо на элементе, своей обёртки нет). Обе ветки — одна и та же подпись. */
  .hdr-account .hdr-action::after,
  .hdr-action.hdr-desktop-only::after { content: "Профиль"; }
}


/* #d3 крестик очистки поиска удалён 2026-09-03 вместе с кнопкой .md-search__clear —
   заменён кнопкой «найти» .md-search__submit (md-components.css). */

/* #m6 ghost-иконки в шапке/моб.поиске/бургере: мягкая скруглённая подложка вместо круга */
.main-header .md-btn--icon,
.mobile-search-overlay .md-btn--icon,
.burger-panel__header .md-btn--icon { border-radius: var(--radius-sm); cursor: pointer; }

/* #m4 лого в бургер-панели — слева (моб. .hdr-logo{flex:1;justify-content:center} его центрировало) */
.burger-panel__header .hdr-logo { flex: 0 0 auto; justify-content: flex-start; }

/* #m9 бургер-подвал: единый размер у ЛК / региона / телефона */
.burger-footer__row,
.burger-footer__link { font-size: var(--text-body-size); }
.burger-footer__row .ph,
.burger-footer__link .ph { font-size: var(--icon-md); }
.burger-footer__phone { font-size: var(--text-body-size); font-weight: var(--fw-medium); }
.burger-footer__time { font-size: var(--text-body-sm-size); color: var(--text-tertiary); }
/* Номер телефона внутри .burger-footer__phone — легаси <a class="h_tel_num"> из
   include_areas/phone.php (переиспользуется, свой класс не задать). template_styles.css
   грузится ПОСЛЕ md-header.css и на десктопе даёт .h_tel_num{font-size:18px;color:#03363d}
   (:342, 0,1,0), а на ≤860px — font-size:15px !important + border-bottom:1px dashed (:313,
   в @media). Правило выше .burger-footer__phone на span-обёртку это не перебивает — легаси
   сидит на самой ссылке (найдено ревью MR !46, M1). Тот же приём и та же специфичность
   (0,2,0), что у .burger-footer__row .md-region__chip чуть выше по файлу.
   !important на ≤860 можно перебить только !important — правило CSS №9 тут бессильно:
   порядок в источнике не имеет значения, когда есть !important с любой стороны. */
.burger-footer__phone .h_tel_num {
  font-size: var(--text-body-size) !important;
  font-weight: var(--fw-medium);
  color: inherit;
  border-bottom: none;
}

/* #d4 каталог-дропдаун: над контентом и жёлтым #filter-wrapper (z=100), под баром шапки (120) */
.catalog-dropdown { z-index: 110; }
.catalog-backdrop { z-index: 105; display: none; }

/* admin: sticky-шапка ниже фикс. админ-панели Битрикс (значение ставит JS в footer; у гостей 0) */
.main-header { top: var(--md-admin-offset, 0px); }

/* #m1/#m2 надёжно прячем каталог-кнопку и ЛК на мобилке (перебивало явными display) */
@media (max-width:900px){ .hdr-desktop-only{ display:none !important; } }

/* ховер иконочных кнопок — только цвет, без подложки (вариант A, согласовано с иконками действий) */
.main-header .md-btn--icon:hover,
.mobile-search-overlay .md-btn--icon:hover,
.burger-panel__header .md-btn--icon:hover { background: none; color: var(--navy-900); }


/* ═══ Шапка р.8 — единый бургер → мегаменю (концепция v4). Свести в источник ДС. ═══
   Пилюля «Каталог» и ряд категорий убраны в р.8; их мёртвые CSS-правила
   вычищены в р.26. Один бургер на всех ширинах:
   десктоп → мегаменю (.catalog-dropdown), мобайл → дровер (.burger-panel). */

/* Единый бургер: иконка на нейтральной navy-подложке — тап-зона кнопки-меню (НЕ жёлтый — не главное действие, П6) */
.hdr-burger{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--control-height-md); height:var(--control-height-md);
  /* padding:0 — легаси-глобаль на button давала 1px 6px (замерено 2026-09-03),
     из-за неё бокс кнопки считался не только по width/height. */
  padding:0;
  border:0; border-radius:var(--radius-sm);
  /* Подложка иконки — в тон утилитарной строке (решение Лены). Само меню не трогаем. */
  background:var(--navy-700); color:var(--paper);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-standard);
}
.hdr-burger:hover,
.hdr-burger[aria-expanded="true"]{ background:var(--navy-800); color:var(--paper); }
.hdr-burger:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.hdr-burger .ph{ font-size:var(--icon-xl); }
@media (max-width:900px){
  .hdr-burger{ width:var(--control-height-md); height:var(--control-height-md); }
}

/* Мегаменю (десктоп): 4 колонки + плашка подбора. База — .catalog-dropdown. */
.mega-menu__inner{
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-5) var(--space-8);
  align-items:start;
}
.mega-col{ display:flex; flex-direction:column; gap:2px; }
.mega-col__title{
  font-size:var(--text-caption-size);
  font-weight:var(--fw-semibold);
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-tertiary);
  padding:0 var(--space-3) var(--space-2);
}
.mega-col__link{
  display:block;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-body-size);
  color:var(--text-primary);
  text-decoration:none;
  transition:background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.mega-col__link:hover{ background:var(--navy-050); color:var(--navy-900); }
.mega-col__link:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.mega-col__link--all{ color:var(--navy-700); font-weight:var(--fw-semibold); }
.mega-col__link--promo{ color:var(--error-600); font-weight:var(--fw-semibold); }
.mega-col__link--promo:hover{ background:var(--error-050); color:var(--error-600); }

/* Плашка подбора — единственный жёлтый акцент (главное действие, П6) */
.mega-menu__foot{
  max-width:var(--container-desktop);
  margin:0 auto;
  padding:var(--space-4) var(--space-8) var(--space-5);
  border-top:1px solid var(--border-subtle);
}
/* Подбор в меню — обычная ссылка-навигация (вариант A), НЕ жёлтая кнопка:
   жёлтый акцент один на экран и закреплён за кнопкой в шапке (П6). Здесь — переход на /cars/. */
.mega-menu__cta{
  display:inline-flex; align-items:center; gap:var(--space-2);
  color:var(--navy-800);
  font-size:var(--text-body-size); font-weight:var(--fw-semibold);
  text-decoration:none;
  transition:color var(--dur-2) var(--ease-standard);
}
.mega-menu__cta:hover{ color:var(--navy-900); text-decoration:underline; }
.mega-menu__cta:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm); }
.mega-menu__cta .ph{ font-size:20px; color:var(--navy-600); }

/* Дровер (мобайл): подбор сверху — ссылка-навигация с иконкой (вариант A), не жёлтая кнопка */
.burger-nav__featured{
  display:flex; align-items:center; gap:var(--space-3);
  margin:0; padding:var(--space-3) var(--space-5);
  color:var(--navy-900);
  font-size:var(--text-body-size); font-weight:var(--fw-semibold);
  text-decoration:none;
}
.burger-nav__featured:hover{ background:var(--navy-050); }
.burger-nav__featured .ph{ font-size:20px; color:var(--navy-600); }


/* ═══ Шапка р.10/р.11 — блок доставки: город + срок + цена (S2a + фиксы ревью). ═══
   Данные из /get_delivery_info_22.php (dyn_del), обновление по onTFLocationSetLocation.
   Город — twofingers; срок/цену дописывает JS в .hdr-del__date/.__price (число «к DD.MM»).
   Разделители между городом, сроком и суммой — точки посередине строки, их рисует CSS
   через ::before, а не JS: так они появляются и исчезают вместе со своими блоками. */
.hdr-del{ display:inline-flex; align-items:baseline; gap:0; min-width:0; text-decoration:none; color:inherit; }
/* Отступ иконка→город — токеном, не полагаемся на «естественный» 0 (находка ревью MR !46,
   п.1, 2026-09-03: gap:0 у .hdr-del и никакого margin у иконки — на превью замерено ровно
   0px, а не «плавающий» зазор). margin-right, а не общий gap на .hdr-del: gap лёг бы
   и на промежуток город→встреча/адрес, у которого уже свой margin-left:6px — задваивать
   его нельзя. Одно правило покрывает и утилитарную строку, и мобильную полосу — оба класс
   .hdr-del; для .hdr-sticky-del (свой gap, не класс .hdr-del) значение выровнено тем же
   токеном ниже, в его объявлении. */
.hdr-del .ph{ margin-right: var(--space-1); }
.hdr-del__city{ display:inline-block; }
/* Зазоры вокруг точек-разделителей — 4px (--space-1), было 6 (Илья, 2026-09-06):
   в узкой строке шесть пикселей с каждой стороны отрывали точку от того, что она
   разделяет, и «срок · сумма» читалось как три отдельных элемента. Значение одно
   и токеном — оно повторяется у точки перед суммой и у точки перед адресом ниже. */
.hdr-del__meta{ display:inline-flex; align-items:baseline; gap:var(--space-1); margin-left:var(--space-1); }
.hdr-del__meta[hidden]{ display:none; }   /* [hidden] иначе перебивается display:inline-flex — нужно для скрытия срока/цены у МСК/СПб */
.hdr-del__date{ color:var(--navy-900); font-weight:var(--fw-medium); white-space:nowrap; }
.hdr-del__price{ color:var(--text-secondary); font-weight:var(--fw-medium); white-space:nowrap; }
/* Разделители «·» (Илья, 2026-09-06): между городом и сроком и между сроком и суммой.
   Точку ставит ::before, а не JS: блок срока/суммы целиком скрыт у МСК и СПб ([hidden])
   и на узких ширинах (@container ниже), и точка должна уходить вместе с ним сама.
   У .hdr-del__meta псевдоэлемент — первый flex-элемент строки, зазор после него даёт
   её же gap; у .hdr-del__price и .hdr-del__addr он инлайновый внутри блока, поэтому
   зазор задаём вручную тем же значением — по --space-1 с обеих сторон точки. */
.hdr-del__meta::before,
.hdr-del__price::before,
.hdr-del__addr::before{ content:"·"; color:var(--text-tertiary); font-weight:var(--fw-regular); }
/* У .__meta точка — первый flex-элемент, зазор после неё даёт gap строки. У .__price и
   .__addr она инлайновая внутри блока, поэтому зазор задаём вручную тем же значением. */
.hdr-del__price::before,
.hdr-del__addr::before{ margin-right:var(--space-1); }
/* Адрес пункта самовывоза — только МСК/СПб, дописывает JS (короткий адрес из подвала).
   display:inline-block — как у .hdr-del__city выше: max-width/text-overflow браузер
   игнорирует на inline-элементах (span по умолчанию), обрез задаётся ниже, в мобильном
   медиа-запросе, тем же приёмом, что у города. */
/* font-weight:medium — как у остальной строки доставки (город/дата/цена), решение Лены
   2026-09-03: единый вес всей строки. Раньше regular «проигрывал» через равную
   специфичность с .utility-city *{fw-medium} за счёт более позднего места в файле —
   правим тут, в объявлении-источнике, а не оверрайдом. */
.hdr-del__addr{ display:inline-block; color:var(--text-tertiary); font-weight:var(--fw-medium); white-space:nowrap; margin-left:var(--space-1); }
.hdr-del__addr[hidden]{ display:none; }
/* Название города печатает my:region.picker инлайновой ссылкой .md-region__chip, поэтому
   text-overflow:ellipsis у родителя .hdr-del__city работает сам; обходное display:inline
   для flex-ссылки twofingers (находка MR !46 M2) снято вместе с компонентом 2026-09-06. */
.utility-bar .hdr-del__meta{ white-space:nowrap; }

/* Мобильная строка доставки — город виден без бургера. Отступы те же, что у остальных полос
   шапки: боковое поле даёт паддинг контейнера (объявлен вместе с util-строкой и главной
   строкой, см. выше), шаг между элементами — тот же токен --space-4. Прежняя схема
   «padding-inline:0 + margin-left у .hdr-del» повторяла костыль главной строки и снята
   вместе с ним 2026-09-03. */
/* Сиблинг <header> в разметке (header.php:304), от .main-header{font-family} не наследует —
   разбор находки «разный шрифт» там же. */
.hdr-mobile-delivery{ display:none; font-family:var(--font-sans); }
/* Показ ≤480, а не ≤900: до 480 верхнюю тёмную строку ведёт util-bar (сбрасывает элементы
   через @container), мобильная строка «город + телефон-иконка» включается только на узком
   телефоне, где у util-bar уже нет смысла. Порог согласован с util-bar выше (там display:none
   тоже ≤480), чтобы обе строки не показывались одновременно и город не задваивался. */
/* Фолбэк для браузеров без @container — парный к такому же у .utility-bar выше: там строка
   возвращается к скрытию на 900px, значит и мобильная строка обязана вернуться к показу на 900px,
   иначе на 481–900px спрятались бы ОБЕ строки и город пропал бы вовсе. Пара порогов 900/900 —
   ровно прежнее поведение файла до этой правки. */
@supports not (container-type: inline-size) {
  @media (max-width:900px){ .hdr-mobile-delivery{ display:block; } }
}
@media (max-width:480px){
  /* background/border-bottom/box-shadow — объявление-источник у р.39 ниже (тёмная строка,
     тон util-строки десктопа): здесь были мёртвым кодом при той же специфичности — убраны 2026-09-03. */
  .hdr-mobile-delivery{ display:block; }
  /* color — тоже источник у р.39 ниже, был мёртвым кодом здесь. */
  .hdr-mobile-delivery__inner{ display:flex; align-items:center; gap:var(--space-4); min-height:var(--control-height-sm);
    font-size:var(--text-body-sm-size); }
  /* align-self:stretch — тап-зона города во всю высоту строки (36px). Без него бокс считался
     по тексту: замер 2026-09-03 давал 283×19, хотя по клику открывается выбор города. */
  .hdr-mobile-delivery .hdr-del{ flex:1 1 auto; min-width:0; cursor:pointer; white-space:nowrap;
    align-self:stretch; align-items:center; }
  /* color — источник у р.39 ниже (тёмная строка): здесь был мёртвым кодом — убран 2026-09-03. */
  .hdr-mobile-delivery .hdr-del .ph{ font-size:16px; flex:none; }
  /* город обычным шрифтом (перебиваем легаси .h_reg_name{18px}). Жёсткий обрез 16ch снят
     (жалоба Лены №4: «обрезка региона лишняя, на мобилке есть место» — на iPhone XR (414px)
     и шире город+иконка телефона влезают целиком). Оставлен только страховочный механизм
     многоточия без max-width: город занимает доступное место (.hdr-del — flex:1 min-width:0),
     а режется лишь как крайняя мера, если экстремально длинное название + иконка реально не
     помещаются (согласовано: «многоточие как последняя мера»). */
  .hdr-mobile-delivery .hdr-del__city{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Адрес ПВЗ (МСК/СПб, дописывает JS) — тот же приём обреза, что у города выше, тем же
     приёмом (ch) — восстановлено 2026-09-03 (ревью MR !46, находка #1: правило потерялось
     вместе со снесённым в р.41 блоком «р.21/р.22», текущий детектор осиротевших селекторов
     на этом файле срабатываний не даёт — правило исчезло вместе с телом, а не съедено).
     14ch чуть меньше 16ch у города: адрес на 320–360px делит строку с городом и не должен
     забирать весь остаток — проверить на превью (G4), что «ул. Маршала Новикова, 41» не
     наезжает на иконку телефона и не даёт горизонтального скролла. */
  .hdr-mobile-delivery .hdr-del__addr{ max-width:14ch; overflow:hidden; text-overflow:ellipsis; }
  .hdr-mobile-delivery .hdr-del__city,
  .hdr-mobile-delivery .hdr-del__city *,
  .hdr-mobile-delivery .md-region__chip{ font-size:var(--text-body-sm-size); font-weight:var(--fw-medium); margin-top:0; }
  /* длинный город (>16): режем ЦЕНУ (2 строки не делаем) */
  .hdr-mobile-delivery .hdr-del.is-long .hdr-del__price{ display:none; }
  /* Коробка 44px, как у иконок шапки, — край встаёт на боковое поле контейнера, глиф под
     корзиной. align-self:stretch, а не height:100%: у строки задан min-height, а не height,
     и процент резолвился в auto — тап-зона выходила 44×20 вместо 44×36 (замерено 2026-09-03).
     --hdr-icon-size и margin-right — тот же приём выравнивания глифа на линию сетки, что и
     у .hdr-actions (см. там комментарий и docs/decisions/2026-09-04-header-icon-edge-alignment.md):
     тап-зона 44px шире глифа 20px на 12px воздуха с каждой стороны — глиф вставал на 12px
     правее линии сетки, компенсируем отрицательным margin-right. */
  .hdr-mobile-delivery__phone{
    --hdr-icon-size: 20px;
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--control-height-md); align-self:stretch; flex:none;
    color:var(--navy-800); text-decoration:none;
    margin-right: calc(-1 * (var(--control-height-md) - var(--hdr-icon-size)) / 2);
  }
  .hdr-mobile-delivery__phone .ph{ font-size: var(--hdr-icon-size); }
}


/* ═══ Шапка р.12 — доставка при скролле: десктопный чип + мобильная нижняя полоса (S2b). ═══ */

/* Десктоп: компактный чип город+дата в липкой строке, появляется при скролле (.is-scrolled) */
.hdr-sticky-del{ display:none; }
@media (min-width:901px){
  /* Две строки: город сверху, срок и сумма под ним (Илья, 2026-09-06). В одну строку чип
     рос вширь и отжимал поиск, а при длинном названии города дата упиралась в него.
     Сетка, а не колоночный flex: иконка должна стоять слева от обеих строк, а не над ними.
     line-height ужат до 1.15 — две строки по 13px иначе не помещаются в 36px строки шапки. */
  .main-header.is-scrolled .hdr-sticky-del{
    display:inline-grid; flex:none;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:'pic city' 'pic meta';
    align-items:center; column-gap:var(--space-2); row-gap:0;
    /* align-content: когда города нет и вторая строка скрыта, дорожки сетки иначе
       прижимаются к верху фиксированной высоты и город висит над центром чипа.
       С центрированием дорожек одна строка стоит ровно посередине (Илья, 2026-09-06). */
    align-content:center;
    height:var(--control-height-sm); padding:0;
    border:0; background:none;
    font-size:var(--text-body-sm-size); line-height:1.15; color:var(--text-secondary);
    white-space:nowrap; text-decoration:none;
    /* Илья, 2026-09-06: отодвинуть иконку от текста и левее. Три величины вместе:
       column-gap --space-2 (было --space-1) даёт воздух между булавкой и обеими
       строками; margin-left убран — чип сдвинулся к поиску на 8px; margin-right
       добавлен, чтобы не липнуть к группе «Профиль/Корзина». Замер на 1280:
       16px до чипа, 8px от иконки до текста, 24px после чипа. */
    margin-left:0; margin-right:var(--space-2);
  }
  .main-header.is-scrolled .hdr-sticky-del .ph{ grid-area:pic; margin-right:0; }
  .main-header.is-scrolled .hdr-sticky-del .hdr-del__city{ grid-area:city; }
  /* Вторая строка на ступень мельче города: 12px против 13px. Город — то, что человек
     ищет глазами, срок и сумма — уточнение к нему; заодно чип сузился со 125 до 118px. */
  .main-header.is-scrolled .hdr-sticky-del .hdr-del__meta{ grid-area:meta; font-size:var(--text-caption-size); }
  /* Точка перед сроком разделяла город и срок в одну строку; на своей строке она не нужна. */
  .main-header.is-scrolled .hdr-sticky-del .hdr-del__meta::before{ content:none; }
  /* Города нет — второй строки нет совсем (Илья, 2026-09-06). Одного [hidden] на блоке
     мало: дорожка сетки остаётся, потому что иконка растянута на обе строки, и город
     повисает на 4px выше центра чипа (замер 2026-09-06: дорожки 14.9 и 8px). Убираем
     вторую дорожку вместе с содержимым. :has() поддержан там же, где @container, на
     котором уже стоит утилитарная строка; где не поддержан — вернётся прежний сдвиг
     на 4px, ничего не ломается. */
  .main-header.is-scrolled .hdr-sticky-del:has(.hdr-del__meta[hidden]){ grid-template-areas:'pic city'; }
  .main-header.is-scrolled .hdr-sticky-del:hover{ color:var(--navy-900); }
  /* margin-right вместо бывшего container gap:6px — тот же приём и то же значение
     (--space-1), что у .hdr-del .ph выше: отступ иконка→город одинаков во всех трёх
     местах шапки (утилитарная строка, мобильная полоса, липкий чип), не хардкод 6px. */
  .hdr-sticky-del .ph{ font-size:16px; color:var(--navy-800); margin-right:var(--space-1); }
  /* margin-left обнулён: во второй строке блок начинается от той же линии, что город. */
  .hdr-sticky-del .hdr-del__meta{ margin-left:0; }
}


/* ═══ Шапка р.17 — по ревью прототипа: util-ссылка, стики-чип региона (шрифт+обрез <16). ═══ */
/* «Юрлицам» — заметный бейдж (не жёлтый — жёлтый бережём под подбор, П6). */
.utility-link{ display:inline-flex; align-items:center; height:20px; padding:0 var(--space-2);
  border-radius:var(--radius-pill); background:var(--navy-900); color:var(--paper);
  font-size:var(--text-caption-size); font-weight:var(--fw-regular); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap; position:relative; }
/* Хит-зона пилюли — во всю высоту строки (36px), а сама пилюля остаётся 20px.
   Растянуть бокс нельзя: у него фон и скругление, вырос бы сам бейдж. Псевдоэлемент
   добавляет кликабельную площадь, не трогая внешний вид (замер 2026-09-03: было 73×20). */
.utility-link::after{ content:''; position:absolute; inset-block:-8px; inset-inline:0; }
.utility-link:hover{ background:var(--navy-800); color:var(--paper); }
/* Длинное название города в липком чипе гасим градиентом, а не многоточием (Илья,
   2026-09-06): многоточие в узком чипе съедает целый символ и читается как обрыв,
   а маска доводит текст до края и растворяет его. Маска применяется всегда — на
   коротком названии текст кончается раньше зоны затухания, и она не видна.
   -webkit-mask-image парный: Safari до 15.4 знает только префиксную форму. */
.main-header.is-scrolled .hdr-sticky-del .hdr-del__city{
  display:inline-block; max-width:12ch; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 16px), transparent);
}
/* В липком чипе область не печатаем: ширина там ограничена (max-width + ellipsis ниже),
   и «Балашиха · Московская обл» обрезалось до «Балашиха · Мос» — обрывок вместо сведений.
   Город важнее: область видна в утилитарной строке и в подвале бургера. */
.main-header.is-scrolled .hdr-sticky-del .md-region__chip-area{ display:none; }
.main-header.is-scrolled .hdr-sticky-del .md-region__chip,
.main-header.is-scrolled .hdr-sticky-del .hdr-del__city{
  color: var(--text-primary); font-size:var(--text-body-sm-size); font-weight:var(--fw-medium); margin-top:0; }

/* Адрес самовывоза (МСК/СПб) показываем на мобильных полосах: JS прячет срок/цену,
   чтобы город·адрес помещался (footer.php, apply()). Цвет адреса — ниже, в блоке
   мобильной строки доставки. */

/* Края шапки выровнены по сетке контейнера: и группа действий, и бургер стоят боксом
   вплотную к боковому полю, глиф — по центру бокса. Левый и правый края симметричны,
   отрицательных отступов нет (глиф оптически утоплен одинаково с обеих сторон). */


/* ═══ Шапка р.26 — тёмная утилитарная строка (отзыв руководителя: «шапка светловата»). ═══
   Якорь ставим наверх, рабочая строка остаётся светлой: белое поле поиска и жёлтая кнопка
   подбора не должны конкурировать за внимание (П6 — жёлтый акцент один и он у подбора).
   Палитра из уже тёмного подвала .mdf (template_styles.css:98/109/114/129):
   основной текст navy-100, приглушённый navy-300, ховер #fff. Оттенок полосы — navy-700
   (navy-900 отклонён как «слишком тёмный»); он же цвет иконок рабочей строки,
   поэтому шапка читается одним объектом.
   Контраст на navy-700 (#1C3E5C): navy-100 9.9:1, navy-300 6.7:1 — текст выше AA (4.5:1);
   navy-400 остаётся только на иконках и звезде отзывов (4.3:1, порог для графики 3:1). */
.utility-bar { background: var(--navy-700); border-bottom: 0; }
.utility-bar, .utility-bar * { color: var(--navy-300); }

/* Город, телефон и весь блок доставки (иконка+регион+дата+цена+адрес) — единый цвет
   и единый ховер на всю строку (решение Лены 2026-09-03, ревью MR !46, п.2/5: «зоопарк»
   цветов — до этой правки внутри одной строки было 4 разных цвета в покое и разное
   поведение на ховере: иконка navy-400, регион navy-100, дата navy-100→paper на ховере
   всегда (не менялась), цена navy-100 с явным запретом меняться на ховере, адрес navy-300.
   Отменяет точечную «просьбу Лены» от 2026-08-26 держать цену вне общего ховера —
   сегодняшнее решение шире и явно её отменяет. Универсальный потомок (`*`) внутри
   .utility-city подхватывает вообще все части строки одним правилом — новых деталей
   строки (если появятся) добавлять сюда не придётся. */
.utility-bar .utility-city, .utility-bar .utility-city *,
.utility-bar .utility-phone__number, .utility-bar .utility-phone__number * { color: var(--navy-100); }
/* Чип региона — цвет полосы; специфичность (0,3,0) нужна, чтобы перебить
   .utility-city .md-region__chip выше по файлу. */
.utility-bar .utility-city .md-region__chip { color: var(--navy-100); }
/* Область у названия (только для населённых пунктов ниже райцентра) — приглушённее города,
   но на тёмном фоне: --text-tertiary там не читается. */
.utility-bar .utility-city .md-region__chip-area { color: var(--navy-300); }
.utility-bar .utility-city .md-region__chip:hover { color: var(--paper); }
/* Ховер всего блока города (иконка + название + область), как было до перехода на свой
   компонент: правило `.utility-bar .utility-city:hover *` осветляло потомков, но мой цвет
   чипа выше идёт позже при равной специфичности и его перебивал. Поднимаем до (0,4,0). */
.utility-bar .utility-city:hover .md-region__chip,
.utility-bar .utility-city:hover .md-region__chip-area { color: var(--paper); }
.utility-bar .utility-city:hover, .utility-bar .utility-city:hover *,
.utility-bar .utility-phone:hover .utility-phone__number,
.utility-bar .utility-phone:hover .utility-phone__number * { color: var(--paper); }
/* Телефон — вне находки про доставку, иконка у него остаётся приглушённой относительно
   текста (акцент строки — номер, не иконка); не трогаем. */
.utility-bar .utility-phone__number .ph { color: var(--navy-400); }

/* Отзывы — по-прежнему простым текстом, звезда остаётся нейтральной (жёлтый занят подбором) */
.utility-bar .utility-review { color: var(--navy-300); }
.utility-bar .utility-review:hover, .utility-bar .utility-review:hover * { color: var(--paper); }
.utility-bar .utility-review__star { color: var(--yellow-400); }

/* «Юрлицам»: прежняя тёмная пилюля (navy-900) на тёмном фоне исчезла бы — выворачиваем
   в сплошную белую с тёмным текстом (решение Лены 2026-08-26). Контраст 17.2:1.
   Ховер — лёгкий увод в navy-100, чтобы отклик был, но пилюля не «мигала». */
.utility-bar .utility-link { box-sizing: border-box; background: var(--paper);
  color: var(--navy-900); border: 1px solid var(--paper); }
.utility-bar .utility-link:hover { background: var(--navy-100); color: var(--navy-900); border-color: var(--navy-100); }

/* Подсказка телефона была navy-900 на navy-900 — выворачиваем на светлую */
.utility-bar .utility-phone__tooltip { background: var(--paper); color: var(--navy-900); box-shadow: var(--shadow-md); }
.utility-bar .utility-phone__tooltip::before { border-bottom-color: var(--paper); }

/* Кольцо фокуса --border-focus (navy-600) на тёмном фоне не читается — белое */
.utility-bar a:focus-visible,
.utility-bar .utility-city:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper); border-radius: var(--radius-sm); }


/* ═══ Шапка р.29 — правки по независимому ревью перед MR. ═══ */

/* «Заказать звонок» (виджет MeTalk) вернулся в утилитарную строку — был в старой шапке
   и потерялся при переводе на ДС. Оформлен как обычная util-ссылка, не акцент.
   Подчёркивание — text-decoration, не border-bottom (найдено Леной 2026-09-04: линия
   «съехала вниз» на 11px). Причина: border рисуется по краю БОКСА, а бокс тянется на
   всю высоту строки (align-self:stretch, 36px) ради тап-зоны, тогда как текст в нём
   стоит по центру — граница и буквы разъехались. text-decoration всегда идёт от самого
   текста независимо от высоты бокса, поэтому не ловит эту рассинхронизацию в принципе. */
.utility-callback { text-decoration: none; white-space: nowrap; }
.utility-bar .utility-callback {
  color: var(--navy-300);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--navy-500);
  text-underline-offset: 3px;
}
.utility-bar .utility-callback:hover { color: var(--paper); border-bottom-color: var(--paper); }
.utility-bar .utility-callback:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper); border-radius: var(--radius-sm); }


/* ═══ Шапка р.32 — граница шапки и контента (отзыв руководства). ═══
   Было: границы нет вовсе. В р.19 (7998c0d) нижнюю границу у шапки убрали намеренно —
   .main-header{border-bottom:none} выше по файлу перебивает базовое правило, — и оставили
   только тень --shadow-sm = rgba(0,28,56,.06). Шесть процентов на белом не читаются, поэтому
   шапка и контент сливались в одну плоскость. Это и есть замечание руководства.

   Решение Лены 2026-08-26: основная строка получает собственный тон И линию снизу.
   Отменяет решение р.19 — записать в ADR, иначе линию снова уберут как «лишнюю».

   Тень в покое снята: при своём фоне и линии она ничего не добавляет. На .is-scrolled
   остаётся --shadow-md (правило выше, спец. 0,2,0) — там тень уместна, она сообщает
   «шапка над контентом», то есть про прокрутку, а не про границу.
   Поле поиска остаётся белым (.md-search{background:var(--paper)} в md-components.css),
   поэтому на тонированной строке оно читается как активный элемент. */
.main-header {
  background: var(--navy-100);
  border-bottom: 1px solid var(--navy-200);
  box-shadow: none;
}


/* ═══ Шапка р.34 — выход из аккаунта в бургер-подвале. ═══
   Строка «Личный кабинет» стала контейнером: слева ссылка, справа «Выйти».
   Отдельной строкой снизу не делаем — визуально дробит подвал меню (решение Лены). */
.burger-footer__account { justify-content: space-between; }
.burger-footer__account .burger-footer__link { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.burger-footer__logout { margin: 0; flex: 0 0 auto; }
.burger-footer__logout-btn {
  -webkit-appearance: none; appearance: none;
  border: 0; background: none; padding: 4px 0;
  color: var(--text-tertiary);
  font: var(--text-body-sm-size)/1 var(--font-sans);
  text-decoration: underline; cursor: pointer;
}
.burger-footer__logout-btn:hover { color: var(--navy-900); }
.burger-footer__logout-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }


/* Выход из аккаунта переехал в дропдаун профиля (.md-menu) — решение Лены 2026-09-03,
   docs/decisions/2026-09-03-header-account-menu.md. Правила .hdr-logout/.hdr-logout__btn
   удалены вместе с разметкой (css.md п.3: откат/перенос убирает и стили под него). */


/* ═══ Шапка р.39 — мобильная строка доставки: тон как у util-строки десктопа. ═══
   По живой проверке Лены: (1) линия между шапкой и строкой доставки лишняя — теперь строку
   отделяет собственный тёмный фон; (2) регион и телефон должны быть в том же тоне, что
   утилитарная строка на десктопе (navy-700 с палитрой из подвала .mdf); (3) иконка телефона
   выровнена под иконками шапки: и телефон, и .hdr-actions — коробки 44px у края контейнера,
   поэтому глиф телефона стоит под корзиной. С 2026-09-03 край задаёт паддинг контейнера
   (--grid-margin), общий для всех полос шапки, а не обнуление паддинга. */
@media (max-width:900px){
  .hdr-mobile-delivery{ background:var(--navy-700); border-bottom:0; box-shadow:none; }
  .hdr-mobile-delivery__inner{ color:var(--navy-300); }
  /* Вся строка (иконка+город+дата+цена+адрес) — один цвет, тем же решением, что и в
     утилитарной строке десктопа (см. там комментарий про «зоопарк», 2026-09-03).
     Легаси .h_reg_name перебиваем той же связкой, что и на десктопе. */
  .hdr-mobile-delivery .hdr-del,
  .hdr-mobile-delivery .hdr-del *,
  .hdr-mobile-delivery .md-region__chip{ color:var(--navy-100); }
  .hdr-mobile-delivery .md-region__chip-area{ color:var(--navy-300); }

  /* Коробка .hdr-mobile-delivery__phone — объявление-источник выше (р.39-блок).
     Нижняя липкая полоса доставки убрана в р.41 (решение Лены) — .hdr-mobile-delivery__phone
     теперь единственное место, где печатается эта иконка (header.php:291). */
  /* ЦВЕТ — только для верхней (тёмной) полосы. Без этого скоупа светлая иконка уезжала
     и в нижнюю липкую полосу, где фон светлый, и сливалась с ним. */
  .hdr-mobile-delivery .hdr-mobile-delivery__phone{ color:var(--navy-100); }
  .hdr-mobile-delivery .hdr-mobile-delivery__phone:hover{ color:var(--paper); }
}


/* ═══ Шапка р.41 — правки перед продом. Внесены в объявления-источники выше, здесь только
   то, чего в файле раньше не было (см. .claude/rules/css.md, правило 1). ═══ */

/* Выравнивание по центру в утилитарной строке: блок доставки был на baseline, из-за чего
   текст стоял иначе, чем в липком чипе. Приводим к тому же центру. */
.utility-bar .hdr-del,
.utility-bar .hdr-del__meta { align-items: center; }

/* End */


/* Start:/local/templates/md2019/css/md-search-suggest.css?178905823210693*/
/* Автокомплит поиска (md.search). Неймспейс .md-suggest, рендер — js/md-search.js.
   Две площадки в новой шапке (md-header.css):
     - десктоп: выпадающий список под формой .hdr-search;
     - мобильный: .md-suggest--sheet внутри полноэкранного .mobile-search-overlay.
   Токены — md-tokens.css. */

/* Контекст позиционирования для выпадающего списка. Задаём здесь, а не в md-header.css:
   .hdr-search сама по себе в нём не позиционирована, relative нужен только подсказкам. */
.hdr-search { position: relative; }

.md-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-dropdown);
  box-sizing: border-box;
  /* Высоту в пикселях выставляет js/md-search.js (--md-suggest-max) от visualViewport:
     100vh не знает ни про экранную клавиатуру, ни про то, что список висит
     внутри липкой шапки. calc — запасной вариант, если скрипт не отработал. */
  max-height: var(--md-suggest-max, calc(100vh - var(--space-20) - var(--space-16)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-primary);
  text-align: left;
}
.md-suggest[hidden] { display: none; }

/* Глобальные стили ссылок легаси-шаблона (template_styles.css) действуют и внутри шапки.
   Сбрасываем их в неймспейсе списка, ниже задаём вид карточек. */
.md-suggest a {
  display: inline;
  padding: 0;
  background: transparent;
  color: var(--text-link);
}

.md-suggest__group + .md-suggest__group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.md-suggest__title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-label-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Селектор с тегом: template_styles.css подключается после этого файла (порядок задаёт
   Битрикс — additional CSS раньше template_styles) и по специфичности бьёт одиночный класс. */
/* Сетка, а не ряд из трёх колонок: цена с кнопкой занимали ~150 px, и в колонке
   сплита (~345 px) под название с характеристиками оставалось около 130 px —
   всё резалось многоточием. Цена уходит под текст во всю ширину строки. */
.md-suggest a.md-suggest__item {
  display: grid;
  grid-template-columns: var(--space-12) minmax(0, 1fr);
  grid-template-areas: 'pic body' 'pic aside';
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard);
}
.md-suggest a.md-suggest__item:hover,
.md-suggest a.md-suggest__item.is-active { background: var(--navy-050); color: var(--text-primary); text-decoration: none; }
.md-suggest a.md-suggest__item--exact { background: var(--yellow-050); }
.md-suggest__item mark { background: var(--yellow-200); color: inherit; padding: 0 1px; border-radius: 2px; }

/* по верху, а не по центру двух строк: иначе название висит над картинкой
   и строка распадается на две несвязанные половины */
.md-suggest__thumb {
  grid-area: pic;
  align-self: start;
  width: var(--space-12);
  height: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--ink-050);
  overflow: hidden;
}
.md-suggest__thumb img { max-width: 100%; max-height: 100%; display: block; }
.md-suggest__thumb--sm { width: var(--space-8); height: var(--space-8); background: transparent; }
.md-suggest a.md-suggest__item--query { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.md-suggest__thumb svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; color: var(--ink-400); }

.md-suggest__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.md-suggest__name {
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ряд: текст режется многоточием, бейдж наличия не сжимается и не уезжает за край.
   Раньше текст и бейдж лежали в одном nowrap-контейнере, и на узкой колонке
   многоточие съедало сам бейдж. */
.md-suggest__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--text-tertiary);
}
.md-suggest__sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-suggest__meta .md-badge { flex: 0 0 auto; }

/* margin, а не row-gap сетки: у машин, разделов и статей блока с ценой нет,
   и gap оставлял бы от него пустую строку */
.md-suggest__aside {
  grid-area: aside;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.md-suggest__aside .md-price__main { font-size: var(--text-body-size); }
.md-suggest__buy { height: var(--control-height-sm); padding: 0 var(--space-3); }

.md-suggest__hint {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.md-suggest a.md-suggest__all {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm-size);
  font-weight: var(--fw-medium);
  background: var(--bg-surface);
  color: var(--text-link);
  border-radius: var(--radius-sm);
}
.md-suggest a.md-suggest__all:hover, .md-suggest a.md-suggest__all.is-active { background: var(--navy-050); }
.md-suggest__hint strong { color: var(--text-primary); font-weight: var(--fw-medium); }
.md-suggest__empty { padding: var(--space-4) var(--space-3); color: var(--text-tertiary); }
.md-suggest__empty-title { font-weight: var(--fw-medium); color: var(--text-primary); margin-bottom: var(--space-1); }
.md-suggest__empty-text { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-lh); }
/* Два класса и тег: одиночный .md-suggest a имеет ту же специфичность, что глобальные
   правила легаси, а те подключаются позже — ссылка теряла подчёркивание и цвет. */
.md-suggest a.md-suggest__link {
  display: inline;
  padding: 0;
  background: transparent;
  color: var(--text-link);
  text-decoration: underline;
}
.md-suggest a.md-suggest__link:hover { color: var(--navy-900); }

/* Затемнение страницы под открытым списком. .main-header имеет z-index 120
   (md-header.css:730) и остаётся над затемнением вместе с полем и списком. */
.md-suggest-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: color-mix(in srgb, var(--ink-950) 35%, transparent);
}

/* Две колонки, когда есть и товары, и автомобили: обе группы видны без прокрутки.
   Список может быть шире поля — прижимаем к левому краю формы и не даём вылезти за окно. */
.md-suggest--split {
  right: auto;
  width: min(780px, calc(100vw - var(--space-8)));
  display: grid;
  /* minmax(0, …): иначе nowrap-названия товаров растягивают колонку до min-content (613/210 px при 1366).
     Товарам шире: у них название, размеры с креплением и цена, справа — короткие строки авто. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: var(--space-4);
}
.md-suggest--split[hidden] { display: none; }
.md-suggest--split .md-suggest__hint,
.md-suggest--split .md-suggest__empty,
.md-suggest--split .md-suggest__all--total { grid-column: 1 / -1; }
.md-suggest--split .md-suggest__col + .md-suggest__col {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-4);
}
.md-suggest--split .md-suggest__group + .md-suggest__group { border-top: 1px solid var(--border-subtle); }

/* Мобильная площадка: список — второй ребёнок flex-колонки .mobile-search-overlay
   (position:fixed, height:100dvh, md-header.css). Он забирает всю высоту под строкой
   поиска и скроллится внутри себя. 100dvh учитывает адресную строку, но НЕ экранную
   клавиатуру (iOS Safari, Android Chrome/Opera ≥108) — поэтому максимум по видимой
   области ставит JS (md-search.js, fit) через --md-suggest-max; без него — вся колонка. */
.md-suggest--sheet {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--md-suggest-max, none);
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-2) var(--space-3);
}
.md-suggest--sheet[hidden] { display: none; }
/* Одна колонка: на телефоне две не помещаются, а прокрутка листа бесплатна. */
.md-suggest--sheet.md-suggest--split {
  display: block;
  width: auto;
}
.md-suggest--sheet .md-suggest__col + .md-suggest__col {
  border-left: 0;
  padding-left: 0;
}

/* End */


/* Start:/personal/cart/add2basket_include.css?17835416752855*/
    #cart-popup-header {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        color: #03363D !important;
        font-weight: normal !important;
        font-size: 25px !important;
        margin: 5px 0px 15px 0px !important;
    }
    #cart-popup-prod {
        display: flex;
    }
    #cart-popup-prod img {
        height: 70px;
    }
    #cart-popup-prod div {
        margin-left: 20px;
        color: #636363;
    }
    #cart-popup-but div {
        margin: 10px;
        padding: 10px 30px;
        min-width: 220px;
    }
    #cart-popup-but {
        margin-top: 20px;
    }
    #cart-popup-title{
        max-width: 300px;
    }

    #cart-popup-wrapper{
        cursor: auto;
    }

    #cart-popup-text{
        margin: 15px 0;
        color: #9d0a0ade;
        display: none;
    }

   .basket-control {
        display: flex;
        flex-direction: column;
        width: 138px;
        border: 2px solid #FDCE4B;
        border-radius: 20px;
    }

    .basket-header {
        display: flex;
        border-bottom: 2px solid #FDCE4B;
    }

    .basket-in-basket{
        display: inline-block;
        padding: 5px 9px;
        text-align: center;
        width: 118px;
        font-size: 14px;
    }

    .basket-update {
        padding: 0px 7px;
        background-color: #FDCE4B;
        height: 29px;
        font-weight: bold;
        font-size: larger;
        cursor: pointer;
        border-radius: 0 18px 0 0;
    }

    .basket-update:hover {
        background-color: #ffc219;
    }

    .basket-control a:hover {
        border-radius: 0 0 18px 18px;
    }

     #dvadvo-popup-header {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        color: #03363D !important;
        font-weight: normal !important;
        font-size: 25px !important;
        margin: 5px 0px 15px 0px !important;
    }
    .dvadvo-popup-prod {
        display: flex;
    }
    .dvadvo-popup-prod img {
        height: 70px;
    }

    .dvadvo-popup-prod div {
        margin-left: 20px;
    }

    .dvadvo-popup-prod {
        color: #636363;
        cursor: pointer;
        margin: 10px;
        border: 1px solid lightgrey;
        padding: 5px;
    }

    .dvadvo-popup-prod:hover {
        background-color: #efefef;
    }

    #dvadvo-popup-but div {
        margin: 10px;
        padding: 10px 30px;
        min-width: 220px;
    }
    #dvadvo-popup-but {
        margin-top: 20px;
    }
    #dvadvo-popup-title{
        max-width: 300px;
    }

    #dvadvo-popup-wrapper{
        cursor: auto;
        max-width: 640px;
    }

    #dvadvo-popup-text{
        margin: 15px 0;
    }

    .basket-checkout {
    text-align: center;
    padding: 10px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border: none!important;
    font-weight: normal;
    width: 138px!important;
}
/* End */


/* Start:/local/templates/md2019/css/zebra_tooltips.min.css?17835416741856*/
.Zebra_Tooltip{background:0 0;position:absolute;z-index:8000}.Zebra_Tooltip .Zebra_Tooltip_Message{background:#000;border-radius:5px;box-shadow:0 0 6px rgba(0,0,0,.6);color:#fff;font-size:12px;font-family:Tahoma,Arial,Helvetica,sans-serif;line-height:1.4;*margin-right:0;max-width:250px;padding:10px;position:relative;_width:expression(document.body.clientWidth > 250px ? '250px': 'auto');border:0 solid #000}.Zebra_Tooltip .Zebra_Tooltip_Message.Zebra_Tooltip_Has_Close{padding-right:23px}.Zebra_Tooltip .Zebra_Tooltip_Arrow{position:absolute;width:20px;height:10px;overflow:hidden}.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom{bottom:0}.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom div{top:0;border-color:#000 transparent transparent;_border-bottom-color:pink}.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom div.Zebra_Tooltip_Arrow_Border{border-color:#000 transparent transparent}.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Top{top:0}.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Top div{bottom:0;border-color:transparent transparent #000;_border-top-color:pink}.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Top div.Zebra_Tooltip_Arrow_Border{border-color:transparent transparent #000}.Zebra_Tooltip .Zebra_Tooltip_Arrow div{position:absolute;border-style:solid;border-width:10px;width:0;height:0;left:0;_border-left-color:pink;_border-right-color:pink;_filter:chroma(color=pink)}.Zebra_Tooltip .Zebra_Tooltip_Arrow div.Zebra_Tooltip_Arrow_Border{border-width:10px;box-shadow:0 0 6px rgba(0,0,0,.6);left:0}.Zebra_Tooltip .Zebra_Tooltip_Close{color:#fff;font-family:Arial,sans-serif;font-size:18px;line-height:1;padding:0 4px;position:absolute;right:2px;text-decoration:none;top:2px}.Zebra_Tooltip .Zebra_Tooltip_Close:hover{color:#000;background:#c2d076;border-radius:5px}
/* End */


/* Start:/local/templates/md2019/css/swiper-bundle.min.css?178354167413918*/
/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}
/* End */


/* Start:/local/templates/md2019/css/fancybox.css?178354167429440*/
:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-outline-width: 1px;--f-button-outline-color: rgba(0, 0, 0, .7);--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-opacity: 1;--f-button-svg-disabled-opacity: .5;--f-button-svg-transition: opacity .15s ease;--f-button-svg-transform: none}.f-button{width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);transform:var(--f-button-transform);transition:var(--f-button-transition);backdrop-filter:var(--f-button-backdrop-filter);display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;pointer-events:all;cursor:pointer;overflow:hidden}@media (hover: hover){.f-button:hover:not([aria-disabled]){color:var(--f-button-hover-color, var(--f-button-color));background-color:var(--f-button-hover-bg, var(--f-button-bg))}}.f-button:active:not([aria-disabled]){color:var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));background-color:var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))}.f-button:focus{outline:none}.f-button:focus-visible{outline:var(--f-button-outline-width) solid var(--f-button-outline-color);outline-offset:var(--f-button-outline-offset);position:relative;z-index:1}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);transform:var(--f-button-svg-transform);fill:var(--f-button-svg-fill);filter:var(--f-button-svg-filter);opacity:var(--f-button-svg-opacity, 1);transition:var(--f-button-svg-transition);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.f-button[aria-disabled]{cursor:default}.f-button[aria-disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}[data-panzoom-action=toggleFS] g:first-child{display:flex}[data-panzoom-action=toggleFS] g:last-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:first-child{display:none}.in-fullscreen [data-panzoom-action=toggleFS] g:last-child{display:flex}[data-autoplay-action=toggle] svg g:first-child{display:flex}[data-autoplay-action=toggle] svg g:last-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:first-child{display:none}.has-autoplay [data-autoplay-action=toggle] svg g:last-child{display:flex}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child{display:flex}:root{--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px}.f-spinner{position:absolute;top:50%;left:50%;margin:calc(var(--f-spinner-width) * -.5) 0 0 calc(var(--f-spinner-height) * -.5);padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height);border-radius:var(--f-spinner-border-radius);border:var(--f-spinner-border-width) solid var(--f-spinner-color-1);border-top-color:var(--f-spinner-color-2);animation:f-spinner .75s linear infinite,f-fadeIn .2s ease .2s both}@keyframes f-spinner{to{transform:rotate(360deg)}}.f-panzoom,.f-zoomable{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column}.f-panzoom:before,.f-panzoom:after,.f-zoomable:before,.f-zoomable:after{display:block;content:""}.f-panzoom:not(.has-controls):before,.f-zoomable:not(.has-controls):before{margin-bottom:auto}.f-panzoom:after,.f-zoomable:after{margin-top:auto}.f-panzoom.in-fullscreen,.f-zoomable.in-fullscreen{position:fixed;top:0;left:0;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:unset!important;z-index:9999}.f-panzoom__wrapper{position:relative;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__wrapper.will-zoom-out{cursor:zoom-out}.f-panzoom__wrapper.can-drag{cursor:move;cursor:grab}.f-panzoom__wrapper.will-zoom-in{cursor:zoom-in}.f-panzoom__wrapper.is-dragging{cursor:move;cursor:grabbing}.f-panzoom__wrapper.has-error{display:none}.f-panzoom__content{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%}.f-panzoom__content.is-lazyloading,.f-panzoom__content.has-lazyerror{visibility:hidden}img.f-panzoom__content{width:auto;height:auto;vertical-align:top;object-fit:contain;transition:none;user-select:none}.f-panzoom__wrapper>.f-panzoom__content{visibility:hidden}.f-panzoom__viewport{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.f-panzoom__viewport>.f-panzoom__content{width:100%;height:100%;object-fit:fill}picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;object-fit:contain;transition:none;user-select:none}.f-panzoom__protected{position:absolute;inset:0;z-index:1;user-select:none}html.with-panzoom-in-fullscreen{overflow:hidden}.f-fadeIn{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeOut{to{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-crossfadeOut{to{opacity:0}}.is-horizontal .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextX}.is-horizontal .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevX}.is-horizontal .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextX}.is-horizontal .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevX}@keyframes f-slideInPrevX{0%{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextX{0%{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextX{to{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevX{to{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}}.is-vertical .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextY}.is-vertical .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevY}.is-vertical .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextY}.is-vertical .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevY}@keyframes f-slideInPrevY{0%{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideInNextY{0%{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}@keyframes f-slideOutNextY{to{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}}@keyframes f-slideOutPrevY{to{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}}.f-zoomInUp{animation:var(--f-transition-duration, .3s) ease both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, .3s) ease both f-zoomOutDown}@keyframes f-zoomInUp{0%{transform:scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0),var(--f-zoomInUp-y, 16px),0);opacity:var(--f-zoomInUp-opacity, 0)}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0),var(--f-zoomOutDown-y, 16px),0);opacity:0}}.f-throwOutUp{animation:var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throwOutUp-y, 150px) * -1),0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throwOutDown-y, 150px),0);opacity:0}}.has-iframe .f-html,.has-pdf .f-html,.has-gmap .f-html{width:100%;height:100%;min-height:1px;overflow:visible}.has-pdf .f-html,.has-gmap .f-html{padding:0}.f-html{position:relative;box-sizing:border-box;margin:var(--f-html-margin, 0);padding:var(--f-html-padding, 2rem);color:var(--f-html-color, currentColor);background:var(--f-html-bg)}.f-html.is-error{text-align:center}.f-iframe{display:block;margin:0;border:0;height:100%;width:100%}.f-caption{align-self:center;flex-shrink:0;margin:var(--f-caption-margin);padding:var(--f-caption-padding, 16px 8px);max-width:100%;max-height:calc(80vh - 100px);overflow:auto;overflow-wrap:anywhere;line-height:var(--f-caption-line-height);color:var(--f-caption-color);background:var(--f-caption-bg);font:var(--f-caption-font)}.has-html5video .f-html,.has-youtube .f-html,.has-vimeo .f-html{padding:0;width:100%;height:100%;min-height:1px;overflow:visible;max-width:var(--f-video-width, 960px);max-height:var(--f-video-height, 540px);aspect-ratio:var(--f-video-aspect-ratio);background:var(--f-video-bg, rgba(0, 0, 0, .9))}.f-html5video{border:0;display:block;height:100%;width:100%;background:transparent}.f-button.is-arrow{--f-button-width: var(--f-arrow-width, 46px);--f-button-height: var(--f-arrow-height, 46px);--f-button-svg-width: var(--f-arrow-svg-width, 24px);--f-button-svg-height: var(--f-arrow-svg-height, 24px);--f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);--f-button-border-radius: var(--f-arrow-border-radius, unset);--f-button-bg: var(--f-arrow-bg, transparent);--f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));--f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));--f-button-shadow: var(--f-arrow-shadow);--f-button-color: var(--f-arrow-color);--f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));--f-button-active-color: var( --f-arrow-active-color, var(--f-arrow-hover-color) );overflow:visible}.f-button.is-arrow.is-prev,.f-button.is-arrow.is-next{position:absolute;transform:translate(0);z-index:20}.is-horizontal .f-button.is-arrow.is-prev,.is-horizontal .f-button.is-arrow.is-next{inset:50% auto auto;transform:translateY(-50%)}.is-horizontal.is-ltr .f-button.is-arrow.is-prev{left:var(--f-arrow-pos, 0)}.is-horizontal.is-ltr .f-button.is-arrow.is-next{right:var(--f-arrow-pos, 0)}.is-horizontal.is-rtl .f-button.is-arrow.is-prev{right:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-horizontal.is-rtl .f-button.is-arrow.is-next{left:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}.is-vertical.is-ltr .f-button.is-arrow.is-prev,.is-vertical.is-rtl .f-button.is-arrow.is-prev{top:var(--f-arrow-pos, 0);right:auto;bottom:auto;left:50%;transform:translate(-50%)}.is-vertical.is-ltr .f-button.is-arrow.is-next,.is-vertical.is-rtl .f-button.is-arrow.is-next{top:auto;right:auto;bottom:var(--f-arrow-pos, 0);left:50%;transform:translate(-50%)}.is-vertical .f-button.is-arrow.is-prev svg,.is-vertical .f-button.is-arrow.is-next svg{transform:rotate(90deg)}.f-carousel__toolbar{display:grid;grid-template-columns:1fr auto 1fr;margin:var(--f-toolbar-margin, 0);padding:var(--f-toolbar-padding, 8px);line-height:var(--f-toolbar-line-height);background:var(--f-toolbar-bg, none);box-shadow:var(--f-toolbar-shadow, none);backdrop-filter:var(--f-toolbar-backdrop-filter);position:relative;z-index:20;color:var(--f-toolbar-color, currentColor);font-size:var(--f-toolbar-font-size, 17px);font-weight:var(--f-toolbar-font-weight, inherit);font-family:var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);text-shadow:var(--f-toolbar-text-shadow);text-align:center;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;white-space:nowrap;pointer-events:none}.f-carousel__toolbar.is-absolute{position:absolute;top:0;left:0;right:0}.f-carousel__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:var(--f-toolbar-gap, 0);pointer-events:none}.f-carousel__toolbar__column.is-left{justify-self:flex-start;justify-content:flex-start}.f-carousel__toolbar__column.is-middle{justify-content:center}.f-carousel__toolbar__column.is-right{justify-self:flex-end;justify-content:flex-end;flex-flow:nowrap}.f-carousel__toolbar__column>*{pointer-events:all}.f-counter{position:relative;display:flex;flex-direction:row;cursor:default;user-select:none;margin:var(--f-counter-margin, 0);padding:var(--f-counter-padding, 4px);line-height:var(--f-counter-line-height);background:var(--f-counter-bg);border-radius:var(--f-counter-border-radius)}.f-counter span{padding:0 var(--f-counter-gap, 4px)}:root{--f-thumbs-gap: 8px;--f-thumbs-margin: 0;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-z-index: 1;--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-clip-width: 46px;--f-thumb-extra-gap: 16px;--f-thumb-fit: cover;--f-thumb-opacity: 1;--f-thumb-transition: opacity .3s ease, transform .15s ease;--f-thumb-border: none;--f-thumb-border-radius: 4px;--f-thumb-transfors: none;--f-thumb-shadow: none;--f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));--f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff}.f-thumbs{flex-shrink:0;margin:var(--f-thumbs-margin);padding:0;background:var(--f-thumbs-bg);-webkit-tap-highlight-color:transparent;user-select:none;transition:max-height .3s ease,max-width .3s ease;position:relative;overflow:hidden;z-index:var(--f-thumbs-z-index)}.f-thumbs.is-horizontal{max-height:calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2 + var(--f-thumbs-gap) * 2)}.f-thumbs.is-vertical{max-width:calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-gap) * 2)}.f-thumbs.is-ltr{direction:ltr}.f-thumbs.is-rtl{direction:rtl}.f-thumbs__viewport{margin:var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);overflow:visible;display:grid}.f-thumbs.is-vertical .f-thumbs__viewport{height:calc(100% - var(--f-thumbs-padding-y) * 2)}.f-thumbs__slide{position:relative;box-sizing:border-box;grid-area:1/1;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);margin:0;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;overflow:visible}.f-thumbs__slide:hover button{opacity:var(--f-thumb-hover-opacity, 1);transform:var(--f-thumb-hover-transform, none)}.f-thumbs__slide:hover button:after{border:var(--f-thumb-hover-border, none);box-shadow:var(--f-thumb-hover-shadow, var(--f-thumb-shadow))}.f-thumbs__slide button{all:unset;margin:auto;padding:0;position:relative;overflow:visible;width:100%;height:100%;outline:none;transition:var(--f-thumb-transition);border-radius:var(--f-thumb-border-radius);opacity:var(--f-thumb-opacity);transform:var(--f-thumb-transform);background:var(--f-thumb-bg)}.f-thumbs__slide button:after{content:"";position:absolute;inset:0;z-index:1;transition:none;border-radius:inherit;border:var(--f-thumb-border);box-shadow:var(--f-thumb-shadow)}.f-thumbs__slide button:focus-within{opacity:var(--f-thumb-focus-opacity, 1);transform:var(--f-thumb-focus-transform, none)}.f-thumbs__slide button:focus-within:after{border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, var(--f-thumb-shadow))}.f-thumbs__slide:active{opacity:var(--f-thumb-active-opacity, 1);transform:var(--f-thumb-active-transform, none)}.f-thumbs__slide:active:after{border:var(--f-thumb-active-border, none);box-shadow:var(--f-thumb-active-shadow, var(--f-thumb-shadow))}.f-thumbs__slide.is-selected{z-index:2}.f-thumbs__slide.is-selected button{opacity:var(--f-thumb-selected-opacity, 1);transform:var(--f-thumb-selected-transform, none)}.f-thumbs__slide.is-selected button:after{border:var(--f-thumb-selected-border, none);box-shadow:var(--f-thumb-selected-shadow, var(--f-thumb-shadow))}.f-thumbs__slide img{display:block;width:100%;height:100%;object-fit:var(--f-thumb-fit);border-radius:inherit;pointer-events:none}.f-thumbs__slide img.has-lazyerror{display:none}.f-thumbs.is-classic{--f-carousel-slide-width: var(--f-thumb-width);--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: var(--f-thumbs-gap)}.f-thumbs.is-modern{--f-carousel-slide-width: calc( var(--f-thumb-clip-width) + var(--f-thumbs-gap) );--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: 0;--width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))}.f-thumbs.is-modern .f-thumbs__viewport{width:calc(100% + var(--f-carousel-slide-width) * 2);margin-inline:calc(var(--f-carousel-slide-width) * -1)}.f-thumbs.is-modern .f-thumbs__slide{--clip-shift: calc((var(--width-diff) * .5) * var(--progress));--clip-path: inset( 0 var(--clip-shift) round var(--f-thumb-border-radius, 0) );padding:0;overflow:visible;left:var(--shift, 0);will-change:left;transition:left var(--f-transition-duration) var(--f-transition-easing)}.f-thumbs.is-modern .f-thumbs__slide button{display:block;margin-inline:50%;width:var(--f-thumb-width);clip-path:var(--clip-path);border:none;box-shadow:none;transition:clip-path var(--f-transition-duration) var(--f-transition-easing),opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)}.f-thumbs.is-modern .f-thumbs__slide button:after{display:none}.f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible){outline:none}.f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before{content:"";position:absolute;z-index:1;top:0;left:var(--clip-shift);bottom:0;right:var(--clip-shift);transition:border var(--f-transition-duration) var(--f-transition-easing),box-shadow var(--f-transition-duration) var(--f-transition-easing);border-radius:inherit;border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, none)}.f-thumbs.is-modern{--f-transition-duration: .25s;--f-transition-easing: ease-out}.f-thumbs.is-modern.is-syncing{--f-transition-duration: 0s}:root{--f-progressbar-height: 3px;--f-progressbar-color: var(--f-carousel-theme-color, #575ad6);--f-progressbar-opacity: 1;--f-progressbar-z-index: 30}.f-progressbar{position:absolute;top:0;left:0;right:0;z-index:var(--f-progressbar-z-index);height:var(--f-progressbar-height);transform:scaleX(0);transform-origin:0;opacity:var(--f-progressbar-opacity);background:var(--f-progressbar-color);user-select:none;pointer-events:none;animation-name:f-progressbar;animation-play-state:running;animation-timing-function:linear}button>.f-progressbar{--f-progressbar-height: 100%;--f-progressbar-opacity: .2}@keyframes f-progressbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}[data-fullscreen-action=toggle] svg g:first-child{display:flex}[data-fullscreen-action=toggle] svg g:last-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:first-child{display:none}:fullscreen [data-fullscreen-action=toggle] svg g:last-child{display:flex}.in-fullscreen-mode>.f-carousel{flex:1;min-width:0!important;min-height:0!important}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}.fancybox__dialog{width:100%;height:100vh;max-height:unset;max-width:unset;padding:0;margin:0;border:0;overflow:hidden;background:transparent;touch-action:none}.fancybox__dialog:focus{outline:none}.fancybox__dialog::backdrop{opacity:0}@supports (height: 100dvh){.fancybox__dialog{height:100dvh}}div.fancybox__dialog{position:fixed;inset:0;z-index:1050}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-backdrop-bg: rgba(24, 24, 27, .95);--f-toolbar-margin: 0;--f-toolbar-padding: 8px;--f-toolbar-gap: 0;--f-toolbar-color: #ddd;--f-toolbar-font-size: 16px;--f-toolbar-font-weight: 500;--f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;--f-toolbar-line-height: var(--f-button-height);--f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);--f-toolbar-shadow: none;--f-toolbar-bg: none;--f-counter-margin: 0;--f-counter-padding: 0px 10px;--f-counter-gap: 4px;--f-counter-line-height: var(--f-button-height);--f-carousel-gap: 17px;--f-carousel-slide-width: 100%;--f-carousel-slide-height: 100%;--f-carousel-slide-padding: 0;--f-carousel-slide-bg: unset;--f-html-color: #222;--f-html-bg: #fff;--f-error-color: #fff;--f-error-bg: #333;--f-caption-margin: 0;--f-caption-padding: 16px 8px;--f-caption-color: var(--fancybox-color, #dbdbdb);--f-caption-bg: transparent;--f-caption-font: inherit;--f-caption-line-height: 1.375;--f-spinner-color-1: rgba(255, 255, 255, .2);--f-spinner-color-2: rgba(255, 255, 255, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px;--f-progressbar-color: rgba(255, 255, 255);--f-button-width: 46px;--f-button-height: 46px;--f-button-color: #ddd;--f-button-hover-color: #fff;--f-button-outline-width: 1px;--f-button-outline-color: rgba(255, 255, 255, .75);--f-button-outline-offset: 0px;--f-button-bg: rgba(54, 54, 54, .75);--f-button-border: 0;--f-button-border-radius: 0;--f-button-shadow: none;--f-button-transition: all .2s ease;--f-button-transform: none;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.75;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .5;--f-arrow-pos: 32px;--f-arrow-width: 50px;--f-arrow-height: 50px;--f-arrow-svg-width: 24px;--f-arrow-svg-height: 24px;--f-arrow-svg-stroke-width: 2;--f-arrow-border-radius: 50%;--f-arrow-bg: rgba(54, 54, 54, .65);--f-arrow-color: #ddd;--f-arrow-hover-color: #fff;--f-close-button-width: 34px;--f-close-button-height: 34px;--f-close-border-radius: 4px;--f-close-button-color: #fff;--f-close-button-hover-color: #fff;--f-close-button-bg: transparent;--f-close-button-hover-bg: transparent;--f-close-button-active-bg: transparent;--f-close-button-svg-width: 22px;--f-close-button-svg-height: 22px;--f-thumbs-margin: 0px;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: none;--f-thumb-transition: all .2s ease;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-opacity: 1;--f-thumb-border: none;--f-thumb-shadow: none;--f-thumb-transform: none;--f-thumb-focus-opacity: 1;--f-thumb-focus-border: none;--f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);--f-thumb-focus-transform: none;--f-thumb-hover-opacity: 1;--f-thumb-hover-border: none;--f-thumb-hover-transform: none;--f-thumb-active-opacity: var(--f-thumb-hover-opacity);--f-thumb-active-border: var(--f-thumb-hover-border);--f-thumb-active-transform: var(--f-thumb-hover-transform);--f-thumb-selected-opacity: 1;--f-thumb-selected-border: none;--f-thumb-selected-shadow: inset 0 0 0 2px #fff;--f-thumb-selected-transform: none;position:absolute;inset:0;overflow:hidden;outline:none;display:flex;flex-direction:column}.fancybox__container[theme=light]{--fancybox-color: #222;--fancybox-backdrop-bg: rgba(255, 255, 255, .97);--f-toolbar-color: var(--fancybox-color, #222);--f-toolbar-text-shadow: none;--f-toolbar-font-weight: 400;--f-html-color: var(--fancybox-color, #222);--f-html-bg: #fff;--f-error-color: #555;--f-error-bg: #fff;--f-video-bg: #fff;--f-caption-color: #333;--f-spinner-color-1: rgba(0, 0, 0, .2);--f-spinner-color-2: rgba(0, 0, 0, .8);--f-spinner-border-width: 3.5px;--f-progressbar-color: rgba(111, 111, 116);--f-button-color: #333;--f-button-hover-color: #000;--f-button-outline-color: rgba(0, 0, 0, .85);--f-button-bg: rgba(255, 255, 255, .85);--f-button-svg-stroke-width: 1.3;--f-button-svg-filter: none;--f-arrow-bg: rgba(255, 255, 255, .85);--f-arrow-color: #333;--f-arrow-hover-color: #000;--f-arrow-svg-stroke-width: 1.3;--f-close-button-color: #555;--f-close-button-hover-color: #000;--f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);--f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;--f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000}.fancybox__container::backdrop{background-color:transparent}.fancybox__container.has-vertical-thumbs{flex-direction:row-reverse}.fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport{overflow-x:clip;overflow-y:visible}.fancybox__container>*:not(.fancybox__carousel),.fancybox__container .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){opacity:var(--f-drag-opacity, 1)}.fancybox__container:not(.is-ready,.is-hiding){visibility:hidden}.fancybox__container.is-revealing>*:not(.fancybox__carousel),.fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){animation:var(--f-interface-enter-duration, .35s) ease none f-fadeIn}.fancybox__container.is-hiding>*:not(.fancybox__carousel),.fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut}.fancybox__container.is-idle .f-carousel__toolbar{pointer-events:none;opacity:0}.fancybox__container.is-idle .f-button.is-arrow{opacity:0}.fancybox__container.is-idle.is-ready .f-carousel__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__container.is-idle.is-ready .f-button.is-arrow{animation:.15s ease-out both f-fadeOut}.fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-backdrop-bg)}.fancybox__carousel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__carousel.is-vertical{--f-carousel-slide-height: 100%}.fancybox__carousel.is-ltr{direction:ltr}.fancybox__carousel.is-rtl{direction:rtl}.fancybox__carousel>.f-button.is-arrow:before{position:absolute;content:"";inset:-30px;z-index:1}.fancybox__viewport{display:grid;flex:1;min-height:0;min-width:0;position:relative;overflow:visible;transform:translate3d(0,var(--f-drag-offset, 0),0)}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__viewport [data-selectable],.fancybox__viewport [contenteditable]{cursor:auto}.fancybox__slide{box-sizing:border-box;position:relative;grid-area:1/1;display:flex;align-items:center;flex-direction:column;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);min-width:0;min-height:0;max-width:100%;margin:0;padding:var(--f-carousel-slide-padding);background:var(--f-carousel-slide-bg);backface-visibility:hidden;transform:translateZ(0);will-change:transform}.fancybox__slide:before,.fancybox__slide:after{display:block;content:""}.fancybox__slide:before{margin-bottom:auto}.fancybox__slide:after{margin-top:auto}.fancybox__slide.is-selected{z-index:1}.fancybox__slide.f-zoomable{overflow:visible}.fancybox__slide.has-error{--f-html-color: var(--f-error-color, --f-html-color);--f-html-bg: var(--f-error-bg, --f-html-bg)}.fancybox__slide.has-html{overflow:auto;padding:8px}.fancybox__slide.has-close-btn{padding-top:34px}.fancybox__slide.has-controls:before{margin:0}.fancybox__slide .f-spinner{cursor:pointer}.fancybox__container.is-closing .f-caption,.fancybox__slide.is-loading .f-caption{visibility:hidden}.fancybox__container.is-closing .fancybox__carousel{overflow:visible}.f-button.is-close-button{--f-button-width: var(--f-close-button-width);--f-button-height: var(--f-close-button-height);--f-button-border-radius: var(--f-close-border-radius);--f-button-color: var(--f-close-button-color);--f-button-hover-color: var(--f-close-button-hover-color);--f-button-bg: var(--f-close-button-bg);--f-button-hover-bg: var(--f-close-button-hover-bg);--f-button-active-bg: var(--f-close-button-active-bg);--f-button-svg-width: var(--f-close-button-svg-width);--f-button-svg-height: var(--f-close-button-svg-height);position:absolute;top:calc(var(--f-button-height) * -1);right:0;z-index:40}

/* End */


/* Start:/local/templates/md2019/css/tom-select.default.min.css?17835416749810*/
.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:5px 8px 2px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}.ts-control>*{display:inline-block;vertical-align:initial}.ts-wrapper.multi .ts-control>div{background:#1da7ee;border:1px solid #0073bb;color:#fff;cursor:pointer;margin:0 3px 3px 0;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#92c836;border:1px solid #00578d;color:#fff}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#d2d2d2;border:1px solid #aaa;color:#fff}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(#fff,#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1);display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #0073bb;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#00578d}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#aaa}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #0073bb;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#00578d}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#aaa}:root{--ts-pr-clear-button:0px;--ts-pr-caret:0px;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.ts-wrapper.single .ts-control{--ts-pr-caret:2rem}.ts-wrapper.single .ts-control:after{border-color:grey transparent transparent;border-style:solid;border-width:5px 5px 0;content:" ";display:block;height:0;margin-top:-3px;position:absolute;top:50%;width:0}.ts-wrapper.single .ts-control:not(.rtl):after{right:15px}.ts-wrapper.single .ts-control.rtl:after{left:15px}.ts-wrapper.single.dropdown-active .ts-control:after{border-color:transparent transparent grey;border-width:0 5px 5px;margin-top:-4px}.ts-wrapper.single.input-active .ts-control,.ts-wrapper.single.input-active .ts-control input{cursor:text}.ts-wrapper{display:flex;min-height:36px}.ts-wrapper.multi.has-items .ts-control{padding-left:5px;--ts-pr-min:$padding-x}.ts-wrapper.multi .ts-control [data-value]{background-color:color-mix(#1da7ee,#178ee9,60%);background-image:linear-gradient(180deg,#1da7ee,#178ee9);background-repeat:repeat-x;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px hsla(0,0%,100%,.03);text-shadow:0 1px 0 rgba(0,51,83,.3)}.ts-wrapper.multi .ts-control [data-value].active{background-color:color-mix(#008fd8,#0075cf,60%);background-image:linear-gradient(180deg,#008fd8,#0075cf);background-repeat:repeat-x}.ts-wrapper.multi.disabled .ts-control [data-value]{background:none;box-shadow:none;color:#999;text-shadow:none}.ts-wrapper.multi.disabled .ts-control [data-value],.ts-wrapper.multi.disabled .ts-control [data-value] .remove{border-color:#e6e6e6}.ts-wrapper.multi.disabled .ts-control [data-value] .remove{background:none}.ts-wrapper.single .ts-control{background-color:color-mix(#fefefe,#f2f2f2,60%);background-image:linear-gradient(180deg,#fefefe,#f2f2f2);background-repeat:repeat-x;box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 hsla(0,0%,100%,.8)}.ts-dropdown.single,.ts-wrapper.single .ts-control{border-color:#b8b8b8}.dropdown-active .ts-control{border-radius:3px 3px 0 0}.ts-dropdown .optgroup-header{font-size:.85em;font-weight:700;padding-top:7px}.ts-dropdown .optgroup{border-top:1px solid #f0f0f0}.ts-dropdown .optgroup:first-child{border-top:0}
/*# sourceMappingURL=tom-select.default.min.css.map */
/* End */


/* Start:/local/components/my/region.picker/templates/.default/style.css?178905823216643*/
/* my:region.picker — чип с городом в шапке, панель выбора (дропдаун / нижний лист),
   bubble подтверждения. Токены — md-tokens.css, компоненты — md-components.css
   (.md-search, .md-chip, .md-btn, .md-empty, .md-toast). Порог «лист вместо дропдауна»
   объявлен один раз: --md-region-sheet ниже, JS читает его через getComputedStyle. */

/* ── Чип ── */
/* Цвет задаём токеном, а не `inherit`: в липком чипе родитель не красится вовсе, и город
   получал чистый чёрный вместо цвета текста ДС (ЗАМЕРЕНО 2026-09-06 в браузере:
   rgb(0,0,0) при --text-primary #0E1420). На тёмных полосах шапки цвет перебивают
   правила md-header.css — они специфичнее (0,2,0 и 0,3,0). */
.md-region__chip {
  display: inline;
  color: var(--text-primary);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.md-region__chip:hover { color: var(--text-link); }
.md-region__chip-name { display: inline; }
/* Область — приглушённее названия, но того же семейства цветов. На тёмных полосах шапки
   --text-tertiary (#5A6B80) на navy-700 не читается, поэтому там цвет переопределяется
   в md-header.css на --navy-300. */
.md-region__chip-area {
  display: inline;
  color: var(--text-tertiary);
  font-size: var(--text-caption-size);
  font-weight: var(--fw-regular);
}
.md-region__chip-area[hidden] { display: none; }
/* Область через точку (утилитарная строка, липкий чип). */
.md-region__chip--inline .md-region__chip-area::before { content: " · "; }
/* Область второй строкой (мобильная полоса доставки). */
.md-region__chip--stack .md-region__chip-area { display: block; line-height: var(--text-caption-lh); }
.md-region__chip--stack .md-region__chip-area[hidden] { display: none; }

/* Порог раскладки объявлен один раз и на :root — его же читает script.js через
   getComputedStyle, поэтому число живёт только в CSS (правило css №6). На самой панели
   переменную держать нельзя: она скрыта до открытия, и в момент чтения браузер отдавал
   значение, посчитанное в другом состоянии — панель считала себя листом на десктопе
   (замерено 2026-09-06: sheet=1 при ширине окна 1280). */
:root {
  --md-region-sheet: 0;
  /* Уровень для раскладок, которые перекрывают страницу целиком (нижний лист, модальное
     окно). Он выше шкалы ДС намеренно: плашка согласия на cookie (#cookie-popup) задаёт
     себе z-index: 9999 инлайном, вне шкалы, и перекрывала лист на первом визите — то есть
     ровно тогда, когда человек и выбирает город. Чужой элемент не трогаем: инлайновый
     стиль внешним правилом всё равно не перебить без !important. Когда z плашки приведут
     к шкале ДС (отдельная задача), это значение вернётся к --z-dropdown. */
  --md-region-z-over: 10001;
}
@media (max-width: 900px) {
  :root { --md-region-sheet: 1; }
}

/* ── Панель ── */
/* Оформление (фон, радиус, тень, отступы шапки и тела, кнопка закрытия) берём у .md-modal
   из ДС — панель размечена его классами. Своего здесь только позиционирование и размеры:
   .md-modal рассчитан на окно 560px по центру, а у нас дропдаун под чипом шапки, поэтому
   ширину, максимум высоты и раскладку переопределяем связкой из двух классов (0,2,0),
   чтобы не зависеть от порядка подключения файлов. */
.md-region.md-modal {
  /* Базовый цвет здесь же: панель лежит в <body>, но по сайту раскиданы легаси-правила
     (осветление текста в шапке, центрирование инпутов), и без явного значения она
     выглядела пустой. Универсального `.md-region *` быть не должно — он равнял под один
     цвет и элементы ДС, у которых свои роли (приглушённая подпись, активный чип). */
  color: var(--text-primary);
  position: fixed;
  z-index: var(--z-dropdown);
  /* 520px, как у модального окна: при 460 три чипа быстрого выбора помещались впритык
     (19px запаса в Chromium), и на системном шрифте Safari упирались в край. */
  width: 520px;
  max-width: calc(100vw - var(--space-8));
  max-height: var(--md-region-max, 70vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
/* Кнопка закрытия. .md-modal__close из ДС задаёт размер, радиус и ховер, но не сбрасывает
   нативный вид кнопки: без этого браузер рисовал серый прямоугольник с рамкой
   (border: 2px outset — замерено 2026-09-06). Сброс держим у себя, чтобы не трогать ДС. */
.md-region .md-modal__close {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--ink-500);
}
.md-region .md-modal__close:hover { background: var(--ink-100); color: var(--text-primary); }
.md-region .md-modal__close:focus-visible { box-shadow: var(--shadow-focus); }
.md-region .md-modal__close .ph { width: var(--icon-md); height: var(--icon-md); }

/* Тело — колонка с равными промежутками; прокручивается только оно, шапка остаётся на месте. */
.md-region__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  padding-top: var(--space-4);
  color: var(--text-primary);
}
.md-region[hidden] { display: none; }
.md-region__label { font-size: var(--text-caption-size); margin-bottom: var(--space-1); }
.md-region__label, .md-region .md-region__item-area, .md-region .md-empty__text { color: var(--text-tertiary); }
.md-region .md-region__input {
  text-align: left;
  font-size: var(--text-body-size);
  line-height: normal;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.md-region .md-region__input::placeholder { color: var(--text-placeholder); }
.md-region .md-chip { color: var(--text-primary); background: var(--bg-surface); }
.md-region .md-chip:hover { background: var(--navy-050); }
/* Быстрый выбор — всегда одной строкой (просьба Ильи 2026-09-06). На узких экранах,
   где три чипа не помещаются, строка прокручивается вбок, а не переносится: перенос
   сдвигал поле поиска вниз и панель прыгала по высоте. */
.md-region__quick {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
  /* Маска-затухание у правого края: строка прокручивается, и без неё третий чип просто
     обрывался краем панели — выглядело как дефект вёрстки, а не как «есть ещё». Тот же
     приём, что у названия города в липком чипе (md-header.css). Полоса прокрутки скрыта
     выше, поэтому иного признака у прокрутки нет.
     -webkit-mask-image парный: Safari до 15.4 знает только префиксную форму. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
/* Когда всё помещается, контейнер вообще перестаёт обрезать. Не только маска: в Safari
   на macOS последний чип срезался правой кромкой даже при снятой маске — там flex-контейнер
   с overflow-x считает область прокрутки без правого поля, и элемент, стоящий вплотную,
   уходит под край (сообщение Ильи 2026-09-06; в Chromium не воспроизводится).
   overflow: visible снимает вопрос независимо от того, как посчитана ширина. */
.md-region__quick.is-fit {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.md-region__quick::-webkit-scrollbar { display: none; }
.md-region__quick .md-chip { flex: none; }
/* Небольшой запас справа: без него последний чип упирается в край и при чуть более
   широком шрифте (масштаб страницы, системный шрифт) обрезается кромкой контейнера. */
.md-region__quick::after { content: ""; flex: none; width: var(--space-1); }
.md-region__recent[hidden] { display: none; }
.md-region__geo[hidden] { display: none; }
.md-region__geo[aria-busy="true"] { opacity: .6; cursor: progress; }
.md-region__clear[hidden] { display: none; }
.md-region__search { flex: none; }

.md-region__list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.md-region__list[hidden] { display: none; }
.md-region__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* Тонкая линия между строками — список читается как перечень, а не как сплошной блок.
   У последней строки не нужна: её съедает нижний отступ тела. */
.md-region__item + .md-region__item { box-shadow: inset 0 1px 0 var(--border-subtle); }
.md-region__item:hover,
.md-region__item.is-focused { background: var(--navy-050); }
.md-region__item-name { font-size: var(--text-body-size); color: var(--text-primary); }
.md-region__item-area { font-size: var(--text-caption-size); color: var(--text-tertiary); }
.md-region__empty { padding: var(--space-4) var(--space-2); }
.md-region__empty[hidden] { display: none; }

/* Лист и модальное окно поднимаем над легаси-слоем — см. --md-region-z-over. */
.md-region.md-modal.md-region--modal { z-index: var(--md-region-z-over); }

/* ── Модальный режим: корзина и чекаут ──
   Там клик по «Изменить регион» осознанный, а цена ошибки — неверный срок и стоимость
   доставки, поэтому окно по центру с затемнением, а не дропдаун под чипом (решение Ильи
   2026-09-06). Позиция задаётся здесь, JS в этом режиме не считает координаты якоря. */
.md-region.md-modal.md-region--modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - var(--space-8)));
  max-height: min(80vh, var(--md-region-max, 80vh));
}

/* ── Затемнение ──
   Своего оверлея в ДС нет намеренно: .md-modal — это оформление содержимого, а затемнение,
   фокус-трап и блокировку скролла там отдают Fancybox. Прецедент для дропдауна в шапке уже
   есть — .md-suggest-backdrop под списком подсказок поиска (решение 2026-09-03): тот же
   цвет и тот же токен уровня, шапка остаётся над затемнением вместе с чипом и панелью.
   Модальный режим и нижний лист перекрывают всё, включая шапку, — там уровень выше.

   Класс на <html> ставит JS ровно тогда, когда затемнение показано, поэтому правило
   блокировки прокрутки общее, а не внутри медиазапроса: иначе в модальном окне на десктопе
   фон прокручивался под затемнением (замерено в браузере 2026-09-06). */
html.md-region-open { overflow: hidden; }

.md-region-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: color-mix(in srgb, var(--ink-950) 35%, transparent);
}
.md-region-backdrop.is-over-header { z-index: calc(var(--md-region-z-over) - 1); }
.md-region-backdrop[hidden] { display: none; }

/* ── Bubble «Ваш город — X?» ── */
.md-region__confirm {
  position: fixed;
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-body-sm-size);
}
.md-region__confirm[hidden] { display: none; }
.md-region__confirm-text[hidden] { display: none; }
.md-region__confirm-actions { display: inline-flex; gap: var(--space-2); }
.md-region__confirm-actions [hidden] { display: none; }

/* ── Мобильная раскладка: нижний лист. Тот же порог, что у шапки (md-header.css: 900/901). ── */
/* На узких экранах оба режима — нижний лист: он и так забирает фокус, а окно по центру
   на телефоне пришлось бы двигать под клавиатуру. */
/* Узкий экран: у кнопки геолокации остаётся только иконка. «Москва» и «Санкт-Петербург»
   занимают 214px из ~327 доступных в листе, и подпись «Моё местоположение» (179px) в строку
   уже не влезала — она уезжала под кромку. Название кнопки остаётся в aria-label. */
@media (max-width: 900px) {
  .md-region__geo span { display: none; }
  .md-region__geo { padding-inline: var(--space-2); }
}

@media (max-width: 900px) {
  .md-region.md-modal,
  .md-region.md-modal.md-region--modal {
    z-index: var(--md-region-z-over);
    transform: none;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    /* --md-region-vh = высота visualViewport (script.js, place): при открытой клавиатуре
       dvh её не учитывает, и лист уходил под клавиатуру вместе с полем и списком. */
    max-height: min(85dvh, calc(var(--md-region-vh, 100dvh) - var(--space-4)));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
  .md-region__confirm {
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    max-width: none;
  }
}

/* End */


/* Start:/local/templates/md2019/components/bitrix/system.auth.form/popup_2025/style.css?178354167433*/
#at_bitrix {
    padding: 44px;
}
/* End */


/* Start:/local/templates/md2019/components/bitrix/news.list/miniBlock-mob/style.css?17835416741066*/

.block-blue {
	margin: 0 0 10px 0;
	min-width: 186px;
	background-color: #f2fdff;
	padding: 10px 10px;
	border: 1px solid #ADE5F9;
	overflow: auto;
	color: #4c4a4a;
}
.block-blue-item{
	text-decoration: none;
	margin-bottom: 12px;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color: #4c4a4a;
}
.block-blue-item:hover{
	text-decoration: underline dashed gray; 

}

.block-blue-item:first-of-type{
	padding-top: 10px;
}
      

/*.block-blue li {
	margin-bottom: 10px;
	list-style-type: none;	
	text-align: left;
}*/

.block-blue-title {
	text-align: center;
	display: block;
	cursor: pointer;
	font-size: 17px;
    padding: 7px;
    text-decoration: none;
    color: #4c4a4a;

}

.block-blue-title:hover{
    text-decoration: underline;


}

.block-blue-date {
	font-size:  11px;
}

.block-blue-all-link {
	display:inline-block;
	/*text-align:right;*/
	text-decoration: underline!important;
	font-size: 12px;
	cursor: pointer;
	margin: 5px 0 0 20px;
	float: right;
	color: #4c4a4a;
}

.side-img-close { 
	font-size: 12px;
}
                 

/* End */


/* Start:/local/templates/md2019/template_styles.css?178904109649834*/
/****Reset*****/
html,
body,
div,
h1,
h2 {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  scroll-padding-top: 70px;
}

/*****Basic Elements*****/
body {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  margin: auto;
}

.body_wrrapper {
  background-color: white;
}

main {
  background-color: #ffffff;
  color: #3d5154;
}

a {
  text-decoration: underline;
}

p,
main li {
  font-size: 14px;
  line-height: 1.5;
  padding: 5px 0 5px 0px;
}

svg {
  pointer-events: none;
}

.indent {
  text-align: justify;
  text-indent: 20px;
}

img {
  border: 0;
  max-width: 100%;
  /* !important */
  height: auto;
}

span.rub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans", Helvetica, Arial, sans-serif;
  padding: 0;
}

iframe[src*="youtube"] {
  max-width: 100%;
}

/* main layout */

/* Каркас контента: сетка ДС на грид-токенах. Контент (<main>) + правый сайдбар (.side_right).
   Сайдбар стоит сбоку только когда есть место (>900px — брейк как у мобильной шапки):
   десктоп 12 кол — контент 9 / сайдбар 3 (~290px); широкий планшет 8 кол — 6 / 2.
   На ширинах ≤900 (узкий планшет и мобайл) сайдбар падает ПОД контент — иначе на планшете
   он слишком сжимался (правка по живой проверке Лены). Боковое поле и gutter берём из
   грид-токенов — контент встаёт вровень с шапкой (32px), рассинхрон краёв (было 20 против 32)
   уходит. Чекаут не задет: там .main_wrapper переопределён на display:block инлайном
   header.php (грузится позже всех linked CSS). */
.main_wrapper {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
}
.main_wrapper > main { grid-column: 1 / -1; min-width: 0; }
.main_wrapper > .side_right { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .main_wrapper > main { grid-column: span 6; }
  .main_wrapper > .side_right { grid-column: span 2; }
}
@media (min-width: 1440px) {
  .main_wrapper > main { grid-column: span 9; }
  .main_wrapper > .side_right { grid-column: span 3; }
}

/* Подвал ДС (навигация/контакты/копирайт) — эпик #1081, #1083/#1086 */
footer.mdf {
  display: block;
  margin-top: 0;
  background: var(--bg-inverse);
  color: var(--navy-200);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  /* Боковое поле — --grid-margin, а не --space-6: найдено ревью MR !46 (ADR
     2026-08-18-ds-karkas-container.md, «Пересмотр основания»), решение Лены 2026-09-03.
     --space-6 — фиксированные 24px на любой ширине; --grid-margin — 16px мобайл/32px ≥768,
     тот же токен, что у шапки и main. Край подвала не совпадал с краем шапки/контента
     ни на одной ширине (на мобиле уже на 8px, на десктопе уже на 8px) — незаметно на глаз
     из-за собственного тёмного фона подвала, не имеющего соседней светлой полосы для
     сравнения края в первом кадре. */
  padding: var(--space-10) var(--grid-margin) var(--space-6);
}
/* .mdf--navy — тот же оттенок, что у util-строки шапки и подложки бургера (--navy-700),
   а не тёмный var(--bg-inverse)=navy-900 по умолчанию: решение Лены 2026-09-05, шапка
   и подвал сайта читаются одним объектом. Модификатор уже стоял в разметке footer.php
   без единого правила — здесь его объявление-источник. Специфичность выше базового
   footer.mdf (0,1,1) нарочно двумя классами (0,2,0), а не порядком в файле — рядом
   с базой, но побеждает независимо от порядка склейки. */
.mdf.mdf--navy { background: var(--navy-700); }
.mdf__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  gap: var(--space-10);
}
.mdf__h {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body-sm-size);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-300);
}
.mdf__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mdf__link {
  color: var(--navy-100);
  text-decoration: none;
  font-size: var(--text-body-sm-size);
}
.mdf__link:hover {
  color: #fff;
  text-decoration: underline;
}
.mdf__contacts {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mdf__contacts li { font-size: var(--text-body-sm-size); }
.mdf__city {
  display: block;
  font-size: var(--text-caption-size);
  /* navy-300, а не navy-400: на фоне подвала (--navy-700, .mdf--navy) navy-400 даёт
     контраст 4.29:1 — ниже порога WCAG AA 4.5:1 для обычного текста, а тут ещё и
     12px. На прежнем фоне navy-900 тот же цвет давал 6.64:1 и был в норме — порог
     пробила смена тона подвала 2026-09-03, не сам цвет. navy-300 на navy-700 = 6.66:1
     (посчитано 2026-09-03 по формуле WCAG 2.1 из значений md-tokens.css). Тот же
     navy-300, что уже стоит у соседнего .mdf__addr. */
  color: var(--navy-300);
  margin-bottom: 2px;
}
/* Адрес офиса под названием города. Возвращён в р.29: старый подвал показывал адреса
   текстом, при переводе на ДС они остались только в schema.org — а NAP-блок
   (название-адрес-телефон) на всех страницах это заметный сигнал для локального поиска. */
.mdf__addr {
  display: block;
  font-size: var(--text-caption-size);
  color: var(--navy-300);
  margin-bottom: 2px;
}
.mdf__tel {
  color: #fff;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-size);
  white-space: nowrap;
}
.mdf__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.mdf__soc { display: flex; gap: var(--space-3); align-items: center; }
.mdf__soc a { display: inline-flex; align-items: center; height: var(--control-height-sm); }
.mdf__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  /* Линия навy-600, а не navy-700: подвал перекрашен в navy-700 (.mdf--navy выше),
     и разделитель того же значения совпал с фоном — на сайте его просто нет.
     Рисовался он под прежний navy-900. navy-600 — ближайшая ступень, видимая,
     но не спорящая с текстом. */
  border-top: 1px solid var(--navy-600);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  font-size: var(--text-caption-size);
  /* navy-300 по той же причине, что и .mdf__city выше: navy-400 на navy-700 = 4.29:1,
     ниже AA. Здесь это копирайт и юридическая строка. */
  color: var(--navy-300);
}
.mdf__legal { flex: 1; min-width: 240px; }
/* Брейки подвала — на сетку ДС (768/900), а не собственные 860/560 (найдено ревью MR !46,
   Low): 861-900px давал 3-колоночный подвал под уже мобильной шапкой (main-header переходит
   на мобильный режим при max-width:900px, template_styles.css:86) — два разных порога на
   одной странице. 900 — граница шапки (существующий порог header-адаптива, тот же приём,
   что и у .main_wrapper выше, р.901 в template_styles.css:86); 768 — низ диапазона
   --grid-columns:8 (md-tokens.css), совпадает с точкой, где сетка сама уходит в мобильный
   4-колоночный режим. */
@media (max-width: 900px) {
  .mdf__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 767px) {
  .mdf__cols { grid-template-columns: 1fr; gap: var(--space-8); }
  .mdf__bottom { flex-direction: column; gap: var(--space-3); }
}

/* Прежние max-width:860/500 правила .main_wrapper/aside убраны: рефлоу сайдбара теперь
   задаёт грид-сетка выше (мобайл 4 кол → стек; планшет/десктоп — сбоку). */

/* main layout */

/**** SUPPLIERS LIST TEST  *****/
/*table#thin-border{
	border-collapse: collapse;
}
#thin-border td{
	border: 1px solid gray;
	padding: 5px;
	text-indent: 0px;

}
table#vertical-borders{
	border-collapse: collapse;
}
#vertical-borders td{
	margin: 0;
    padding: 4px;
    border-width: 0 1px 0 1px;
  	border-color: #E0E0E0;
    border-style: solid;
	text-align: left; 
}*/
/*************************/

/*****Basic Layout*****/

/*#bx_top_panel_container {
	width: auto;
}*/

/*div.content-etc p, div.content-etc div{
        text-align: justify;
        text-indent: 20px;
}*/

/*****Content*****/
/*#content {
	color: #3d5154;
}
#content li{
	text-indent: 0px;
}
#content h1, #content h2 {
	color: #4C4A4A;
clear: both;
}
#content h1 {
	font-size: 1.7em;
	margin-bottom: 10px;
}
#content h2, #content .h2 {
	font-size: 1.5em;
margin-bottom: 15px;
padding-top:1em;
    line-height: 2em;

}*/

/*head*/

/* Легаси-блок @media(max-width:860px) удалён 2026-09-06.

   Он писался под старую шапку, которой больше нет. Из семи его селекторов пять не
   находят на сайте ничего (.h_logo .form_small, .h_ym, .h_reg, .h_tel, .h_user,
   .cars_list — проверено 2026-09-06 разбором HTML главной, каталога, /cars/,
   /cars/honda/, корзины, /search/ и /about/), а два оставшихся попадали в новую
   шапку и мешали:

   - `body header` с принудительным flex-wrap совпадало с <header class="main-header">
     и навязывало ей перенос, хотя у новой шапки своя раскладка;
   - `.h_tel_num` с принудительным font-size 15px попадало в номер телефона утилитарной
     строки (его печатает легаси-инклюд include_areas/phone.php). template_styles.css
     грузится позже md-header.css, специфичность равная (0,1,0), флаг важности стоял
     с обеих сторон — легаси побеждало. Из-за этого на 860px шрифт телефона прыгал 13 → 15px,
     а ширина 103 → 120px: строка становилась шире ровно там, где ей уже тесно,
     и через шесть пикселей вылетало «Юрлицам» (замер в браузере 2026-09-06).

   Заодно уходил `border-bottom: 1px dashed` у телефона — он был только ниже 860px,
   то есть новый дизайн и так рисовал номер без подчёркивания на широких экранах. */


/* Легаси-стили старой шапки удалены 2026-09-01: в md2019 единственный <header> — новая
   .main-header (на ДС), эти правила лишь протекали на неё (в т.ч. асимметричный
   padding:0 0 8px 0 — 8px снизу, 0 сверху). Вертикальный ритм задаёт .main-header__inner. */

.h_reg_change,
.h_tel_add {
  font-size: 12px !important;
}

.h_reg,
.h_tel,
.h_logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.h_reg_name,
.h_tel_num {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #03363d;
  border-bottom: none;
  text-decoration: none;
  white-space: nowrap;
}

.h_reg_name {
  color: #03363d;
  margin-top: 11px;
}

.h_reg {
  min-width: 150px;
  overflow: hidden;
}
.h_tel {
  flex-flow: row;
  align-items: center;
  margin-top: 7px;
  min-width: 150px;
}

.h_logo {
  align-items: center;
  margin-top: 10px;
}

.h_ym {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.h_user {
  margin-top: 10px;
  margin-right: 10px;
}

.h_tel_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.h_tel_add_time {
  text-align: center;
  color: #717171;
  font-size: 11px;
}

.h_user img {
  cursor: pointer;
  margin-right: 20px;
  height: 25px;
  width: 25px;
  padding-top: 10px;
}

.h_tel_back {
  margin-left: 10px;
  cursor: pointer;
}

.sticky {
  position: fixed !important;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

.menu-img-logo {
  display: none;
}

@media screen and (max-width: 600px) {
  .menu-img-logo.hide530 {
    display: inline-block;
  }

  /* Лого .h_logo не прячем на узких экранах — оно должно быть видно везде.
     Раньше тут стоял display:none и override через body:has(#order_form_div) для
     чекаута; теперь оба правила убраны как избыточные. */
}

@media screen and (max-width: 400px) {
  .menu-img-logo.hide530:first-child {
    width: 52px;
  }

  .menu-img-logo.hide530:last-child {
    width: 193px;
  }
}


/* burger */

#nav-icon3 {
  float: left;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 5px;
  box-sizing: border-box;
  background: #00c0dd;
}

#nav-icon3 span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  transition: 0.25s ease-in-out;
  transform-origin: center;
  will-change: transform, opacity;
}

/* состояние "крестик" */
#nav-icon3.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg); /* 3px + 4px = 7px */
}

#nav-icon3.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.6);
}

#nav-icon3.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg); /* 3px + 4px = 7px */
}

/*burger*/

#menu_h.menu_search {
  cursor: pointer;
}

/*-head*/

/*menu*/

/*menu*/

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  text-decoration: none;
  color: #fff;
  background: #00c0dd;
  height: 40px;
  display: none;
  cursor: pointer;
}

/*Hide checkbox*/
#navbar input[type="checkbox"] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/
/*  #navbar input[type=checkbox]:checked ~ #menu_h{
      display: block;
  }*/

.menu-auth {
  display: none;
}

.js-ajax-auth-link,
.auth-link-lk {
  cursor: pointer;
}

.logout_butt {
  padding: 0 !important;
  border-top: none;
  border-right: none;
  border-left: none;
  display: inline;
  margin: 0;
  background-color: white;
}

#at_bitrix {
  box-shadow: none;
  padding: 0;
}

#navbar {
  height: 40px;
  position: relative;
  z-index: 1000;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans,
    Tahoma, sans-serif;
}

.menu_wrap {
  display: flex;
  align-items: center;
  background-color: #00c0dd;
}

.menu_h {
  display: flex;
  align-items: center;
  justify-content: start;
  margin: 0px;
  background-color: #00c0dd;
  list-style: none;
  padding: 0px;
  height: 40px;
}
.menu_h ul {
  list-style: none;
}

.menu_h a {
  text-decoration: none;
  color: white;
  padding: 10px 14px;
  display: block;
  background-color: #00c0dd;
}

.menu_h a:hover {
  background-color: #30aabc;
  cursor: pointer;
}


.search-img {
  vertical-align: middle;
  cursor: pointer;
}

.menu-search {
  margin-left: auto;
  margin-right: 180px;
  cursor: pointer;
}

.search-box {
  color: #656363;
  /*background-color: #f1f7f5;*/
  background-color: #00c0dd;

  /*  width: 350px;*/
  height: 40px;
  line-height: 40px;
  /*  box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-top:4px solid #D80B15;*/
  display: none;
}

.search-box {
  position: absolute;
  top: 38px;
  right: 150px;
  padding: 6px 15px;
  min-width: 425px;
}

.search-box input[type="text"] {
  width: calc(100% - 90px);
  height: 35px;
  max-height: 35px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #dbdcde;
  outline: none;
}

.search-box input[type="button"] {
  width: 80px;
  padding: 5px 0;
  background: #d80b15;
  color: #fff;
  margin-left: -6px;
  border: 1px solid #d80b15;
  outline: none;
  cursor: pointer;
}

.search-box .search-string {
  display: flex;
  gap: 8px;
}

.search-box .search-string .sec_but {
  margin: 0;
}

/*Responsive Styles*/
@media screen and (max-width: 1195px) {
  /*Make dropdown links appear inline*/
  #navbar ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  #navbar li {
    border-bottom: 1px solid #b3b0b0;
    cursor: pointer;
  }

  /*Make all menu links full width*/
  #navbar ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }

  .menu_h .menu-auth {
    display: block;
  }

  .menu_h {
    height: auto !important;
  }

  #menu_h.menu_search {
    display: block;
  }

  #menu_h.menu_search li {
    display: none;
  }

  #menu_h.menu_search li.menu_search {
    display: block;
  }

  .search-box {
    min-width: 300px;
  }

  .search-field {
    height: 25px;
  }

  #menu_h.menu_all {
    display: block;
    overflow: hidden;
  }

  #menu_h.menu_all li {
    display: block;
  }

  #navbar .menu_h a,
  #navbar .search-box {
    color: #656363;
  }

  #navbar .menu_h a {
    background-color: #f1f7f5;
  }

  #navbar .menu_h a:hover {
    background-color: #b9eafc;
  }

  .menu_wrap {
    display: block !important;
  }

  .menu-search {
    position: absolute;
    right: 170px;
    top: 0px;
    margin-right: 0;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .menu-search svg {
    width: 30px;
    transform: translateX(25%);
  }

  .search-box {
    position: static !important;
    display: block !important;
    border: none !important;
  }

  .search-box:before {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  #navbar.sticky {
    position: sticky !important;
  }
}

/*-menu*/

.warranty-info {
  min-height: 35px;
  border: 1px solid #00c0dd;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Боковой отступ = грид-токен, вровень с контентом (.warranty-info вне .main_wrapper,
     поэтому сетку не наследует — задаём то же поле явно). */
  margin: 10px var(--grid-margin);
  cursor: pointer;
}

.warranty-info:hover {
  background-color: #c4fffa;
}

.warranty-text {
  text-align: center;
  font-size: 14px;
  padding: 0 10px;
  color: #03363d;
}

/* Легаси-правило @media(max-width:860px){.warranty-info{margin:10px}} удалено 2026-09-02
   (найдено при разборе бага «гарантия шире контента», Лена): margin:10px var(--grid-margin)
   в базовом правиле уже адаптивен сам по себе (16/32 по брейку 768), это правило его
   перебивало плоским 10px на ЛЮБой ширине ≤860 — блок вылезал за пределы колонки контента. */

/* NEW 2025 */

/* main */

/* common */

.hidden {
  display: none !important;
}

.mt40 {
  margin-top: 40px;
}

.grid-list--cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.grid-list--cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.grid-list--cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-list--cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.section-header .section-title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.button--text {
  display: block;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-top: 20px;

  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  color: #30aabc;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid #30aabc;
  background: none;
  cursor: pointer;
}
.button--text:hover {
  border-bottom: 1px solid transparent;
}

@media (max-width: 1024px) {
  .grid-list--cols-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .grid-list--cols-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .grid-list--cols-5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .grid-list--cols-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .grid-list--cols-2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  margin: 0;
  width: 100%;
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #f6f6f6;
  border: 1px solid #dfdfdf;
  border-radius: 60px;
  list-style: none;
  cursor: pointer;
}
.chip:hover {
  border: 1px solid #00c0dd;
}

.chip__link {
  padding: 10px 20px;
  color: #3d5154;
  line-height: 16px;
  font-size: 14px;
  text-decoration: none;
  border-bottom: none;
}
.chip__link:hover {
  border: none;
}

.section-header .section-link {
  height: fit-content;
  white-space: nowrap;
  border-bottom: 1px solid #30aabc;
  color: #30aabc;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
}
.section-header .section-link:hover {
  border-bottom: none;
}

.btn__collapse {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  color: #30aabc;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid #30aabc;
}
.btn__collapse:hover {
  border-bottom: 1px solid transparent;
}

.categories__item:hover,
.brands__item:hover,
.mounts__item:hover,
.base-knowledge__item:hover {
  border: 1px solid #30aabc;
}

.categories__item:hover .categories__label {
  background-color: #eaeaea;
}

/* brands / mounts */

.brands__list a,
.mounts__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border: 1px solid #e3e3e3;
}

.mounts__list a {
  margin: 0;
  padding: 0;
}

.mounts__list img {
  width: auto;
  max-height: 70px;
  padding: 5px;
  box-sizing: border-box;
}

.brands__list {
  overflow: hidden;
  height: 152px;
}

.brands__list.collapsed {
  overflow: hidden;
  height: auto;
}

/* categories */

.categories * {
  box-sizing: border-box;
}

.categories__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #dfdfdf;
}

.categories__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px 10px;
  font-size: 14px;
  line-height: 17px;
  /*  font-weight: 700;*/
  color: #3d5154;
  text-align: center;
  background-color: #f6f6f6;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .categories__item {
    display: grid;
    grid-template-columns: 150px auto;
    width: 100%;
  }

  .categories__photo-box {
    padding: 10px 0;
  }

  .categories__label {
    justify-content: left;
    padding: 5px 20px;
    text-align: left;
  }
}

/* popular series */

.popular-series__item {
  display: grid;
  grid-template-columns: 224px 1fr;
  border: 1px solid #e3e3e3;
  min-height: 174px;
}

.popular-series__img {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 110px;
}

.popular-series__img-el {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-series__content {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.popular-series__title {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  color: #3d5154;
  margin-bottom: 20px;
}

.popular-series__characteristics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.popular-series__characteristics li {
  font-size: 14px;
  line-height: 16px;
  padding: 0;
}

.popular-series__price strong {
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}

.popular-series__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.popular-series__price a {
  min-width: 180px;
}

@media (max-width: 1024px) {
  .popular-series__content {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .popular-series__item {
    display: grid;
    grid-template-columns: 100%;
    border: 1px solid #e3e3e3;
    min-height: 174px;
  }

  .popular-series__img {
    height: 200px;
  }
}

/* reviews */
.reviews__list {
  margin-bottom: 20px;
}

.reviews__item {
  padding: 20px;
  border: 1px solid #e3e3e3;
}

.reviews__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.reviews__text p {
  margin: 0;
  padding: 0;
  color: rgb(61, 81, 84);
}

.reviews__footer {
  text-align: right;
  margin-top: 12px;
  color: rgb(61, 81, 84);
}

.reviews__footer small {
  display: block;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.reviews__footer strong {
  display: block;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

.reviews__actions {
  margin-bottom: 20px;
}

.reviews__actions .button--text {
  margin-top: 0;
}

.reviews__actions .button--text:hover {
  border-bottom: none;
}

.reviews__external {
  border: 1px solid #eaeaea;
  padding: 10px 20px;
  align-items: center;
  display: grid;
}

.reviews__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviews__rating {
  display: flex;
  align-items: center;
}

.reviews__count {
  color: #646464;
  font-size: 14px;
  padding-left: 5px;
}

.reviews__rating-value {
  color: #000;
  font-size: 20px;
  padding-right: 5px;
}

.reviews__stars {
  display: flex;
}

.reviews__stars svg {
  width: 30px;
  height: 23px;
}

@media (max-width: 1024px) {
  .grid-list--cols-3.reviews__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: nowrap;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .grid-list--cols-3.reviews__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .reviews__actions {
    display: block;
  }

  /* min-width:0, а не fit-content: у грид-контейнера fit-content считается по max-content
     ВМЕСТЕ с его отступами (318 контента + 20+20 padding + 2 border = 360), и коробка
     распирала родителя шире окна — документ уезжал вправо на 1px на 375px
     (ПРОВЕРЕНО 2026-09-06 в браузере на stage: scrollWidth 376 при clientWidth 375,
     правый край блока 375.9). Содержимому это ничего не давало: дети занимают 318px
     при доступных 343, после правки ширина 343 и внутреннего переполнения нет. */
  .reviews__external {
    min-width: 0;
    margin: 10px 0;
  }
}

/* knowledge base */
.base-knowledge {
  margin-bottom: 20px;
}

.base-knowledge__list > * {
  overflow: hidden;
  max-width: 100%;
  word-wrap: break-word;
}

.base-knowledge__item {
  border: 1px solid #dfdfdf;
  text-decoration: none;
  color: #000;
}

.base-knowledge__img {
  height: 140px;
}

.base-knowledge__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.base-knowledge__content {
  padding: 20px;
}

.base-knowledge__content small {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 14px;
  color: rgb(61, 81, 84);
}

.base-knowledge__content strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(61, 81, 84);
}

.base-knowledge__content p {
  display: block;
  margin: 0;
  padding: 0;
  color: rgb(61, 81, 84);
}

.base-knowledge .base-knowledge__link {
  margin-left: auto;
  display: block;
  width: fit-content;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.base-knowledge .base-knowledge__link:hover {
  text-decoration: none;
}

/* main end */

.m_logos {
  text-align: center;
}
.m_logos img {
  height: 40px;
  margin: 0 5px;
}

.soc-lnk {
  width: 30px !important;
  margin: 0 10px !important;
}

.soc-lnk:hover {
  border-bottom: none;
}

.soc-lnk:first-of-type {
  margin-left: 0px;
}

#f_phones a {
  white-space: nowrap;
}

.f_subs_inp {
  display: flex;
  align-content: stretch;
}
.f_subs_inp input {
  margin-top: 8px;
}

input {
  border: solid 1px lightgray;
}

/*****Etc*****/
.banner {
  display: block;
}

.errortext {
  color: red;
  font-size: 1.2em;
}

.clear {
  clear: both;
}

.in-basket {
  display: block;
  margin-left: -5px;
  font-weight: bold;
  background-color: #ffcc66;
  padding: 5px 5px;
  color: #4c4a4a;
  border: 1px solid #ffab45;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  margin-bottom: 5px;
}

#upBtn {
  display: none;
  position: fixed;
  bottom: 5px;
  left: 5px;
  z-index: 99;
  font-size: 16px;
  outline: none;
  background-color: rgb(60, 184, 104);
  color: white;
  cursor: pointer;
  padding: 10px 15px;
}

/* сcommon item css*/
/* only inner css*/
.sitem {
  overflow: hidden;
}

/* common for all 1st child*/
.sitem_wrap > div,
.sitem_wrap > a,
.sitem_wrap > img,
.sitem_wrap > dl,
.sitem1st,
.sitem-pics {
  margin-top: 5px;
}

/* header*/
.sitem-head {
  display: block !important;
  font-size: 22px;
  margin-top: 20px !important;
  display: inline-block;
  margin-bottom: 10px;
}

.sitem-head a {
  color: #666666;
  text-decoration: none;
  cursor: pointer;
}

.sitem-head a:hover {
  color: #333333;
  text-decoration: none;
}

.sitem > img,
.sitem > a,
.sitem-pics {
  clear: both;
}

.sitem-pic {
  /*text-align:center;
  vertical-align: top;
  width:240px;
  height: auto;
  margin-right: 10px;
  border:1px solid #D6D3C7;
  */

  /* transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute; */
  object-fit: contain;
}

.sitem-pic-wrap {
  /*	border:1px solid #D6D3C7;*/
  display: flex;
  width: 320px;
  height: 240px;
  margin-right: 10px;
  /* position: relative; */
  cursor: pointer;
  justify-content: center;
}
/*props*/

.thumbs img,
.sitem-pic-wrap {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.sitem_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.sitem-props {
  padding-left: 5px;
  color: #6f6f6f;
  line-height: 1.5em;
  width: 250px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0px;
  flex-grow: 1;
}
.sitem-props dd,
.sitem-props dt {
  display: inline-block;
  margin: 0px;
  float: left;
}

.sitem-props dt {
  clear: both;
  width: 40%;
  position: relative;
}

.sitem-props dt span {
  background: white;
  position: relative;
}

.sitem-props dt:before {
  content: "";
  display: block;
  left: 0;
  bottom: 0.2em;
  position: absolute;
  width: 100%;
  border-bottom: 1px dotted #d6dbe0;
}
.sitem-prop-val {
  color: #403f3f;
  width: 60%;
}
/*prices*/
.sitem-prices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 160px;
  margin-left: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /*ruble sign bug fix on ios*/
}

.catalog-sym {
  position: relative;
  cursor: pointer;
  vertical-align: sub;
}

.sitem-prices > div {
  /*width: 110px;*/
  width: 100%;
}

@media screen and (max-width: 1138px) {
  .sitem-prices {
    width: 100%;
    border-bottom: solid 1px #6666;
    padding-bottom: 20px;
  }
  .sitem-prices > div {
    margin: 10px 20px;
    width: 110px;
  }
}

@media screen and (max-width: 600px) {
  .sitem-pic-wrap {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .sitem-pics {
    width: calc(100% - 2px);
  }
}

.sitem-price {
  margin: 0 0 5px 0;
  color: #666666;
  margin: 0 0 15px 0;
  /*text-align: center;*/
}

.sitem-price-base {
  font-size: 24px;
  margin-bottom: 24px;
}

.sitem-old-price {
  font-size: 16px;
  white-space: nowrap;
}

.sitem-discount-price {
  color: #ff0000;
  display: block;
  font-size: 24px;
  white-space: nowrap;
}

/*buttons*/
.sitem-buttons a {
  display: block;
  padding: 8px 0;
  border: 2px solid #fdce4b;
  color: #3d5154;
  width: 134px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  -webkit-appearance: none;
  border-radius: 20px;
}

.sitem-buttons a:hover {
  background-color: #ffc219;
}

.sitem-button {
  background-color: #fdce4b;
}

/*.sitem-button-query {
    margin-left: -3px;
    background-color: #f7c309;   
    color: #FFFFFF!important; 
}

.sitem-button-query:hover{
    background-color: #e2b30c;
}*/

.sitem-in-basket {
  display: inline-block;
  padding: 5px 9px;
  border-top: 1px solid #fdce4b;
  border-right: 1px solid #fdce4b;
  border-left: 1px solid #fdce4b;
  text-align: center;
  width: 118px;
  font-size: 14px;
}

/*.sitem-in-basket a{
	line-height: 18px!important;
}*/

/*aval*/
.sitem-aval-text {
  color: #009900;
  padding-top: 5px;
}
.sitem-prih-text {
  color: #000066;
  padding-top: 5px;
}

.sitem-aval-hint {
  font-size: 12px;
  color: #757373;
  display: inline-block;
  position: relative;
  cursor: pointer;
  border-bottom: dashed 1px lightgray;
}

.sitem-economy-text {
  display: none;
  color: #666666;
  font-size: 12px;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /*ruble sign bug fix on ios*/
}

.sitem-naval-text {
  padding-top: 5px;
}

/* .sitem-del {
  margin-top: 15px;
  font-size: 14px;
} */

.sitem-del-block {
  font-size: 14px;
  margin: 5px 0;
  background-color: #e9fcff;
  padding: 5px 10px;
  min-width: 120px;
  border-radius: 26px;
  text-align: center;
}

.section_menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin: 20px 0;
  padding: 0;
}

.section_menu li {
  margin: 10px 20px 0 0;
}

.section_menu a {
  font-size: 20px;
  color: #03363d;
  border-bottom: 2px solid #00c0dd;
  padding: 0 0 5px 2px;
  cursor: pointer;
}

.section_menu a {
  text-decoration: none;
}

a.section_menu_selected,
.section_menu a:hover {
  color: #00c0dd;
}

/*end common line css*/

.city_choose,
.city_choose :hover {
  text-decoration: none !important;
}

@media print {
  /*****Reset*****/
  html,
  body,
  div,
  h1,
  h2 {
    margin: 0;
    padding: 0;
  }

  /*****Basic Elements*****/
  body {
    background-color: #ffffff;
    color: #585858;
    font: 10px Tahoma;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  a {
    text-decoration: underline;
  }
  img {
    max-width: 100% !important;
    border: 0px;
  }

  /*****Basic Layout*****/
  #footer,
  .catalog-button,
  #filter-table,
  #bx_top_panel_container,
  .top_buttons,
  .misc-button,
  nav,
  header {
    display: none;
  }

  body {
    padding: 0;
  }

  svg {
    vertical-align: top;
  }
  /*    #header {
    	padding: 0;
    }
    #header  .logo {
    	text-align: center;
    	width: 100%;
    }*/

  /*    .column {
    	position: static;
    	float: none;
    }
    #content {
    	width: 100%;
    	padding: 0;
    }*/

  /*****Header*****/

  /*    #header  .logo {
    	text-align: center;
    }
    #header .contacts {
    	font-size: 12px;
    }*/

  /*****Content*****/
  /*    #content h1 {
    	font-size: 16px;
    }
    #content h2 {
    	font-size: 12px;
    }*/

  /*****Main Menu*****/

  /*****Left Sidebar*****/

  /*****Right Sidebar*****/
} /*//print*/

/*new 2019*/
#content {
  color: #3d5154;
  /*background-color: #F4F4F4;*/
}

.h3,
h3 {
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans,
    Tahoma, sans-serif;
  color: #03363d;
  font-weight: normal;
  font-size: 16px;
  margin: 20px 0 5px 0;
  display: inline-block;
}

.h1,
h1 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #03363d !important;
  font-weight: normal !important;
  font-size: 26px !important;
  margin: 15px 0px 15px 0px !important;
}

.h2,
h2 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #03363d !important;
  font-weight: normal !important;
  font-size: 20px !important;
  margin: 25px 0px 5px 0px !important;
  text-decoration: none;
}

.relative {
  position: relative;
}

.bold {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}

.line-through {
  text-decoration: line-through;
}

.red {
  color: red;
}

.block {
  display: block;
}

.but_wrap {
  margin: 10px 0px;
  text-align: center;
}

.sec_but {
  display: inline-block;
  padding: 5px 20px;
  border: 2px solid #30aabc;
  color: #30aabc !important;
  width: auto !important;
  margin: auto;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  background-color: white;
  -webkit-appearance: none;
  border-radius: 20px;
}

.sec_but:hover {
  border: 2px solid #30aabc;
  color: white !important;
  background: #30aabc;
}

.sec_link {
  display: inline; /*//!important*/
  /*margin: 0px 20px;*/
  text-decoration: none;
  color: #008099 !important;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid transparent;
}

.sec_link:hover {
  border-bottom: 1px dashed #30aabc;
  text-decoration: none;
}

.pri_but {
  display: inline-block;
  padding: 5px 20px;
  border: 2px solid #00c0dd;
  color: white !important;
  width: auto !important;
  margin: auto;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  background-color: #00c0dd;
  -webkit-appearance: none;
  border-radius: 20px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.pri_but:hover {
  border: 2px solid #30aabc;
  background: #30aabc;
}

.pri_but_buy {
  display: inline-block;
  padding: 10px 30px;
  border: 2px solid #fdce4b;
  color: #3d5154 !important;
  width: auto !important;
  margin: auto;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  background-color: #fdce4b;
  -webkit-appearance: none;
  border-radius: 30px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.pri_but_buy:hover {
  background: #ffc219;
}
/*FORMS*/
.form_block textarea,
.form_block label,
.form_block input {
  display: block;
  width: 100%;
  color: #424242;
}

label.form_field_label {
  margin: 10px 0px 3px 0px;
  font-size: 14px;
}

.form_field_label input,
.form_field_label label {
  width: auto;
  display: inline-block;
}

.form_block input[type="text"],
.form_block textarea,
.form_block input[type="password"],
.form_block input[type="tel"],
.form_block input[type="email"] {
  margin-top: 3px;
  margin-bottom: 15px;
  padding-left: 5px;
  box-sizing: border-box;
}

.form_block input[type="text"],
.form_block input[type="password"],
.form_block input[type="tel"],
.form_block input[type="email"]  {
  height: 30px;
  font-size: 18px;
}

.form_block textarea {
  height: 50px;
  font-size: 16px;
  max-width: 100%;
  min-width: 100%;
  max-height: 300px;
}

.form_small {
  color: #656363;
  font-size: 14px;
  text-align: right;
  width: 100%;
  margin-top: -7px;
}
.form_field_label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0 8px;
  cursor: pointer;
  user-select: none;
}

.form_field_label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid #c7c7cc;
  border-radius: 6px;
  background-color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.form_field_label input[type="checkbox"]:checked {
  background-color: #30aabc;
  border-color: #30aabc;
}

.form_field_label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: content-box;
}

.form_field_label input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(48, 170, 188, 0.45);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .form_field_label input[type="checkbox"] {
    width: 26px;
    height: 26px;
  }
  .form_field_label input[type="checkbox"]:checked::after {
    left: 8px;
    top: 2px;
    width: 7px;
    height: 14px;
    border-width: 0 2.5px 2.5px 0;
  }
}

.form_block {
  background-color: white;
  padding: 5px 30px;
  box-shadow: 3px 3px 8px rgb(0 0 0 / 15%);
  border: 1px #cccccc solid;
}

input[type="text"],
textarea {
  border: 1px solid #c4c4c4;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="text"]:focus,
textarea:focus,
input[type="password"]:focus {
  border: 1px solid #00c0dd;
  outline: none !important;
}

ol.breadcrumb {
  list-style: none;
  padding-left: 0px;
  margin-top: 5px;
  margin-block-end: 0;
}
ol.breadcrumb li {
  display: inline;
}
ol.breadcrumb li a {
  color: #008099;
  text-decoration: none;
}

ol.breadcrumb li a:hover {
  /* color: #01447e; */
  text-decoration: none;
  border-bottom: 1px dashed #30aabc;
}

/*FORMS

/* tooltips */

.Zebra_Tooltip a,
.Zebra_Tooltip_Message a {
  color: #fda300;
  text-decoration: none;
  border-bottom: dashed 1px;
}

.z_tt_right_above,
.z_tt_left_above {
  cursor: help;
  display: inline-block;
}

/* tom-select */
.ts-wrapper {
  margin-bottom: 5px;
  min-height: 40px;
  outline: none;
}

.ts-control {
  padding: 5px;
  outline: none;
  align-content: center;
}

.ts-control,
.ts-control input,
.ts-dropdown {
  font-size: 18px;
}

.ts-wrapper.single .ts-control {
  background: #ffffff;
}

.ts-dropdown {
  z-index: 100;
  max-height: 500px;
  padding: 8px 0;
  margin: 0;
  /* Safari (macOS): пункты списка не отрисовываются, пока курсор не наведён на них.
     TomSelect.open() ставит инлайном visibility:hidden, включает display:block, считает
     позицию (форсирует layout) и тут же возвращает visibility:visible. Между hidden и
     visible кадр не рисуется, так что визуально скрытое состояние не нужно, но WebKit
     после этого переключения не перерисовывает содержимое композитного скроллера
     .ts-dropdown-content; репейнт пункта происходит только при смене его класса (hover).
     !important бьёт инлайновый style.visibility=hidden из open() (tom-select 2.4.3):
     иначе инлайн стиль победит любую специфичность.
     ПРОВЕРЕНО 2026-09-10 в Safari 26.6.2 (safaridriver, stage через devproxy, снимок
     реального окна): без правила список пустой, с ним пункты видны сразу; правило
     убрано и список открыт снова — опять пустой. Chrome правило не меняет: кадр между
     hidden и visible он и раньше не рисовал. */
  visibility: visible !important;
}

.plugin-dropdown_input .dropdown-input {
  width: calc(100% - 16px);
  padding: 8px;
  margin: 0 auto 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
}
.plugin-dropdown_input .dropdown-input:focus {
  border: 1px solid #ccc !important;
  outline: none !important;
  box-shadow: none !important;
}

.plugin-dropdown_input.has-items .items-placeholder,
.plugin-dropdown_input.dropdown-active .items-placeholder {
  display: block !important;
  opacity: 0.5;
}

.plugin-dropdown_input.has-items .items-placeholder {
  display: none !important;
}

/* Приглушаем placeholder во всех полях формы */
.form_block input::placeholder,
.form_block textarea::placeholder {
    color: #b0b0b0;
    opacity: 1;
}

/* Префиксы для старых браузеров — на всякий случай */
.form_block input::-webkit-input-placeholder,
.form_block textarea::-webkit-input-placeholder {
    color: #b0b0b0;
}
.form_block input::-moz-placeholder,
.form_block textarea::-moz-placeholder {
    color: #b0b0b0;
    opacity: 1;
}
.form_block input:-ms-input-placeholder,
.form_block textarea:-ms-input-placeholder {
    color: #b0b0b0;
}

#filter-wrapper {
  overflow: hidden;
}

#filter-content select {
  box-sizing: border-box;
  height: 40px;
}

@media screen and (min-width: 767px) {
  .ts-wrapper {
    width: calc(50% - 3px);
    display: inline-block;
    min-height: 30px;
  }

  .ts-wrapper:last-child {
    width: 100%;
    display: flex;
  }

  #filter-content select {
    height: 30px;
  }
}

.desktop-only {
  display: block;
}


@media (min-width: 861px) {
  .desktop-hide,
  #menu_h.menu_all li.desktop-hide {
    display: none;
  }
}

@media (max-width: 860px) {
  #menu_h.menu_all {
    overflow: hidden;
  }

  #menu_h.menu_all li {
    background-color: #f1f7f5;
  }

  #menu_h.menu_all a {
    padding: 14px 14px;
  }

  #menu_h.menu_all .menu-auth a {
    padding: 12px 14px;
  }

  .mobile-hide {
    display: none;
  }

  .menu-search {
    right: 64px;
  }

  .h_ym {
    margin-top: 0;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
  }

  .h_ym a {
    padding: 0;
  }

  .h_ym > div {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .h_reg {
    flex-direction: column;
    align-items: flex-start;
  }

  .h_reg_name {
    margin-top: 0;
  }

  .h_reg_name .tfl__link-container a,
  .h_tel_wrap a {
    padding: 0;
  }

  .h_reg_change {
    padding: 0 0 14px 14px;
  }

  .h_tel {
    justify-content: flex-start;
    margin-top: 0;
  }

  .h_tel_wrap {
    align-items: flex-start;
  }

  .h_tel_add_time {
    padding: 14px 0 0 14px;
  }
}

.border--red {
  border: 2px solid #e62828 !important;
  outline: none;
}

#at_bitrix .pri_but {
  min-width: 150px;
}

img,
a img {
  -webkit-tap-highlight-color: transparent; /* убирает серую подсветку */
  outline: none;
}

.sitem-sibling {
  display: inline-block;
  border: 2px solid #f4c614;
  padding: 3px 4px;
  margin: 0 0 8px 0px;
}

.sitem-app {
  display: inline-block;
  border: 2px solid #0dc70d;
  padding: 3px 4px;
  margin: 0 0 8px 0px;
}

/* ── Логотип бренда на SEO-фильтр-странице (листинг производителя) ──
   ВАЖНО (по офиц. Яндексу): картинку сниппета робот выбирает из ВИДИМЫХ картинок
   страницы, находящихся в блоке основного контента. Поэтому логотип нигде не
   прячем (display:none), только меняем раскладку. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.page-head h1 { margin: 0; min-width: 0; }
.brand-logo { flex: 0 0 auto; margin: 0; }
.brand-logo img { height: 72px; width: auto; max-width: 200px; object-fit: contain; display: block; }
/* Мобильные: логотип остаётся В СТРОКЕ с h1 (справа), но мелкий — так он НЕ
   добавляет вертикали (вписывается в высоту заголовка), и остаётся видимым
   кандидатом в сниппет. h1 сжимается (min-width:0), логотип не переносится. */
@media (max-width: 767px) {
  .brand-logo img { height: 36px; max-width: 96px; }
}

/* End */
/* /local/templates/md2019/css/md-fonts.css?1783690075758 */
/* /local/templates/md2019/css/md-tokens.css?178869186510192 */
/* /local/templates/md2019/css/md-components.css?178904610153714 */
/* /local/templates/md2019/css/md-header.css?1788857384109682 */
/* /local/templates/md2019/css/md-search-suggest.css?178905823210693 */
/* /personal/cart/add2basket_include.css?17835416752855 */
/* /local/templates/md2019/css/zebra_tooltips.min.css?17835416741856 */
/* /local/templates/md2019/css/swiper-bundle.min.css?178354167413918 */
/* /local/templates/md2019/css/fancybox.css?178354167429440 */
/* /local/templates/md2019/css/tom-select.default.min.css?17835416749810 */
/* /local/components/my/region.picker/templates/.default/style.css?178905823216643 */
/* /local/templates/md2019/components/bitrix/system.auth.form/popup_2025/style.css?178354167433 */
/* /local/templates/md2019/components/bitrix/news.list/miniBlock-mob/style.css?17835416741066 */
/* /local/templates/md2019/template_styles.css?178904109649834 */