body {
  background-color: var(--bs-secondary);
}

/* Bootstrap-контейнер по умолчанию упирается в 1320px на xxl (>=1400px) — расширяем именно
   этот верхний порог до 1600px, остальные брейкпоинты (960/1140px и т.п.) не трогаем. */
@media (min-width: 1400px) {
  .container {
    max-width: 1600px;
  }
}

.header {
  z-index: 3;
  position: sticky;
  top: 0;
  left: 0;
}

/* Бренд-акцент сайта — та же бронза, что уже откалибрована для .specimen--coin (карточка
   разновидности монеты), вынесена на уровень всего сайта (шапка, hero, лента "недавно
   добавлено"), а не только карточки предмета. Одна пара переменных на обе темы, --bs-theme=dark
   переопределяет. */
:root {
  --brand-accent: #a5672b;
}

[data-bs-theme="dark"] {
  --brand-accent: #d99a54;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--bs-emphasis-color);
}

/* Увеличено с 34px/1.1rem (issue Бориса 2026-08-19: "лого и текст рядом... побольше") — header
   имеет фиксированную высоту 100px (.main grid-template-rows), запас большой, новый размер
   в него свободно вписывается с исходным вертикальным центрированием. */
.brand__mark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-accent);
  color: var(--bs-body-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.brand__word {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
}

.main {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 100px 1fr 100px;
}

.header>.container,
.content>.container {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Лого и меню в одну строку на уровне высоты (issue Бориса 2026-08-14) — раньше .container не был
   flex-контейнером, .brand и nav.navbar стояли друг под другом блоками. Плюс группировка правых
   контролов (колокольчик/логин/язык/тема) в один кластер с равными отступами вместо вперемешку. */
.header>.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar {
  flex: 1;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* margin-left:auto, не только justify-content:space-between на родителе .navbar (issue
     Бориса 2026-08-18: "теперь всё вплотную к логотипу") — .navbar раньше держал два flex-
     ребёнка (<ul class="navbar-nav"> слева + .navbar-right справа), space-between разводил их
     по краям; после того как <ul> убрали (см. предыдущий коммит), .navbar-right остался
     единственным ребёнком — с одним элементом space-between прижимает его к началу, а не к
     концу. margin-left:auto работает независимо от того, сколько соседей осталось. */
  margin-left: auto;
}

.header,
.content,
.footer {
  display: flex;
  align-items: stretch;
}

.left {
  border-right: 1px solid var(--bs-border-color);
}

aside {
  padding: 10px;
}

#sidemenu {
  max-height: 1000px;
  overflow: hidden;
}

#sidemenu .accordion-item ul {
  max-height: 500px;
  overflow-y: auto;
}

.flag-icon {
  width: 20px;
  height: 15px;
  vertical-align: middle;
  margin-right: 4px;
  /* contain, не cover — у большинства флагов пропорции близки к 3:2, но у нескольких
     исторических (СССР — 1200x600, официально 1:2) cover обрезает по бокам так сильно,
     что герб/эмблема, стоящая не по центру полотна, оказывается почти полностью
     срезана. contain всегда показывает флаг целиком (ценой небольших полей сверху/снизу
     у нестандартных пропорций), это надёжнее для набора флагов, включающего исторические
     государства с нетипичными соотношениями сторон. */
  object-fit: contain;
}

.flag-icon-lg {
  width: 160px;
  height: 120px;
  margin-right: 10px;
}

.zoomable {
  cursor: zoom-in;
}

/* Аверс+реверс рядом в карточке "недавно добавлено" (issue Бориса 2026-08-14) — раньше показывали
   только одно фото, что не по стандарту сайта (везде обе стороны). --bs-tertiary-bg, не --bs-light
   — второй фиксирован (#f8f9fa) в обеих темах, первый сам темнеет вместе с --bs-theme=dark. */
.recent-item-photos {
  display: flex;
  gap: 1px;
  /* overflow/radius (issue Бориса 2026-08-15: "фотография съедает часть рамки блока" в режиме
     Плитка) — .recent-item-photos первый ребёнок .card, а сам .card ничего не обрезает по
     умолчанию (только скругляет border-radius визуально), поэтому квадратные углы фото
     торчали поверх скруглённого верхнего угла карточки. Радиус здесь — свой, а не
     unclipped-наследование от .card, чтобы правило работало в любом контейнере, не только
     внутри .card. */
  overflow: hidden;
  border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
}

.recent-item-img,
.recent-item-img-placeholder {
  width: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--bs-tertiary-bg);
}

/* Банкноты вытянутые — квадратный object-fit:cover обрезал их с обеих сторон до нечитаемого
   обрубка (issue Бориса 2026-08-22: "кусок одной и кусок другой, ни то ни сё"). Свой модификатор
   вместо квадратного кропа: аспект пошире (типичное соотношение сторон банкноты) и
   object-fit:contain — вся банкнота целиком, с полями по бокам вместо обрезки, тот же приём,
   что уже верно сделан на странице Типа/Разновидности (.specimen__photos--banknote). */
.recent-item-img--banknote,
.recent-item-img-placeholder--banknote {
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

/* Фиксированная высота текста в 3 строки (issue Бориса 2026-08-14) — без этого длинные названия
   коллекционных монет растягивали карточку, и высота ряда скакала между страницами пагинации.
   line-height задан явно и height = 3 * line-height, чтобы короткие (1-строчные) названия тоже
   резервировали полную высоту — иначе line-clamp только подрезал бы длинные сверху, а короткие
   карточки оставались бы ниже соседних. */
.recent-item-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3em;
  height: 3.9em;
}

/* btn-outline-*, не btn-primary/btn-danger — заливные варианты держат один и тот же насыщенный
   цвет в обеих темах (Bootstrap не делает --bs-btn-bg тёмной темой), на тёмном фоне это смотрится
   грубо. Outline берёт цвет текста/рамки из --bs-primary/--bs-danger и остаётся прозрачным —
   в обеих темах читается ровно. */
a.btn-square.btn-sm,
button.btn-square.btn-sm {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.1rem;
}

/* text-bg-light (Bootstrap) не адаптируется под тему — тот же fixed #f8f9fa, что и --bs-light
   выше, белым пятном на тёмном фоне. Для "пустого" бейджа (нет предметов) нужен прозрачный
   вариант на var(--bs-border-color)/var(--bs-secondary-color) — они уже меняются с темой. */
.badge-outline {
  background-color: transparent;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-weight: 500;
}

/* Панель "Уведомления" в шапке — dropdown-menu без Dropdown-плагина (см. menu.html, тот требует
   Popper, которого нет). Позиционируем сами: .collapse у Bootstrap сам по себе в потоке, а не
   плавающий — display:block переопределяет их inline-стиль display:none только пока свёрнуто.
   Селектор `.notif-panel-wrapper .notif-panel`, не просто `.notif-panel` — у Bootstrap есть
   `.navbar-nav .dropdown-menu { position: static }` (адаптация дропдаунов под мобильный navbar),
   специфичнее одного класса и без этого перебивала бы position: absolute обратно. */
.notif-panel-wrapper {
  position: relative;
}

.notif-bell {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 4px;
}

.notif-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.6rem;
  padding: 0.2em 0.4em;
}

.notif-panel-wrapper .notif-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  margin-top: 4px;
}

/* Выпадашка по имени пользователя (menu.html) — те же правила позиционирования, что у панели
   уведомлений выше (тот же collapse-без-Popper приём), под отдельными именами — семантически
   разные панели. */
.user-menu-wrapper {
  position: relative;
}

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
}

.user-menu-wrapper .user-menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  margin-top: 4px;
}

/* Акцент по материалу — общий для карточки разновидности (.specimen) и формы добавления в
   коллекцию (.ledger-form, ниже): бронза/медь у монет, типографская зелень у банкнот,
   откалибровано отдельно под тёмную и светлую тему. Раньше сюда же входила и сетка карточек
   разновидностей (.variant-grid/.variant-card) на странице типа — убрана целиком (issue Бориса
   2026-08-14: "В разновидностях можно выбрать плитку... уберём. Оставим только список"),
   detail.html теперь всегда таблица (variant-list-table в этом же файле). variant-card-in
   оставлен — переиспользуется анимацией .specimen__spec ниже. */
.specimen--coin,
.ledger-form--coin {
  --variant-accent: #a5672b;
}

[data-bs-theme="dark"] .specimen--coin,
[data-bs-theme="dark"] .ledger-form--coin {
  --variant-accent: #d99a54;
}

.specimen--banknote,
.ledger-form--banknote {
  --variant-accent: #2f6f6b;
}

[data-bs-theme="dark"] .specimen--banknote,
[data-bs-theme="dark"] .ledger-form--banknote {
  --variant-accent: #6fc2bc;
}

@keyframes variant-card-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Страница одной разновидности (variant_detail.html) — "экземплярская карточка": тот же акцент
   по материалу, тот же Fraunces на годе, тот же JetBrains Mono на числах. Тут это разворачивается
   в полноценный лист-паспорт экземпляра:
   крупный год + номинал в шапке на мягком радиальном ореоле акцентного цвета, аверс/реверс как
   пара "холдеров" слева, паспортные данные — вертикальная ведомость лейбл/значение справа. */
.specimen {
  --variant-accent: var(--bs-emphasis-color);
  position: relative;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  margin: 1rem 0 1.5rem;
  overflow: hidden;
}

.specimen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg, var(--variant-accent) 0, var(--variant-accent) 2px, transparent 2px, transparent 5px
  );
  opacity: 0.55;
}

.specimen__header {
  position: relative;
  padding: 2rem 1.75rem 1.5rem;
  background-image: radial-gradient(ellipse 60% 100% at 0% 0%, color-mix(in srgb, var(--variant-accent) 16%, transparent), transparent 70%);
}

.specimen__eyebrow {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--variant-accent);
  margin-bottom: 0.5rem;
}

.specimen__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}

.specimen__year {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bs-emphasis-color);
}

.specimen__denomination {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--bs-secondary-color);
}

.specimen__subtitle {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
}

.specimen__body {
  display: grid;
  /* 260-420px, было 220-320px (issue Бориса 2026-08-17: "делаем фото больше") */
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 2rem;
  padding: 0 1.75rem 1.75rem;
}

@media (max-width: 700px) {
  .specimen__body {
    grid-template-columns: 1fr;
  }
}

.specimen__photos {
  display: flex;
  /* wrap (issue Бориса 2026-08-17: "делаем фото больше") — настоящая причина маленьких фото:
     .specimen__photo-credit ("Фото: ...") — прямой ребёнок этого же flex-ряда, наравне с двумя
     .specimen__photo, а не подпись под ними. Без wrap все три делили одну строку по ширине —
     атрибуция без ограничения по размеру отъедала ~150px, оставляя каждой монете ~35-40px
     вместо ожидаемых ~170px. flex-basis:100% у credit ниже заставляет её перейти на свою
     строку, фото остаются вдвоём на первой.

     max-width — issue Бориса 2026-08-17: "давай сделаем также в Типе" — .specimen__photos
     переиспользован на странице типа (detail.html) вне .specimen__body, у которого раньше
     этот предел задавала grid-колонка (minmax(260px,420px)). Без него на detail.html фото
     растянулись бы на всю ширину контентной колонки; на variant_detail.html ничего не меняет
     — там ширина и так ограничена grid-колонкой снизу этого значения. */
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 420px;
}

.specimen__photo {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.specimen__photo-credit {
  flex-basis: 100%;
}

/* .specimen__photo-frame — отдельный контейнер-маска (issue Бориса 2026-08-19: "в четвёртый
   раз... обрезка осталась", после того как накрутка padding на самом <img> (8% → 18%) не
   убедила визуально). border-radius на <img> (replaced-элемент) с одновременным aspect-ratio +
   object-fit — комбинация, где клип в разных браузерах/версиях может считаться не совсем так,
   как в обычном блочном контейнере; overflow:hidden на ПРОСТОМ div/span — самый предсказуемый,
   стандартный способ круглого кропа, без всяких нюансов рендеринга replaced-элементов. Рамка
   (border/background/border-radius) — на .specimen__photo-frame; сам <img> просто на 100%
   заполняет её (width/height 100%, object-fit:contain), padding по-прежнему даёт запас между
   почти безграничной монетой на фото (99.4-99.7% кадра, см. предыдущие коммиты) и краем маски. */
.specimen__photo-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
}

.specimen__photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  /* padding НЕ решение (issue Бориса 2026-08-19: "квадраты в круге" — с 18% стал виден
     квадратный белый фон исходного фото внутри круглой рамки, монету визуально "усохло").
     Вместо уменьшения монеты — мягкое растушёванное затухание к краю через mask-image:
     radial-gradient, closest-side — круг ровно по размеру рамки (та же окружность, что и
     border-radius:50% ниже). Непрозрачно до 92% радиуса (issue Бориса, тем же днём: "уменьшить
     расстояние между фото и рамкой" — было 78%/padding 2%, широкое серое кольцо между монетой
     и рамкой; растушёвка начинается позже, почти у самого края), дальше быстро уходит в
     прозрачность — на прозрачных пикселях просвечивает background рамки, а не обрывается
     резкая линия. Так компенсируются исходники, где монета обрезана почти впритык к кадру
     (99.4-99.7%, см. предыдущие коммиты) — без потери видимого размера монеты и почти
     без зазора до рамки. */
  padding: 0;
  mask-image: radial-gradient(circle closest-side, black 96%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, black 96%, transparent 100%);
  cursor: zoom-in;
}

/* Банкноты — не круглая "монета в капсуле", а прямоугольная рамка, аверс сверху/реверс снизу
   (issue Бориса 2026-08-17: "их не надо помещать в окружность... можно в рамку"). Банкнота не
   квадратная (обычно шире, чем выше) — рамка не форсирует aspect-ratio:1, высота идёт от
   собственных пропорций картинки (height:auto на img вместо 100%/object-fit, иначе высота
   рамки не из чего было бы посчитать — img внутри неё был бы единственным источником размера).
   Без обрезки в квадратный бокс. flex-direction:column вместо ряда бок о бок — тот же порядок
   DOM (аверс раньше реверса), просто друг под другом. */
.specimen__photos--banknote {
  flex-direction: column;
  align-items: center;
}

.specimen__photos--banknote .specimen__photo {
  flex: 0 0 auto;
  width: 100%;
}

.specimen__photos--banknote .specimen__photo-frame {
  aspect-ratio: auto;
  border-radius: 0;
}

.specimen__photos--banknote .specimen__photo-frame img {
  height: auto;
  padding: 0;
  mask-image: none;
  -webkit-mask-image: none;
}

.specimen__photos--banknote .specimen__photo--empty {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

/* .specimen__photo-credit растягивается через flex-basis:100% (см. правило ниже) — это работает
   только в родительском flex-ряду (главная ось = ширина). У банкнот родитель — flex-column
   (issue выше), там главная ось — высота, и flex-basis:100% пытался растянуть высоту вместо
   ширины: подпись про источник фото схлопывалась по ширине и наезжала на соседнюю колонку
   характеристик (issue Бориса 2026-08-17: "текст про источник съехал в характеристики"). width
   переопределяет именно то намерение ("на всю ширину"), уже независимо от направления оси. */
.specimen__photos--banknote .specimen__photo-credit {
  flex: 0 0 auto;
  width: 100%;
}

.specimen__photo figcaption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
}

.specimen__photo--empty {
  aspect-ratio: 1;
  width: 100%;
  /* max-width (issue Бориса 2026-09-01: "огромный пустой круг") — width:100% растягивал
     плейсхолдер на всю ширину .specimen__photos (до 420px, см. правило выше), хотя в обычном
     состоянии там бок о бок сидят ДВА кружка (аверс+реверс) по ~200px каждый — один пустой
     кружок занимал место сразу двух. 200px — примерный размер одного из них ((420px - gap)/2). */
  max-width: 200px;
  display: flex;
  /* column (issue Бориса 2026-09-01: "Фото пока нет" и "Поделиться фото" вставали бок о бок) —
     display:flex на родителе оборачивает "Фото пока нет"+<br> в один анонимный flex-item, а
     соседнюю ссылку <a> — в другой; в дефолтном flex-direction:row они встают в ряд, и <br>
     внутри первого анонимного бокса ни на что не влияет (переносы строк не работают между
     отдельными flex-item). column укладывает оба flex-item друг под другом без изменений
     в шаблоне. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--bs-border-color);
  border-radius: 50%;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}

.specimen__specs {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Сайдбар "Другие монеты/банкноты периода" на странице Типа (issue Бориса 2026-08-24) — простой
   список ссылок, без своей рамки/фона (страница и так насыщена блоками). Без max-height/overflow
   (issue Бориса, тем же днём, второй заход — превью по наведению): .list-item-preview__photos
   всплывает absolute-позиционированием НАД строкой, а scroll-контейнер обрезал бы его для
   строк ближе к нижнему краю — список просто растёт по высоте свободно, страница и так длинная. */
.detail-siblings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.specimen__spec {
  display: flex;
  align-items: baseline;
  /* flex-start, не space-between (issue Бориса 2026-08-17: "справа от фото таблица — слишком
     большое расстояние от названия строки и значения") — space-between растягивало dt/dd на
     всю ширину строки, у короткой пары вроде "Металл" / "Серебро" это выглядело как два
     несвязанных слова по разные стороны экрана. border-bottom у самой строки по-прежнему на
     всю ширину (это блочный div, justify-content влияет только на позиционирование dt/dd
     внутри него), разделитель между строками не пострадал. */
  justify-content: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--bs-border-color);
  animation: variant-card-in 0.3s ease backwards;
  animation-delay: calc(var(--i, 0) * 25ms);
}

@media (prefers-reduced-motion: reduce) {
  .specimen__spec {
    animation: none;
  }
}

.specimen__spec dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  /* Фиксированная ширина, не nowrap+auto (issue Бориса 2026-08-19: "значения должны быть
     выровнены, как в столбце таблицы") — каждая .specimen__spec строка сама по себе отдельный
     flex-контейнер (см. выше), поэтому dt/dd меряются по своему собственному содержимому НЕЗАВИСИМО
     от соседних строк: "Металл" и "Диаметр" разной длины — их dd оказывались на разной
     горизонтали. Общая ширина колонки label ЗАДАНА, а не измерена по контенту — тогда dd у всех
     строк начинается в одной точке, не растягиваясь на всю ширину (см. flex-start выше). Без
     nowrap — не обрезаем длинные подписи (например, "Соотношение сторон", "Выведена из
     обращения"), при нехватке места переносятся на вторую строку, а не вылезают за колонку.
     170px — с запасом под них на этом font-size/letter-spacing. */
  flex: 0 0 170px;
}

.specimen__spec dd {
  margin: 0;
  color: var(--bs-body-color);
}

.specimen__spec dd.specimen__value--num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.specimen__extra {
  padding: 0 1.75rem 1.75rem;
}

.specimen__extra h3 {
  font-size: 1rem;
}

.specimen__extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}

.specimen__extra-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--bs-border-color);
  cursor: zoom-in;
}

.specimen__extra-grid figcaption {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

.specimen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

/* Формы экземпляра коллекции (_collection_item_form.html — и "Добавить в коллекцию", и
   "Редактировать экземпляр") — открываются как одна общая модалка (#collectionItemModal в
   base.html, JS в script.js), а не отдельные страницы. Тот же язык, что у .specimen: акцент по
   материалу, Fraunces на номинале экземпляра, маленькие caps-подписи
   полей — приёмка/правка экземпляра в "гроссбух" коллекции, а не произвольная форма из
   вебдванольных времён. */
.modal-content {
  background: var(--bs-body-bg);
}

.ledger-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
}

#collectionItemModal .modal-body {
  padding: 0;
}

.ledger-form__loading {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ledger-form {
  --variant-accent: var(--bs-emphasis-color);
  position: relative;
}

.ledger-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg, var(--variant-accent) 0, var(--variant-accent) 2px, transparent 2px, transparent 5px
  );
  opacity: 0.55;
}

.ledger-form__context {
  padding: 1.75rem 1.75rem 1.25rem;
  background-image: radial-gradient(ellipse 70% 100% at 0% 0%, color-mix(in srgb, var(--variant-accent) 16%, transparent), transparent 70%);
}

.ledger-form__eyebrow {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--variant-accent);
  margin-bottom: 0.35rem;
}

.ledger-form__item {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--bs-emphasis-color);
  line-height: 1.2;
}

.ledger-form form {
  padding: 0 1.75rem 1.75rem;
}

/* Личные фото/PDF-вложение экземпляра, показанные над формой их загрузки
   (collection_item_detail.html, issue Бориса 2026-08-20: "делаем дизайн страницы") — тот же
   горизонтальный отступ, что у формы ниже, у .ledger-form__context нет своего нижнего padding,
   поэтому без этого блок прилипал бы к краям карточки. */
.ledger-form__media {
  padding: 0 1.75rem 1rem;
}

.ledger-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ledger-form__group {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--bs-border-color);
}

.ledger-form__group-label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.6rem;
}

.ledger-form__field {
  margin-bottom: 0.75rem;
}

.ledger-form__field:last-child {
  margin-bottom: 0;
}

.ledger-form__field label {
  display: block;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
}

.ledger-form__switches {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--bs-border-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ledger-form__switches .form-check-input:checked {
  background-color: var(--variant-accent);
  border-color: var(--variant-accent);
}

.ledger-form__submit {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.ledger-form__submit .btn {
  border-color: var(--variant-accent);
  color: var(--variant-accent);
}

.ledger-form__submit .btn:hover {
  background-color: var(--variant-accent);
  border-color: var(--variant-accent);
  color: var(--bs-body-bg);
}

@media (max-width: 480px) {
  .ledger-form__row {
    grid-template-columns: 1fr;
  }
}

/* Полностраничный фолбэк (add_to_collection.html, без JS/прямой заход по URL) — та же
   .ledger-form карточка, просто в потоке страницы вместо модалки. */
.ledger-form-page .ledger-form {
  border: 1px solid var(--bs-border-color);
  max-width: 640px;
  overflow: hidden;
}

/* Переключатель языка в шапке (menu.html) — обычный <select>, не сегментированные кнопки:
   задуман на много языков в перспективе, кнопки-toggle (как Монеты/Банкноты) масштабируются
   только на два варианта. form-select у Bootstrap по умолчанию растягивается на 100% ширины
   родителя — здесь родитель inline-form внутри flex-шапки, без auto-ширины select раздулся бы
   на всё доступное место. */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-switcher__icon {
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.lang-switcher__select {
  width: auto;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Компактный hero главной страницы (issue Бориса 2026-08-13) — заголовок + одна короткая строка +
   кнопка, без длинного описательного абзаца (сайдбар со странами и так объясняет, что за сайт).
   Подстраивается под тему сайта (--bs-body-bg/--bs-emphasis-color), не собственный тёмный блок
   независимо от переключателя, как в первом черновике. */
.hero {
  padding: 2rem 0 1.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 1.75rem;
}

.hero__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 0.6rem;
}

.hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  color: var(--bs-emphasis-color);
}

.hero__line {
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
  margin: 0 0 1.1rem;
}

.hero__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Статистика каталога под hero на главной (issue Бориса 2026-08-24) — те же цифровые акценты,
   что уже использует .hero__eyebrow (--brand-accent), но крупнее и как отдельные плитки, не
   строка текста: это витрина масштаба каталога, должна считываться с одного взгляда. */
.catalog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.catalog-stats__item {
  display: flex;
  flex-direction: column;
}

.catalog-stats__number {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--brand-accent);
  line-height: 1.1;
}

.catalog-stats__label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero .btn-primary {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent);
  --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-color: var(--bs-body-bg);
  --bs-btn-hover-color: var(--bs-body-bg);
  opacity: 1;
}

/* Лента "недавно добавлено" — полноценный блок, не узкая полоска (issue Бориса 2026-08-13).
   Листается стрелками влево/вправо по количеству (не по дате, см. views.py CatalogHome) — источник
   данных сейчас Collectible.time_create (наполнение каталога), позже переключится на активность
   коллекций пользователей, когда появится реальная база пользователей. */
.recent-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.recent-block__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
}

.recent-block__nav {
  display: flex;
  gap: 0.4rem;
  flex: none;
}

.recent-block__nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-emphasis-color);
  text-decoration: none;
  line-height: 1;
}

.recent-block__nav-btn:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.recent-block__nav-btn[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* Карточки предметов в списке фильтрации/периода (index.html) — тот же аверс+реверс паттерн,
   что у "Недавно добавлено" (.recent-item-photos), issue Бориса 2026-08-14: раньше это был
   голый текстовый список без единой фотографии, единственное место на сайте, где карточка
   предмета не показывала обе стороны. Кнопка "+" — оверлеем поверх карточки, не hover-reveal —
   этот список могут листать и с тач-экрана, где :hover не сработает. */
.catalog-item-card {
  position: relative;
}

/* Подсветка типов, уже собранных в коллекции пользователя (issue Бориса 2026-08-19) — мягкая
   заливка через bootstrap-переменные --bs-success-bg-subtle/--bs-success-border-subtle, а не
   свой цвет: они уже адаптированы под тёмную/светлую тему сайта (см. свитчер темы в menu.html),
   заливка вручную пришлось бы дублировать в обеих. Кнопка "+" остаётся кликабельной и здесь —
   она добавляет ЕЩЁ один экземпляр (другой год/состояние/дубликат), это не тумблер "есть/нет",
   поэтому не блокируется и не прячется, только красится в success вместо primary (см. index.html). */
.catalog-item-card--owned {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
}

.catalog-list-table__row--owned,
.variant-list-table__row--owned {
  /* --bs-table-bg, не background-color напрямую — ячейки таблицы красит правило Bootstrap
     `.table > :not(caption) > * > *` через var(--bs-table-bg), и у него та же специфичность,
     что у обычного селектора по классу строки; переопределить саму переменную надёжнее, чем
     спорить за порядок каскада. .variant-list-table__row--owned — та же подсветка на странице
     Типа (detail.html, таблица "Разновидности", issue Бориса 2026-08-19: "для целостности"),
     хотя там владение и так видно по развёрнутой владельческой подстроке под вариантом —
     сама строка варианта раньше никак не выделялась среди остальных до раскрытия подстроки. */
  --bs-table-bg: var(--bs-success-bg-subtle);
}

.catalog-item-card__add {
  /* !important — единственное, что реально перебивает фон здесь: ни background-color напрямую,
     ни переопределение самой переменной --bs-btn-bg (тот же трюк, что уже работал для
     .badge-outline и других мест этого файла) не долетают до итогового цвета — Bootstrap где-то
     в цепочке .btn-outline-primary держит фон прозрачным сильнее, чем ожидается по спецификации
     специфичности. Точечный !important на одном косметическом свойстве одной кнопки — не стоит
     дальше искать точную причину. */
  --bs-btn-bg: var(--bs-body-bg);
  background-color: var(--bs-body-bg) !important;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

/* Превью аверс+реверс по наведению на строку списка (issue Бориса 2026-08-14) — список остался
   компактным текстом (не заменён карточками), но при наведении/фокусе на ссылку всплывает то же
   фото, что уже показано в режиме "Плитка". Чистый CSS (:hover/:focus-visible), без JS — и не
   работает по тапу на тач-экранах, что нормально: это опциональная подсказка поверх списка,
   плитка остаётся основным способом посмотреть фото на тач-устройствах. loading="lazy" на
   <img> в шаблоне — превью скрыты по умолчанию, но без lazy браузер всё равно скачал бы все
   фото списка сразу.

   :focus-visible, не :focus-within (issue Бориса 2026-08-17: "открытие на среднюю кнопку мыши —
   фото залипает") — открытие ссылки средним кликом (новая фоновая вкладка) в некоторых браузерах
   всё равно фокусирует саму ссылку в текущей вкладке, а blur может не наступить, пока фоновая
   вкладка открыта — превью зависало навсегда поверх списка. :focus-visible срабатывает только на
   действительно клавиатурную навигацию (эвристика браузера), не на клик мышью любой кнопкой,
   так что клавиатурная доступность сохраняется, а баг с залипанием — нет. .list-item-preview
   теперь всегда сама ссылка (не обёртка вокруг неё) везде, где используется этот класс, поэтому
   один общий селектор работает без :has(). */
.list-item-preview {
  position: relative;
  display: inline-block;
}

.list-item-preview__photos {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  margin-top: 4px;
  gap: 1px;
  background: var(--bs-border-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.list-item-preview:hover .list-item-preview__photos,
.list-item-preview:focus-visible .list-item-preview__photos {
  display: flex;
}

/* Сайдбар "Другие монеты/банкноты периода" — превью выезжает В СТОРОНУ от ссылки, не вниз (issue
   Бориса 2026-08-25: снизу оно перекрывало соседние строки узкого списка, где строки идут
   плотно одна за другой). Общее правило .list-item-preview__photos (top:100%/left:0) не трогаем
   — в index.html/collection.html превью открывается из отдельной колонки-миниатюры, там вниз
   не мешает соседним строкам так же сильно.

   ВЛЕВО, не вправо (issue Бориса 2026-08-31: "органичней") — сайдбар справа от основного
   контента, превью вправо вылезало за пределы страницы/в пустоту, а не туда, где взгляд уже на
   фото самой монеты слева. right:100% отсчитывается от правого края ссылки наружу — не left:
   отрицательным значением, иначе ширина превью (180×2px) должна была бы быть известна заранее. */
.detail-siblings-list .list-item-preview__photos {
  left: auto;
  right: 100%;
  top: 0;
  margin-top: 0;
  margin-right: 4px;
}

.list-item-preview__photos img,
.list-item-preview__placeholder {
  width: 180px;
  height: 180px;
  object-fit: cover;
  background-color: var(--bs-tertiary-bg);
  display: block;
}

/* Тот же кроп-в-квадрат для банкнот в табличном виде (issue Бориса 2026-08-22, продолжение
   .recent-item-img--banknote выше) — .banknote-thumb на <img>/пустом <span> перебивает
   object-fit/height родительских правил (40px/120px/180px), ширина остаётся как задана ими,
   высота пересчитывается через aspect-ratio, поэтому один общий модификатор работает сразу для
   всех трёх размеров миниатюр (маленькая постоянная, увеличенная в .catalog-list-table,
   всплывающая по наведению), без отдельных правил под каждый размер. */
.collection-table__thumbs-small img.banknote-thumb,
.list-item-preview__photos img.banknote-thumb,
.collection-table__thumb--empty.banknote-thumb,
.list-item-preview__placeholder.banknote-thumb {
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: contain;
}

/* Таблица "Моя коллекция" (collection.html), сгруппированная по стране (issue Бориса
   2026-08-14) — раньше был плоский список без структуры. table-group-divider (Bootstrap) уже
   рисует разделительную полосу между <tbody> разных стран; сама строка-заголовок страны
   дополнительно выделена фоном var(--bs-tertiary-bg), чтобы граница между странами читалась
   с первого взгляда, а не только по тонкой линии. */
.collection-table__country-row th {
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Флаг страны в заголовке группы "Моей коллекции" — issue Бориса 2026-08-18: "увеличь картинки
   флагов, минимум раза в 4... флаги красиво смотрятся и украшают сайт". 80×60 — ровно ×4 от
   базового .flag-icon (20×15), не берём готовый .flag-icon-lg (160×120, для героя страницы под
   h1/h2) — в компактной строке таблицы с бейджем количества такой большой флаг перевесил бы
   остальной контент строки. */
.collection-table__country-row .flag-icon {
  width: 80px;
  height: 60px;
  margin-right: 10px;
}

/* Аверс+реверс вместо одной фотографии (issue Бориса 2026-08-14: "сделаем 2 фотографии
   аверс+реверс") — .collection-table__thumbs это тот же триггер, что .list-item-preview
   (см. правила list-item-preview__photos выше, переиспользуем 1-в-1: те же 180×180 при
   наведении/фокусе, без дублирования CSS), только сама "точка наведения" здесь не текстовая
   ссылка, а пара маленьких превью-миниатюр. */
.collection-table__thumb-cell {
  width: 90px;
}

.collection-table__thumbs-small {
  display: flex;
  gap: 1px;
}

.collection-table__thumbs-small img,
.collection-table__thumb--empty {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}

/* Таблица разновидностей на странице типа (detail.html), список-режим — issue Бориса
   2026-08-14: "таблицу делаем более компактной, она не обязательно должна занимать всю
   горизонталь" (w-auto — см. также .table.w-auto в index.html для того же приёма) + "кнопка
   добавить - вне таблицы но в той же строке": последняя колонка (variant-list-table__actions)
   без границы/фона — та же строка технически, но визуально не выглядит табличным столбцом
   данных, а читается как отдельное действие сбоку. */
.variant-list-table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
}

.variant-list-table th,
.variant-list-table td {
  padding-right: 1.25rem;
}

.variant-list-table__actions {
  border: none !important;
  background: transparent;
  padding-right: 0;
}

/* Подстрока "уже в коллекции" под строкой разновидности (issue Бориса 2026-08-15: сначала
   была в последней ячейке действий — визуально попадала под колонку Mintage/Details, было
   непонятно, к чему она относится; затем — раньше был отдельный "Убрать" в ряд с "Добавить"
   на каждый экземпляр, при 2+ превращалось в частокол одинаковых кнопок без пояснения).
   Теперь отдельный <tr> с colspan на всю ширину таблицы сразу под строкой варианта — растянут
   на все колонки, а не зажат в одну ячейку. border-top: none — визуально приклеена к своей
   строке варианта сверху, а не читается как ещё одна самостоятельная строка таблицы. */
.variant-list-table__owned-row td {
  padding-top: 0;
  padding-bottom: 0.5rem;
  border-top: none;
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}

.variant-list-table__owned-row .btn-link {
  vertical-align: baseline;
}

/* Два <select> (месяц + год) поля "Дата приобретения" (common/forms.py, MonthYearWidget) —
   issue Бориса 2026-08-17. Bootstrap .form-select — display:block + width:100%, поэтому без
   этой обёртки два select'а вставали бы друг под другом на всю ширину, а не рядом. */
.month-year-widget {
  display: flex;
  gap: 0.5rem;
}

.month-year-widget select {
  width: auto;
  flex: 1;
}

/* Стрелки листания в модалке фото (#photoModal, detail.html/variant_detail.html) — issue
   Бориса 2026-08-17. Скрыты по умолчанию (d-none в разметке), JS (script.js) убирает d-none,
   только если .zoomable-фото на странице больше одного — листать между аверсом и реверсом
   (и доп. фото, если есть) есть смысл, между единственным фото — нет. */
.photo-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-emphasis-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.photo-modal-nav:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.photo-modal-nav--prev {
  left: 0.5rem;
}

.photo-modal-nav--next {
  right: 0.5rem;
}

/* Страница входа (accounts/login.html) — issue Бориса 2026-08-18: "делаем дизайн для страницы
   логина", раньше голый {{ form.as_p }} без единого класса. Тот же язык, что у .ledger-form/
   .specimen: узкая карточка, гурт-полоска сверху акцентным цветом бренда (не --variant-accent
   монеты/банкноты — тут никакого предмета нет, обычный --brand-accent), Fraunces на заголовке.
   register.html сейчас выглядит так же голо — сознательно не трогаем, отдельная задача. */
.auth-card-wrap {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg, var(--brand-accent) 0, var(--brand-accent) 2px, transparent 2px, transparent 5px
  );
  opacity: 0.55;
}

.auth-card__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 0.5rem;
}

.auth-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.75rem;
  margin: 0 0 1.5rem;
  color: var(--bs-emphasis-color);
}

.auth-card__field {
  margin-bottom: 1rem;
}

.auth-card__field label {
  display: block;
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.3rem;
}

.auth-card__submit {
  margin-top: 1.25rem;
}

.auth-card__submit .btn {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.auth-card__submit .btn:hover {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--bs-body-bg);
}

.auth-card__links {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--bs-border-color);
  text-align: center;
  font-size: 0.85rem;
}

.auth-card__links-sep {
  margin: 0 0.5rem;
  color: var(--bs-secondary-color);
}

/* Счётчик в правом верхнем углу вкладки Регулярные/Памятные/Коллекционные (index.html) — issue
   Бориса 2026-08-19, тот же приём позиционирования, что у .notif-bell-badge (position:absolute,
   top/right в минус). z-index нужен, т.к. кнопки внутри .btn-group у Bootstrap перекрывают друг
   друга по краю (отрицательный margin-left для схлопывания рамок) — без z-index бейдж соседней
   кнопки мог бы перекрыть его. */
.tab-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  font-size: 0.6rem;
  padding: 0.2em 0.4em;
}

/* Миниатюры в списке "Страна"/"Период" (index.html, .catalog-list-table) крупнее, чем базовые
   40px у .collection-table__thumbs-small (issue Бориса 2026-08-19: "фото надо сделать больше.
   Таким же, как в режиме Плитка") — не трогаем сам .collection-table__thumbs-small, он общий
   с "Моей коллекцией" (collection.html), там просьба не касалась размера. 120px — фото в
   Плитке (.recent-item-img) само responsive (50% ширины карточки row-cols-*), точного
   "одинакового" размера в фиксированной ячейке таблицы не бывает; 120px — то, что Плитка
   реально показывает на типичном десктопном экране (~1400px), взято как ориентир.
   thumb-cell шире под них (250px = 2×120 + 1px gap + запас на отступы ячейки). */
.catalog-list-table .collection-table__thumb-cell {
  width: 250px;
}

.catalog-list-table .collection-table__thumbs-small img,
.catalog-list-table .collection-table__thumb--empty {
  width: 120px;
  height: 120px;
}

/* Тот же banknote-thumb модификатор (см. выше), но здесь нужно явно перебить именно это
   126px-переопределение — та же специфичность (2 класса + тег), а это правило идёт в файле
   позже, поэтому без явного повтора здесь высота обратно схлопнулась бы в квадрат 120×120. */
.catalog-list-table .collection-table__thumbs-small img.banknote-thumb,
.catalog-list-table .collection-table__thumb--empty.banknote-thumb {
  height: auto;
  aspect-ratio: 2 / 1;
}

/* Заголовки исторических периодов внутри списка предметов страны/группы (issue Бориса
   2026-08-22: "визуальное разделение списка на Периоды") — тонкая верхняя граница вместо
   полноценной карточки/фона: список и так длинный, отдельные подложки под каждый заголовок
   визуально утяжелили бы страницу больше, чем разделительная линия. Первый заголовок
   (:first-child) — без отступа/линии сверху, вплотную к переключателю Список/Плитка. */
.catalog-period-heading {
  margin: 2rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 1.1rem;
}

.catalog-period-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.catalog-period-heading a {
  color: inherit;
  text-decoration: none;
}

.catalog-period-heading a:hover {
  text-decoration: underline;
}

.catalog-period-heading-row td {
  padding-top: 1.5rem;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.catalog-period-heading-row:first-child td {
  padding-top: 0.5rem;
}

.catalog-period-heading-row a {
  color: inherit;
  text-decoration: none;
}

.catalog-period-heading-row a:hover {
  text-decoration: underline;
}

/* Разбивка по валюте ("1 динар = 1000 филсов") под заголовком периода (issue Бориса
   2026-08-22) — своей строкой, а не через запятую после диапазона лет, чтобы не удлинять и
   так не короткую шапку периода ещё сильнее вбок. */
.catalog-period-heading__currency,
.catalog-period-heading-row .catalog-period-heading__currency {
  display: block;
  margin-top: 0.15rem;
}

/* Номинал в "Расширенных фильтрах" — чекбоксы по представленным значениям вместо диапазона
   от/до (issue Бориса 2026-08-31). Django-виджет CheckboxSelectMultiple по умолчанию рендерит
   один вариант на строку — тесно для десятка коротких номиналов, раскладываем в строку.
   max-height+overflow — у стран с большим разбросом номиналов список может стать очень
   длинным (issue Бориса 2026-08-31, тем же днём) — окно со скроллом вместо растягивания
   всей страницы. */
.filter-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem 1rem;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
}

.filter-checkbox-group > div {
  white-space: nowrap;
}

/* Кнопка "Расширенные фильтры" — <summary> сам по себе не поддерживает Bootstrap-классы
   до конца: браузер добавляет собственный треугольник-маркер (::marker/::-webkit-details-marker),
   которого нет ни у одной другой кнопки на странице (issue Бориса 2026-08-31, "выбивается из
   общего дизайна"). display:inline-block + list-style:none — убирает и маркер, и стандартный
   list-item-подобный intrinsic size <summary>, чтобы .btn выглядела как обычная кнопка. */
.filter-details > summary {
  list-style: none;
  display: inline-block;
}

.filter-details > summary::-webkit-details-marker {
  display: none;
}

.filter-details > summary::marker {
  content: '';
}

/* Кнопки "предыдущий/следующий предмет периода" (detail.html) — у памятных/коллекционных монет
   название может быть очень длинным, без ограничения кнопка растягивалась на всю ширину.
   inline-block обязателен: overflow/text-overflow не работают на элементах со сдвигом
   baseline по умолчанию у <a>, а .btn уже задаёт inline-block, но max-width тут переопределяет. */
.sibling-nav-btn {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

@media (max-width: 576px) {
  .sibling-nav-btn {
    max-width: 140px;
  }
}