/* Start:/local/templates/redesign_nb/css/nb-doc.css?179398747141061*/
:root{--nb-font: "Ruberoid", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--nb-fw-regular: 400;--nb-fw-semibold: 600;--nb-lh: 1.46;--nb-lh-tight: 1.2;--nb-ls: 0;--nb-fs-2xs: 8px;--nb-fs-xs: 10px;--nb-fs-sm: 12px;--nb-fs-md: 13px;--nb-fs-base: 14px;--nb-fs-lg: 16px;--nb-fs-xl: 18px;--nb-fs-2xl: 20px;--nb-fs-3xl: 24px;--nb-fs-hero: clamp(28px, 4vw, 60px);--nb-fs-hero-link: clamp(14px, 1.15vw, 18px);--nb-ink: #000000;--nb-paper: #FFFFFF;--nb-gray-900: #5A5A5A;--nb-gray-700: #757575;--nb-gray-500: #8C8C8C;--nb-gray-400: #B2B2B2;--nb-gray-300: #D9D9D9;--nb-gray-100: #F5F5F5;--nb-cream: #F6F2ED;--nb-accent-promo: #489E58;--nb-status-ok: #34C759;--nb-status-info: #007AFF;--nb-status-warn: #FF9500;--nb-status-alert: #FF5F57;--nb-disabled: #79747E;--nb-instagram-ring: conic-gradient(from 180deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75);--nb-overlay: rgb(0 0 0 / 0.12);--nb-overlay-blur: 5px;--nb-overlay-solid: rgb(0 0 0 / 0.22);--nb-glass: rgb(255 255 255 / 0.7);--nb-glass-strong: rgb(255 255 255 / 0.9);--nb-r-sm: 3px;--nb-r-md: 10px;--nb-r-lg: 15px;--nb-r-sheet: 0;--nb-r-full: 999px;--nb-space-1: 5px;--nb-space-2: 10px;--nb-space-3: 15px;--nb-space-4: 20px;--nb-space-5: 25px;--nb-space-6: 30px;--nb-space-8: 40px;--nb-space-10: 50px;--nb-space-12: 60px;--nb-space-16: 80px;--nb-gutter: clamp(15px, 2.6vw, 40px);--nb-measure: 32rem;--nb-grid-gap: 15px;--nb-grid-gap-mobile: 5px;--nb-grid-row-gap: 40px;--nb-grid-row-gap-mobile: 30px;--nb-card-min: 300px;--nb-card-min-mobile: 160px;--nb-card-ratio: 2 / 3;--nb-bar-h: 2px;--nb-bar-thin: 1px;--nb-gallery-bars-w: 140px;--nb-topbar-h: 30px;--nb-header-h: 60px;--nb-topbar-h-m: 20px;--nb-header-h-m: 50px;--nb-menu-panel-w: 900px;--nb-drawer-w: 540px;--nb-pdp-aside-min: 360px;--nb-filter-w: 720px;--nb-look-w: 900px;--nb-content-max: 1920px;--nb-doc-max: 1120px;--nb-bp-desktop: 1024px;--nb-shadow-dropdown: 0 1px 4px rgb(0 0 0 / 0.15);--nb-border: 1px;--nb-opacity-muted: 0.5;--nb-opacity-faint: 0.4;--nb-motion: 200ms ease;--nb-z-chrome: 100;--nb-z-menu: 200;--nb-z-panel: 2000;--nb-motion-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);--nb-swipe-motion: 420ms cubic-bezier(0.16, 1, 0.3, 1);--nb-motion-drawer: 320ms cubic-bezier(0.22, 1, 0.36, 1);--nb-motion-fade: 600ms ease;--nb-motion-img: 220ms ease;--nb-motion-collapse: 220ms cubic-bezier(0.23, 1, 0.32, 1);--nb-paper-muted: rgb(255 255 255 / 0.7);--nb-paper-line: rgb(255 255 255 / 0.15);--nb-ink-muted: rgb(0 0 0 / 0.6);--nb-tap: 50px;--nb-icon: 24px;--nb-icon-sm: 20px;--nb-hero-min-h: 560px;--nb-hero-min-h-m: 480px;--nb-logo-h: 18px;--nb-logo-h-m: 15px}
/* ============================================================================
   nb-doc — каркас СТРАНИЦЫ ТЕКСТА (подвальные разделы: доставка, возврат,
   контакты, бренд, оферта, дисконт, оплата частями, карта сайта).
   Файл ведётся РУКАМИ, как nb-personal.css: сборкой не переписывается.
   Блок :root выше сгенерирован из src/tokens/tokens.css — единственного
   источника значений; руками в него не дописывать, перегенерировать.

   Зачем отдельный файл, а не общий бандл: бандл темы (nb-sandbox.css) собирают
   несколько параллельных worktree одной ветки, и залить свою сборку значит молча
   откатить чужую. Экранный файл подключается своей страницей и никому не мешает.

   Замер до правки (17.09, /ua/delivery_payment/):
   * main.main — padding 0, текст упирается в оба края экрана;
   * на 1440 строка идёт во всю ширину 1425 px — 158 знаков при норме 70;
   * из ~4000 знаков содержания видно 445: остальное закрыто семью
     button.accordion, у которых не видно фокуса (ворота G-28);
   * h1 стоит с классом d-none. В redesign_nb правила .d-none НЕТ, поэтому
     заголовок виден; в теме main оно есть — там заголовка НЕ видно.
     Поэтому класс снимается в самом содержании, а не перебивается здесь.
   ========================================================================== */

.nb-doc{
  /* Свой отступ от краёв: в НОВОЙ теме у main его нет вовсе, а текст, упирающийся
     в край экрана, читать нечем. Шкала --nb-gutter та же, что у шапки этой темы:
     замер 17.09 — заголовок встаёт на 15 px при бургере на 10, на 1440 на 37 при 40. */
  padding-inline: var(--nb-gutter);
  padding-block-end: var(--nb-space-12);
  /* Страница-документ не растекается по широкому экрану. Замер 17.09 на
     /ua/size_table/ при окне 1920: таблица 1825px, от размера слева до обхвата
     бёдер справа — полтора метра хода глазом, строка теряется на полпути.
     Val: «вся страница стала на весь экран, на весь широкий, мне не нравится».
     Текст в системе ограничен давно (--nb-measure ≈ 70 знаков), таблицы и кадры
     не были ограничены ничем. */
  max-inline-size: var(--nb-doc-max);
  margin-inline: auto;
  font-family: var(--nb-font);
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-regular);
  line-height: var(--nb-lh);
  color: var(--nb-ink);
}

/* ⚠ В СТАРОЙ теме боя отступ уже даёт .container (padding 35px), и свой поверх него
   отодвигал текст ВДВОЕ: шапка там стоит на 35 px, а заголовок уходил на 50 (на 1440 —
   55 против 92). Val 17.09: «чтобы отступы по бокам были под шапку».
   Поэтому при наличии контейнера-обёртки свой отступ снимается, и страница садится
   ровно на ту же линию, что шапка: 35 на телефоне, 55 на широком экране.
   Числа не зашиваем — их задаёт сам .container, мы лишь перестаём добавлять своё. */
.container .nb-doc{
  padding-inline: 0;
}

/* Длина строки. --nb-measure держит ~70 знаков — это и есть норма системы.
   Ограничение ставится на САМ текст, а не на .nb-doc: сетка фактов и
   раскрывающиеся блоки должны уметь быть шире строки. */
.nb-doc__lead,
.nb-doc__text,
.nb-doc__list,
.nb-doc .nb-doc__more > *:not(summary){
  max-inline-size: var(--nb-measure);
}

/* ⚠ Вес селектора поднят намеренно. В СТАРОЙ теме боя лежит
   `.page-content h1:not(.title-h) { font-size: 28px }` — специфичность (0,2,1), она
   перебивала простой `.nb-doc__title` (0,1,0), и на бою заголовок выходил 28 px вместо
   наших 24. Поймано замером на живом бою 17.09, на деве этого правила нет вовсе.
   `:not(.title-h)` повторяет исключение самой темы, чтобы правило читалось как ответ
   на него, а не как случайный набор классов. !important не ставим — правило системы. */
.nb-doc h1.nb-doc__title:not(.title-h){
  margin: var(--nb-space-4) 0 var(--nb-space-3);
  font-size: var(--nb-fs-3xl);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
  letter-spacing: var(--nb-ls);
  text-transform: uppercase;
  /* Заголовок по левому краю, как и весь текст под ним. Старая тема боя ставит
     `.page-content h1 { text-align: center }`, и пока страница шла во всю ширину,
     перекос читался как «заголовок посередине экрана». После ограничения колонки
     1120px стало видно, что он центрован ОТНОСИТЕЛЬНО ТЕКСТА, который слева.
     Val 17.09: «да выровняй, пожалуйста». Вес уже поднят тем же селектором,
     который чинит кегль, — отдельного правила не нужно. */
  text-align: start;
}

.nb-doc__lead{
  margin: 0 0 var(--nb-space-6);
  font-size: var(--nb-fs-lg);
  line-height: var(--nb-lh);
  color: var(--nb-gray-900);
}

/* --- Факты: то, ради чего человек пришёл ---------------------------------
   На «Доставке» это цена и срок. Они стоят ПЕРВЫМИ и не спрятаны: в прежней
   вёрстке цены 80/80/120 грн лежали последней строкой под заголовком
   «Зверніть увагу», ниже инструкции про ввод CVV. */
.nb-doc__facts{
  display: grid;
  /* Без медиа-запроса намеренно: своего брейкпоинта у этой сетки быть не должно,
     а системный (--nb-bp-desktop) для карточек фактов слишком поздний. auto-fit
     сам даёт одну колонку на телефоне и две-три на широком экране — ширина
     карточки задана в токенах шкалы, а не новым порогом. Взят --nb-card-min
     (300px): на телефоне помещается одна колонка, на широком экране auto-fit
     схлопывает пустые дорожки и три факта встают в ряд. --nb-card-min-mobile
     (160) дал бы на телефоне две колонки и третью карточку в полстроки. */
  grid-template-columns: repeat(auto-fit, minmax(var(--nb-card-min), 1fr));
  gap: var(--nb-space-2);
  margin-block-end: var(--nb-space-6);
}

.nb-doc__fact{
  display: grid;
  gap: var(--nb-space-1);
  padding: var(--nb-space-3);
  background: var(--nb-cream);
  border-radius: var(--nb-r-md);
}

.nb-doc__fact-k{
  font-size: var(--nb-fs-sm);
  color: var(--nb-gray-900);
}

.nb-doc__fact-v{
  font-size: var(--nb-fs-2xl);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
}

.nb-doc__fact-n{
  font-size: var(--nb-fs-sm);
  /* ⚠ Не --nb-gray-700: фон карточки кремовый, а не белый, и на нём тот же серый даёт
     4.13:1 при норме 4.5 — поймано воротами G-36 сразу после первой выкладки 17.09.
     На --nb-gray-900 выходит 6.19:1. Разницу между подписью и сроком держит не цвет,
     а место в карточке и размер цены. */
  color: var(--nb-gray-900);
}

.nb-doc__note{
  margin: 0 0 var(--nb-space-8);
  /* Колонка УЖЕ основной намеренно. --nb-measure — длина в пикселях, а не в знаках:
     мелкий текст (--nb-fs-sm) умещает в ту же ширину больше знаков и выходит за норму.
     Замер 17.09 на 1440: в полной мере примечание давало 73 знака в строке при норме
     70, основной текст в той же мере — 69. Множитель убирает именно эту разницу. */
  max-inline-size: calc(var(--nb-measure) * 0.9);
  font-size: var(--nb-fs-sm);
  color: var(--nb-gray-700);
}

/* --- Разделы -------------------------------------------------------------- */
.nb-doc__section{
  margin-block-end: var(--nb-space-8);
}

.nb-doc__h2{
  margin: 0 0 var(--nb-space-3);
  font-size: var(--nb-fs-xl);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
  letter-spacing: var(--nb-ls);
  text-transform: uppercase;
}

.nb-doc__text{
  margin: 0 0 var(--nb-space-3);
}

.nb-doc__list{
  margin: 0 0 var(--nb-space-3);
  padding-inline-start: var(--nb-space-4);
  /* ⚠ Тема глушит маркеры у ВСЕХ списков правилом `ol, ul { list-style: none }`.
     Без этой строки перечисление читается как слипшиеся абзацы — поймано на снимке
     17.09, в числах это не видно. Перебиваем весом селектора (класс против двух
     элементов), а не !important. */
  list-style: disc;
}

/* ⚠ Нумерованный список тем же классом: без этой строки он унаследовал бы disc сверху
   и шаги инструкции потеряли бы номера — а в инструкции номер и есть смысл. */
ol.nb-doc__list{
  list-style: decimal;
}

/* ⚠ Маркер задаётся И на самом пункте, а не только на списке. Две темы глушат его
   ПО-РАЗНОМУ, и правило на контейнере закрывает только одну:
     новая тема — `ol, ul { list-style: none }`, наследование от .nb-doc__list побеждает;
     СТАРАЯ тема боя — `ul li { list-style: none }` прямо на пункте, и наследование
     проигрывает собственному объявлению элемента.
   Из-за этого на деве маркеры были, а на бою список читался слипшимися абзацами —
   поймано кадром живого боя 17.09, в вычисленных стилях СПИСКА всё выглядело исправным.
   Позиция задаётся явно: старая тема ставит `inside`, новая — `outside`. */
ul.nb-doc__list > li{
  list-style: disc outside;
}

ol.nb-doc__list > li{
  list-style: decimal outside;
}

.nb-doc__list > li::marker{
  color: var(--nb-gray-500);
}

/* --- Картинка с подписью -------------------------------------------------- */
.nb-doc__figure{
  margin: var(--nb-space-4) 0;
  /* Шире колонки текста намеренно: это бланк, который человек разглядывает,
     а не читает строками. */
  max-inline-size: var(--nb-content-max);
}

.nb-doc__img{
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--nb-gray-100);
  border-radius: var(--nb-r-sm);
}

.nb-doc__figcaption{
  margin-block-start: var(--nb-space-2);
  max-inline-size: calc(var(--nb-measure) * 0.9);
  font-size: var(--nb-fs-sm);
  color: var(--nb-gray-900);
}

.nb-doc__list li{
  margin-block-end: var(--nb-space-1);
}

/* --- Раскрывающийся блок --------------------------------------------------
   <details> вместо button.accordion + собственного скрипта на странице:
   клавиатура, фокус и раскрытие достаются от браузера, скрипт не нужен вовсе.
   Прежняя кнопка не показывала фокус — это HIGH-нарушение ворот G-28. */
.nb-doc__more{
  border-block-start: var(--nb-bar-thin) solid var(--nb-gray-300);
}

.nb-doc__more:last-of-type{
  border-block-end: var(--nb-bar-thin) solid var(--nb-gray-300);
}

.nb-doc__more > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-2);
  /* Зона нажатия — токен системы, а не 44 из чужих методичек. */
  min-block-size: var(--nb-tap);
  padding-block: var(--nb-space-2);
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-semibold);
  cursor: pointer;
  list-style: none;
}

.nb-doc__more > summary::-webkit-details-marker{
  display: none;
}

/* Шеврон: своя фигура вместо стандартного треугольника. Поворот — по признаку
   открытости, наведение ничего не перекрашивает (правило системы: наведение
   отвечает движением, а не посерением). */
.nb-doc__more > summary::after{
  content: "";
  inline-size: var(--nb-icon-sm);
  block-size: var(--nb-icon-sm);
  flex: none;
  background: currentColor;
  transition: transform var(--nb-motion);
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 74% 29%, 50% 53%, 26% 29%);
}

.nb-doc__more[open] > summary::after{
  transform: rotate(180deg);
}

.nb-doc__more > summary:focus-visible{
  outline: var(--nb-bar-h) solid var(--nb-ink);
  outline-offset: calc(var(--nb-space-1) * -1);
}

.nb-doc__more > *:not(summary){
  margin-block: 0 var(--nb-space-3);
}

.nb-doc__more > *:not(summary):first-of-type{
  margin-block-start: var(--nb-space-1);
}

/* --- Кнопка-ссылка --------------------------------------------------------- */
/* Была инлайновой: свой hex фона, свои px, и переворот цвета на onmouseover
   прямо в атрибутах разметки. Наведение у нас отвечает движением, а не сменой
   цвета, поэтому смены здесь нет вовсе. */
/* ⚠ Вес поднят предком, и вот почему. Ниже в этом же файле стоит `.nb-doc a` с
   цветом текста --nb-ink: у неё вес (0,1,1) против (0,1,0) у одного класса, и она
   идёт позже. Из-за этого кнопка на «Дисконтному клубі» рисовалась ЧЁРНЫМ ПО ЧЁРНОМУ:
   замер ворот 17.09 — contrast 1:1 при норме 4.5, кнопка «Перейти до покупок»
   была на странице и была невидима. Один класс тут не работает, !important не нужен —
   нужен вес. */
.nb-doc .nb-doc__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--nb-tap);
  padding-inline: var(--nb-space-6);
  margin-block-start: var(--nb-space-4);
  background: var(--nb-ink);
  color: var(--nb-paper);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  letter-spacing: var(--nb-ls);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--nb-r-sm);
}

.nb-doc .nb-doc__button:focus-visible{
  outline: var(--nb-bar-h) solid var(--nb-ink);
  outline-offset: var(--nb-space-1);
}

/* --- Баннер страницы ------------------------------------------------------- */
/* ⚠ Ширина и высота проставляются в разметке: без них кадр 1024x1080 роняет
   вёрстку при загрузке. Замер 17.09 на «Дисконтному клубі»: CLS 0.405 при норме 0.1.
   Второй источник того же CLS — подмена кадра через opacity: грузились ОБА файла
   (623 КБ десктопный и 563 КБ мобильный, 1.19 МБ на текстовую страницу).
   Теперь это <picture> с media, и браузер берёт ровно один. */
.nb-doc__banner{
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block-end: var(--nb-space-6);
}

/* --- Крошки -------------------------------------------------------------- */
/* Видимая строка крошек на страницах текста убрана — решение Val 17.09:
   «хлебные крошки нужно во всех этих разделах убрать, а там только одна ссылка
   по факту». Проверено на живой странице: в .broad-list ровно один <li> со
   ссылкой «Natali Bolgar» на главную — то же самое, что говорит логотип сверху.

   ⚠ Убрана именно ВИДИМАЯ строка. Соседний <script type="application/ld+json">
   с BreadcrumbList печатает шапка отдельным тегом, он остаётся на месте — ради
   него крошки и существуют для поиска. Сверено после правки: блок в разметке 1.

   ⚠ Правило живёт ЗДЕСЬ, а не в общей теме: файл подключают только страницы
   текста, поэтому на карточке, в каталоге и корзине крошки не трогаются.
   То же решение на странице магазинов сделано инлайновым <style> — там
   nb-doc.css не подключается. */
/* Общий брат, а не соседний (`+`): между крошками и .nb-doc шапка печатает
   <script> с разметкой, и завязка на точный порядок соседей развалилась бы,
   стоит появиться ещё одному тегу.

   ⚠ Два случая, а не один — замер на бою 17.09. В новой теме .broad и .nb-doc лежат
   соседями внутри main. В СТАРОЙ теме боя между ними есть обёртка: .broad — прямой
   ребёнок .container, а .nb-doc сидит внутри соседнего .page-content. Первое правило
   ловит дев, второе — бой. Без второго крошки на бою остались видимыми. */
.broad:has(~ .nb-doc),
.broad:has(~ * .nb-doc){
  display: none;
}

/* --- Список «подпись — значение» (контакты) -------------------------------- */
.nb-doc__dl{
  display: grid;
  gap: var(--nb-space-1) var(--nb-space-4);
  margin: 0 0 var(--nb-space-4);
  max-inline-size: var(--nb-measure);
}

@media (min-width: 40rem){
  /* Единственный брейкпоинт в файле, и он не свой: 40rem — это та же ширина, на
     которой --nb-gutter перестаёт быть минимальным. Ниже неё две колонки «подпись
     и значение» не помещаются, подпись переносится и перестаёт быть подписью. */
  .nb-doc__dl{
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.nb-doc__dt{
  font-size: var(--nb-fs-sm);
  color: var(--nb-gray-900);
}

.nb-doc__dd{
  margin: 0 0 var(--nb-space-2);
  display: grid;
  justify-items: start;
}

/* Телефон и почта — цели нажатия, а не просто текст. Размер берём из токена
   системы (--nb-tap), а не из чужих 44/48: у нас своё и оно больше.
   До 17.09 они были обычными строками по 19 px — ворота G-22 считали их
   нарушением на каждой странице с контактами. */
.nb-doc__tap{
  display: inline-flex;
  align-items: center;
  min-block-size: var(--nb-tap);
  color: var(--nb-ink);
  text-decoration: underline;
  text-underline-offset: var(--nb-space-1);
}

.nb-doc__chips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-space-4);
}

/* --- Ссылка внутри текста ------------------------------------------------- */
.nb-doc a{
  color: var(--nb-ink);
  text-decoration: underline;
  text-underline-offset: var(--nb-space-1);
  /* ⚠ Перенос ВНУТРИ слова. В оферте адрес сайта написан целиком и повторяется
     двенадцать раз: для браузера это одно слово шириной 440px, и на окне 390 оно
     выносило страницу вбок на 444px (ворота G-69, замер 17.09). Лечится переносом,
     а не сокращением адреса: адрес — часть текста юридического документа. */
  overflow-wrap: break-word;
}

/* --- Оглавление длинного документа ---------------------------------------- */
/* Пункт оглавления — цель нажатия размера --nb-tap, а не строка текста: по нему
   ходят пальцем, в отличие от ссылки внутри абзаца. */
.nb-doc__tocitem{
  display: flex;
  align-items: center;
  min-block-size: var(--nb-tap);
}

/* --- Карта сайта ----------------------------------------------------------- */
/* Три блока карты рядом там, где хватает места. Своего брейкпоинта нет: колонок
   столько, сколько влезло — на телефоне одна. */
.nb-doc__cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--nb-card-min), 1fr));
  gap: 0 var(--nb-space-8);
  max-inline-size: var(--nb-content-max);
}

/* ⚠ Маркеров здесь нет НАМЕРЕННО, в отличие от .nb-doc__list. Это список навигации,
   а не проза: каждая строка — цель нажатия, и точка перед ссылкой добавляет шум
   там, где и так очевидно, что перед тобой перечень адресов. */
.nb-doc__maplist{
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-doc__maplist--sub{
  margin-inline-start: var(--nb-space-4);
  border-inline-start: var(--nb-bar-thin) solid var(--nb-gray-300);
  padding-inline-start: var(--nb-space-3);
}

/* Строка карты — цель нажатия размера --nb-tap, а не текст высотой 17px, каким
   она была до 17.09. */
.nb-doc__mapitem{
  display: flex;
  align-items: center;
  min-block-size: var(--nb-tap);
}

/* Якорь не уезжает под шапку: она перекрывает верх страницы, и без этого отступа
   человек, нажавший пункт оглавления, попадал бы на середину заголовка раздела. */
.nb-doc__section[id]{
  scroll-margin-block-start: calc(var(--nb-header-h) + var(--nb-space-4));
}

/* --- Таблица --------------------------------------------------------------
   Своя таблица, а не тема: на странице размеров тема давала `.table td:hover`
   с двумя псевдоэлементами по 10000px (подсветка строки и столбца) — из них и
   рос вынос вбок 392px при окне 390 (замер 17.09, ворота G-69).

   ⚠ Обёртка со своей прокруткой обязательна. Таблица соответствия размеров —
   четыре колонки, обувная — семь; на 390 семь колонок не помещаются ни при
   каком размере шрифта, и без обёртки уезжала бы вся страница, а не таблица. */
.nb-doc__tablewrap{
  overflow-x: auto;
  margin-block: var(--nb-space-4);
  /* Полоса прокрутки под пальцем, а не под страницей: без этого на телефоне
     человек тянет страницу вбок и не понимает, что двигалась таблица. */
  -webkit-overflow-scrolling: touch;
}

/* ⚠ Вес поднят классом-предком: у обеих тем есть собственные правила на голые
   `table`, `th`, `td` (в старой — ещё и `.table`), и правило в одно слово они
   перебивали бы. !important здесь не нужен — нужен вес. */
.nb-doc .nb-doc__table{
  border-collapse: collapse;
  inline-size: 100%;
  /* Ниже этого таблица из четырёх колонок начинает рвать числа по слогам.
     Меньше ширины окна телефона намеренно: на 390 таблица должна помещаться
     целиком, а прокручиваться — только семиколоночная обувная. */
  min-inline-size: 18rem;
  font-size: var(--nb-fs-sm);
  text-align: center;
}

.nb-doc .nb-doc__table th,
.nb-doc .nb-doc__table td{
  padding: var(--nb-space-2) var(--nb-space-1);
  border-block-end: var(--nb-bar-thin) solid var(--nb-gray-300);
  /* Числа мерок не переносятся: «84-88» в две строки читается как два разных
     числа. */
  white-space: nowrap;
}

.nb-doc .nb-doc__table thead th{
  font-weight: var(--nb-fw-semibold);
  border-block-end: var(--nb-bar-h) solid var(--nb-ink);
}

/* Первая колонка — то, что человек ищет глазами (размер): она подпись, а не
   число, поэтому прижата к началу строки и весит больше остальных. */
.nb-doc .nb-doc__table th:first-child,
.nb-doc .nb-doc__table td:first-child{
  text-align: start;
  font-weight: var(--nb-fw-semibold);
}

.nb-doc .nb-doc__table tbody tr:last-child th,
.nb-doc .nb-doc__table tbody tr:last-child td{
  border-block-end: 0;
}

/* --- Перекрестье в таблице -------------------------------------------------
   Ведёшь мышью или тапаешь по клетке — светится вся строка и весь столбец, а
   два заголовка перекрестья (размер слева, мерка сверху) становятся чёрными.
   Так читается ответ целиком: «EU 42 × Талія → 80». Классы ставит
   `js/nb-doc-table.js`, разметка не меняется.

   ⚠ Подсветка сделана ФОНОМ КЛЕТОК, и это не стилистика. Ровно такая подсветка
   на странице размеров уже была и была снята 17.09: она рисовалась двумя
   псевдоэлементами по 10000px и выносила страницу вбок на 392px при окне 390
   (ворота G-69). Фон ширину не трогает вовсе.

   Переходов здесь нет намеренно: перекрестье бежит за курсором, и плавный фон
   отстаёт от него на глаз. */
.nb-doc .nb-doc__table tr.is-cross-row > th,
.nb-doc .nb-doc__table tr.is-cross-row > td,
.nb-doc .nb-doc__table .is-cross-col{
  background-color: var(--nb-cream);
}

.nb-doc .nb-doc__table .is-cross-cell{
  font-weight: var(--nb-fw-semibold);
}

/* ⚠ Вес первого селектора поднят НЕ ДЛЯ КРАСОТЫ. Заголовок строки (размер слева)
   лежит внутри самой подсвеченной строки, и правило `tr.is-cross-row > th` весит
   больше короткого `th.is-cross-head` (три класса + два элемента против трёх
   классов и одного). Кремовый фон побеждал чёрный, а белый текст оставался —
   на снимке дева 17.09 «42» читалось белым по кремовому, то есть не читалось
   вовсе. Порядок правил в файле тут не спасает: специфичность выше порядка. */
.nb-doc .nb-doc__table tr.is-cross-row > th.is-cross-head,
.nb-doc .nb-doc__table tr > th.is-cross-head,
.nb-doc .nb-doc__table tr > td.is-cross-head{
  background-color: var(--nb-ink);
  color: var(--nb-paper);
}

/* Подпись таблицы — тегом <caption>, а не абзацем рядом: так её читает вслух
   программа чтения с экрана, объявляя, в какую таблицу человек вошёл. */
.nb-doc .nb-doc__table caption{
  margin-block-end: var(--nb-space-2);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  color: var(--nb-ink);
  text-align: start;
}

/* --- Две колонки на десктопе ------------------------------------------------
   Раздел «Одяг» на широком экране идёт в две колонки: слева обе таблицы, справа
   кадр с линиями мерок — подсказка стоит РЯДОМ с числами, которые объясняет, а не
   под ними экраном ниже. Val 17.09: «можно, как вариант, разделить на две ячейки,
   на два столбца», ориентир — гид размеров Mango.

   Разметку это не меняет: порядок в исходнике остаётся мобильным (таблица, кадр,
   таблица), а колонки собирает сетка. Поэтому на телефоне всё как было.

   Порог — 1024px, тот же --nb-bp-desktop, что у всей системы. В медиазапросе
   токен использовать нельзя (custom property в условии не работает), поэтому
   число написано явно — и это единственное место, где оно повторено руками. */
/* Короткая таблица не растягивается на всю ширину (Val 06.11: «на пол экрана»). Телефон и планшет — как обычно. */
@media (min-width: 1024px){
  .nb-doc__tablewrap--half{ max-inline-size: 50%; }

  .nb-doc .nb-doc__section--split{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--nb-space-8);
    align-items: start;
  }

  .nb-doc .nb-doc__section--split > .nb-doc__h2{
    grid-column: 1 / -1;
  }

  /* Обе таблицы — в левую колонку, одна под другой. */
  .nb-doc .nb-doc__section--split > .nb-doc__tablewrap{
    grid-column: 1;
  }

  /* Кадр — правая колонка, на всю высоту обеих таблиц. */
  .nb-doc .nb-doc__section--split > .nb-doc__figure{
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-block: var(--nb-space-4);
  }
}

/* --- Ряд кадров ------------------------------------------------------------
   Кадры-иллюстрации идут рядом, но НЕ фиксированным числом колонок: три
   ростовых кадра 1000x1499 в один ряд на 390 дают колонку 120px, на которой
   не видно ни ленты, ни мерки (замер 17.09). Сетка сама решает, сколько их
   поместится, и на телефоне кладёт по одному. */
.nb-doc__figrow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--nb-card-min-mobile), 1fr));
  gap: var(--nb-grid-gap);
  margin-block: var(--nb-space-6);
  max-inline-size: var(--nb-content-max);
}

.nb-doc__figrow .nb-doc__figure{
  margin: 0;
}

/* ⚠ Кадры, у которых подписи НАРИСОВАНЫ ВНУТРИ изображения, требуют своей меры.
   Замер 17.09: пара кадров про длину изделия («від верхнього краю плечового шва»,
   «до низу по спинці») в обычном ряду получала на 390 колонку 165px — надпись
   внутри кадра на такой ширине не читается. Порог берётся больше ширины телефона,
   поэтому на телефоне такие кадры идут по одному, а рядом встают только там,
   где каждому хватает места. */
.nb-doc__figrow--wide{
  grid-template-columns: repeat(auto-fit, minmax(var(--nb-card-min), 1fr));
}

@media (prefers-reduced-motion: reduce){
  .nb-doc__more > summary::after{
    transition: none;
  }
}

/* ============================================================================
   ТИХАЯ РЕДАКЦИЯ (Val 07.10, 13436 — про «Дисконтний клуб»: «Ой как-то топорно получилось. надо по принципу тихого
   дизайна сделать, давай еще»). Каркас общий для всех страниц текста, поэтому и правка общая — иначе одна страница
   заговорит другим голосом, чем соседние в том же подвале.
   Что было «топорно» — ровно два анти-референса PRODUCT.md («Не AI-дженерик»): кремовые плашки со скруглением под
   фактами и капслочные заголовки над КАЖДОЙ секцией, да ещё полужирные. Плюс полужирный капс в H1 и кнопке.
   Что стало (принцип 2 PRODUCT.md — пропорции и воздух вместо декора):
     • H1 — тот же капс, но обычного веса и с разрядкой: так набраны заголовки раздела и попапов;
     • заголовки секций — строчными, обычного веса, крупнее текста на ступень; отделяет их воздух сверху;
     • факты — без подложки и скруглений: тонкая линия сверху, крупное число обычного веса, подпись серым;
     • маркеры списков — короткое тире вместо точки;
     • кнопка — обычного веса.
   Блок идёт ПОСЛЕ основных правил и перебивает их весом селектора (.nb-doc …), а не !important.
   ========================================================================== */
.nb-doc h1.nb-doc__title:not(.title-h){
  font-weight: var(--nb-fw-regular);
  letter-spacing: 0.04em;
  margin-block-end: var(--nb-space-4);
}
.nb-doc .nb-doc__lead{
  margin-block-end: var(--nb-space-8);
}
.nb-doc .nb-doc__facts{
  gap: var(--nb-space-6);
  margin-block-end: var(--nb-space-10);
}
.nb-doc .nb-doc__fact{
  gap: var(--nb-space-1);
  padding: var(--nb-space-3) 0 0;
  background: none;
  border-radius: 0;
  border-block-start: var(--nb-bar-thin) solid var(--nb-ink);
}
.nb-doc .nb-doc__fact-k{
  font-size: var(--nb-fs-base);
  color: var(--nb-ink);
}
.nb-doc .nb-doc__fact-v{
  font-size: var(--nb-fs-3xl);
  font-weight: var(--nb-fw-regular);
}
.nb-doc .nb-doc__section{
  margin-block-end: var(--nb-space-10);
}
.nb-doc .nb-doc__h2{
  margin-block-end: var(--nb-space-3);
  font-size: var(--nb-fs-xl);
  font-weight: var(--nb-fw-regular);
  text-transform: none;
}
.nb-doc ul.nb-doc__list{
  padding-inline-start: 0;
}
.nb-doc ul.nb-doc__list > li{
  list-style: none;
  position: relative;
  padding-inline-start: var(--nb-space-4);
}
.nb-doc ul.nb-doc__list > li::before{
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--nb-gray-500);
}
.nb-doc .nb-doc__button{
  font-weight: var(--nb-fw-regular);
  letter-spacing: 0.04em;
  border-radius: 0;
}
/* заголовки раскрывающихся блоков — тем же обычным весом, что и заголовки секций */
.nb-doc .nb-doc__more > summary{
  font-weight: var(--nb-fw-regular);
}

/* End */
/* /local/templates/redesign_nb/css/nb-doc.css?179398747141061 */