/* Оформление сайта. Тёмно-бордовая тема.
   Всё в одном файле — проект маленький, разносить пока нечего. */

:root {
  --bg: #1a0200;
  --surface: #270300;
  --surface-2: #430802;
  --border: rgba(255, 255, 255, 0.14);
  --text: #f3e6e6;
  --muted: #bd9b9b;
  /* Кнопки, обводки, выделение. Розовый взят из обложек — тот же цвет,
     которым на них светятся буквы. */
  --accent: #ab0e81;
  /* Наведение заметно светлее: выше нельзя — на светлом розовом
     белые буквы перестают давать 4.5 (здесь 4.9) */
  --accent-hover: #cf199e;
  /* Нажатая кнопка светлеет, буквы на ней цвет не меняют */
  --accent-active: #ff41b4;
  /* «В корзине»: четверть пути от фона к цвету кнопки. Надпись при этом
     становится цветом самой кнопки — получается не кнопка, а её след.
     Фонов два: страница и панель развёрнутой карточки (она светлее),
     поэтому и четверть у каждого своя. */
  --accent-quarter: #3e0520;
  --accent-quarter-panel: #480620;
  /* Бирюзовый из обложек: вторая краска к розовому. Ею горит галочка
     «в корзине» и она же входит в обводку развёрнутой карточки. */
  --accent-2: #22e0d6;
  /* Предел темноты: на почти чёрной шапке человечек этим цветом даёт
     ровно 3 к 1 — нижняя граница, при которой фигура ещё различима.
     Темнее нельзя, светлее — хуже виден переход к «добавлено».
     Белые буквы на нём: 6.75 к 1. */
  --on-accent: #ffffff;
  --link: #ffb8b8;
  /* Отдельный цвет для наведения на ссылки: цвет кнопок на бордовом
     сливался бы и читался плохо */
  --link-hover: #ffe0e0;
  /* Невыбранный флажок того же цвета, что и поле ввода рядом —
     чтобы он не выделялся на общем фоне */
  --checkbox: rgba(0, 0, 0, 0.3);
  /* Человечек в шапке и полоска загрузки — тем же розовым, что кнопки:
     это фигуры, им хватает 3 к 1. */
  --accent-bright: var(--accent);
  /* А наведение на ССЫЛКИ — светлее: тексту нужно 4.5, и основной
     розовый на бордовом фоне давал бы 2.7. Этот даёт 7.1. */
  --accent-text: #ff6cc4;
  /* Шапка сайта */
  --header: #0e0100;
  /* Полоска слева у подсказок — тем же розовым, что кнопки */
  --notice-edge: var(--accent);
  /* Обводка развёрнутой карточки: от фиолетового к малиновому.
     Бирюза с обложек сюда не пошла — рядом с розовым она кричала. */
  --edge: linear-gradient(135deg, #7b5cff, #b94ad8 38%, #ff41b4 72%, #ff2d6f);
  --danger: #ff8080;
  --ok: #7ddb9a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  word-break: break-all;
}

/* --- Шапка --- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--header);
}

.site-header .inner {
  max-width: 1620px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.site-header .logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  text-decoration: none;
}

.site-header .tagline {
  color: var(--muted);
  font-size: 13px;
}

/* --- Поиск в шапке --- */

/* Ростом и видом — как сумма на балансе рядом: та же рамка, то же
   скругление, те же поля. Высота у обоих складывается одинаково:
   строка 15 + поля 8 сверху и снизу + рамка. */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 420px;
  /* Не даём строке распирать шапку на широком экране */
  max-width: 420px;
  margin: 0;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.search:focus-within { border-color: var(--accent); }

.search-go {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.search-go:hover { color: var(--accent-text); }

/* Значок не выше строки, иначе он и задавал бы высоту всей рамки */
.search-go svg { display: block; width: 15px; height: 15px; }

.search-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  /* Размер — как у «Видео» в той же шапке. Высоту строки при этом
     держим равной сумме на балансе (15), иначе рамка стала бы
     на точку ниже соседней. */
  font-size: 14px;
  line-height: 15px;
}

.search-field:focus { outline: none; }

.search-field::placeholder { color: var(--muted); }

/* Крестик, который браузер сам рисует в поле поиска, в тёмной теме
   выглядит чужеродно */
.search-field::-webkit-search-cancel-button { display: none; }

/* Поле на самой странице поиска: шире, с кнопкой вместо лупы */
.search-wide {
  flex: 1 1 auto;
  max-width: 620px;
  margin-bottom: 20px;
  padding: 0 0 0 16px;
}

.search-wide .btn {
  padding: 10px 20px;
  border-radius: 999px;
}

/* По какому запросу нашли — рядом с числом найденного */
.found-for { color: var(--muted); }

/* Кнопка «Поиск» у заголовка витрины — только на телефоне: на широком
   экране строка поиска и так стоит в шапке */
.tag-phone { display: none; }

@media (max-width: 619px) {
  /* Втроём с корзиной и человечком строка в шапку не помещается,
     поэтому на телефоне её нет: к поиску ведёт кнопка у заголовка,
     а само поле стоит на странице поиска. */
  .site-header .search { display: none; }
  .tag-phone { display: inline-block; }
  .search-wide { padding-left: 14px; }
}

/* --- Основа страницы --- */

main {
  /* Шире прежнего на 300 точек. Прибавка достаётся колонке с текстом:
     обложка ограничена сверху и от расширения не растёт. */
  max-width: 1620px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 10px;
}

h2 {
  font-size: 19px;
  margin: 28px 0 12px;
}

/* --- Витрина: плитка видео --- */

.catalog {
  display: grid;
  gap: 16px 10px;
  /* Пять карточек в ряд и не больше: дальше плитка не растягивается,
     а остаётся посередине. При 1570 точках карточка выходит около 306 —
     обложка 16:9 на ней ещё читается. */
  max-width: 1570px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Высоту карточка держит полем снизу, а не содержимым: 56.25% ширины —
   это обложка 16:9, плюс 50 точек на название и строку под ним.
   Содержимое лежит поверх этого места отдельным слоем, поэтому, когда
   на наведении карточка вырастает, соседи не разъезжаются. */
.card {
  position: relative;
  height: 0;
  padding-bottom: calc(56.25% + 50px);
}

.card-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-radius: 12px;
}

.card-link {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.card-link:hover { color: var(--text); }

/* Ссылкой работает вся карточка: прозрачный слой поверх неё.
   Кнопка и будущие теги поднимаются выше этого слоя. */
.card-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.card-cover {
  display: block;
  /* Трейлер ложится поверх обложки — ему нужна точка отсчёта */
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  /* Обложки приходят разной пропорции: показываем середину кадра,
     не искажая картинку */
  object-fit: cover;
}

/* Трейлер поверх обложки, пока карточка под курсором */
.card-trailer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Плеер трейлера на странице товара — на месте обложки */
.preview-play {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
}

/* Название, автор и цена одной сеткой: на широком экране название
   занимает строку целиком, под ним автор слева и цена справа. */
.card-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "author price";
  align-items: center;
  column-gap: 10px;
}

.card-title {
  grid-area: title;
  /* Блочным — обязательно: у строчного элемента и высота, и обрезка
     многоточием просто не действуют, название вылезало целиком. */
  display: block;
  height: 20px;
  line-height: 20px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-author {
  grid-area: author;
  height: 20px;
  line-height: 20px;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Значок «подробнее» и кнопка с ценой — только на телефоне: на широком
   экране подробности раскрываются наведением, а покупка лежит внутри
   разворота карточки. */
.card-side {
  display: none;
  grid-area: side;
  align-items: center;
  gap: 12px;
}

.card-info { color: var(--muted); }

.card-info svg { display: block; }

.card-buy {
  /* Ширина под самую длинную надпись — «добавлено»: без этого кнопка
     на глазах меняла бы размер */
  min-width: 104px;
  text-align: center;
  padding: 6px 14px;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
}

/* Видео уже в корзине: кнопка гаснет до четверти своего цвета,
   а надпись и значок, наоборот, берут её цвет. Рамка остаётся
   основной и становится вдвое толще — толщину даём тенью внутрь,
   потому что настоящая рамка раздвинула бы кнопку. */
.card-buy.is-added,
.card-cart.is-added {
  background: var(--accent-quarter);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

.card-buy.is-added:hover {
  background: #4d0829;
  color: var(--accent);
}

/* Широкая кнопка живёт внутри развёрнутой карточки, а её панель светлее
   страницы — значит и четверть пути к цвету кнопки здесь другая */
.card-cart.is-added {
  background: var(--accent-quarter-panel);
}

.card-cart.is-added:hover {
  background: #560a2a;
  color: var(--accent);
}

/* Кнопка «в корзину» на странице товара. Она стоит рядом с большой
   розовой кнопкой цены и потому тихая, но обводка ей нужна розовая:
   с серой она читалась как неактивная. Правило про четверть цвета
   и розовые буквы у неё то же, что у карточек на витрине. */
.btn-quiet[data-cart-add] {
  border-color: var(--accent);
}

.btn-quiet[data-cart-add].is-added {
  background: var(--accent-quarter);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

.btn-quiet[data-cart-add].is-added:hover {
  background: #4d0829;
  color: var(--accent);
}

/* В узкой кнопке лежат обе надписи сразу: цена и тележка.
   Показывается та, что подходит состоянию. */
.card-buy-cart { display: none; }
.card-buy-cart svg { width: 20px; height: 20px; }

.card-buy.is-added .card-buy-price { display: none; }

.card-buy.is-added .card-buy-cart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-price {
  grid-area: price;
  height: 20px;
  line-height: 20px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

/* --- Развёрнутая карточка (только там, где есть мышь) --- */

.card-more { display: none; }

/* На телефоне наведения не бывает: палец «наводится» касанием, и карточка
   застревала бы раскрытой. Поэтому разворот только для мыши. */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-body {
    /* Низ отпускаем — карточка растёт вниз ровно на столько,
       сколько нужно содержимому */
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: auto;
    z-index: 20;
    padding: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);

    /* Обводка-радуга. Рамке цвет градиентом не задать, поэтому рисуем
       два фона сразу: сплошной до рамки (padding-box) и градиент
       под самой рамкой (border-box). Рамка при этом прозрачная —
       сквозь неё видно градиент. Скруглению это не мешает, в отличие
       от border-image. Никаких картинок: градиент рисует браузер. */
    border-color: transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      var(--edge) border-box;
  }

  .card:hover .card-more { display: block; }
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Кнопка занимает примерно половину строки, остальное — длительность
   и качество */
.card-cart {
  position: relative;
  flex: 1 1 50%;
  /* Иначе длинная надпись растягивает кнопку сверх её половины */
  min-width: 0;
  padding: 8px 10px;
  font-size: 14px;
}

.card-chip {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Семь строк, остальное многоточием: целиком описание на странице товара */
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  /* Переносы строк из описания остаются как есть, лишние пробелы —
     нет. Абзацами текст разложить нельзя: обрезка по строкам работает
     только внутри одного блока. */
  white-space: pre-line;
}

/* --- Окно с подробностями (телефон) --- */

/* Окно не выше четырёх пятых экрана: остальное прокручивается внутри
   него, а страница под ним стоит на месте. */
#card-info {
  max-height: 80vh;
  /* На телефоне часть экрана занимает панель браузера, и она то есть,
     то нет. dvh считает высоту по видимой части, vh — по всей. */
  max-height: 80dvh;
}

#card-info .modal-inner {
  max-height: inherit;
}

/* В окне описание показываем целиком: в карточке оно обрезано семью
   строками ради ровной плитки, а здесь человек открыл его, чтобы прочесть */
#card-info .card-desc {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* Заголовок окна и строка под ним стоят вплотную */
#card-info .modal-head { margin-bottom: 0; }

/* Строка «автор — цена» внутри окна: та же пара, но без сетки карточки */
.card-text-flat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

/* --- Теги --- */

/* Тег со своей страницей — ссылка, редкий (пока один ролик) — подпись
   того же вида, но тусклее и без нажатия */
.tag {
  display: inline-block;
  padding: 3px 9px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}

a.tag:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.tag-quiet { opacity: 0.65; }

/* Выбранный раздел в строке над плиткой */
.tag-on {
  background: var(--accent-quarter);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Заголовок и кнопка рядом с ним — «Тэги» на витрине */
.head-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
}

.head-line h1 { margin: 0; }

.tag-big {
  margin: 0;
  padding: 6px 14px;
  font-size: 14px;
}

/* Строка разделов над плиткой */
.tag-bar {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.tag-bar .tag {
  font-size: 13px;
  padding: 5px 12px;
}

/* Галочки жанров в управлении: в две-три колонки, чтобы три десятка
   строк не растягивали форму на два экрана */
.tag-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 14px;
  margin-bottom: 20px;
}

.tag-picker .checkbox { margin: 0; }

/* Теги на странице товара — в одной строке с характеристиками */
.tag-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-line .tag { margin: 0; }

/* Теги в развёрнутой карточке */
.card-tags {
  min-height: 22px;
  margin-top: 8px;
}

/* --- Корзина --- */

/* Значок в шапке с числом видео. Число — маленьким кружком поверх
   тележки, как в любом магазине. */
.cart-link { position: relative; }

.cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Страница корзины уже остальных: 1134 точки вместо 1620 у main.
   Списку из пяти колонок вся ширина монитора не нужна, а читать
   строку через весь экран неудобно. */
.cart-page {
  max-width: 1134px;
  margin: 0 auto;
}

.cart {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 16px;
}

/* Порядок слева направо: кружок автора с именем, заставка, название,
   цена, «убрать». */
.cart-row {
  display: grid;
  grid-template-columns: auto 96px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.cart-who {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Кружок под фотографию автора. Пока пустой — фотографии ещё нет,
   но место под неё занято, чтобы вёрстка не поехала, когда появится. */
.avatar {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.cart-row:last-child { border-bottom: 0; }

.cart-cover {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}

.cart-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cart-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  /* Длинное название не должно растягивать строку и уводить цену за край */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-title:hover { color: var(--accent-text); }

.cart-price {
  white-space: nowrap;
  font-size: 14px;
}

.cart-row form { margin: 0; }

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 16px;
}

/* Купленное на витрине: вместо цены спокойная подпись */
.card-bought {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 619px) {
  /* На телефоне пятёрка в строку не помещается: сверху автор,
     а справа от него «убрать»; ниже заставка, название и цена. */
  .cart-row {
    grid-template-columns: 78px minmax(0, 1fr) auto;
    grid-template-areas:
      "who   who   remove"
      "cover title price";
    gap: 6px 10px;
  }

  .cart-who { grid-area: who; }
  .cart-cover { grid-area: cover; align-self: start; }
  .cart-title { grid-area: title; }
  .cart-price { grid-area: price; }
  .cart-row form { grid-area: remove; }
}

/* --- Страница товара: две колонки --- */

.product h1 { font-size: 28px; }

.product {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

/* Обложка сохраняет свою пропорцию 16:9 — так она видна целиком,
   без обрезки и без полей. Растягивать её по высоте колонки нельзя:
   рамка стала бы выше картинки, и появились бы либо полосы, либо срез. */
@media (min-width: 900px) {
  /* Колонки делят ширину в одной и той же пропорции, а не «обложка
     фиксированная, текст остальное». Раньше при сужении окна сначала
     сжималось только описание — до 317 точек, — и лишь потом начинала
     уменьшаться картинка. Теперь от 1620 до 900 они уменьшаются вместе.
     Доли 1.12 к 1 — та же пропорция, что была на полной ширине
     (820 под обложку и 732 под текст), так что на широком мониторе
     страница выглядит как прежде. */
  .product { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; }

  /* Правая колонка тянется во всю высоту строки, а блок покупки
     прижимается к её низу — тогда низ кнопки совпадает с низом обложки.
     Отступ под описанием здесь лишний: расстояние до кнопки задаёт
     свободное место, а не поле. С ним колонка перерастала обложку. */
  .product > div:nth-child(2) { display: flex; flex-direction: column; }
  .product .buy-box { margin-top: auto; }

  /* Описание занимает ровно то место, что осталось от заголовка,
     характеристик и кнопки, — и обрезается по нему. Поэтому низ колонки
     совпадает с низом обложки при любой длине текста: раньше длинное
     описание утягивало колонку ниже картинки.

     Развернули — ограничение снимается, и колонка растёт как обычно. */
  .product .description {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Отбивка до кнопки покупки: без неё текст упирался в неё вплотную */
    margin-bottom: 16px;
  }

  /* Затемнения больше нет: текст теперь обрезается по словам и кончается
     многоточием, а не обрывается на полубукве. Прятать нечего. */

  .product.is-open .description {
    flex: 0 0 auto;
    overflow: visible;
  }
}

.preview {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview img {
  width: 100%;
  height: 100%;
  /* Рамка той же пропорции, что и картинка (16:9), поэтому cover ничего
     не режет: изображение показывается целиком и без полей по краям. */
  object-fit: cover;
  display: block;
}

.preview .placeholder {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

/* Строка с характеристиками под названием */
/* Характеристики и теги — одной строкой: это сведения об одном и том же
   ролике, разводить их по двум строкам незачем. Не помещаются — строка
   переносится сама. */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 16px;
}

.meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 22px;
}

/* Внутри общей строки отступы задаёт она сама */
.meta-line .meta { margin: 0; }

.meta span + span::before {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

/* --- Блок покупки --- */

/* Без рамки и подложки: цена с кнопкой стоят прямо на фоне страницы */
.buy-box {
  margin-top: 24px;
}

/* Цена, поле почты и кнопка — одной строкой */
.buy-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Поле и кнопка одного роста — одинаковые отступы и размер шрифта */
.buy-line input[type="email"],
.buy-line .btn {
  font-size: 16px;
  line-height: 1.25;
  padding: 14px 16px;
  margin-bottom: 0;
}

.buy-line input[type="email"] { flex: 1 1 200px; }
.buy-line .btn { padding-left: 34px; padding-right: 34px; }

/* Кнопка покупки, на которой написана цена. Шрифт крупнее, а высота
   строки задана точно — кнопка той же высоты, что была с «Купить»:
   на широком экране её низ совпадает с низом обложки. */
.buy-line .btn-price {
  font-size: 19px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.buy-extras {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

/* Своя отрисовка: браузерный флажок на тёмном фоне белый и слепит */
.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 4px;
  /* Рамка как у поля ввода, иначе тёмный квадрат сливался бы с фоном */
  border: 1px solid var(--border);
  background: var(--checkbox);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}

.checkbox input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.checkbox input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox input:checked::after { opacity: 1; }

/* Подпись нужна программам чтения с экрана, но не глазам:
   в строке она заняла бы место, а поле и так подписано подсказкой */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pay-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

label { display: block; font-size: 14px; margin-bottom: 6px; }

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 14px;
}

/* Глазик в поле пароля (скрипт в src/html.js). Когда пароль показан,
   поле становится type="text" — поэтому стили поля ниже заданы и для
   него, чтобы вид не менялся. */
.password-wrap {
  position: relative;
  display: block;
  margin-bottom: 14px;
}

.password-wrap input { margin-bottom: 0; padding-right: 44px; }

.password-wrap input[type="text"] {
  width: 100%;
  padding: 11px 44px 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 15px;
}

.password-eye {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}

.password-eye:hover { color: var(--text); }
.password-eye:focus:not(:focus-visible) { outline: none; }

/* Ошибка прямо под полем («Пароли не совпадают») и красная рамка поля.
   Селектор с .password-wrap — чтобы рамка перебивала стиль поля
   и тогда, когда пароль показан глазиком */
.field-error {
  color: var(--danger);
  font-size: 13px;
  margin: -6px 0 12px;
}

.password-wrap input.field-invalid,
input.field-invalid { border-color: var(--danger); }

/* Свой глазик у Edge — прячем, иначе в поле их было бы два */
input::-ms-reveal { display: none; }

.password-wrap input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  /* Прозрачная рамка, чтобы кнопка совпадала по высоте с полем ввода,
     у которого рамка есть */
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  /* Цвет меняется плавно: нажал «в корзину» — кнопка перетекает
     в другое состояние, а не переключается рывком */
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Нажали — розовый светлеет. Буквы остаются белыми: менять их цвет
   в момент нажатия значит мигать текстом */
.btn:active { background: var(--accent-active); color: var(--on-accent); }

.btn-wide { width: 100%; }

.hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 12px 0 0;
}

/* --- Окно оформления покупки --- */

.modal {
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

/* Пока окно открыто, страница под ним не прокручивается */
html:has(dialog[open]) { overflow: hidden; }

.modal-inner {
  padding: 22px 24px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 40px);
  /* Докрутил окно до конца — прокрутка не перескакивает на страницу */
  overscroll-behavior: contain;
}

/* Заголовок получает фокус при открытии окна (autofocus) — рамка
   фокуса вокруг него не нужна */
.modal-head h2:focus { outline: none; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-head h2 { margin: 0; font-size: 21px; }

.modal-close {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.modal-close:hover { color: var(--text); }

/* Круг вокруг крестика — только тем, кто ходит по окну клавишей Tab */
.modal-close:focus:not(:focus-visible) { outline: none; }

.modal h3 {
  font-size: 15px;
  margin: 20px 0 8px;
  color: var(--muted);
  font-weight: 600;
}

.modal .checkbox { margin: 10px 0 16px; }
.modal .notice { font-size: 14px; }
.modal .rows { margin-bottom: 4px; }

/* --- Описание --- */

/* Описание живёт в правой колонке, её ширина и задаёт длину строки */
.description p { margin: 0 0 14px; }

.description {
  /* Отступ снизу не нужен: его даёт последний абзац внутри */
  font-size: 14px;
}

/* На телефоне текста много, а экрана мало: ужимаем описание,
   чтобы до кнопки покупки было ближе */
@media (max-width: 640px) {
  .description { font-size: 14.5px; line-height: 1.45; }
  .description p { margin: 0 0 10px; }

  /* Поле почты на телефоне — отдельной строкой во всю ширину */
  .buy-line input[type="email"] { order: 3; flex: 1 1 100%; }
}

/* --- Таблицы (страница заказа) --- */

.rows {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

/* Подпись слева, значение у правого края: тогда длинное значение
   (почта, название видео) не роняет строку на вторую */
.rows .row {
  display: flex;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
}

.rows .row:last-child { border-bottom: 0; }

/* Заголовок таблицы — название видео на странице заказа */
.rows .rows-title {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.rows .row .k { color: var(--muted); font-size: 14px; flex: none; }
.rows .row .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* --- Уведомления --- */

.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--notice-edge);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 20px;
}

.notice.warn { border-left-color: var(--danger); }
.notice.ok { border-left-color: var(--ok); }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin: 0; }

iframe {
  width: 100%;
  max-width: 640px;
  height: 720px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* --- Страница заказа: сведения слева, форма оплаты справа --- */

.order-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
  .order-grid { grid-template-columns: minmax(0, 1fr) 640px; align-items: start; }
}

/* Заголовок «Оплата» встаёт вровень с «Заказ оформлен» */
.order-payment > h2:first-child { margin-top: 0; line-height: 1.25; font-size: 30px; }

/* --- Выбор монеты на странице заказа --- */

.coins { display: grid; gap: 10px; }

/* Предупреждение над списком монет — часть этого же списка, поэтому
   и отступ под ним такой же, как между монетами. С общим отступом
   подсказок (20) оно висело в воздухе. */
.coins-note { margin-bottom: 10px; }

.coin {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.coin[open] { border-color: rgba(255, 255, 255, 0.28); }

.coin summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
}

.coin summary::-webkit-details-marker { display: none; }
.coin summary:hover { background: rgba(255, 255, 255, 0.04); }

/* Стрелка справа: вправо — свёрнуто, вниз — раскрыто */
.coin summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s;
}

.coin[open] summary::after { transform: rotate(90deg); }

.coin-icon { display: inline-flex; flex: none; line-height: 0; }
.coin-icon svg { width: 24px; height: 24px; }

.coin-name { font-weight: 600; }
.coin-note { color: var(--muted); font-size: 14px; }

.coin-body { padding: 2px 16px 16px; }
.coin-body .notice { font-size: 14px; }

/* QR слева, сумма и адрес справа; на узком экране — друг под другом */
.pay-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Белая подложка обязательна: тёмный код на бордовом фоне камера не прочтёт */
.qr {
  flex: none;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  line-height: 0;
}

.qr svg { width: 168px; height: 168px; display: block; }

.pay-fields {
  flex: 1 1 240px;
  min-width: 0;
  display: grid;
  gap: 14px;
}

.pay-field .k {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}

.copy-line { display: flex; gap: 8px; align-items: stretch; }

.copy-line code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
}

.copy-btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}

.copy-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }

.pay-deadline { font-size: 14px; margin: 14px 0 0; }
.pay-deadline time { font-weight: 600; }

/* --- Подвал --- */

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.site-footer .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* «заказ № …» в подвале страницы заказа: мелко и одной строкой,
   номер длинный — 36 знаков */
.site-footer .order-number {
  font-size: 11.5px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}


/* --- Учётная запись в шапке --- */

.icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  padding: 7px;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}

.icon-btn:hover { border-color: var(--border); background: rgba(255, 255, 255, 0.06); }

.user-box {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.user-email {
  font-size: 13px;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-box form { margin: 0; }

.link-btn {
  background: none;
  border: 0;
  color: var(--link);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.link-btn:hover { color: var(--link-hover); }

/* --- Переключатель «Вход / Регистрация» ---
   Работает на радиокнопках, без скрипта: они и запоминают выбор,
   и двигают ползунок, и показывают нужную форму. */

.mode-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}

.switch label {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 9px 8px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.15s;
}

.switch .thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--accent);
  border-radius: 999px;
  /* Двигаем ползунок через left, а не через translateX(100%):
     процент в transform браузер пересчитывает в пиксели в момент
     переключения и запоминает. Пока окно закрыто, его ширина равна нулю —
     и сдвиг навсегда остаётся нулевым. left пересчитывается при отрисовке. */
  transition: left 0.18s ease;
}

#mode-register:checked ~ .switch .thumb { left: 50%; }
#mode-login:checked ~ .switch label[for="mode-login"],
#mode-register:checked ~ .switch label[for="mode-register"] { color: var(--on-accent); }


.auth-form { display: none; }
#mode-login:checked ~ .auth-login { display: block; }
#mode-register:checked ~ .auth-register { display: block; }

/* Без JavaScript окно показывается частью страницы — тогда пусть будут
   видны обе формы, иначе переключатель окажется единственным содержимым */
.auth-form .btn { margin-top: 6px; }

/* --- Мои покупки --- */

.user-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.user-link:hover { color: var(--link-hover); }

.purchase {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.purchase-main { flex: 1 1 260px; }

.purchase-title { display: block; font-weight: 600; margin-bottom: 2px; }

/* Карточка-ссылка: название растянуто невидимым слоем на всю карточку,
   кнопка «Скачать» поднята над слоем и нажимается отдельно */
.purchase-linked { position: relative; transition: background 0.15s, border-color 0.15s; }
.purchase-linked:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.28); }

.purchase-cover { color: var(--text); text-decoration: none; }
.purchase-cover:hover { color: var(--text); }

.purchase-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

.purchase-linked .btn { position: relative; z-index: 1; }

.purchase-meta { color: var(--muted); font-size: 13px; }

/* --- Управление видео (страницы владельца) --- */

/* Ссылка «Видео» в шапке — только у владельца */
.admin-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.admin-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* Строка списка видео */
.admin-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 10px;
}

.admin-item-main { flex: 1 1 260px; min-width: 0; }
.admin-item-title { display: block; font-weight: 600; color: var(--text); text-decoration: none; }
.admin-item-title:hover { color: var(--accent-text); }
.admin-item-meta { color: var(--muted); font-size: 13px; }

/* Метка состояния: в продаже или черновик */
.state {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.state-on { color: var(--ok); border-color: var(--ok); }
.state-off { color: var(--muted); }

/* Форма видео */
.narrow-form { max-width: 560px; }
.admin-form h2 { font-size: 16px; color: var(--muted); margin: 26px 0 12px; }
.form-row { margin-bottom: 16px; }
.form-row .hint { margin-top: 5px; }

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="date"],
.admin-form textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.admin-form textarea { resize: vertical; line-height: 1.5; }

.admin-form input:focus,
.admin-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Загрузка видео */
.upload-box {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  max-width: 560px;
}

.upload-box h2 { margin-top: 0; }
.upload-box input[type="file"] { display: block; margin: 12px 0; color: var(--text); max-width: 100%; }
.upload-box code { word-break: break-all; }

.upload-progress {
  height: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 6px;
}

.upload-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-bright);
  transition: width 0.2s;
}

/* Публикация — отдельным действием под формой */
.publish-form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.publish-form .hint { margin: 0; }

/* Негромкая кнопка: снять с продажи — не то действие, которое зазывают нажать */
.btn-quiet {
  background: none;
  border-color: var(--border);
  color: var(--text);
}

.btn-quiet:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

/* --- Баланс --- */

/* Сумма на балансе в шапке, слева от человечка. Ведёт на пополнение */
.balance-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.balance-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* Остаток крупно на странице баланса */
.balance-amount {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}

.topup-form { max-width: 420px; margin-bottom: 8px; }
.topup-line { display: flex; gap: 10px; }

.topup-line input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 17px;
}

.topup-line input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Оплата с баланса на странице заказа — над монетами */
.balance-pay-form { margin-bottom: 20px; }

/* Кнопка «Скачать» со значком */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Значок скачивания в списке покупок: при наведении зеленеет */
.download-link { color: var(--text); }
.download-link:hover { color: var(--accent-text); }

/* Значок лежит поверх слоя-ссылки карточки и нажимается отдельно */
.purchase-linked .download-link { position: relative; z-index: 1; }

/* «Можно платить с баланса» — под монетами */
.balance-note { margin-top: 16px; }

/* История и незавершённые пополнения: описание слева, сумма справа */
.ledger { max-width: 640px; }
.ledger .row { justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.ledger .row .k { min-width: 0; font-size: 13px; }
.ledger .amount-plus { color: var(--ok); white-space: nowrap; }
.ledger .amount-minus { white-space: nowrap; }

/* Вошедший: человечек нашим зелёным */
.icon-btn-active { color: var(--accent-bright); }
.icon-btn-active:hover { color: #45bb47; }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.page-head h1 { margin-bottom: 4px; }

/* Узкие формы на отдельных страницах */
.narrow { max-width: 420px; }

/* --- Плеер --- */

.player {
  display: block;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
}

/* Плеер Plyr. Рамка держит место 16:9 заранее, чтобы страница
   не прыгала, пока плеер собирается. */
.player-box {
  max-width: 900px;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #000;

  /* Цвета Plyr: наш зелёный и тёмное меню вместо белого */
  --plyr-color-main: var(--accent-text);
  --plyr-menu-background: rgba(26, 2, 0, 0.94);
  --plyr-menu-color: var(--text);
  --plyr-menu-arrow-color: var(--muted);
  --plyr-menu-back-border-color: var(--border);
  --plyr-menu-back-border-shadow-color: transparent;
  --plyr-menu-radius: 8px;
  --plyr-badge-background: var(--accent);
}

.player-box .plyr { height: 100%; }

/* На странице товара плеер встаёт на место обложки: во всю колонку
   и без нижнего отступа — низ плеера совпадает с низом кнопки справа */
.product .player-box { max-width: none; margin-bottom: 0; }

/* Телефон и узкое окно, где плеер и описание встают столбиком:
   плеер и обложка от края до края экрана. Выходят за поля страницы
   (20 точек с каждой стороны, см. main) — на их ширину и растягиваются.
   Скругления и боковые рамки у краёв экрана не нужны. */
@media (max-width: 899px) {
  .preview,
  .player-box,
  .player {
    max-width: none;
    width: auto;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .player { width: calc(100% + 40px); }
}

/* «Читать далее» под обрезанным описанием. Появляется только когда
   текст и правда не поместился — это решает скрипт на странице. */
.more-btn {
  /* Стоит прямо в тексте, сразу за многоточием, поэтому ни отступов,
     ни своего размера у неё нет — она часть строки */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.more-btn:hover { text-decoration: underline; }

/* Подпись у кнопки «Скачать» на странице товара */
.owned-note { color: var(--muted); font-size: 14px; }

/* --- Телефон --- */
/*
   Поля страницы здесь уже: 13 точек вместо 20. По ним выстроено всё —
   и «kupivideo» в шапке, и заголовок, и текст карточек, — поэтому
   меняются они в одном месте, вместе с теми блоками, которые выходят
   за поля наружу (обложка, плеер).

   Блок стоит НИЖЕ правил для широкого экрана: иначе отступ -20 у плеера
   пересилил бы здешний -13, и страницу сдвигало бы вбок.
*/
@media (max-width: 619px) {
  /* Расстояние до следующей обложки задаёт пустая строка внутри карточки
     (см. .card-text ниже): иначе по центру этого расстояния ничего
     не поставить — часть его принадлежала бы сетке, а часть карточке. */
  .catalog { gap: 0; }

  .site-header .inner,
  main {
    padding-left: 13px;
    padding-right: 13px;
  }

  .preview,
  .player-box,
  .player {
    margin-left: -13px;
    margin-right: -13px;
  }

  .player { width: calc(100% + 26px); }

  /* Разворота по наведению на телефоне не бывает, поэтому карточка живёт
     обычным потоком: резервировать место полем снизу незачем. */
  .card {
    height: auto;
    padding-bottom: 0;
  }

  /* Разворота здесь нет, значит и рамки под обводку не нужно:
     с ней обложка не доставала бы до края экрана на её толщину */
  .card-body {
    position: static;
    border: 0;
  }

  /* Обложка от края до края экрана */
  .card-cover {
    margin-left: -13px;
    margin-right: -13px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Значок «подробнее» и кнопка с ценой стоят отдельным столбцом справа,
     по центру расстояния между обложками — поэтому столбец накрывает все
     три строки блока, включая пустую, которая и есть отступ до следующей
     обложки (сетка плитки на телефоне отступов не даёт, см. .catalog).

     Нажатие на этот блок открывает окно с подробностями
     (public/card-info.js), поэтому ссылкой он больше не накрыт;
     кнопка окно не открывает — она про корзину. */
  .card-text {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title side"
      "author side"
      "space side";
    grid-template-rows: auto auto 16px;
    column-gap: 12px;
    cursor: pointer;
  }

  .card-side { display: flex; }
  .card-price { display: none; }

  /* Значок вдвое крупнее, чем нарисован */
  .card-info svg { width: 32px; height: 32px; }

  /* Ссылкой остаётся только обложка: нажатие по ней ведёт на страницу
     покупки, нажатие по тексту открывает окно */
  .card-link::after { display: none; }

  .card-title {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
  }

  .card-author {
    font-size: 14px;
    /* Только сверху: снизу расстояние до следующей обложки даёт
       пустая строка блока, и два отступа подряд складывались
       в неровную дыру */
    margin-top: 10px;
  }
}