/* Общий слой живёт в @layer osnova (пакет №37). Порядок внутри
   слоя прежний — вид не меняется. Сайтовые стили лежат в слое
   «sayt» и потому слабее канона, а поправки места — вне слоёв
   и потому сильнее всех. */
@layer sayt, osnova;

@layer osnova {
/* ПУЛЬТ ГАЛЕРЕИ — общий на три сайта.

   Вся панель — ОДНА КАРТОЧКА: своя рамка, свой фон, скругление как у
   карточек сайта. Она должна читаться как пульт, а не как кнопки,
   рассыпанные по странице.

   Внутри две части, разделённые чертой:
     сверху ЧТО ПОКАЗЫВАТЬ — поиск, откуда, состояние, папка, теги;
     снизу  КАК ПОКАЗЫВАТЬ — сколько в ряд и сворачивать ли серии.

   Чипы у всех одинаковые: высота 36, скругление 9, волосяная рамка,
   выбранный — рамка в цвете сайта плюс подложка 12%. Цвет сайта берём
   из его же переменной: у Ловии --olive, у остальных --brand. Отличие
   между сайтами — только он. */

.gal-pult, .ws-toolbar, .gal-polosa, .gal-spisok {
  --чип-рамка: color-mix(in srgb, currentColor 16%, transparent);
  --чип-цвет: var(--olive, var(--brand, currentColor));
}

/* ── КАРТОЧКА ПУЛЬТА ────────────────────────────────────────────────── */
.gal-pult {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--чип-рамка);
  border-radius: var(--r-lg, 14px);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.gal-blok { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Подпись ряда: мелко и приглушённо — она объясняет, а не кричит. */
.gal-podpis {
  font: 700 10.5px/1 "Golos Text", Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 42%, transparent);
}

/* Черта между «что показывать» и «как показывать». */
.gal-cherta {
  height: 1px;
  margin: 2px 0;
  background: var(--чип-рамка);
}

/* ── ПОИСК: первым и крупным, во всю панель ─────────────────────────── */
.gal-poisk {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--чип-рамка);
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
  cursor: text;
  transition: border-color .14s;
}
.gal-poisk:focus-within { border-color: color-mix(in srgb, var(--чип-цвет) 62%, transparent); }
.gal-lupa {
  width: 17px; height: 17px; flex: 0 0 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; opacity: .5;
}
body[data-shell-product] .gal-pult .ws-search {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: transparent; color: inherit; padding: 0;
  font: 600 14.5px/1 "Golos Text", Inter, system-ui, sans-serif;
}
body[data-shell-product] .gal-pult .ws-search::placeholder {
  color: color-mix(in srgb, currentColor 40%, transparent);
  font-weight: 500;
}
.gal-pult .ws-search::-webkit-search-cancel-button { filter: invert(.5); }

/* ── ОБЩИЙ ВИД ЛЮБОГО ЧИПА ─────────────────────────────────────────── */
body[data-shell-product] .gal-pult .wvb,
body[data-shell-product] .gal-pult .ws-tool-btn,
body[data-shell-product] .gal-pult .ws-origin-btn {
  /* Рамку считаем внутрь высоты: иначе у Ловии чипы выше соседних. */
  box-sizing: border-box;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--чип-рамка);
  background: transparent;
  color: inherit;
  font: 600 13px/1 "Golos Text", Inter, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .14s, background .14s;
  box-shadow: none;
  flex: 0 0 auto !important;
  position: relative;
  width: auto;
  min-width: 0;
}
body[data-shell-product] .gal-pult .wvb:hover,
body[data-shell-product] .gal-pult .ws-tool-btn:hover,
body[data-shell-product] .gal-pult .ws-origin-btn:hover {
  border-color: color-mix(in srgb, var(--чип-цвет) 45%, transparent);
}

/* Выбранный чип: рамка в цвете сайта и подложка 12%. */
body[data-shell-product] .gal-pult .wvb.active,
body[data-shell-product] .gal-pult .ws-tool-btn.active,
body[data-shell-product] .gal-pult .ws-tool-btn.is-on,
body[data-shell-product] .gal-pult .ws-tool-btn[aria-pressed="true"],
body[data-shell-product] .gal-pult .ws-origin-btn.is-on {
  border-color: color-mix(in srgb, var(--чип-цвет) 65%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 12%, transparent);
  color: inherit;
}

/* Счётчик — просто цифра приглушённым тоном рядом с названием. */
body[data-shell-product] .gal-pult .ws-tool-badge {
  position: static; transform: none; margin: 0;
  min-width: 0; height: auto; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: 600 12px/1 inherit;
  font-variant-numeric: tabular-nums;
}
.gal-pult .ws-origin-btn.is-on .ws-tool-badge,
.gal-pult .ws-tool-btn.active .ws-tool-badge {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ── РЯДЫ: одна строка, вбок, без кучи переносов ───────────────────── */
body[data-shell-product] .gal-pult .ws-origin-filters,
body[data-shell-product] .gal-pult .ws-status-filters,
body[data-shell-product] .gal-pult .ws-view-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 0;
  background: none;
  width: auto;
  flex: 0 1 auto;
}
.gal-pult .ws-origin-filters::-webkit-scrollbar,
.gal-pult .ws-status-filters::-webkit-scrollbar,
.gal-pult .ws-view-btns::-webkit-scrollbar { display: none; }

/* Ряд «состояние · папка · теги» может переноситься: справа в нём
   выпадающие списки, и прятать их за прокрутку нельзя. */
body[data-shell-product] .gal-pult .gal-ryad-otbor { flex-wrap: wrap; overflow: visible; }

/* Разделитель-точка между состоянием и папкой. */
.gal-tochka {
  padding: 0 3px;
  color: color-mix(in srgb, currentColor 34%, transparent);
  font-size: 15px;
  user-select: none;
}

/* Цифры плотности — те же чипы, только уже. */
.gal-ryad-vid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
body[data-shell-product] .gal-pult .ws-view-btns .wvb {
  min-width: 38px;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}

/* ── ПАПКА И ТЕГИ ──────────────────────────────────────────────────── */
.gal-vybor-obertka { position: relative; display: inline-flex; }
body[data-shell-product] .gal-pult .gal-vybor { font-weight: 600; gap: 5px; }
.gal-pult .gal-vybor b { font-weight: 700; }
.gal-strelka {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid currentColor;
  opacity: .55;
}
.gal-schet {
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--чип-цвет) 26%, transparent);
  font: 700 11px/17px "Golos Text", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.gal-schet[hidden] { display: none; }

.gal-spisok {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 232px;
  max-width: calc(100vw - 32px);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.gal-spisok[hidden] { display: none; }

.gal-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 600 13px/1 "Golos Text", Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.gal-punkt:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.gal-punkt.is-on {
  border-color: color-mix(in srgb, var(--чип-цвет) 65%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 12%, transparent);
}
.gal-punkt--vlozhennaya { padding-left: 24px; }
.gal-punkt--vlozhennaya::before {
  content: "";
  position: absolute;
  margin-left: -12px;
  width: 6px; height: 1px;
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.gal-punkt__schet {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 42%, transparent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gal-punkt--novaya { color: color-mix(in srgb, var(--чип-цвет) 82%, currentColor); font-weight: 700; }
.gal-spisok__cherta { height: 1px; margin: 4px 2px; background: color-mix(in srgb, currentColor 14%, transparent); }
.gal-spisok__pusto {
  padding: 10px;
  font: 500 12.5px/1.3 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Свой тег виден сразу: точка в цвете сайта. Автоматические — без неё. */
.gal-svoy {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 999px;
  background: var(--чип-цвет);
}
.gal-punkt--svoy { font-weight: 700; }

/* ── ГАЛОЧКА ВЫБОРА НА КАРТОЧКЕ ────────────────────────────────────── */
.gal-galka {
  position: absolute;
  top: 7px; left: 7px;
  z-index: 5;
  width: 22px; height: 22px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 7px;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s, background .14s, border-color .14s;
}
.gal-galka::after {
  content: "";
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
  opacity: 0;
}
*:hover > .gal-galka,
.gal-otmechen > .gal-galka { opacity: 1; }
.gal-otmechen > .gal-galka {
  border-color: var(--чип-цвет, #fff);
  background: var(--чип-цвет, #444);
}
.gal-otmechen > .gal-galka::after { opacity: 1; }
.gal-otmechen {
  outline: 2px solid var(--чип-цвет, #fff);
  outline-offset: 1px;
}
@media (hover: none) {
  .gal-galka { opacity: .85; }
}

/* ── НИЖНЯЯ ПОЛОСА ДЕЙСТВИЙ ────────────────────────────────────────── */
/* Стоит НАД доком: док внизу по канону, и полоса не должна его закрывать. */
.gal-polosa {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 48;
  width: min(calc(100% - 24px), 760px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}
.gal-polosa[hidden] { display: none; }
.gal-polosa__schet {
  flex: 0 0 auto;
  font: 600 12.5px/1 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 62%, transparent);
  white-space: nowrap;
}
.gal-polosa__schet b {
  color: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.gal-polosa__knopki {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gal-polosa__knopki::-webkit-scrollbar { display: none; }
.gal-polosa__knopki button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent;
  color: inherit;
  font: 600 12.5px/1 "Golos Text", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.gal-polosa__knopki button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--olive, var(--brand, #888)) 55%, transparent);
  background: color-mix(in srgb, var(--olive, var(--brand, #888)) 10%, transparent);
}
.gal-polosa__knopki button:disabled { opacity: .38; cursor: default; }
.gal-polosa__knopki button.gal-polosa__opasno { color: #fca5a5; }
.gal-polosa__opasno:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, .6) !important;
  background: rgba(248, 113, 113, .12) !important;
}
.gal-polosa__snyat {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
}

/* Пока полоса видна, спискам снизу нужно место — иначе последний ряд
   уезжает под неё. */
body.gal-est-vybor .ws-grid,
body.gal-est-vybor .ready-grid,
body.gal-est-vybor .zv-library-list { padding-bottom: 132px; }

/* Короткая весть без своего окна: «Скоро» и прочие ответы на действие. */
.gal-vest {
  position: fixed;
  left: 50%;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(12px);
  font: 600 13px/1 "Golos Text", system-ui, sans-serif;
}

/* ── УЗКИЙ ЭКРАН ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .gal-pult { padding: 12px; gap: 11px; }
  .gal-poisk { min-height: 44px; height: 44px; }
  body[data-shell-product] .gal-pult .ws-search { font-size: 14px; }
  .gal-polosa { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); padding: 8px 10px; }
  /* Сколько выбрано — видно и на телефоне: это главное число полосы.
     На узком оставляем от подписи только саму цифру. */
  .gal-polosa__schet b { font-size: 14px; }
  .gal-polosa__schet { font-size: 0; }
  .gal-polosa__schet b::after { content: " ✓"; font-size: 12px; }
  /* Точка-разделитель на узком становится переносом строки: тогда
     «Папка» и «Теги» начинаются от левого края и их списки помещаются
     в экран, а страница не уезжает вбок. */
  .gal-tochka { flex-basis: 100%; height: 0; padding: 0; overflow: hidden; }
  .gal-spisok { left: 0; right: auto; }
}

/* ══ СЕТКА ПЛИТОК ДЛЯ ТЕХ, У КОГО СВОЕЙ НЕТ ══════════════════════════
   У Ловии плотность своя и давняя, её не трогаем. Снимии до сих пор
   раскладывала плитки автоподбором, поэтому цифры ей ничего не давали —
   вот раскладка под те же коды. */
.ready-grid.view-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ready-grid.view-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ready-grid.view-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ready-grid.view-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ready-grid.view-grid8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 700px) {
  .ready-grid.view-grid4,
  .ready-grid.view-grid6,
  .ready-grid.view-grid8 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
/* На плотной сетке подпись под роликом только мешает. */
.ready-grid.view-grid6 .video-card__info,
.ready-grid.view-grid8 .video-card__info { display: none; }

/* ══ ЗВУЧИИ: ТОНКИЕ СТРОКИ И ОДИН ПЛЕЕР ══════════════════════════════
   Каркас галереи общий, меняется только вид элемента: у фото и видео
   плитка, у музыки строка с длительностью и кнопкой пуска. */

/* Раздел Фонотеки разложен сеткой, а столбец сетки по умолчанию тянется
   под самое широкое содержимое. Длинное название трека растягивало
   столбец за край экрана — вместе с ним уезжал и пульт. Прижимаем
   столбец к ширине раздела. */
body[data-shell-product] .zv-library,
body[data-shell-product] .zv-library-list { grid-template-columns: minmax(0, 1fr); }

.zv-library-list { display: grid; gap: 6px; padding-bottom: 96px; }

.zv-row {
  display: grid;
  /* Три места: кнопка, название, группа действий. Раньше здесь стояло
     шесть колонок под кнопки, а кнопок бывает восемь — лишние падали
     на второй ряд, и строки стояли ступеньками. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  background: transparent;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.zv-row:hover { border-color: color-mix(in srgb, var(--brand, #e0a458) 45%, transparent); }

/* Играющая строка видна сразу: рамка и подложка в цвете сайта. */
.zv-row.is-playing {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 70%, transparent);
  background: color-mix(in srgb, var(--brand, #e0a458) 12%, transparent);
}

/* В строке галочка стоит слева и по центру высоты, а не поверх обложки:
   обложки у звука нет, а в сетку строки лишним столбцом её не поставить. */
.zv-row { position: relative; padding-left: 42px; }
body[data-shell-product] .zv-row > .gal-galka {
  top: 50%; left: 11px; transform: translateY(-50%); opacity: .5;
}
.zv-row:hover > .gal-galka, .zv-row.gal-otmechen > .gal-galka { opacity: 1; }
.zv-row.gal-otmechen { outline-offset: -2px; }

.zv-row__play {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: transparent; color: inherit; font-size: 12px; line-height: 1;
}
.zv-row.is-playing .zv-row__play {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 70%, transparent);
}

.zv-row__name { min-width: 0; display: grid; gap: 2px; }
.zv-row__name b {
  font: 600 14px/1.25 "Golos Text", system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zv-row__name span {
  font: 500 11.5px/1 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 48%, transparent);
}
.zv-row__time {
  font: 600 12.5px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 52%, transparent);
}
.zv-row__orig, .zv-row__dl, .zv-row__ed {
  min-height: 30px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center; text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent; color: inherit; cursor: pointer;
  font: 600 12px/1 "Golos Text", system-ui, sans-serif;
}
.zv-row__orig:hover, .zv-row__dl:hover, .zv-row__ed:hover {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 50%, transparent);
}

/* ── ПЛЕЕР ── стоит над доком и ничего не закрывает. */
.zv-pleer {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: min(calc(100% - 24px), 720px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.zv-pleer[hidden] { display: none; }

.zv-pleer__knopka {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: transparent; color: inherit; font-size: 12px; line-height: 1;
}
.zv-pleer__knopka--glavnaya {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 60%, transparent);
  background: color-mix(in srgb, var(--brand, #e0a458) 14%, transparent);
}
.zv-pleer__seredina { min-width: 0; display: grid; gap: 5px; }
.zv-pleer__seredina b {
  font: 600 13px/1.2 "Golos Text", system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zv-pleer__polosa {
  width: 100%; height: 4px; margin: 0; padding: 0;
  accent-color: var(--brand, #e0a458); cursor: pointer;
}
.zv-pleer__vremya {
  font: 600 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 55%, transparent);
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Сетка строки та же, что на широком: кнопка, имя, группа действий.
     Прежде здесь стояли свои четыре колонки и пряталась правка — от
     этого на телефоне строка разъезжалась, а карандаш пропадал. */
  .zv-pleer { grid-template-columns: auto auto auto 1fr; }
  .zv-pleer__vremya { display: none; }
}

/* ══ БАННЕР ГАЛЕРЕИ — ОДИН НА ТРИ САЙТА ══════════════════════════════
   У Снимии в своих стилях стояла собственная высота полосы и свой кегль
   заголовка — из-за этого её баннер был выше соседних, а буквы крупнее.
   Здесь задаём один размер для всех трёх. */
body[data-shell-product] .shell-banner--thin .shell-banner__frame {
  min-height: 200px;
  height: 200px;
}
body[data-shell-product] .shell-banner--thin .shell-banner__title {
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.06;
  white-space: nowrap;          /* заголовок в одну строку */
}

@media (min-width: 768px) {
  body[data-shell-product] .shell-banner--thin .shell-banner__frame {
    min-height: 240px;
    height: 240px;
  }
}

/* Подписи под заголовком в галерее нет — если сайт её всё же нарисует,
   она не должна раздвигать полосу. */
body[data-shell-product] .shell-banner--thin .shell-banner__copy p,
body[data-shell-product] .shell-banner--thin .sn-shell-subtitle { display: none; }


/* ══ ДЕЙСТВИЯ В СТРОКЕ: ПОСТОЯННЫЕ МЕСТА ═════════════════════════════
   Порядок один на все записи: длительность · метка · действие · mp3 ·
   wav · правка. Ширины закреплены, поэтому нет чего-то — место просто
   пустует, а правый край у всех строк на одной вертикали. Переносов
   нет: карандаш никогда не уезжает вниз. */
.zv-row__deystviya {
  display: grid;
  grid-template-columns: 46px 84px 132px 46px 46px 34px;
  align-items: center;
  justify-items: end;
  gap: 6px;
}
.zv-row__deystviya > * { min-width: 0; }
.zv-row__time { justify-self: end; white-space: nowrap; }
.zv-row__metka, .zv-row__delo, .zv-row__wav { display: inline-flex; justify-content: flex-end; }
.zv-row__metka > *, .zv-row__delo > *, .zv-row__wav > * { white-space: nowrap; }
.zv-row__ed { justify-self: end; }

/* Телефон: те же места, но уже и только значками — в один ряд, без
   переносов. Подписи кнопок прячем, смысл остаётся в подсказке. */
@media (max-width: 560px) {
  .zv-row { padding-left: 34px; gap: 6px; }
  /* Действия только значками и в один ряд: подписи на телефоне съедали
     имя песни, а жанр под ним переносился и ломал высоту строки. */
  .zv-row__deystviya { grid-template-columns: 34px 26px 26px 28px 28px 26px; gap: 3px; }
  .zv-row__razobrat, .zv-row__stems, .zv-row__orig, .zv-row__dl {
    font-size: 0; padding: 0 6px; min-height: 26px;
  }
  .zv-row__razobrat::before { content: "⑃"; font-size: 13px; }
  .zv-row__stems::before { content: "≡"; font-size: 14px; }
  .zv-row__orig::before { content: "◇"; font-size: 12px; }
  .zv-row__dl::before { content: "↓"; font-size: 13px; }
  .zv-row__dl--wav::before { content: "⇓"; font-size: 13px; }
  .zv-row__ed { padding: 0 6px; min-height: 26px; }
  .zv-row__time { font-size: 11px; }
}

/* Жанр под названием — одной строкой: перенос делал строки разной высоты. */
.zv-row__name span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── ГАЛОЧКА НА СЕНСОРНОМ ЭКРАНЕ (10.08.2026) ──────────────────────────
   Галочка выбора показывалась только по наведению мышкой. На телефоне
   наведения нет, поэтому отметить работу — а значит и скачать её полосой
   выбора — было нельзя ни на Ловии, ни на Звучии, ни на Снимии.
   Где мышки нет — показываем галочку всегда, приглушённо. */
@media (hover: none) {
  .gal-galka { opacity: .55; }
  .gal-otmechen > .gal-galka { opacity: 1; }
}


/* ── ПУСТОЙ ЭКРАН (12.08.2026) ────────────────────────────────────────
   Заголовок, строка, кнопка. Без картинок-заглушек: рисунок на пустом
   месте не помогает, а занимает экран и просит его нарисовать. */
.gal-pusto {
  padding: 54px 20px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center;
}
.gal-pusto__imya {
  font: 700 clamp(19px, 3vw, 23px)/1.25 var(--shell-font-title, var(--shell-font-text, system-ui));
  color: var(--shell-ink, #fff);
}
.gal-pusto__stroka {
  font: 500 14.5px/1.5 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 62%, transparent);
  max-width: 34ch;
}
.gal-pusto__knopka {
  margin-top: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--shell-brand, #c5d16b) 55%, transparent);
  color: var(--shell-brand, #c5d16b);
  font: 600 14px/1 var(--shell-font-text, system-ui);
}
.gal-pusto__knopka:hover { border-color: var(--shell-brand, #c5d16b); }

}