/* notions.css — вся вёрстка HDE.

   Палитра снята с баннера бренда: багровый знак на тёплом небелом фоне.

   ВНИМАНИЕ, две ловушки этого файла:
   1. Комментарии в шапке не должны содержать последовательность «звёздочка-слэш» внутри
      текста: она закрывает комментарий досрочно и молча съедает :root целиком. Кнопки
      после такого становятся невидимыми, а css остаётся синтаксически валидным.
   2. Шрифты подключены ГОЛЫМИ именами файлов. woff2 лежат в этой же папке; путь вида
      «две точки слэш fonts» дал бы 404 без единой ошибки в консоли — просто системный
      шрифт на скриншоте.
*/

@font-face {
  font-family: 'Shoulders';
  src: url('shoulders-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Shoulders';
  src: url('shoulders-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Golos';
  src: url('golos-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Golos';
  src: url('golos-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ply-ink: #17130f;
  --ply-ink-soft: #4a4038;
  --ply-hush: #7d7168;
  --ply-page: #f6f5f3;
  --ply-card: #fffefc;
  --ply-tint: #efece7;
  --ply-line: #ded8d0;
  --ply-red: #ae080f;
  --ply-red-dark: #8c060c;
  --ply-red-wash: #fbeceb;
  --ply-dark: #1d1613;
  --ply-dark-soft: #2b211c;
  --ply-sand: #d9cfc2;

  /* Вердикты о посадке. Три разных цвета, а не один: на карточке в сетке читается
     только цвет полоски, слово ловится глазом уже вторым. */
  --ply-tts: #1f6b46;
  --ply-tts-wash: #e7f2eb;
  --ply-small: #a4560a;
  --ply-small-wash: #fbeee0;
  --ply-large: #2a5f8f;
  --ply-large-wash: #e6eef6;

  --ply-rail: 1180px;
  /* Боковое поле полосы. ⚠ Держать ОДНОЙ переменной, а не числом в двух местах: рейл
     новинок выходит за поле обратным margin, и стоит полю поменяться на брейкпоинте, как
     вылет остаётся прежним и распирает страницу. Так и вышло: на 520 поле стало 16px,
     вылет остался 22px, и главная поехала на 506px при экране 500. */
  --ply-gut: 22px;
  --ply-gap: 22px;
  --ply-round: 3px;
  --ply-shadow: 0 1px 2px rgba(23, 19, 15, .05), 0 8px 22px -14px rgba(23, 19, 15, .3);

  --ply-head: 'Shoulders', 'Arial Narrow', Impact, sans-serif;
  --ply-text: 'Golos', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ply-page);
  color: var(--ply-ink);
  font: 400 17px/1.62 var(--ply-text);
  letter-spacing: .002em;
}

h1, h2, h3, h4 {
  font-family: var(--ply-head);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: .004em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: 20px; letter-spacing: .01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ply-red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ply-red-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .38em; }

table { border-collapse: collapse; width: 100%; }

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--ply-red);
  outline-offset: 2px;
}

/* Ссылка для клавиатуры. Прячем сдвигом, а не display:none — иначе она недостижима
   и самой ссылкой быть перестаёт. */
.jumpseam {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--ply-red);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
}
.jumpseam:focus { left: 8px; top: 8px; color: #fff; }

.boltrun {
  width: 100%;
  max-width: var(--ply-rail);
  margin: 0 auto;
  padding: 0 22px;
}

main { display: block; }

/* ------------------------------------------------------------------ шапка и подвал */

.selvagetop {
  background: var(--ply-card);
  border-bottom: 1px solid var(--ply-line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.selvagetop .boltrun {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 74px;
  flex-wrap: wrap;
}

.blazon {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.blazon img { width: 104px; height: auto; }
.overlock {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ply-hush);
  max-width: 132px;
  border-left: 1px solid var(--ply-line);
  padding-left: 12px;
}

.plackettabs { margin-left: auto; }
.plackettabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.plackettabs a {
  color: var(--ply-ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.plackettabs a:hover,
.plackettabs a[aria-current='page'] {
  color: var(--ply-red);
  border-bottom-color: var(--ply-red);
}
.tapelink {
  background: var(--ply-red);
  color: #fff !important;
  padding: 7px 14px !important;
  border-radius: var(--ply-round);
  border-bottom: 0 !important;
}
.tapelink:hover { background: var(--ply-red-dark); }

.hemfoot {
  background: var(--ply-dark);
  color: #d9d2cb;
  margin-top: 70px;
  padding: 52px 0 34px;
  font-size: 15px;
}
/* ⚠ Отступ нужен после СВЕТЛОГО содержимого. На главной последняя секция сама тёмная, и
   70px светлого фона между двумя тёмными блоками читались как прореха, будто фон не
   дорисовался. Условие вешаем на то, что реально стоит выше, а не на класс главной:
   иначе дыра тихо вернётся на первой же странице, которая закончится тёмной полосой. */
main:has(> .sendoffband:last-child) + .hemfoot { margin-top: 0; }
.hemfoot a { color: #f0e9e2; text-decoration: none; }
.hemfoot a:hover { color: #fff; text-decoration: underline; }

.footgrid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footgrid h2 {
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ply-sand);
  margin-bottom: 14px;
}
.footgrid ul { list-style: none; margin: 0; padding: 0; }
.footgrid li { margin-bottom: .5em; }

.footsign img { width: 118px; margin-bottom: 14px; }
.footsign p { margin-bottom: .5em; }

.hemfoot .hushed { color: #9d938a; }

/* Дисклеймер приезжает текстом из data-weft уже в браузере. Пока скрипт не отработал,
   абзац пуст — поэтому у него нет своих отступов, чтобы не оставлять дыру. */
.finestitch {
  margin: 22px 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #9d938a;
  max-width: 70ch;
}
.finestitch:empty { margin: 0; }
.finestitch--near {
  color: var(--ply-hush);
  margin: 12px 0 0;
}

/* ------------------------------------------------------------- общее для всех страниц */

/* Полосы-фоны. Чередование plain / tint / ink — иначе страница читается одним полотном. */
.facing { padding: 58px 0; }
.facing--tint { background: var(--ply-tint); }
.facing + .facing { padding-top: 0; }
.facing--tint + .facing,
.facing + .facing--tint { padding-top: 58px; }

.pagerule { max-width: 66ch; margin: 0 0 30px; }
.pagerule h1, .pagerule h2 { margin-bottom: .3em; }

/* Надстрочная подпись. Не украшение: по ней на скриншоте видно, какая это секция,
   когда заголовки похожи друг на друга. */
/* ⚠ display: block обязателен. Класс висит на двенадцати <p> и на двух <span> внутри
   ссылок, где <p> не поставить, а у строчного элемента вертикальные поля не работают
   вовсе: в колонке «The other notes» метка вставала в одну строку с заголовком и
   читалась как «FITWhat a size letter leaves out». Правило само по себе выглядело
   рабочим, потому что на <p> оно и работало. */
.piping {
  display: block;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ply-red);
  margin: 0 0 .5em;
}
.piping a { text-decoration: none; }

.leadin {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ply-ink-soft);
}

.hushed { color: var(--ply-hush); font-size: 14px; }

/* Кнопки и кнопкоподобные ссылки. .buyplate — та самая, что несёт шифр. */
.pressplate,
.buyplate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ply-red);
  color: #fff;
  border: 1px solid var(--ply-red);
  border-radius: var(--ply-round);
  padding: 13px 24px;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.pressplate:hover,
.buyplate:hover { background: var(--ply-red-dark); border-color: var(--ply-red-dark); color: #fff; }

.pressplate--quiet {
  background: transparent;
  color: var(--ply-red);
}
.pressplate--quiet:hover { background: var(--ply-red-wash); color: var(--ply-red-dark); }

.pressplate--pale {
  background: #fff;
  color: var(--ply-dark);
  border-color: #fff;
}
.pressplate--pale:hover { background: var(--ply-sand); border-color: var(--ply-sand); color: var(--ply-dark); }

.pressplate--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.pressplate--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.buyplate { width: 100%; padding: 15px 24px; font-size: 18px; }
.buyplate--quiet {
  width: auto;
  background: transparent;
  color: var(--ply-red);
  font-size: 17px;
  padding: 13px 24px;
}
.buyplate--quiet:hover { background: var(--ply-red-wash); color: var(--ply-red-dark); }

/* Кнопка внутри карточки. Та же красная плашка, что и на странице товара, но набрана
   мельче: на разделе их два с половиной десятка в сетке по четыре, и кнопка в полный
   рост страницы товара превратила бы список в простыню плашек. */
.buyplate--slim {
  width: 100%;
  padding: 9px 14px;
  font-size: 15px;
  letter-spacing: .02em;
}

/* Хлебные крошки */
.crumbtape { padding: 20px 0 6px; font-size: 14px; }
.crumbtape ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ply-hush);
}
.crumbtape li + li::before { content: '/'; margin-right: 6px; color: var(--ply-line); }
.crumbtape a { color: var(--ply-hush); text-decoration: none; }
.crumbtape a:hover { color: var(--ply-red); }

/* Счётчик у плитки и большие цифры полосы статистики */
.countchip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ply-hush);
  background: var(--ply-tint);
  border-radius: 999px;
  padding: 2px 11px;
}
.countchip--big {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
  color: inherit;
}
.countchip--big strong {
  display: block;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.countchip--big span { display: block; font-size: 15px; color: var(--ply-sand); }

/* Пиллы-ссылки */
.notionrow { display: flex; flex-wrap: wrap; gap: 10px; }
.notionchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ply-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.notionchip:hover { border-color: var(--ply-red); color: var(--ply-red); }
.notionchip--go { background: var(--ply-dark); border-color: var(--ply-dark); color: #fff; }
.notionchip--go:hover { background: var(--ply-red); border-color: var(--ply-red); color: #fff; }
.notionrow-ask { margin-bottom: 20px; }

/* Таблицы. Одна разметка на все: справочник систем, спецификация карточки, разбор
   раздела. Заголовок строки слева, а не сверху — колонок бывает четыре. */
.gaugeboard {
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  font-size: 15px;
  margin-bottom: 1.2em;
}
.gaugeboard caption {
  text-align: left;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ply-hush);
  padding: 0 0 8px;
}
.gaugeboard th, .gaugeboard td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ply-line);
}
.gaugeboard thead th {
  background: var(--ply-tint);
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ply-ink-soft);
}
.gaugeboard tbody th { font-weight: 600; width: 30%; }
.gaugeboard tbody tr:last-child th,
.gaugeboard tbody tr:last-child td { border-bottom: 0; }

/* Список фактов */
.bulletsheet { list-style: none; padding: 0; }
.bulletsheet li {
  position: relative;
  padding-left: 22px;
  margin-bottom: .55em;
}
.bulletsheet li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--ply-red);
}
.bulletsheet--boxed {
  background: var(--ply-red-wash);
  border-left: 3px solid var(--ply-red);
  padding: 20px 22px;
  margin-bottom: 32px;
  font-size: 16px;
}

/* Вердикт о посадке. Цвет несёт смысл, поэтому у каждого вердикта свой. */
.verdictstrip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--ply-round);
  padding: 3px 9px;
  margin: 0;
}
.vs-tts { background: var(--ply-tts-wash); color: var(--ply-tts); }
.vs-small { background: var(--ply-small-wash); color: var(--ply-small); }
.vs-large { background: var(--ply-large-wash); color: var(--ply-large); }
.verdictstrip--wide {
  display: block;
  padding: 14px 16px;
  border-left: 3px solid currentColor;
  border-radius: 0;
  margin: 18px 0;
  font-size: 16px;
}
.verdictstrip--wide strong { display: block; margin-bottom: 4px; }
.verdictstrip--wide .hushed { color: inherit; opacity: .78; font-size: 13px; }

/* Звёзды и цена */
.tallyline {
  display: block;
  font-size: 13px;
  color: var(--ply-hush);
  margin-bottom: 8px;
}
.tallyline .hushed { color: #c8961f; font-size: 13px; letter-spacing: .5px; }

.pricemark {
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 4px;
}
.pricemark--big { font-size: clamp(28px, 3.4vw, 36px); margin-bottom: 10px; }

/* Цитаты. Review-разметки на них нет: это отзывы о вещи, а не о сайте. */
.hearsaybed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ply-gap);
}
.saidso {
  margin: 0;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-top: 3px solid var(--ply-red);
  padding: 24px 24px 20px;
}
.saidso blockquote { margin: 0 0 14px; }
.saidso blockquote p { font-size: 16px; line-height: 1.58; }
.saidso figcaption { font-size: 14px; color: var(--ply-hush); }
.saidso figcaption strong { color: var(--ply-ink); }
.saidso .piping { font-size: 12px; }

.alsorail { margin-top: 46px; }
.alsorail h2 { font-size: 26px; }

/* --------------------------------------------------------------------------- карточки

⚠ Снимок держится через aspect-ratio, а внутри картинка стоит абсолютом по inset:0.
Иначе флекс-плитка с картинкой внутри разъезжается: у неё min-height по умолчанию auto,
и высокий снимок раздувает ячейку, а соседние остаются прежними. */

.swatchbed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ply-gap);
}

.swatchpin {
  display: flex;
  flex-direction: column;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.swatchpin:hover { border-color: var(--ply-sand); box-shadow: var(--ply-shadow); }

.swatchpin-shot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border-bottom: 1px solid var(--ply-line);
}
.swatchpin-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.flagpin {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--ply-red);
  color: #fff;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--ply-round);
}

.swatchpin-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.swatchpin-body .piping { font-size: 11px; margin-bottom: .55em; }
.swatchpin-body h3 {
  font-family: var(--ply-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 10px;
}
.swatchpin-body h3 a { color: var(--ply-ink); text-decoration: none; }
.swatchpin-body h3 a:hover { color: var(--ply-red); }
.swatchpin-body .tallyline { margin-bottom: 10px; }

/* Подвал карточки: вердикт и кнопка. Прижат книзу, иначе у карточек с разной длиной
   названия низ встаёт на разной высоте и ряд выглядит рваным.
   ⚠ margin-top: auto держим ТОЛЬКО здесь. Пока он висел на самом вердикте, а кнопки не
   было, всё сходилось; со второй автоматической границей флекс начал делить остаток
   между ними и растаскивать вердикт с кнопкой в разные концы карточки. */
.swatchpin-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.swatchpin-foot .verdictstrip { margin: 0; }

/* ---------------------------------------------------------------------------- главная */

/* 1 — обложка */
.heroband {
  background: var(--ply-dark);
  color: #f2ece6;
  padding: 66px 0 70px;
}
.heroband-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
/* ⚠ min-width:0 обязателен: у грид-ячейки минимум по умолчанию auto, и длинное
   название вещи в рейле справа раздувает свою колонку, отжимая текст слева. */
.heroband-say { min-width: 0; }
.heroband h1 { color: #fff; margin-bottom: .3em; }
.heroband .piping { color: var(--ply-sand); }
.heroband .leadin { color: #ccc3ba; max-width: 54ch; }
.heroband-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.heroband-go .pressplate--quiet { color: #fff; border-color: rgba(255, 255, 255, .45); }
.heroband-go .pressplate--quiet:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Рейл топ-5. ⚠ Пять плиток в сетке из трёх колонок дают ряд 3 + 2 с дырой справа.
   Сетка на шесть колонок: первые две плитки по три колонки, три оставшихся по две —
   оба ряда заполнены целиком. На узком экране рейл едет горизонтальным скроллом, а не
   переносится: пять плиток в столбик отодвинули бы всё прочее на второй экран. */
.scrollrail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.scrollrail-pin:nth-child(1),
.scrollrail-pin:nth-child(2) { grid-column: span 3; }
.scrollrail-pin {
  grid-column: span 2;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ply-round);
  padding: 10px;
  text-decoration: none;
  color: #f2ece6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scrollrail-pin:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.scrollrail-pin img {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 2px;
  padding: 6px;
}
.scrollrail-say { display: block; font-size: 12.5px; line-height: 1.35; }
.scrollrail-say strong { display: block; font-weight: 600; margin-bottom: 3px; }
.scrollrail-say .hushed { color: var(--ply-sand); font-size: 12.5px; }

/* 2 — четыре обещания
   ⚠ Раньше это были четыре отдельные колонки с красной засечкой сверху, и секция 9
   («три ценности») выглядела ровно так же: столбики из заголовка и абзаца на том же
   светлом фоне. Отличались они числом колонок, то есть ничем. Здесь теперь сплошная
   полоса с волосяными перегородками и номером у каждого пункта, там — строки со знаком
   слева. Номера уместны: это перечень, а не рейтинг. */
.bobbinband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: bobbin;
  border-top: 1px solid var(--ply-line);
  border-bottom: 1px solid var(--ply-line);
}
.bobbincell {
  counter-increment: bobbin;
  padding: 26px 26px 26px 0;
}
.bobbincell + .bobbincell {
  border-left: 1px solid var(--ply-line);
  padding-left: 26px;
}
.bobbincell::before {
  content: counter(bobbin, decimal-leading-zero);
  display: block;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--ply-red);
  margin-bottom: 10px;
}
.bobbincell h2 { font-size: 21px; margin-bottom: .4em; }
.bobbincell p { font-size: 15.5px; color: var(--ply-ink-soft); margin: 0; }

/* 4 — сетка разделов */
.rackwall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ply-gap);
}
.rackplate {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 14px;
  text-decoration: none;
  color: var(--ply-ink);
}
.rackplate:hover { border-color: var(--ply-red); color: var(--ply-ink); }
.rackplate-shot {
  flex: 0 0 92px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.rackplate-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.rackplate-say { display: block; }
.rackplate-say strong {
  display: block;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.12;
  margin-bottom: 6px;
}
.rackplate-say .hushed { display: block; font-size: 13.5px; margin-bottom: 8px; }
.rackplate--bare { flex-direction: column; align-items: flex-start; gap: 8px; }
.rackplate--bare h2 { font-size: 19px; margin: 0; }
.rackplate--bare p { font-size: 14px; color: var(--ply-hush); margin: 0; }

/* 6 — промо-дуэт */
.grosgrainlot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ply-gap);
}
.grosgrain {
  display: block;
  padding: 40px 36px;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  background: var(--ply-card);
  text-decoration: none;
  color: var(--ply-ink);
}
.grosgrain h2 { margin-bottom: .35em; }
.grosgrain p { color: var(--ply-ink-soft); margin-bottom: 18px; }
.grosgrain-go {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ply-red);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.grosgrain--ink { background: var(--ply-dark); border-color: var(--ply-dark); color: #f2ece6; }
.grosgrain--ink h2 { color: #fff; }
.grosgrain--ink p { color: #c5bcb3; }
.grosgrain--ink .grosgrain-go { color: var(--ply-sand); }
.grosgrain:hover { border-color: var(--ply-red); }

/* 7 — свежее: строки во всю ширину
   Не сетка карточек: точно такая же сетка стоит секцией выше («что берут чаще всего»),
   и два одинаковых поля в один экран читались повтором. Здесь снимок, подпись, цена и
   кнопка выстроены в ряд, строки разделены волосяной линией. */
.freshrail {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ply-line);
}
.freshslip {
  display: grid;
  grid-template-columns: 74px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ply-line);
}
/* Снимок держим через aspect-ratio с картинкой абсолютом — та же причина, что у карточки:
   иначе высокий кадр раздувает свою строку, а соседние остаются прежними. */
.freshslip-shot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
}
.freshslip-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}
.freshslip-say { min-width: 0; }
.freshslip-say .piping { display: block; font-size: 11px; margin-bottom: .35em; }
.freshslip-say a {
  color: var(--ply-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
}
.freshslip-say a:hover { color: var(--ply-red); }
.freshslip-sum { margin: 0; font-size: 20px; }
/* Кнопка в строке своей ширины, а не во всю ячейку: --slim растягивает её на 100%, что
   верно внутри карточки и нелепо в ряду, где рядом стоит цена. */
.freshslip .buyplate--slim { width: auto; padding: 9px 18px; }

/* 8 — полоса цифр */
.yokeface { background: var(--ply-red); padding: 50px 0; color: #fff; }
.yokeface-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.yokeface .countchip--big span { color: rgba(255, 255, 255, .82); }

/* 9 — три ценности
   Знак стоит СЛЕВА от текста, а не над ним: столбик «картинка сверху, заголовок, абзац»
   — это ровно та фигура, которой набрана секция 2. Рамку со знака сняли по той же
   причине, что и белые коробки ниже: обведённых плашек на странице и без того хватало. */
.thimbleset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.thimble {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  align-items: start;
}
/* ⚠ Текст обязан быть ПРИБИТ ко второй колонке. Детей у блока три, а колонок две, и
   авторазмещение кладёт абзац во вторую строку ПЕРВОЙ колонки — то есть в 34 пикселя
   под знаком. Страница при этом цела и ничего никуда не вылезает: абзац просто набран
   по одному слову в строку, и увидеть это можно только на снимке. */
.thimble > h2,
.thimble > p { grid-column: 2; }
.thimble h2 { font-size: 23px; margin-bottom: .4em; }
.thimble p { color: var(--ply-ink-soft); font-size: 16px; margin: 0; }
.thimble-mark {
  display: block;
  color: var(--ply-red);
  padding-top: 2px;
}
.thimble-mark svg { width: 32px; height: 32px; }

/* 10 — шаги и справочная таблица */
.interlining {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
/* ⚠ Без этого справочная таблица распирает свою колонку, а вместе с ней и всю страницу:
   у грид-ячейки минимум по умолчанию auto, то есть ширина самого широкого содержимого,
   а таблица на узком экране идёт в nowrap. Симптом обманчивый — таблица выглядит
   нормально, зато у СОСЕДНЕЙ колонки со списком шагов пропадает правое поле, и строки
   упираются в край экрана. На 1280 не видно вовсе. */
.interlining > * { min-width: 0; }
.interlining h2 { font-size: 27px; }
.treadle { counter-reset: tread; list-style: none; padding: 0; margin-bottom: 20px; }
.treadle li {
  counter-increment: tread;
  position: relative;
  padding-left: 46px;
  margin-bottom: 1em;
  font-size: 16px;
  color: var(--ply-ink-soft);
}
.treadle li::before {
  content: counter(tread);
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ply-red);
  color: #fff;
  border-radius: 50%;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 17px;
}

/* 11 — один товар крупно */
.spotlamp {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 44px;
  align-items: center;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 32px;
}
.spotlamp-shot {
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  position: relative;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: 2px;
  overflow: hidden;
}
.spotlamp-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.spotlamp-say h2 { font-size: clamp(26px, 3vw, 34px); }
.spotlamp-say h2 a { color: var(--ply-ink); text-decoration: none; }
.spotlamp-say h2 a:hover { color: var(--ply-red); }
.spotlamp-say > p { color: var(--ply-ink-soft); }
.spotlamp-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.spotlamp-go .buyplate--quiet { width: auto; }

/* 12 — уход */
.laundermark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ply-gap);
}
/* ⚠ Не белые коробки. Белую плашку в рамке на главной носили шесть разных секций подряд
   — плитки разделов, промо-дуэт, товар крупно, эти два списка, цитаты и сами карточки, —
   и страница читалась стопкой одинаковых прямоугольников. Здесь подложку красит смысл:
   зелёная у «делать», красная у «не делать». Цвета уже заведены под вердикты о посадке,
   новых в палитру не добавляли. */
.laundermark > div {
  border-radius: var(--ply-round);
  padding: 26px 28px;
}
.laundermark-do { background: var(--ply-tts-wash); }
.laundermark-dont { background: var(--ply-red-wash); }
.laundermark h3 {
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.laundermark ul { list-style: none; padding: 0; margin: 0; }
.laundermark li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .6em;
  font-size: 15.5px;
  color: var(--ply-ink-soft);
}
.laundermark li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}
/* Цветной засечки сверху здесь больше нет: подложка уже несёт тот же цвет, а засечка —
   это приём секции с цитатами, и вдвоём они снова роднили два блока. */
.laundermark-do h3 { color: var(--ply-tts); }
.laundermark-do li::before { content: '\2713'; color: var(--ply-tts); }
.laundermark-dont h3 { color: var(--ply-red); }
.laundermark-dont li::before { content: '\2715'; color: var(--ply-red); }

/* 13 — миссия
   ⚠ Выключка левая и две колонки — против двойника с секцией 16. Обе полосы тёмные, у
   обеих h2 и абзац; пока и та и другая стояли по центру, они выглядели одной плашкой,
   напечатанной дважды за один экран прокрутки. Фон здесь на оттенок светлее (dark-soft
   против dark), но одного оттенка глазу мало — разводит именно раскладка. */
.creedband {
  background: var(--ply-dark-soft);
  color: #e8e1da;
  padding: 62px 0;
}
.creedband-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 20px 56px;
  align-items: start;
}
.creedband h2 { color: #fff; margin: 0; }
.creedband p { margin: 0; font-size: 18px; color: #c5bcb3; }

/* 14 — длинная заметка */
.longstitch { max-width: 84ch; }
.longstitch h2 { font-size: 30px; }
.longstitch h3 { margin-top: 1.4em; }
.longstitch p { color: var(--ply-ink-soft); }
.longstitch .gaugeboard { margin: 26px 0 30px; }

/* 16 — закрытие */
.sendoffband {
  background: var(--ply-dark);
  color: #e8e1da;
  padding: 62px 0;
  text-align: center;
}
.sendoffband h2 { color: #fff; }
.sendoffband p { color: #c5bcb3; max-width: 62ch; margin: 0 auto; font-size: 17.5px; }
.sendoffband-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

/* ---------------------------------------------------------------------------- разделы */

.ply-cat .pagerule,
.ply-hub .pagerule,
.ply-fit .pagerule,
.ply-note .pagerule,
.ply-leaf .pagerule,
.ply-lost .pagerule { margin-top: 12px; margin-bottom: 34px; }

.ply-lost .pagerule { max-width: 62ch; }
.ply-lost .rackwall { margin-bottom: 60px; }

/* Врезка о том, как названы размеры в этом разделе. Не украшение: это тот самый
   вопрос, ради которого сайт и собран. */
.sizeboard {
  margin-top: 46px;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-left: 3px solid var(--ply-red);
  border-radius: var(--ply-round);
  padding: 28px 30px;
}
.sizeboard h2 { font-size: 25px; }
.sizeboard h3 { margin-top: 1.4em; }
.sizeboard > p { color: var(--ply-ink-soft); max-width: 76ch; }
.sizeboard .gaugeboard { margin-top: 20px; margin-bottom: 0; }
.sizeboard .bulletsheet { margin-top: 12px; margin-bottom: 0; }

/* ---------------------------------------------------------------------------- карточка */

.rackplate-hero {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 46px;
  align-items: start;
  margin: 14px 0 54px;
}
.rackplate-hero-shot {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  overflow: hidden;
}
.rackplate-hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
}
.rackplate-hero-say h1 { font-size: clamp(28px, 3.6vw, 42px); }
.rackplate-hero-say .leadin { font-size: 17.5px; margin-bottom: 20px; }
.rackplate-hero-go { margin: 22px 0 0; max-width: 400px; }

.ply-item section { margin-bottom: 46px; }
.ply-item .runsheet { max-width: 76ch; }
.ply-item .runsheet h2,
.ply-item .featcell-bed h2,
.ply-item .sizeboard h2,
.ply-item .hearsaybed--item h2 { font-size: 26px; }

/* Четыре ячейки «как это сделано» */
.featcell-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ply-gap);
}
.featcell {
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 22px 22px 24px;
  border-top: 3px solid var(--ply-sand);
}
.featcell h3 { font-size: 17px; margin-bottom: .5em; }
.featcell p { font-size: 15px; color: var(--ply-ink-soft); margin: 0; }

/* Цитаты на карточке идут столбцом, а не в три колонки: они длиннее, чем на главной. */
.hearsaybed--item { display: block; }
.hearsaybed--item .saidso { margin-bottom: var(--ply-gap); }
.hearsaybed--item .saidso blockquote p { font-size: 16.5px; }

/* ======================================================== заметки: хаб и статья */

/* Хаб. Шесть плашек, снимок слева, текст справа — заметка это чтение, а не товар,
   и квадратная плитка с картинкой во всю ширину читалась бы как карточка вещи. */
.notebed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ply-gap);
  margin-bottom: 20px;
}
.noteplate {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 16px;
  color: inherit;
  /* ⚠ Снимать подчёркивание надо ЗДЕСЬ, а не в :hover. Плитка целиком это <a>, и браузер
     подчёркивал в ней всё подряд: метку, заголовок и абзац подводки на три строки. В
     :hover правило стояло, то есть подчёркивание уходило при наведении — задом наперёд, и
     на снимке хаба шесть плиток были расчерчены поперёк. */
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.noteplate:hover { border-color: var(--ply-sand); box-shadow: var(--ply-shadow); }
.noteplate-shot {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  min-height: 0;
  background: var(--ply-tint);
  border-radius: var(--ply-round);
  overflow: hidden;
}
.noteplate-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.noteplate-say { display: block; min-width: 0; }
.noteplate-say strong {
  display: block;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 6px 0 8px;
}
.noteplate:hover .noteplate-say strong { color: var(--ply-red); }

/* Подводка. Тот же элемент работает и в хабе, и закрывающим абзацем статьи. */
.deckline {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ply-hush);
}
.deckline--out {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ply-ink-soft);
  border-top: 1px solid var(--ply-line);
  padding-top: 20px;
  margin-top: 30px;
}

/* Статья. Колонка текста узкая нарочно: длинная строка на 1180px не читается. */
.runsheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 52px;
  align-items: start;
  margin-bottom: 54px;
}
.runsheet { max-width: 680px; }
.runsheet h2 {
  font-size: 25px;
  margin: 34px 0 .5em;
  padding-top: 4px;
}
.runsheet h2:first-child { margin-top: 0; }
.runsheet p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ply-ink-soft);
  margin-bottom: 1em;
}
.runsheet .bulletsheet { margin-bottom: 34px; }

/* Боковой столбец липнет к верху: статьи длинные, и ссылка на подборщик не должна
   уезжать вверх на весь экран прокрутки. */
.sidepin {
  position: sticky;
  top: 20px;
  background: var(--ply-tint);
  border-radius: var(--ply-round);
  padding: 22px 22px 24px;
}
.sidepin h2 {
  font-size: 13px;
  font-family: var(--ply-text);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ply-hush);
  margin-bottom: 16px;
}
.sidepin ul { list-style: none; }
.sidepin li {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ply-line);
}
.sidepin li:last-child { border-bottom: 0; }
.sidepin li .piping { margin-bottom: 3px; }
.sidepin li a {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  color: var(--ply-ink);
}
.sidepin li a:hover { color: var(--ply-red); }
.sidepin > p { margin: 20px 0 0; }
.sidepin .pressplate { width: 100%; justify-content: center; }

/* ============================================================ подборщик /tapeline */

.tapeform-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  margin-bottom: 60px;
}
.tapeform {
  position: sticky;
  top: 20px;
  background: var(--ply-tint);
  border-radius: var(--ply-round);
  padding: 24px 22px 18px;
}
.dropfield { margin-bottom: 20px; }
.dropfield label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ply-ink);
  margin-bottom: 7px;
}
/* ⚠ appearance:none снимает и стрелку тоже, поэтому она нарисована фоном. Без неё
   select на светлой плашке неотличим от поля ввода. */
.dropfield select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: 400 15px/1.3 var(--ply-text);
  color: var(--ply-ink);
  background-color: var(--ply-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d7168' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 10px 34px 10px 12px;
  cursor: pointer;
}
.dropfield select:focus-visible { outline: 2px solid var(--ply-red); outline-offset: 1px; }
.dropfield .hushed { display: block; margin-top: 6px; font-size: 13px; }
.tapeform-go { margin: 4px 0 0; }
.tapeform-go .pressplate { width: 100%; justify-content: center; }

/* Выдачу верстает notions.js. Пустой блок высоты не занимает — до первой отрисовки
   на его месте не должно зиять поле. */
.tapeout:empty { display: none; }
.tapetally {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.tapetally em { font-style: normal; color: var(--ply-red); }
.tapeout .hushed { margin-bottom: 20px; }
/* Ничего не нашлось — это ответ, а не поломка, и выглядеть он должен как ответ. */
.tapenone {
  background: var(--ply-red-wash);
  border-left: 3px solid var(--ply-red);
  border-radius: 0 var(--ply-round) var(--ply-round) 0;
  padding: 20px 22px;
  font-size: 16px;
  color: var(--ply-ink-soft);
}
.tapeout .swatchbed { grid-template-columns: repeat(3, 1fr); }

/* ============================================================= сервисные страницы */

.plainleaf {
  max-width: 700px;
  margin-bottom: 56px;
}
.plainleaf h2 {
  font-size: 24px;
  margin: 36px 0 .55em;
}
.plainleaf h2:first-child { margin-top: 0; }
.plainleaf p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ply-ink-soft);
  margin-bottom: 1em;
}
.plainleaf .pressplate { margin-top: 12px; }

/* Плашка для контакта: почта на странице «Write to us», почтовый адрес там же и списки
   вопросов на сервисных страницах. Стоит плашкой, чтобы его не искали глазами в абзаце. */
.askbox {
  background: var(--ply-tint);
  border-left: 3px solid var(--ply-red);
  border-radius: 0 var(--ply-round) var(--ply-round) 0;
  padding: 18px 22px;
  margin: 4px 0 1.2em;
}
.askbox a {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--ply-ink);
}
.askbox a:hover { color: var(--ply-red); }

/* ⚠ Той же плашкой набраны списки вопросов на трёх сервисных страницах (доставка,
   возврат, оплата), а стиля у dt/dd не было вовсе: вопрос шёл тем же весом, что ответ,
   и различались они только браузерным отступом в 40px. Выглядело как забытая вёрстка.
   Правило .askbox a сюда не достаёт — ссылок в этих списках нет. */
.askbox dt {
  font-weight: 600;
  color: var(--ply-ink);
}
.askbox dd {
  margin: 2px 0 0;
  color: var(--ply-text);
}
.askbox dd + dt { margin-top: 14px; }

/* ⚠ <address> браузер по умолчанию набирает КУРСИВОМ, и почтовый адрес поехал бы косо
   и в плашке, и в подвале — единственные два курсива на всём сайте. Тег выбран за смысл,
   не за вид, поэтому вид возвращаем руками. */
address.askbox,
.footpost {
  font-style: normal;
}
address.askbox {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--ply-ink);
}
/* В подвале адрес идёт следом за почтой и должен читаться тише её: это справка, а не
   способ связаться. */
.footpost {
  margin-top: 6px;
  max-width: 24em;
  line-height: 1.5;
}

/* Страница 404 — разделы плиткой без снимков, поэтому у плашки свой ряд. */
.ply-lost .rackwall { grid-template-columns: repeat(3, 1fr); }

/* ==================================================================== узкий экран

⚠ Проверять на 500px, не на 390: headless-Chrome в режиме new не умеет окно уже
примерно пятисот точек и молча обрезает снимок справа. Обрезанный правый край на
скриншоте 390 — артефакт съёмки, а не поломка вёрстки.

Порядок брейкпоинтов: 1024 убирает боковые столбцы, 760 складывает всё в одну
колонку, 520 подчищает шрифты и отступы. */

@media (max-width: 1024px) {
  .boltrun { padding: 0 var(--ply-gut); }

  .heroband-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Рейл на планшете уезжает горизонтальной лентой: пять плиток в один ряд по 1024
     дают по 180px, а под ними полоска вердикта, которая в такую ширину не влезает. */
  .scrollrail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--ply-gut));
    padding: 0 var(--ply-gut) 8px;
  }
  .scrollrail-pin { flex: 0 0 210px; scroll-snap-align: start; }

  /* ⚠ Перегородки полосы обещаний нельзя оставлять на `+`: при двух колонках правило
     достаётся ячейкам 2, 3 и 4, а третья открывает вторую строку — линия повисает на
     левом краю полосы, ниоткуда в никуда. Считаем по месту в ряду. */
  .bobbinband { grid-template-columns: repeat(2, 1fr); }
  .bobbincell + .bobbincell { border-left: 0; padding-left: 0; }
  .bobbincell:nth-child(2n) { border-left: 1px solid var(--ply-line); padding-left: 26px; }
  .bobbincell:nth-child(n + 3) { border-top: 1px solid var(--ply-line); }
  .rackwall,
  .ply-lost .rackwall { grid-template-columns: repeat(2, 1fr); }
  .swatchbed,
  .tapeout .swatchbed { grid-template-columns: repeat(3, 1fr); }
  .grosgrainlot { grid-template-columns: 1fr; }
  .thimbleset { grid-template-columns: 1fr; }
  .interlining { grid-template-columns: 1fr; gap: 34px; }
  .spotlamp { grid-template-columns: 320px 1fr; gap: 30px; padding: 24px; }
  .hearsaybed { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr 1fr; gap: 28px; }

  .rackplate-hero { grid-template-columns: 380px 1fr; gap: 32px; }
  .featcell-row { grid-template-columns: repeat(2, 1fr); }

  /* Боковые столбцы уходят вниз обычным блоком: липкая колонка в 240px не читается,
     а sticky на узком экране цепляет заголовок шапки. */
  .runsheet-grid,
  .tapeform-grid { grid-template-columns: 1fr; gap: 34px; }
  .sidepin,
  .tapeform { position: static; }
  .runsheet { max-width: none; }
  .tapeform { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; }
  .tapeform-go { grid-column: 1 / -1; }
  .tapeform-go .pressplate { width: auto; }
}

@media (max-width: 760px) {
  /* Шапка: логотип слева, меню под ним лентой. Гамбургера нет нарочно — восемь
     ссылок помещаются в две строки, а спрятанное меню требует скрипта. */
  .selvagetop .boltrun { gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
  .overlock { display: none; }
  .plackettabs { margin-left: 0; width: 100%; }
  .plackettabs ul { gap: 2px 14px; }
  .plackettabs a { font-size: 14px; }

  .facing { padding: 40px 0; }
  .heroband { padding: 44px 0 46px; }
  .yokeface { padding: 36px 0; }
  .yokeface-row { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  /* В одну колонку перегородки становятся горизонтальными: вертикальной делить нечего. */
  .bobbinband { grid-template-columns: 1fr; }
  .bobbincell { padding: 22px 0; }
  .bobbincell:nth-child(2n) { border-left: 0; padding-left: 0; }
  .bobbincell + .bobbincell { border-top: 1px solid var(--ply-line); }
  .swatchbed,
  .tapeout .swatchbed,
  .rackwall,
  .ply-lost .rackwall { grid-template-columns: repeat(2, 1fr); }
  .notebed { grid-template-columns: 1fr; }
  .laundermark { grid-template-columns: 1fr; }
  .creedband-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Ряд новинок складывается в два этажа: снимок держит левый столбец на обе строки,
     справа сверху название, снизу цена и кнопка. Оставить цену и кнопку в одной строке
     с названием нельзя — на 500px им втроём остаётся меньше половины ширины, и название
     сжимается в столбик по слову. */
  .freshslip {
    grid-template-columns: 74px 1fr auto;
    gap: 10px 16px;
    align-items: start;
  }
  .freshslip-shot { grid-row: 1 / span 2; }
  .freshslip-say { grid-column: 2 / span 2; }
  .freshslip-sum { grid-column: 2; align-self: center; }
  .freshslip .buyplate--slim { grid-column: 3; }
  .spotlamp { grid-template-columns: 1fr; }
  .featcell-row { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr; gap: 24px; }

  /* Карточка товара: снимок над текстом во всю ширину. */
  .rackplate-hero { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }

  /* Прокрутка своя, иначе широкая таблица уводит вбок всю страницу и правый край шапки
     обрезается.
     ⚠ БЕЗ nowrap. Запрет переноса ставился ради размерных чартов, но чартов-таблиц на
     сайте нет вовсе (мерки поставщика идут списком .bulletsheet), зато в каждой таблице
     есть колонка с фразой: «Go one size down unless you want the…» в одну строку не
     влезает никогда. Страница при этом цела, проба переполнения молчит — прокрутка
     съедает вылет внутри себя, — и обрубленный текст виден ТОЛЬКО на снимке. */
  .gaugeboard { display: block; overflow-x: auto; }
  /* ⚠ Поля ячеек на узком экране решают больше, чем текст: по 14px с двух сторон на
     четырёх колонках это 112px из пятисот, и таблица наименований размеров не влезала
     ровно на эту разницу (419 при 402). Резать хотелось колонку. */
  .gaugeboard th, .gaugeboard td { padding: 10px 8px; }
  .gaugeboard th:first-child, .gaugeboard td:first-child { padding-left: 0; }
  .gaugeboard th:last-child, .gaugeboard td:last-child { padding-right: 0; }

  .tapeform { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  /* Меняем поле переменной, а не свойством .boltrun: тогда вылет рейла уезжает следом сам. */
  :root { --ply-gut: 16px; }
  .blazon img { width: 88px; }

  h1 { font-size: clamp(28px, 8vw, 34px); }
  .leadin { font-size: 16.5px; }
  .runsheet p,
  .plainleaf p { font-size: 16px; }
  .runsheet h2,
  .plainleaf h2 { font-size: 21px; }
  .longstitch h2 { font-size: 24px; }

  .swatchbed,
  .tapeout .swatchbed { grid-template-columns: 1fr 1fr; gap: 12px; }
  .swatchpin-body { padding: 12px 12px 14px; }
  .rackwall,
  .ply-lost .rackwall { grid-template-columns: 1fr; }
  .yokeface-row { grid-template-columns: 1fr 1fr; }

  .scrollrail-pin { flex-basis: 172px; }
  .noteplate { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .noteplate-say strong { font-size: 18px; }

  .heroband-go,
  .sendoffband-go,
  .grosgrain-go { flex-direction: column; align-items: stretch; }
  .heroband-go .pressplate,
  .sendoffband-go .pressplate,
  .grosgrain-go .pressplate { justify-content: center; }
}