/* ==========================================================================
   AROLT v2 · L4 INFO · assets/v2/info.css
   Владелец: полоса L4 INFO (docs/DESIGN-V2.md, раздел 12; кто чем владеет - 9.4).
   Что здесь: о компании, новости и статьи, свои страницы, политика и оферта, справочник «Доставки», контакты, 404.
   Правила:
   - каждый селектор начинается с id своего вида: #view-about, #view-news, #view-article-questions, #view-news-article, #view-page, #view-privacy, #view-offer, #view-delivery, #view-contacts, #view-not-found;
   - токены, компоненты и утилиты - из assets/v2/foundation.css (--brand, --r, --shadow,
     .v2-card, .v2-band, .v2-lead-band, .v2-hero, .v2-pagehead, .v2-dot, .v2-pill, .v2-seg …),
     значения не дублировать числами;
   - файл подключён после foundation.css, поэтому при равной силе (1,1,0) побеждает он;
   - !important - только против !important первой версии (раздел 9.2);
   - нужна правка общего или чужого - запрос в …/v2/<полоса>/REQUESTS.md, а не правка здесь.

   Вид v2 собран поверх классов первой версии (таблица 10.5). Правки 08.10 (docs/V2-EDITS-2026-10-08.md)
   поменяли разметку «Новостей» и статей (20, 22-25), подпись видео (35), логотипы клиентов (36) и
   светлые секции .v2-alt на «О компании», в «Новостях» и статьях (37).
   Элементы с атрибутом hidden (фото новости, дата, анонс, реквизиты, второй телефон) здесь
   не получают display - иначе правило перебило бы hidden.
   ========================================================================== */

/* ==========================================================================
   0. Общие детали полосы
   ========================================================================== */
/* Заголовок внутри карточки (разделы доставки, контакты, реквизиты) и заголовок раздела документа */
:is(#view-about, #view-news, #view-article-questions, #view-news-article, #view-page, #view-privacy,
    #view-offer, #view-delivery, #view-contacts, #view-not-found) {
  --info-card-title: clamp(26px, 2.4vw, 34px);
  --info-doc-title: clamp(20px, 1.6vw, 22px);
  --info-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Надзаголовки: на светлом - зелёный (первая версия красила их в белый на тёмных первых экранах) */
:is(#view-about, #view-news, #view-page, #view-privacy, #view-offer, #view-delivery, #view-contacts, #view-not-found)
  :is(.about-hero, .legal-hero, .news-hero, .contacts-hero, .about-section__head, .contacts-direct, .contacts-form, .contacts-requisites) .eyebrow {
  margin: 0 0 12px; color: var(--brand);
}

/* Первый экран без фото (.v2-pagehead): политика, оферта, своя страница, 404, доставка */
:is(#view-privacy, #view-offer, #view-page, #view-not-found, #view-delivery) .legal-hero {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0 0 clamp(16px, 2.4vw, 32px); padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); overflow: visible;
}
:is(#view-privacy, #view-offer, #view-page, #view-not-found, #view-delivery) .legal-hero h1 {
  margin: 0; color: var(--ink);
  font-size: var(--fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em;
}
:is(#view-privacy, #view-offer, #view-page, #view-not-found, #view-delivery) .legal-hero > p {
  margin: 16px 0 0; color: var(--muted);
  font-size: var(--fs-lead); line-height: 1.5;
}
:is(#view-privacy, #view-offer, #view-page, #view-not-found, #view-delivery) .legal-main { gap: var(--gap); }

/* ==========================================================================
   1. О компании (#view-about)
   ========================================================================== */
#view-about .about-page, #view-about .about-main { display: block; }
#view-about .about-main > * + * { margin-top: var(--block); }
/* Цифры, «Что закрываем» и клиенты - на светлой секции (.v2-alt, правка 37). Её фон выходит вверх на
   --alt-y, поэтому от первого экрана до цифр отступ больше --alt-y */
#view-about .about-main > .about-hero + .about-section { margin-top: calc(var(--alt-y) + clamp(24px, 3vw, 40px)); }
#view-about .about-section { display: block; }

/* 1.1 Первый экран (.v2-hero): текст слева на холсте, фото в карточке справа; факты - строкой
   под кнопками, через волосяную линию (они в той же колонке текста, порядок разметки не менялся) */
#view-about .about-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  column-gap: clamp(32px, 4.4vw, 72px);
  min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); overflow: visible;
}
#view-about .about-hero::after { content: none; }
#view-about .about-hero__content { display: flex; flex-direction: column; align-items: flex-start; }
#view-about .about-hero h1 {
  margin: 0; color: var(--ink);
  font-size: var(--fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em;
}
#view-about .about-hero__content > p {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  color: var(--muted); font-size: var(--fs-lead); line-height: 1.5;
}
#view-about .about-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 36px); }
#view-about .about-visual--photo {
  display: block; width: 100%; max-width: none; height: clamp(360px, 38vw, 548px); max-height: none; min-height: 0;
  aspect-ratio: auto; margin: 0; overflow: hidden;
  border: 0; border-radius: var(--r); background: var(--field);
}
#view-about .about-visual--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 57%; border-radius: 0; }
#view-about .about-hero__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  align-self: stretch; margin-top: clamp(32px, 3.6vw, 48px); padding: 0; overflow: visible;
  border: 0; border-radius: 0; background: none;
}
#view-about .about-hero__meta > div {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0; padding: 18px 0 0;
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none;
}
#view-about .about-hero__meta strong { margin: 0; color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
#view-about .about-hero__meta span { color: var(--muted); font-size: 14px; line-height: 1.4; }

/* 1.2 Цифры (.v2-stats в ряд, первая - акцентная) */
#view-about .about-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
#view-about .about-kpi {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: clamp(150px, 13vw, 188px); padding: clamp(20px, 2vw, 28px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-about .about-kpi strong { margin: 0; white-space: nowrap; color: var(--ink); font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
#view-about .about-kpi span { color: var(--muted); font-size: 15px; line-height: 1.4; }
#view-about .about-kpi:first-child { background: var(--brand); box-shadow: none; }
#view-about .about-kpi:first-child strong { color: #fff; }
#view-about .about-kpi:first-child span { color: rgb(255 255 255 / .8); }

/* 1.3 История: тёмная карточка + белая карточка с текстом */
#view-about .about-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; }
#view-about .about-story__lead {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(28px, 3.6vw, 48px);
  border-radius: var(--r); background: var(--band); color: #fff;
}
#view-about .about-story__lead .eyebrow { margin: 0 0 12px; color: var(--brand-on-dark); }
#view-about .about-story__lead h2 { margin: 0; color: #fff; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; }
#view-about .about-story__lead p { margin: 20px 0 0; color: var(--on-band); font-size: 17px; line-height: 1.55; }
#view-about .about-copy {
  display: grid; align-content: start; gap: 16px;
  padding: clamp(28px, 3.6vw, 48px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  color: var(--ink-2); font-size: 16px; line-height: 1.7;
}
#view-about .about-copy p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }

/* 1.4 Заголовки секций (.v2-head): надзаголовок и H2 слева, лид справа */
#view-about .about-section__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end;
  gap: 16px clamp(32px, 5vw, 80px); margin-bottom: var(--head-gap);
}
#view-about .about-section__head > div { display: flex; flex-direction: column; align-items: flex-start; }
#view-about .about-section__head h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; }
#view-about .about-section__head > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }

/* 1.5 Производство: фото-плитки (.v2-photos), крупное первое фото, подписи на градиенте */
#view-about .about-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(180px, 18.5vw, 270px));
  grid-auto-rows: clamp(180px, 18.5vw, 270px);
  grid-template-areas: "a a b c d" "a a e f g";
  gap: var(--gap);
}
#view-about .about-gallery__item { margin: 0; border: 0; border-radius: var(--r); background: var(--field); isolation: isolate; }
#view-about .about-gallery__item:nth-child(1) { grid-area: a; }
#view-about .about-gallery__item:nth-child(2) { grid-area: b; }
#view-about .about-gallery__item:nth-child(3) { grid-area: c; }
#view-about .about-gallery__item:nth-child(4) { grid-area: d; }
#view-about .about-gallery__item:nth-child(5) { grid-area: e; }
#view-about .about-gallery__item:nth-child(6) { grid-area: f; }
#view-about .about-gallery__item:nth-child(7) { grid-area: g; }
#view-about .about-gallery__item img,
#view-about .about-gallery__item video { border-radius: 0; filter: saturate(.9); transition: transform .6s var(--ease); }
/* Видео при воспроизведении рисуется отдельным слоем и не обрезается скруглением родителя - скругляем само видео */
#view-about .about-gallery__item video { border-radius: var(--r); }
#view-about .about-gallery__item:hover img { transform: scale(1.03); }
#view-about .about-gallery__item figcaption {
  z-index: 1; padding: 56px 16px 14px;
  border-radius: 0; background: linear-gradient(180deg, rgb(22 30 23 / 0), rgb(22 30 23 / .62));
  color: #fff; font-size: 14px; font-weight: 400; line-height: 1.35;
}
/* Кнопка видео - белый круг (.v2-circ), внутри контурный треугольник */
#view-about .about-gallery__play {
  z-index: 2; width: 56px; height: 56px;
  border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
#view-about .about-gallery__play svg { width: 30px; height: 30px; stroke-width: 1.6; }
#view-about .about-gallery__play svg circle { display: none; }
#view-about .about-gallery__item--video:hover .about-gallery__play { background: var(--brand); color: #fff; }
#view-about .about-gallery__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Во время показа кнопка прозрачна (базовый стиль), но с клавиатуры видна - как у МВО - и рисует паузу */
#view-about .about-gallery__item--video.is-playing .about-gallery__play:focus-visible { opacity: 1; }
#view-about .about-gallery__play .about-gallery__icon-pause,
#view-about .about-gallery__item--video.is-playing .about-gallery__play .about-gallery__icon-play { display: none; }
#view-about .about-gallery__item--video.is-playing .about-gallery__play .about-gallery__icon-pause { display: inline; }

/* 1.6 Что закрываем и как работаем: белые карточки, круг-иконка / номер-бейдж */
#view-about .about-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
#view-about .about-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
#view-about .about-capability,
#view-about .about-step {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 0; padding: 24px 24px 28px;
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-about .about-capability__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; margin: 0;
  border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand);
}
#view-about .about-capability__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
#view-about .about-step::before {
  display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-hover);
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
#view-about .about-capability h3,
#view-about .about-step h3 { margin: 32px 0 0; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
#view-about .about-capability p,
#view-about .about-step p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* 1.7 Призыв (.v2-lead-band): бледно-зелёная полоса с водяным знаком AROLT */
#view-about .about-contact-band {
  position: relative; isolation: isolate; overflow: hidden;
  /* текст и кнопки столбцом слева, справа - место под водяной знак (foundation --lead-pad-end) */
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 28px;
  padding: var(--lead-pad-y) var(--lead-pad-end) var(--lead-pad-y) var(--band-pad);
  border: 0; border-radius: var(--r); background: var(--brand-tint); color: var(--ink);
}
#view-about .about-contact-band::after {
  /* Геометрия водяного знака - общая для лид-полос (foundation, --mark-*): знак целиком в полосе */
  content: ""; position: absolute; z-index: -1; right: var(--mark-right); top: 50%; bottom: auto;
  width: auto; height: var(--mark-size); aspect-ratio: 1; transform: translateY(-50%); background: var(--brand);
  -webkit-mask: url("../logo-mark.svg") center / contain no-repeat;
  mask: url("../logo-mark.svg") center / contain no-repeat;
  opacity: .07; pointer-events: none;
}
#view-about .about-contact-band h2 { margin: 0; color: var(--ink); font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#view-about .about-contact-band p { margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
#view-about .about-contact-band__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
/* Телефон на бледно-зелёном - белая капсула, как поля лид-формы кита */
#view-about .about-contact-band .btn--ghost { background: var(--surface); border-color: var(--surface); color: var(--ink); }
#view-about .about-contact-band .btn--ghost:hover { background: var(--field); border-color: var(--field); }

/* 1.8 Клиенты: одна белая карточка-стена логотипов (как .sf-logos), логотипы серым, цвет при наведении.
   Сетка - flex с переносом: 19 логотипов никогда не делятся на ряды поровну, неполный последний ряд
   встаёт по центру, а не оставляет пустые ячейки справа. Колонок --lg-cols: 5 / 4 (≤ 1240) /
   3 (≤ 760) / 2 (≤ 420: одно слово «АВИАПРОМСТАЛЬ» шире трети экрана 320-414) */
#view-about .client-grid {
  --lg-cols: 5; --lg-gap-x: 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px var(--lg-gap-x);
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-about .client-logo-card {
  flex: 0 0 calc((100% - (var(--lg-cols) - 1) * var(--lg-gap-x)) / var(--lg-cols)); min-width: 0;
  display: grid; grid-template-rows: 64px auto; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 8px;
  min-height: 0; margin: 0; padding: 14px 8px;
  border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
}
#view-about .client-logo-card:hover { transform: none; box-shadow: none; }
/* Окно знака - контейнер: знак не бывает шире 92% ячейки (cqi ниже) */
#view-about .client-logo-card__mark {
  display: grid; place-items: center; width: 100%; height: 64px; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none; container-type: inline-size;
}
/* Правка 36 (08.10): в покое все знаки серые (Kaspi тоже - «цветным» он оставался после касания:
   на телефоне :hover залипал). Наведение мышью - знак плавно в цвет, чуть поднимается и растёт;
   на сенсорных экранах наведения нет; при prefers-reduced-motion - только цвет, без движения.
   Размер - по самому знаку, как в ките (design-kit/styles/all.css §5): файлы 180×100 с разными
   полями; для каждого известен прямоугольник знака --lg-t/-r/-b/-l (пиксели файла) и целевая
   высота знака --lg-h (вытянутые 16-29, квадратные 36-54, тяжёлые чуть меньше). Отрицательные поля
   срезают пустоту файла, поэтому ячейка центрирует сам знак. --lg-s - общий масштаб окна */
#view-about .client-logo-card img {
  --lg-ch: min(
    calc(var(--lg-h, 28) * var(--lg-s, 1.1) * 1px),
    calc(92cqi * (var(--lg-b, 100) - var(--lg-t, 0)) / (var(--lg-r, 180) - var(--lg-l, 0)))
  );
  --lg-H: calc(var(--lg-ch) * 100 / (var(--lg-b, 100) - var(--lg-t, 0)));
  width: auto; max-width: none; height: var(--lg-H); max-height: none; object-fit: fill;
  margin:
    calc(var(--lg-H) * var(--lg-t, 0) / -100)
    calc(var(--lg-H) * (180 - var(--lg-r, 180)) / -100)
    calc(var(--lg-H) * (100 - var(--lg-b, 100)) / -100)
    calc(var(--lg-H) * var(--lg-l, 0) / -100);
  border-radius: 0; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .7;
  transform: translateY(0) scale(1);
  transition: filter 240ms var(--ease), opacity 240ms var(--ease), transform 240ms var(--ease);
}
/* Прямоугольники знаков: восемь - из кита, остальные сняты с файлов тем же способом.
   ВЕК, Dent Lux и Home art - файлы *-mark.png: знак цветом фирменного фона на прозрачном
   (исходники - белый знак на сплошной плашке, в сером они были серыми прямоугольниками) */
#view-about .client-logo-card img[src*="kaspi-bank"]       { --lg-h: 31; --lg-t: 15; --lg-b: 85; --lg-l: 0;  --lg-r: 180; }
#view-about .client-logo-card img[src*="bi-group"]         { --lg-h: 27; --lg-t: 27; --lg-b: 73; --lg-l: 0;  --lg-r: 180; }
#view-about .client-logo-card img[src*="jusan-bank"]       { --lg-h: 25; --lg-t: 28; --lg-b: 72; --lg-l: 0;  --lg-r: 180; }
#view-about .client-logo-card img[src*="hyundai-auto"]     { --lg-h: 16; --lg-t: 38; --lg-b: 61; --lg-l: 7;  --lg-r: 172; }
#view-about .client-logo-card img[src*="eurasia"]          { --lg-h: 29; --lg-t: 26; --lg-b: 74; --lg-l: 0;  --lg-r: 180; }
#view-about .client-logo-card img[src*="baron-food"]       { --lg-h: 25; --lg-t: 25; --lg-b: 75; --lg-l: 0;  --lg-r: 180; }
#view-about .client-logo-card img[src*="azimut-solution"]  { --lg-h: 50; --lg-t: 0;  --lg-b: 99; --lg-l: 13; --lg-r: 167; }
#view-about .client-logo-card img[src*="maf-kazakhstan"]   { --lg-h: 54; --lg-t: 2;  --lg-b: 99; --lg-l: 42; --lg-r: 140; }
#view-about .client-logo-card img[src*="aviapromstal"]     { --lg-h: 21; --lg-t: 36; --lg-b: 64; --lg-l: 0;  --lg-r: 180; }
#view-about .client-logo-card img[src*="silk-way-fashion"] { --lg-h: 21; --lg-t: 36; --lg-b: 64; --lg-l: 0;  --lg-r: 176; }
#view-about .client-logo-card img[src*="kazakh-altyn"]     { --lg-h: 25; --lg-t: 29; --lg-b: 69; --lg-l: 3;  --lg-r: 180; }
#view-about .client-logo-card img[src*="novaya-azs"]       { --lg-h: 25; --lg-t: 34; --lg-b: 73; --lg-l: 2;  --lg-r: 178; }
#view-about .client-logo-card img[src*="home-mart"]        { --lg-h: 25; --lg-t: 32; --lg-b: 62; --lg-l: 24; --lg-r: 154; }
#view-about .client-logo-card img[src*="globalstroy"]      { --lg-h: 29; --lg-t: 18; --lg-b: 77; --lg-l: 6;  --lg-r: 175; }
#view-about .client-logo-card img[src*="vek"]              { --lg-h: 37; --lg-t: 28; --lg-b: 78; --lg-l: 38; --lg-r: 137; }
#view-about .client-logo-card img[src*="dent-lux"]         { --lg-h: 38; --lg-t: 19; --lg-b: 81; --lg-l: 35; --lg-r: 145; }
#view-about .client-logo-card img[src*="family-park"]      { --lg-h: 42; --lg-t: 8;  --lg-b: 100; --lg-l: 8; --lg-r: 171; }
#view-about .client-logo-card img[src*="foodmaster"]       { --lg-h: 46; --lg-t: 0;  --lg-b: 100; --lg-l: 32; --lg-r: 149; }
#view-about .client-logo-card img[src*="bazis-a"]          { --lg-h: 46; --lg-t: 0;  --lg-b: 100; --lg-l: 16; --lg-r: 162; }
#view-about .client-logo-card figcaption {
  margin: 0; padding: 0; border-radius: 0; background: none;
  color: var(--muted); font-size: 13px; line-height: 1.3; text-align: center; overflow-wrap: anywhere;
  transition: color 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  #view-about .client-logo-card:hover img { filter: none; opacity: 1; transform: translateY(-3px) scale(1.04); }
  #view-about .client-logo-card:hover figcaption { color: var(--ink); }
}

/* ==========================================================================
   2. Новости (#view-news)
   Правки 08.10: без карточек-счётчиков (22); заголовок страницы над сеткой, поэтому сайдбар
   начинается на уровне первой карточки (23); карточка целиком - ссылка на материал (24): ссылка -
   заголовок, её ::after растянут на всю карточку, фокус с клавиатуры рисуется на карточке; дата одна -
   в мета-строке (25). Список и сайдбар - на светлой секции .v2-alt (правка 37).
   ========================================================================== */
/* Первый экран без фото (.v2-pagehead). Отступ снизу больше --alt-y: фон светлой секции
   выходит вверх на --alt-y и не должен заходить под текст */
#view-news .news-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  margin: 0 0 calc(var(--alt-y) + clamp(24px, 3vw, 40px)); padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); overflow: visible;
}
#view-news .news-hero h1 { margin: 0; color: var(--ink); font-size: var(--fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; }
#view-news .news-hero p { margin: 16px 0 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }

#view-news .news-page { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap) clamp(24px, 3vw, 48px); align-items: start; }
#view-news .news-main { display: grid; gap: var(--gap); }

/* Карточки: белые, отступ 8, фото в окне 12 */
#view-news .news-list { gap: var(--gap); }
#view-news .news-article {
  position: relative;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0;
  padding: var(--inset);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  transition: transform var(--speed) var(--ease);
}
/* Окно фото фиксированное: высоту карточки задаёт текст (не меньше 200), а не пропорции обложки -
   квадратная или вертикальная обложка из админки не вытягивает карточку. На телефоне - окно 16:10 */
#view-news .news-article__media {
  position: relative; align-self: stretch; aspect-ratio: auto; min-height: 200px;
  border: 0; border-radius: var(--r-in); background: var(--field);
}
#view-news .news-article__media > :is(img, .news-article__placeholder) { position: absolute; inset: 0; width: 100%; height: 100%; }
/* multiply: белый фон снимков-рендеров ложится на тон окна --field, окно фото читается и у них */
#view-news .news-article__media img { aspect-ratio: auto; border-radius: 0; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
#view-news .news-article__media > img { object-fit: cover; }
#view-news .news-article__body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  padding: 18px 20px 18px 28px;
}
#view-news .news-article h2 {
  margin: 0; color: var(--ink); font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em;
  transition: color var(--speed) var(--ease);
}
#view-news .news-article p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
#view-news .news-article__link { color: inherit; text-decoration: none; }
#view-news .news-article__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
#view-news .news-article__link:focus-visible { outline: none; }
#view-news .news-article:has(.news-article__link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
/* «Читать статью» - подпись-стрелка (сама ссылка - заголовок; вся карточка кликабельна) */
#view-news .news-article__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3;
}
#view-news .news-article__more::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--info-arrow) center / contain no-repeat; mask: var(--info-arrow) center / contain no-repeat;
  transition: transform var(--speed) var(--ease);
}
#view-news .news-article__placeholder { background: var(--field); }
#view-news .news-article__media .news-article__placeholder img { width: 32%; opacity: .25; mix-blend-mode: multiply; }
/* Наведение - только мышью: на телефоне касание оставляло бы карточку «поднятой» */
@media (hover: hover) and (pointer: fine) {
  #view-news .news-article:has(.news-article__link):hover { transform: translateY(-2px); }
  #view-news .news-article:has(.news-article__link):hover h2 { color: var(--brand-hover); }
  #view-news .news-article:has(.news-article__link):hover .news-article__media img { transform: scale(1.03); }
  #view-news .news-article:has(.news-article__link):hover .news-article__more::after { transform: translateX(3px); }
}

/* Архив порциями по 10 и «Показать ещё» - как пагинация каталога */
#view-news .news-article[hidden], #view-news .news-more[hidden] { display: none; }
#view-news .news-more { flex-direction: column; gap: 14px; padding: clamp(8px, 1.2vw, 16px) 0 0; }
#view-news .news-more [data-news-shown] { margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; }

/* Мета-строка карточки и статьи: тег - бейдж, дата - мелко серым */
:is(#view-news, #view-article-questions, #view-news-article) .news-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.3;
}
:is(#view-news, #view-article-questions, #view-news-article) .news-article__tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-hover);
  font-size: 13px; font-weight: 500;
}

/* Сайдбар: разделы и архив - фильтры списка (кнопки с числом материалов), липкий */
#view-news .news-sidebar { position: sticky; top: calc(var(--hd-h, 80px) + 24px); display: grid; gap: var(--gap); }
#view-news .news-side-card { padding: 20px 16px 16px; border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
#view-news .news-side-card h3 { margin: 0 0 10px 12px; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
#view-news .news-filter { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#view-news .news-filter > li { margin: 0; padding: 0; border: 0; }
#view-news .news-filter__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 14px 0 12px;
  border: 0; border-radius: var(--r-pill); background: none;
  color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 400; line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#view-news .news-filter__count { flex: none; color: var(--hint); font-size: 13px; font-variant-numeric: tabular-nums; }
#view-news .news-filter__item:hover { background: var(--field); color: var(--ink); }
#view-news .news-filter__item[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-hover); font-weight: 500; }
#view-news .news-filter__item[aria-pressed="true"] .news-filter__count { color: var(--brand-hover); }
#view-news .news-filter__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   3. Статьи и новость из админки (#view-article-questions, #view-news-article)
   Правка 25 (08.10): первый блок - слева рубрика и дата, заголовок и вводный текст, справа картинка;
   сайдбара нет - рубрика, дата, источник и ссылки лежат одной строкой под первым блоком; ниже текст
   на светлой секции (.v2-alt). Нет обложки - текст первого блока на всю ширину (.article-hero--text).
   ========================================================================== */
:is(#view-article-questions, #view-news-article) .article-page { display: block; }
:is(#view-article-questions, #view-news-article) .article-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  column-gap: clamp(32px, 4.4vw, 72px);
  margin: 0; padding: 0; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
:is(#view-article-questions, #view-news-article) .article-hero--text { grid-template-columns: minmax(0, 1fr); }
:is(#view-article-questions, #view-news-article) .article-hero__body { padding: 0; }
:is(#view-article-questions, #view-news-article) .article-hero h1 {
  margin: 16px 0 0; color: var(--ink);
  font-size: var(--fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em;
}
:is(#view-article-questions, #view-news-article) .article-hero__body > p {
  margin: clamp(16px, 1.8vw, 24px) 0 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5;
}
:is(#view-article-questions, #view-news-article) .article-hero__media {
  aspect-ratio: 4 / 3; margin: 0; overflow: hidden;
  border: 0; border-radius: var(--r); background: var(--field);
}
:is(#view-article-questions, #view-news-article) .article-hero__media img { border-radius: 0; filter: saturate(.9); mix-blend-mode: multiply; }

/* Строка о материале: рубрика, дата, источник слева; «Все новости» и «Каталог» справа */
:is(#view-article-questions, #view-news-article) .article-facts {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px;
  margin-top: clamp(32px, 3.6vw, 48px); padding: 18px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
:is(#view-article-questions, #view-news-article) .article-facts__list { display: flex; flex-wrap: wrap; gap: 12px clamp(28px, 3.6vw, 56px); margin: 0; }
:is(#view-article-questions, #view-news-article) .article-facts__list > div { display: flex; flex-direction: column; gap: 4px; }
:is(#view-article-questions, #view-news-article) .article-facts__list > div[hidden] { display: none; }
:is(#view-article-questions, #view-news-article) .article-facts dt { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.3; }
:is(#view-article-questions, #view-news-article) .article-facts dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.35; }
:is(#view-article-questions, #view-news-article) .article-facts .legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
:is(#view-article-questions, #view-news-article) .legal-nav a {
  width: auto; min-height: var(--btn-h-sm); padding: 0 16px 0 18px; gap: 10px;
  border: 0; border-radius: var(--r-pill); background: var(--field); color: var(--ink);
  font-size: 15px; font-weight: 400; line-height: 1.2;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
:is(#view-article-questions, #view-news-article) .legal-nav a::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--info-arrow) center / contain no-repeat; mask: var(--info-arrow) center / contain no-repeat;
  transition: transform var(--speed) var(--ease);
}
:is(#view-article-questions, #view-news-article) .legal-nav a:hover { border: 0; background: var(--brand-tint); color: var(--brand-hover); }
:is(#view-article-questions, #view-news-article) .legal-nav a:hover::after { transform: translateX(3px); }

/* Текст статьи - белые карточки на светлой секции с типографикой длинного текста (5.17).
   Отступ сверху - --block: фон секции выходит вверх на --alt-y и не заходит под строку о материале */
:is(#view-article-questions, #view-news-article) .article-content { display: grid; gap: var(--gap); margin-top: var(--block); }
:is(#view-article-questions, #view-news-article) .article-block {
  padding: clamp(24px, 4vw, 56px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  color: var(--ink-2); font-size: 17px; line-height: 1.75;
}
:is(#view-article-questions, #view-news-article) .article-block h2 {
  margin: 0 0 12px; color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em;
}
:is(#view-article-questions, #view-news-article) .article-block.cms-content > * + :is(h2, h3) { margin-top: 36px; }
:is(#view-article-questions, #view-news-article) .article-block :is(p, li) { color: var(--ink-2); font-size: 17px; line-height: 1.75; }
:is(#view-article-questions, #view-news-article) .article-block p + p { margin-top: 18px; }
:is(#view-article-questions, #view-news-article) .article-block :is(ul, ol) { gap: 8px; padding-left: 22px; }
:is(#view-article-questions, #view-news-article) .article-block li::marker { color: var(--brand); }
/* Длинный текст из админки: картинки, подписи, цитаты, таблицы и видео не выходят за карточку */
#view-news-article .article-block :is(img, video) { display: block; max-width: 100%; height: auto; margin: 24px 0; border-radius: var(--r-in); }
#view-news-article .article-block figure { margin: 24px 0; }
#view-news-article .article-block figure > :is(img, video) { margin: 0; }
#view-news-article .article-block figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
#view-news-article .article-block iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 24px 0; border: 0; border-radius: var(--r-in); }
#view-news-article .article-block table { display: block; max-width: 100%; overflow-x: auto; margin: 24px 0; border-collapse: collapse; }
#view-news-article .article-block blockquote { margin: 24px 0; padding: 18px 22px; border: 0; border-radius: var(--r-in); background: var(--field); color: var(--ink-2); }
#view-news-article .article-block blockquote > :first-child { margin-top: 0; }
#view-news-article .article-block a { overflow-wrap: anywhere; }

/* ==========================================================================
   4. Документы: политика, оферта, своя страница (#view-privacy, #view-offer, #view-page)
   Раздел документа - в две колонки: заголовок слева, текст справа (≤ 1040 - одна колонка).
   Любой h2 встаёт в левую колонку в строку со своим первым абзацем; остальное - справа.
   ========================================================================== */
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) {
  padding: clamp(24px, 4vw, 56px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-privacy .legal-document__part,
#view-offer .legal-section,
#view-page .legal-document {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 0;
  align-items: start;
}
#view-offer .legal-section > [data-cms-html] { display: contents; }
#view-privacy .legal-document__part > h2,
#view-offer .legal-section > h2,
#view-offer .legal-section > [data-cms-html] > h2,
#view-page .legal-document > h2 {
  grid-column: 1; margin: 0; padding: 0; border: 0;
  color: var(--ink); font-size: var(--info-doc-title); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em;
}
#view-privacy .legal-document__part > :not(h2),
#view-offer .legal-section > :not(h2, [data-cms-html]),
#view-offer .legal-section > [data-cms-html] > :not(h2),
#view-page .legal-document > :not(h2) { grid-column: 2; }
/* Следующий раздел своей страницы: отступ и у заголовка, и у абзаца в его строке */
#view-page .legal-document > h2:not(:first-child),
#view-page .legal-document > h2:not(:first-child) + * { margin-top: 40px; }
/* Политика - как оферта: каждый раздел своей карточкой (5.17), документ - стопка карточек */
#view-privacy .legal-document { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); padding: 0; border-radius: 0; background: none; box-shadow: none; }
#view-privacy .legal-document__part {
  margin: 0; padding: clamp(24px, 4vw, 56px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}

:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) :is(p, li) {
  color: var(--ink-2); font-size: 16px; line-height: 1.7;
}
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) p { margin: 0; }
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) p + p { margin-top: 14px; }
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) :is(ul, ol) { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) li::marker { color: var(--brand); }
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) :is(p, ul, ol) + :is(p, ul, ol, h3, .legal-note) { margin-top: 14px; }
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) h3 {
  margin: 24px 0 8px; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
}
/* Карточки раздела 3 оферты - вложенные на --field, радиус 12 */
#view-offer .legal-card-grid { gap: 12px; }
#view-offer .legal-card { padding: 20px 22px; border: 0; border-radius: var(--r-in); background: var(--field); }
#view-offer .legal-card h3 { margin: 0 0 8px; font-size: 17px; }
#view-offer .legal-card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
#view-offer .legal-note {
  margin-top: 20px; padding: 14px 18px;
  border: 0; border-radius: var(--r-in); background: var(--brand-tint); color: var(--brand-hover);
  font-size: 15px; line-height: 1.55;
}

/* ==========================================================================
   4a. Текст из админки не раздвигает страницу (новость, своя страница, политика, оферта)
   Колонки .article-main, .article-content и .legal-main - сетки с неявной колонкой auto, она росла
   до ширины самого длинного слова или таблицы, и на телефоне правая часть страницы обрезалась.
   Колонка - ровно ширина контейнера; длинные слова и ссылки переносятся (кроме ячеек таблиц:
   таблица листается вбок внутри карточки)
   ========================================================================== */
:is(#view-article-questions, #view-news-article) :is(.article-main, .article-content),
:is(#view-privacy, #view-offer, #view-page) .legal-main { grid-template-columns: minmax(0, 1fr); }
:is(#view-article-questions, #view-news-article) :is(.article-hero h1, .article-hero__body > p, .article-facts dd),
:is(#view-news-article, #view-article-questions) .article-block :is(p, li, h2, h3, h4, blockquote, figcaption),
:is(#view-privacy, #view-offer, #view-page) .legal-hero :is(h1, p),
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) :is(p, li, h2, h3, h4, blockquote, figcaption, .legal-note) {
  overflow-wrap: anywhere;
}
:is(#view-privacy, #view-offer, #view-page) :is(.legal-document, .legal-section) table {
  display: block; overflow-x: auto; margin: 24px 0; border-collapse: collapse;
}
:is(#view-privacy, #view-offer) :is(.legal-document, .legal-section) :is(th, td) {
  padding: 12px 8px; border: 0; border-bottom: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 15px; line-height: 1.5; text-align: left; vertical-align: top;
}
:is(#view-privacy, #view-offer) :is(.legal-document, .legal-section) th { color: var(--muted); font-weight: 400; }
:is(#view-privacy, #view-offer) :is(.legal-document, .legal-section) img { display: block; max-width: 100%; height: auto; border-radius: var(--r-in); }

/* ==========================================================================
   5. Страница 404 (#view-not-found)
   ========================================================================== */
/* Адрес в тексте - плашка --field: на белой странице белая плашка пропадала, а её поля читались
   как двойные пробелы */
#view-not-found .legal-hero code {
  padding: 1px 8px; border-radius: var(--r-check); background: var(--field); color: var(--ink);
  font-family: var(--font-mono); font-size: .88em; font-weight: 500; word-break: break-all;
}
/* Кнопки основная + вторичные в ряд, без подложки */
#view-not-found .not-found-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* ==========================================================================
   6. Доставка (#view-delivery)
   ========================================================================== */
#view-delivery .legal-main { gap: var(--gap); }

/* 6.1 Коротко о доставке: тёмная полоса шириной контента (.v2-band) с четырьмя белыми
   карточками, как «Доставка» в ките. Края полосы - на линиях шапки, внутри отступ --band-pad.
   На телефоне (≤ 760) полосы нет - карточки на холсте, см. блок @media ниже. */
#view-delivery .dlv-brief {
  margin: clamp(8px, 1.6vw, 24px) 0 calc(var(--block) - var(--gap));
  padding: clamp(32px, 4.4vw, 64px) var(--band-pad);
  border-radius: var(--r); background: var(--band); color: #fff;
}
#view-delivery .dlv-brief__facts {
  width: auto; margin-inline: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
#view-delivery .dlv-brief__fact,
#view-delivery .dlv-brief__fact:hover {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 24px 28px;
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: none; color: var(--ink);
}
#view-delivery .dlv-brief__fact::before {
  content: ""; flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--brand-tint) var(--dlv-ic) center / 20px 20px no-repeat;
}
#view-delivery .dlv-brief__fact:nth-child(1) { --dlv-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6033' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
#view-delivery .dlv-brief__fact:nth-child(2) { --dlv-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6033' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-10.8a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.2' r='2.3'/%3E%3C/svg%3E"); }
#view-delivery .dlv-brief__fact:nth-child(3) { --dlv-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6033' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='2'/%3E%3Cpath d='M8.5 17.5h7a3 3 0 0 0 0-6h-7a3 3 0 0 1 0-6h7'/%3E%3C/svg%3E"); }
#view-delivery .dlv-brief__fact:nth-child(4) { --dlv-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6033' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.8L12 4l8 3.8v8.4L12 20l-8-3.8z'/%3E%3Cpath d='M4 7.8l8 3.9 8-3.9M12 11.7V20'/%3E%3C/svg%3E"); }
#view-delivery .dlv-brief__label { margin-top: 32px; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: 0; }
#view-delivery .dlv-brief__value { margin-top: 6px; color: var(--ink); font-size: clamp(24px, 2vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
#view-delivery .dlv-brief__note { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* 6.2 Разделы справочника - секции страницы, а не две белые плиты подряд (правка 37):
   «Доставка по Алматы» на белом холсте, «Отправка в другие города» - светлая секция .v2-alt
   (класс в разметке; фон во всю ширину окна выходит на --alt-y в отступы). Между секциями
   и полосами - один шаг --block. Шорткат border здесь не писать: он сбросил бы border-image. */
#view-delivery #dlv-s1,
#view-delivery .dlv-doc {
  padding: 0;
  border-width: 0; border-radius: 0; background: none; box-shadow: none;
}
#view-delivery .dlv-doc { margin-top: calc(var(--block) - var(--gap)); }
#view-delivery #dlv-s1 > h2,
#view-delivery .dlv-doc .dlv-ch__title {
  margin: 0; color: var(--ink); font-size: var(--fs-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em;
}
#view-delivery .legal-section .dlv-lead,
#view-delivery .dlv-doc .dlv-ch__lead {
  margin: 12px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5;
}
#view-delivery .dlv-zones { gap: 12px; margin-top: clamp(24px, 2.6vw, 32px); }

/* «Сумма для вашего адреса» - заметка (.v2-note--tint) с кругом-иконкой; кнопки «Оформить заявку»
   в ней больше нет (правка 20 от 08.10) */
#view-delivery .dlv-order {
  grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 20px 20px 20px 24px;
  border: 0; border-radius: var(--r-in); background: var(--brand-tint);
}
#view-delivery .dlv-order__icon { width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--brand); }
#view-delivery .dlv-order__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
#view-delivery .legal-section .dlv-order__title { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
#view-delivery .legal-section .dlv-order__desc { margin-top: 6px; color: var(--brand-hover); font-size: 15px; line-height: 1.5; }

/* Как считаем: вложенные карточки на --field */
#view-delivery .dlv-zone-list { gap: 12px; }
#view-delivery .dlv-zone,
#view-delivery .dlv-zone:hover { padding: 20px 22px 22px; border: 0; border-radius: var(--r-in); background: var(--field); box-shadow: none; }
#view-delivery .dlv-zone__row { gap: 6px 12px; }
#view-delivery .legal-section .dlv-zone__title { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; }
#view-delivery .legal-section .dlv-zone__price { color: var(--brand); font-size: 14px; font-weight: 500; }
#view-delivery .legal-section .dlv-zone__desc { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
#view-delivery .legal-section .dlv-zone__hint { margin-top: 10px; color: var(--hint); font-size: 13px; line-height: 1.4; }

/* Сноска «Оплата и отгрузка»: строка под волосяной линией, без боковой черты */
#view-delivery .dlv-note--wide { margin-top: clamp(24px, 2.6vw, 32px); padding: 20px 0 0; border: 0; border-top: 1px solid var(--hairline); }
#view-delivery .dlv-note__label { gap: 8px; color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
#view-delivery .dlv-note__label svg { width: 18px; height: 18px; stroke-width: 1.6; }
#view-delivery .legal-section .dlv-note p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* 6.3 Отправка в другие города: строки «термин - пояснение» с контурной иконкой */
#view-delivery .dlv-ch { display: block; padding: 0; border: 0; }
#view-delivery .dlv-ch__side { margin-bottom: clamp(20px, 2.4vw, 28px); }
#view-delivery .dlv-dl__row { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 8px clamp(24px, 3vw, 48px); padding: 20px 0; border-top: 1px solid var(--hairline); }
#view-delivery .dlv-dl__row:first-child { border-top-color: var(--hairline); }
#view-delivery .dlv-dl__row:last-child { border-bottom: 1px solid var(--hairline); }
#view-delivery .dlv-doc .dlv-dl__t { align-self: start; align-items: center; gap: 12px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.35; }
/* на светлой секции круги и шаги - белые (как поля и круглые кнопки на .v2-alt в фундаменте) */
#view-delivery .dlv-ic { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--surface); color: var(--brand); }
#view-delivery .dlv-ic svg { width: 18px; height: 18px; stroke-width: 1.6; }
#view-delivery .dlv-doc .dlv-dl__d { padding-top: 7px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
#view-delivery .dlv-doc .dlv-dl__d > ul:not([class]) { gap: 8px 32px; margin-top: 12px; }
#view-delivery .dlv-doc .dlv-dl__d > ul:not([class]) > li { padding-left: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
#view-delivery .dlv-doc .dlv-dl__d > ul:not([class]) > li::before {
  content: ""; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}

/* Порядок работы: надзаголовок и шаги - белые карточки на светлой секции с номером-бейджем */
#view-delivery .dlv-doc .dlv-sub {
  display: block; margin: clamp(32px, 3.6vw, 44px) 0 0;
  color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0;
}
#view-delivery .dlv-doc .dlv-sub::after { content: none; }
#view-delivery .dlv-flow { gap: 12px; margin-top: 16px; }
#view-delivery .dlv-flow__step,
#view-delivery .dlv-flow__step:hover { padding: 20px 22px 22px; border: 0; border-radius: var(--r-in); background: var(--surface); box-shadow: var(--shadow); }
#view-delivery .dlv-flow__num {
  width: auto; height: 30px; margin-bottom: 20px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-hover);
  font-size: 13px; font-weight: 500;
}
#view-delivery .dlv-doc .dlv-flow__t { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; }
#view-delivery .dlv-doc .dlv-flow__d { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* 6.4 Форма расчёта - компонент фундамента (.hd-lead), здесь только отступ */
#view-delivery .hd-lead { margin-top: calc(var(--block) - var(--gap)); }

/* ==========================================================================
   7. Контакты (#view-contacts)
   ========================================================================== */
#view-contacts .contacts-page { display: block; }

/* 7.1 Первый экран (.v2-hero): текст слева, карточка фото справа - тот же снимок, что в первой версии */
#view-contacts .contacts-hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  column-gap: clamp(32px, 4.4vw, 72px);
  min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); overflow: visible;
}
#view-contacts .contacts-hero::after {
  /* Картинка - фон псевдоэлемента, alt - текст после «/». Chrome отдаёт его читалке только при непустом
     content: прозрачный пиксель 1 × 1 (с ним псевдоэлемент - «изображение» с этим названием) */
  content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") / "Офис-склад производителя AROLT: три оцинкованных контейнера 1100 литров у стены склада";
  grid-column: 2; grid-row: 1;
  height: clamp(340px, 34vw, 488px); border-radius: var(--r);
  /* № 30 (23.10.2026, docs/IMAGES-CODEX.md, 10.2): в коде, поля админки нет; на ≤ 760 кадр сдвинут вправо.
     ?v= - номер версии файла: менять при замене картинки (кадр R2 - три БМ1100 у склада) */
  background: var(--field) url("img/30-contacts-hero.jpg?v=2") center / cover no-repeat;
}
#view-contacts .contacts-hero__copy { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
#view-contacts .contacts-hero h1 { margin: 0; color: var(--ink); font-size: var(--fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; }
#view-contacts .contacts-hero p { margin: clamp(16px, 1.8vw, 24px) 0 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
#view-contacts .contacts-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 36px); }
#view-contacts .contacts-hero__actions .btn img,
#view-contacts .contacts-form__submit img { width: 18px; height: 18px; flex: none; }
#view-contacts .contacts-hero__actions .btn--outline {
  background: transparent; border-color: var(--line-strong); color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#view-contacts .contacts-hero__actions .btn--outline:hover { background: var(--surface); border-color: var(--surface); }
#view-contacts .contacts-hero__actions .btn--outline img { filter: brightness(0) saturate(100%) invert(9%) sepia(12%) saturate(900%) hue-rotate(80deg); }

/* 7.2 Чем поможет менеджер: три белые карточки с кругом-иконкой */
#view-contacts .contacts-service-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: clamp(32px, 3.6vw, 48px) 0 0; }
#view-contacts .contacts-service-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 20px 24px; border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-contacts .contacts-service-item__icon,
#view-contacts .contact-line__icon,
#view-contacts .contacts-address__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand);
}
#view-contacts .contacts-service-item__icon svg,
#view-contacts .contact-line__icon svg,
#view-contacts .contacts-address__icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; }
#view-contacts .contacts-service-item > div > strong { margin: 0 0 2px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; }
#view-contacts .contacts-service-item > div > span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* 7.3 Отдел продаж и форма: две белые карточки поровну - при 7/5 поля формы
   уже подсказки «Как к вам обращаться» (16px + отступы 22px).
   Блок - светлая секция .v2-alt (правка 37, класс в разметке): карточки стоят на поверхности.
   Отступ сверху - margin, а не padding: фон секции выходит за блок на --alt-y и не должен
   заходить на карточки «Чем поможет менеджер». */
#view-contacts .contacts-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch;
  margin-top: var(--block); padding: 0;
}
/* Поля формы - в белой карточке, поэтому остаются --field (фундамент на .v2-alt красит поля в белый) */
#view-contacts .contacts-form :is(input, textarea):not(:focus) { background-color: var(--field); }
#view-contacts .contacts-direct,
#view-contacts .contacts-form {
  display: flex; flex-direction: column; align-items: stretch;
  padding: clamp(24px, 3.6vw, 48px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-contacts .contacts-direct > .eyebrow, #view-contacts .contacts-form > .eyebrow { align-self: flex-start; }
#view-contacts .contacts-direct h2,
#view-contacts .contacts-form h2 { margin: 0; color: var(--ink); font-size: var(--info-card-title); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; }
#view-contacts .contacts-direct__lead,
#view-contacts .contacts-form > p { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

#view-contacts .contacts-list { margin-top: 28px; border-top: 1px solid var(--hairline); border-radius: 0; }
#view-contacts .contact-line {
  grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  min-height: 0; padding: 16px 0; border-bottom: 1px solid var(--hairline); background: none;
}
#view-contacts .contact-line:hover { padding-left: 0; background: none; }
#view-contacts .contact-line__content small,
#view-contacts .contacts-address small {
  display: block; margin: 0 0 2px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.35; letter-spacing: 0;
}
#view-contacts .contact-line__content strong { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.35; }
/* Действие строки - ссылка-кнопка со стрелкой (вся строка - ссылка) */
#view-contacts .contact-line__action {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand); font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: color var(--speed) var(--ease);
}
#view-contacts .contact-line__action::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--info-arrow) center / contain no-repeat; mask: var(--info-arrow) center / contain no-repeat;
  transition: transform var(--speed) var(--ease);
}
#view-contacts .contact-line:hover .contact-line__action { color: var(--brand-hover); }
#view-contacts .contact-line:hover .contact-line__action::after { transform: translateX(3px); }
#view-contacts .contact-line:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-in); }

/* Адрес - подложка --field радиус 12 */
#view-contacts .contacts-address {
  grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  margin-top: 24px; padding: 20px; border-radius: var(--r-in); background: var(--field);
}
#view-contacts .contacts-address__icon { background: var(--surface); }
#view-contacts .contacts-address strong { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.45; }
#view-contacts .contacts-address__hours { margin-top: 6px; color: var(--muted); font-size: 14px; }
#view-contacts .contacts-address .btn { min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: 15px; }
#view-contacts .contacts-address .btn--outline:hover { background: var(--surface); border-color: var(--surface); }

/* Быстрый запрос */
#view-contacts .contacts-form__fields { gap: 16px; margin-top: 24px; }
#view-contacts .contacts-field { gap: 8px; }
#view-contacts .contacts-field > span { padding-left: 4px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.3; }
/* «Продолжить в WhatsApp» с пустым полем: проверка браузера прокручивает поле к верху окна -
   оставляем место под липкую шапку (--hd-h - её настоящая высота) и подпись поля над ним.
   На телефоне отступ под шапку уже даёт mobile.css (scroll-padding-top), см. блок ≤ 760 */
#view-contacts .contacts-field :is(input, textarea) { scroll-margin-top: calc(var(--hd-h, 80px) + 48px); }
#view-contacts .contacts-form__submit { width: 100%; margin-top: 24px; }
#view-contacts .contacts-form__note { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* 7.4 Реквизиты (видны, когда их заполнят в админке): белая карточка на холсте после светлой секции */
#view-contacts .contacts-requisites {
  margin-top: var(--block); padding: clamp(24px, 3.6vw, 48px);
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-contacts .contacts-requisites h2 { margin: 0 0 14px; color: var(--ink); font-size: var(--info-card-title); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; }
#view-contacts .requisites-text { color: var(--ink-2); font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   8. Адаптив
   ========================================================================== */
@media (max-width: 1240px) {
  #view-about .client-grid { --lg-cols: 4; }
}

/* Контакты 1041-1280: при колонках поровну адрес в карточке отдела продаж
   ломается на 3-4 строки, а два поля в ряд уже подсказок. Возвращаем 7/5 и кладём
   поля формы друг под другом (ниже 1041 обе карточки на всю ширину) */
@media (min-width: 1041px) and (max-width: 1280px) {
  #view-contacts .contacts-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  #view-contacts .contacts-form__fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1040px) {
  #view-about .about-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(200px, 26vw, 260px));
    grid-template-areas: "a a b c" "d e f g";
  }
  #view-about .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-about .about-contact-band { grid-template-columns: minmax(0, 1fr); }
  #view-about .about-contact-band__actions { justify-content: flex-start; }

  /* Новости: разделы и архив встают над списком строками-капсулами с прокруткой вбок */
  #view-news .news-page { grid-template-columns: minmax(0, 1fr); }
  #view-news .news-sidebar { position: static; order: -1; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 8px; }
  #view-news .news-side-card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  #view-news .news-side-card h3 { margin: 0 0 8px; color: var(--muted); font-size: 14px; font-weight: 400; }
  #view-news .news-filter {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter);
  }
  #view-news .news-filter::-webkit-scrollbar { display: none; }
  #view-news .news-filter > li { flex: none; }
  /* Разделов всего три - строка переносится, а не обрезает последний чип краем экрана;
     прокрутка вбок остаётся у архива по месяцам */
  #view-news .news-filter[data-news-filter="rubric"] { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  #view-news .news-filter__item {
    width: auto; min-height: 40px; padding: 0 14px; gap: 8px; white-space: nowrap;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
  }
  #view-news .news-filter__item:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
  #view-news .news-filter__item[aria-pressed="true"] { background: var(--brand); box-shadow: none; color: #fff; }
  #view-news .news-filter__item[aria-pressed="true"] .news-filter__count { color: rgb(255 255 255 / .8); }

  :is(#view-article-questions, #view-news-article) .article-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  :is(#view-article-questions, #view-news-article) .article-hero--text { grid-template-columns: minmax(0, 1fr); }

  #view-privacy .legal-document__part,
  #view-offer .legal-section,
  #view-page .legal-document { display: block; }
  #view-privacy .legal-document__part > h2,
  #view-offer .legal-section > h2,
  #view-offer .legal-section > [data-cms-html] > h2,
  #view-page .legal-document > h2 { margin-bottom: 14px; }
  #view-page .legal-document > h2:not(:first-child) + * { margin-top: 0; }

  #view-delivery .dlv-brief__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-delivery .dlv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-delivery .dlv-dl__row { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }

  #view-contacts .contacts-hero { grid-template-columns: minmax(0, 1fr); }
  #view-contacts .contacts-hero::after { grid-column: 1; grid-row: 2; height: clamp(300px, 46vw, 440px); margin-top: 32px; }
  #view-contacts .contacts-main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Планшет: колонки «О компании» складываются раньше телефона */
  /* Факты строками: колонка значений общая (subgrid) и по самому длинному значению («По всему РК»),
     подписи начинаются на одной линии */
  #view-about .about-hero__meta { grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 0; }
  #view-about .about-hero__meta > div {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: 88px minmax(0, 1fr); grid-template-columns: subgrid;
    align-items: baseline; gap: 12px;
    padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--hairline);
  }
  #view-about .about-hero__meta > div:first-child { border-top: 1px solid var(--hairline); }
  #view-about .about-hero__meta strong { font-size: 20px; }
  #view-about .about-hero__meta span { max-width: none; }
  #view-about .about-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-about .about-story { grid-template-columns: minmax(0, 1fr); }
  #view-about .about-section__head { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  #view-delivery .dlv-order { align-items: start; }
  #view-delivery .dlv-zone-list { grid-template-columns: minmax(0, 1fr); }
  #view-delivery .dlv-dl__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #view-delivery .dlv-doc .dlv-dl__d { padding-top: 0; }
}

@media (max-width: 760px) {
  /* О компании: одна колонка, факты строками. Фото первого экрана на телефоне скрыто, как в v1
     (mobile.css .about-visual { display: none }) */
  #view-about .about-main > * + * { margin-top: var(--block); }
  #view-about .about-main > .about-hero + .about-section { margin-top: calc(var(--alt-y) + 24px); }
  #view-about .about-hero { grid-template-columns: minmax(0, 1fr); }
  #view-about .about-hero .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-self: stretch; }
  #view-about .about-hero .hero-actions .btn { width: 100%; min-height: var(--btn-h); padding: 0 var(--btn-px); font-size: 16px; }
  #view-about .about-visual--photo { display: none; }
  /* Строки фактов - из блока ≤ 900 */
  #view-about .about-hero__meta { margin-top: 28px; }
  #view-about .about-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-about .about-kpi { min-height: 132px; gap: 16px; padding: 18px; }
  /* «20 000+» в карточке 2×2 на 320 шире 32px - кегль от ширины экрана, 32px с 400 */
  #view-about .about-kpi strong { font-size: clamp(24px, 8vw, 32px); }
  #view-about .about-kpi span { font-size: 14px; }
  #view-about .about-story { grid-template-columns: minmax(0, 1fr); }
  #view-about .about-story__lead, #view-about .about-copy { padding: 24px 20px; }
  #view-about .about-story__lead h2 { font-size: 28px; }
  #view-about .about-section__head { grid-template-columns: minmax(0, 1fr); }
  #view-about .about-section__head h2 { font-size: var(--fs-h2); }
  /* Фото производства - лента с прокруткой (как .sf-photos на телефоне) */
  #view-about .about-gallery {
    display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  #view-about .about-gallery::-webkit-scrollbar { display: none; }
  #view-about .about-gallery__item { flex: 0 0 248px; height: 340px; scroll-snap-align: start; }
  #view-about .about-gallery__item:first-child { flex-basis: 300px; }
  #view-about .about-gallery__item figcaption { padding: 48px 14px 12px; font-size: 14px; }
  #view-about .about-capabilities, #view-about .about-steps { grid-template-columns: minmax(0, 1fr); }
  /* Карточки на телефоне - как «Доставка» кита: круг или номер слева, текст справа */
  #view-about .about-capability, #view-about .about-step {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start;
    padding: 18px 20px 20px 16px;
  }
  #view-about .about-capability__icon, #view-about .about-step::before { grid-row: span 2; }
  #view-about .about-capability__icon { width: 40px; height: 40px; }
  #view-about .about-capability h3, #view-about .about-step h3 { margin-top: 0; font-size: 16px; }
  #view-about .about-step h3 { padding-top: 5px; }
  #view-about .about-capability h3 { padding-top: 9px; }
  #view-about .about-capability p, #view-about .about-step p { margin-top: 6px; font-size: 14px; }
  #view-about .about-capabilities, #view-about .about-steps { gap: 8px; }
  #view-about .about-contact-band { padding: 28px 16px 24px; }
  #view-about .about-contact-band::after { top: var(--mark-top-m); height: var(--mark-size-m); transform: none; }
  #view-about .about-contact-band h2 { font-size: 28px; }
  #view-about .about-contact-band__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  #view-about .about-contact-band__actions .btn { width: 100%; }
  #view-about .client-grid { --lg-cols: 3; --lg-gap-x: 8px; gap: 4px var(--lg-gap-x); padding: 16px 12px; }
  #view-about .client-logo-card { grid-template-rows: 48px auto; padding: 10px 2px; }
  #view-about .client-logo-card__mark { height: 48px; }
  #view-about .client-logo-card img { --lg-s: .85; }
  #view-about .client-logo-card figcaption { font-size: 12px; }

  /* Новости и статьи */
  #view-news .news-article { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  #view-news .news-article__media { min-height: 0; aspect-ratio: 16 / 10; }
  #view-news .news-article__body { padding: 16px 10px 12px; }
  /* Статья: первый блок в колонку - заголовок, под ним картинка */
  :is(#view-article-questions, #view-news-article) .article-hero { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  :is(#view-article-questions, #view-news-article) .article-facts { display: grid; gap: 16px; margin-top: 28px; padding: 16px 0; }
  :is(#view-article-questions, #view-news-article) .article-facts__list { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 24px; }
  :is(#view-article-questions, #view-news-article) .article-facts dd { font-size: 15px; }
  :is(#view-article-questions, #view-news-article) .article-block { padding: 24px 20px; font-size: 16px; line-height: 1.7; }
  :is(#view-article-questions, #view-news-article) .article-block :is(p, li) { font-size: 16px; line-height: 1.7; }
  :is(#view-article-questions, #view-news-article) .article-block p + p { margin-top: 16px; }
  :is(#view-article-questions, #view-news-article) .article-block h2 { font-size: 22px; }

  /* Документы */
  :is(#view-offer, #view-page) :is(.legal-document, .legal-section),
  #view-privacy .legal-document__part { padding: 24px 20px; }
  #view-offer .legal-card-grid { grid-template-columns: minmax(0, 1fr); }
  #view-offer .legal-card { padding: 18px; }

  /* 404 */
  #view-not-found .not-found-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #view-not-found .not-found-actions .btn { width: 100%; }

  /* Доставка */
  /* Факты без тёмной полосы: над ними нет заголовка, и полоса вокруг четырёх карточек в столбик
     читается как толстая рамка. Карточки лежат на холсте, как остальные карточки страницы */
  #view-delivery .dlv-brief {
    margin: 8px 0 calc(var(--block) - var(--gap)); padding: 0;
    border-radius: 0; background: none; color: var(--ink);
  }
  #view-delivery .dlv-brief__facts { width: auto; margin-inline: 0; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view-delivery .dlv-brief__fact,
  #view-delivery .dlv-brief__fact:hover {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start;
    padding: 18px 20px 20px 16px; box-shadow: var(--shadow);
  }
  #view-delivery .dlv-brief__fact::before { grid-row: span 3; width: 40px; height: 40px; }
  #view-delivery .dlv-brief__label { margin-top: 0; font-size: 14px; }
  #view-delivery .dlv-brief__value { margin-top: 2px; font-size: 22px; }
  #view-delivery .dlv-brief__note { max-width: none; margin-top: 6px; font-size: 14px; }
  #view-delivery .dlv-order { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  #view-delivery .dlv-order__icon { display: none; }
  #view-delivery .dlv-zone, #view-delivery .dlv-zone:hover { padding: 18px; }
  #view-delivery .dlv-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view-delivery .dlv-flow__step, #view-delivery .dlv-flow__step:hover {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 18px;
  }
  #view-delivery .dlv-flow__num { grid-row: span 2; margin: 0; }
  #view-delivery .dlv-doc .dlv-flow__d { margin-top: 4px; }
  #view-delivery .dlv-doc .dlv-dl__d--list2 > ul:not([class]) { grid-template-columns: minmax(0, 1fr); }
  #view-delivery .hd-lead { margin-top: calc(var(--block) - var(--gap)); }

  /* Контакты */
  #view-contacts .contacts-hero::after { height: auto; aspect-ratio: 4 / 3; margin-top: 28px; background-position: 88% 50%; }
  #view-contacts .contacts-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  #view-contacts .contacts-hero__actions .btn { width: 100%; }
  #view-contacts .contacts-service-strip { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; }
  #view-contacts .contacts-service-item { padding: 16px 18px; border: 0; }
  #view-contacts .contacts-direct, #view-contacts .contacts-form { padding: 24px 20px; box-shadow: var(--shadow); }
  #view-contacts .contact-line { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; }
  #view-contacts .contact-line__action { grid-column: 2; }
  #view-contacts .contacts-address { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; }
  #view-contacts .contacts-address .btn { grid-column: 1 / -1; width: 100%; }
  #view-contacts .contacts-form__fields { grid-template-columns: minmax(0, 1fr); }
  #view-contacts .contacts-field :is(input, textarea) { scroll-margin-top: 32px; }
  #view-contacts .contacts-requisites { padding: 24px 20px; }
}

@media (max-width: 420px) {
  #view-about .client-grid { --lg-cols: 2; }
}

/* 320-359: «конфиденциальности» в 30px шире строки и рвалось посреди слова («…ност» / «и») */
@media (max-width: 359px) {
  :is(#view-privacy, #view-offer, #view-page) .legal-hero h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  #view-about .about-gallery__item img, #view-news .news-article__media img { transition: none; }
  #view-about .about-gallery__item:hover img, #view-news .news-article:hover .news-article__media img { transform: none; }
  :is(#view-article-questions, #view-news-article, #view-contacts) :is(.legal-nav a, .legal-nav button, .contact-line__action)::after { transition: none; }
  /* Карточки новостей и логотипы клиентов: только цвет, без подъёма */
  #view-news .news-article, #view-news .news-article__more::after { transition: none; }
  #view-news .news-article:hover, #view-news .news-article:hover .news-article__more::after { transform: none; }
  #view-about .client-logo-card img { transition: filter 240ms var(--ease), opacity 240ms var(--ease); }
  #view-about .client-logo-card:hover img { transform: none; }
}