/* Скопировано машиной — править здесь нельзя.
 * Правка в этой копии живёт до первой синхронизации и молча исчезает.
 */
/* ═══════════════════════════════════════════════════════════════════════════
   ПОДБОРЩИК ТОВАРА — оформление, одно на три сайта. Заведено 28.08.2026.

   ЦВЕТА НЕ НАЗНАЧАЮТСЯ ЗДЕСЬ — приём тот же, что у карточки товара. Палитра у
   каждого сайта своя (решение Айгуль 17.08.2026 «каждый сайт должен быть
   индивидуален»), и имена переменных у сайтов разные. Подборщик объявляет свои
   --pb-* и подставляет в них имя того сайта, на котором оказался. Числовые
   значения цвета стоят только в :root последним запасом — цвет, вписанный
   числом посреди правила, проходит мимо темы и находится потом только глазами.

   РАЗМЕРЫ И РИТМ — общие токены _shared/tokens/core.css. Взята нижняя граница
   шкалы: размашистая вёрстка заставляет скроллить там, где читать нечего.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --pb-zapas-ink:    #2a2520;
  --pb-zapas-muted:  #7a7066;
  --pb-zapas-line:   #e4dccf;
  --pb-zapas-paper:  #fffdf9;
  --pb-zapas-accent: #b89968;
  --pb-zapas-fon:    #f1ebe1;
  --pb-zapas-err:    #c0392b;
  --pb-zapas-ok:     #1f7a4d;
  --pb-zapas-belyy:  #ffffff;
}

.pb {
  --pb-ink:    var(--ink,    var(--color-ink,     var(--pb-zapas-ink)));
  --pb-muted:  var(--muted,  var(--color-muted,   var(--pb-zapas-muted)));
  --pb-line:   var(--line,   var(--color-line,    var(--pb-zapas-line)));
  --pb-paper:  var(--paper,  var(--color-cream-2, var(--pb-zapas-paper)));
  --pb-accent: var(--gold,   var(--color-gold,    var(--pb-zapas-accent)));
  --pb-fon:    var(--bg2,    var(--color-cream,   var(--pb-zapas-fon)));
  --pb-belyy:  var(--fixed-white, var(--pb-zapas-belyy));

  color: var(--pb-ink);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.55);
}

/* ── ВХОДЫ ──────────────────────────────────────────────────────────────── */

.pb-vhod + .pb-vhod { margin-top: var(--space-4, 40px); }

.pb-vhod h3 {
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
  letter-spacing: var(--tr-h3, -.01em);
  margin: 0;
}
.pb-vhod > p {
  margin: var(--space-1, 8px) 0 0;
  color: var(--pb-muted);
  font-size: var(--fs-cap, .9375rem);
}

/* Плитки «Что ищете?». Четыре в ряд на мониторе, две на телефоне: одна колонка
   растянула бы восемь плиток на четыре экрана, а весь смысл входа — увидеть
   их разом. */
.pb-plitki {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2, 16px);
  margin-top: var(--space-3, 24px);
}
.pb-plitka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: calc(var(--tap-min, 44px) * 2);
  padding: var(--space-2, 16px);
  text-align: left;
  background: var(--pb-paper);
  border: 1.5px solid var(--pb-line);
  border-radius: var(--radius-card, 16px);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: .25s var(--ease, ease);
}
.pb-plitka:hover,
.pb-plitka:focus-visible {
  border-color: var(--pb-accent);
  transform: translateY(-2px);
  outline: none;
}
.pb-plitka b {
  font-size: var(--fs-body, 1rem);
  font-weight: 600;
}
.pb-plitka span {
  font-size: var(--fs-label, .75rem);
  color: var(--pb-muted);
  line-height: 1.35;
}

/* Чипы «что беспокоит». Знак стоит слева от слова и не заменяет его: знак
   «отекают ноги» без подписи опознать нельзя. */
.pb-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 8px);
  margin-top: var(--space-3, 24px);
}
.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min, 44px);
  padding: 10px 18px;
  background: var(--pb-paper);
  border: 1.5px solid var(--pb-line);
  border-radius: 30px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  font-weight: 600;
  cursor: pointer;
  transition: .25s var(--ease, ease);
}
.pb-chip:hover,
.pb-chip:focus-visible {
  border-color: var(--pb-accent);
  transform: translateY(-2px);
  outline: none;
}

.pb-znak { width: 22px; height: 22px; flex: none; color: var(--pb-accent); }
.pb-plitka .pb-znak { width: 26px; height: 26px; }

/* ── ПАНЕЛЬ НАБОРА ──────────────────────────────────────────────────────── */

.pb-nazad {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  padding: 0 4px;
  margin-bottom: var(--space-2, 16px);
  background: none;
  border: 0;
  color: var(--pb-muted);
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pb-nazad:hover { color: var(--pb-ink); }

.pb-panel-shapka {
  display: flex;
  align-items: center;
  gap: var(--space-2, 16px);
}
.pb-panel-shapka h3 {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
}
.pb-panel-shapka .pb-znak { width: 30px; height: 30px; }

/* Красная строка — стандарт русской типографики (00-BIBLE/RULES.md). Ставится
   у прозы. У подписей к вопросам, кнопок и служебных строк не ставится: там
   отступ читается как сбитая вёрстка. */
.pb-obyasnenie {
  margin: var(--space-2, 16px) 0 0;
  max-width: var(--measure, 65ch);
  color: var(--pb-muted);
  text-indent: 1.5em;
}

/* margin-top и gap заведены на --space-2 (16px), не --space-3 (24px) —
 * замер сессии «Уплотнить вёрстку» 29.08.2026 (getBoundingClientRect на
 * 1280px): переход «вступление → первый вопрос» (48px) и переход «между
 * вопросами одной группы» (24px) читались почти одинаково, хотя это разные
 * по смыслу границы. padding-top НЕ трогать — это внутренний отступ всей
 * панели, другая роль, не переход между блоками. */
.pb-shagi {
  margin-top: var(--space-2, 16px);
  padding: var(--space-3, 24px);
  background: var(--pb-fon);
  border-radius: var(--radius-block, 20px);
  display: grid;
  gap: var(--space-2, 16px);
}
.pb-vopros {
  font-size: var(--fs-body, 1rem);
  font-weight: 600;
}
.pb-shag-podpis {
  margin: 4px 0 0;
  font-size: var(--fs-label, .75rem);
  line-height: 1.45;
  color: var(--pb-muted);
}
.pb-otvety {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/* Отбивки по бокам узкие сознательно, 14.09.2026 по слову Айгуль о живом
   экране: «плашки уже под подбором по ширине меньше». Текст ответа короткий
   («До года», «Мягкая»), а в одном шаге их бывает до восьми — широкая отбивка
   на каждой уносит ряды, ничего не добавляя к читаемости. Высота 44 px
   остаётся: это цель для пальца, её не жмём. Тот же размер, что у значений
   отбора в разделе (razdel.css::.rz-znachenie) — человек видит одни и те же
   кнопки на обеих страницах, и расходиться им нельзя. */
.pb-otvet {
  min-height: var(--tap-min, 44px);
  padding: 9px 10px;
  /* Цель для пальца — не только высота: у короткого значения («XS», «S»)
     узкая отбивка сделала кнопку 39 px по ширине, и ворота это поймали.
     min-width держит 44 px у коротких, длинные по-прежнему жмутся отбивкой. */
  min-width: var(--tap-min, 44px);
  background: var(--pb-paper);
  border: 1.5px solid var(--pb-line);
  border-radius: 26px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
  transition: .2s var(--ease, ease);
}
.pb-otvet:hover, .pb-otvet:focus-visible { border-color: var(--pb-accent); outline: none; }
.pb-otvet.vybran {
  background: var(--pb-ink);
  border-color: var(--pb-ink);
  color: var(--pb-belyy);
  font-weight: 600;
}
/* Тихий выход из вопроса: не ответ, а разрешение не отвечать. */
.pb-propusk {
  background: none;
  border-style: dashed;
  color: var(--pb-muted);
}

/* ── ВЫДАЧА ─────────────────────────────────────────────────────────────── */

.pb-vydacha { margin-top: var(--space-3, 24px); }

.pb-vydacha-shapka {
  font-size: var(--fs-label, .75rem);
  font-weight: 700;
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-accent);
}

.pb-tovary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2, 16px);
  margin-top: var(--space-2, 16px);
}
/* Без заливки и рамки — карточка отделяется от соседей сеткой (.pb-tovary
 * gap) и воздухом, не линией. Причина, а не вкус: снимок снят на белом
 * студийном фоне, поэтому рамка вокруг него на светлой теме ничего не
 * отделяла — просто обводила белое белым. Айгуль 29.08.2026: «белые рамки
 * дешевые- откуда?». Фото лежит прямо на полотне страницы. */
.pb-tovar {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: .25s var(--ease, ease);
}
.pb-tovar:hover { transform: translateY(-2px); }

.pb-tovar-foto {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pb-fon);
}
.pb-tovar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Модель без снимка. Не стоковая заглушка и не чужая фотография: имя марки на
   ровном фоне честнее и не обещает того, чего нет. Фотография заведена у 35
   моделей из 701 — замер 28.08.2026. */
.pb-bez-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--fs-label, .75rem);
  font-weight: 700;
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
}

.pb-tovar-razdel {
  margin-top: 12px;
  font-size: var(--fs-label, .75rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
.pb-tovar-imya {
  margin-top: 6px;
  font-size: var(--fs-body, 1rem);
  font-weight: 600;
  line-height: 1.3;
}
/* Раздел не рисуется в выдаче одного раздела (podborshchik.js,
 * карточкаТовара) — тогда имя стоит прямо под фото и берёт тот же отступ,
 * какой раньше был у раздела, а не отступ «после подписи под подписью». */
.pb-tovar-foto + .pb-tovar-imya { margin-top: 12px; }
/* Бренд · линия · вариант — тише имени, той же ступенью, что и раздел
 * (label). Решение Айгуль 29.08.2026 после разбора «Одеяло Xdream
 * SUMMERDREAM COTTON лёгкое»: имя вещи крупно, служебные факты о ней —
 * отдельной тихой строкой, не тем же весом и в той же строке. */
.pb-tovar-brend {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label, .75rem);
  color: var(--pb-muted);
}
/* Цена не спорит с именем товара: имя — жирным и крупным, цена — заметно
 * тише. Айгуль 29.08.2026, разбор карточки «Одеяло Xdream…»: цену читают,
 * но приходят за вещью, а не за числом. */
.pb-tovar-cena {
  margin-top: 8px;
  /* --fs-label, не --fs-cap: имя на телефоне (≤600px, ниже) само сжимается
   * до --fs-cap, и от этого совпадения цена и имя на мобильном схлопнулись
   * бы в один размер — измерено 29.08.2026 (getBoundingClientRect: оба по
   * 14px). --fs-label меньше имени на обеих ширинах, а не только на десктопе. */
  font-size: var(--fs-label, .75rem);
  color: var(--pb-ink);
}
.pb-tovar-hod {
  margin-top: 10px;
  font-size: var(--fs-label, .75rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pb-accent);
}

/* ── КАРТОЧКА, КОТОРАЯ РАСКРЫВАЕТСЯ НА МЕСТЕ ────────────────────────────────
   Модель без написанной страницы товара рисуется кнопкой, а не ссылкой
   (podborshchik.js, карточкаТовара). Кнопке нужен полный сброс: браузер даёт ей
   свой фон, рамку, шрифт и центрирование текста, и без сброса она встала бы
   рядом с карточкой-ссылкой другой вещью — при том что для читающего это одна и
   та же карточка. */
.pb-tovar-rask {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Раскрытая карточка помечена рамкой вокруг снимка. Не украшение: панель встаёт
   после ВСЕГО ряда, а не вплотную под своей карточкой (иначе она разорвала бы
   ряд), и без метки было бы не видно, чья она. */
.pb-tovar-rask[aria-expanded="true"] .pb-tovar-foto {
  outline: 2px solid var(--pb-accent);
  outline-offset: 3px;
}

.pb-podrobno {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-3, 24px);
  padding: var(--space-3, 24px);
  border-radius: 12px;
  background: var(--pb-fon);
}
.pb-podrobno-foto { align-self: start; }
.pb-podrobno-telo { min-width: 0; }
/* Модели без снимка (на витрине HOME их 571 из 702 — замер 30.08.2026) панель
   отдаёт всю ширину: колонка под снимок, которого нет, съела бы треть строки. */
.pb-podrobno-telo:only-child { grid-column: 1 / -1; }

.pb-podrobno-imya {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
}
.pb-podrobno-blok { margin-top: var(--space-2, 16px); }
.pb-podrobno-blok h5 {
  margin: 0;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
/* Красная строка тут не нужна и мешает. Правило HOME `p{text-indent:1.5em}`
   (home.css) достаёт и сюда, а граница у него одна на весь хаб: отступ получает
   то, что читают подряд. Цвет, срок и размерный ряд не читают подряд — их ищут
   глазами, и сдвинутая первая строка отодвигает ответ от своего заголовка.
   Найдено на снимке 390 px 30.08.2026: «10 IVORY · 16 LINEN…» стояло с отступом
   от подписи «ЦВЕТ». Отступ гасится здесь, а не в home.css: собственные
   отступы виджета ведёт этот файл (так и записано в home.css рядом с
   правилом). */
.pb-podrobno-blok p { margin: 6px 0 0; text-indent: 0; }
.pb-podrobno-svedeniya {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px var(--space-2, 16px);
  margin: 6px 0 0;
}
.pb-podrobno-svedeniya dt { color: var(--pb-muted); }
.pb-podrobno-svedeniya dd { margin: 0; }

.pb-podrobno-hody {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 16px);
  margin-top: var(--space-3, 24px);
}
/* Раздел остаётся ходом, но вторым: человек уже стоит у нужной ему вещи, и
   отправлять его в раздел первым делом значит повторить ровно ту потерю, из-за
   которой панель и заведена. */
.pb-podrobno-razdel {
  color: var(--pb-accent);
  font-size: var(--fs-cap, .9375rem);
  text-underline-offset: 3px;
}

/* Строка честности: сколько показано, чего нет и почему. Отдельным видом,
   чтобы её не приняли за рекламную подпись. */
.pb-chestno {
  margin: var(--space-2, 16px) 0 0;
  max-width: var(--measure, 65ch);
  padding-left: var(--space-2, 16px);
  border-left: 2px solid var(--pb-line);
  color: var(--pb-muted);
  font-size: var(--fs-cap, .9375rem);
}

.pb-pusto {
  padding: var(--space-3, 24px);
  background: var(--pb-fon);
  border-radius: var(--radius-block, 20px);
}
.pb-pusto h4 {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
}
.pb-pusto p {
  margin: var(--space-1, 8px) 0 0;
  max-width: var(--measure, 65ch);
  color: var(--pb-muted);
  text-indent: 1.5em;
}

/* ── ФОРМА «СОХРАНИТЬ ПОДБОР» ───────────────────────────────────────────── */

.pb-forma {
  margin-top: var(--space-3, 24px);
  padding: var(--space-3, 24px);
  background: var(--pb-fon);
  border-radius: var(--radius-block, 20px);
  display: grid;
  gap: var(--space-2, 16px);
  max-width: 640px;
}
.pb-forma h4 {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
}
.pb-forma > p {
  margin: 0;
  color: var(--pb-muted);
  font-size: var(--fs-cap, .9375rem);
  text-indent: 1.5em;
}
.pb-forma label {
  display: grid;
  gap: 6px;
  font-size: var(--fs-label, .75rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
.pb-forma input[type="text"],
.pb-forma input:not([type]),
.pb-forma input[type="tel"] {
  min-height: var(--tap-min, 44px);
  padding: 10px 14px;
  background: var(--pb-paper);
  border: 1.5px solid var(--pb-line);
  border-radius: var(--radius-btn, 12px);
  color: var(--pb-ink);
  font: inherit;
  font-size: var(--fs-body, 1rem);
}
.pb-forma input:focus { border-color: var(--pb-accent); outline: none; }
.pb-soglasie {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-cap, .9375rem);
}
.pb-soglasie input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

.pb-knopka {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  padding: 12px 28px;
  background: var(--pb-accent);
  border: 1.5px solid var(--pb-accent);
  border-radius: 30px;
  color: var(--btn-ink, var(--pb-belyy));
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
  text-decoration: none;
  transition: .25s var(--ease, ease);
}
.pb-knopka:hover { transform: translateY(-2px); }
.pb-knopka-ssylka { margin-top: var(--space-3, 24px); }

.pb-status { margin: 0; font-size: var(--fs-cap, .9375rem); }
.pb-status.ok  { color: var(--pb-zapas-ok); }
.pb-status.err { color: var(--pb-zapas-err); }

/* ── ЛИПКАЯ ПОЛОСА ──────────────────────────────────────────────────────────
   Условие Айгуль 28.08.2026: аккуратная, не выпрыгивающее окно. Она ничего не
   открывает сама и ждёт нажатия. Высоту держит скромную — на телефоне каждый
   её лишний пиксель отнимается у товара. */

.pb-polosa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 16px);
  padding: 10px var(--gutter, 32px);
  background: var(--paper, var(--color-cream-2, var(--pb-zapas-paper)));
  border-top: 1px solid var(--line, var(--color-line, var(--pb-zapas-line)));
  color: var(--ink, var(--color-ink, var(--pb-zapas-ink)));
  transform: translateY(100%);
  transition: transform .4s var(--ease, ease);
}
.pb-polosa.vidna { transform: none; }
.pb-polosa-tekst {
  font-size: var(--fs-cap, .9375rem);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-polosa-knopka {
  flex: none;
  min-height: var(--tap-min, 44px);
  padding: 10px 22px;
  background: var(--gold, var(--color-gold, var(--pb-zapas-accent)));
  border: 0;
  border-radius: 30px;
  color: var(--btn-ink, #fff);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
}

/* ── ЛИСТ (подборщик поверх страницы раздела) ───────────────────────────── */

.pb-list {
  position: fixed;
  inset: 0;
  z-index: 950;
  opacity: 0;
  transition: opacity .3s var(--ease, ease);
}
.pb-list.vidno { opacity: 1; }
.pb-list-fon {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.pb-list-okno {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(920px, 100%);
  max-height: 88vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4, 40px) var(--gutter, 32px) var(--space-4, 40px);
  background: var(--bg, var(--color-cream, var(--pb-zapas-fon)));
  border-radius: var(--radius-block, 20px) var(--radius-block, 20px) 0 0;
}
.pb-list-zakryt {
  position: absolute;
  top: 10px; right: 14px;
  width: var(--tap-min, 44px);
  height: var(--tap-min, 44px);
  background: none;
  border: 0;
  color: var(--muted, var(--pb-zapas-muted));
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
body.pb-zamok { overflow: hidden; }

/* ── ЭКРАНЫ ПОМЕНЬШЕ ────────────────────────────────────────────────────────
   Пороги те же, что у общих токенов ритма: 900 — планшет, 600 — телефон. */

@media (max-width: 900px) {
  .pb-tovary { grid-template-columns: repeat(2, 1fr); }
  .pb-plitki { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .pb-plitki { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pb-tovary { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pb-tovar-imya { font-size: var(--fs-cap, .9375rem); }
  /* На телефоне панель раскладывается в одну колонку: снимок сверху во всю
     ширину (там он и становится крупнее карточки, которая занимает половину
     ряда), сведения под ним. Имя признака и значение — тоже друг под другом:
     «Промышленная прачечная» в колонке max-content на 390 px не оставляет
     значению места. */
  .pb-podrobno {
    grid-template-columns: 1fr;
    gap: var(--space-2, 16px);
    padding: var(--space-2, 16px);
  }
  .pb-podrobno-svedeniya { grid-template-columns: 1fr; gap: 2px; }
  .pb-podrobno-svedeniya dd { margin-bottom: 8px; }
  .pb-shagi { padding: var(--space-2, 16px); gap: var(--space-2, 16px); }
  .pb-polosa { padding: 8px 16px; }
  .pb-polosa-knopka { padding: 10px 18px; }
  .pb-list-okno { padding: var(--space-3, 24px) 16px var(--space-3, 24px); max-height: 92vh; }
}

/* Полоса перекрывает низ страницы. Отступ ставится телу, а не каждой секции:
   список секций, которые надо не забыть, держится вниманием исполнителя — то
   есть не держится (урок П66 чек-листа). Значение одно на все ширины: полоса
   везде одной высоты — 44px кнопка плюс паддинг сверху/снизу. */
body:has(.pb-polosa) { padding-bottom: 64px; }

@media (prefers-reduced-motion: reduce) {
  .pb-plitka, .pb-chip, .pb-tovar, .pb-knopka, .pb-polosa, .pb-list {
    transition: none;
  }
  .pb-plitka:hover, .pb-chip:hover, .pb-tovar:hover, .pb-knopka:hover {
    transform: none;
  }
}

/* Ответ, под который на складе ничего нет. Серым, а не спрятанным: серый
   «жёсткий» на кровати 120 см говорит, что такого матраса не бывает,
   а исчезнувший не говорит ничего. */
.pb-otvet.pb-nedostupno {
  opacity: .42;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.pb-otvet.pb-nedostupno:hover { border-color: var(--pb-line); transform: none; }