/* Страница записи эфира /live/<slug>/ — «Тиха вітрина».
   Одежда крупно, интерфейс тихо: кадр видео ничем не перекрываем, всё «магазинное» — под ним (телефон)
   или справа (ПК). Значения — только токены сайта (src/tokens/tokens.css в nb-site-redesign).
   Карточки товаров — разметка и стили рядов главной (.nb-home .product-card), здесь только их сетка. */

.nb-live {
  --nb-live-chrome: var(--nb-chrome-h, calc(var(--nb-topbar-h-m) + var(--nb-header-h-m)));
  --nb-live-ease: cubic-bezier(0.23, 1, 0.32, 1);     /* сильный ease-out: отклик сразу, мягкий доезд */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--nb-paper);
  color: var(--nb-ink);
  font-family: var(--nb-font);
}

/* --- сцена: чёрная, видео целиком, без обрезки ------------------------------------------------ */
.nb-live__stage {
  position: relative;
  background: var(--nb-ink);
  /* телефон: кадр почти на весь первый экран, но строка «сейчас» под ним остаётся видна */
  height: calc(100svh - var(--nb-live-chrome) - var(--nb-tap) - var(--nb-space-4));
  min-height: var(--nb-hero-min-h-m);
}
.nb-live__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--nb-ink);
}
.nb-live__novideo {
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--nb-space-6) var(--nb-gutter);
  color: var(--nb-paper-muted);
  font-size: var(--nb-fs-base);
  line-height: var(--nb-lh);
  text-align: center;
}

/* --- правая колонка / всё под видео ---------------------------------------------------------- */
.nb-live__side {
  padding: 0 var(--nb-gutter) var(--nb-space-12);
  min-width: 0;
}
.nb-live__head {
  padding: var(--nb-space-5) 0 var(--nb-space-3);
}
.nb-live__title {
  margin: 0;
  font-size: var(--nb-fs-3xl);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
  text-wrap: balance;
}
.nb-live__sub {
  margin: var(--nb-space-2) 0 0;
  font-size: var(--nb-fs-base);
  line-height: var(--nb-lh);
  color: var(--nb-gray-900);
  max-width: 60ch;
}

/* --- «Зараз в ефірі»: одна строка, липнет у верхнего края, пока листают ленту ------------------ */
.nb-live__now {
  position: sticky;
  top: var(--nb-live-chrome);
  z-index: 2;
  display: block;
  width: 100%;
  min-height: var(--nb-tap);
  margin: 0 0 var(--nb-space-4);
  padding: var(--nb-space-2) 0;
  border: 0;
  border-bottom: var(--nb-border) solid var(--nb-gray-300);
  background: var(--nb-paper);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nb-live__now[hidden] { display: none; }
.nb-live__now-body {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3);
  transition: opacity 200ms ease, filter 200ms ease, transform 160ms var(--nb-live-ease);
}
.nb-live__now.is-swapping .nb-live__now-body { opacity: 0; filter: blur(2px); }
.nb-live__now:active .nb-live__now-body { transform: scale(0.98); }
.nb-live__now-img {
  flex: none;
  width: var(--nb-space-8);
  aspect-ratio: var(--nb-card-ratio);
  height: auto;
  object-fit: cover;
  background: var(--nb-gray-100);
  border-radius: var(--nb-r-sm);
}
.nb-live__now-text { display: grid; min-width: 0; flex: 1; }
.nb-live__now-label {
  font-size: var(--nb-fs-sm);
  color: var(--nb-gray-700);
  line-height: var(--nb-lh);
}
.nb-live__now-name {
  font-size: var(--nb-fs-base);
  line-height: var(--nb-lh);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-live__now-price {
  flex: none;
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-semibold);
  white-space: nowrap;
}

/* --- лента моментов ---------------------------------------------------------------------------- */
.nb-live__moment {
  padding: var(--nb-space-3) 0 var(--nb-space-6);
  scroll-margin-top: calc(var(--nb-live-chrome) + var(--nb-tap) + var(--nb-space-4));
}
.nb-live__moment + .nb-live__moment {
  border-top: var(--nb-border) solid var(--nb-gray-100);
}
.nb-live__seek {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3);
  width: 100%;
  min-height: var(--nb-tap);
  margin: 0 0 var(--nb-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-gray-900);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, transform 160ms var(--nb-live-ease);
}
.nb-live__seek:disabled { cursor: default; }
.nb-live__seek:not(:disabled):active { transform: scale(0.98); }
.nb-live__seek-tc {
  flex: none;
  min-width: 5ch;
  font-size: var(--nb-fs-base);
  font-variant-numeric: tabular-nums;
}
.nb-live__seek-title {
  font-size: var(--nb-fs-lg);
  line-height: var(--nb-lh-tight);
  color: var(--nb-ink);
}
/* текущий момент — чернилами, без плашек: тихий сигнал «вы здесь» */
.nb-live__moment.is-current .nb-live__seek { color: var(--nb-ink); }
.nb-live__moment.is-current .nb-live__seek-tc { font-weight: var(--nb-fw-semibold); }
.nb-live__moment.is-current .nb-live__seek-tc::before {
  content: "";
  display: inline-block;
  width: var(--nb-space-1);
  height: var(--nb-space-1);
  margin: 0 var(--nb-space-2) 0 0;
  border-radius: var(--nb-r-full);
  background: var(--nb-ink);
  vertical-align: middle;
}
@media (hover: hover) and (pointer: fine) {
  .nb-live__seek:not(:disabled):hover { color: var(--nb-ink); }
  .nb-live__now:hover .nb-live__now-name { text-decoration: underline; text-underline-offset: 3px; }
}
.nb-live__seek:focus-visible,
.nb-live__now:focus-visible,
.nb-live__copy:focus-visible {
  outline: 2px solid var(--nb-ink);
  outline-offset: 2px;
}

/* карточки — как в листинге: 2 колонки на телефоне, воздух между рядами */
.nb-live__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--nb-card-min-mobile), 1fr));
  gap: var(--nb-grid-row-gap-mobile) var(--nb-grid-gap-mobile);
}
.nb-live__cards > .product-card { width: auto; min-width: 0; margin: 0; }
/* в обёртке главной карточки ряда — фиксированной ширины; в нашей сетке они тянутся по колонке */
.nb-live__list.nb-home .nb-live__cards > .product-card { flex: none; max-width: none; }
.nb-live__pending-title {
  margin: 0 0 var(--nb-space-3);
  font-size: var(--nb-fs-lg);
  font-weight: var(--nb-fw-regular);
  line-height: var(--nb-lh-tight);
}

/* --- режим разметки (?edit=1) ----------------------------------------------------------------- */
.nb-live__tc {
  position: absolute;
  top: var(--nb-space-3);
  right: var(--nb-space-3);
  padding: var(--nb-space-1) var(--nb-space-2);
  border-radius: var(--nb-r-sm);
  background: var(--nb-overlay-solid);
  color: var(--nb-paper);
  font-size: var(--nb-fs-2xl);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.nb-live__edit {
  margin: 0 0 var(--nb-space-6);
  padding: var(--nb-space-4);
  background: var(--nb-gray-100);
  border-radius: var(--nb-r-md);
}
.nb-live__copy {
  width: 100%;
  min-height: var(--nb-tap);
  border: 0;
  border-radius: var(--nb-r-sm);
  background: var(--nb-ink);
  color: var(--nb-paper);
  font: inherit;
  font-size: var(--nb-fs-base);
  cursor: pointer;
  transition: transform 160ms var(--nb-live-ease);
}
.nb-live__copy:active { transform: scale(0.98); }
.nb-live__note {
  margin: var(--nb-space-3) 0 0;
  font-size: var(--nb-fs-sm);
  line-height: var(--nb-lh);
  color: var(--nb-gray-900);
}
.nb-live__note.is-stale { color: var(--nb-ink); font-weight: var(--nb-fw-semibold); }
.nb-live__errors {
  margin: var(--nb-space-3) 0 0;
  padding: 0 0 0 var(--nb-space-4);
  font-size: var(--nb-fs-sm);
  line-height: var(--nb-lh);
  color: var(--nb-ink);
}

.nb-live-empty {
  padding: var(--nb-space-16) var(--nb-gutter);
  text-align: center;
}
.nb-live-empty h1 { font-size: var(--nb-fs-3xl); font-weight: var(--nb-fw-semibold); margin: 0 0 var(--nb-space-4); }
.nb-live-empty a { color: var(--nb-ink); }

/* --- ПК: видео слева на всю высоту окна, лента справа ------------------------------------------ */
@media (min-width: 1024px) {
  .nb-live {
    --nb-live-chrome: var(--nb-chrome-h, calc(var(--nb-topbar-h) + var(--nb-header-h)));
    grid-template-columns: auto minmax(var(--nb-pdp-aside-min), 1fr);
    align-items: start;
  }
  .nb-live__stage {
    position: sticky;
    top: var(--nb-live-chrome);
    height: calc(100svh - var(--nb-live-chrome));
    min-height: 0;
    aspect-ratio: 9 / 16;
  }
  .nb-live__side { padding: 0 var(--nb-gutter) var(--nb-space-16) var(--nb-space-8); }
  .nb-live__head { padding: var(--nb-space-8) 0 var(--nb-space-4); }
  .nb-live__cards {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--nb-card-min) - var(--nb-space-8)), 1fr));
    gap: var(--nb-grid-row-gap) var(--nb-grid-gap);
  }
  .nb-live__now { top: var(--nb-live-chrome); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-live__now-body,
  .nb-live__seek,
  .nb-live__copy { transition: opacity 120ms ease; }
  .nb-live__now.is-swapping .nb-live__now-body { filter: none; }
  .nb-live__now:active .nb-live__now-body,
  .nb-live__seek:not(:disabled):active,
  .nb-live__copy:active { transform: none; }
}

/* --- эфир YouTube (stream.json v2) ------------------------------------------------------------- */
.nb-live__yt { border: 0; }
/* горизонтальный эфир: кадр 16:9 по ширине, без чёрных полей сверху и снизу */
.nb-live--wide .nb-live__stage {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/* «Зараз в ефірі»: товары, которые ведущий показывает прямо сейчас (выбирает менеджер в БЦ) */
.nb-live__onair {
  padding: var(--nb-space-3) 0 var(--nb-space-6);
  scroll-margin-top: calc(var(--nb-live-chrome) + var(--nb-space-4));
}
.nb-live__onair[hidden] { display: none; }
.nb-live__onair-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nb-space-2);
  margin: 0 0 var(--nb-space-3);
  font-size: var(--nb-fs-lg);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
}
.nb-live__onair-name {
  font-weight: var(--nb-fw-regular);
  color: var(--nb-gray-900);
}
.nb-live__onair-name:not(:empty)::before { content: "· "; }
.nb-live__dot {
  flex: none;
  width: var(--nb-space-2);
  height: var(--nb-space-2);
  border-radius: var(--nb-r-full);
  background: var(--nb-sale, #d0021b);
  animation: nb-live-pulse 1.6s ease-in-out infinite;
}
@keyframes nb-live-pulse { 50% { opacity: 0.35; } }
.nb-live__onair.is-new .nb-live__cards { animation: nb-live-in 360ms var(--nb-live-ease); }
@keyframes nb-live-in { from { opacity: 0; transform: translateY(6px); } }
.nb-live__was { margin-top: var(--nb-space-4); }
.nb-live--onair .nb-live__onair + .nb-live__was,
.nb-live--onair .nb-live__was { color: var(--nb-gray-900); }

@media (min-width: 1024px) {
  .nb-live--wide { grid-template-columns: minmax(0, 1.7fr) minmax(var(--nb-pdp-aside-min), 1fr); }
  .nb-live--wide .nb-live__stage {
    height: auto;
    max-height: calc(100svh - var(--nb-live-chrome));
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-live__dot { animation: none; }
  .nb-live__onair.is-new .nb-live__cards { animation: none; }
}

/* --- свой интерфейс плеера YouTube (controls=0) ------------------------------------------------- */
.nb-live__shield {
  position: absolute;
  inset: 0;                         /* весь кадр: до плеера указатель не доходит — YouTube не показывает свои панели */
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* жесты: подсказка «+10 с» / «−10 с» у края кадра и «2× ▶▶» сверху, пока держат (Val 23.10) */
.nb-live__shield { -webkit-touch-callout: none; user-select: none; }
.nb-live__hint {
  position: absolute;
  z-index: 2;
  top: 50%;
  padding: var(--nb-space-2) var(--nb-space-3);
  border-radius: var(--nb-r-full);
  background: rgb(0 0 0 / 0.55);
  color: var(--nb-paper);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition: opacity 160ms ease, transform 160ms var(--nb-live-ease);
}
.nb-live__hint.is-on { opacity: 1; transform: translateY(-50%) scale(1); }
.nb-live__hint[data-at="left"] { left: 12%; }
.nb-live__hint[data-at="right"] { right: 12%; }
.nb-live__hint[data-at="top"] { top: 18%; left: 50%; transform: translate(-50%, -50%) scale(0.92); }
.nb-live__hint[data-at="top"].is-on { transform: translate(-50%, -50%) scale(1); }
.nb-live__center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 0;
  border-radius: var(--nb-r-full);
  background: rgb(0 0 0 / 0.5);
  color: var(--nb-paper);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: opacity 160ms ease, transform 160ms var(--nb-live-ease);
  -webkit-tap-highlight-color: transparent;
}
.nb-live__center.is-on { opacity: 1; pointer-events: auto; transform: scale(1); }
.nb-live__center:active { transform: scale(0.94); }
.nb-live__center svg { fill: currentColor; }
.nb-live__center .i-play,
.nb-live__center.is-paused .i-pause { display: none; }
.nb-live__center.is-paused .i-play { display: inline; }
@media (prefers-reduced-motion: reduce) { .nb-live__center { transition: none; } }
.nb-live__btn--speed { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; font-weight: var(--nb-fw-semibold); }
@media (max-width: 1023.98px), (hover: none) {        /* только ПК: на телефоне ускорение удержанием по кадру */
  .nb-live__ctl .nb-live__btn--speed { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-live__hint { transition: none; }
}
.nb-live__ctl {
  position: absolute;
  left: var(--nb-space-3);
  right: var(--nb-space-3);
  bottom: var(--nb-space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--nb-space-2);
  pointer-events: none;
}
.nb-live__ctl[hidden] { display: none; }
.nb-live__ctl > * { pointer-events: auto; }
.nb-live__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-1);
  margin-right: auto;
  padding: var(--nb-space-1) var(--nb-space-2);
  border-radius: var(--nb-r-sm);
  background: var(--nb-overlay-solid);
  color: var(--nb-paper);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  letter-spacing: 0.04em;
}
.nb-live__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-2);
  min-width: var(--nb-tap);
  min-height: var(--nb-tap);
  padding: 0 var(--nb-space-3);
  border: 0;
  border-radius: var(--nb-r-full);
  background: var(--nb-overlay-solid);
  color: var(--nb-paper);
  font: inherit;
  font-size: var(--nb-fs-sm);
  cursor: pointer;
  transition: transform 160ms var(--nb-live-ease), opacity 200ms ease;
}
.nb-live__btn svg { fill: currentColor; flex: none; }
.nb-live__btn:active { transform: scale(0.96); }
.nb-live__btn:focus-visible { outline: 2px solid var(--nb-paper); outline-offset: 2px; }
/* пауза/пуск */
.nb-live__ctl .i-play { display: none; }
.nb-live__ctl.is-paused .i-play { display: inline; }
.nb-live__ctl.is-paused .i-pause { display: none; }
/* звук: подпись «Увімкнути звук» — только пока выключен */
.nb-live__ctl .i-off,
.nb-live__ctl .nb-live__btn-label { display: none; }
.nb-live__ctl.is-muted .i-off,
.nb-live__ctl.is-muted .nb-live__btn-label { display: inline; }
.nb-live__ctl.is-muted .i-on { display: none; }
.nb-live__ctl.is-muted .nb-live__btn--sound { background: var(--nb-paper); color: var(--nb-ink); }
.nb-live__stage:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) {
  .nb-live__btn { transition: opacity 120ms ease; }
  .nb-live__btn:active { transform: none; }
}

/* автоскрытие кнопок и ползунка через 3 с (Val 22.10 вечер; включает live.js классом is-idle на сцене) */
.nb-live__ctl > *, .nb-live__bar { transition: opacity 240ms ease, transform 160ms var(--nb-live-ease); }
.nb-live__stage.is-idle,
.nb-live__stage.is-idle .nb-live__shield { cursor: none; }
.nb-live__stage.is-idle .nb-live__ctl > *,
.nb-live__stage.is-idle .nb-live__bar { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nb-live__ctl > *, .nb-live__bar { transition: none; }
}

/* громкость (ПК): ползунок выезжает слева от кнопки звука при наведении или фокусе; на телефоне его нет — iPhone
   громкость встроенного YouTube не меняет, только кнопками телефона */
.nb-live__sound { display: inline-flex; align-items: center; gap: var(--nb-space-2); }
.nb-live__vol { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nb-live__vol {
    display: block;
    width: 0;
    height: var(--nb-tap);
    margin: 0;
    opacity: 0;
    accent-color: var(--nb-paper);
    cursor: pointer;
    transition: width 200ms var(--nb-live-ease), opacity 160ms ease;
  }
  .nb-live__sound:hover .nb-live__vol,
  .nb-live__sound:focus-within .nb-live__vol { width: 88px; opacity: 1; }
}

/* запись: свой ползунок перемотки внизу кадра (без отметок наборов: эфир ~2 ч); кнопки — над ним */
.nb-live__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--nb-space-2);
  padding: var(--nb-space-4) var(--nb-space-3) var(--nb-space-1);
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.45));
  color: var(--nb-paper);
}
.nb-live__bar[hidden] { display: none; }
.nb-live--yt:not(.nb-live--onair) .nb-live__ctl { bottom: calc(var(--nb-space-3) + 44px); }   /* над полосой перемотки (57 px с отступом) */
.nb-live__time {
  flex: none;
  font-size: var(--nb-fs-xs);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}
.nb-live__track {
  --f: 0;
  position: relative;
  flex: 1;
  height: 32px;                     /* площадка пальца; сама дорожка — тонкая линия по центру */
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nb-live__track:focus-visible { outline: 2px solid var(--nb-paper); outline-offset: 2px; border-radius: var(--nb-r-sm); }
.nb-live__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: var(--nb-r-full);
  background: rgb(255 255 255 / 0.35);
  overflow: hidden;
  transition: height 120ms ease, margin 120ms ease;
}
.nb-live__fill {
  position: absolute;
  inset: 0;
  background: var(--nb-paper);
  transform: scaleX(var(--f));
  transform-origin: left center;
}
.nb-live__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--f) * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--nb-r-full);
  background: var(--nb-paper);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
  transition: transform 120ms ease;
  pointer-events: none;
}
.nb-live__track:hover .nb-live__rail,
.nb-live__bar.is-scrub .nb-live__rail { height: 5px; margin-top: -2.5px; }
.nb-live__bar.is-scrub .nb-live__knob { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .nb-live__rail, .nb-live__knob { transition: none; }
}

/* пауза / конец записи: свой экран вместо «Ещё видео» YouTube */
.nb-live__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.82) center / cover no-repeat;
  background-blend-mode: multiply;
}
.nb-live__cover[hidden] { display: none; }
/* заставка YouTube (hqdefault) — 4:3 с уже вшитыми чёрными полями по бокам вертикального кадра (сам кадр — 202 из 480 px
   ширины): растягиваем так, чтобы полосы ушли за край, а кадр заполнил сцену «обложкой», как само видео */
.nb-live--yt:not(.nb-live--wide) .nb-live__cover { background-size: max(237.1%, 133.4cqh) auto; }
.nb-live__cover-play {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-2);
  min-height: var(--nb-tap);
  padding: var(--nb-space-3) var(--nb-space-5);
  border: 0;
  border-radius: var(--nb-r-full);
  background: var(--nb-paper);
  color: var(--nb-ink);
  font: inherit;
  font-size: var(--nb-fs-base);
  cursor: pointer;
  transition: transform 160ms var(--nb-live-ease);
}
.nb-live__cover-play svg { fill: currentColor; }
.nb-live__cover-play:active { transform: scale(0.97); }

/* весь экран без Fullscreen API (iPhone): сцена поверх страницы на всё окно */
.nb-live__stage.is-pseudo-fs {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  aspect-ratio: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.nb-live-noscroll, .nb-live-noscroll body { overflow: hidden; }
.nb-live__stage:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; }

/* === YouTube-эфир (v2): экран как просмотр рилсов (Val 22.10, скрин) =================================
   Тёмный фон на всю высоту, шапка сайта — в инверсии. ПК: «Зараз в ефірі» | эфир 9:16 | «Вже показали».
   Телефон: эфир сверху, под ним те же две белые панели. Карточки — те же .product-card, только мельче. */
/* светлая тема сайта (Val 22.10: «вернуть светлую»); промо-полосу сверху на странице эфира прячем — место под контент */
body:has(#nb-live.nb-live--yt) .nb-topbar { display: none; }
.nb-live--yt {
  display: flex;
  flex-direction: column;
  gap: var(--nb-space-3);
  padding: 0 0 var(--nb-space-8);
  background: var(--nb-paper);
  color: var(--nb-ink);
}
.nb-live--yt .nb-live__stage {
  width: 100%;
  height: calc(100svh - var(--nb-live-chrome) - var(--nb-space-12));
  min-height: var(--nb-hero-min-h-m);
  background: #000;
  overflow: hidden;
}
.nb-live--yt.nb-live--wide .nb-live__stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; }

/* название поверх кадра сверху — как подпись рилса */
.nb-live__cap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-space-1) var(--nb-space-2);
  padding: var(--nb-space-3) var(--nb-space-4) var(--nb-space-8);
  background: linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
  pointer-events: none;
}
.nb-live--yt .nb-live__cap .nb-live__badge { margin: 0; }
.nb-live--yt .nb-live__title {
  margin: 0;
  min-width: 0;
  font-size: var(--nb-fs-base);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
  color: var(--nb-paper);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
}
.nb-live--yt .nb-live__sub {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--nb-fs-sm);
  line-height: var(--nb-lh);
  color: rgb(255 255 255 / 0.8);
}
/* звук — круглая иконка, как остальные кнопки: без белой плашки «Увімкнути звук» (Val 22.10 вечер) */
.nb-live--yt .nb-live__ctl .nb-live__btn-label,
.nb-live--yt .nb-live__ctl.is-muted .nb-live__btn-label { display: none; }
.nb-live--yt .nb-live__ctl .nb-live__btn--sound { padding: 0; justify-content: center; }
.nb-live--yt .nb-live__ctl.is-muted .nb-live__btn--sound { background: var(--nb-overlay-solid); color: var(--nb-paper); }
/* LIVE уже в подписи — в нижней панели кнопок только звук и весь экран, справа */
.nb-live--yt .nb-live__ctl .nb-live__badge { display: none; }
.nb-live--yt .nb-live__ctl { justify-content: flex-end; }

/* панели товаров: белые с тонкой рамкой — на белой странице */
.nb-live__panel {
  margin: 0 var(--nb-space-3);
  padding: var(--nb-space-4);
  border: var(--nb-border) solid var(--nb-gray-300);
  border-radius: var(--nb-space-4);
  background: var(--nb-paper);
  color: var(--nb-ink);
  min-width: 0;
}
.nb-live__ph {
  display: flex;
  align-items: center;
  gap: var(--nb-space-2);
  margin: 0 0 var(--nb-space-3);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nb-gray-900);
}
.nb-live--yt .nb-live__onair { padding: 0; }
.nb-live--yt .nb-live__onair-name {
  margin: var(--nb-space-1) 0 var(--nb-space-3);       /* от «Зараз в ефірі» — заметный отступ (Val 22.10 вечер) */
  font-size: var(--nb-fs-base);
  line-height: var(--nb-lh-tight);
  color: var(--nb-ink);
}
.nb-live--yt .nb-live__onair-name:empty { display: none; }
.nb-live--yt .nb-live__onair-name::before { content: none; }
.nb-live__empty {
  margin: 0;
  font-size: var(--nb-fs-sm);
  line-height: var(--nb-lh);
  color: var(--nb-gray-700);
}
.nb-live__onair:not(.is-empty) .nb-live__empty,
.nb-live__onair.is-empty .nb-home,
.nb-live__group--was:has(.nb-live__moment:not([hidden])) .nb-live__empty--was,
.nb-live__group--soon:has(.nb-live__moment--soon) .nb-live__empty--soon { display: none; }
/* «Вже показали» на ПК — по 3 карточки в ряд, мельче «Зараз в ефірі» (2 в ряд), чтобы было видно, что это прошлое (Val 23.10).
   Прежний набор при новом показе сам съезжает сюда (archive() в live.js) — и сразу в 3 колонки */
@media (min-width: 1024px) {          /* только ПК; на телефоне 3 в ряд — слишком мелко (Val) — там 2, как везде */
  .nb-live--yt .nb-live__group--was .nb-live__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nb-space-3) var(--nb-space-2);
  }
  .nb-live--yt .nb-live__group--was .product-card__name,
  .nb-live--yt .nb-live__group--was .product-card__price,
  .nb-live--yt .nb-live__group--was .product-card__price-now { font-size: var(--nb-fs-xs); }
}
/* запись: «Вже показали» слева появляется, когда есть что показать; текущий момент — наверху панели, в списках скрыт */
.nb-live__group--past:not(:has(.nb-live__moment)) { display: none; }
.nb-live__moment[hidden] { display: none; }
/* в эфире «Вже показали» — в левой панели под «Зараз в ефірі» (Val 23.10) */
.nb-live__onair + .nb-live__group--was {
  margin-top: var(--nb-space-5);
  padding-top: var(--nb-space-5);
  border-top: var(--nb-border) solid var(--nb-gray-300);
}

/* карточки: 2 в ряд — с закладкой и быстрой покупкой, как в рядах главной */
.nb-live--yt .nb-live__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nb-space-4) var(--nb-space-3);
}
.nb-live--yt .product-card__name,
.nb-live--yt .product-card__price,
.nb-live--yt .product-card__price-now { font-size: var(--nb-fs-sm); line-height: 1.3; }
.nb-live--yt .product-card__tags,
.nb-live--yt .product-card__sizes { display: none; }

/* «Вже показали»: момент = таймкод + подпись + карточки */
.nb-live--yt .nb-live__moment { padding: var(--nb-space-3) 0 var(--nb-space-4); }
.nb-live--yt .nb-live__moment:first-child { padding-top: 0; }
.nb-live--yt .nb-live__seek { min-height: var(--nb-space-8); margin-bottom: var(--nb-space-2); gap: var(--nb-space-2); }
.nb-live--yt .nb-live__seek-tc {
  min-width: 0;
  padding: 2px var(--nb-space-2);
  border-radius: var(--nb-r-full);
  background: var(--nb-gray-100);
  font-size: var(--nb-fs-sm);
  color: var(--nb-ink);
}
.nb-live--yt .nb-live__seek-title { font-size: var(--nb-fs-base); }
.nb-live--yt .nb-live__moment.is-current .nb-live__seek-tc { background: var(--nb-ink); color: var(--nb-paper); }
.nb-live--yt .nb-live__moment.is-current .nb-live__seek-tc::before { content: none; }
/* запись: таймкод набора — ссылка на время в видео, подчёркнут пунктиром, чтобы было видно, что на него можно нажать
   (Val 22.10 вечер). Без плашки; текущий набор — жирнее. В эфире (кнопка выключена) — прежняя плашка. */
.nb-live--yt button.nb-live__seek:not(:disabled) .nb-live__seek-tc,
.nb-live--yt .nb-live__moment.is-current button.nb-live__seek:not(:disabled) .nb-live__seek-tc {
  padding: 0;
  background: none;
  color: var(--nb-ink);
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.nb-live--yt .nb-live__moment.is-current button.nb-live__seek:not(:disabled) .nb-live__seek-tc { font-weight: var(--nb-fw-semibold); }
.nb-live--yt .nb-live__moment.is-new { animation: nb-live-in 360ms var(--nb-live-ease); }

/* правая колонка: «Скоро в ефірі» (что будет) — на кремовой подложке, полый кружок; ниже «Вже показали» (что было) */
.nb-live__group[hidden] { display: none; }
.nb-live__group--soon + .nb-live__group--was {
  margin-top: var(--nb-space-2);
  padding-top: var(--nb-space-5);
  border-top: var(--nb-border) solid var(--nb-gray-300);
}
.nb-live__group--soon .nb-live__ph { margin-bottom: var(--nb-space-2); }
.nb-live__ring {
  flex: none;
  width: var(--nb-space-2);
  height: var(--nb-space-2);
  border-radius: var(--nb-r-full);
  background: var(--nb-gray-500);
}
.nb-live--yt .nb-live__moment--soon { padding: var(--nb-space-2) 0 var(--nb-space-3); }
.nb-live--yt .nb-live__moment--soon + .nb-live__moment--soon { border-top: var(--nb-border) solid rgb(0 0 0 / 0.08); }
.nb-live--yt .nb-live__seek-tc--soon {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--nb-gray-400);
  color: var(--nb-gray-900);
}
.nb-live--yt p.nb-live__seek { cursor: default; }

@media (min-width: 1024px) {
  .nb-live--yt {
    --nb-live-pad: var(--nb-space-6);
    --nb-live-h: calc(100svh - var(--nb-live-chrome) - 2 * var(--nb-live-pad));
    --nb-live-col: min(430px, calc(var(--nb-live-h) * 9 / 16));
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--nb-live-col) minmax(0, 1fr);
    grid-template-rows: var(--nb-live-h) auto;          /* вторая строка — подписка на эфиры, под первым экраном */
    column-gap: var(--nb-space-10);
    align-items: center;
    min-height: calc(100svh - var(--nb-live-chrome));
    padding: var(--nb-live-pad) var(--nb-space-8);
    box-sizing: border-box;
  }
  .nb-live--yt .nb-live__stage {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    width: var(--nb-live-col);
    height: var(--nb-live-h);
    min-height: 0;
    aspect-ratio: auto;
    border-radius: var(--nb-space-4);
  }
  .nb-live--yt.nb-live--wide {
    --nb-live-col: minmax(0, 2.2fr);
    grid-template-columns: minmax(300px, 1fr) minmax(0, 2.2fr) minmax(300px, 1fr);
  }
  .nb-live--yt.nb-live--wide .nb-live__stage { width: 100%; height: auto; max-height: var(--nb-live-h); aspect-ratio: 16 / 9; }
  .nb-live__panel {
    grid-row: 1;
    width: min(460px, 100%);
    height: calc(var(--nb-live-h) - 2 * var(--nb-space-8));
    margin: 0;
    padding: var(--nb-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-sizing: border-box;
  }
  .nb-live__panel--now { grid-column: 1; justify-self: end; align-self: center; }
  .nb-live__panel--was { grid-column: 3; justify-self: start; align-self: center; }
  .nb-live--yt .nb-live__notify {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(720px, 100%);
    margin: var(--nb-space-10) 0 var(--nb-space-6);
    text-align: center;
  }
  .nb-live--yt .nb-live__notify-form { justify-content: center; }
  /* TikTok — в свободной полосе над «Зараз в ефірі» (Val 23.10: слева; панель по центру строки, сверху поле var(--nb-space-8)) */
  .nb-live--yt .nb-live__tiktok {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: min(460px, 100%);
    height: var(--nb-space-8);
    min-height: 0;
    margin: 0;
    padding: 0 var(--nb-space-1);
    border-radius: 0;
    background: none;
    box-sizing: border-box;
  }
  .nb-live--yt .nb-live__tiktok-h { margin-left: auto; }
  .nb-live--yt .nb-live__panel--was .nb-live__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-4) var(--nb-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-live--yt .nb-live__moment.is-new { animation: none; }
}
/* закладка и быстрая покупка — видны всегда, а не по наведению, как в рядах главной (Val 22.10) */
#nb-live.nb-live--yt .nb-live__panel .product-card .product-card__fav,
#nb-live.nb-live--yt .nb-live__panel .product-card .product-card__action { opacity: 1; }

/* --- YouTube-эфир, телефон (Val 22.10, по образцу комментариев Instagram) --------------------------------
   Эфир на весь экран под шапкой; товары эфира — маленькими плитками внизу слева (кнопки звука и экрана — справа,
   плитки их не перекрывают). Тап по плиткам или свайп вверх — видео сворачивается в окошко сверху, снизу
   поднимается шторка: «Зараз в ефірі», «Скоро в ефірі», «Вже показали». Свайп вниз у верха шторки — обратно. */
.nb-live__grip { display: none; }
/* ленту Instagram под эфиром не показываем, подвал — показываем (Val 22.10 вечер) */
body:has(#nb-live.nb-live--yt) #nb-insta-gallery { display: none; }
@media (min-width: 1024px) {
  .nb-live__shop { display: contents; }
}
@media (max-width: 1023.98px) {
  html:has(#nb-live.nb-live--yt), body:has(#nb-live.nb-live--yt) { overflow: hidden; overscroll-behavior: none; }
  /* подвал — в конце шторки (переносит live.js); наборы баннеров перед подвалом за эфиром всё равно не видны */
  body:has(#nb-live.nb-live--yt) #beforeFooterBanners { display: none; }
  .nb-live__shop > .footer { margin-top: var(--nb-space-6); }
  .nb-live--yt {
    --nb-live-mini: 42svh;
    /* ролик — по своей высоте (9:16 по ширине экрана), но под ним всегда видно начало шторки */
    --nb-live-full: min(calc(100vw * 16 / 9), calc(100svh - var(--nb-live-chrome) - 110px));
    --nb-live-ms: 320ms;
    position: relative;
    display: block;
    height: calc(100svh - var(--nb-live-chrome));
    padding: 0;
    overflow: hidden;
  }
  /* --p: 0 — большой вид, 1 — окошко. Ставит класс is-shop, а во время перетаскивания — палец (JS, inline) */
  .nb-live--yt { --p: 0; }
  .nb-live--yt.is-shop { --p: 1; }
  .nb-live--yt .nb-live__stage {
    /* свёрнутое окошко — 4:5, шире самого ролика 9:16: кадр «обложкой» заполняет его целиком (Val 22.10 вечер) */
    width: calc(100% + (var(--nb-live-mini) * 4 / 5 - 100%) * var(--p));
    height: calc(var(--nb-live-full) + (var(--nb-live-mini) - var(--nb-live-full)) * var(--p));
    min-height: 0;
    margin: calc(var(--nb-space-2) * var(--p)) auto 0;
    border-radius: calc(var(--nb-space-4) * var(--p));
    transition: height var(--nb-live-ms) var(--nb-live-ease), width var(--nb-live-ms) var(--nb-live-ease),
                margin var(--nb-live-ms) var(--nb-live-ease), border-radius var(--nb-live-ms) var(--nb-live-ease);
  }
  .nb-live--yt.is-dragging .nb-live__stage,
  .nb-live--yt.is-dragging .nb-live__shop { transition: none; }
  /* горизонтальный эфир: кадр 16:9 сверху на всю ширину, шторка под ним всегда */
  .nb-live--yt.nb-live--wide .nb-live__stage,
  .nb-live--yt.nb-live--wide.is-shop .nb-live__stage { width: 100%; height: auto; margin: 0; border-radius: 0; aspect-ratio: 16 / 9; }

  /* подпись: в окошке — только LIVE */
  .nb-live--yt.is-shop .nb-live__title,
  .nb-live--yt.is-shop .nb-live__sub { display: none; }
  .nb-live--yt.is-shop .nb-live__cap { padding: var(--nb-space-2); background: none; }

  /* кнопки звука и экрана — столбиком справа внизу; подпись звука прячем (кнопка белая, пока звука нет) */
  .nb-live--yt .nb-live__ctl {
    left: auto;
    right: var(--nb-space-3);
    bottom: var(--nb-space-3);
    flex-direction: column;
    align-items: flex-end;
  }
  .nb-live--yt .nb-live__ctl .nb-live__btn-label { display: none; }
  .nb-live--yt .nb-live__ctl .nb-live__btn { padding: 0; justify-content: center; }
  .nb-live--yt.is-shop .nb-live__ctl { right: var(--nb-space-2); bottom: var(--nb-space-2); }
  /* окошко: перемотки нет — видео просто идёт (Val 22.10 вечер) */
  .nb-live--yt.is-shop .nb-live__bar { display: none; }
  .nb-live--yt.is-shop:not(.nb-live--onair) .nb-live__ctl { bottom: var(--nb-space-2); }
  /* окошко на паузе: вместо широкой «Відтворити» — круглая кнопка, не наезжает на кнопки справа */
  .nb-live--yt.is-shop .nb-live__cover-play span { display: none; }
  .nb-live--yt.is-shop .nb-live__cover-play { padding: var(--nb-space-3); }
  /* полного экрана на телефоне нет (Val 22.10 вечер: «что-то не але выглядит») — только звук (и пауза записи) */
  .nb-live--yt .nb-live__ctl [data-ctl="fs"] { display: none; }

  /* шторка: под роликом видна всегда (её начало), свайп вверх / тап — поднимается, видео сворачивается в окошко */
  .nb-live__shop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(var(--nb-live-full) + (var(--nb-live-mini) + var(--nb-space-2) * 2 - var(--nb-live-full)) * var(--p));
    z-index: 5;
    overflow: hidden;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--nb-space-4) var(--nb-space-4) 0 0;
    background: var(--nb-paper);
    color: var(--nb-ink);
    /* картинки карточек при прокрутке вылезали над скруглённым верхом (Val 22.10, эмулятор Chrome). clip-path резал
       их, но срезал и тень шторки (Val: «пропала тень») — paint-containment режет только содержимое по скруглению,
       своя тень элемента остаётся снаружи */
    contain: paint;
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08);
    transition: top var(--nb-live-ms) var(--nb-live-ease);
  }
  .nb-live--yt:not(.is-shop) .nb-live__shop { cursor: pointer; }
  .nb-live--yt.is-shop .nb-live__shop { overflow-y: auto; }
  .nb-live--yt.nb-live--wide .nb-live__shop { top: calc(100vw * 9 / 16); border-radius: 0; }
  .nb-live--yt.nb-live--wide .nb-live__grip { display: none; }
  .nb-live__shop .nb-live__panel { margin: 0; padding: 0 var(--nb-space-4) var(--nb-space-5); border-radius: 0; }
  .nb-live__shop .nb-live__panel--was { padding-top: var(--nb-space-5); border-top: var(--nb-border) solid var(--nb-gray-300); }
  .nb-live__shop .nb-live__panel--now { padding-top: var(--nb-space-1); }
  .nb-live__grip {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 28px;
    border: 0;
    background: var(--nb-paper);
    cursor: pointer;
  }
  .nb-live__grip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: var(--nb-r-full);
    background: var(--nb-gray-300);
  }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .nb-live--yt .nb-live__stage,
  .nb-live__shop,
  .nb-live--yt.is-shop .nb-live__shop { transition: none; }
}

/* весь экран без Fullscreen API — и для YouTube-вида: правила колонок выше перебивали `position: fixed` (ревью Codex 22.10) */
.nb-live--yt .nb-live__stage.is-pseudo-fs,
.nb-live--yt.is-shop .nb-live__stage.is-pseudo-fs {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
@media (max-width: 1023.98px) {
  .nb-live__shop .nb-live__panel { border: 0; }
}

/* видео — «обложкой»: кадр 9:16 заполняет сцену целиком, лишнее срезается по краям, без чёрных полос
   (Val 22.10, скрин телефона: экран шире 9:16 в этой высоте). На весь экран — снова целиком, без обрезки. */
.nb-live--yt:not(.nb-live--wide) .nb-live__stage { container-type: size; }
.nb-live--yt:not(.nb-live--wide) .nb-live__yt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 9 / 16);
  height: max(100cqh, 100cqw * 16 / 9);
  transform: translate(-50%, -50%);
}
/* по отдельности: незнакомый браузеру селектор в списке выбросил бы всё правило */
.nb-live--yt .nb-live__stage.is-pseudo-fs .nb-live__yt { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.nb-live--yt .nb-live__stage:fullscreen .nb-live__yt { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.nb-live--yt .nb-live__stage:-webkit-full-screen .nb-live__yt { left: 0; top: 0; width: 100%; height: 100%; transform: none; }

/* плитки товаров эфира — только во весь экран: шторки там не видно, тап по плиткам — выход и шторка (Val 22.10 вечер).
   Правила полного экрана — по отдельности: незнакомый браузеру селектор в списке выбросил бы всё правило. */
.nb-live__tiles {
  position: absolute;
  left: calc(var(--nb-space-3) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--nb-space-3) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: none;
  gap: var(--nb-space-1);
  max-width: calc(100% - var(--nb-tap) - var(--nb-space-3) * 3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--nb-live-ease), opacity 200ms ease;
}
.nb-live__stage.is-pseudo-fs .nb-live__tiles:not([hidden]) { display: grid; }
.nb-live__stage:fullscreen .nb-live__tiles:not([hidden]) { display: grid; }
.nb-live__stage:-webkit-full-screen .nb-live__tiles:not([hidden]) { display: grid; }
/* запись: плитки — над ползунком перемотки */
.nb-live__stage:has(.nb-live__bar:not([hidden])) .nb-live__tiles { bottom: calc(var(--nb-space-3) + 40px + env(safe-area-inset-bottom, 0px)); }
.nb-live__tiles:active { transform: scale(0.97); }
.nb-live__tiles.is-new { animation: nb-live-in 360ms var(--nb-live-ease); }
.nb-live__tiles-label {
  display: flex;
  align-items: center;
  gap: var(--nb-space-1);
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}
.nb-live__tiles-label .nb-live__dot { width: 6px; height: 6px; }
.nb-live__tiles-row { display: flex; gap: var(--nb-space-1); }
.nb-live__tile {
  flex: none;
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--nb-gray-100);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.9), 0 4px 12px rgb(0 0 0 / 0.3);
}
.nb-live__tile--more {
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.55);
  color: var(--nb-paper);
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
}
@media (prefers-reduced-motion: reduce) {
  .nb-live__tiles.is-new { animation: none; }
}

/* подписка на следующие эфиры (Val 22.10 вечер): телефон — в шторке между «Зараз в ефірі» и «Скоро в ефірі», ПК —
   полосой под эфиром (раскладка — в блоке ПК выше) */
.nb-live__notify {
  margin: 0 var(--nb-space-4) var(--nb-space-5);
  padding: var(--nb-space-5) var(--nb-space-4);
  border-radius: var(--nb-space-4);
  background: var(--nb-gray-100);
  color: var(--nb-ink);
}
.nb-live__notify-t {
  margin: 0 0 var(--nb-space-1);
  font-size: var(--nb-fs-lg);
  font-weight: var(--nb-fw-semibold);
  line-height: var(--nb-lh-tight);
}
.nb-live__notify-text { margin: 0 0 var(--nb-space-4); font-size: var(--nb-fs-sm); line-height: var(--nb-lh); color: var(--nb-gray-900); }
.nb-live__notify-form { position: relative; display: flex; gap: var(--nb-space-2); }
.nb-live__notify-input {
  flex: 1;
  min-width: 0;
  min-height: var(--nb-tap);
  padding: 0 var(--nb-space-3);
  border: var(--nb-border) solid var(--nb-gray-300);
  border-radius: var(--nb-r-sm);
  background: var(--nb-paper);
  color: var(--nb-ink);
  font: inherit;
  font-size: 16px;                  /* меньше 16 px — iPhone приближает страницу при фокусе */
}
.nb-live__notify-input:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 1px; }
.nb-live__notify-btn {
  flex: none;
  min-height: var(--nb-tap);
  padding: 0 var(--nb-space-4);
  border: 0;
  border-radius: var(--nb-r-sm);
  background: var(--nb-ink);
  color: var(--nb-paper);
  font: inherit;
  font-size: var(--nb-fs-sm);
  font-weight: var(--nb-fw-semibold);
  cursor: pointer;
  transition: transform 160ms var(--nb-live-ease), opacity 200ms ease;
}
.nb-live__notify-btn:disabled { opacity: 0.6; cursor: default; }
.nb-live__notify-btn:not(:disabled):active { transform: scale(0.97); }
.nb-live__notify-btn:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 2px; }
.nb-live__notify-note { margin: var(--nb-space-2) 0 0; font-size: var(--nb-fs-sm); }
.nb-live__notify-note.is-error { color: var(--nb-status-alert); }
.nb-live__notify.is-subscribed .nb-live__notify-form { display: none; }
.nb-live__notify-small { margin: var(--nb-space-2) 0 0; font-size: var(--nb-fs-xs); color: var(--nb-gray-700); }
@media (max-width: 1023.98px) {
  /* телефон: поле и кнопка — в два ряда, кнопка на всю ширину (Val 22.10 вечер) */
  .nb-live__notify-form { flex-direction: column; }
  .nb-live__notify-btn { width: 100%; }
}
/* TikTok бренда: телефон — плашка в шторке перед подпиской; ПК — строка над «Зараз в ефірі» (см. сетку выше) */
.nb-live__tiktok {
  display: flex;
  align-items: center;
  gap: var(--nb-space-2);
  min-height: var(--nb-tap);
  margin: 0 var(--nb-space-4) var(--nb-space-3);      /* как у подписки ниже */
  padding: var(--nb-space-3) var(--nb-space-4);
  border-radius: var(--nb-space-4);
  background: var(--nb-gray-100);
  color: var(--nb-ink);
  font-size: var(--nb-fs-sm);
  text-decoration: none;
  transition: opacity 200ms ease;
}
.nb-live__tiktok:hover { opacity: 0.75; }
.nb-live__tiktok:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 2px; }
.nb-live__tiktok-ico { flex: none; width: 18px; height: 18px; }
.nb-live__tiktok-t { font-weight: var(--nb-fw-semibold); }
.nb-live__tiktok-h { color: var(--nb-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1023.98px) {
  .nb-live__tiktok { flex-wrap: wrap; }
  .nb-live__tiktok-h { flex-basis: 100%; padding-left: calc(18px + var(--nb-space-2)); }
}
/* ПК, эфир: в конце правой панели — карточка TikTok и подписка (Val 23.10); телефон — своя подписка внизу шторки */
.nb-live__outro { display: none; }
.nb-live__ttcard {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3);
  padding: var(--nb-space-4);
  border-radius: var(--nb-space-4);
  background: var(--nb-ink);
  color: var(--nb-paper);
  text-decoration: none;
  transition: transform 160ms var(--nb-live-ease), opacity 200ms ease;
}
.nb-live__ttcard:hover { opacity: 0.92; }
.nb-live__ttcard:active { transform: scale(0.98); }
.nb-live__ttcard:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 2px; }
.nb-live__ttcard-ico { flex: none; width: 28px; height: 28px; }
.nb-live__ttcard-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nb-live__ttcard-t { font-size: var(--nb-fs-sm); font-weight: var(--nb-fw-semibold); line-height: var(--nb-lh-tight); }
.nb-live__ttcard-h { font-size: var(--nb-fs-xs); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-live__ttcard-btn {
  flex: none;
  padding: var(--nb-space-2) var(--nb-space-3);
  border-radius: var(--nb-r-full);
  background: var(--nb-paper);
  color: var(--nb-ink);
  font-size: var(--nb-fs-xs);
  font-weight: var(--nb-fw-semibold);
}
@media (min-width: 1024px) {
  .nb-live--yt.nb-live--onair .nb-live__outro {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-4);
    margin-top: var(--nb-space-5);
    padding-top: var(--nb-space-5);
    border-top: var(--nb-border) solid var(--nb-gray-300);
  }
  /* «Скоро» пусто — блок сразу под текстом, без разделителя */
  .nb-live--yt.nb-live--onair .nb-live__group--soon:not(:has(.nb-live__moment--soon)) + .nb-live__outro { margin-top: var(--nb-space-4); padding-top: 0; border-top: 0; }
  .nb-live--yt .nb-live__notify--panel { grid-column: auto; grid-row: auto; justify-self: stretch; width: auto; margin: 0; text-align: left; }
  .nb-live--yt .nb-live__notify--panel .nb-live__notify-form { justify-content: flex-start; }
  .nb-live--yt.nb-live--onair .nb-live__notify--bottom { display: none; }
  /* «Скоро» пусто — текст, TikTok и подписка по центру панели (Val 23.10) */
  .nb-live--yt.nb-live--onair .nb-live__panel--was:not(:has(.nb-live__moment--soon)) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .nb-live--yt.nb-live--onair .nb-live__panel--was:not(:has(.nb-live__moment--soon)) > * { width: min(380px, 100%); }
  .nb-live--yt.nb-live--onair .nb-live__panel--was:not(:has(.nb-live__moment--soon)) .nb-live__ph { justify-content: center; }
  .nb-live--yt.nb-live--onair .nb-live__panel--was:not(:has(.nb-live__moment--soon)) .nb-live__ttcard { text-align: left; }
  .nb-live--yt.nb-live--onair .nb-live__panel--was:not(:has(.nb-live__moment--soon)) .nb-live__notify--panel { text-align: center; }
  .nb-live--yt.nb-live--onair .nb-live__panel--was:not(:has(.nb-live__moment--soon)) .nb-live__notify--panel .nb-live__notify-form { justify-content: center; }
  /* панели нечего прокручивать — колесо листает страницу, а не застревает в панели (Val 23.10; класс ставит live.js) */
  .nb-live__panel.is-fit { overscroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-live__ttcard { transition: none; }
}
.nb-live__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .nb-live__notify-btn { transition: none; }
}