/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================================
   BASE
   ========================================================= */

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  background-color: var(--color-bg-main);
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Все гиперссылки без подчеркивания */
a {
  text-decoration: none;
}

/* =========================================================
   SCROLLBARS — GLOBAL STYLES
   ========================================================= */

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* WebKit scrollbar styles для всех элементов */
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  /* Убираем кнопки через свойство самого скроллбара */
  scrollbar-button-width: 0px;
  scrollbar-button-height: 0px;
}

/* Убираем угол скроллбара */
*::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}

/* Полное удаление стрелок скроллбара */
*::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: inset(100%) !important;
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-button:vertical:start,
*::-webkit-scrollbar-button:vertical:end,
*::-webkit-scrollbar-button:horizontal:start,
*::-webkit-scrollbar-button:horizontal:end {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-button:single-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-button:double-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-button:no-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-button:vertical:start:before,
*::-webkit-scrollbar-button:vertical:end:after,
*::-webkit-scrollbar-button:horizontal:start:before,
*::-webkit-scrollbar-button:horizontal:end:after {
  display: none !important;
  content: none !important;
}

/* Дополнительные правила для Chrome на Windows */
*::-webkit-scrollbar-button:vertical:start:decrement:before,
*::-webkit-scrollbar-button:vertical:end:increment:after,
*::-webkit-scrollbar-button:horizontal:start:decrement:before,
*::-webkit-scrollbar-button:horizontal:end:increment:after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Убираем все возможные псевдоэлементы внутри кнопок */
*::-webkit-scrollbar-button * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Дополнительные правила для body и html */
body::-webkit-scrollbar-button,
html::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: inset(100%) !important;
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Правила для всех элементов с overflow */
[style*="overflow"]::-webkit-scrollbar-button,
[style*="overflow-y"]::-webkit-scrollbar-button,
[style*="overflow-x"]::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  clip-path: inset(100%) !important;
  clip: rect(0, 0, 0, 0) !important;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:focus {
  background-color: #91806e !important; /* accent-light - цвет кнопки secondary в состоянии normal */
  background: #91806e !important;
  border-radius: 4px;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* =========================================================
   TOPBAR — DESKTOP
   ========================================================= */

.topbar {
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 40px;

  background-color: transparent;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  z-index: 20;
}

/* Author signature */

.topbar__author {
  display: flex;
  align-items: center;
}

.topbar__author img {
  display: block;
  max-height: 36px;
}

/* По умолчанию показываем темную подпись (для светлого фона) - exposure 100% */
.topbar__author-img--dark {
  display: block;
}

.topbar__author-img--light {
  display: none;
}

/* Если на странице есть .main-hero (темное изображение под топбаром), 
   показываем светлую подпись - exposure 0% */
body:has(.main-hero) .topbar__author-img--dark {
  display: none;
}

body:has(.main-hero) .topbar__author-img--light {
  display: block;
}

/* Menu */

.topbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

.topbar__menu a {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--1);
  text-transform: lowercase;

  color: var(--color-text-secondary);
  text-decoration: none;

  transition: color 0.2s ease;
}

.topbar__menu a:hover,
.topbar__menu a:focus {
  color: var(--color-text-accent-primary);
}

.topbar__menu a.active {
  color: var(--color-text-primary);
}

/* Burger button (hidden on desktop) */
.topbar__burger {
  display: none;
}

/* Navigation with back button and title (hidden on desktop) */
.topbar__nav {
  display: none;
}

/* Menu close button (hidden on desktop) */
.topbar__menu-close {
  display: none;
}

/* Footer меню с заголовком и кнопками (скрыт на десктопе) */
.topbar__menu-footer {
  display: none;
}

/* =========================================================
   TOPBAR — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .topbar {
    height: 60px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    
    padding: 0 16px;
    
    background-color: var(--color-bg-main);
    box-shadow: var(--shadow-200);
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }

  /* Author signature - всегда темная на мобильной */
  .topbar__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    gap: 0;
    flex: 1;
    max-width: calc(100% - 40px); /* 24px ширина бургера + 16px отступ */
  }

  .topbar__author-img--dark {
    display: block !important;
  }

  .topbar__author-img--light {
    display: none !important;
  }

  /* На главной странице - подпись обычного размера */
  body:has(.main-hero) .topbar__author img {
    max-height: 36px;
  }

  /* На других страницах - подпись уменьшена на 25% (75% от размера) */
  body:not(:has(.main-hero)) .topbar__author img {
    max-height: 27px; /* 36px * 0.75 = 27px */
  }

  /* Навигация с кнопкой возврата и заголовком - скрыта на главной */
  .topbar__nav {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    width: 100%;
    max-width: 100%;
  }

  body:not(:has(.main-hero)) .topbar__nav {
    display: flex;
    margin-top: -8px;
  }

  /* Кнопка возврата - скрыта на главных страницах разделов */
  /* НЕ скрываем на страницах с .gallery-container в контенте, только на главной странице галереи */
  body:has(.main-hero) .topbar__back,
  body:has(.translations-container) .topbar__back,
  body:has(.texts-container) .topbar__back,
  body:has(.archive-container) .topbar__back,
  body.gallery-page .topbar__back {
    display: none;
  }

  .topbar__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .topbar__back img {
    width: 24px;
    height: 24px;
  }

  .topbar__title {
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-16);
    line-height: var(--line-height-120);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-3);
    text-transform: lowercase;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  /* Заголовок скрыт на главной странице */
  body:has(.main-hero) .topbar__title {
    display: none;
  }

  /* Бургер-меню */
  .topbar__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  .topbar__burger img {
    width: 24px;
    height: 24px;
  }

  /* Меню - выезжает справа */
  .topbar__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    
    position: fixed;
    top: 0;
    left: 15%; /* Не доезжает до левого края на 15% */
    right: 0;
    bottom: 0;
    
    background-color: var(--color-bg-main);
    padding: 60px 16px 0 16px;
    justify-content: flex-start;
    
    z-index: 30;
    overflow-y: auto;
    
    transform: translateX(100%);
    transition: transform 0.42s ease; /* Ускорено на 30%: 0.6s * 0.7 = 0.42s */
  }

  .topbar__menu--open {
    transform: translateX(0);
  }

  /* Кнопка закрытия меню */
  .topbar__menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 1;
  }

  .topbar__menu-close img {
    width: 24px;
    height: 24px;
  }

  .topbar__menu a {
    font-size: var(--font-size-16);
  }

  .topbar__menu a.active {
    font-weight: 700;
  }

  /* Footer меню с заголовком и кнопками (только на странице перевода, только в мобильной версии) */
  body:has(.translation-content) .topbar__menu-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
    width: 100%;
    padding-bottom: 60px;
  }

  /* Скрываем кнопку "оглавление" на страницах с галереями изображений */
  /* Но показываем её, если есть текстовое оглавление (для страниц типа пьес) */
  body:has(.translation-content .gallery-container):not(:has(.table-of-contents__item)) .topbar__menu-footer #menu-toc-button,
  body:has(.table-of-contents__pdf-thumbnails .gallery-thumbnail:not([data-pdf])):not(:has(.table-of-contents__item)) .topbar__menu-footer #menu-toc-button {
    display: none !important;
  }

  .topbar__menu-title {
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-16);
    line-height: var(--line-height-120);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-3);
    text-transform: lowercase;
    color: var(--color-text-primary);
    margin: 0 0 32px 0;
  }

  /* Компонент txt-button */
  .txt-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-14);
    line-height: var(--line-height-100);
    font-weight: 600;
    letter-spacing: var(--letter-spacing--1);
    text-transform: lowercase;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
  }

  .txt-button:hover,
  .txt-button:focus {
    color: var(--color-text-accent-primary);
  }

  .txt-button:active {
    color: var(--color-text-primary);
  }

  .txt-button:disabled {
    color: rgba(145, 128, 110, 0.6); /* text/secondary 60% */
    cursor: not-allowed;
  }

  .txt-button img {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* Наследование цвета для SVG иконок через mask */
  .txt-button {
    position: relative;
  }

  .txt-button#menu-download-button img {
    /* Используем mask для наследования цвета */
    mask-image: url('../assets/icons/download.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('../assets/icons/download.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: currentColor;
    /* Скрываем оригинальное изображение, показываем только маску */
    opacity: 1;
    filter: none;
  }

  .txt-button svg {
    width: 16px;
    height: 16px;
    display: block;
    color: inherit;
  }

  .txt-button svg path {
    stroke: currentColor;
    fill: currentColor;
  }

  .topbar__menu-footer .txt-button {
    margin-bottom: 20px;
  }

  .topbar__menu-footer .txt-button:last-child {
    margin-bottom: 0;
  }
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.hero-title {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-32);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-secondary);
}

h1 {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-3);
  text-transform: lowercase;
}

h2 {
  text-transform: lowercase;
}

.caption {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-12);
  line-height: var(--line-height-150);
  color: var(--color-text-secondary);
}

/* =========================================================
   BUTTON
   ========================================================= */

button,
.btn {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--1);
  text-transform: lowercase;
}

/* =========================================================
   MAIN HERO — ONE SCREEN
   ========================================================= */

.main-hero {
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

/* Left column — image */

.main-hero__image {
  position: relative;
}

.main-hero__image img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right column — content */

.main-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-left: 80px;
  padding-right: 80px;
  max-width: 1000px;
}

/* Title */

/* На десктопе overlay скрыт, показываем caption и title из content */
.main-hero__overlay {
  display: none; /* На десктопе overlay скрыт */
}

.main-hero__caption--desktop,
.main-hero__title--desktop {
  display: block; /* На десктопе показываем из content */
}

.main-hero__caption,
.main-hero__title {
  margin: 0;
}

.main-hero__title {
  max-width: 573px;
}

/* Body text */

.main-hero__text {
  margin-top: 24px;
}

.main-hero__text p {
  margin-bottom: 8px;
}

.main-hero__text p:last-child {
  margin-bottom: 0;
}

/* Signature */

.main-hero__signature {
  margin-top: 16px;
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 20px;
}

.main-hero__signature img {
  height: 32px;
}

/* =========================================================
   MAIN HERO — TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 1279px) {
  /* Главная страница - изображение занимает 50% экрана */
  /* Изображение начинается сразу под топбаром, не превышает высоты экрана */
  .main-hero {
    position: fixed;
    top: 60px; /* Начинается сразу под топбаром (высота топбара) */
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 60px); /* Высота экрана минус высота топбара */
    display: grid;
    grid-template-columns: 50% 50%;
  }

  /* Изображение - не превышает высоты экрана */
  .main-hero__image {
    position: relative;
    height: 100%;
    max-height: calc(100vh - 60px);
    overflow: hidden;
  }

  .main-hero__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Правая часть - скроллится, но без полосы скролла */
  .main-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 64px; /* Уменьшено с 80px на 16px */
    padding-right: 80px;
    max-width: 1000px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox - скрываем скроллбар */
    -ms-overflow-style: none; /* IE и Edge - скрываем скроллбар */
    height: 100%;
  }

  /* Скрываем скроллбар в WebKit браузерах */
  .main-hero__content::-webkit-scrollbar {
    display: none;
  }

  /* Текстовый блок (caption + заголовок) на расстоянии 40px от топбара */
  .main-hero__caption--desktop,
  .main-hero__title--desktop {
    display: block;
  }

  .main-hero__caption--desktop {
    margin-top: 40px;
    margin-bottom: 0;
  }

  .main-hero__title--desktop {
    margin-top: 0;
  }

  /* Отступ после подписи автора */
  .main-hero__signature {
    margin-bottom: 20px;
  }

  /* На планшете overlay скрыт */
  .main-hero__overlay {
    display: none;
  }
}

/* =========================================================
   TEXT CARD — TABLET
   ========================================================= */


/* =========================================================
   TABLET — TOPBAR
   ========================================================= */

@media (min-width: 769px) and (max-width: 1279px) {
  /* Topbar - меню занимает 30% экрана при открытии */
  .topbar {
    height: 60px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    
    padding: 0 16px;
    
    background-color: var(--color-bg-main);
    box-shadow: var(--shadow-200);
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }

  /* Author signature - всегда темная на планшете */
  .topbar__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    gap: 0;
    flex: 1;
    max-width: calc(100% - 40px);
  }

  .topbar__author-img--dark {
    display: block !important;
  }

  .topbar__author-img--light {
    display: none !important;
  }

  /* На главной странице - подпись обычного размера */
  body:has(.main-hero) .topbar__author img {
    max-height: 36px;
  }

  /* На других страницах - подпись уменьшена на 25% */
  body:not(:has(.main-hero)) .topbar__author img {
    max-height: 27px;
  }

  /* Навигация с кнопкой возврата и заголовком - скрыта на главной */
  .topbar__nav {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    width: 100%;
    max-width: 100%;
  }

  body:not(:has(.main-hero)) .topbar__nav {
    display: flex;
    margin-top: -8px;
  }

  /* Кнопка возврата - скрыта на главных страницах разделов */
  body:has(.main-hero) .topbar__back,
  body:has(.translations-container) .topbar__back,
  body:has(.texts-container) .topbar__back,
  body:has(.archive-container) .topbar__back,
  body.gallery-page .topbar__back {
    display: none;
  }

  .topbar__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .topbar__back img {
    width: 24px;
    height: 24px;
  }

  .topbar__title {
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-16);
    line-height: var(--line-height-120);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-3);
    text-transform: lowercase;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  /* Заголовок скрыт на главной странице */
  body:has(.main-hero) .topbar__title {
    display: none;
  }

  /* Бургер-меню */
  .topbar__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  .topbar__burger img {
    width: 24px;
    height: 24px;
  }

  /* Меню - выезжает справа, занимает 30% экрана */
  .topbar__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    
    position: fixed;
    top: 0;
    left: 70%; /* Занимает 30% экрана (от 70% до 100%) */
    right: 0;
    bottom: 0;
    
    background-color: var(--color-bg-main);
    padding: 60px 16px 0 16px;
    justify-content: flex-start;
    
    z-index: 30;
    overflow-y: auto;
    
    transform: translateX(100%);
    transition: transform 0.42s ease; /* Ускорено на 30%: 0.6s * 0.7 = 0.42s */
  }

  .topbar__menu--open {
    transform: translateX(0);
  }

  /* Кнопка закрытия меню */
  .topbar__menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 1;
  }

  .topbar__menu-close img {
    width: 24px;
    height: 24px;
  }

  .topbar__menu a {
    font-size: var(--font-size-16);
  }

  .topbar__menu a.active {
    font-weight: 700;
  }

  /* Footer меню с заголовком и кнопками */
  body:has(.translation-content) .topbar__menu-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
    width: 100%;
    padding-bottom: 60px;
  }

  /* Скрываем кнопку "оглавление" на страницах с галереями изображений */
  body:has(.translation-content .gallery-container):not(:has(.table-of-contents__item)) .topbar__menu-footer #menu-toc-button,
  body:has(.table-of-contents__pdf-thumbnails .gallery-thumbnail:not([data-pdf])):not(:has(.table-of-contents__item)) .topbar__menu-footer #menu-toc-button {
    display: none !important;
  }

  .topbar__menu-title {
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-16);
    line-height: var(--line-height-120);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-3);
    text-transform: lowercase;
    color: var(--color-text-primary);
    margin: 0 0 32px 0;
  }

  /* Компонент txt-button */
  .txt-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-14);
    line-height: var(--line-height-100);
    font-weight: 600;
    letter-spacing: var(--letter-spacing--1);
    text-transform: lowercase;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
  }

  .txt-button:hover,
  .txt-button:focus {
    color: var(--color-text-accent-primary);
  }

  .txt-button:active {
    color: var(--color-text-primary);
  }

  .txt-button:disabled {
    color: rgba(145, 128, 110, 0.6);
    cursor: not-allowed;
  }

  .txt-button img {
    width: 16px;
    height: 16px;
    display: block;
  }

  .txt-button#menu-download-button img {
    mask-image: url('../assets/icons/download.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('../assets/icons/download.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: currentColor;
    opacity: 1;
    filter: none;
  }

  .txt-button svg {
    width: 16px;
    height: 16px;
    display: block;
    color: inherit;
  }

  .txt-button svg path {
    stroke: currentColor;
    fill: currentColor;
  }

  .topbar__menu-footer .txt-button {
    margin-bottom: 20px;
  }

  .topbar__menu-footer .txt-button:last-child {
    margin-bottom: 0;
  }
}

/* =========================================================
   MAIN HERO — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .main-hero {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    position: relative;
  }

  .main-hero__image {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 12px;
  }

  .main-hero__image img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .main-hero__content {
    padding: 0 16px;
    margin-top: 0;
    position: static;
  }

  /* На мобильной версии скрываем desktop версии caption и title */
  .main-hero__caption--desktop,
  .main-hero__title--desktop {
    display: none;
  }

  /* Обертка для caption и заголовка - единый блок */
  /* Позиционируется абсолютно на 8px от нижнего края изображения */
  .main-hero__overlay {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    z-index: 2;
    pointer-events: none;
  }

  /* Caption и заголовок в обычном потоке внутри overlay */
  .main-hero__caption,
  .main-hero__title {
    position: static;
    color: var(--color-text-contrast);
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  /* Расстояние между caption и заголовком = 0px */
  .main-hero__caption {
    margin-bottom: 0;
  }

  /* Заголовок */
  .main-hero__title {
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-16);
    line-height: var(--line-height-120);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-3);
    text-transform: lowercase;
    color: var(--color-text-contrast);
  }

  /* Основной текст отступает на 12px от нижнего края фотографии */
  .main-hero__text {
    margin-top: 0;
    position: relative;
    z-index: 1;
  }

  .main-hero__signature {
    margin-top: 20px;
  }

  /* Для экранов меньше 375px (включая 320px) уменьшаем размер заголовка */
  @media (max-width: 374px) {
    .main-hero__title {
      font-size: var(--font-size-14);
    }
  }
}

/* =========================================================
   PAGE CONTENT
   ========================================================= */

.page-content {
  height: 100vh;
  padding-top: 104px;
  padding-left: 40px;
  padding-right: 40px;
  overflow: hidden;
}

.page-content__wrapper {
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-200);
  height: calc(100vh - 104px);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Убираем скролл на странице, скролл только в галерее миниатюр */
}

/* =========================================================
   HEADLINE
   ========================================================= */

.headline {
  height: 68px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headline__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0; /* Позволяет обрезать содержимое */
  flex: 1; /* Занимает доступное пространство */
  overflow: hidden; /* Скрываем переполнение */
}

.headline__title {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-32);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap; /* Запрещаем перенос на новую строку */
  overflow: hidden; /* Скрываем переполнение */
  text-overflow: ellipsis; /* Обрезаем с многоточием */
}

.headline__description {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-3);
  text-transform: lowercase;
  color: var(--color-text-secondary);
  margin: 0;
}

.headline__button {
  background-color: var(--color-text-accent-primary); /* #494037 - NORMAL: темно-коричневый */
  color: var(--color-text-contrast); /* белый текст */
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--1);
  text-transform: lowercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.headline__button:hover {
  background-color: var(--color-text-primary); /* #2c2c2c - HOVER: почти черный */
  color: var(--color-text-contrast); /* белый текст */
}

.headline__button:active {
  background-color: var(--color-bg-light); /* белый фон - PRESSED */
  color: var(--color-text-primary); /* #2c2c2c - темный текст */
}

/* =========================================================
   TEXT BUTTON (txt-button) - общие стили для всех устройств
   ========================================================= */

.txt-button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--1);
  text-transform: lowercase;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.txt-button:hover,
.txt-button:focus {
  color: var(--color-text-accent-primary);
}

.txt-button:active {
  color: var(--color-text-primary);
}

.txt-button:disabled {
  color: rgba(145, 128, 110, 0.6); /* text/secondary 60% */
  cursor: not-allowed;
}

.txt-button img {
  width: 16px;
  height: 16px;
  display: block;
}

/* =========================================================
   TEXT CARD
   ========================================================= */

.text-card {
  background-color: var(--color-bg-main);
  box-shadow: var(--shadow-200);
  border-radius: 8px;
  
  padding: 12px 16px;
  
  width: 272px;
  max-width: 272px;
  min-height: 56px;
  box-sizing: border-box;
  
  transition: box-shadow 0.2s ease;
}

.author-works__grid .text-card {
  cursor: pointer;
}

.text-card:hover {
  box-shadow: var(--shadow-400);
}

.text-card--inactive {
  box-shadow: none;
  cursor: default;
}

.text-card--inactive:hover {
  box-shadow: none;
}

.text-card--inactive .text-card__header,
.text-card--inactive .text-card__description {
  color: var(--color-text-accent-secondary);
  opacity: 0.7;
}

.text-card__header {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-primary);
  margin: 0;
  text-align: left;
}

.text-card__description {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-13);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: 8px;
  text-align: left;
  white-space: pre-line;
  vertical-align: baseline;
}

/* =========================================================
   TEXT CARD — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .text-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* =========================================================
   AUTHORS LIST
   ========================================================= */

/* Список авторов показывается только на странице автора (когда есть .author-works) */
.authors-list {
  display: none;
}

body:has(.author-works) .authors-list {
  display: block;
  position: absolute;
  top: 88px; /* 68px headline + 20px отступ */
  left: 20px;
  width: 288px;
  padding: 0;
  bottom: 0;
  overflow-y: auto;
}

.authors-list__title {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-3);
  text-transform: lowercase;
  color: var(--color-text-secondary);
  margin: 0 0 20px 0;
}

.authors-list__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.authors-list__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* List item styles - общие стили для элементов навигации */
.authors-list__item,
.table-of-contents__item,
.table-of-contents__scene {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-15);
  line-height: var(--line-height-100);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: font-weight 0.2s ease;
}

/* List/hover */
.authors-list__item:hover,
.table-of-contents__item:hover,
.table-of-contents__scene:hover {
  font-weight: 600;
}

/* List/active */
.authors-list__item--active,
.table-of-contents__item--active,
.table-of-contents__scene--active {
  font-weight: 700;
}

/* List/inactive - для авторов без ссылок */
.authors-list__item--inactive {
  color: var(--color-text-accent-secondary);
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

.authors-list__item--inactive:hover {
  font-weight: 400;
}

/* =========================================================
   TRANSLATIONS
   ========================================================= */

/* Translations sidebar - только на десктопе */
/* Кнопка переключения теперь в headline, использует стили .headline__button */

.translations-container {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-400);
  padding: 24px 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 1280px) {
  /* Десктоп - возвращаем отступ текстовой плашки от контентной */
  .translations-container {
    left: 308px; /* 20px отступ + 288px ширина authors-list (если есть) */
  }
}

/* Author works section (on author page) */
.author-works {
  position: absolute;
  top: 68px;
  left: 328px; /* 20px (левый отступ) + 288px (ширина списка) + 20px (расстояние) */
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-400);
  padding: 20px;
  overflow-y: auto;
}

/* Когда нет списка авторов, плашка начинается с отступа 308px (как texts-container) */
body.no-authors-list .author-works {
  left: 308px;
}

.author-works__title {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-3);
  text-transform: lowercase;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
}

.author-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 272px);
  gap: 8px;
  align-content: start;
}

/* =========================================================
   BACK TO TRANSLATIONS BUTTON
   ========================================================= */

.back-to-translations {
  position: fixed;
  top: 84px; /* 76px (высота топбара) + 8px отступ от края экрана */
  left: 40px; /* 40px от левого края экрана */
  display: flex;
  align-items: center;
  gap: var(--space-4); /* 4px расстояние между иконкой и текстом */
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-120);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-secondary); /* NORMAL: светлый, приглушенный */
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
  z-index: 10; /* Чтобы кнопка была поверх других элементов */
}

.back-to-translations:hover {
  color: var(--color-text-accent-primary); /* HOVER: средний коричневый */
}

.back-to-translations:active {
  color: var(--color-text-primary); /* PRESSED: темный, почти черный */
}

.back-to-translations img {
  width: 16px;
  height: 16px;
  display: block;
  transition: filter 0.2s ease;
  /* Фильтр для цвета #91806e (--color-text-secondary) в нормальном состоянии */
  filter: brightness(0) saturate(100%) invert(58%) sepia(18%) saturate(845%) hue-rotate(347deg) brightness(91%) contrast(88%);
}

.back-to-translations:hover img {
  /* Фильтр для цвета #494037 (--color-text-accent-primary) при наведении */
  filter: brightness(0) saturate(100%) invert(26%) sepia(11%) saturate(1326%) hue-rotate(347deg) brightness(95%) contrast(90%);
}

.back-to-translations:active img {
  /* Фильтр для цвета #2c2c2c (--color-text-primary) при нажатии */
  filter: brightness(0) saturate(100%) invert(14%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(94%) contrast(88%);
}

/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.table-of-contents {
  display: none;
}

body:has(.translation-content) .table-of-contents {
  display: block;
  position: absolute;
  top: 88px; /* 68px headline + 20px отступ */
  left: 20px;
  bottom: 0; /* Растягиваем до низа */
  width: 288px;
  overflow-y: auto; /* Скролл только внутри оглавления */
  overflow-x: hidden;
  padding-right: 32px; /* Отступ для скроллбара */
}

/* Для страниц с галереей миниатюр (без текстового оглавления) - скролл только в галерее */
body:has(.table-of-contents__pdf-thumbnails):not(:has(.table-of-contents__item)) .table-of-contents {
  overflow-y: auto !important; /* Скролл только в галерее миниатюр */
  overflow-x: hidden !important;
}

/* Убираем скролл на странице для страниц с галереей миниатюр */
body:has(.table-of-contents__pdf-thumbnails):not(:has(.table-of-contents__item)) {
  overflow: hidden !important; /* Убираем скролл на body */
  height: 100vh !important; /* Фиксированная высота */
}

body:has(.table-of-contents__pdf-thumbnails):not(:has(.table-of-contents__item)) .page-content {
  overflow: hidden !important; /* Убираем скролл на page-content */
}

body:has(.table-of-contents__pdf-thumbnails):not(:has(.table-of-contents__item)) .page-content__wrapper {
  overflow: hidden !important; /* Убираем скролл на page-content__wrapper */
}

  /* Скрываем текстовое оглавление на странице для страниц с галереями и текстовым оглавлением (оформление как пьеса) */
  /* Но показываем его в меню */
body:has(.translation-content .gallery-container):has(.table-of-contents__item) .table-of-contents:not(.table-of-contents--in-menu) {
  display: block !important;
  width: 288px; /* Возвращаем исходную ширину */
  /* Добавляем правый padding 32px, чтобы скроллбар был на расстоянии 32px от правого края миниатюр */
  padding: 0 32px 0 0;
  bottom: 0;
  overflow-y: auto;
}

/* Кастомный скроллбар для table-of-contents */
body:has(.translation-content) .table-of-contents::-webkit-scrollbar {
  width: 4px;
}

body:has(.translation-content) .table-of-contents::-webkit-scrollbar-track {
  background: transparent;
  margin-right: 0;
}

body:has(.translation-content) .table-of-contents::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 4px;
}

/* Для Firefox */
body:has(.translation-content) .table-of-contents {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}

/* Кнопка "вернуться к меню" скрыта на десктопе */
.table-of-contents__back {
  display: none;
}

/* Оглавление внутри меню на десктопе - должно отображаться даже для страниц с галереями */
.topbar__menu .table-of-contents,
body:has(.translation-content .gallery-container):has(.table-of-contents__item) .topbar__menu .table-of-contents {
  display: block !important;
  position: static !important;
  width: 100%;
  padding: 0 16px;
  margin: 0;
  margin-top: 60px;
  background: none;
  box-shadow: none;
  overflow-y: visible;
  max-width: none;
  min-width: 0;
}

.table-of-contents__title {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-3);
  text-transform: lowercase;
  color: var(--color-text-secondary);
  margin: 0 0 20px 0;
}

.table-of-contents__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Стили для .table-of-contents__item теперь в общем блоке выше */

/* Группа сцен в оглавлении */
.table-of-contents__group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-8) / 4);
  margin-left: 20px; /* Отступ для вложенных элементов */
  margin-top: calc(var(--space-8) / 2 * -1); /* Уменьшаем расстояние от акта до первой сцены */
}

/* Стили для .table-of-contents__scene теперь в общем блоке выше */

/* PDF миниатюры в оглавлении - используем стили галереи */
.table-of-contents__pdf-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Такой же gap, как в gallery-thumbnails */
  /* Убираем правый padding, так как padding-right 32px теперь у родительского .table-of-contents */
  /* Это обеспечивает расстояние 32px от правого края миниатюр до скроллбара */
  padding: 6px 0 6px 6px; /* Убрали правый padding (было 14px), чтобы скролл был на расстоянии 32px от миниатюр */
  overflow: visible; /* Скролл на родителе .table-of-contents, не здесь */
}

/* Используем стили галереи для миниатюр в оглавлении */
.table-of-contents__pdf-thumbnails .gallery-thumbnail {
  aspect-ratio: 0.707; /* Соотношение сторон A4 для страниц (портретная) */
  width: 128px; /* Максимальная ширина 128px */
  max-width: 128px; /* Не превышаем 128px */
  flex-shrink: 0;
}

.table-of-contents__pdf-thumbnails .gallery-thumbnail__inner img {
  object-fit: contain; /* Показываем всю страницу без обрезки */
}

/* Gallery thumbnails (not PDF) - keep square aspect ratio */
.table-of-contents__pdf-thumbnails .gallery-thumbnail:not([data-pdf]) {
  aspect-ratio: 1; /* Square for gallery images */
}

.table-of-contents__pdf-thumbnails .gallery-thumbnail:not([data-pdf]) .gallery-thumbnail__inner img {
  object-fit: cover; /* Cover for gallery images */
}

/* PDF gallery container */
.pdf-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
}

/* Миниатюры для мобильной версии (скрыты на десктопе) */
.pdf-thumbnails-mobile {
  display: none;
}

/* PDF viewer */
.pdf-viewer {
  max-width: 100%; /* Не превышаем ширину контейнера */
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  overflow: hidden;
  overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Масштабируем PDF viewer, чтобы он помещался в контейнер */
  transform-origin: top left;
}

/* Ширина PDF viewer равна максимальной ширине текстового блока, выровнен по правому краю с отступом 20px */
.translation-content .pdf-viewer,
.translation-content .pdf-gallery-container .pdf-viewer {
  max-width: 888px !important;
  width: 888px !important;
  margin-left: auto !important;
  margin-right: 20px !important;
  overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
}

/* Убираем фон у translation-content когда внутри есть PDF viewer */
.translation-content:has(.pdf-viewer) {
  background-color: transparent !important;
  box-shadow: none !important;
  background-image: none !important;
  padding: 20px !important; /* Возвращаем padding для правильного отступа */
  overflow-x: hidden !important; /* Скрываем горизонтальный скролл */
  overflow-y: hidden !important; /* Скрываем вертикальный скролл для PDF viewer */
  /* Кастомный скроллбар для translation-content с PDF viewer */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

.translation-content:has(.pdf-viewer)::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:start:decrement,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:end:increment,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:vertical:start:decrement,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:vertical:end:increment,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:horizontal:start:decrement,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:horizontal:end:increment,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:vertical:start,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:vertical:end,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:horizontal:start,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:horizontal:end,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:single-button,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:double-button,
.translation-content:has(.pdf-viewer)::-webkit-scrollbar-button:no-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.translation-content:has(.pdf-viewer)::-webkit-scrollbar-track {
  background: transparent !important;
}

 .translation-content:has(.pdf-viewer)::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb-color) !important;
   border-radius: 4px !important;
 }

 .translation-content:has(.pdf-viewer)::-webkit-scrollbar-thumb:hover,
 .translation-content:has(.pdf-viewer)::-webkit-scrollbar-thumb:active,
 .translation-content:has(.pdf-viewer)::-webkit-scrollbar-thumb:focus {
   background-color: #91806e !important; /* accent-light - цвет кнопки secondary в состоянии normal */
   background: #91806e !important;
   border-radius: 4px !important;
   opacity: 1 !important;
   filter: none !important;
   -webkit-filter: none !important;
 }

.pdf-viewer__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important; /* Запрещаем горизонтальный скролл в iframe */
}

#pdf-viewer-frame {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
}

/* Скрываем панель инструментов PDF через CSS если возможно */
iframe[src*=".pdf"],
object[data*=".pdf"] {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  margin: 0;
  padding: 0;
}

/* Убираем фон у всех вложенных элементов PDF viewer */
.pdf-viewer *,
.pdf-viewer object,
.pdf-viewer embed,
.pdf-viewer iframe {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* Убираем стандартный скроллбар у iframe внутри PDF viewer */
#pdf-viewer-frame::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#pdf-viewer-frame {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* =========================================================
   TRANSLATION CONTENT
   ========================================================= */

.translation-content {
  position: absolute !important;
  top: 68px !important;
  /* table-of-contents имеет ширину 288px + padding-right 32px = 320px, начинается на 20px */
  /* translation-content должен начинаться на 340px (20px + 288px + 32px) */
  left: 340px !important; /* Было 308px, теперь 340px: 20px (left) + 288px (width) + 32px (padding-right) */
  right: 20px !important;
  bottom: 0 !important;
  background-color: var(--color-bg-light) !important;
  box-shadow: var(--shadow-400) !important;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
}

.translation-text {
  max-width: 888px; /* Максимальная ширина текстового блока */
}

@media (max-width: 768px) {
  .translation-text {
    max-width: none !important;
  }
}

/* Author introduction block - шаблон для авторского вступления */
.author-intro {
  /* Блок авторского вступления - шаблон */
  display: block;
}

/* Location and characters block - шаблон для места действия и действующих лиц */
.location-and-characters {
  margin-top: 52px; /* 52px отступ от предыдущего блока */
  display: block;
}

/* Убираем отступ сверху, если location-and-characters является первым элементом в translation-text */
.translation-text > .location-and-characters:first-child {
  margin-top: 0;
}

.location-and-characters__table {
  width: 100%;
  border-collapse: collapse;
  border: none; /* Нет видимых границ */
  margin-bottom: 12px; /* 12px отступ от таблицы до следующего элемента */
  table-layout: fixed; /* Фиксированная раскладка таблицы для одинакового расстояния между колонками */
}

.location-and-characters__table td {
  font-family: var(--font-vollkorn); /* Текстовый стиль body */
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary); /* Цвет текста primary */
  padding: 4.8px 0; /* 4.8px сверху и снизу (увеличено на 20% с 4px) */
  border: none;
  vertical-align: middle; /* Выравнивание по вертикали */
  text-align: left; /* Выравнивание по горизонтали */
}

.location-and-characters__table td:first-child {
  width: 40%; /* Фиксированная ширина первой колонки */
  padding-right: 6px; /* Расстояние между колонками (уменьшено на 50%) */
}

.location-and-characters__table td:last-child {
  width: 60%; /* Фиксированная ширина второй колонки */
  padding-left: 0; /* Убираем левый отступ у второй колонки */
}

/* В десктопной версии выравниваем описания персонажей по той же линии, что и реплики */
@media (min-width: 1280px) {
  .location-and-characters__table td:first-child {
    width: 172px; /* Та же ширина, что и у имени персонажа в репликах (.act-block .dialogue-character) */
    padding-right: 12px; /* Такое же расстояние, как margin-right у имени персонажа в репликах */
  }

  .location-and-characters__table td:last-child {
    width: auto; /* Автоматическая ширина для второй колонки */
    padding-left: 0; /* Убираем левый отступ у второй колонки */
  }
}

.location-and-characters__table tr {
  border: none;
}

/* Уменьшаем расстояние между именами персонажей в группе (когда используется rowspan) */
/* Строки группы имеют только одну колонку (td), так как вторая колонка объединена через rowspan */
/* Используем селектор для td, который является единственным дочерним элементом tr (без colspan) */
/* Это строки, которые идут после первой строки группы с rowspan */
.location-and-characters__table tr td:only-child:not([colspan]) {
  padding-top: 1px !important; /* Уменьшаем верхний padding еще на 50% (было 2px, стало 1px) - уменьшает расстояние от предыдущей строки */
  padding-bottom: 1px !important; /* Уменьшаем нижний padding для сохранения компактности группы */
}

/* Уменьшаем padding-bottom у первой колонки в строках с rowspan (для группировки с последующими строками) */
.location-and-characters__table tr:has(td[rowspan]) td:first-child {
  padding-bottom: 1px !important; /* Уменьшаем нижний padding еще на 50% (было 2px, стало 1px) */
}

.location-and-characters__location {
  margin-top: 0; /* Отступ задается через margin-bottom таблицы */
  margin-bottom: 0;
  /* Остальные стили наследуются из общих стилей body text */
}

/* Общие стили для заголовков h2 в блоках перевода */
.author-intro h2,
.translation-text h2,
.location-and-characters h2 {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-15);
  line-height: var(--line-height-100);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-primary);
  margin: 0 0 20px 0; /* 20px от заголовка до следующего элемента */
}

.author-intro h2:first-child,
.translation-text h2:first-child,
.location-and-characters h2:first-child {
  margin-top: 0;
}

/* Отступы между разделами на странице evenings.html - в 2 раза больше, чем между актами (52px * 2 = 104px) */
.translation-text > section:not(:first-of-type) {
  margin-top: 104px;
}

/* Отступ от section до следующего h2 (заголовка раздела, который является прямым ребенком) */
.translation-text section + h2[id] {
  margin-top: 104px;
}

/* Отступ от h2 (заголовка раздела, который является прямым ребенком) до следующего section */
.translation-text > h2[id] + section {
  margin-top: 104px;
}

/* Отступ между h2 (заголовками разделов, которые являются прямыми детьми) */
.translation-text > h2[id] + h2[id] {
  margin-top: 104px;
}

/* Отступ для h2 раздела, который следует после других элементов */
/* Это покрывает случай, когда между разделами есть текст (параграфы и т.д.) */
/* Применяем только к h2 с id, которые не являются первыми дочерними элементами */
.translation-text > h2[id]:not(:first-child) {
  margin-top: 104px;
}

/* Стили для заголовков "Вечер ..." - H2 стиль с цветом text/accent secondary */
.evening-heading {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-15);
  line-height: var(--line-height-100);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-secondary);
  margin: 0 0 8px 0; /* 8px между подзаголовком и текстом (как у сцен) */
}

/* Отступ между вечерами внутри раздела - 20px (как между сценами) */
.evening-heading:not(:first-of-type) {
  margin-top: 20px;
}

/* Body text style - общие стили для всех текстовых блоков */
.translation-text p,
.author-intro p,
.location-and-characters__location {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  text-align: left;
}

.translation-text p:last-child,
.author-intro p:last-child {
  margin-bottom: 0;
}

/* Quote style */
.translation-quote {
  margin: 20px 0; /* 20px от заголовка до цитаты, 20px от цитаты до основного текста */
  text-align: right; /* По умолчанию выравнивание по правому краю (для цитаты Фета) */
}

/* Убираем нижний отступ у последней цитаты в разделе, чтобы отступ до следующего заголовка вечера был только от margin-top заголовка (20px) */
.translation-text section .translation-quote:last-child,
.translation-text > .translation-quote:last-child {
  margin-bottom: 0;
}

/* Цитаты без автора выравниваются по левому краю */
.translation-quote--left {
  text-align: left;
}

.translation-quote__text {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-14);
  line-height: var(--line-height-140); /* 140% межстрочный интервал - такой же как в цитате Фета */
  font-weight: 400;
  font-style: italic; /* Курсив для цитаты */
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0 0 8px 0; /* 8px между текстом цитаты и автором */
  padding: 0;
  white-space: pre-line; /* Используем переводы строк как в цитате Фета */
}

/* Убираем отступы параграфов внутри цитат */
.translation-quote__text p {
  margin: 0;
  padding: 0;
  line-height: var(--line-height-140);
}

/* Убираем лишние отступы после br - br должен иметь такой же line-height как и текст */
.translation-quote__text br {
  line-height: var(--line-height-140);
}

.translation-quote__author {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  font-style: italic; /* Курсив для автора цитаты */
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0;
}

/* Character names and stage directions */
.translation-text strong {
  font-weight: 600;
  display: block;
  margin-top: 16px;
  margin-bottom: 8px;
}

.translation-text em {
  font-style: italic;
  display: block;
  margin: 8px 0;
}

/* =========================================================
   ACT BLOCK
   ========================================================= */

.act-block {
  margin-top: 52px; /* Отступ от предыдущего блока */
}

.act-block:first-child {
  margin-top: 52px; /* Отступ от предыдущего блока (location-and-characters) */
}

/* Заголовок акта (АКТ I) - стиль H1 */
.act-block h1 {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-3);
  text-transform: lowercase;
  color: var(--color-text-primary);
  margin: 0 0 20px 0; /* 20px между заголовком и подзаголовком */
}

/* Подзаголовок сцены (Сцена 1) - стиль H2 */
.act-block h2 {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-15);
  line-height: var(--line-height-100);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-secondary);
  margin: 0 0 8px 0; /* 8px между подзаголовком и текстом */
}

/* Отступ между сценами - 20px */
.act-block h2:not(:first-of-type) {
  margin-top: 20px;
}

/* Текст - стиль body */
.act-block p {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  text-align: left;
}

.act-block p:last-child {
  margin-bottom: 0;
}

/* Ремарки - стиль quote */
.act-block .stage-direction {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-14);
  line-height: var(--line-height-140);
  font-weight: 400;
  font-style: italic;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
  text-align: left;
}

.act-block .stage-direction:last-child {
  margin-bottom: 0;
}

/* Имена персонажей - стиль list/hover (старый стиль, оставлен для совместимости) */
.act-block .character-name {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  display: block;
  margin: 16px 0 8px 0;
}

/* Блоки реплик персонажей */
.act-block .dialogue-block {
  margin: 0 0 16px 0;
}

.act-block .dialogue-block:last-child {
  margin-bottom: 0;
}

.act-block .dialogue-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.act-block .dialogue-line:last-child {
  margin-bottom: 0;
}

.act-block .dialogue-character {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin-right: 12px;
  flex-shrink: 0;
  width: 172px;
}

.act-block .dialogue-text {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  text-align: left;
  flex: 1;
}

.act-block .dialogue-text .stage-direction {
  font-style: italic;
}

.translations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.translations-group {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.translations-group__header {
  display: none;
}

.translations-group__cards {
  display: grid;
  grid-template-columns: repeat(3, 272px);
  gap: 8px;
  flex: 1;
  width: 100%;
  justify-content: start;
}

.translations-group .text-card {
  cursor: pointer;
}

.translations-group .text-card--inactive {
  cursor: default;
}

.translations-group .text-card--inactive .text-card__header,
.translations-group .text-card--inactive .text-card__description {
  opacity: 0.7;
}

/* Translations by date list */
.translations-by-date-list {
  display: none; /* Hidden by default, shown via JavaScript when needed */
  flex-direction: column;
  gap: 16px;
}

.translations-by-date-item {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-16);
  line-height: var(--line-height-150);
  color: var(--color-text-primary);
}

.translations-by-date__author {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-primary);
}

.translations-by-date__title {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-primary);
}

.translations-by-date__year {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-14);
  line-height: var(--line-height-120);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-accent-primary);
}

.translations-by-date__type {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-13);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-secondary);
}

.translations-by-date__note {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-13);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-secondary);
}

.translations-by-date-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.translations-by-date-item a:hover .translations-by-date__author,
.translations-by-date-item a:hover .translations-by-date__title,
.translations-by-date-item a:hover .translations-by-date__year {
  color: var(--color-text-accent-primary);
}

.translations-by-date-item--inactive {
  cursor: default;
}

.translations-by-date-item--inactive .translations-by-date__author,
.translations-by-date-item--inactive .translations-by-date__title,
.translations-by-date-item--inactive .translations-by-date__year,
.translations-by-date-item--inactive .translations-by-date__type,
.translations-by-date-item--inactive .translations-by-date__note {
  color: var(--color-text-accent-secondary);
  opacity: 0.7;
}

/* =========================================================
   AUTHOR TEXTS
   ========================================================= */

.texts-container {
  position: absolute;
  top: 68px;
  left: 308px;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-400);
  padding: 24px 20px;
  overflow-y: auto;
}

.texts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.texts-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.texts-section:not(:first-child) {
  margin-top: 40px;
}

.texts-section__header {
  font-family: var(--font-vollkorn-sc);
  font-size: var(--font-size-16);
  line-height: var(--line-height-100);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-0);
  text-transform: lowercase;
  color: var(--color-text-secondary);
  margin: 0 0 20px 0;
}

.texts-section__cards {
  display: grid;
  grid-template-columns: repeat(3, 272px);
  gap: 8px;
  justify-content: start;
}

.texts-container .text-card {
  height: 76px;
  cursor: pointer;
}

/* =========================================================
   TEXT CARD — TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 1279px) {
  /* Позиционирование контейнера переводов на планшете */
  .translations-container {
    position: absolute !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--color-bg-light) !important;
    box-shadow: var(--shadow-400) !important;
    padding: 24px 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Карточки - те же размеры, что на десктопе (272px) */
  .text-card {
    width: 272px;
    max-width: 272px;
    box-sizing: border-box;
    height: 100%; /* Карточки растягиваются по высоте */
  }

  /* Разрешаем перенос заголовков на другую строку */
  .text-card__header {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* Grid для карточек - 3 в строку, одинаковой высоты */
  /* Расстояние между карточками в строке = 8px */
  /* Используем те же размеры, что на десктопе */
  /* Только если ширина экрана позволяет разместить 3 карточки (272px * 3 + 8px * 2 + padding) */
  /* Минимум: 272px * 3 + 8px * 2 + 40px (padding) = 872px */
  .author-works__grid,
  .translations-group__cards,
  .texts-section__cards {
    display: grid !important;
    grid-template-columns: repeat(3, 272px) !important;
    gap: 8px !important;
    column-gap: 8px !important; /* Расстояние между колонками (карточками в строке) */
    row-gap: 8px !important; /* Расстояние между строками */
    align-items: stretch !important; /* Все карточки одинаковой высоты */
  }
  

  /* Переопределяем flex для translations-group на планшете */
  /* Убираем !important, чтобы JavaScript мог управлять display */
  .translations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Список по дате - разрешаем показ на планшетах (управляется через JavaScript) */
  .translations-by-date-list {
    display: none; /* По умолчанию скрыт, показывается через JavaScript */
  }

  .translations-group {
    display: block !important;
  }

  /* Контейнеры - логика как на десктопе, но без authors-list */
  /* authors-list скрыт на планшете, поэтому контейнеры занимают всю ширину */
  .authors-list {
    display: none !important;
  }

  .author-works {
    position: absolute !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--color-bg-light) !important;
    box-shadow: var(--shadow-400) !important;
    padding: 20px !important; /* 20px по бокам */
    overflow-y: auto !important;
  }

  .translations-container {
    position: absolute !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--color-bg-light) !important;
    box-shadow: var(--shadow-400) !important;
    padding: 24px 20px !important; /* 20px по бокам */
    container-type: inline-size; /* Включаем контейнерные запросы */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .texts-container {
    position: absolute !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--color-bg-light) !important;
    box-shadow: var(--shadow-400) !important;
    padding: 24px 20px !important; /* 20px по бокам */
    overflow-y: auto !important;
    container-type: inline-size; /* Включаем контейнерные запросы */
  }
  
  .author-works {
    container-type: inline-size; /* Включаем контейнерные запросы */
  }

  /* Убираем фиксированную высоту карточек в texts-container для планшета */
  .texts-container .text-card {
    height: auto !important;
    min-height: 76px;
  }
}

/* Если ширина контентной плашки меньше 872px, карточки выстраиваются в одну колонку */
/* Используем контейнерные запросы для проверки ширины контентной плашки */
/* Расчет: 272px * 3 + 8px * 2 + 20px * 2 = 872px */
@container (max-width: 871px) {
  .author-works__grid,
  .translations-group__cards,
  .texts-section__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .text-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Fallback для браузеров без поддержки контейнерных запросов */
/* Контентная плашка занимает всю ширину экрана (left: 0, right: 0), padding 20px с каждой стороны */
/* Ширина контента = viewport - 40px */
/* Для контента 872px нужен viewport = 912px */
/* Но учитывая возможные погрешности, используем более консервативный порог */
@media (min-width: 769px) and (max-width: 920px) {
  /* Если контейнерные запросы не поддерживаются, используем медиа-запрос */
  @supports not (container-type: inline-size) {
    .author-works__grid,
    .translations-group__cards,
    .texts-section__cards {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }
    
    .text-card {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  /* =========================================================
     GALLERY — TABLET
     ========================================================= */

  /* Ограничиваем ширину gallery-container на планшете: max-width 888px, прижимаем к правому краю */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container {
    max-width: 888px !important; /* Ширина равна ширине текстового блока в переводах пьес */
    width: 888px !important; /* Фиксированная ширина как у текстового блока */
    margin-left: auto !important; /* Прижимаем к правому краю */
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
  }

  /* Ограничиваем ширину gallery-container на планшете БЕЗ table-of-contents: max-width 888px, прижимаем к правому краю */
  body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container {
    max-width: 888px !important; /* Ширина равна ширине текстового блока в переводах пьес */
    width: 888px !important; /* Фиксированная ширина как у текстового блока */
    margin-left: auto !important; /* Прижимаем к правому краю */
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
  }

  /* Ограничиваем ширину изображения, чтобы оно не превышало ширину контейнера */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Ограничиваем ширину изображения, чтобы оно не превышало ширину контейнера (WITHOUT table-of-contents) */
  body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container .gallery-main__image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important; /* Убираем object-fit, чтобы изображение масштабировалось по ширине */
    box-sizing: border-box !important;
    display: block !important;
  }

  body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important; /* Убираем object-fit, чтобы изображение масштабировалось по ширине */
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Для страниц БЕЗ миниатюр на планшете - кнопки справа (как на десктопе) */
  /* Не переопределяем flex-direction, оставляем как на десктопе (column) */
  body:has(.table-of-contents):not(.gallery-page):not(:has(.table-of-contents__pdf-thumbnails:not(:has(.gallery-thumbnail:only-child)))) .translation-content .gallery-container .gallery-main__controls {
    justify-content: flex-end !important; /* Кнопки справа */
  }

  /* Убеждаемся, что кнопки навигации видны на планшете */
  .gallery-main__navigation {
    display: flex !important;
  }

  /* =========================================================
     GALLERY THUMBNAILS — TABLET
     ========================================================= */

  /* Gallery thumbnails in table-of-contents on tablet - вертикально (как в десктопной версии) */
  .table-of-contents__pdf-thumbnails {
    flex-direction: column !important; /* Вертикально, как на десктопе */
    gap: 16px !important; /* Как на десктопе */
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Вертикальная прокрутка */
    padding: 6px 0 6px 6px !important; /* Как на десктопе */
  }

  /* Скрываем галерею миниатюр, если там только одно изображение */
  .table-of-contents__pdf-thumbnails:has(.gallery-thumbnail:only-child) {
    display: none !important;
  }

  /* Скрываем все галереи миниатюр на планшетной версии, кроме gallery.html */
  body:not(.gallery-page) .table-of-contents__pdf-thumbnails {
    display: none !important;
  }

  /* Миниатюры на планшете - ширина 128px */
  .table-of-contents__pdf-thumbnails .gallery-thumbnail {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex-shrink: 0 !important;
  }

  /* Keep old selector for backward compatibility */
  .gallery-thumbnails {
    flex-direction: column !important; /* Вертикально, как на десктопе */
    width: auto !important;
    gap: 16px !important; /* Как на десктопе */
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Вертикальная прокрутка */
    padding: 6px 14px 6px 6px !important; /* Как на десктопе */
  }

  /* Скрываем .gallery-thumbnails на планшете, если есть .table-of-contents__pdf-thumbnails */
  body:has(.table-of-contents__pdf-thumbnails) .gallery-thumbnails {
    display: none !important;
  }

  .gallery-thumbnail {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex-shrink: 0 !important;
  }

  /* Контур активного изображения в галерее миниатюр на планшете */
  .gallery-thumbnail.active,
  .table-of-contents__pdf-thumbnails .gallery-thumbnail.active,
  .gallery-thumbnails .gallery-thumbnail.active,
  .pdf-thumbnails-mobile .gallery-thumbnail.active {
    box-shadow: 0 0 0 4px var(--color-bg-light), 0 0 0 6px var(--color-accent-light) !important;
    z-index: 1 !important;
    position: relative !important; /* Для правильного отображения box-shadow */
  }

  /* Убеждаемся, что контейнеры миниатюр имеют достаточный padding для box-shadow (6px) */
  .table-of-contents__pdf-thumbnails {
    padding: 6px 12px 6px 6px !important; /* Увеличиваем правый padding для box-shadow */
  }

  .gallery-thumbnails {
    padding: 6px 12px 6px 6px !important; /* Увеличиваем правый padding для box-shadow */
  }

  .pdf-thumbnails-mobile {
    padding: 6px 12px 6px 6px !important; /* Увеличиваем правый padding для box-shadow */
  }

  /* PDF thumbnails mobile на планшете - вертикально, ширина 128px */
  .pdf-thumbnails-mobile {
    display: flex !important;
    flex-direction: column !important; /* Вертикально, как на десктопе */
    gap: 16px !important; /* Как на десктопе */
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Вертикальная прокрутка */
    padding: 6px 14px 6px 6px !important;
    width: auto !important;
    order: 1 !important;
  }

  /* Скрываем .pdf-thumbnails-mobile на планшете, если есть .table-of-contents__pdf-thumbnails */
  body:has(.table-of-contents__pdf-thumbnails) .pdf-thumbnails-mobile {
    display: none !important;
  }

  .pdf-thumbnails-mobile .gallery-thumbnail {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 0.707 !important; /* Портретная ориентация по умолчанию */
  }

  .pdf-thumbnails-mobile .gallery-thumbnail.gallery-thumbnail--landscape {
    aspect-ratio: 1.414 !important; /* Альбомная ориентация */
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }

  .pdf-thumbnails-mobile .gallery-thumbnail__inner img {
    object-fit: contain !important;
  }

  /* =========================================================
     TABLE OF CONTENTS — TABLET
     ========================================================= */

  /* Уменьшаем ширину оглавления, чтобы освободить место для текстовой плашки */
  /* На десктопе: оглавление занимает 340px (20px left + 288px width + 32px padding-right) */
  /* На планшете: translation-content должен начинаться на 184px (340px - 156px) */
  /* Нужен минимум 16px отступ от оглавления, значит оглавление должно заканчиваться на 168px (184px - 16px) */
  /* Оглавление начинается на 20px, значит его ширина: 168px - 20px = 148px */
  body:has(.translation-content) .table-of-contents {
    width: 148px !important; /* Рассчитано: 184px (left translation-content) - 16px (отступ) - 20px (left оглавления) */
    max-width: 148px !important;
    padding-right: 0 !important; /* Убираем padding-right для экономии места */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Скрываем переполнение */
  }

  /* Оглавления, которые не помещаются на контекстной плашке, обрезаем с многоточием */
  .table-of-contents__item,
  .table-of-contents__scene {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Убеждаемся, что элементы оглавления не выходят за границы контейнера */
  .table-of-contents__nav {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* =========================================================
     TRANSLATION CONTENT — TABLET
     ========================================================= */

  /* Уменьшаем отступ текстовой плашки от контентной плашки на 156px */
  /* На десктопе: left: 340px (20px + 288px + 32px) */
  /* На планшете: left: 340px - 156px = 184px */
  /* Минимальный отступ 16px от оглавления: 20px (left оглавления) + 148px (width оглавления) + 16px = 184px */
  .translation-content {
    left: 184px !important; /* Уменьшено на 156px от десктопной версии (340px - 156px) */
  }
}

/* =========================================================
   GALLERY
   ========================================================= */

.gallery-container {
  position: absolute;
  top: 68px;
  left: 308px;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 32px;
  padding: 40px 40px 40px 20px;
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-400);
  overflow-y: auto;
}

/* Gallery container inside translation-content (content panel) */
.translation-content .gallery-container {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  overflow-y: visible;
}

/* Gallery container inside translation-content when there's a table-of-contents (excludes gallery.html) */
body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container {
  max-width: 888px; /* Ширина равна ширине текстового блока в переводах пьес */
  width: 888px; /* Фиксированная ширина как у текстового блока */
  margin-left: auto; /* Прижимаем к правому краю */
  margin-right: 0;
  overflow-x: hidden; /* Запрещаем горизонтальный скролл */
  overflow-y: visible; /* Не скроллим контейнер, скроллится только изображение */
  min-height: 100%; /* Минимальная высота, но может расти */
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

/* Gallery container inside translation-content WITHOUT table-of-contents (excludes gallery.html) */
body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container {
  max-width: 888px; /* Ширина равна ширине текстового блока в переводах пьес */
  width: 888px; /* Фиксированная ширина как у текстового блока */
  margin-left: auto; /* Прижимаем к правому краю */
  margin-right: 0;
  overflow-x: hidden; /* Запрещаем горизонтальный скролл */
  overflow-y: visible; /* Не скроллим контейнер, скроллится только изображение */
  min-height: 100%; /* Минимальная высота, но может расти */
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

/* Gallery main inside translation-content with table-of-contents */
body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0; /* Убираем фиксированную высоту, чтобы изображение могло быть любой высоты */
  overflow: visible; /* Убираем overflow: hidden, чтобы не ограничивать высоту */
}

/* Gallery main inside translation-content WITHOUT table-of-contents */
body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container .gallery-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0; /* Убираем фиксированную высоту, чтобы изображение могло быть любой высоты */
  overflow: visible; /* Убираем overflow: hidden, чтобы не ограничивать высоту */
}

/* Для страниц БЕЗ миниатюр - кнопки уже сверху в HTML, не нужно column-reverse */

/* Image wrapper - full width, vertical scroll */
body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image-wrapper {
  width: 100%;
  display: block; /* Изменяем с flex на block, чтобы изображение занимало всю ширину */
  background-color: var(--color-bg-main);
  border-radius: 4px;
  overflow-x: hidden;
  overflow-y: auto; /* Вертикальный скролл по изображению */
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Скролл только на область изображения, высота не ограничена */
}

/* Image wrapper - full width, vertical scroll (WITHOUT table-of-contents) */
body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container .gallery-main__image-wrapper {
  width: 100%;
  display: block; /* Изменяем с flex на block, чтобы изображение занимало всю ширину */
  background-color: var(--color-bg-main);
  border-radius: 4px;
  overflow-x: hidden;
  overflow-y: auto; /* Вертикальный скролл по изображению */
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Скролл только на область изображения, высота не ограничена */
}

/* Image - full width of container, масштабируется пропорционально по ширине */
body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
  width: 100% !important; /* Занимает всю ширину вьюпорта (888px) */
  height: auto !important; /* Высота подстраивается пропорционально ширине */
  max-height: none !important; /* Убираем ограничение по высоте */
  object-fit: unset !important; /* Убираем object-fit, чтобы изображение масштабировалось пропорционально */
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}

/* Image - full width of container, масштабируется пропорционально по ширине (WITHOUT table-of-contents) */
body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
  width: 100% !important; /* Занимает всю ширину вьюпорта (888px) */
  height: auto !important; /* Высота подстраивается пропорционально ширине */
  max-height: none !important; /* Убираем ограничение по высоте */
  object-fit: unset !important; /* Убираем object-fit, чтобы изображение масштабировалось пропорционально */
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}

/* Thumbnails Column */
.gallery-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 6px 14px 6px 6px;
}

.gallery-thumbnail {
  width: 128px; /* Максимальная ширина 128px */
  max-width: 128px; /* Не превышаем 128px */
  aspect-ratio: 1;
  border: 1px solid var(--color-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  background-color: var(--color-bg-main);
  position: relative;
  flex-shrink: 0;
}

.gallery-thumbnail__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

.gallery-thumbnail:not(.active) .gallery-thumbnail__inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  opacity: 0.2;
  pointer-events: none;
}

.gallery-thumbnail:hover {
  border-color: var(--color-text-accent-primary);
  opacity: 0.9;
}

.gallery-thumbnail.active {
  box-shadow: 0 0 0 4px var(--color-bg-light), 0 0 0 6px var(--color-accent-light);
  z-index: 1;
}

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

/* Переопределение стилей для альбомных миниатюр в оглавлении - должно быть после базовых стилей */
.table-of-contents__pdf-thumbnails .gallery-thumbnail.gallery-thumbnail--landscape {
  aspect-ratio: 1.414 !important;
  width: 128px !important; /* Максимальная ширина 128px */
  max-width: 128px !important; /* Не превышаем 128px */
  flex-shrink: 0 !important;
}

/* Убеждаемся, что изображения в альбомных миниатюрах отображаются правильно */
.table-of-contents__pdf-thumbnails .gallery-thumbnail.gallery-thumbnail--landscape .gallery-thumbnail__inner img {
  object-fit: contain !important;
}

/* Main Image Area */
.gallery-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  position: relative; /* Для правильного позиционирования дочерних элементов */
  overflow: hidden; /* Не скроллим gallery-main, скроллится только image-wrapper */
  height: 100%;
}

.gallery-main__image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-main);
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
  position: relative;
  z-index: 1; /* Изображение под кнопками */
}

.gallery-main__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none; /* Изображение не блокирует клики на кнопки */
}

/* Для страниц с table-of-contents переопределяем max-height */
body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
  max-height: none !important; /* Убираем ограничение по высоте для пропорционального масштабирования */
}

/* Для страниц БЕЗ table-of-contents переопределяем max-height */
body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
  max-height: none !important; /* Убираем ограничение по высоте для пропорционального масштабирования */
}

.gallery-main__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  flex-shrink: 0; /* Кнопки не сжимаются */
  position: sticky; /* Фиксируем кнопки при скролле */
  bottom: 0; /* Прилипаем к низу (кнопки снизу) */
  z-index: 10; /* Кнопки всегда поверх изображения */
  background-color: var(--color-bg-light); /* Фон, чтобы не было видно скроллящееся изображение под кнопками */
  margin-top: 0; /* Убираем отступ сверху */
}

/* Для страниц БЕЗ миниатюр - кнопки тоже снизу */
body:not(:has(.table-of-contents__pdf-thumbnails:not(:has(.gallery-thumbnail:only-child)))) .gallery-main {
  flex-direction: column; /* Изображение сверху, кнопки снизу */
}

/* Для страниц БЕЗ миниатюр - кнопки снизу */
body:not(:has(.table-of-contents__pdf-thumbnails:not(:has(.gallery-thumbnail:only-child)))) .gallery-main__controls {
  padding: 8px 0;
  top: auto;
  bottom: 0; /* Прилипаем к низу (кнопки снизу) */
}

.gallery-main__caption {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
}

/* Скрываем подпись на страницах с одним изображением (где нет навигационных кнопок) */
.gallery-main__controls:not(:has(.gallery-main__navigation)) .gallery-main__caption {
  display: none;
}

/* Скрываем подпись на всех страницах, кроме gallery.html */
body:not(.gallery-page) .gallery-main__caption {
  display: none;
}

/* Скрываем подпись на gallery-page через opacity */
.gallery-page .gallery-main__caption {
  opacity: 0;
}

/* Когда подпись скрыта, кнопки остаются справа */
body:not(.gallery-page) .gallery-main__controls {
  justify-content: space-between;
}

/* Информационная строка с номером изображения - выравнивание по левому краю */
body:not(.gallery-page) .gallery-main__counter {
  order: 1; /* Слева */
  margin-right: auto;
}

body:not(.gallery-page) .gallery-main__caption {
  order: 0; /* Подпись скрыта, но оставляем порядок */
}

body:not(.gallery-page) .gallery-main__navigation {
  order: 2; /* Справа */
  margin-left: auto;
}

/* Для страниц БЕЗ table-of-contents (например, recommend.html, phantoms.html) - кнопки тоже sticky снизу */
.translation-content .gallery-container .gallery-main__controls {
  position: sticky;
  bottom: 0; /* Прилипаем к низу (кнопки снизу) */
  top: auto;
  z-index: 10;
  background-color: var(--color-bg-light);
}

.gallery-main__counter {
  font-family: var(--font-vollkorn);
  font-size: var(--font-size-15);
  line-height: var(--line-height-140);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-0);
  color: var(--color-text-primary);
  margin: 0;
  align-self: center;
}

.gallery-main__navigation {
  display: flex;
  gap: 8px;
}

.gallery-nav-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-light);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
  position: relative;
  z-index: 11; /* Кнопки поверх всех элементов */
}

.gallery-nav-button:hover {
  background-color: var(--color-accent-main);
}

.gallery-nav-button:active {
  background-color: var(--color-accent-dark);
}

.gallery-nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none; /* Отключаем клики на disabled кнопках */
}

.gallery-nav-button:disabled:hover {
  background-color: var(--color-accent-light);
}

.gallery-nav-button img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

/* =========================================================
   TRANSLATIONS — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Скрываем скроллбар у body и html в мобильной версии */
  html,
  body {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Скроллбар применяется только к скроллируемым контейнерам */
  .topbar__menu::-webkit-scrollbar,
  .table-of-contents--mobile-open::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .topbar__menu::-webkit-scrollbar-thumb,
  .table-of-contents--mobile-open::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 4px;
  }

  .topbar__menu::-webkit-scrollbar-thumb:hover,
  .table-of-contents--mobile-open::-webkit-scrollbar-thumb:hover,
  .topbar__menu::-webkit-scrollbar-thumb:active,
  .table-of-contents--mobile-open::-webkit-scrollbar-thumb:active {
    background-color: #91806e !important;
    background: #91806e !important;
    border-radius: 4px;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .topbar__menu::-webkit-scrollbar-track,
  .table-of-contents--mobile-open::-webkit-scrollbar-track {
    background: transparent;
  }

  .topbar__menu::-webkit-scrollbar-button,
  .table-of-contents--mobile-open::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  * {
    box-sizing: border-box;
  }

  .page-content {
    height: auto;
    min-height: 100vh;
    padding-top: 80px; /* 60px - высота топбара + 20px дополнительный отступ */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 16px;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Убираем нижний отступ у page-content, когда есть PDF viewer, чтобы подложка доходила до низа */
  .page-content:has(.pdf-viewer),
  .page-content:has(.gallery-container) {
    padding-bottom: 0 !important;
    height: 100vh !important; /* Фиксированная высота экрана */
    max-height: 100vh !important; /* Не превышаем высоту экрана */
    min-height: 100vh;
    overflow: hidden !important; /* Убираем прокрутку */
  }
  
  /* Для страниц без миниатюр - разрешаем прокрутку, чтобы кнопки были доступны */
  body:not(:has(.table-of-contents__pdf-thumbnails)) .page-content:has(.gallery-container) {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    overflow: visible !important; /* Разрешаем прокрутку */
  }

  .page-content__wrapper {
    height: auto;
    min-height: calc(100vh - 60px - 16px);
    background-color: transparent;
    box-shadow: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding-bottom: 40px;
    position: relative;
  }

  /* Добавляем цветной отступ снизу на мобильной версии */
  .page-content__wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--color-bg-main);
  }

  /* Ограничиваем высоту page-content__wrapper на страницах с изображениями */
  .page-content:has(.pdf-viewer) .page-content__wrapper,
  .page-content:has(.gallery-container) .page-content__wrapper {
    height: calc(100vh - 60px) !important; /* Фиксированная высота */
    max-height: calc(100vh - 60px) !important; /* Не превышаем высоту экрана */
    min-height: calc(100vh - 60px) !important;
    overflow: hidden !important; /* Убираем прокрутку */
    padding-bottom: 0 !important;
  }
  
  /* Для страниц без миниатюр - разрешаем прокрутку, чтобы кнопки были доступны */
  body:not(:has(.table-of-contents__pdf-thumbnails)) .page-content:has(.gallery-container) .page-content__wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important; /* Разрешаем прокрутку */
  }
  
  /* Для страниц без миниатюр - разрешаем прокрутку, чтобы кнопки были доступны */
  body:not(:has(.table-of-contents__pdf-thumbnails)) .page-content:has(.gallery-container) .page-content__wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important; /* Разрешаем прокрутку */
  }

  /* Убираем псевдоэлемент ::after на страницах с галереями */
  .page-content:has(.pdf-viewer) .page-content__wrapper::after,
  .page-content:has(.gallery-container) .page-content__wrapper::after {
    display: none;
  }

  .headline {
    display: none;
  }

  .authors-list {
    display: none !important;
  }

  .translations-container {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0 16px;
    background-color: transparent;
    box-shadow: none;
  }

  .translations-list {
    display: none !important; /* На мобильных только список, без карточек */
  }

  .translations-by-date-list {
    display: flex !important; /* На мобильных показываем только список по дате */
    flex-direction: column;
    gap: 16px;
  }

  .translations-toggle-button {
    display: none !important; /* Кнопка переключения не нужна на мобильных */
  }

  .translations-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .translations-group__header {
    display: none;
  }

  .translations-group__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .texts-container {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0 16px;
    background-color: transparent;
    box-shadow: none;
  }

  .texts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .texts-section {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .texts-section:not(:first-child) {
    margin-top: 40px;
  }

  .texts-section__header {
    margin-bottom: 20px;
  }

  .texts-section__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .texts-container .text-card {
    height: auto;
    min-height: 76px;
  }

  /* Author page mobile styles */
  .author-works {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0 16px;
    background-color: transparent;
    box-shadow: none;
  }

  .author-works__title {
    display: none; /* Скрыт, так как отображается в топбаре */
  }

  .author-works__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  /* Отступ от последней карточки на мобильной версии */
  .text-card:last-child,
  .author-works__grid .text-card:last-child,
  .translations-group__cards .text-card:last-child,
  .texts-section__cards .text-card:last-child,
  .texts-section:last-child .texts-section__cards .text-card:last-child {
    margin-bottom: 24px;
  }

  /* Translation page mobile styles */
  .back-to-translations {
    display: none;
  }

  .table-of-contents {
    display: none !important;
  }

  /* Show table-of-contents on gallery page for mobile */
  /* Но скрываем его, если есть текстовое оглавление (для страниц типа пьес) */
  body:has(.translation-content .gallery-container):not(:has(.table-of-contents__item)) .table-of-contents {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 16px 0 16px !important; /* Убираем нижний padding, чтобы плашка доходила до низа */
    margin: 0 !important;
    margin-bottom: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow-y: visible !important;
  }
  
  /* Показываем текстовое оглавление на странице для страниц с галереями и текстовым оглавлением */
  /* Оглавление должно быть видно */
  body:has(.translation-content .gallery-container):has(.table-of-contents__item) .table-of-contents:not(.table-of-contents--in-menu) {
    display: block !important;
  }

  /* Скрываем галерею миниатюр, если там только одно изображение */
  .table-of-contents__pdf-thumbnails:has(.gallery-thumbnail:only-child) {
    display: none !important;
  }

  /* Оглавление внутри меню - идентично десктопной версии */
  /* Важно: это правило должно перекрывать правило скрытия для страниц с галереями */
  .topbar__menu .table-of-contents,
  body:has(.translation-content .gallery-container):has(.table-of-contents__item) .topbar__menu .table-of-contents {
    display: block !important;
    position: static !important;
    width: 100%;
    padding: 0 16px;
    margin: 0;
    margin-top: 60px; /* Отступ сверху для кнопок в верхней части */
    background: none;
    box-shadow: none;
    overflow-y: visible;
    max-width: none;
    min-width: 0;
  }

  /* Кнопка "вернуться к меню" в верхней части меню */
  .topbar__menu .table-of-contents__back {
    display: none;
    align-items: center;
    gap: var(--space-4);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 18px;
    left: 16px;
    height: 24px;
    font-family: var(--font-vollkorn-sc);
    font-size: var(--font-size-14);
    line-height: var(--line-height-120);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-0);
    text-transform: lowercase;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
    z-index: 1;
  }

  /* Показываем кнопку только когда оглавление в меню */
  .topbar__menu:has(.table-of-contents--in-menu) .table-of-contents__back {
    display: flex !important;
  }

  .topbar__menu .table-of-contents__back:hover {
    color: var(--color-text-accent-primary);
  }

  .topbar__menu .table-of-contents__back:active {
    color: var(--color-text-primary);
  }

  .topbar__menu .table-of-contents__back img {
    width: 16px;
    height: 16px;
    display: block;
  }

  .topbar__menu .table-of-contents__back svg {
    width: 16px;
    height: 16px;
    display: block;
    color: inherit;
  }

  .topbar__menu .table-of-contents__back svg path {
    stroke: currentColor;
    fill: currentColor;
  }


  .table-of-contents__back {
    display: none;
  }

  .table-of-contents--mobile-open {
    display: block !important;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-main);
    z-index: 40;
    padding: 20px 16px;
    overflow-y: auto;
  }

  .translation-content {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background-color: transparent;
    box-shadow: none;
    overflow-x: hidden !important;
    overflow-y: visible;
    box-sizing: border-box !important;
  }

  /* Ограничиваем высоту translation-content на страницах с изображениями одной высотой экрана */
  body:has(.gallery-container) .translation-content,
  body:has(.pdf-gallery-container) .translation-content {
    max-height: calc(100vh - 60px) !important; /* Высота экрана минус топбар */
    overflow-y: hidden !important; /* Убираем вертикальную прокрутку */
  }
  
  /* Для страниц без миниатюр - разрешаем прокрутку, чтобы кнопки были доступны */
  body:not(:has(.table-of-contents__pdf-thumbnails)):has(.gallery-container) .translation-content {
    max-height: none !important;
    overflow-y: visible !important; /* Разрешаем вертикальную прокрутку */
  }

  /* PDF gallery container для мобильной версии */
  .pdf-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(100vw - 32px); /* Ширина экрана минус 16px с каждой стороны */
    max-width: calc(100vw - 32px);
    height: calc(100vh - 60px); /* Высота экрана минус топбар, фиксированная высота */
    max-height: calc(100vh - 60px) !important; /* Не превышаем высоту экрана */
    min-height: calc(100vh - 60px); /* Высота экрана минус топбар, чтобы доходить до низа */
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden; /* Убираем прокрутку */
  }

  /* PDF gallery container внутри translation-content - используем calc для правильной ширины */
  .translation-content .pdf-gallery-container {
    max-width: calc(100vw - 32px) !important; /* Ширина экрана минус 16px с каждой стороны */
    width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: calc(100vh - 60px) !important; /* Фиксированная высота */
    max-height: calc(100vh - 60px) !important; /* Не превышаем высоту экрана */
    min-height: calc(100vh - 60px) !important; /* Высота экрана минус топбар */
  }

  /* Миниатюры для мобильной версии - отображаются сверху */
  .pdf-thumbnails-mobile {
    display: flex !important;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 16px 8px 16px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    order: 1; /* Миниатюры первыми */
  }

  /* Скрываем .pdf-thumbnails-mobile на мобильной версии, если есть .table-of-contents__pdf-thumbnails */
  body:has(.table-of-contents__pdf-thumbnails) .pdf-thumbnails-mobile {
    display: none !important;
  }

  /* PDF viewer для мобильной версии - отображается снизу */
  .pdf-viewer {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important; /* Ширина экрана минус 16px с каждой стороны */
    height: calc(100vh - 60px - 20px - 100px) !important; /* Высота экрана минус топбар (60px), отступы (20px) и миниатюры (100px) */
    min-height: 300px;
    max-height: calc(100vh - 180px);
    overflow: hidden;
    flex-shrink: 0;
    order: 2; /* PDF viewer вторым */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* PDF viewer внутри translation-content - используем calc для правильной ширины */
  .translation-content .pdf-viewer {
    max-width: calc(100vw - 32px) !important; /* Ширина экрана минус 16px с каждой стороны */
    width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Когда нижняя галерея скрыта (есть верхняя), увеличиваем высоту PDF viewer */
  body:has(.table-of-contents__pdf-thumbnails) .pdf-viewer {
    height: calc(100vh - 60px - 80px) !important; /* Высота экрана минус топбар (60px) и верхняя галерея (80px) */
    max-height: calc(100vh - 60px - 80px) !important;
  }

  /* Когда галерея миниатюр скрыта (только одно изображение), увеличиваем высоту PDF viewer до конца экрана */
  body:has(.table-of-contents__pdf-thumbnails:has(.gallery-thumbnail:only-child)) .pdf-viewer {
    height: calc(100vh - 60px) !important; /* Высота экрана минус топбар (60px) */
    max-height: calc(100vh - 60px) !important;
  }

  /* Для альбомных страниц используем FitW вместо FitH для правильного масштабирования по ширине */
  .pdf-viewer__iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Убираем скролл у translation-content для PDF viewer */
  .translation-content:has(.pdf-viewer) {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }


  .pdf-thumbnails-mobile .gallery-thumbnail {
    width: 80px;
    min-width: 80px;
    flex-shrink: 0;
    aspect-ratio: 0.707; /* Портретная ориентация по умолчанию */
  }

  /* Альбомная ориентация для миниатюр со второй по последнюю в мобильной версии */
  .pdf-thumbnails-mobile .gallery-thumbnail.gallery-thumbnail--landscape {
    aspect-ratio: 1.414 !important; /* Альбомная ориентация */
    width: 80px !important; /* Сохраняем ту же ширину */
    min-width: 80px !important;
  }

  .pdf-thumbnails-mobile .gallery-thumbnail__inner img {
    object-fit: contain;
  }

  .translation-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .author-intro {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .location-and-characters {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .act-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Dialogue blocks mobile styles */
  .act-block .dialogue-block {
    margin: 0 0 16px 0 !important;
  }

  .act-block .dialogue-block:last-child {
    margin-bottom: 0 !important;
  }

  .act-block .dialogue-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
  }

  .act-block .dialogue-line:not(:last-child) {
    margin-bottom: 16px !important;
  }

  .act-block .dialogue-character {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .act-block .dialogue-text {
    width: 100% !important;
    text-align: left !important;
  }

  /* Стихотворные реплики (содержат <br>) - центрировать */
  .act-block .dialogue-text:has(br) {
    text-align: center !important;
  }

  /* Stage directions mobile styles */
  .act-block .stage-direction {
    margin: 0 0 16px 0 !important;
  }

  .act-block .stage-direction:last-child {
    margin-bottom: 0 !important;
  }

  /* Gallery mobile styles */
  .gallery-container {
    flex-direction: column;
    gap: 20px;
    padding: 0;
    height: auto;
    max-height: none;
    min-height: auto;
    overflow: visible;
    max-width: calc(100vw - 32px); /* Ширина экрана минус 16px с каждой стороны */
    width: calc(100vw - 32px);
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* Универсальное правило для всех image-wrapper на мобильных - убираем flex и центрирование */
  .gallery-main__image-wrapper {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Универсальное правило для всех изображений на мобильных - занимают всю ширину */
  .gallery-main__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Gallery container inside translation-content on mobile */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container {
    max-width: calc(100vw - 32px) !important; /* Ширина экрана минус 16px с каждой стороны */
    width: calc(100vw - 32px) !important; /* Убираем width: 888px с планшета */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative; /* Для правильного позиционирования z-index */
  }
  
  /* Gallery container БЕЗ table-of-contents на мобильных - убираем width: 888px */
  body:has(.translation-content .gallery-container):not(:has(.table-of-contents)):not(.gallery-page) .translation-content .gallery-container {
    max-width: calc(100vw - 32px) !important; /* Ширина экрана минус 16px с каждой стороны */
    width: calc(100vw - 32px) !important; /* Убираем width: 888px с планшета */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  /* Image wrapper внутри translation-content на мобильной версии - высота по содержимому */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    position: relative;
    z-index: 1; /* Изображение под кнопками */
    width: 100% !important;
    max-width: 100% !important;
    display: block !important; /* Изменяем с flex на block, чтобы изображение занимало всю ширину */
    align-items: unset !important;
    justify-content: unset !important;
    flex: none !important;
  }
  
  /* Изображение занимает всю ширину контейнера на мобильных */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* Блок с кнопками всегда доступен для кликов и не смещается */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__controls {
    position: sticky !important; /* Фиксируем кнопки при скролле */
    bottom: 0 !important; /* Прилипаем к низу (кнопки снизу) */
    top: auto !important;
    z-index: 10 !important; /* Кнопки всегда поверх изображения */
    flex-shrink: 0 !important; /* Блок не сжимается */
    margin-bottom: 0 !important;
    background-color: var(--color-bg-light) !important; /* Фон, чтобы не было видно скроллящееся изображение под кнопками */
    padding-top: 8px !important;
  }
  
  /* Для всех страниц с table-of-contents (кроме gallery.html) - кнопки sticky внизу экрана, всегда доступны */
  /* После скрытия миниатюр на мобильной/планшетной версии все страницы считаются без миниатюр */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__controls {
    position: sticky !important; /* Sticky внизу экрана, всегда доступны */
    bottom: 0 !important; /* Прилипаем к низу экрана */
    top: auto !important;
    margin-top: 40px !important; /* Отступ кнопок навигации на 40px от изображения */
    margin-bottom: 0 !important;
    z-index: 10 !important; /* Кнопки всегда поверх */
    background-color: var(--color-bg-light) !important; /* Фон для видимости */
    padding: 8px 0 !important;
  }
  
  /* Убеждаемся, что кнопки навигации видны на всех страницах с table-of-contents (кроме gallery.html) */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main__navigation {
    display: flex !important;
    visibility: visible !important;
  }
  
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-nav-button {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Галерея main не должна прокручиваться */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main {
    position: relative;
    overflow: visible !important; /* Не скрываем содержимое */
  }
  
  /* Для всех страниц с table-of-contents (кроме gallery.html) - убираем overflow и фиксированную высоту, чтобы кнопки были видны */
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main {
    overflow: visible !important; /* Показываем кнопки */
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }

  /* Когда есть галерея миниатюр сверху, высота по содержимому */
  body:has(.table-of-contents__pdf-thumbnails:not(:has(.gallery-thumbnail:only-child))) .translation-content .gallery-container .gallery-main__image-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }

  /* Gallery thumbnails in table-of-contents on mobile - все галереи горизонтально */
  .table-of-contents__pdf-thumbnails {
    flex-direction: row !important;
    width: 100% !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important; /* Изменено на visible, чтобы рамка была видна */
    padding: 6px 22px 14px 22px !important; /* Добавлен padding 6px сверху и 6px по бокам (16px + 6px) для рамки активной миниатюры */
    -webkit-overflow-scrolling: touch;
  }

  /* Скрываем галерею миниатюр, если там только одно изображение */
  .table-of-contents__pdf-thumbnails:has(.gallery-thumbnail:only-child) {
    display: none !important;
  }
  
  /* Скрываем все галереи миниатюр на мобильной версии, кроме gallery.html */
  body:not(.gallery-page) .table-of-contents__pdf-thumbnails {
    display: none !important;
  }

  .table-of-contents__pdf-thumbnails .gallery-thumbnail {
    width: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
  }

  /* Keep old selector for backward compatibility */
  .gallery-thumbnails {
    flex-direction: row;
    width: 100%;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 8px;
  }

  /* Скрываем .gallery-thumbnails на мобильной версии, если есть .table-of-contents__pdf-thumbnails */
  body:has(.table-of-contents__pdf-thumbnails) .gallery-thumbnails {
    display: none !important;
  }

  .gallery-thumbnail {
    width: 80px;
    min-width: 80px;
    flex-shrink: 0;
  }

  .gallery-main {
    width: calc(100vw - 32px); /* Ширина экрана минус 16px с каждой стороны */
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    height: auto;
    max-height: none;
    min-height: auto;
    overflow: visible;
    margin: 0 auto;
  }
  
  /* Для страниц без миниатюр - убираем overflow, чтобы кнопки были видны */
  /* Для всех страниц (кроме gallery.html) - убираем overflow, чтобы кнопки были видны */
  /* После скрытия миниатюр на мобильной/планшетной версии все страницы считаются без миниатюр */
  body:not(.gallery-page) .gallery-main {
    overflow: visible !important; /* Показываем кнопки */
  }

  /* Gallery main inside translation-content - используем calc для правильной ширины */
  .translation-content .gallery-main {
    max-width: calc(100vw - 32px) !important; /* Ширина экрана минус 16px с каждой стороны */
    width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }
  
  /* Для всех страниц (кроме gallery.html) - убираем фиксированную высоту и overflow, чтобы кнопки были видны */
  /* После скрытия миниатюр на мобильной/планшетной версии все страницы считаются без миниатюр */
  body:not(.gallery-page) .translation-content .gallery-main {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important; /* Показываем кнопки */
  }
  
  /* Для страниц БЕЗ миниатюр на мобильной версии - кнопки уже сверху в HTML, не нужно column-reverse */

  /* Когда есть галерея миниатюр сверху, уменьшаем высоту gallery-main */
  body:has(.table-of-contents__pdf-thumbnails:not(:has(.gallery-thumbnail:only-child))) .translation-content .gallery-main {
    height: calc(100vh - 60px - 80px) !important; /* Высота экрана минус топбар и галерея миниатюр */
    max-height: calc(100vh - 60px - 80px) !important;
    min-height: calc(100vh - 60px - 80px) !important;
  }

  .gallery-main__image-wrapper {
    min-height: auto;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block !important; /* Изменяем с flex на block, чтобы изображение занимало всю ширину */
    align-items: unset !important;
    justify-content: unset !important;
  }

  /* Когда есть галерея миниатюр сверху, высота по содержимому */
  body:has(.table-of-contents__pdf-thumbnails:not(:has(.gallery-thumbnail:only-child))) .gallery-main__image-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }

  /* Когда галерея миниатюр скрыта (только одно изображение), высота по содержимому */
  body:has(.table-of-contents__pdf-thumbnails:has(.gallery-thumbnail:only-child)) .gallery-main__image-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }

  /* Универсальное правило для всех изображений на мобильных - занимают всю ширину */
  .gallery-main__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    pointer-events: none; /* Изображение не блокирует клики на кнопки на мобильной версии */
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Для всех страниц (кроме gallery.html) - изображение занимает всю ширину контейнера */
  /* После скрытия миниатюр на мобильной/планшетной версии все страницы считаются без миниатюр */
  body:not(.gallery-page) .gallery-main__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* Универсальное правило для всех image-wrapper на мобильных */
  .gallery-main__image-wrapper {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Для всех страниц (кроме gallery.html) на мобильной версии - кнопки снизу */
  /* После скрытия миниатюр на мобильной/планшетной версии все страницы считаются без миниатюр */
  body:not(.gallery-page) .gallery-main,
  body:has(.table-of-contents):not(.gallery-page) .translation-content .gallery-container .gallery-main {
    flex-direction: column !important; /* Изображение сверху, кнопки снизу */
  }

  .gallery-main__controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky !important; /* Фиксируем кнопки при скролле на мобильных */
    bottom: 0 !important; /* Прилипаем к низу (кнопки снизу на мобильных) */
    top: auto !important;
    z-index: 10; /* Кнопки всегда поверх изображения на мобильной версии */
    background-color: var(--color-bg-light) !important; /* Фон, чтобы не было видно скроллящееся изображение под кнопками */
  }

  .gallery-main__caption {
    flex: 1;
  }

  .gallery-main__navigation {
    flex-shrink: 0;
    position: relative;
    z-index: 11; /* Кнопки навигации поверх всех элементов */
  }
  
  .gallery-nav-button {
    position: relative;
    z-index: 12; /* Каждая кнопка поверх всех элементов */
  }

  /* Отступ кнопок навигации на 40px от изображения для всех страниц (кроме gallery.html) */
  /* После скрытия миниатюр на мобильной/планшетной версии все страницы считаются без миниатюр */
  body:not(.gallery-page) .translation-content .gallery-main__controls {
    margin-top: 40px !important;
    position: sticky !important; /* Sticky внизу экрана, всегда доступны */
    bottom: 0 !important;
    z-index: 10 !important;
    background-color: var(--color-bg-light) !important;
  }
  
  /* Убеждаемся, что кнопки навигации видны на всех страницах (кроме gallery.html) */
  body:not(.gallery-page) .translation-content .gallery-main__navigation {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  body:not(.gallery-page) .translation-content .gallery-nav-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}