/* РАСКЛАДКИ СЕКЦИИ ПРЕДЛОЖЕНИЯ - ЗЕРКАЛО, А НЕ СВОЯ ВЕРСИЯ.

   Источник: design/v4/site-offer/kit/ (пять файлов). Собирает tools/adopt-offer.php;
   правка руками теряется при следующем срезе и теряется молча.

   Отступления от побайтовой копии объявлены В КОДЕ ИНСТРУМЕНТА и печатаются отчётом
   прогона. Их 38. */

/* ===== offer.css ===== */
/* СЕКЦИЯ «ЧТО ПРЕДЛАГАЕТ ДЕЛО» - общая оболочка для всех двадцати раскладок.
   Это слой САЙТА КЛИЕНТА (sc-base): ни одного токена --sc-*. Цвет приходит ролями палитры,
   их семь, и в CSS стоят только имена ролей - значения печатает PHP инлайном.

   РОЛИ (имена как в LiveSite): --ls-paper плоскость, --ls-band приподнятая плоскость,
   --ls-ink чернила, --ls-muted приглушённые чернила, --ls-line волосяная линия,
   --ls-acc акцент, --ls-acc-on чернила на акценте.

   Узость решает КОНТЕЙНЕР: имя ls объявлено на самой секции, порог 700. Медиазапросов к
   экрану здесь нет и быть не может - в редакторе сайт стоит на бумаге 390 внутри окна 1440.

   У каждого var() есть запасное значение: необъявленная переменная делает объявление
   невалидным на вычислении, и это не откат, а unset - кегль унаследуется от кабинета. */

/* КОНТЕЙНЕР - ОБЁРТКА ВОКРУГ СЕКЦИИ, а не сама секция: контейнерный запрос стилизует
   только ПОТОМКОВ контейнера, и секция, объявившая имя сама на себе, свои же отступы
   переопределить не может (проверено замером: padding оставался широким на 390).
   Обёртку печатает PHP один раз на страницу - это она и есть «бумага» сайта. */
.ls-w{container-type:inline-size;container-name:ls}

.ls-off{padding-block:var(--ls-off-pad,88px);padding-inline:max(var(--ls-off-pin,40px),(100% - var(--ls-max,1536px)) / 2);
  background:var(--ls-paper,#fff);color:var(--ls-ink,#000);
  font-family:var(--ls-text-face,system-ui);font-size:var(--ls-body,16px);line-height:1.6;
  /* Сторож горизонтальной прокрутки: вылет C2 доходит до кромки секции и не дальше. */
  overflow-x:clip}
@container ls (max-width:700px){.ls-off{--ls-off-pad:56px;--ls-off-pin:20px}}

/* --- ШАПКА СЕКЦИИ. Надпись, заголовок, вступление напротив заголовка. --- */
.ls-off__hd{display:grid;grid-template-columns:var(--ls-off-hd,minmax(0,1.05fr) minmax(0,.95fr));
  gap:var(--ls-off-hdg,40px);align-items:end;margin-block-end:var(--ls-off-hdm,56px)}

/* ШАПКА СЕКЦИИ ЖИВЁТ НА СЕТКЕ СВОЕГО ТЕЛА, А НЕ НА СОБСТВЕННОЙ.

   Кит даёт шапке свои доли 1,05/0,95, а телу - его собственные, и они почти нигде не
   совпадают: у A1 это 1/1, у A2 1,15/0,85, у A4 0,92/1,08. Наружу это выходит тем, что
   вступление начинается не там, где начинается вторая колонка под ним, - на бумаге 1120
   расхождение доходит до нескольких десятков точек, и глаз ловит его сразу.

   Решает `:has()`: секция берёт доли и щель у той раскладки, которая внутри неё стоит.
   Переменные при этом ТЕ ЖЕ, что у тела, - не копии значений, а ссылки: скопированное
   число разошлось бы с оригиналом при первой правке макета, и разошлось бы молча.

   У кого выравниваться НЕ НА ЧТО, тот остаётся с долями кита, и это объявлено: A3 -
   горизонтальный ряд панелей, B3 и B5 - одна вещь на сцене во всю ширину, D4 и D5 -
   строки «название и цена», где вторая колонка шириной в цену. У B1, D2 и D6 шапки нет
   вовсе. */
.ls-off:has(.ls-a1){--ls-off-hd:var(--ls-a1-cols,minmax(0,1fr) minmax(0,1fr));--ls-off-hdg:var(--ls-a1-gap,48px)}
.ls-off:has(.ls-a2){--ls-off-hd:var(--ls-a2-cols,minmax(0,1.15fr) minmax(0,.85fr));--ls-off-hdg:var(--ls-a2-gap,56px)}
.ls-off:has(.ls-a4){--ls-off-hd:var(--ls-a4-cols,minmax(0,.92fr) minmax(0,1.08fr));--ls-off-hdg:var(--ls-a4-gap,56px)}
.ls-off:has(.ls-c2){--ls-off-hd:var(--ls-c2-cols,minmax(0,1fr) minmax(0,1fr));--ls-off-hdg:var(--ls-c2-gap,48px)}
.ls-off:has(.ls-c3){--ls-off-hd:var(--ls-c3-it,minmax(0,.36fr) minmax(0,.64fr));--ls-off-hdg:var(--ls-c3-g,32px)}
.ls-off:has(.ls-d1){--ls-off-hd:var(--ls-d1-cols,minmax(0,1.1fr) minmax(0,.9fr));--ls-off-hdg:var(--ls-d1-gap,40px)}

/* Дорожка: вступление начинается со второй карточки. */
.ls-off:has(.ls-b2){--ls-off-hd:var(--ls-b2-card,max(240px,calc((100% - var(--ls-b2-cg,20px) * 2.6) / 3.3))) minmax(0,1fr);
  --ls-off-hdg:var(--ls-b2-cg,20px)}
.ls-off:has(.ls-b4){--ls-off-hd:var(--ls-b4-cols,max(240px,calc((100% - var(--ls-b4-cg,20px) * 2) / 2.6))) minmax(0,1fr);
  --ls-off-hdg:var(--ls-b4-cg,20px)}

/* Многоколонные сетки: шапка берёт ТУ ЖЕ сетку, заголовок в первой колонке, вступление
   от второй до конца строки. Так его левый край совпадает с левым краем второй карточки
   при любом числе колонок - а число это у текучих сеток меняется с шириной. */
.ls-off:has(.ls-c1){--ls-off-hd:var(--ls-offer-cols,repeat(auto-fit,minmax(max(240px,(100% - 2 * var(--ls-c1-col,32px)) / 3),1fr)));--ls-off-hdg:var(--ls-c1-col,32px)}
.ls-off:has(.ls-c5){--ls-off-hd:var(--ls-c5-cols,repeat(auto-fit,minmax(max(220px,(100% - 2 * var(--ls-c5-col,32px)) / 3),1fr)));--ls-off-hdg:var(--ls-c5-col,32px)}
.ls-off:has(.ls-d3){--ls-off-hd:var(--ls-d3-cols,repeat(auto-fit,minmax(max(240px,(100% - 2 * var(--ls-d3-cg,28px)) / 3),1fr)));--ls-off-hdg:var(--ls-d3-cg,28px)}
.ls-off:has(.ls-c1) .ls-off__in,.ls-off:has(.ls-c5) .ls-off__in,.ls-off:has(.ls-d3) .ls-off__in{grid-column:2 / -1}

/* Бенто: шесть колонок, и шапка повторяет его первый ряд - крупная плитка на четыре,
   соседняя на две. */
.ls-off:has(.ls-c4){--ls-off-hd:var(--ls-c4-cols,repeat(6,minmax(0,1fr)));--ls-off-hdg:var(--ls-c4-gap,16px)}
.ls-off:has(.ls-c4) .ls-off__hd > div{grid-column:1 / 5}
.ls-off:has(.ls-c4) .ls-off__in{grid-column:5 / -1}

/* На узком колонка одна, и растяжки вступления быть не должно: она завела бы вторую
   неявную колонку и вытолкнула бы текст за кромку. */
@container ls (max-width:700px){.ls-off .ls-off__hd > div,.ls-off .ls-off__in{grid-column:auto}}
@container ls (max-width:700px){.ls-off__hd{--ls-off-hd:minmax(0,1fr)}}
.ls-off__eb{display:flex;align-items:center;gap:12px;margin-block:0 14px;margin-inline:0;
  font-size:var(--ls-eb,13px);letter-spacing:.09em;text-transform:uppercase;color:var(--ls-muted,#666)}
.ls-off__eb::before{content:"";inline-size:36px;flex:none;
  border-block-start:1px solid var(--ls-line,rgba(0,0,0,.14))}
.ls-off__h{margin:0;font-family:var(--ls-head-face,inherit);font-size:var(--ls-h2,34px);
  line-height:1.14;font-weight:var(--ls-h2-w,400);text-wrap:pretty}
@container ls (max-width:700px){.ls-off__h{--ls-h2:26px}}
.ls-off__in{margin:0;max-inline-size:52ch;color:var(--ls-muted,#666);text-wrap:pretty}
/* Шапку прячут три раскладки из двадцати - B1, D2, D6. Не удалением из разметки: данные
   целы, их просто не рисуют. */
.ls-off[data-head="off"] .ls-off__hd{display:none}

/* --- МЕДИА. Коробка остаётся ВСЕГДА: раскладка не имеет права поехать между «картинка
   выбрана» и «не выбрана». Пустая коробка - приподнятая плоскость и один значок. --- */
.ls-off__m{position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--ls-off-ar,4 / 3);background:var(--ls-band,#eee)}
.ls-off__m img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.ls-off__m[data-empty]::after{content:"image";pointer-events:none;position:absolute;inset:0;display:grid;
  place-items:center;font-family:"Material Symbols Rounded";font-size:30px;
  color:var(--ls-muted,#666);opacity:.45}
.ls-off__m[data-empty]{outline:1px solid var(--ls-line,rgba(0,0,0,.14));outline-offset:-1px}

/* --- ЭЛЕМЕНТ: заголовок, текст, необязательные цена и ссылка. --- */
/* ЗНАЧОК. Гарнитуру объявляем ЗДЕСЬ, в слое сайта: base.css кабинета на клиентский сайт не
   подключается, и без этого правила лигатура печатается СЛОВОМ - на экране стоит буквально
   BAKERY_DINING. Ось заливки 0, вес 300 - как в подмножестве продукта. */
.sc-icon-KIT-OFF{font-family:"Material Symbols Rounded";font-weight:300;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
  font-variant-ligatures:normal;font-feature-settings:"liga";
  font-variation-settings:"FILL" 0,"wght" 300;-webkit-font-smoothing:antialiased}

.ls-off__t{margin:0;font-family:var(--ls-head-face,inherit);font-size:var(--ls-it-t,20px);
  line-height:1.24;font-weight:var(--ls-it-t-w,500);text-wrap:pretty}
.ls-off__p{margin-block:8px 0;margin-inline:0;color:var(--ls-muted,#666);text-wrap:pretty}
.ls-off__pr{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ls-ink,#000)}
/* Ссылка элемента - текст со стрелкой; наведение прозрачностью, потому что цвета клиента
   в этой таблице нет. */
.ls-off__lnk{display:inline-flex;align-items:center;gap:6px;margin-block-start:12px;
  color:var(--ls-ink,#000);text-decoration:none;font-size:var(--ls-sm,14px);
  transition:opacity var(--ls-dur-fast,140ms) var(--ls-ease,cubic-bezier(.2,0,0,1))}
.ls-off__lnk:hover{opacity:.62;text-decoration:underline;text-underline-offset:3px}
.ls-off__lnk::after{content:"arrow_forward";font-family:"Material Symbols Rounded";font-size:17px}
[dir="rtl"] .ls-off__lnk::after{content:"arrow_back"}

/* Кольцо фокуса обнимает всю цель, никогда текстовый узел (правило 05). */
.ls-off :focus-visible:not(.sc-se__edit){outline:var(--ls-focus-w,2px) solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ls-off *{transition-duration:1ms !important;animation:none !important}}

/* ===== offer-a.css ===== */
/* СЕМЬЯ A - СТЕППЕРЫ И АККОРДЕОНЫ. Открыт один элемент за раз, открытый ведёт ОДНУ общую
   медиа-ячейку. Активное состояние - единственное, о чём здесь говорит цвет.

   Правила рамки, которые несёт эта семья:
   01 один всегда открыт: нажатие на открытый не делает ничего, «всё свёрнуто» не существует;
   02 описание только у открытого; свёрнутые несут заголовок плюс номер или миниатюру;
   03 общая ячейка НЕ схлопывается: элемент без медиа оставляет нейтральную панель в полный
      размер, раскладка не перекомпоновывается;
   04 наведение поднимает: неактивный заголовок идёт на одну ступень текстовой шкалы вверх,
      ни подчёркивания, ни вспышки фона;
   05 кольцо фокуса обнимает всю строку, никогда текстовый узел;
   06 высота зарезервирована по самому высокому состоянию - смена элемента не двигает ничего
      ниже секции;
   07 «меньше движения» - мгновенная подмена, таймеры стоят.

   СОСТОЯНИЕ БЕЗ СКРИПТА. Сервер печатает финальное состояние: все строки, весь текст,
   первая строка открыта признаком data-open. Скрипт только переносит признак. При молчании
   скрипта страница остаётся читаемой - раскрыт первый элемент, остальные заголовками.
   Резерв высоты: --ls-a-res печатает PHP по самому длинному описанию набора (в кегельных
   единицах), потому что считать высоту в CSS нечем. */

/* ─── A1. Медиа сбоку, вертикальный степпер рядом. Группа оптически отцентрована: при
   раскрытии строк она перецентровывается, а не толкает страницу вниз.
   Узкий: --ls-a1-cols. ─── */
.ls-off .ls-a1{display:grid;grid-template-columns:var(--ls-a1-cols,minmax(0,1fr) minmax(0,1fr));
  gap:var(--ls-a1-gap,48px);align-items:center}
@container ls (max-width:700px){.ls-off .ls-a1[data-media="off"],.ls-off .ls-a2[data-media="off"],.ls-off .ls-a4[data-media="off"]{--ls-a1-cols:minmax(0,1fr);--ls-a2-cols:minmax(0,1fr);--ls-a4-cols:minmax(0,1fr)}.ls-off .ls-a1{--ls-a1-cols:1fr;--ls-a1-gap:24px}}
.ls-a1[data-side="start"] .ls-a1__mw{order:-1}
/* Общая ячейка: пропорция задана, высота не фиксирована. Резерв высоты держит СТЕППЕР,
   а не картинка - именно он растёт при раскрытии. */
.ls-a1__mw{position:relative;align-self:stretch;min-block-size:var(--ls-a1-min,420px)}
.ls-a1__mw .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0}
/* Кадр перетекает: уходящая картинка гаснет под приходящей, обе в одной ячейке. */
.ls-a1__mw .ls-off__m{clip-path:inset(0 0 0 0);
  transition:clip-path var(--ls-dur-wipe,420ms) var(--ls-ease,cubic-bezier(.2,0,0,1))}
.ls-a1__mw .ls-off__m[data-on="false"]{clip-path:inset(0 0 100% 0);
  transition-delay:var(--ls-dur-wipe,420ms)}
.ls-a1__mw .ls-off__m[data-on="true"]{z-index:1;transition-delay:0s}
.ls-a1__list{display:grid;gap:2px;min-block-size:var(--ls-a-res,auto)}
.ls-a1__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  padding-block:14px;padding-inline:0;border:0;background:none;color:inherit;font:inherit;text-align:start;
  cursor:pointer;border-block-start:1px solid var(--ls-line,rgba(0,0,0,.14))}
.ls-a1__row:last-child{border-block-end:1px solid var(--ls-line,rgba(0,0,0,.14))}
/* Отметка: пустой квадрат у свёрнутой, залитая акцентом у открытой. Номер внутри остаётся
   всегда - он единственный опознавательный знак свёрнутой строки. */
.ls-a1__n{flex:none;inline-size:34px;block-size:34px;display:grid;place-items:center;
  font-size:14px;font-variant-numeric:tabular-nums;
  border:1px solid var(--ls-line,rgba(0,0,0,.14));color:var(--ls-muted,#666);
  transition:background-color var(--ls-dur-base,200ms) var(--ls-ease,ease),
    color var(--ls-dur-base,200ms) var(--ls-ease,ease),border-color var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-a1__row[data-open] .ls-a1__n{background:var(--ls-acc,#333);border-color:var(--ls-acc,#333);
  color:var(--ls-acc-on,#fff)}
.ls-a1__t{margin:0;font-family:var(--ls-head-face,inherit);font-size:var(--ls-a1-t,19px);
  line-height:1.3;font-weight:500;color:var(--ls-muted,#666);
  transition:font-size var(--ls-dur-base,200ms) var(--ls-ease,ease),color var(--ls-dur-base,200ms) var(--ls-ease,ease)}
/* Наведение НЕ трогает кегль: полоска акцентом под заголовком и рамка того же цвета
   вокруг номера. Полоска написана логическими свойствами и потому одинакова у трёх
   раскладок - у A3 свёрнутая надпись вертикальна, и оси поворачиваются вместе с ней. */
.ls-a1__row:hover .ls-a1__t{color:var(--ls-ink,#000)}
.ls-a1__t{position:relative}
.ls-a1__t::after{content:"";position:absolute;inset-block-end:-4px;inset-inline-start:0;
  block-size:2px;inline-size:0;background:var(--ls-acc,#333);
  transition:inline-size var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-a1__row:hover .ls-a1__t::after{inline-size:100%}
.ls-a1__row:hover .ls-a1__n{border-color:var(--ls-acc,#333)}
.ls-a1__row[data-open] .ls-a1__t{--ls-a1-t:23px;color:var(--ls-ink,#000)}
/* Описание живёт в разметке всегда: у свёрнутых высота стремится к нулю, а не элемент к
   удалению - иначе без скрипта страница осталась бы без текста.
   Сам текст - СВОЙ КЛАСС, а не «> span»: в той же коробке на узком лежит картинка,
   и селектор с типом оказывался сильнее класса картинки и показывал её на широком. */
.ls-a1__d{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-a1__row[data-open] .ls-a1__d{grid-template-rows:1fr}
.ls-a1__dt{min-block-size:0;display:block;padding-block-start:8px;color:var(--ls-muted,#666);
  opacity:0;transition:opacity var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-a1__row[data-open] .ls-a1__dt{opacity:1}
/* На узком строка становится настоящим аккордеоном: своя картинка внутри открытой строки,
   общая ячейка снимается одной переменной. */
.ls-a1__inm{display:none}
@container ls (max-width:700px){
  .ls-a1__mw{display:none}
  .ls-a1__inm{display:block;margin-block-start:12px;--ls-off-ar:4 / 3}
  .ls-a1__row[data-open] .ls-a1__d{grid-template-rows:1fr}
}

/* ─── A2. Зеркало A1: ведёт СПИСОК, медиа вылезает за внешний край секции. Свёрнутые
   заголовки в полном контрасте - разницу несёт рельс над открытой строкой.
   Узкий: --ls-a2-cols. ─── */
.ls-off .ls-a2{display:grid;grid-template-columns:var(--ls-a2-cols,minmax(0,1.15fr) minmax(0,.85fr));
  gap:var(--ls-a2-gap,56px);align-items:start}
@container ls (max-width:700px){.ls-off .ls-a2{--ls-a2-cols:1fr;--ls-a2-gap:24px}}
.ls-a2__list{display:grid;gap:0;min-block-size:var(--ls-a-res,auto)}
.ls-a2__row{display:block;padding-block:20px 22px;padding-inline:0;border:0;background:none;color:inherit;
  font:inherit;text-align:start;cursor:pointer;position:relative}
/* РЕЛЬС: линия над строкой. У свёрнутой - волосяная, у открытой заполняется от 0 до 100%
   за 5200мс - это и есть весь сигнал активного состояния. При «меньше движения» стоит
   заполненным сразу: правило 07 требует конечного положения, а не ускорения. */
.ls-a2__row::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:1px;background:var(--ls-line,rgba(0,0,0,.14))}
.ls-a2__row::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  block-size:2px;inline-size:0;background:var(--ls-acc,#333)}
.ls-a2__row[data-open]::after{inline-size:100%;
  transition:inline-size var(--ls-a2-rail,5200ms) linear}
@media (prefers-reduced-motion:reduce){.ls-a2__row[data-open]::after{transition:none}}
.ls-a2__t{margin:0;font-family:var(--ls-head-face,inherit);font-size:var(--ls-a2-t,21px);
  line-height:1.28;font-weight:500;color:var(--ls-ink,#000);
  transition:font-size var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-a2__t{position:relative}
.ls-a2__t::after{content:"";position:absolute;inset-block-end:-4px;inset-inline-start:0;
  block-size:2px;inline-size:0;background:var(--ls-acc,#333);
  transition:inline-size var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-a2__row:hover .ls-a2__t::after{inline-size:100%}
.ls-a2__row[data-open] .ls-a2__t{--ls-a2-t:25px}
.ls-a2__d{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-a2__row[data-open] .ls-a2__d{grid-template-rows:1fr}
.ls-a2__d > span{min-block-size:0;display:block;padding-block-start:10px;
  max-inline-size:56ch;color:var(--ls-muted,#666);opacity:0;
  transition:opacity var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-a2__row[data-open] .ls-a2__d > span{opacity:1}
/* Медиа вылезает за внешний край: отрицательное поле равно отступу секции. */
.ls-a2__mw{position:relative;min-block-size:var(--ls-a2-min,440px);
  margin-inline-end:calc(var(--ls-off-pin,40px) * -1)}
.ls-a2[data-side="start"] .ls-a2__mw{order:-1;
  margin-inline:calc(var(--ls-off-pin,40px) * -1) 0}
.ls-a2__mw .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0}
@container ls (max-width:700px){
  .ls-a2__mw{min-block-size:240px;margin-inline:calc(var(--ls-off-pin,20px) * -1)}
}

/* ─── A3. Горизонтальный аккордеон. Медиа НЕТ вовсе.

   ПОЧЕМУ СВЁРНУТАЯ ПАНЕЛЬ ФИКСИРОВАННАЯ. С горизонтальной надписью свёрнутая панель не
   сжимается ниже min-content своего самого длинного слова - замер давал 155, и при пяти
   панелях открытой оставалось 37% ряда вместо двух третей. Долевое решение тут
   недостижимо арифметически, поэтому свёрнутая панель получает узкое основание 76, а её
   заголовок встаёт ВЕРТИКАЛЬНО - целиком, без обрезки и без многоточия: у свёрнутой
   панели кроме заголовка нет ничего, и резать его нельзя.
   Замер при бумаге 1120 (ряд 1040): пять панелей - открытая 704 из 1040, это 68%;
   шесть - 620, это 60%. Смена по таймеру 7000мс.
   Узкий: --ls-a3-dir. ─── */
.ls-off .ls-a3{display:flex;flex-direction:var(--ls-a3-dir,row);gap:var(--ls-a3-gap,8px);
  min-block-size:var(--ls-a3-min,420px)}
@container ls (max-width:700px){.ls-off .ls-a3{--ls-a3-dir:column;--ls-a3-min:auto}}
/* Свёрнутая - фиксированные 76, открытая забирает всю оставшуюся ширину.
   Перекомпоновка ряда И ЕСТЬ анимация: меняется только основание, зазор и порядок
   постоянны, поэтому соседи не прыгают. */
.ls-a3__p{flex:0 0 var(--ls-a3-w,clamp(61px,calc(100% * 76 / 1040),76px));min-inline-size:0;display:flex;flex-direction:column;
  justify-content:space-between;gap:16px;padding-block:24px;padding-inline:18px;border:0;text-align:start;
  cursor:pointer;background:var(--ls-band,#eee);color:var(--ls-ink,#000);font:inherit;
  transition:flex-basis var(--ls-dur-screen,260ms) var(--ls-ease-enter,ease),
    flex-grow var(--ls-dur-screen,260ms) var(--ls-ease-enter,ease),
    background-color var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-a3__p:hover{background:color-mix(in oklab,var(--ls-band,#eee) 60%,var(--ls-paper,#fff))}
.ls-a3__p[data-open]{flex:1 1 auto;padding-block:28px;padding-inline:24px;gap:24px;background:var(--ls-paper,#fff);
  outline:1px solid var(--ls-line,rgba(0,0,0,.14));outline-offset:-1px}
.ls-a3__t{margin:0;font-family:var(--ls-head-face,inherit);font-size:var(--ls-a3-t,20px);
  line-height:1.24;font-weight:500;
  transition:font-size var(--ls-dur-base,200ms) var(--ls-ease,ease)}
/* Вертикальная надпись свёрнутой: читается снизу вверх.
   rtl-ok: поворот здесь не ось чтения, а ориентация строки: снизу вверх в латинице,
   кириллице, иврите и арабском одинаково, а сами буквы порядок сохраняют. */
.ls-a3__p:not([data-open]) .ls-a3__t{writing-mode:vertical-rl;rotate:180deg;
  align-self:center;margin-block:auto}
.ls-a3__t{position:relative}
.ls-a3__t::after{content:"";position:absolute;inset-block-end:-4px;inset-inline-start:0;
  block-size:2px;inline-size:0;background:var(--ls-acc,#333);
  transition:inline-size var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-a3__p:hover .ls-a3__t::after{inline-size:100%}
.ls-a3__p[data-open] .ls-a3__t{--ls-a3-t:26px}
.ls-a3__n{font-size:13px;color:var(--ls-muted,#666);font-variant-numeric:tabular-nums}
.ls-a3__d{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-a3__p[data-open] .ls-a3__d{grid-template-rows:1fr}
.ls-a3__d > span{min-block-size:0;display:block;color:var(--ls-muted,#666);max-inline-size:44ch;
  opacity:0;transition:opacity var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-a3__p[data-open] .ls-a3__d > span{opacity:1}
@container ls (max-width:700px){
  /* Своё имя, не токен кабинета: --sc-* в слое сайта запрещён без исключений. */
  .ls-a3__p,.ls-a3__p[data-open]{flex:0 0 auto;min-block-size:var(--ls-a3-tap,88px);
    gap:12px;padding:20px}
  .ls-a3__p:not([data-open]) .ls-a3__t{writing-mode:horizontal-tb;rotate:none;
    align-self:start;margin-block:0}
}

/* ─── A4. Липкая медиа рядом со списком. Единственная в семье НЕ аккордеон: все описания
   видны сразу, медиа прилипает и стоит, пока список идёт мимо.
   Ячейка показывает картинку БЛИЖАЙШЕГО к ней элемента - решение объявлено: одна картинка
   на всю секцию сделала бы липкость бессмысленной, а ближайший элемент превращает прокрутку
   в чтение. Значит правила 03 и 06 действуют и здесь: панель не схлопывается, высота
   зарезервирована.
   Узкий: --ls-a4-cols. ─── */
.ls-off .ls-a4{display:grid;grid-template-columns:var(--ls-a4-cols,minmax(0,.92fr) minmax(0,1.08fr));
  gap:var(--ls-a4-gap,56px);align-items:start}
@container ls (max-width:700px){.ls-off .ls-a4{--ls-a4-cols:1fr;--ls-a4-gap:28px}}
.ls-a4__mw{position:sticky;inset-block-start:calc(var(--ls-bar-h,80px) + 24px);
  block-size:var(--ls-a4-h,420px)}
.ls-a4[data-stick="off"] .ls-a4__mw{position:static}
.ls-a4__mw .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0;clip-path:inset(0 0 0 0);
  transition:clip-path var(--ls-dur-wipe,420ms) var(--ls-ease,cubic-bezier(.2,0,0,1))}
.ls-a4__mw .ls-off__m[data-on="false"]{clip-path:inset(0 0 100% 0);
  transition-delay:var(--ls-dur-wipe,420ms)}
.ls-a4__mw .ls-off__m[data-on="true"]{z-index:1;transition-delay:0s}
.ls-a4__list{display:grid;gap:var(--ls-a4-rg,40px)}
.ls-a4__it{display:grid;gap:8px}
.ls-a4__it .ls-off__t{--ls-it-t:21px}
/* Ближайший элемент помечен признаком: тихая волосяная линия у начала строки. Цвет и кегль
   не меняются - иначе список читался бы как аккордеон, которым он не является. */
.ls-a4__it[data-near]{border-inline-start:2px solid var(--ls-acc,#333);
  padding-inline-start:16px;margin-inline-start:-18px}
@container ls (max-width:700px){
  .ls-a4__mw{position:relative;block-size:auto;aspect-ratio:4 / 3}
  .ls-a4__it[data-near]{border-inline-start:0;padding-inline-start:0;margin-inline-start:0}
}

/* ===== offer-b.css ===== */
/* СЕМЬЯ B - КАРУСЕЛИ. На сцене один элемент за раз. Каждая раскладка отвечает на вопрос
   «где я в наборе» ПО-СВОЕМУ, и это единственное, чем они отличаются по существу:

   B1 сметающая полоса поверх ряда вкладок   B2 точки либо стрелки (на выбор)
   B3 счётчик с заполняющейся линией          B4 пара стрелок в строке заголовка
   B5 точки плюс два призрачных соседа

   СОСТОЯНИЕ БЕЗ СКРИПТА. Сервер печатает все слайды и весь текст; первый помечен
   data-on. Дорожка - обычная полоса прокрутки со scroll-snap, поэтому при молчании скрипта
   карусель остаётся листаемой пальцем и колесом, а не превращается в пустоту.

   ТЯГА МЫШЬЮ (B2). Порог 4 точки и гашение нажатия на 60мс после тяги - те же числа, что в
   каталоге секций: два разных порога в одном продукте человек читает как поломку.

   ПРАВИЛО 07. Все переходы становятся подменой, автопрокрутка не идёт вовсе. */

/* ─── B1. Слайд и полоса вкладок. Шапки секции нет - раскладка открывается прямо слайдом.
   Указатель хода сметает по ВСЕЙ полосе: один орган кодирует и активную вкладку, и то,
   сколько внутри неё пройдено.
   Узкий: --ls-b1-cols. ─── */
.ls-off .ls-b1{display:grid;gap:var(--ls-b1-gap,28px)}
.ls-b1__stage{overflow:visible}
.ls-b1__stage > .swiper-wrapper > .swiper-slide{display:grid;
  grid-template-columns:var(--ls-b1-cols,minmax(0,1.05fr) minmax(0,.95fr));
  gap:var(--ls-b1-sg,40px);align-items:center}
@container ls (max-width:700px){.ls-off .ls-b1{--ls-b1-cols:1fr;--ls-b1-sg:20px}}
.ls-b1__mw{position:relative;min-block-size:var(--ls-b1-min,400px)}
.ls-b1__mw .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0;
  transition:opacity var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-b1__mw .ls-off__m[data-on="false"]{opacity:0}
.ls-b1__txt{display:grid;gap:12px;align-content:center;min-block-size:var(--ls-b-res,auto)}
.ls-b1__t{margin:0;font-family:var(--ls-head-face,inherit);font-size:var(--ls-b1-t,30px);
  line-height:1.16;font-weight:500}
/* Кнопка элемента - поле item.button за тумблером «показывать кнопки элементов». */
.ls-b1__btn{justify-self:start;display:inline-flex;align-items:center;min-block-size:44px;
  margin-block-start:8px;padding-inline:22px;border:0;border-radius:var(--ls-radius,999px);
  background:var(--ls-acc,#333);color:var(--ls-acc-on,#fff);font:inherit;font-size:15px;
  font-weight:500;cursor:pointer;text-decoration:none;
  transition:filter var(--ls-dur-fast,140ms) var(--ls-ease,ease)}
.ls-b1__btn:hover{filter:brightness(1.07) saturate(1.05)}
/* ПОЛОСА ВКЛАДОК. Прокручивается, активная держится в виду. Ряд не переносится:
   вкладки - это шкала, а шкала в две строки перестаёт быть шкалой. */
.ls-b1__tabs{position:relative;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-block-start:1px solid var(--ls-line,rgba(0,0,0,.14))}
.ls-b1__tabs::-webkit-scrollbar{display:none}
/* ВКЛАДКА ДЕЛИТ РЯД РАВНЫМИ ДОЛЯМИ: ширина = max(132, ряд / число вкладок).
   Шаг оттуда детерминирован, и скрипт ставит --ls-b1-x и --ls-b1-w из offsetLeft и
   offsetWidth АКТИВНОЙ вкладки, а не из константы: счёт от шага 132 разъезжался с реальной
   вкладкой на десятки точек. Рисовать полосу подчёркиванием самой вкладки нельзя: тогда
   она перескакивала бы всегда, а скольжение между вкладками - часть замысла. */
.ls-b1__tab{position:relative;flex:1 0 auto;min-inline-size:var(--ls-b1-tab,132px);
  min-block-size:52px;padding-block:14px 14px;padding-inline:0 18px;border:0;background:none;color:var(--ls-muted,#666);
  font:inherit;font-size:15px;text-align:start;cursor:pointer;white-space:nowrap;
  transition:color var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-b1__tab:hover{color:var(--ls-ink,#000)}
.ls-b1__tab[aria-selected="true"]{color:var(--ls-ink,#000)}
/* СМЕТАЮЩАЯ ПОЛОСА ЖИВЁТ В АКТИВНОЙ ВКЛАДКЕ и выражена ДОЛЕЙ её ширины.
   ПОЧЕМУ НЕ ОТДЕЛЬНАЯ ЛЕНТА С ПИКСЕЛЬНЫМ СДВИГОМ: ширина вкладки решается её
   СОДЕРЖИМЫМ - при nowrap основание не сжимается ниже min-content подписи (замеры:
   152,55 при девяти вкладках, 146,09 на телефоне), и любая арифметика по шагу врёт.
   Полоса внутри вкладки разъехаться не может ни при какой длине подписи и ни на какой
   гарнитуре. Скольжение по ряду сохранено тем, что при смене вкладки прежняя полоса
   стягивается в ноль за 120мс, а новая растёт из нуля: лёгкий сегмент идёт по полосе
   вкладка за вкладкой, а не прыгает между ними рывком. */
.ls-b1__tab::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  block-size:2px;inline-size:0;background:var(--ls-acc,#333);
  transition:inline-size var(--ls-dur-fast,120ms) var(--ls-ease,ease)}
.ls-b1__tab[aria-selected="true"]::after{inline-size:var(--ls-b1-run,45%);
  transition:inline-size var(--ls-b1-dur,6000ms) linear}
@media (prefers-reduced-motion:reduce){.ls-b1__tab::after{transition:none}}
/* Край набора: ряд уезжает за кромку, и это видно затуханием у конца строки, а не стрелкой -
   стрелка в B1 заняла бы место указателя, а он здесь один и другой. */
.ls-b1__tabsWrap{position:relative;min-inline-size:0}
.ls-b1__tabsWrap[data-more]::after{content:"";position:absolute;inset-block:0;
  inset-inline-end:0;inline-size:64px;pointer-events:none;
  background:linear-gradient(var(--ls-fade-dir,270deg),var(--ls-paper,#fff),transparent)}

/* ─── B2. Карточки. Видно примерно три, следующая выглядывает. Заголовок сверху, медиа
   посередине, текст прижат к низу. Указатель - точки ЛИБО стрелки, опция Customize.
   Узкий: --ls-b2-card. ─── */
.ls-off .ls-b2{display:grid;gap:var(--ls-b2-gap,20px)}
.ls-b2__track{gap:var(--ls-b2-cg,20px);overflow:visible;padding-block-end:2px}
.ls-b2__card{box-sizing:border-box;inline-size:var(--ls-b2-card,max(240px,calc((100% - var(--ls-b2-cg,20px) * 2.6) / 3.3)))}
.ls-b2__track::-webkit-scrollbar{display:none}
@container ls (max-width:700px){.ls-off .ls-b2{--ls-b2-card:82%}}
.ls-b2__card{scroll-snap-align:start;display:grid;grid-template-rows:auto auto 1fr;
  gap:14px;padding:20px;background:var(--ls-band,#eee);
  /* Тяга мышью: курсор и запрет выделения - иначе тяга выделяет текст вместо прокрутки. */
  cursor:grab;user-select:none}
.ls-b2__card:active{cursor:grabbing}
.ls-b2__card .ls-off__m{--ls-off-ar:16 / 11}
.ls-b2__card .ls-off__p{align-self:end;margin:0}
/* Инверсия карточки - роль ЧЕРНИЛ как фона и плоскости как текста, та же, что в C1.
   Акцент не участвует: в этой семье он занят указателем положения. */
.ls-b2[data-inv] .ls-b2__card{background:var(--ls-ink,#000);color:var(--ls-paper,#fff)}
.ls-b2[data-inv] .ls-b2__card .ls-off__p{color:var(--ls-paper,#fff);opacity:.74}
.ls-b2__foot{display:flex;align-items:center;gap:14px}
/* Точки: активная вытягивается в короткую черту. Размер цели 44 при рисунке 8. */
.ls-b2__dots,.ls-b3__dots,.ls-b4__dots{display:flex;gap:8px}
.ls-b2__dot{position:relative;inline-size:8px;block-size:8px;padding:0;border:0;border-radius:999px /* kit-free: круг, а не угол: стороны равны */;
  background:color-mix(in oklab,var(--ls-ink,#000) 24%,transparent);cursor:pointer;
  transition:inline-size var(--ls-dur-base,200ms) var(--ls-ease,ease),
    background-color var(--ls-dur-base,200ms) var(--ls-ease,ease)}
.ls-b2__dot::after{content:"";position:absolute;inset:-18px}
.ls-b2__dot[aria-current="true"]{inline-size:26px;background:var(--ls-acc,#333)}
/* Стрелки: тот же орган, что у B3 и B4, чтобы кнопка листания в продукте была одна. */
.ls-b2__arrows,.ls-b3__arrows,.ls-b4__arrows,.ls-b5__arrows{display:flex;gap:8px}
.ls-arw{inline-size:44px;block-size:44px;display:grid;place-items:center;padding:0;
  border:1px solid var(--ls-line,rgba(0,0,0,.14));border-radius:999px /* kit-free: круг, а не угол: стороны равны */;background:none;
  color:var(--ls-ink,#000);cursor:pointer;
  transition:background-color var(--ls-dur-fast,140ms) var(--ls-ease,ease),
    border-color var(--ls-dur-fast,140ms) var(--ls-ease,ease),opacity var(--ls-dur-fast,140ms) var(--ls-ease,ease)}
.ls-arw:hover{background:color-mix(in oklab,var(--ls-ink,#000) 6%,transparent);
  border-color:color-mix(in oklab,var(--ls-ink,#000) 28%,transparent)}
.ls-arw .sc-icon{font-size:20px}
/* Край набора: кнопка гаснет и перестаёт ловить нажатия. Пропадать ей нельзя - ряд
   органов не должен менять ширину от того, где мы в наборе. */
.ls-arw[disabled]{opacity:.32;cursor:default}
.ls-b2__count,.ls-b3__count,.ls-b4__count{font-size:14px;color:var(--ls-muted,#666);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ─── B3. Широкие карточки: крупное медиа, под ним ОДИН текучий абзац - заголовок набран
   в строку более плотным начертанием, а не поставлен над текстом.
   Указатель - счётчик с заполняющейся линией, органы снизу у начала строки.
   Узкий: --ls-b3-min. ─── */
.ls-off .ls-b3{display:grid;gap:var(--ls-b3-gap,22px)}
.ls-b3__stage{position:relative;min-block-size:var(--ls-b3-min,440px)}
@container ls (max-width:700px){.ls-off .ls-b3{--ls-b3-min:260px}}
.ls-b3__stage .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0;
  transition:opacity var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-b3__stage .ls-off__m[data-on="false"]{opacity:0}
/* Заголовок в строку с текстом - разница НАЧЕРТАНИЯ, не кегля: 560 против 400 у текста.
   Вес 560 выбран замером: 600 в переменном шрифте расширяет строку настолько, что фраза
   из шести слов перестаёт влезать в меру 68 знаков. */
.ls-b3__p{margin:0;max-inline-size:68ch;font-size:var(--ls-b3-fs,17px);line-height:1.55;
  color:var(--ls-muted,#666);font-weight:400}
/* Заголовок в строку набран ТЕКСТОВОЙ гарнитурой в весе 600, а не заглавной.
   ПРИЧИНА ПРАВИЛОМ, А НЕ ЧИСЛОМ: часть заглавных шрифтов из наших десяти пар
   одновесные (Instrument Serif, Prata, Instrument и прочие заглавные на одном начертании).
   Запрос веса такого шрифта даёт ПОДДЕЛЬНЫЙ жир: замер ширины строки при 560 и 700
   совпадает до сотых - различия начертания нет вовсе, а браузер размазывает контур.
   font-synthesis:none запрещает подделку явно. У всех десяти текстовых гарнитур есть
   настоящие 400 / 500 / 600, поэтому разница держится в любой паре.
   Второй признак - цвет: чернила против приглушённых, чтобы вес не был единственным. */
.ls-b3__p b{font-family:var(--ls-b3-face,var(--ls-text-face,inherit));
  font-weight:var(--ls-b3-tw,600);font-synthesis:none;color:var(--ls-ink,#000)}
.ls-b3__foot{display:flex;align-items:center;gap:16px}
/* Счётчик с линией: линия под числом заполняется по мере продвижения по набору. */
.ls-b3__bar{inline-size:var(--ls-b3-bar,120px);block-size:2px;
  background:color-mix(in oklab,var(--ls-ink,#000) 16%,transparent)}
.ls-b3__bar > i{display:block;block-size:100%;inline-size:var(--ls-b3-fill,20%);
  background:var(--ls-acc,#333);
  transition:inline-size var(--ls-dur-screen,260ms) var(--ls-ease-enter,ease)}

/* ─── B4. Портретная карусель 3:4, органы ПОДНЯТЫ в строку заголовка. Текст всегда под
   медиа, никогда поверх: раскладка для фотографии, которую нельзя загораживать.
   Узкий: --ls-b4-cols. ─── */
.ls-off .ls-b4{display:grid;gap:var(--ls-b4-gap,24px)}
.ls-b4__hd{display:flex;align-items:center;gap:20px}
.ls-b4__hd .ls-off__h{flex:1;min-inline-size:0}
.ls-b4__track{gap:var(--ls-b4-cg,20px);overflow:visible}
.ls-b4__it{box-sizing:border-box;inline-size:var(--ls-b4-cols,max(240px,calc((100% - var(--ls-b4-cg,20px) * 2) / 2.6)))}
.ls-b4__track::-webkit-scrollbar{display:none}
@container ls (max-width:700px){.ls-off .ls-b4{--ls-b4-cols:78%}}
.ls-b4__it{scroll-snap-align:start;display:grid;gap:14px}
/* Пропорция 3:4 ЖЁСТКАЯ. Картинка другой пропорции обрезается по ТОЧКЕ ФОКУСА, а не по
   центру: у портретного кадра центр приходится на грудь, а не на лицо. Точки фокуса в
   данных сегодня нет - заводим поле item.media_focus, две доли в процентах, по умолчанию
   50% 28%. Пока поля нет, работает это значение по умолчанию. */
.ls-b4__it .ls-off__m{--ls-off-ar:3 / 4}
.ls-b4__it .ls-off__m img{object-position:var(--ls-focus,50% 28%)}

/* ─── B5. Центр с подглядыванием. Соседи приглушены, нажимаются и шагают на одно место.
   Подпись - ЕДИНСТВЕННЫЙ наложенный текст во всей библиотеке.
   Узкий: --ls-b5-peek. ─── */
.ls-off .ls-b5{display:grid;gap:var(--ls-b5-gap,20px);justify-items:center}
.ls-b5__row{gap:var(--ls-b5-cg,16px);inline-size:100%;overflow:visible}
.ls-b5__row > .swiper-wrapper{align-items:center}
.ls-b5__it{position:relative;inline-size:var(--ls-b5-main,56%);min-inline-size:0;padding:0;border:0;
  background:none;cursor:pointer;opacity:.4;
  transition:opacity var(--ls-dur-screen,260ms) var(--ls-ease,ease)}
.ls-b5__it:hover{opacity:.62}
.ls-b5__it[data-on]{opacity:1;cursor:default}
.ls-b5__it .ls-off__m{--ls-off-ar:16 / 10}
@container ls (max-width:700px){.ls-off .ls-b5{--ls-b5-main:100%;--ls-b5-cg:0px}}
/* РЕЦЕПТ КОНТРАСТА НАЛОЖЕННОЙ ПОДПИСИ - один на всю библиотеку.
   1. Под текстом лежит ЗАЛИТАЯ ПЛАШКА чернил на 62%, а не градиент по всей картинке:
      градиент 35% садился на светлую часть фотографии и текст исчезал.
   2. Плашка выше текста на 12 и ниже на 12: она обнимает строки, а не кадр.
   3. Текст - чернила на акценте? нет: белый. Порог 4,5:1 держит плашка, а не палитра, -
      подпись не имеет права зависеть от того, какую палитру выбрал клиент.
   4. Градиент, если он всё же нужен под плашкой, объявляется УГЛОМ В ПЕРЕМЕННОЙ:
      --ls-fade-dir, потому что 90deg не зеркалится и в иврите уезжает не туда. */
.ls-b5__cap{position:absolute;inset-inline:12px;inset-block-end:12px;padding-block:12px;padding-inline:14px;
  background:color-mix(in oklab,var(--ls-ink,#000) 62%,transparent);color:var(--ls-paper,#fff);text-align:start}
.ls-b5__cap b{display:block;font-family:var(--ls-head-face,inherit);font-size:19px;font-weight:500}
.ls-b5__cap span{display:block;margin-block-start:4px;font-size:14px;opacity:.86}
.ls-b5__dots{display:flex;gap:8px}
[dir="rtl"] .ls-b1__sweep,[dir="rtl"] .ls-b3__bar > i{--ls-fade-dir:90deg}

/* ===== offer-c.css ===== */
/* СЕМЬЯ C - СЕТКИ. Состояния у элемента нет вовсе: всё несут ритм сетки и обращение с
   медиа. Прятаться за взаимодействие негде, поэтому семья делается первой.

   У каждой раскладки узкий экран выражен ОДНОЙ переменной - её имя стоит в комментарии. */

/* ─── C1. Сетка карточек с медиа. Обвязки нет: ни рамки, ни фона, ни тени. Четыре вида
   собираются двумя тумблерами - медиа вкл/выкл и подпись под медиа или поверх него.
   Узкий: --ls-offer-cols (та же переменная, что у сегодняшней секции). ─── */
.ls-off .ls-c1{display:grid;grid-template-columns:var(--ls-offer-cols,repeat(auto-fit,minmax(max(240px,(100% - 2 * var(--ls-c1-col,32px)) / 3),1fr)));
  gap:var(--ls-c1-gap,44px) var(--ls-c1-col,32px)}
@container ls (max-width:700px){.ls-off .ls-c1{--ls-offer-cols:1fr}}
.ls-c1__it{display:flex;flex-direction:column;gap:16px}
.ls-c1__it .ls-off__m{--ls-off-ar:4 / 3}
/* Подпись поверх: панель на ИНВЕРТИРОВАННЫХ ролях - чернила становятся фоном, плоскость
   текстом. Акцент здесь был бы ложью: он у нас говорит только об активном состоянии. */
.ls-c1[data-cap="over"] .ls-c1__it{position:relative;gap:0}
.ls-c1[data-cap="over"] .ls-c1__cap{position:absolute;inset-block-end:0;inset-inline:0;
  padding:20px;background:var(--ls-ink,#000);color:var(--ls-paper,#fff)}
.ls-c1[data-cap="over"] .ls-c1__cap .ls-off__p{color:var(--ls-paper,#fff);opacity:.74}
/* Медиа выключено - карточка становится текстовой, и тумблер положения подписи скрывается:
   «поверх» без медиа не существует, четвёртая комбинация физически совпадает с третьей. */
.ls-c1[data-media="off"] .ls-off__m{display:none}

/* ─── C2. Текстовая сетка 2x2 и одна медиа-панель, вылетающая за ТРИ края секции.
   Шапка секции живёт ВНУТРИ текстовой колонки: только так панель дотягивается до верхней
   кромки. Стояла бы шапка над раскладкой - отрицательное поле подняло бы панель лишь до
   верха своей строки, и вылет получился бы за два края, а не за три (проверено замером).
   Узкий: --ls-c2-cols. ─── */
.ls-off .ls-c2{display:grid;grid-template-columns:var(--ls-c2-cols,minmax(0,1fr) minmax(0,1fr));
  gap:var(--ls-c2-gap,48px);align-items:center}
@container ls (max-width:700px){.ls-off .ls-c2{--ls-c2-cols:1fr}}
.ls-c2__txt{min-inline-size:0}
.ls-c2__txt .ls-off__hd{--ls-off-hd:minmax(0,1fr);--ls-off-hdm:40px}
.ls-c2__grid{display:grid;grid-template-columns:var(--ls-c2-in,repeat(2,minmax(0,1fr)));
  gap:var(--ls-c2-ing,36px) var(--ls-c2-inc,32px)}
@container ls (max-width:700px){.ls-c2__grid{--ls-c2-in:1fr}}
.ls-c2__m{--ls-off-ar:auto;align-self:stretch;min-block-size:420px;
  margin-block:calc(var(--ls-off-pad,88px) * -1);
  margin-inline-end:calc(var(--ls-off-pin,40px) * -1)}
/* Сторона медиа - опция Customize. При медиа у начала строки вылет уходит в начало. */
.ls-off .ls-c2[data-side="start"]{direction:inherit}
.ls-c2[data-side="start"] .ls-c2__m{order:-1;margin-inline:calc(var(--ls-off-pin,40px) * -1) 0}
/* На узком вылет остаётся только по бокам: сверху и снизу панель встаёт в поток. */
@container ls (max-width:700px){
  .ls-c2__m{min-block-size:260px;margin-block:0;
    margin-inline:calc(var(--ls-off-pin,20px) * -1)}
}
/* Точка фокуса обрезки: по умолчанию центр по горизонтали и ВЕРХНЯЯ треть по вертикали -
   на снимках дела главное стоит сверху (лицо, вывеска, изделие), и центр срезал бы его. */
.ls-c2__m img{object-position:var(--ls-focus,50% 32%)}

/* ─── C3. Текстовый стек: ни медиа, ни линеек, ни цифр. Раскладка проверяет
   типографическую шкалу - если она где-то слаба, видно здесь первым.
   Опций Customize нет ни одной: у такой раскладки вкладка исчезает целиком.
   Узкий: --ls-c3-it. ─── */
.ls-off .ls-c3{display:grid;gap:var(--ls-c3-gap,44px)}
.ls-c3__it{display:grid;grid-template-columns:var(--ls-c3-it,minmax(0,.36fr) minmax(0,.64fr));
  gap:var(--ls-c3-g,32px);align-items:start}
@container ls (max-width:700px){.ls-c3__it{--ls-c3-it:1fr;--ls-c3-g:10px}}
.ls-c3 .ls-off__t{--ls-it-t:23px}
.ls-c3 .ls-off__p{margin:0;max-inline-size:58ch}

/* ─── C4. Бенто: узкие, широкие и только-медийные плитки, ровно одна акцентная.
   Хочет 6-9, список добивается. Узкий: --ls-c4-cols. ─── */
.ls-off .ls-c4{display:grid;grid-template-columns:var(--ls-c4-cols,repeat(6,minmax(0,1fr)));
  gap:var(--ls-c4-gap,16px);grid-auto-rows:minmax(180px,auto)}
@container ls (max-width:700px){.ls-off .ls-c4{--ls-c4-cols:1fr;grid-auto-rows:auto}}
/* Пролёты плиток задаёт ТАБЛИЦА по признаку data-sp, а не инлайн: инлайновое объявление
   бьёт таблицу, и контейнерный запрос не смог бы его перебить - на 390 бенто разваливался
   в неявные колонки. По брифу инлайном печатается потребитель, а не объявление. */
.ls-c4__it{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding:24px;overflow:hidden;background:var(--ls-band,#eee);grid-column:span 2}
.ls-c4__it[data-sp="3"]{grid-column:span 3}
.ls-c4__it[data-sp="4"]{grid-column:span 4}
.ls-c4__it[data-sp="6"]{grid-column:span 6}
@container ls (max-width:700px){
  .ls-c4__it,.ls-c4__it[data-sp="3"],.ls-c4__it[data-sp="4"],.ls-c4__it[data-sp="6"]{
    grid-column:auto;min-block-size:200px}
}
.ls-c4__it .ls-off__p{margin:0}
/* Только-медийная плитка: картинка на всю плитку, текста нет вовсе. */
.ls-c4__it[data-kind="media"]{padding:0}
.ls-c4__it[data-kind="media"] .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0}
/* Акцентная - роль акцента и чернила на акценте. Ровно одна на секцию. */
.ls-c4__it[data-kind="acc"]{background:var(--ls-acc,#333);color:var(--ls-acc-on,#fff)}
.ls-c4__it[data-kind="acc"] .ls-off__p{color:var(--ls-acc-on,#fff);opacity:.8}
/* Добитая плитка: номер и больше ничего. Это состояние, а не ошибка - ни красного, ни
   восклицательных знаков. Пунктир говорит «место свободно», как пустая строка списка. */
.ls-c4__it[data-fill]{justify-content:center;align-items:center;background:transparent;
  outline:1px dashed var(--ls-line,rgba(0,0,0,.2));outline-offset:-1px;color:var(--ls-muted,#666)}
.ls-c4__it[data-fill] b{font-size:34px;font-weight:400;opacity:.5;font-variant-numeric:tabular-nums}

/* ─── C5. Карточки с миниатюрой: маленький квадрат, намеренный провал, текст.
   Провал задан В КЕГЛЯХ заголовка, а не в точках: на другой паре гарнитур точки развалятся,
   а отношение к кеглю - нет. Узкий: --ls-c5-cols. ─── */
.ls-off .ls-c5{display:grid;grid-template-columns:var(--ls-c5-cols,repeat(auto-fit,minmax(max(220px,(100% - 2 * var(--ls-c5-col,32px)) / 3),1fr)));
  gap:var(--ls-c5-gap,48px) var(--ls-c5-col,32px)}
@container ls (max-width:700px){.ls-off .ls-c5{--ls-c5-cols:1fr;--ls-c5-gap:36px}}
.ls-c5__it{display:block}
.ls-c5__it .ls-off__m{--ls-off-ar:1;inline-size:var(--ls-c5-th,56px)}
.ls-c5__it .ls-off__t{margin-block-start:calc(var(--ls-c5-drop,2.4) * var(--ls-it-t,20px))}
@container ls (max-width:700px){.ls-c5__it .ls-off__t{--ls-c5-drop:1.6}}

/* ===== offer-d.css ===== */
/* СЕМЬЯ D - РЕДАКТОРСКИЕ, СПИСКИ, МЕДИА. Специалисты: три из шести показывают поля, которых
   не показывает больше никто - цену, значок, адрес видео. Две тихо меняют то, что секция
   содержит, и это главное: РАСКЛАДКА НЕ СЪЕДАЕТ ДАННЫЕ МОЛЧА.

   D1 показывает 2 элемента из скольких угодно, D6 не показывает ничего - и в оба случая
   рядом стоит спокойная строка «показано столько из столько», видимая ТОЛЬКО в редакторе.
   Класс .ls-only-edit печатается всегда, а у посетителя снимается признаком на корне
   страницы: у него этой строки нет вовсе. */

.ls-only-edit{display:none}
.ls-w[data-edit] .ls-only-edit,.ls-page[data-edit] .ls-only-edit{display:flex;align-items:center;gap:8px;background:color-mix(in oklab,#fff 88%,transparent);color:#3f4650;
  margin-block-start:20px;padding-block:8px;padding-inline:12px;
  border-inline-start:2px solid var(--ls-line,rgba(0,0,0,.14));
  font-size:var(--ls-sm,14px);color:var(--ls-muted,#666);text-wrap:pretty}
.ls-only-edit .sc-icon{flex:none;font-size:18px;opacity:.7}

/* ─── D1. Обложка и ровно две карточки. Лишние элементы скрыты, пока выбрана эта раскладка,
   и возвращаются, как только выбрана другая.
   Узкий: --ls-d1-cols. ─── */
.ls-off .ls-d1{display:grid;grid-template-columns:var(--ls-d1-cols,minmax(0,1.1fr) minmax(0,.9fr));
  gap:var(--ls-d1-gap,40px);align-items:center}
@container ls (max-width:700px){.ls-off .ls-d1{--ls-d1-cols:1fr;--ls-d1-gap:24px}}
.ls-d1[data-side="start"] .ls-d1__mw{order:-1}
.ls-d1__mw{position:relative;align-self:stretch;min-block-size:var(--ls-d1-min,460px)}
.ls-d1__mw .ls-off__m{--ls-off-ar:auto;position:absolute;inset:0}
.ls-d1__cards{display:grid;gap:var(--ls-d1-cg,24px)}
.ls-d1__card{display:grid;gap:8px;padding-block:24px;padding-inline:0;
  border-block-start:1px solid var(--ls-line,rgba(0,0,0,.14))}
.ls-d1__card .ls-off__t{--ls-it-t:23px}

/* ─── D2. Сетка значков. Начинается СРАЗУ с сетки: ни надписи, ни заголовка, ни вступления -
   дыхание даёт отступ секции. Медиа нет; единственная раскладка со значком.
   Узкий: --ls-d2-cols. ─── */
.ls-off .ls-d2{display:grid;grid-template-columns:var(--ls-d2-cols,repeat(auto-fit,minmax(max(200px,(100% - 3 * var(--ls-d2-cg,32px)) / 4),1fr)));
  gap:var(--ls-d2-gap,40px) var(--ls-d2-cg,32px)}
@container ls (max-width:700px){.ls-off .ls-d2{--ls-d2-cols:1fr;--ls-d2-gap:28px}}
.ls-d2__it{display:grid;gap:14px;align-content:start}
/* Контейнер значка - настоящий орган со своими размерами, а не картинка: квадрат 52,
   приподнятая плоскость, значок 26. Заливки акцентом нет - в этой семье акцент не занят
   состоянием, но красить им каждый элемент значило бы красить всю секцию. */
.ls-d2__ic{inline-size:52px;block-size:52px;display:grid;place-items:center;
  background:var(--ls-band,#eee);color:var(--ls-ink,#000)}
.ls-d2__ic .sc-icon{font-size:26px}
.ls-d2__it .ls-off__t{--ls-it-t:19px}

/* ─── D3. Карточки меню: портретное медиа, заголовок, описание и строка цены ОСОБНЯКОМ
   последним элементом. Сделана для меню и пакетов, где цена - то, ради чего смотрят.
   Узкий: --ls-d3-cols. ─── */
.ls-off .ls-d3{display:grid;grid-template-columns:var(--ls-d3-cols,repeat(auto-fit,minmax(max(240px,(100% - 2 * var(--ls-d3-cg,28px)) / 3),1fr)));
  gap:var(--ls-d3-gap,44px) var(--ls-d3-cg,28px)}
@container ls (max-width:700px){.ls-off .ls-d3{--ls-d3-cols:1fr;--ls-d3-gap:32px}}
.ls-d3__it{display:grid;gap:14px;align-content:start}
.ls-d3__it .ls-off__m{--ls-off-ar:3 / 4}
.ls-d3__it .ls-off__p{margin:0}
/* Цена отбита от описания линией и своим отступом: она не часть текста, она итог.
   Пустая цена не оставляет ни линии, ни отступа - раскладка не имеет права поехать. */
.ls-d3__pr{margin-block-start:4px;padding-block-start:12px;
  border-block-start:1px solid var(--ls-line,rgba(0,0,0,.14));
  font-size:var(--ls-d3-pr,18px);color:var(--ls-ink,#000);font-variant-numeric:tabular-nums}
.ls-d3__it:not(:has(.ls-d3__pr)) .ls-off__p{margin-block-end:0}

/* ─── D4. Строки с ценой: заголовок и описание с одной стороны, цена прижата к
   противоположному краю ПО БАЗОВОЙ ЛИНИИ ЗАГОЛОВКА, строки разделены только пустотой.
   По желанию перед строкой квадратная миниатюра.

   БАЗОВАЯ ЛИНИЯ, А НЕ ВЕРХ: строка - грид с align-items:baseline, поэтому цена садится на
   первую строку заголовка. Когда заголовок переносится на две строки, цена остаётся на
   ПЕРВОЙ - это и значит «по базовой линии заголовка»; выравнивание по верху съехало бы
   вместе с приростом высоты, а по центру уехало бы вниз на длинном описании.
   Узкий: --ls-d4-cols. ─── */
.ls-off .ls-d4{display:grid;gap:var(--ls-d4-gap,36px)}
.ls-d4__row{display:grid;grid-template-columns:var(--ls-d4-cols,minmax(0,1fr) auto);
  gap:var(--ls-d4-cg,32px);align-items:baseline}
@container ls (max-width:700px){.ls-off .ls-d4{--ls-d4-gap:28px}}
.ls-d4__main{display:grid;grid-template-columns:var(--ls-d4-in,1fr);gap:16px;align-items:baseline}
.ls-d4[data-thumb] .ls-d4__main{--ls-d4-in:auto minmax(0,1fr)}
.ls-d4__main .ls-off__m{--ls-off-ar:1;inline-size:var(--ls-d4-th,72px);
  /* Миниатюра садится на ту же базовую линию: смещение вниз на четверть кегля заголовка,
     иначе квадрат висит выше строки. */
  transform:translateY(calc(var(--ls-it-t,21px) * .24))}
.ls-d4__row .ls-off__t{--ls-it-t:21px}
.ls-d4__row .ls-off__p{max-inline-size:60ch}
.ls-d4__pr{font-size:var(--ls-d4-pr,19px);white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--ls-ink,#000)}

/* ─── D5. Линованные строки с ценой: те же сведения, что в D4, но разделённые ЛИНЕЙКАМИ, и
   никогда с миниатюрой.
   D4 и D5 обязаны различаться в плитке каталога 320 (масштаб около 0,29 - линия толщиной 1
   там становится 0,29 и почти исчезает). Поэтому различие построено на ДВУХ признаках,
   которые выживают в масштабе: линейки идут через КАЖДУЮ строку и строки плотнее вдвое
   (20 против 36 у D4), а цена стоит НАД описанием, в одну строку с заголовком, и набрана
   тем же кеглем - в плитке это читается как таблица, а D4 как список.
   Узкий: --ls-d5-cols. ─── */
.ls-off .ls-d5{display:grid;gap:0;border-block-start:1px solid var(--ls-line,rgba(0,0,0,.14))}
.ls-d5__row{display:grid;grid-template-columns:var(--ls-d5-cols,minmax(0,1fr) auto);
  gap:var(--ls-d5-cg,24px);align-items:baseline;padding-block:var(--ls-d5-pad,20px);
  padding-inline:0;border-block-end:1px solid var(--ls-line,rgba(0,0,0,.14))}
@container ls (max-width:700px){.ls-off .ls-d5{--ls-d5-pad:16px}}
.ls-d5__row .ls-off__t{--ls-it-t:19px}
.ls-d5__row .ls-off__p{margin-block-start:4px;max-inline-size:64ch;font-size:var(--ls-sm,14px)}
.ls-d5__pr{font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ls-ink,#000)}

/* ─── D6. Видео: секция схлопывается до одного встраивания и прячет всё остальное.
   ПУСТОЕ СОСТОЯНИЕ - то, с чем человек встречается первым, поэтому оно и проектируется.
   Узкий: --ls-d6-ar. ─── */
.ls-off .ls-d6{display:grid;gap:16px}
.ls-d6__box{position:relative;aspect-ratio:var(--ls-d6-ar,16 / 9);overflow:hidden;
  background:var(--ls-band,#eee)}
@container ls (max-width:700px){.ls-off .ls-d6{--ls-d6-ar:4 / 3}}
.ls-d6__box img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* ЗАГЛУШКА С ОБЛОЖКОЙ - предложение, не решение (см. пакет, раздел оговорок): до нажатия
   на странице нет ни одного чужого запроса, плеер грузится по нажатию. Обложка берётся у
   самого видео один раз при вставке адреса и лежит в медиатеке клиента. */
/* В РЕЖИМЕ ПРАВКИ КНОПКА ПУСКА УСТУПАЕТ ДОРОГУ ОРГАНАМ ПРАВКИ.

   Она растянута на всю обложку (`inset:0`), не приходится потомком горячему месту и
   указатель не пропускает - значит наведение до картинки НЕ ДОХОДИТ ВОВСЕ, и плашка
   «Replace / Regenerate» не появляется ни при каком движении мыши. Это хуже вуали
   первого экрана: там плашка была видна притушенной, здесь её нет совсем.

   Признак правки берётся ИЗ САМОЙ РАЗМЕТКИ: горячее место печатается только в
   редакторе, поэтому `:has(.sc-se__hot)` и есть вопрос «мы в правке?». Так слой сайта
   не ссылается на оболочку кабинета и остаётся самодостаточным. У посетителя ничего
   не меняется: горячих мест у него нет, правило не совпадает ни с чем.

   Ролик в редакторе и не должен запускаться - там правят обложку, а не смотрят. */
.ls-d6__box:has(.sc-se__hot) .ls-d6__play{pointer-events:none}
.ls-d6__play{position:absolute;inset:0;display:grid;place-items:center;border:0;
  background:color-mix(in oklab,var(--ls-ink,#000) 24%,transparent);cursor:pointer}
.ls-d6__play > span{inline-size:72px;block-size:72px;display:grid;place-items:center;
  border-radius:999px /* kit-free: круг, а не угол: стороны равны */;background:var(--ls-paper,#fff);color:var(--ls-ink,#000)}
.ls-d6__play .sc-icon{font-size:34px}
.ls-d6__note{display:flex;align-items:center;gap:8px;font-size:var(--ls-sm,14px);
  color:var(--ls-muted,#666)}
.ls-d6__note .sc-icon{font-size:17px;opacity:.7}
/* Пустое: коробка той же пропорции, значок и одна строка объяснения. Поле адреса кит
   ставил ЗДЕСЬ ЖЕ и объяснял это тем, что человек пришёл вставить ссылку; у нас оно
   переехало в лист - см. отступление, объявленное в `tools/adopt-offer.php`. */
.ls-d6__box[data-empty]{display:grid;place-items:center;gap:14px;align-content:center;
  outline:1px dashed var(--ls-line,rgba(0,0,0,.2));outline-offset:-1px}
/* Значок и строка лежат внутри горячего места, поэтому прямой потомок больше не подходит:
   между коробкой и ними стоят два узла оснастки правки. */
.ls-d6__box[data-empty] .sc-icon{font-size:38px;color:var(--ls-muted,#666);opacity:.5}
.ls-d6__ph{display:grid;place-items:center;gap:14px;padding:24px;text-align:center}
/* Подпись «Video» поверх обложки - только у правящего. Обложка тут обычная картинка
   секции и честно предлагает «Replace / Regenerate»; без подписи блок читается как
   фотография, на что владелец и указал. */
.ls-d6__kind{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--ls-r-pill,999px);
  background:color-mix(in oklab,#000 62%,transparent);color:#fff;
  font-size:var(--ls-sm,14px);font-weight:500;pointer-events:none}
.ls-d6__kind .sc-icon{font-size:17px}
.ls-d6__box[data-empty] p{margin:0;max-inline-size:34ch;text-align:center;
  color:var(--ls-muted,#666);text-wrap:pretty}
.ls-d6__field{display:flex;gap:8px;inline-size:min(440px,84%)}
.ls-d6__inp{flex:1;min-inline-size:0;min-block-size:44px;padding-inline:14px;
  border:1px solid var(--ls-line,rgba(0,0,0,.14));background:var(--ls-paper,#fff);
  color:var(--ls-ink,#000);font:inherit;font-size:15px}
.ls-d6__inp::placeholder{color:var(--ls-muted,#666)}
.ls-d6__go{min-block-size:44px;padding-inline:20px;border:0;background:var(--ls-acc,#333);
  color:var(--ls-acc-on,#fff);font:inherit;font-size:15px;font-weight:500;cursor:pointer}