/* Полоса сторис-хайлайтсов над шапкой + полноэкранный просмотрщик.
   Спек бренд-директора 04.09.2026: брендбук v1.1 — монохром + металл-градиент,
   Jost, радиус 10px. Полоса закреплена при прокрутке вместе с шапкой (решение
   Елены 04.09). Высота зарезервирована ниже — в заполненном состоянии (норма)
   сдвига контента нет; пустая полоса схлопывается после ответа API. */

#ferrum-stories{min-height:114px;background:#fff;border-bottom:1px solid #e0e0e0}
#ferrum-stories.hl-empty{display:none;min-height:0;border:none}

/* Полоса закреплена при прокрутке вместе с шапкой (решение Елены 04.09.26).
   Класс has-stories ставит stories.js только когда полоса отрисована — на
   странице с пустой полосой шапки остаются на своих местах (top:0). Шапки всех
   страниц уже sticky: опускаем их на высоту полосы, ниже — сайдбар каталога. */
html.has-stories #ferrum-stories{position:sticky;top:0;z-index:120}
html.has-stories .cn,html.has-stories .pn,html.has-stories .nv,html.has-stories .n4,
html.has-stories .blog-nav,html.has-stories .art-nav,
html.has-stories .cab-nav,html.has-stories .terms-nav{top:114px}
/* сайдбару каталога вместе с top опускаем и max-height (исходно 100vh-99px при top:83px) */
html.has-stories .cat-sidebar{top:197px;max-height:calc(100vh - 213px)}
@media(max-width:640px){
  html.has-stories .cn,html.has-stories .pn,html.has-stories .nv,html.has-stories .n4,
  html.has-stories .blog-nav,html.has-stories .art-nav,
  html.has-stories .cab-nav,html.has-stories .terms-nav{top:96px}
}

.hl-bar{max-width:1280px;margin:0 auto;padding:14px 40px 12px;display:flex;gap:36px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.hl-bar::-webkit-scrollbar{display:none}
/* Кружки по центру полосы, когда помещаются; при переполнении (мобильный,
   много кружков) auto-отступы обнуляются и остаётся обычный скролл слева */
.hl-item:first-child{margin-left:auto}
.hl-item:last-child{margin-right:auto}

.hl-item{flex:none;min-width:68px;max-width:112px;background:none;border:none;padding:0;
  cursor:pointer;text-align:center;scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent}
.hl-ring{display:block;width:68px;height:68px;margin:0 auto;border-radius:50%;padding:2px;
  background:linear-gradient(110deg,#D8CCCB,#B49F9C,#DCD2D0,#AC9391,#CFC1BF)}
.hl-ring>span{display:block;background:#fff;border-radius:50%;padding:2px}
.hl-ring img{width:60px;height:60px;border-radius:50%;object-fit:cover;display:block}
.hl-item.hl-seen .hl-ring{background:#e0e0e0;padding:1px}
.hl-item.hl-seen .hl-ring>span{padding:3px}
.hl-label{display:block;margin-top:6px;font:400 11px/1.2 'Jost',sans-serif;
  letter-spacing:1px;text-transform:uppercase;color:#555;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hl-item.hl-seen .hl-label{color:#888}

@media(max-width:640px){
  #ferrum-stories{min-height:96px}
  .hl-bar{padding:10px 16px 8px;gap:20px}
  .hl-item{min-width:60px;max-width:96px}
  .hl-ring{width:60px;height:60px}
  .hl-ring img{width:52px;height:52px}
  .hl-label{font-size:10px}
}

/* ---- Просмотрщик ---- */
body.hl-lock{overflow:hidden}
.hl-viewer{position:fixed;inset:0;z-index:10000;background:rgba(10,10,10,.97);
  display:flex;align-items:center;justify-content:center}
.hl-frame{position:relative;height:min(85vh,780px);aspect-ratio:9/16;border-radius:10px;
  overflow:hidden;background:#111;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.hl-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl-progress{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;
  right:12px;display:flex;gap:4px;z-index:3}
.hl-progress i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28)}
.hl-progress i.on{background:#fff}
.hl-close{position:absolute;top:calc(22px + env(safe-area-inset-top));right:10px;
  width:40px;height:40px;background:none;border:none;color:#fff;font-size:32px;
  line-height:1;cursor:pointer;z-index:4;padding:0}
.hl-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:120px 20px 96px;
  background:linear-gradient(to top,rgba(17,17,17,.88) 0%,rgba(17,17,17,0) 45%)}
.hl-kicker{font:500 11px/1.2 'Jost',sans-serif;letter-spacing:3px;text-transform:uppercase;
  color:#C2B0AE;margin:0 0 8px}
.hl-text{font:300 16px/1.5 'Jost',sans-serif;color:#fff;margin:0}
.hl-cta{position:absolute;left:20px;right:20px;bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:3;display:flex;justify-content:center}
.hl-cta a{display:inline-block;
  background:linear-gradient(110deg,#D8CCCB,#B49F9C,#DCD2D0,#AC9391,#CFC1BF);
  color:#1a1a1a;border:1px solid #B49F9C;border-radius:8px;
  font:500 15px/1 'Jost',sans-serif;letter-spacing:1px;text-transform:uppercase;
  padding:14px 30px;text-decoration:none}
.hl-tap{position:absolute;top:0;bottom:0;z-index:2;background:none;border:none;
  cursor:pointer;padding:0}
.hl-tap.hl-prev{left:0;width:33.4%}
.hl-tap.hl-next{right:0;width:66.6%}

@media(max-width:640px){
  .hl-frame{width:100%;height:100%;border-radius:0;aspect-ratio:auto;box-shadow:none}
}