/* ============ КАДРЫ НА КАРТОЧКЕ ТОВАРА В СПИСКАХ (11.10.2026) ============
   Курсор ведут по фото карточки — фото листается, как в списках авто.ру: ширина фото поделена на
   зоны по числу кадров, под фото — полоска из делений. Адреса кадров кладёт в data-shots у рамки фото
   models/CardShots (там же перечень шаблонов), листает js/card-shots-2026.js: он подменяет src у ТОГО ЖЕ
   <img>, поэтому размер, поля и увеличение под курсором у кадров те же, что у главного фото (правила
   .pc-img img, .pick-img img, .rc-img img, .seen-img img), и здесь про саму картинку нет ни строчки.
   Классы ставит скрипт: .cs-card — карточке, .cs-on — рамке фото; от вида карточки стили не зависят.
   Отдельный файл и свой бандл (assets/AppAssetCardShots): chaster-2026.css правят несколько сессий сразу.
   Только мышь: полоску и подпись создаёт скрипт, и только по событию от мыши — от пальца он ничего не делает. */

/* рамка фото — якорь для полоски. Вёрстку карточки это не меняет. */
.cs-on{position:relative}

/* полоска делений: лежит в нижнем поле рамки (8–10 px), фото не закрывает; нажатия проходят сквозь неё
   на ссылку карточки */
.cs-bar{
  position:absolute;left:var(--s4);right:var(--s4);bottom:3px;display:flex;gap:4px;
  pointer-events:none;opacity:0;transition:opacity var(--tr);
}
.cs-card:hover .cs-bar{opacity:1}
/* белая кайма — чтобы деления читались и поверх кадра, занявшего рамку целиком (съёмка не на белом фоне) */
.cs-bar i{flex:1 1 0;min-width:0;height:3px;border-radius:2px;background:var(--line-strong);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.cs-bar i.on{background:var(--accent)}

/* на последнем кадре, если на странице товара фото больше, чем листается здесь */
.cs-more{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  padding:5px 10px;border:1px solid var(--line-strong);border-radius:var(--r1);
  background:rgba(255,255,255,.94);color:var(--ink);
  font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity var(--tr);
}
.cs-card:hover .cs-more.on{opacity:1}

/* мелкие карточки — ряды на странице товара и «Вы смотрели» в кабинете: поля рамки уже, а подпись
   закрыла бы заметную часть фото, поэтому её там нет */
.rail-card .cs-bar,.seen-card .cs-bar{left:var(--s2);right:var(--s2);gap:3px}
.rail-card .cs-more,.seen-card .cs-more{display:none}