/* ═══ СТРАНИЦА ПРОДУКТА — ОДИН ЯЗЫК С ГЛАВНОЙ (25.09) ═══════════════════
   Даня: «блоки все разные, много пустого места». Замер до правки: шесть
   способов показать список (коробки с рамкой, цветные карточки с цифрой,
   круги, облако, аккордеон, витрина), заголовки по центру с чёрточкой,
   по 88px воздуха сверху и снизу каждой секции (около 1700px страницы —
   одни отступы) и хэйрлайн между всеми секциями.

   Стало:
   · шапка секции — .nx-head главной: слева, фиолетовый Arsenal, серая
     строка под ним (правило общее, живёт в home.css);
   · содержимое только двух видов: РЯДЫ (номер или точка, волосяная линия)
     и ПЛИТКИ (рамка без заливки — полотно просвечивает, как требует
     sheet.css для всех рамочных блоков);
   · один тёмный акцент — плита лектора в цвет подвала, как подписка;
   · один воздух между секциями, без линий, один рельс на всю страницу.
   Отзывы не тронуты — по слову Дани.

   Размеры — компонентными переменными на body.prod-clean, а не литералами:
   test_design_tokens считает сырые кегли и тени по всем таблицам. */
body.prod-clean{
  --pp-gap:clamp(56px,6.4vw,96px);        /* воздух между секциями, один на всю страницу */
  --pp-head-gap:clamp(24px,2.8vw,40px);   /* шапка секции → содержимое */
  --pp-col-gap:clamp(28px,4vw,64px);      /* между колонками рядов */
  --pp-h1:clamp(34px,4.4vw,62px);
  --pp-num:clamp(40px,3.6vw,54px);
  --pp-name:clamp(32px,3.4vw,48px);
  --pp-card-t:clamp(22px,2vw,28px);
  --pp-quote:clamp(19px,1.6vw,23px);
  --pp-r:22px;                            /* плитка и карточка */
  --pp-plate-pad:clamp(12px,1.2vw,16px);  /* поле плиты вокруг фото */
  --pp-line:var(--hair);
  --pp-line-dark:rgba(255,255,255,.14);
}

/* ── ритм: воздух только сверху секции, линий между секциями нет ───── */
body.prod-clean .pp-sec{padding:var(--pp-gap) 0 0}
body.prod-clean article > .pp-sec:last-child{padding-bottom:var(--pp-gap)}
body.prod-clean .nx-head{margin-bottom:var(--pp-head-gap)}
body.prod-clean .nx-head h2{margin-top:0}
/* отзывы как есть; снята только общая линия над ними и нижний отступ —
   иначе после облака набегало 72 + 96px пустоты. Под правило попадает и
   строка статуса после отправки отзыва (?review=…) — та же секция без id */
body.prod-clean article > .reviews{border-top:0;padding:var(--pp-gap) 0 0}
body.prod-clean article > .reviews:not(#reviews) + #reviews{padding-top:24px}
/* под шестью карточками — ссылка на полку продукта в /otzyvy/ */
body.prod-clean .rev-all{display:flex;justify-content:center;margin:28px 0 24px}

/* ── первый экран: заголовок тем же жирным Arsenal, что на главной ─── */
/* узор первого экрана — само сквозное полотно, а не отдельная лента.
   Лента (была в design-layer.js) ложилась поверх полотна чужим узором:
   другая линия, другая толщина, и они пересекались (Даня 26.09). Теперь
   ленты нет, а полотно в зоне баннера проявляется диагональной волной
   сверху справа вниз налево — тем же ходом и темпом, каким рисовалась
   лента. Когда волна прошла, первый экран и страница — один узор без шва.
   Маска полотна из трёх слоёв: знак (sheet.css) ∩ (ниже баннера — всегда
   ∪ в баннере — волна). --hero-end и старт волны ставит design-layer.js,
   --pp-reveal анимируется (@property). Без скрипта волна идёт по первым 100vh и тоже открывает полотно целиком */
@property --pp-reveal{syntax:'<percentage>';inherits:false;initial-value:118%}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  body.prod-clean::after{
    --pp-hero:calc(var(--hero-end,100vh) + 200px);
    -webkit-mask:url("../img/sheet/canvas.dfda29212f01.svg") repeat-y center top / var(--sheet-w) auto,
      linear-gradient(to bottom,transparent var(--pp-hero),#000 var(--pp-hero)),
      linear-gradient(225deg,#000 calc(var(--pp-reveal) - 18%),transparent var(--pp-reveal)) 0 0 / 100% var(--pp-hero) no-repeat;
    -webkit-mask-composite:source-in,source-over;
    mask:url("../img/sheet/canvas.dfda29212f01.svg") repeat-y center top / var(--sheet-w) auto,
      linear-gradient(to bottom,transparent var(--pp-hero),#000 var(--pp-hero)),
      linear-gradient(225deg,#000 calc(var(--pp-reveal) - 18%),transparent var(--pp-reveal)) 0 0 / 100% var(--pp-hero) no-repeat;
    mask-composite:intersect,add}
  /* со скриптом волна ждёт своего часа: до старта полотно в баннере скрыто
     (иначе оно мелькнуло бы целиком и пропало), а запускает её
     design-layer.js классом pp-draw, когда баннер собран — как ленту.
     Кривая ровная: у --dl-ease почти весь путь в первые доли секунды, и
     волна успевала пройти до того, как страница видна */
  html.js body.prod-clean::after{--pp-reveal:0%}
  html.js body.prod-clean.pp-draw::after{animation:pp-sheet-draw 2.8s cubic-bezier(.45,.05,.25,1) .15s forwards}
}
@keyframes pp-sheet-draw{from{--pp-reveal:0%}to{--pp-reveal:118%}}

body.prod-clean .pbar{padding:clamp(28px,3.4vw,48px) 0 0}
body.prod-clean .pbar h1{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--pp-h1);
  line-height:1.04;letter-spacing:-.02em;text-wrap:balance;margin:0 0 18px}
body.prod-clean .pbar .price-row{margin:22px 0 0}
body.prod-clean .pbar .pbuy{margin-top:22px}
/* чип «бессрочный доступ / доступ N мес.» в строке цены — только телефон и
   планшет; на ноутбуке он, как был, у кнопки (.pbuy .muted). Белый с рамкой */
body.prod-clean .price-chip{display:none;align-items:center;gap:6px;padding:5px 11px 5px 9px;
  border:1px solid var(--edge-strong);border-radius:999px;background:var(--white);color:var(--violet);
  font-weight:600;font-size:var(--fs-fine);line-height:1.2;white-space:nowrap}
body.prod-clean .price-chip::before{content:"";width:13px;height:13px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center/contain no-repeat}
/* телефон и планшет — одна колонка. Обложка шла первой во всю ширину и одна
   занимала экран: на iPhone 13 название начиналось ниже 600px, цена и кнопка —
   ниже 900px (разбор ИИ-клиенток 13.10, g1-02). 13.10 её увели под кнопку, и
   Дане порядок показался нелогичным; из трёх примерок он выбрал C (14.10):
   крошки → обложка иконкой 96px слева от названия → цена с чипом доступа →
   кнопка → описание → подарок. Большой обложки на телефоне нет. Описание ниже
   кнопки, а не над ценой: оно бывает в 444 знака и одно уводило кнопку за
   экран. Колонка текста растворена (display:contents), чтобы её блоки встали
   в сетку рядом с обложкой. Подчёркивание крошек — линией
   текста: рамку уносил вниз отступ площади нажатия (style.css), и при
   переносе она ложилась поперёк второй строки */
@media(max-width:920px){
  /* одно длинное слово («Инсулинорезистентность», 22 буквы) шире строки:
     дорожка 1fr раздвигалась по нему, и колонка уезжала за край экрана 360px.
     Дорожка не шире контейнера, слово длиннее строки переносится. Кегль ниже,
     чем был во всю ширину: строка названия — то, что осталось справа от иконки
     (24,5px на 360, 26,5px на 390, планшет как был) */
  body.prod-clean{--pp-h1:clamp(24px,6.8vw,34px)}
  body.prod-clean .pbar__grid{gap:0 16px;grid-template-columns:96px minmax(0,1fr)}
  body.prod-clean .pbar__grid > :not(.pbar__media){display:contents}
  body.prod-clean .pbar__grid > div > *{grid-column:1/-1}
  body.prod-clean .pbar .crumbs{order:-2}
  /* в Студии название с описанием — один блок с карандашом, он и встаёт у иконки */
  body.prod-clean .pbar h1,body.prod-clean .pbar [data-studio-block="product.head"]{order:-1;grid-column:2;align-self:center}
  /* перенос по слогам — только в словах от 16 букв (8 до разрыва и 8 после):
     «Инсулинорезистентность» в строку у иконки не входит и без него рвалась
     без дефиса, а названия из обычных слов не дробятся */
  body.prod-clean .pbar h1{margin-bottom:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;
    hyphenate-limit-chars:16 8 8;-webkit-hyphenate-limit-before:8;-webkit-hyphenate-limit-after:8}
  /* параллакс (dl-drift) возил бы иконку относительно названия — снят */
  body.prod-clean .pbar__media{order:-1;grid-column:1;align-self:start;width:96px;height:96px;
    aspect-ratio:1;min-height:0;border-radius:22px;background-clip:padding-box;animation:none}
  /* статуэтка на всех обложках — в середине кадра (26–74 % высоты), в иконке
     она крупнее в 1,5 раза: object-fit:none рисует картинку в её собственном
     размере, а его задаёт sizes="…, 144px" в product_page.html (96 × 1,5).
     Рамка картинки остаётся 96px — от неё стартует полёт в корзину (cart-dock.js).
     Углы режет рамка (overflow:hidden), а фон-заглушка (hero-cover.webp) не
     заходит под полупрозрачную рамку: на 96px она темнила кант иконки */
  body.prod-clean .pbar__media .pbar__img{object-fit:none;border-radius:0}
  body.prod-clean .pbar .price-row{flex-wrap:wrap;column-gap:12px;row-gap:8px}
  body.prod-clean .pbar .price-chip{display:inline-flex}
  body.prod-clean .pbar .pbuy__dur{display:none}
  body.prod-clean .pbar .lede{order:2;margin:28px 0 0}
  body.prod-clean .pbar .pgift{order:3}
  /* у элементов сетки поля не схлопываются: дата и ошибка отдают низ
     соседу, плашка скидки — по ширине текста, а не во всю колонку */
  body.prod-clean .pbar .pdates,body.prod-clean .pbar .dj-error{margin-bottom:0}
  body.prod-clean .pbar .smart-note{justify-self:start}
  /* проявление по порядку на экране, а не в разметке: иконка — вместе с
     названием, описание — последним */
  body.prod-clean .pbar__media.dl-rv{--dl-i:2!important}
  body.prod-clean .pbar .lede.dl-rv{--dl-i:6!important}
  body.prod-clean .pbar .crumbs a{border-bottom:0;text-decoration:underline 1px var(--edge-strong);
    text-underline-offset:5px}
}
/* подарок: не кремовая плашка с пунктиром (беж запрещён 20.09), а та же
   рамка без заливки, что у плиток; текст и кнопка в одну строку */
body.prod-clean .pgift{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 20px;margin-top:22px;padding:18px 20px;background:transparent;
  border:1px solid var(--pp-line);border-radius:var(--r-panel)}
body.prod-clean .pgift__copy{flex:1 1 240px}
/* форма с одной кнопкой (согласие уже дано) — в строку с текстом; с
   галочкой согласия — отдельной строкой во всю ширину под текстом */
body.prod-clean .pgift__form{flex:0 0 auto}
body.prod-clean .pgift__form--law{flex:1 1 100%}
/* строка акцепта документов — под текстом и кнопкой, во всю ширину блока */
body.prod-clean .pgift__docs{flex:1 1 100%;margin:0;font-size:var(--fs-mini);line-height:1.5;color:var(--muted)}
body.prod-clean .pgift__docs a{color:var(--violet);text-decoration:underline}

/* ── плитки «Что внутри» ───────────────────────────────────────────── */
body.prod-clean .pp-tiles{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
body.prod-clean .pp-tile{display:flex;flex-direction:column;gap:8px;
  min-height:clamp(200px,16vw,236px);padding:clamp(22px,2vw,28px);
  border:1px solid var(--pp-line);border-radius:var(--pp-r);
  transition:border-color .45s var(--dl-ease)}
body.prod-clean .pp-tile:hover{border-color:var(--hair-active)}
/* число прижато кверху, подпись — к низу: ряд читается по двум линиям */
body.prod-clean .pp-tile__n{margin-bottom:auto;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--pp-num);line-height:1;letter-spacing:-.02em;color:var(--violet);
  font-variant-numeric:tabular-nums}
body.prod-clean .pp-tile__n svg{display:block;width:calc(var(--pp-num) * .8);height:calc(var(--pp-num) * .8);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body.prod-clean .pp-tile__t{font-size:var(--fs-lg);font-weight:600;line-height:1.3;color:var(--ink)}
body.prod-clean .pp-tile__p{margin:0;font-size:var(--fs-note);line-height:1.55;color:var(--muted)}
/* подсетка: число, заголовок и пояснение каждой плитки встают на общие
   линии ряда — иначе заголовок под длинным пояснением уезжал вверх */
@supports (grid-template-rows:subgrid){
  body.prod-clean .pp-tile{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;
    align-content:start;min-height:0}
  body.prod-clean .pp-tile__n{margin-bottom:clamp(28px,3vw,44px)}
  body.prod-clean .pp-tile__t{margin-bottom:8px}
}
body.prod-clean .pp-tile--night{background:linear-gradient(155deg,var(--night),var(--night-2));
  border-color:transparent}
body.prod-clean .pp-tile--night .pp-tile__n{color:var(--lavender-2)}
body.prod-clean .pp-tile--night .pp-tile__t{color:#fff}
body.prod-clean .pp-tile--night .pp-tile__p{color:rgba(255,255,255,.72)}

/* ── «О продукте»: разделы-карточки ───────────────────────────────────
   Даня 25.09: рядами текст «виден, но как будто пустота». Описание режется
   на разделы при выводе (apps/catalog/prose.py): карточка — рамка, как у
   плиток «Что внутри»; слева крупный номер и заголовок, справа пункты с
   галочкой в кружке и строка «Результат» на бледной лаванде.
   Описания перенесены со старого сайта со стилем в каждом span: чёрный
   цвет и шрифт Raleway, которого на сайте нет, — текст рисовался
   системным Arial. Гасим эти стили здесь, данные не трогаем. */
body.prod-clean .pp-prose{max-width:none;font-size:var(--fs-lg);line-height:1.6;color:var(--ink)}
body.prod-clean .pp-prose [style]{color:inherit!important;font-family:inherit!important;
  font-size:inherit!important;background:none!important}
body.prod-clean .pp-prose p{max-width:68ch;margin:0 0 10px}
body.prod-clean .pp-prose strong,body.prod-clean .pp-prose b{font-weight:700;color:var(--ink)}

/* вводный абзац до первого раздела и строка над нумерованными разделами */
body.prod-clean .pp-intro{margin-bottom:var(--pp-head-gap)}
body.prod-clean .pp-intro p{font-size:var(--fs-lede);line-height:1.55;color:var(--text-secondary)}
body.prod-clean .pp-lead{margin:0 0 20px}
body.prod-clean .pp-lead p{margin:0;color:var(--text-secondary)}
body.prod-clean .pp-lead .pp-lead__t{font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--fs-h3);line-height:1.2;color:var(--violet);margin-bottom:6px}

body.prod-clean .pp-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(20px,3.2vw,56px);padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--pp-line);border-radius:var(--pp-r);
  transition:border-color .45s var(--dl-ease)}
body.prod-clean .pp-card:hover{border-color:var(--hair-active)}
body.prod-clean .pp-card + .pp-card{margin-top:12px}
body.prod-clean .pp-card__n{display:block;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--pp-num);line-height:1;letter-spacing:-.02em;color:var(--violet);
  font-variant-numeric:tabular-nums}
body.prod-clean .pp-card__t{margin:14px 0 0;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--pp-card-t);line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
body.prod-clean .pp-card__body > :first-child{margin-top:0}
body.prod-clean .pp-card__body > :last-child{margin-bottom:0}
body.prod-clean .pp-card__body p{max-width:none}
body.prod-clean .pp-card__body strong,body.prod-clean .pp-card__body b{color:var(--violet)}
/* один бонус — плашкой «В подарок» в карточке перед ним (apps/catalog/prose.py,
   13.10.2026): отдельной карточкой он был полосой во всю ширину с одной
   строкой. На ПК плашка встаёт вниз пустой левой колонки, под заголовок,
   список справа тянется на обе строки сетки; на телефоне — в конец карточки.
   Без заливки: белое и рамка, как все светлые блоки сайта */
body.prod-clean .pp-card--gift .pp-card__body{grid-row:1 / span 2}
body.prod-clean .pp-gift{grid-column:1;grid-row:2;align-self:end;margin:0;display:flex;align-items:flex-start;
  gap:12px;padding:14px 16px;border:1px solid var(--pp-line);border-radius:calc(var(--pp-r) - 8px);
  background:#fff;font-size:15px;line-height:1.45;color:var(--ink)}
body.prod-clean .pp-gift__i{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--violet);color:#fff}
body.prod-clean .pp-gift__i svg{width:18px;height:18px}
body.prod-clean .pp-gift__k{display:block;margin-bottom:2px;font:600 12px/1.3 'Open Sans',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--terra)}
body.prod-clean .pp-gift b,body.prod-clean .pp-gift strong{color:var(--violet)}
@media(max-width:760px){
  body.prod-clean .pp-card--gift .pp-card__body{grid-row:auto}
  body.prod-clean .pp-gift{grid-column:auto;grid-row:auto}
}
/* «станет понятно:» перед списком — подзаголовок внутри карточки */
body.prod-clean .pp-prose .pp-sub{margin:20px 0 6px;font-weight:600;color:var(--ink)}
body.prod-clean .pp-card__body > .pp-sub:first-child{margin-top:0}

/* пункт — галочка в кружке, как в «Для кого»; длинный список — в две колонки */
body.prod-clean .pp-prose ul{list-style:none;margin:6px 0 14px;padding:0}
body.prod-clean .pp-prose ul:has(> li:nth-child(7)){columns:2;column-gap:clamp(24px,3vw,48px)}
body.prod-clean .pp-prose ul > li{break-inside:avoid;position:relative;padding:10px 0 10px 38px}
body.prod-clean .pp-prose ul > li::before{content:"";position:absolute;left:0;top:calc(10px + .8em - 13px);
  width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-strong);
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23563D87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.5l4 4 8-9"/></svg>') center/13px no-repeat}
/* нумерованный список внутри раздела — номер в кружке, счёт с 1 у каждого */
body.prod-clean .pp-prose ol{list-style:none;margin:6px 0 14px;padding:0;counter-reset:pp-o}
body.prod-clean .pp-prose ol > li{counter-increment:pp-o;position:relative;padding:10px 0 10px 38px}
body.prod-clean .pp-prose ol > li::before{content:counter(pp-o);position:absolute;left:0;top:calc(10px + .8em - 13px);
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-strong);
  font-size:var(--fs-fine);font-weight:600;line-height:1;color:var(--violet);font-variant-numeric:tabular-nums}

/* «Результат: …» — вывод раздела в тонкой рамке без заливки. Лавандовая
   подложка читалась розовой плашкой (Даня 26.09, как беж 20.09 и серый 25.09) */
body.prod-clean .pp-prose .pp-result{max-width:none;margin:16px 0 0;padding:14px 18px;
  border:1px solid var(--hair-strong);border-radius:var(--r-small);color:var(--ink)}
body.prod-clean .pp-result__k{display:block;margin-bottom:2px;font-size:var(--fs-tag);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}

/* «Для кого» — те же ряды с галочкой, в две колонки слева, а не узкой
   колонкой по центру */
body.prod-clean .pp-sec .for-whom{max-width:none}   /* .prose держит 66ch — список жался к левому краю */
body.prod-clean .pp-sec .for-whom ul{display:block;max-width:none;margin:0;columns:2;column-gap:var(--pp-col-gap)}
body.prod-clean .pp-sec .for-whom li,
body.prod-clean .pp-sec .for-whom li:first-child{break-inside:avoid;border-top:1px solid var(--pp-line)}

/* ── программа: ряды с номером, как «Направления» на «Обо мне» ──────── */
body.prod-clean .pp-count{display:flex;flex-direction:column;align-items:flex-end;margin:0}
body.prod-clean .pp-count b{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--pp-num);
  line-height:.95;letter-spacing:-.02em;color:var(--violet);font-variant-numeric:tabular-nums}
body.prod-clean .pp-count span{font-size:var(--fs-note);color:var(--muted)}
body.prod-clean .pp-rows{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--pp-col-gap)}
body.prod-clean .pp-row{break-inside:avoid;display:grid;grid-template-columns:44px minmax(0,1fr);
  align-items:baseline;padding:16px 0;border-top:1px solid var(--pp-line)}
body.prod-clean .pp-row__n{font-size:var(--fs-note);font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
body.prod-clean .pp-row__t{font-size:var(--fs-lg);line-height:1.45;color:var(--ink)}
/* программа — в плите с рамкой, как разделы описания; номер урока — в
   кружке. Верхние линии первых рядов обеих колонок срезает overflow плиты:
   иначе под рамкой плиты шла вторая линия */
body.prod-clean .pp-box{overflow:hidden;padding:0 clamp(20px,2.8vw,40px);
  border:1px solid var(--pp-line);border-radius:var(--pp-r)}
body.prod-clean .pp-box .pp-rows{margin-top:-1px}
body.prod-clean .pp-box .pp-row{align-items:start;padding:18px 0}
body.prod-clean .pp-box .pp-row__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hair-strong);font-size:var(--fs-fine);color:var(--violet)}
body.prod-clean .pp-box .pp-row__t{padding-top:3px;font-weight:500}
body.prod-clean .pp-box .prog-more{margin:16px 0 24px}
/* больше восьми уроков — motion.js ставит .collapsed и кнопку «Показать
   всю программу». Прячем пункты после восьмого, а не режем высотой:
   колонки с ограниченной высотой уводят остаток в невидимые колонки справа */
body.prod-clean .pp-prog.collapsed .pp-row:nth-child(n+9){display:none}
body.prod-clean .pp-prog.collapsed .pp-rows{-webkit-mask-image:linear-gradient(#000 70%,transparent);
  mask-image:linear-gradient(#000 70%,transparent)}
body.prod-clean .pp-prog .prog-more{margin-top:20px}
body.prod-clean .pp-row__m{display:block;margin-top:4px;font-size:var(--fs-tag);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ── лектор: тёмная плита ─────────────────────────────────────────────
   Скругления концентрические: фото — --r-panel, плита — оно же плюс поле. */
body.prod-clean .pp-plate{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,64px);align-items:center;padding:var(--pp-plate-pad);
  border-radius:calc(var(--r-panel) + var(--pp-plate-pad));
  background:linear-gradient(155deg,var(--night),var(--night-2));color:#fff}
body.prod-clean .pp-plate__media{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-panel)}
body.prod-clean .pp-plate__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
body.prod-clean .pp-plate__body{padding:clamp(12px,2vw,32px) clamp(12px,3vw,48px) clamp(12px,2vw,32px) 0}
body.prod-clean .pp-eyebrow{font-size:var(--fs-mini);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lavender-2)}
body.prod-clean .pp-plate__name{margin:12px 0 0;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--pp-name);line-height:1.04;letter-spacing:-.02em;color:#fff}
body.prod-clean .pp-plate__role{margin:10px 0 0;font-size:var(--fs-md);line-height:1.5;color:var(--lavender-2)}
body.prod-clean .pp-plate__quote{margin:24px 0 0;padding:0;max-width:42ch;font-family:'Arsenal',Georgia,serif;
  font-style:italic;font-weight:400;font-size:var(--pp-quote);line-height:1.4;color:rgba(255,255,255,.92)}
body.prod-clean .pp-plate__cite{display:block;margin-top:12px;font-family:'Open Sans',sans-serif;
  font-style:normal;font-size:var(--fs-mini);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lavender-2)}
body.prod-clean .pp-plate__facts{list-style:none;margin:26px 0 0;padding:0}
body.prod-clean .pp-plate__facts li{padding:13px 0;border-top:1px solid var(--pp-line-dark);
  font-size:var(--fs-md);line-height:1.5;color:rgba(255,255,255,.82)}
body.prod-clean .pp-plate__go{margin-top:28px}

/* стрелка в кружке — как у «Узнать подробнее» в шапке и кнопок «Обо мне»:
   на светлой пилюле кружок фиолетовый, правый отступ поджат к кружку */
body.prod-clean .pp-arr{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  background:var(--violet);color:#fff;font-size:var(--fs-note);line-height:1;
  transition:transform .4s var(--dl-ease)}
body.prod-clean .nx-btn:has(.pp-arr){padding-right:11px;gap:14px}
body.prod-clean .nx-btn:hover .pp-arr{transform:translateX(2px)}

/* ── частые вопросы: строки с линией, как «Квалификация» на «Обо мне» ── */
body.prod-clean .pp-faq .accordion{gap:0;border-bottom:1px solid var(--pp-line)}
body.prod-clean .pp-faq .acc{border:0;border-top:1px solid var(--pp-line);border-radius:0;box-shadow:none}
body.prod-clean .pp-faq .acc__head{padding:22px 0;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--fs-h4);line-height:1.3;color:var(--ink)}
body.prod-clean .pp-faq .acc__head .pm{width:32px;height:32px;background:none;
  border:1px solid var(--hair-strong);color:var(--violet)}
/* раскрытый: общий слой (design-layer.css) белит чёрточки под заливку, а
   здесь заливку сняли — белое на белом, кружок стоял пустым (Даня, 13.10).
   Поворот 45° из style.css клал минус наискось */
body.prod-clean .pp-faq .acc.open .acc__head .pm{background:var(--violet);border-color:var(--violet);transform:none}
body.prod-clean .pp-faq .acc__body div{max-width:72ch;padding:0 56px 24px 0;font-size:var(--fs-md);
  line-height:1.6;color:var(--text-secondary)}

/* ── «Вам может быть интересно»: ровно четыре в ряд ─────────────────── */
body.prod-clean .pp-rel .related{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
body.prod-clean .pp-rel .rel{border-radius:var(--pp-r)}
body.prod-clean .pp-rel .rel .b b{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-h4);
  line-height:1.2;color:var(--ink)}
body.prod-clean .pp-rel .rel .b .p{white-space:nowrap}

/* ── адаптив ───────────────────────────────────────────────────────── */
@media(max-width:1100px){
  /* четыре плитки на планшете — две по две; три (у продукта без файлов)
     остаются в ряд — иначе вышло бы два и одна снизу */
  body.prod-clean .pp-tiles:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  /* плита на планшете остаётся в две колонки, фото уже: одной колонкой
     квадрат выходил 520–720px и плита росла до 1200px */
  body.prod-clean .pp-plate{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  body.prod-clean .pp-rel .related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body.prod-clean .pp-tiles:not(:has(> :nth-child(4))){grid-template-columns:1fr}
}
@media(max-width:640px){
  body.prod-clean .pp-plate{grid-template-columns:1fr}
  body.prod-clean .pp-plate__media{aspect-ratio:1/1}
  body.prod-clean .pp-plate__body{padding:4px clamp(8px,3vw,20px) clamp(12px,3vw,20px)}
  /* карточка похожих на телефоне 160px: цена и кружок-стрелка не
     помещались, кружок сплющивался в овал. Вся карточка — ссылка, кружок лишний */
  body.prod-clean .pp-rel .rel-go{display:none}
}
@media(max-width:560px){
  /* :has(> :nth-child(1)) — чтобы перевесить правило «четыре плитки» выше */
  body.prod-clean .pp-tiles:has(> :nth-child(1)){grid-template-columns:1fr}
}
@media(max-width:760px){
  body.prod-clean .pp-card{grid-template-columns:1fr;gap:14px}
  body.prod-clean .pp-card__head{display:flex;align-items:baseline;gap:14px}
  body.prod-clean .pp-card__t{margin:0}
  /* правило с :has — отдельно: старый браузер отбросил бы весь список селекторов */
  body.prod-clean .pp-prose ul:has(> li:nth-child(7)){columns:1}
  body.prod-clean .pp-rows,
  body.prod-clean .pp-sec .for-whom ul{columns:1}
  body.prod-clean .pp-tile{min-height:0}
  body.prod-clean .pp-tile__n{margin-bottom:16px}
  body.prod-clean .pp-rel .rel .b b{font-size:var(--fs-md)}
}
@media(prefers-reduced-motion:reduce){
  body.prod-clean .pp-tile,body.prod-clean .pp-arr{transition:none}
}

/* ── нижняя плашка «Купить» (строит design-layer.js) ──────────────────
   Даня 26.09: название — по центру высоты, «доступ сразу после оплаты» —
   по центру плашки, чтобы середина не пустовала. От 1000px — три колонки
   minmax(0,1fr) · auto · 1fr: боковые равны, средняя встаёт точно в центр;
   правая без minmax(0,…) — длинная кнопка («Цена уточняется») раздвигает
   её, а не наезжает на подпись; обёртка .txt растворена (display:contents),
   чтобы название и подпись стали отдельными ячейками сетки. Уже 1000px
   подпись под названием, уже 760px названия нет. Название больше двух
   строк обрезается многоточием — наложений не бывает ни на одной ширине. */
body.prod-clean .dl-buybar .in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:24px;width:calc(100% - 40px);max-width:960px;
  padding:10px 10px 10px 28px}
body.prod-clean .dl-buybar .txt{display:grid;gap:4px;min-width:0}
body.prod-clean .dl-buybar .t{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--fs-lg);line-height:1.2}
body.prod-clean .dl-buybar .p{display:flex;align-items:center;gap:8px;
  white-space:nowrap;font-size:var(--fs-note);color:var(--text-secondary)}
body.prod-clean .dl-buybar .p::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--hair-strong);
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23563D87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.5l4 4 8-9"/></svg>') center/11px no-repeat}
body.prod-clean .dl-buybar .btn{justify-self:end;white-space:nowrap}
/* от 1000px — три колонки: подпись точно в центре плашки. Замер по всем 82
   названиям: на 960px самое длинное (73 знака) — две строки, наложений нет;
   на 800px восьми названиям нужна третья строка, поэтому ниже 1000px
   подпись уходит под название. Отступы по краям равные (10/10), а 18px
   названия — его собственный отступ: иначе центр сетки съезжал на 9px */
@media(min-width:1000px){
  body.prod-clean .dl-buybar .in{grid-template-columns:minmax(0,1fr) auto 1fr;padding-left:10px}
  body.prod-clean .dl-buybar .txt{display:contents}
  body.prod-clean .dl-buybar .t{grid-column:1;padding-left:18px}
  body.prod-clean .dl-buybar .p{grid-column:2}
  body.prod-clean .dl-buybar .btn{grid-column:3}
}
/* уже 760px названию места нет: остаются подпись и кнопка, а не одна
   кнопка в пустой капсуле, как было */
@media(max-width:760px){
  body.prod-clean .dl-buybar .in{grid-template-columns:minmax(0,1fr) auto;width:calc(100% - 28px);
    padding-left:20px;column-gap:14px}
  body.prod-clean .dl-buybar .t{display:none}
  body.prod-clean .dl-buybar .p{white-space:normal;line-height:1.3;font-size:var(--fs-fine)}
  body.prod-clean .dl-buybar .txt{container-type:inline-size}
}
/* на 360px кнопка «Купить · Цена уточняется» оставляла подписи полоску, и
   слова налезали на кнопку — подпись уступает место, пока ей меньше 80px */
@container (max-width:80px){
  body.prod-clean .dl-buybar .p{display:none}
}