/* ═══════════════════════════════════════════════════════════════════════════
   industry-page.css — ОБЩИЙ шаблон отраслевых страниц Цех360

   Потребители (класс .p-ind на обёртке рядом с .p-feat):
       /dlya-metalloobrabotki   /dlya-metallokonstrukciy
       /dlya-obrabotki-kamnya   /dlya-mebelnogo-proizvodstva

   Файл вырос из dlya-metalloobrabotki.css: когда отраслевых страниц стало
   четыре, страничный файл стал шаблоном. Копировать его четвёртый раз было
   нельзя — в этом репозитории уже семь раз чинили одну и ту же логику,
   разъехавшуюся по двум местам, и мобильная правка в одной копии молча
   оставила бы три другие страницы сломанными.

   ЧТО ЗДЕСЬ ЛЕЖИТ: только то, чего нет в общей библиотеке — карточки болей
   отрасли, четыре развёрнутых сценария с интерфейсом сбоку, карточка заказа
   в герое, склад, загрузка участков, таблица «без лишних обещаний» и рабочее
   место цеха. Всё остальное (герой, шапка раздела, вкладки демо, сетка
   связанных функций, шаги запуска, FAQ, финальный CTA, кнопки, крошки) —
   из feature-page.css; токены — из candidate.css.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ:
       fonts → tsekh360 → landing → candidate → feature-page → product-ui
             → industry-page

   ─── ЧЕГО ЗДЕСЬ НЕТ НАМЕРЕННО ──────────────────────────────────────────────

   1. Блока :root. Собственные токены страницы затеняют candidate.css по
      ближайшему предку — на /test4 так умерли все адаптивные значения.

   2. Своих точек перелома. Только 1180 / 900 / 640 / 480 — та же лестница,
      что у candidate.css и feature-page.css.

   3. Правил без медиазапроса ПОСЛЕ адаптивных. Все базовые правила выше,
      все @media — единым блоком в конце, по убыванию.

   4. Отраслевых значений. Ни одного названия материала, операции или изделия:
      они живут в разметке страниц. Файл описывает ФОРМУ, а не содержимое.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Плашки статуса: жёлтая и синяя ───────────────────────────────────────
   Раньше дублировались здесь под .p-ind — теперь то же правило живёт в
   feature-page.css под .p-feat (та же заливка, тот же цвет текста,
   ЗАМЕРЕНЫ те же 4.97:1 и 5.71:1), а .p-feat стоит на обёртке рядом с
   .p-ind на каждой отраслевой странице. Второй копии здесь больше нет:
   исправление в одном месте раньше не долетело бы до другого — ровно тот
   класс дефекта, из-за которого правило и переносили. */

/* ── Герой: карточка заказа в рамке интерфейса ────────────────────────── */
.p-ind .oc{ padding:18px }
.p-ind .oc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--c-line) }
.p-ind .oc-head > div{ min-width:0 }
.p-ind .oc-code{ font-size:12px; color:var(--c-muted-2) }
.p-ind .oc-name{ font-size:24px; line-height:1.06; letter-spacing:-.03em; font-weight:var(--c-fw-head); margin-top:5px }
.p-ind .oc-kv{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px }
.p-ind .oc-kv > div{ min-width:0; padding:13px; border:1px solid var(--c-line); border-radius:12px; background:var(--c-bg) }
.p-ind .oc-kv span{ display:block; font-size:10px; color:var(--c-muted-2) }
.p-ind .oc-kv b{ display:block; margin-top:3px; font-size:18px; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.p-ind .oc-products{ margin-top:12px; border:1px solid var(--c-line); border-radius:14px; overflow:hidden }
.p-ind .oc-products-head{ display:flex; justify-content:space-between; gap:10px; padding:11px 13px; background:var(--c-soft-2); border-bottom:1px solid var(--c-line); font-size:12px }
.p-ind .oc-prow{ display:grid; grid-template-columns:minmax(0,1fr) 80px 92px; gap:10px; align-items:center; padding:11px 13px; border-bottom:1px solid var(--c-line); font-size:12px }
.p-ind .oc-prow:last-child{ border-bottom:0 }
.p-ind .oc-prow b{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-ind .oc-prow .ui-pill{ height:24px; padding:0 9px; font-size:11px; justify-self:start }

/* Маршрут пятью плитками. Пять колонок держатся до 640, ниже — две:
   «Покраска» в колонке 1/5 при 375 обрезалась бы многоточием. */
.p-ind .route-preview{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:12px }
.p-ind .route-step{ border:1px solid var(--c-line); border-radius:10px; padding:9px 8px; min-width:0; background:var(--c-bg) }
.p-ind .route-step small{ display:block; font-size:9px; color:var(--c-muted-2) }
.p-ind .route-step b{ display:block; font-size:11px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.p-ind .route-step em{ display:block; font-style:normal; font-size:9px; margin-top:6px; color:var(--c-muted-2) }
.p-ind .route-step.done em{ color:var(--c-green-ink) }
.p-ind .route-step.work em{ color:var(--c-accent-ink) }

/* ── Блок «Знакомо металлоцеху»: четыре карточки ──────────────────────── */
.p-ind .pain-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.p-ind .pain{ border:1px solid var(--c-line); border-radius:var(--c-r-card); padding:22px; min-height:200px; background:var(--c-bg); display:flex; flex-direction:column; min-width:0 }
.p-ind .pain-num{ font-size:11px; color:var(--c-accent); font-weight:700; letter-spacing:.12em }
.p-ind .pain h3{ font-size:19px; line-height:1.2; letter-spacing:-.02em; font-weight:var(--c-fw-head); margin:16px 0 0 }
.p-ind .pain p{ color:var(--c-muted); font-size:14px; line-height:1.55; margin:10px 0 0 }
.p-ind .pain-note{ margin-top:auto; padding-top:18px; font-size:12px; color:var(--c-muted-2) }

/* ── Карточка внутри правой половины демо ─────────────────────────────────
   feature-page.css оставляет .demo-view пустым слотом: что в нём лежит —
   дело страницы. Здесь это белая карточка на мягкой подложке демо. */
.p-ind .preview-card{ background:var(--c-bg); border:1px solid var(--c-line); border-radius:16px; padding:18px; min-width:0 }
.p-ind .preview-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--c-line) }
.p-ind .preview-head > div{ min-width:0 }
.p-ind .preview-head small{ display:block; font-size:12px; color:var(--c-muted-2) }
.p-ind .preview-head h4{ font-size:22px; line-height:1.08; letter-spacing:-.03em; font-weight:var(--c-fw-head); margin:4px 0 0 }
.p-ind .preview-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:13px }
.p-ind .pbox{ border:1px solid var(--c-line); border-radius:12px; background:var(--c-soft-2); padding:13px; min-width:0 }
.p-ind .pbox span{ display:block; font-size:10px; color:var(--c-muted-2) }
.p-ind .pbox b{ display:block; font-size:15px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Составные значения и целые фразы переносятся, а не режутся многоточием:
   по умолчанию .pbox b — одна строка, и это верно для «23.08» или
   «Сварка», но не для предложения. */
.p-ind .pbox b.wrap{ white-space:normal; overflow:visible; text-overflow:clip; font-size:14px; font-weight:500; line-height:1.45 }
.p-ind .pbox.bad{ background:var(--c-red-soft); border-color:#f6d8d5 }
.p-ind .pbox.good{ background:var(--c-green-soft); border-color:#cfeadf }
.p-ind .pbox.good b{ color:var(--c-green-ink) }

/* ── Строчный список: маршрут, материалы, склад ───────────────────────── */
.p-ind .mini-list{ margin-top:12px; border:1px solid var(--c-line); border-radius:13px; overflow:hidden }
.p-ind .mini-row{ display:grid; grid-template-columns:34px minmax(0,1fr) 108px 92px; gap:10px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--c-line); font-size:12px }
.p-ind .mini-row:last-child{ border-bottom:0 }
.p-ind .mini-row .n{ width:26px; height:26px; border-radius:8px; background:var(--c-soft); display:grid; place-items:center; color:var(--c-muted-2); font-size:10px }
.p-ind .mini-row b{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-ind .mini-row > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--c-muted) }
.p-ind .mini-row em{ font-style:normal; color:var(--c-muted-2); text-align:right; white-space:nowrap }
.p-ind .mini-row em.ok{ color:var(--c-green-ink) }
.p-ind .mini-row em.run{ color:var(--c-accent-ink) }
.p-ind .mini-row em.bad{ color:var(--c-red-ink) }
.p-ind .mini-row.total{ background:var(--c-soft-2); font-weight:600 }
.p-ind .mini-row.total b{ font-size:13px }

/* ── «Что получает металлоцех»: четыре развёрнутых сценария ───────────────
   Текст отдельно, интерфейс отдельно. Серой рамки вокруг текста нет
   намеренно (пункт 12 задания): светлая подложка — только под интерфейс,
   и то через саму белую карточку .visual-inner на фоне раздела. */
.p-ind .feature-stack{ display:grid; gap:88px }
.p-ind .feature{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center }
.p-ind .feature > *{ min-width:0 }
.p-ind .feature.reverse{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) }
.p-ind .feature-copy h3{ font-size:var(--c-fs-h3); line-height:var(--c-lh-h3); letter-spacing:var(--c-ls-h3); font-weight:var(--c-fw-head); margin:14px 0 0 }
.p-ind .feature-copy > p{ color:var(--c-muted); font-size:16px; line-height:1.62; margin:16px 0 0 }
.p-ind .feature-links{ display:flex; flex-wrap:wrap; gap:18px; margin-top:22px }
.p-ind .feature-link{ display:inline-flex; align-items:center; color:var(--c-accent); font-weight:600; font-size:15px }
.p-ind .feature-link:hover{ text-decoration:underline; text-underline-offset:3px }

.p-ind .visual-inner{ background:var(--c-bg); border:1px solid var(--c-line); border-radius:16px; overflow:hidden; box-shadow:var(--c-shadow) }
.p-ind .visual-title{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:16px 17px; border-bottom:1px solid var(--c-line) }
.p-ind .visual-title > div{ min-width:0 }
.p-ind .visual-title small{ display:block; font-size:12px; color:var(--c-muted-2) }
.p-ind .visual-title b{ display:block; font-size:17px; margin-top:3px; letter-spacing:-.02em }
.p-ind .visual-inner .mini-list{ margin:0; border:0; border-radius:0 }

.p-ind .stock-row{ display:grid; grid-template-columns:minmax(0,1fr) 110px 128px; gap:10px; align-items:center; padding:14px 17px; border-bottom:1px solid var(--c-line); font-size:12px }
.p-ind .stock-row:last-child{ border-bottom:0 }
.p-ind .stock-row b{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-ind .stock-row > span{ min-width:0; color:var(--c-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-ind .stock-row .ui-pill{ height:25px; padding:0 10px; font-size:11px; justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis }

.p-ind .load-row{ display:grid; grid-template-columns:105px minmax(0,1fr) 70px; gap:12px; align-items:center; padding:14px 17px; border-bottom:1px solid var(--c-line); font-size:12px }
.p-ind .load-row:last-child{ border-bottom:0 }
.p-ind .load-row b{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-ind .load-row > span{ text-align:right; color:var(--c-muted); white-space:nowrap }
.p-ind .load-row span.over{ color:var(--c-red-ink); font-weight:600 }
.p-ind .bar{ height:7px; border-radius:999px; background:#ece7e2; overflow:hidden; min-width:0 }
.p-ind .bar i{ display:block; height:100%; border-radius:999px; background:var(--c-accent) }
.p-ind .bar i.over{ background:var(--c-red) }

.p-ind .money-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:14px }
.p-ind .money{ border:1px solid var(--c-line); border-radius:12px; padding:13px; background:var(--c-soft-2); min-width:0 }
.p-ind .money span{ display:block; font-size:10px; color:var(--c-muted-2) }
/* Сумма и ₽ склеены неразрывными пробелами в разметке; nowrap здесь —
   вторая страховка на случай очень узкой колонки. */
.p-ind .money b{ display:block; font-size:18px; margin-top:4px; letter-spacing:-.02em; white-space:nowrap }
.p-ind .money.profit{ background:var(--c-green-soft); border-color:#cfeadf }
.p-ind .money.profit b{ color:var(--c-green-ink) }

/* ── Список «галочка + пояснение» ─────────────────────────────────────────
   Галочка ЗЕЛЁНАЯ: это подтверждение, а не акцент. Оранжевой галочки на
   положительном пункте на сайте нет нигде. */
.p-ind .check-list{ display:grid; gap:12px; margin-top:24px }
.p-ind .check{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start }
.p-ind .check i{ width:24px; height:24px; border-radius:50%; background:var(--c-green-soft); color:var(--c-green-ink); font-style:normal; font-size:13px; font-weight:700; display:grid; place-items:center; flex:none }
.p-ind .check b{ display:block; font-size:14px; line-height:1.35 }
.p-ind .check span{ display:block; font-size:13px; line-height:1.45; color:var(--c-muted); margin-top:2px }

/* ── Рабочее место цеха ───────────────────────────────────────────────────
   Подложка под телефон — МЯГКАЯ светло-оранжевая, а не заливка брендовым
   акцентом (пункт 13 задания прямо это оговаривает). Отличается от
   /pozakaznoe-proizvodstvo, где та же панель нарисована ярким градиентом;
   расхождение названо в отчёте, решение за владельцем. */
.p-ind .worker-wrap{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center }
.p-ind .worker-wrap > *{ min-width:0 }
.p-ind .worker-copy > p{ color:var(--c-muted); font-size:17px; line-height:1.62; margin:18px 0 0; max-width:610px }
.p-ind .worker-panel{ background:var(--c-worker-panel-bg); border-radius:var(--c-r-panel); padding:30px; display:flex; align-items:center; justify-content:center }
.p-ind .phone{ width:min(340px,100%); background:#171717; border-radius:34px; padding:10px; box-shadow:var(--c-shadow-lg) }
.p-ind .phone-screen{ background:var(--c-bg); border-radius:26px; overflow:hidden }
.p-ind .phone-top{ height:32px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--c-muted-2) }
.p-ind .mobile-head{ padding:15px 16px; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line) }
.p-ind .mobile-head small{ display:block; font-size:11px; color:var(--c-muted-2) }
.p-ind .mobile-head b{ display:block; font-size:20px; margin-top:4px; letter-spacing:-.02em }
.p-ind .mobile-card{ margin:14px; border:1px solid var(--c-line); border-radius:16px; padding:16px }
.p-ind .mobile-card small{ display:block; font-size:11px; color:var(--c-accent); font-weight:600 }
.p-ind .mobile-card h4{ font-size:17px; line-height:1.2; letter-spacing:-.02em; font-weight:var(--c-fw-head); margin:8px 0 0 }
.p-ind .mobile-meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px }
.p-ind .mobile-meta > div{ background:var(--c-soft); border-radius:10px; padding:9px; min-width:0 }
.p-ind .mobile-meta span{ display:block; font-size:9px; color:var(--c-muted-2) }
.p-ind .mobile-meta b{ display:block; font-size:12px; margin-top:2px }
.p-ind .mobile-meta b.run{ color:var(--c-accent-ink) }
.p-ind .mobile-action{ display:flex; align-items:center; justify-content:center; margin:16px 14px 18px; border-radius:var(--c-r-control); min-height:46px; background:var(--c-accent); color:#fff; font-weight:600; font-size:14px }

/* ── «Без лишних обещаний» ────────────────────────────────────────────── */
.p-ind .honest{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:64px; align-items:center }
.p-ind .honest > *{ min-width:0 }
/* У ЭТОГО H2 СВОЯ СТУПЕНЬ, НА ШАГ НИЖЕ ОБЩЕЙ ШКАЛЫ. Он длиннее остальных
   заголовков страницы и содержит «специализированные» — самое длинное слово
   на странице. Замерено Range.getClientRects: на общей шкале оно вылезало
   из своей колонки на 21.9px при 1024 (колонка .88fr = 405px). Это ровно
   случай «самая узкая колонка не на самом узком экране»: на 900 и ниже блок
   складывается в одну колонку и всё помещается, а разъезжается он выше. */
.p-ind .honest-copy h2{ font-size:44px; line-height:1.04; letter-spacing:var(--c-ls-h2); font-weight:var(--c-fw-head); margin:0; max-width:600px }
.p-ind .honest-copy > p{ color:var(--c-muted); font-size:16px; line-height:1.62; margin:18px 0 0 }
.p-ind .honest-table{ border:1px solid var(--c-line); border-radius:17px; overflow:hidden; background:var(--c-bg) }
.p-ind .honest-row{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:13px; padding:15px 17px; border-bottom:1px solid var(--c-line); align-items:start }
.p-ind .honest-row:last-child{ border-bottom:0 }
.p-ind .honest-icon{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; flex:none }
.p-ind .honest-icon.yes{ background:var(--c-green-soft); color:var(--c-green-ink) }
.p-ind .honest-icon.no{ background:var(--c-red-soft); color:var(--c-red-ink) }
.p-ind .honest-row b{ display:block; font-size:15px; line-height:1.3 }
/* .honest-row > div > span, не .honest-row span: голый span-потомок есть
   и у описания (вложен в div), и у .honest-icon (прямой ребёнок ряда,
   тоже <span>). Широкий селектор ловил оба — .honest-row span (0,2,1)
   специфичнее, чем .honest-icon (0,2,0), потому что span добавляет тег
   в счёт, поэтому побеждал молча и глушил display:grid у иконки: глиф
   центрировался уже не в круге, а в line-height:1.5 обычного блока —
   ✓/× визуально уезжали вверх, потому что в шрифте у этих символов под
   базовой линией пусто, а строчная коробка (19.5px при 13px/1.5) резер-
   вирует место под несуществующий descender. Уточнение по структуре
   (span только внутри div-обёртки описания) — а не борьба специфич-
   ностью с самим .honest-icon: та же коллизия иначе могла всплыть на
   любом другом узком селекторе, который тоже метит в «span». */
.p-ind .honest-row > div > span{ display:block; color:var(--c-muted); font-size:13px; line-height:1.5; margin-top:3px }

/* Шагов запуска здесь ЧЕТЫРЕ, а общая сетка рассчитана на три. */
.p-ind .launch{ grid-template-columns:repeat(4,minmax(0,1fr)) }

/* Перелинковка между отраслевыми страницами — один компонент здесь, а не
   семь раз одна и та же вёрстка со своими стилями на каждой странице.
   Разметка (сами 6 ссылок на соседей) неизбежно своя на каждой странице —
   она и есть содержание блока, — а описывается это единственное правило
   ниже. Не карточки: сетка мелких строчных ссылок, чтобы не спорить по
   весу с рекламируемым .rel-grid чуть выше и не удлинять страницу. Стоит
   перед FinalCTA (последний блок перед ним на каждой странице). */
.p-ind .industries-also{ margin-top:40px; padding:22px 26px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-soft) }
.p-ind .industries-also .label{ margin-bottom:12px }
.p-ind .industries-also-list{ display:flex; flex-wrap:wrap; gap:8px 20px }
.p-ind .industries-also-list a{ font-size:14px; font-weight:600; color:var(--c-accent) }
.p-ind .industries-also-list a:hover{ text-decoration:underline }

/* ═══ ЛЕСТНИЦА 1180 / 900 / 640 / 480 ═════════════════════════════════════ */
@media (max-width:1180px){
  .p-ind .pain-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-ind .feature{ gap:42px }
  .p-ind .feature-stack{ gap:76px }
  /* Колонки выравниваются в половину, а кегль опускается ещё на ступень:
     при .88fr и 38px то же слово не помещалось уже на 901 (колонка 360px
     против 369px краски). Обе правки нужны вместе. */
  .p-ind .honest{ grid-template-columns:1fr 1fr; gap:42px }
  .p-ind .honest-copy h2{ font-size:38px }
  .p-ind .worker-wrap{ gap:42px }
  .p-ind .launch{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-ind .route-preview{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:900px){
  .p-ind .feature,
  .p-ind .feature.reverse,
  .p-ind .worker-wrap,
  .p-ind .honest{ grid-template-columns:1fr; gap:32px }
  /* В перевёрнутом блоке текст обязан идти первым, когда колонки сложились:
     иначе интерфейс появляется раньше объяснения, к которому относится. */
  .p-ind .feature.reverse .feature-copy{ order:1 }
  .p-ind .feature.reverse .feature-visual{ order:2 }
  .p-ind .feature-copy,
  .p-ind .feature-visual,
  .p-ind .worker-panel,
  .p-ind .honest-table{ max-width:760px; width:100% }
  .p-ind .worker-panel{ margin:0 auto }
  .p-ind .feature-stack{ gap:64px }
  .p-ind .route-preview{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}
@media (max-width:640px){
  .p-ind .pain-grid{ grid-template-columns:1fr }
  .p-ind .pain{ min-height:auto }
  .p-ind .launch{ grid-template-columns:1fr }
  .p-ind .feature-stack{ gap:56px }
  .p-ind .preview-grid{ grid-template-columns:1fr }
  .p-ind .money-grid{ grid-template-columns:1fr }
  .p-ind .oc{ padding:14px }
  .p-ind .oc-kv{ grid-template-columns:1fr 1fr }
  .p-ind .oc-kv > div:last-child{ grid-column:1/-1 }
  /* «Монтаж-Сервис» просит 145px в колонке 128 и резался многоточием —
     это имя клиента, то есть данные, а не подпись. Переносим вместо
     обрезки; nowrap остаётся верным для «23.08» и «60%», но не для него. */
  .p-ind .oc-kv b{ white-space:normal; overflow:visible; text-overflow:clip; font-size:16px; line-height:1.2 }
  .p-ind .route-preview{ grid-template-columns:1fr 1fr }

  /* СТРОКИ СКЛАДА И МАРШРУТА РАСКЛАДЫВАЮТСЯ В ДВЕ СТРОКИ, А НЕ ТЕРЯЮТ
     КОЛОНКУ. Первым заходом здесь стояло display:none на средней колонке —
     и вместе с подписью участка исчезал остаток («остаток 6», «86 м»),
     то есть ровно то число, ради которого этот интерфейс нарисован.
     Название и остаток встают друг под другом, статус держится справа. */
  .p-ind .mini-row{ grid-template-columns:30px minmax(0,1fr) 84px; row-gap:3px }
  .p-ind .mini-row .n{ grid-column:1; grid-row:1/span 2; align-self:center }
  .p-ind .mini-row b{ grid-column:2; grid-row:1; white-space:normal; overflow:visible; text-overflow:clip }
  .p-ind .mini-row > span:not(.n){ grid-column:2; grid-row:2; font-size:11px; white-space:normal; overflow:visible; text-overflow:clip }
  .p-ind .mini-row em{ grid-column:3; grid-row:1/span 2; align-self:center }

  .p-ind .stock-row{ grid-template-columns:minmax(0,1fr) 122px; row-gap:4px }
  .p-ind .stock-row b{ grid-column:1; grid-row:1; white-space:normal; overflow:visible; text-overflow:clip }
  .p-ind .stock-row > span:not(.ui-pill){ grid-column:1; grid-row:2; display:block; white-space:normal; overflow:visible; text-overflow:clip }
  /* Плашка складского статуса — тоже текст, а не значок: «ниже минимума 10»
     просила 124px в колонке 122 и теряла хвост. Высота и перенос свободные,
     чтобы длина подписи больше не упиралась в ширину колонки. */
  .p-ind .stock-row .ui-pill{
    grid-column:2; grid-row:1/span 2; align-self:center;
    height:auto; min-height:25px; white-space:normal; text-align:center;
    padding:4px 9px; line-height:1.25; overflow:visible; text-overflow:clip;
  }

  .p-ind .load-row{ grid-template-columns:80px minmax(0,1fr) 52px; padding:12px 14px }
  .p-ind .worker-panel{ padding:16px }
  .p-ind .honest-row{ padding:14px }
  .p-ind .feature-copy .check-list{ margin-top:20px }
}
@media (max-width:480px){
  /* Количество — тоже данные: вместо display:none оно уходит под название. */
  /* ── ПОЛОСА COOKIE: НИЗ ТРЁХ КАРТОЧЕК ПЕРВОГО ЭКРАНА ───────────────────
     Замерено ДО правки: низ .fh-points = 704.05px на 390×844 при пороге
     704 — то есть полоса, поднимаясь снизу, закрывала карточки. Разбор по
     элементам показал, где именно высота: H1 занимал ЧЕТЫРЕ строки (142.9px
     при 38px), подзаголовок — ШЕСТЬ (155.5px). Оба текста заданы заданием
     дословно, поэтому правка в типографике, а не в словах: кегль H1 на
     ступень ниже, подзаголовок плотнее, метка и кнопки ближе друг к другу.
     Тот же приём, что общая компактизация этой зоны в feature-page.css. */
  .p-ind .fh-copy .label{ margin-bottom:8px }
  .p-ind .fh-copy h1{ font-size:34px }
  .p-ind .fh-copy > p{ font-size:15px; line-height:1.5 }
  .p-ind .fh-actions{ margin-top:8px; gap:8px }
  .p-ind .fh-actions .btn{ height:46px }

  /* У этого H2 своя шкала (см. выше), поэтому и своя нижняя ступень: общий
     токен на ≤480 уходит на 32px, а жёстко заданные 38px оставались бы.
     «специализированные» — 377px краски при 38px против контейнера 336px
     на 360: замерено переполнение 40.8px. При 30px слово просит 298px. */
  .p-ind .honest-copy h2{ font-size:30px }
  /* Шапка карточки предпросмотра перестраивается в столбец: на 360 заголовок
     и плашка в одной строке оставляли заголовку 128px, и он вылезал краской
     на 16.9px. Плашка уходит наверх, заголовок получает всю ширину. */
  .p-ind .preview-head{ flex-direction:column-reverse; align-items:flex-start; gap:9px }
  .p-ind .preview-head .ui-pill{ max-width:100%; height:auto; white-space:normal; padding:4px 10px; line-height:1.25 }
  .p-ind .oc-prow{ grid-template-columns:minmax(0,1fr) 92px; row-gap:3px }
  .p-ind .oc-prow b{ grid-column:1; grid-row:1 }
  .p-ind .oc-prow > span:not([class]){ grid-column:1; grid-row:2; font-size:11px; color:var(--c-muted) }
  .p-ind .oc-prow .ui-pill{ grid-column:2; grid-row:1/span 2; align-self:center }
  .p-ind .mobile-meta{ grid-template-columns:1fr }
  .p-ind .worker-panel{ padding:12px; border-radius:20px }
  .p-ind .phone{ border-radius:28px }
  .p-ind .phone-screen{ border-radius:22px }
  .p-ind .feature-links{ flex-direction:column; align-items:flex-start; gap:10px }
  /* Цель нажатия на телефоне — не меньше 44px, как у общих строчных ссылок. */
  .p-ind .feature-link{ min-height:44px }
}