/* ==========================================================================
   Секции: шапка, подвал, первый экран, блоки главной.
   Все размеры сняты с макета Figma.
   ========================================================================== */

/* ---------------- Шапка (Figma Header: h 76, поля 120, линия снизу) ------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 76px;
  background: var(--c-bg-base);
  border-bottom: 1px solid var(--c-border-subtle);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--c-border-subtle), 0 8px 24px rgba(35, 32, 28, .04); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; height: 100%;
}

.brand { display: flex; flex-direction: column; gap: 1px; flex: none; }
.brand__name { font: var(--t-display-s); color: var(--c-text-primary); }
.brand__sub {
  font-family: var(--f-sans); font-size: 10px; line-height: 14px; font-weight: 400;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-text-muted);
}

.main-nav__list { display: flex; align-items: center; gap: 22px; }
.main-nav__link {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--c-text-secondary);
  transition: color var(--dur) var(--ease);
}
.main-nav__link:hover { color: var(--c-text-primary); }
.main-nav__underline { display: block; width: 0; height: 1px; background: var(--c-accent-gold); transition: width var(--dur) var(--ease); }
.main-nav__item.is-current .main-nav__link { color: var(--c-text-primary); }
.main-nav__item.is-current .main-nav__underline { width: 20px; }

.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn--cart { position: relative; }
.icon-btn__dot {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent-gold);
}
.lang { display: flex; align-items: center; gap: 6px; padding-left: 12px; font: var(--t-label-meta); }
.lang__item { color: var(--c-text-muted); }
.lang__item.is-current { color: var(--c-text-primary); }
.lang__item:hover { color: var(--c-accent-deep); }
.lang__sep { color: var(--c-border-strong); }
.burger { display: none; }

/* ---------------- Мобильное меню: полноэкранное ---------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--c-bg-base);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  visibility: hidden;
}
.mobile-menu.is-open { transform: none; visibility: visible; }
.mobile-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad-x);
}
.mobile-menu__list { padding-top: 12px; }
.mobile-menu__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--c-border-subtle);
  font: var(--t-display-m); letter-spacing: var(--t-display-m-ls);
  color: var(--c-text-primary);
}
.mobile-menu__list a svg { width: 14px; height: 10px; color: var(--c-text-muted); }
.mobile-menu__bottom { margin-top: auto; padding: 28px var(--pad-x) 32px; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu__langs { display: flex; gap: 8px; }
.mobile-menu__langs a {
  flex: 1; text-align: center; padding: 11px 0; border-radius: var(--r-btn);
  border: 1px solid var(--c-border-subtle); background: var(--c-bg-card);
  font: var(--t-label-m); color: var(--c-text-secondary);
}
.mobile-menu__langs a.is-current { background: var(--c-bg-ink); border-color: var(--c-bg-ink); color: var(--c-text-inverse); }
.mobile-menu__actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------------- Первый экран (Figma Hero) ---------------- */
.hero {
  display: flex; align-items: center; gap: 72px;
  background: var(--c-bg-base);
  /* Левый край текста совпадает с контейнером страницы на любой ширине экрана,
     а фотография по-прежнему уходит в правый край. */
  padding-left: max(var(--pad-x), calc((100% - var(--container)) / 2));
}
.hero__copy {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding-block: 112px;
  max-width: 608px; /* длина строки как в макете, не растягивается на широких экранах */
}
.hero__title { font: var(--t-display-xl); letter-spacing: var(--t-display-xl-ls); color: var(--c-text-primary); }
.hero__lead { font: var(--t-body-l); color: var(--c-text-secondary); white-space: pre-line; }
.hero__quote { display: flex; flex-direction: column; gap: 6px; }
.hero__quote q { font: var(--t-quote); color: var(--c-text-muted); quotes: none; }
.hero__ref { font: italic 300 18px/24px var(--f-serif); color: var(--c-text-muted); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__media {
  position: relative; flex: none;
  width: 640px; align-self: stretch; overflow: hidden;
}
/* Абсолютное позиционирование: иначе высота снимка задаёт высоту секции,
   а по макету высоту определяет колонка текста (548). */
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 2%;
}
/* Вуаль 12 % и растворение слева — как в макете, цвета из токенов */
.hero__media::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--c-bg-base); opacity: .12;
}
.hero__media::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 240px; z-index: 2;
  background: linear-gradient(90deg, var(--c-bg-base) 0%, color-mix(in srgb, var(--c-bg-base) 45%, transparent) 55%, transparent 100%);
}

/* ---------------- Блок «Поиск по темам» ---------------- */
.topics__tags { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------- Списки на главной ---------------- */
.list-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: var(--t-body-s); color: var(--c-text-secondary); }
.list-note svg { color: var(--c-accent-gold); width: 6px; height: 6px; flex: none; }

/* ---------------- Подвал (Figma Footer) ---------------- */
.site-footer { background: var(--c-bg-soft); padding: 64px 0 32px; }
.site-footer__top { display: flex; align-items: flex-start; gap: var(--gutter); margin-bottom: 48px; }
.site-footer__brand { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; flex: none; }
.site-footer__col--pages { width: 180px; }
.site-footer__col--cat { width: 220px; }
.site-footer__col--contacts { width: 240px; }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; }
.site-footer__list a, .site-footer__list li { font: var(--t-body-s); color: var(--c-text-secondary); }
.site-footer__list a:hover { color: var(--c-accent-deep); }
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials__item {
  padding: 6px 12px; border-radius: var(--r-btn);
  border: 1px solid var(--c-border-subtle); background: var(--c-bg-card);
  color: var(--c-text-secondary);
}
.socials__item:hover { border-color: var(--c-border-strong); color: var(--c-text-primary); }
.site-footer__divider { height: 1px; background: var(--c-border-subtle); }
.site-footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-24);
  margin-top: 48px; flex-wrap: wrap;
}
.site-footer__legal-links { display: flex; gap: var(--s-24); flex-wrap: wrap; }

/* ---------------- Планшет ---------------- */
/* Меню в макете занимает 578px, логотип 224, иконки с языками 283.
   С учётом полей это помещается только от 1400px — ниже показываем бургер. */
@media (max-width: 1399px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 1199px) {
  .hero__media { width: 46%; }
}
@media (max-width: 1023px) {
  .lang { display: none; }
  .site-footer__top { flex-wrap: wrap; }
  .site-footer__brand { flex: 1 1 100%; }
  .site-footer__col--pages, .site-footer__col--cat, .site-footer__col--contacts { width: auto; flex: 1 1 30%; }
}

/* ---------------- Мобильные ---------------- */
@media (max-width: 639px) {
  .site-header { height: 64px; }
  .site-header__inner { gap: 12px; }
  .brand__name { font-size: 17px; line-height: 22px; }
  .brand__sub { display: none; }
  .icon-btn { width: 44px; height: 44px; }

  .hero { flex-direction: column; gap: 0; padding-left: 0; }
  .hero__media { width: 100%; height: 340px; align-self: auto; order: -1; }
  .hero__media::after {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 140px;
    background: linear-gradient(180deg, transparent 0%, var(--c-bg-base) 100%);
  }
  .hero__copy { padding: 32px var(--pad-x) 36px; gap: 16px; max-width: none; width: 100%; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .site-footer { padding: 40px 0 28px; }
  .site-footer__top { flex-direction: column; gap: 24px; margin-bottom: 24px; }
  .site-footer__col { width: auto !important; }
  .site-footer__legal { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------------- Страница каталога (Figma «02 · Каталог нот») ---------------- */
.page-head { background: var(--c-bg-base); padding: 40px 0 32px; }
.page-head .wrap { display: flex; flex-direction: column; gap: 14px; }

.catalog-search { background: var(--c-bg-base); padding-bottom: 32px; }
.searchbar { display: flex; gap: 12px; align-items: center; }
.searchbar__field {
  flex: 1 1 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 17px; /* + рамка 1px = 56 по макету */
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn);
}
.searchbar__icon { color: var(--c-text-muted); width: 17px; height: 17px; }
.searchbar__input {
  flex: 1 1 auto; border: 0; background: none; outline: none;
  font: var(--t-body-m); color: var(--c-text-primary);
}
.searchbar__input::placeholder { color: var(--c-text-muted); }

.catalog-body { background: var(--c-bg-base); padding-bottom: 80px; }
.catalog-body__inner { display: flex; align-items: flex-start; gap: 24px; }

.filters {
  position: sticky; top: 96px;
  flex: none; width: 280px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card);
  overflow: hidden;
}
.filters__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-border-subtle);
}
.filters__group {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-border-subtle);
}
.filters__group:last-child { border-bottom: 0; padding-bottom: 20px; }
.filters__option { display: flex; align-items: center; gap: 10px; }
.filters__box {
  flex: none; width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--c-border-strong); background: var(--c-bg-card);
  display: inline-flex; align-items: center; justify-content: center;
}
.filters__box svg { width: 9px; height: 7px; color: var(--c-text-inverse); opacity: 0; }
.filters__option.is-on .filters__box { background: var(--c-bg-ink); border-color: var(--c-bg-ink); }
.filters__option.is-on .filters__box svg { opacity: 1; }
.filters__label { flex: 1 1 auto; font: var(--t-body-s); color: var(--c-text-secondary); }
.filters__option.is-on .filters__label { color: var(--c-text-primary); }
.filters__count { font: var(--t-body-xs); color: var(--c-text-muted); }
.filters__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.catalog-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.catalog-toolbar { display: flex; align-items: center; gap: 12px; min-height: 39px; }
/* Счётчик слева, сортировка и переключатель вида — вместе справа, как в макете. */
.catalog-toolbar > :first-child { margin-right: auto; }
.catalog-toolbar__controls { display: flex; align-items: center; gap: 12px; }
.select--sm { width: auto; padding: 8px 40px 8px 14px; font: var(--t-body-s); }

.catalog-pagination { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
/* Подпись слева, стрелки и номера — одной группой справа. */
.catalog-pagination > :first-child { margin-right: auto; }
.catalog-pagination ul.page-numbers { display: flex; gap: 8px; border: 0; background: none; padding: 0; min-width: 0; height: auto; }
.catalog-pagination li { display: flex; }
.catalog-pagination a.page-numbers,
.catalog-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-btn);
  background: var(--c-bg-card); font: var(--t-label-m); color: var(--c-text-primary);
}
.catalog-pagination .page-numbers.current:not(ul) { background: var(--c-bg-ink); border-color: var(--c-bg-ink); color: var(--c-text-inverse); }

.catalog-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 72px 24px; text-align: center;
  background: var(--c-bg-card); border: 1px solid var(--c-border-subtle); border-radius: var(--r-card);
}

/* Панель фильтров уходит наверх только на узких экранах.
   При вертикальной раскладке колонки растягиваются: иначе flex-start
   сжимает их по содержимому. */
@media (max-width: 767px) {
  .catalog-body__inner { flex-direction: column; align-items: stretch; }
  .filters { position: static; width: 100%; }
  .catalog-list { width: 100%; }
}
/* На средних экранах панель немного у́же, чтобы списку хватало места */
@media (max-width: 1199px) {
  .filters { width: 248px; }
  .catalog-body__inner { gap: 20px; }
}
@media (max-width: 639px) {
  .page-head { padding: 24px 0 20px; }
  .searchbar { flex-direction: column; align-items: stretch; }
  .catalog-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .catalog-pagination { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Обновление каталога без перезагрузки: лёгкое затухание на время запроса */
.catalog-body__inner.is-loading .catalog-list,
.catalog-body__inner.is-loading .filters { opacity: .55; transition: opacity .15s linear; pointer-events: none; }

/* ---------------- Страница произведения (Figma «03») ---------------- */
.work-crumbs { background: var(--c-bg-base); padding: 32px 0 24px; }
.work-main { background: var(--c-bg-base); padding-bottom: 64px; }
.work-main__inner { display: flex; align-items: flex-start; gap: 48px; }

.work-preview { flex: none; width: 600px; display: flex; flex-direction: column; gap: 16px; }
.work-sheet {
  position: relative; overflow: hidden;
  background: var(--c-bg-card); border: 1px solid var(--c-border-subtle); border-radius: var(--r-card);
}
.work-sheet__img { display: block; width: 100%; height: auto; }
.work-sheet__stub { display: flex; flex-direction: column; gap: 30px; padding: 64px 60px; }
.work-sheet__stave { display: block; height: 29px; background:
  repeating-linear-gradient(180deg, var(--c-border-strong) 0 1px, transparent 1px 7px); }
.work-sheet__stub .work-sheet__stave:nth-child(n+6) { opacity: .45; }
.work-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.work-pager__controls { display: flex; gap: 8px; }

.work-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.work-tags .chip--sm { padding: 7px 12px; font: var(--t-body-xs); }

.work-specs { border: 1px solid var(--c-border-subtle); border-radius: var(--r-card); overflow: hidden; }
.work-specs__row { display: flex; gap: 16px; padding: 12px 18px; background: var(--c-bg-card); border-bottom: 1px solid var(--c-border-subtle); }
.work-specs__row:last-child { border-bottom: 0; }
.work-specs__key { width: 140px; flex: none; font: var(--t-body-s); color: var(--c-text-muted); }
.work-specs__val { flex: 1 1 auto; font: var(--t-body-s); color: var(--c-text-primary); }

.work-audio {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: var(--r-card); background: var(--c-bg-soft);
}
.work-audio__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.work-audio__bar { display: block; height: 3px; border-radius: 2px; background: var(--c-border-strong); }

.work-buy {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: var(--r-card);
  background: var(--c-bg-card); border: 1px solid var(--c-border-strong);
}
.work-buy__price { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.work-buy__list { display: flex; flex-direction: column; gap: 8px; }
.work-buy__list li { display: flex; align-items: center; gap: 10px; font: var(--t-body-s); color: var(--c-text-secondary); }
.work-buy__list svg { width: 5px; height: 5px; color: var(--c-accent-gold); }

.work-text .wrap { display: flex; flex-direction: column; gap: 20px; }
.work-text .t-quote { max-width: 680px; color: var(--c-text-primary); }

@media (max-width: 1199px) {
  .work-main__inner { flex-direction: column; }
  .work-preview { width: 100%; }
}
@media (max-width: 639px) {
  .work-crumbs { padding: 20px 0 16px; }
  .work-sheet__stub { padding: 32px 24px; gap: 18px; }
  .work-pager { flex-direction: column; align-items: flex-start; gap: 10px; }
  .work-specs__key { width: 110px; }
}

/* ---------------- Магазин книг (Figma «05») ---------------- */
.shop-filter { background: var(--c-bg-base); padding-bottom: 28px; }
.shop-filter__inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-filter__spacer { flex: 1 1 auto; }
.shop-filter .chip { padding: 9px 16px; }

.shop-grid { background: var(--c-bg-base); padding-bottom: 80px; }
.shop-grid__items {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

.book-card {
  display: flex; flex-direction: column;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.book-card:hover { border-color: var(--c-border-strong); }
.book-card__cover {
  display: block; height: 380px; background: var(--c-bg-soft-alt);
}
.book-card__cover img { width: 100%; height: 100%; object-fit: contain; }
.book-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; flex: 1 1 auto; }
.book-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.book-card__title { font: var(--t-display-s); color: var(--c-text-primary); }
.book-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }

.shop-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 20px; margin-top: 24px;
  background: var(--c-bg-soft); border-radius: var(--r-card);
}
.shop-note svg { width: 6px; height: 6px; color: var(--c-accent-gold); flex: none; margin-top: 8px; }

@media (max-width: 1023px) { .shop-grid__items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
  .shop-grid__items { grid-template-columns: 1fr; gap: 16px; }
  .book-card__cover { height: 320px; }
  .shop-grid { padding-bottom: 40px; }
}

/* ---------------- Страница книги (Figma «06») ---------------- */
.book-main { background: var(--c-bg-base); padding-bottom: 64px; }
.book-main__inner { display: flex; align-items: flex-start; gap: 56px; }

.book-gallery { flex: none; width: 520px; display: flex; flex-direction: column; gap: 14px; }
.book-gallery__cover {
  height: 620px; border-radius: var(--r-card); overflow: hidden;
  background: var(--c-bg-soft-alt);
  display: flex; align-items: center; justify-content: center;
}
.book-gallery__cover img { width: 100%; height: 100%; object-fit: contain; }
.book-gallery__spreads { display: flex; gap: 12px; }
.book-gallery__thumb {
  flex: 1 1 0; height: 120px; border-radius: var(--r-btn); overflow: hidden;
  background: var(--c-bg-soft); border: 1px solid var(--c-border-subtle);
  display: flex; align-items: center; justify-content: center;
}
.book-gallery__thumb.is-current { border-color: var(--c-accent-gold); border-width: 1.5px; }
.book-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.book-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.book-choice { display: flex; flex-direction: column; gap: 12px; }
.book-choice__options { display: flex; flex-wrap: wrap; gap: 10px; }
.book-choice__opt {
  padding: 11px 18px; border-radius: var(--r-btn);
  border: 1px solid var(--c-border-subtle); background: var(--c-bg-card);
  font: var(--t-label-m); color: var(--c-text-secondary);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.book-choice__opt:hover { border-color: var(--c-border-strong); color: var(--c-text-primary); }
.book-choice__opt.is-on { border-color: var(--c-bg-ink); border-width: 1.5px; color: var(--c-text-primary); padding: 10px 17px; }
.book-ship { display: flex; align-items: flex-start; gap: 8px; }
.book-ship svg { width: 5px; height: 5px; color: var(--c-accent-gold); flex: none; margin-top: 7px; }

.book-desc { background: var(--c-bg-soft); padding: 64px 0; }
.book-desc__inner { display: flex; align-items: flex-start; gap: 56px; }
.book-desc__about { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.book-desc__toc { flex: none; width: 420px; display: flex; flex-direction: column; gap: 12px; }
.book-toc__row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--c-border-subtle);
}
.book-toc__row:last-child { border-bottom: 0; }
.book-toc__num { width: 24px; flex: none; font: var(--t-body-xs); color: var(--c-accent-deep); }
.book-toc__title { flex: 1 1 auto; font: var(--t-body-s); color: var(--c-text-primary); }
.book-toc__note { font: var(--t-body-xs); color: var(--c-text-muted); }

@media (max-width: 1199px) {
  .book-main__inner, .book-desc__inner { flex-direction: column; }
  .book-gallery, .book-desc__toc { width: 100%; }
  .book-gallery__cover { height: 520px; }
}
@media (max-width: 639px) {
  .book-gallery__cover { height: 380px; }
  .book-gallery__thumb { height: 84px; }
  .book-desc { padding: 40px 0; }
}

/* ---------------- Новости (Figma «11») ---------------- */
.news-filter { background: var(--c-bg-base); padding-bottom: 28px; }
.news-filter__inner { display: flex; align-items: flex-start; gap: 16px; }
/* Чипы переносятся сами, счётчик остаётся справа на первой строке — как в макете. */
.news-filter__chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.news-filter__count { flex: none; padding-top: 10px; white-space: nowrap; }
.news-filter .chip { padding: 9px 16px; }
.news-grid { background: var(--c-bg-base); padding-bottom: 32px; }
.news-pagination { background: var(--c-bg-base); padding-bottom: 80px; }
.news-pagination__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.news-pagination ul.page-numbers { display: flex; gap: 8px; border: 0; background: none; padding: 0; min-width: 0; height: auto; }
.news-pagination li { display: flex; }
.news-pagination a.page-numbers,
.news-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-btn);
  background: var(--c-bg-card); font: var(--t-label-m); color: var(--c-text-primary);
}
.news-pagination .page-numbers.current:not(ul) { background: var(--c-bg-ink); border-color: var(--c-bg-ink); color: var(--c-text-inverse); }

/* ---------------- Статья (Figma «12») ---------------- */
/* Узкая колонка 680 по макету: поля 380 при ширине 1440 */
.article__narrow { max-width: calc(680px + var(--pad-x) * 2); }
.article__head { background: var(--c-bg-base); padding: 48px 0 32px; }
.article__head .article__narrow { display: flex; flex-direction: column; gap: 16px; }
.article__meta { display: flex; align-items: center; gap: 8px; }
.article__cover-wrap { background: var(--c-bg-base); padding-bottom: 40px; }
/* Высота — по картинке: обрезка съедала часть обложки. */
.article__cover { border-radius: var(--r-card); overflow: hidden; }
.article__cover img { display: block; width: 100%; height: auto; }
.article__body { background: var(--c-bg-base); padding-bottom: 48px; }
.article__body .article__narrow { display: flex; flex-direction: column; gap: 24px; }
.article__content { display: flex; flex-direction: column; gap: 24px; }
.article__content p { font: var(--t-body-l); color: var(--c-text-primary); }
.article__content blockquote { font: var(--t-quote); color: var(--c-text-primary); }
.article__content h2 { font: var(--t-display-m); letter-spacing: var(--t-display-m-ls); }
.article__content h3 { font: var(--t-display-s); }
.article__content ul, .article__content ol { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.article__content li { font: var(--t-body-l); color: var(--c-text-primary); }
.article__content img { border-radius: var(--r-card); }
.article__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- Стихи (Figma «13») ---------------- */
.page-head--poems { padding-bottom: 32px; }
.poems { background: var(--c-bg-base); padding-bottom: 80px; }
.poem-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 24px; min-height: 87px;
  border-bottom: 1px solid var(--c-border-subtle);
  transition: background var(--dur) var(--ease);
}
.poem-row:last-child { border-bottom: 0; }
.poem-row:hover { background: var(--c-bg-soft); color: inherit; }
.poem-row__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.poem-row__title { font: var(--t-display-s); color: var(--c-text-primary); }
.poem-row__line { font: var(--t-body-s); color: var(--c-text-muted); }
.poem-row__year { flex: none; font: var(--t-body-s); color: var(--c-text-muted); }
.poem-row__link { flex: none; display: inline-flex; align-items: center; gap: 8px; font: var(--t-label-m); color: var(--c-text-primary); }
.poem-row__link svg { width: 14px; height: 10px; }

/* ---------------- Страница стиха (Figma «14») ---------------- */
.poem__narrow { max-width: calc(680px + var(--pad-x) * 2); }
.poem__head { background: var(--c-bg-base); padding: 64px 0 24px; }
.poem__head .poem__narrow { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.poem__body { background: var(--c-bg-base); padding-bottom: 48px; }
.poem__body .poem__narrow { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.poem__text { color: var(--c-text-primary); }
.poem__text p { font: var(--t-quote); color: var(--c-text-primary); }
.poem__divider { display: block; width: 60px; height: 1px; background: var(--c-accent-gold); }
.poem__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 639px) {
  .article__head { padding: 24px 0 20px; }
  .news-pagination { padding-bottom: 40px; }
  .news-pagination__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .poem-row { flex-wrap: wrap; gap: 8px 16px; padding: 16px; min-height: 0; }
  .poem-row__info { flex: 1 1 100%; }
  .poem-row__link { margin-left: auto; }
  .poem__head { padding: 32px 0 16px; }
  .poems { padding-bottom: 40px; }
}

/* ---------------- Обо мне (Figma «15») ---------------- */
.about-hero { background: var(--c-bg-base); padding: 56px 0; }
.about-hero__inner { display: flex; align-items: flex-start; gap: 56px; }
.about-hero__photo { flex: none; width: 480px; height: 600px; border-radius: var(--r-card); overflow: hidden; }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about-facts { display: flex; gap: 40px; flex-wrap: wrap; }
.about-facts__item { display: flex; flex-direction: column; gap: 4px; }

.about-bio { background: var(--c-bg-base); padding: 64px 0; }
.about-bio .wrap { display: flex; flex-direction: column; gap: 56px; }
.about-bio__block { display: flex; align-items: center; gap: 56px; }
.about-bio__block--reverse { flex-direction: row-reverse; }
.about-bio__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.about-bio__photo { flex: none; width: 480px; height: 360px; border-radius: var(--r-card); overflow: hidden; }
.about-bio__photo img { width: 100%; height: 100%; object-fit: cover; }

.about-dates { background: var(--c-bg-soft); padding: 64px 0; }
.about-dates .wrap { display: flex; flex-direction: column; gap: 24px; }
.about-dates__row {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 24px; min-height: 58px;
  border-bottom: 1px solid var(--c-border-subtle);
}
.about-dates__row:last-child { border-bottom: 0; }
.about-dates__year { flex: none; width: 80px; font: var(--t-display-s); color: var(--c-accent-deep); }
.about-dates__text { flex: 1 1 auto; font: var(--t-body-m); color: var(--c-text-primary); }

/* ---------------- Контакты (Figma «16») ---------------- */
.contacts { background: var(--c-bg-base); padding-bottom: 80px; }
.contacts__inner { display: flex; align-items: flex-start; gap: 48px; }
.contacts__form {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px 28px 28px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card);
}
.contacts__row { display: flex; gap: 16px; }
.contacts__row .field { flex: 1 1 0; min-width: 0; }
.contacts__side { flex: none; width: 380px; display: flex; flex-direction: column; gap: 16px; }
.contacts__item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; border-bottom: 1px solid var(--c-border-subtle);
}
.contacts__item:last-child { border-bottom: 0; }
.contacts__socials { display: flex; gap: 10px; }
.contacts__social {
  flex: 1 1 0; text-align: center; padding: 12px 0;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-btn);
  background: var(--c-bg-card); font: var(--t-label-m); color: var(--c-text-primary);
}
.contacts__social:hover { border-color: var(--c-border-strong); color: var(--c-text-primary); }

/* honeypot: поле-ловушка для ботов, человек его не видит */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { padding: 12px 16px; border-radius: var(--r-btn); font: var(--t-body-s); }
.form-msg--ok { background: var(--c-state-free-soft); color: var(--c-state-free); }
.form-msg--err { background: var(--c-state-error-soft); color: var(--c-state-error); }

@media (max-width: 1199px) {
  .about-hero__inner, .about-bio__block, .about-bio__block--reverse, .contacts__inner { flex-direction: column; }
  .about-hero__photo, .about-bio__photo, .contacts__side { width: 100%; }
  .about-hero__photo { height: 480px; }
  .about-bio__photo { height: 320px; }
}
@media (max-width: 639px) {
  .about-hero { padding: 28px 0; }
  .about-hero__photo { height: 360px; }
  .about-bio, .about-dates { padding: 40px 0; }
  .about-bio .wrap { gap: 32px; }
  .about-bio__block { gap: 20px; }
  .about-facts { gap: 24px; }
  .about-dates__row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  .about-dates__year { width: auto; }
  .contacts__row { flex-direction: column; }
  .contacts__form { padding: 20px 16px; }
}

/* ---------- Запись исполнения на странице произведения ---------- */
.work-video { display: flex; flex-direction: column; gap: var(--s-8); margin-top: var(--s-16); }
.work-video__player,
.savc-embed,
.work-video__embed iframe {
  width: 100%; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  background: var(--c-bg-soft-alt);
  border: 1px solid var(--c-border-subtle);
}

/* ---------- Текстовая страница ---------- */
.prose { max-width: 772px; display: flex; flex-direction: column; gap: var(--s-16); }
.prose p, .prose ul, .prose ol { font: var(--t-body-m); color: var(--c-text-secondary); }
.prose h2 { font: var(--t-display-m); color: var(--c-text-primary); margin-top: var(--s-16); }
.prose h3 { font: var(--t-display-s); color: var(--c-text-primary); margin-top: var(--s-8); }
.prose ul, .prose ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-card); }

/* ---------- Страница «не найдено» ---------- */
.notfound__inner {
  max-width: 780px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 84px 0 100px;
}
/* Секция 404 своей вертикали не добавляет — отступы заданы внутри. */
.notfound { padding-block: 0; }
.notfound__code {
  font: var(--t-display-xl); font-size: 96px; line-height: 1;
  color: var(--c-accent-gold); opacity: .35;
}
.notfound__actions { display: flex; gap: 12px; justify-content: center; margin-top: var(--s-8); }

/* ---------- Поиск ---------- */
.search-form { display: flex; gap: var(--s-8); max-width: 640px; margin-top: var(--s-8); }
.search-results { display: flex; flex-direction: column; gap: 56px; }
.search-group { display: flex; flex-direction: column; gap: var(--s-16); }
.search-group__head { display: flex; align-items: baseline; gap: var(--s-8); }
.search-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-border-subtle); }
.search-list__item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-16) 0; border-bottom: 1px solid var(--c-border-subtle);
}
.search-list__title { color: var(--c-text-primary); }
.search-list__title:hover { color: var(--c-accent-deep); }

@media (max-width: 639px) {
  .notfound__code { font-size: 64px; }
  .notfound__actions { flex-direction: column; width: 100%; }
  .notfound__actions .btn { width: 100%; }
  .search-form { flex-direction: column; }
}

/* ---------- Корзина ---------- */
.cart-layout { display: flex; align-items: flex-start; gap: 48px; }
.cart-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }
.cart-side { width: 380px; flex: none; display: flex; flex-direction: column; gap: var(--s-8); }

.cart-items { display: flex; flex-direction: column; }
.cart-row {
  display: flex; align-items: center; gap: var(--s-16);
  padding: var(--s-16); border-bottom: 1px solid var(--c-border-subtle);
}
.cart-row:last-child { border-bottom: 0; }
.cart-row__media { width: 64px; height: 64px; flex: none; border-radius: var(--r-btn); overflow: hidden; background: var(--c-bg-soft); }
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-row__title { font: var(--t-label-row); color: var(--c-text-primary); }
.cart-row__title:hover { color: var(--c-accent-deep); }
.cart-row__qty { width: 96px; flex: none; }
.cart-row__qty .quantity input { width: 100%; padding: 9px 10px; text-align: center;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-btn);
  background: var(--c-bg-card); color: var(--c-text-primary); font: var(--t-body-s); }
.cart-row__price { width: 110px; flex: none; text-align: right; font: var(--t-label-price); }
.cart-row__remove { width: 32px; flex: none; text-align: right; }
.cart-row__x { display: inline-block; width: 28px; height: 28px; line-height: 26px; text-align: center;
  color: var(--c-text-muted); border-radius: var(--r-btn); font-size: 18px; }
.cart-row__x:hover { color: var(--c-state-error); background: var(--c-bg-soft); }

.cart-actions { display: flex; align-items: center; gap: var(--s-16); flex-wrap: wrap; }
.cart-coupon { display: flex; gap: var(--s-8); flex: 1 1 320px; max-width: 420px; }

.sum-card {
  display: flex; flex-direction: column; gap: var(--s-16);
  padding: 24px; border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card);
}
.sum-card__rows { display: flex; flex-direction: column; gap: 10px; }
.sum-row { display: flex; justify-content: space-between; gap: var(--s-16); }
.sum-row th { font: var(--t-body-s); color: var(--c-text-secondary); font-weight: 400; text-align: left; }
.sum-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: var(--s-16); border-top: 1px solid var(--c-border-subtle);
}

.cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-16);
  text-align: center; padding: 64px 0 80px;
}
.cart-empty__actions { display: flex; gap: var(--s-8); flex-wrap: wrap; justify-content: center; }

@media (max-width: 1023px) {
  .cart-layout { flex-direction: column; }
  .cart-side { width: 100%; }
}
@media (max-width: 639px) {
  .cart-row { flex-wrap: wrap; }
  .cart-row__info { flex: 1 1 100%; order: 1; }
  .cart-row__media { order: 0; }
  .cart-row__remove { order: 0; margin-left: auto; }
  .cart-row__qty { order: 2; width: 88px; }
  .cart-row__price { order: 3; flex: 1 1 auto; }
}

/* ---------- Оформление заказа ---------- */
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 48px; }
/* Сообщения WooCommerce вставляет внутрь формы — растягиваем на обе колонки. */
.co-layout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.co-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.co-side { width: 400px; flex: none; }
.co-block { display: flex; flex-direction: column; gap: var(--s-16); }
.co-block h3 { font: var(--t-display-s); color: var(--c-text-primary); }

.woo .form-row { display: flex; flex-direction: column; gap: var(--s-8); margin-bottom: 0; }
.woo .form-row label { font: var(--t-body-xs); color: var(--c-text-secondary); }
.woo .form-row .required { color: var(--c-state-error); text-decoration: none; }
.woo .form-row input[type="text"],
.woo .form-row input[type="tel"],
.woo .form-row input[type="email"],
.woo .form-row input[type="password"],
.woo .form-row textarea,
.woo .form-row select,
.woo .select2-container .select2-selection {
  width: 100%; padding: 13px 16px; min-height: 54px; line-height: 26px;
  background: var(--c-bg-card); border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn); font: var(--t-body-m); color: var(--c-text-primary);
}
.woo .form-row input:focus, .woo .form-row textarea:focus, .woo .form-row select:focus {
  outline: none; border-color: var(--c-accent-gold);
}
/* Карточка с полями — сетка на 6 колонок: половина это 3 колонки, треть — 2.
   Так ряды держат ровный шаг 16px и не зависят от пробелов в разметке. */
.woo .co-card, .woo .auth-card form, .woo .talk__form form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.woo .co-card > *, .woo .auth-card form > *, .woo .talk__form form > * { grid-column: 1 / -1; }
.woo .form-row-first, .woo .form-row-last { grid-column: span 3; }
.woo .form-row-third { grid-column: span 2; }
/* Подпись держим в одну строку, иначе поля в ряду встают на разной высоте. */
.woo .form-row-third label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Пометка «(необязательно)» в макете не предусмотрена — о необязательности говорит подпись блока. */
.woo form .form-row .optional { display: none; }

.co-review { display: flex; flex-direction: column; gap: var(--s-16); }
.co-review__items { display: flex; flex-direction: column; gap: 10px; padding-bottom: var(--s-16); border-bottom: 1px solid var(--c-border-subtle); }
.co-item { display: flex; justify-content: space-between; gap: var(--s-16); }
.co-item__name { color: var(--c-text-primary); }

.woo .wc_payment_methods { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.woo .wc_payment_method label { font: var(--t-label-m); color: var(--c-text-primary); cursor: pointer; }
.woo .payment_box { font: var(--t-body-s); color: var(--c-text-secondary); background: var(--c-bg-soft);
  padding: 12px 14px; border-radius: var(--r-btn); margin-top: 8px; }
.woo #place_order, .woo .button, .woo .wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border: 0; border-radius: var(--r-btn);
  background: var(--c-bg-ink); color: var(--c-text-inverse); font: var(--t-label-button);
}
.woo #place_order { width: 100%; }
.woo #place_order:hover, .woo .button:hover { background: var(--c-bg-ink-hover); color: var(--c-text-inverse); }
.woo .woocommerce-terms-and-conditions-wrapper { font: var(--t-body-xs); color: var(--c-text-muted); }

.woo .woocommerce-message, .woo .woocommerce-info, .woo .woocommerce-error {
  list-style: none; padding: 14px 16px; border-radius: var(--r-btn);
  font: var(--t-body-s); margin-bottom: var(--s-16);
  background: var(--c-bg-soft); color: var(--c-text-secondary);
  border: 1px solid var(--c-border-subtle);
}
.woo .woocommerce-error { background: var(--c-state-error-soft); color: var(--c-state-error); border-color: transparent; }
.woo .woocommerce-message { background: var(--c-state-free-soft); color: var(--c-state-free); border-color: transparent; }

@media (max-width: 1023px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); }
  .co-side { width: 100%; }
}
@media (max-width: 639px) {
  .woo .form-row-first, .woo .form-row-last { width: 100%; margin-right: 0; }
}

/* Иконка шрифтом WooCommerce не подключена — прячем квадратик-заглушку. */
.woo .woocommerce-info::before,
.woo .woocommerce-message::before,
.woo .woocommerce-error::before { display: none; }
.co-intro { margin-bottom: var(--s-16); }
.woo .woocommerce-form-coupon-toggle { margin-bottom: var(--s-16); }

/* ---------- Личный кабинет ---------- */
/* Вкладки кабинета — подчёркиванием, как в макете. */
.account-who { margin-bottom: 20px; }
.account-tabs { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px;
  border-bottom: 1px solid var(--c-border-subtle); }
.account-tabs__item {
  position: relative; padding: 0 0 14px;
  font: var(--t-label-m); color: var(--c-text-secondary);
}
.account-tabs__item:hover { color: var(--c-text-primary); }
.account-tabs__item.is-on { color: var(--c-text-primary); }
.account-tabs__item.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--c-accent-gold);
}
.account-files__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

.account-files { display: flex; flex-direction: column; }
.file-row {
  display: flex; align-items: start; gap: var(--s-16);
  padding: var(--s-16); border-bottom: 1px solid var(--c-border-subtle);
}
.file-row:last-child { border-bottom: 0; }
.file-row__icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-btn); background: var(--c-bg-soft); color: var(--c-text-secondary); overflow: hidden; }
.file-row__icon img { width: 100%; height: 100%; object-fit: cover; }
.file-row__icon svg { width: 15px; height: 16px; }
/* Обложка-ссылка: тот же вид, только с указателем и лёгкой подсветкой. */
a.file-row__icon { cursor: pointer; transition: box-shadow var(--dur) var(--ease); }
a.file-row__icon:hover { box-shadow: 0 0 0 2px var(--c-accent-gold); }
.file-row__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-row__title { color: var(--c-text-primary); }
/* Название-ссылка: наследует вид заголовка, подчёркивается при наведении. */
a.file-row__title { text-decoration: none; cursor: pointer; }
a.file-row__title:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--c-accent-gold); }

.woo .woocommerce-MyAccount-content { display: flex; flex-direction: column; gap: var(--s-16); }
.woo table.woocommerce-orders-table, .woo table.shop_table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-card); overflow: hidden;
  background: var(--c-bg-card);
}
.woo table.shop_table th, .woo table.shop_table td {
  padding: 14px var(--s-16); text-align: left; font: var(--t-body-s);
  border-bottom: 1px solid var(--c-border-subtle); color: var(--c-text-secondary);
}
.woo table.shop_table th { font: var(--t-label-meta); color: var(--c-text-muted); background: var(--c-bg-soft); }
.woo table.shop_table tr:last-child td { border-bottom: 0; }

/* ---------- Вход и регистрация ---------- */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.auth-layout--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
.auth-card {
  display: flex; flex-direction: column; gap: var(--s-16);
  padding: 28px; border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card);
}
.auth-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); }
.auth-remember { display: inline-flex; align-items: center; gap: var(--s-8); cursor: pointer; }

/* ---------- Успешная оплата ---------- */
.thanks { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; padding: 24px 0 48px; }
.thanks__head { display: flex; flex-direction: column; align-items: center; gap: var(--s-16); text-align: center; }
.thanks__mark {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-state-free-soft); color: var(--c-state-free);
}
.thanks__mark svg { width: 24px; height: 24px; }
.thanks__mark--bad { background: var(--c-state-error-soft); color: var(--c-state-error); }
.thanks__facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16);
  padding: 20px 24px; border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card);
}
.thanks__fact { display: flex; flex-direction: column; gap: 4px; }
.thanks__actions { display: flex; gap: var(--s-8); justify-content: center; flex-wrap: wrap; }

@media (max-width: 767px) {
  .auth-layout { grid-template-columns: 1fr; }
  .thanks__facts { grid-template-columns: repeat(2, 1fr); }
}

/* Снимаем рамку и отступы, которые WooCommerce рисует вокруг своих форм. */
.woo form.login, .woo form.register, .woo form.checkout_coupon, .woo form.lost_reset_password {
  border: 0; padding: 0; margin: 0; border-radius: 0; background: none;
}
.auth-card .form-row.auth-card__row {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-16);
}
.auth-card .auth-remember { flex-direction: row; }
.auth-card .auth-remember input { width: 16px; height: 16px; accent-color: var(--c-accent-gold); }
.auth-card form { display: flex; flex-direction: column; }

/* Кабинет: вкладки сверху, содержимое во всю ширину. */
.woo .woocommerce-MyAccount-navigation { float: none; width: auto; }
.woo .woocommerce-MyAccount-content { float: none; width: 100%; }
.woo .woocommerce-MyAccount-content::after { content: ""; display: block; clear: both; }

/* На узких экранах в шапке остаются поиск, корзина и бургер —
   кабинет, тема и языки живут в раскрытом меню. */
@media (max-width: 639px) {
  .site-header__inner { padding-inline: var(--pad-x); }
  .header-actions { gap: 2px; }
  .header-actions .icon-btn { width: 40px; height: 40px; }
  .header-actions > .icon-btn--account,
  .header-actions > .js-theme-toggle { display: none; }
}
@media (max-width: 359px) {
  .brand__name { font-size: 15px; line-height: 20px; }
}

/* «Сбросить» в шапке фильтров: пока фильтров нет — бледная и некликабельная. */
.filters__reset { color: var(--c-text-muted); pointer-events: none; }
.filters__reset.is-on { color: var(--c-accent-deep); pointer-events: auto; }
.filters__reset.is-on:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Переключатель «Список / Плитка» (Figma: 156×39, сегменты 79 и 77) ---------- */
.view-switch {
  display: inline-flex; flex: none;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn); overflow: hidden;
  background: var(--c-bg-card);
}
.view-switch__opt {
  padding: 8px 14px; font: var(--t-body-s);
  color: var(--c-text-secondary); white-space: nowrap;
}
.view-switch__opt + .view-switch__opt { border-left: 1px solid var(--c-border-subtle); }
.view-switch__opt:hover { background: var(--c-bg-soft); color: var(--c-text-primary); }
.view-switch__opt.is-on { background: var(--c-bg-ink); color: var(--c-text-inverse); }

/* ---------- Плитка произведений ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card); overflow: hidden;
}
.work-card__cover { display: block; aspect-ratio: 4 / 3; background: var(--c-bg-soft); overflow: hidden; }
.work-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.work-card__stub {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  height: 100%; padding: 0 24px;
}
.work-card__stave { display: block; height: 1px; background: var(--c-border-subtle); }
.work-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.work-card__tags { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.work-card__title { color: var(--c-text-primary); }
.work-card__title:hover { color: var(--c-accent-deep); }
.work-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.work-card__actions { display: flex; align-items: center; gap: var(--s-8); }

@media (max-width: 1023px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 639px) { .work-grid { grid-template-columns: 1fr; } }

/* Между иконками превью и ценой в строке нужен зазор — иначе они слипаются. */
.row-sheet__preview { margin-right: var(--s-8); }

/* Неактивная стрелка «назад» на первой странице. */
.catalog-pagination .page-numbers--lead { margin: 0; }
.catalog-pagination .page-numbers.is-off { color: var(--c-text-muted); opacity: .5; cursor: default; }

/* Кнопка поиска в каталоге: по макету 102×50. */
.searchbar .btn { padding-inline: 28px; }

/* Страницы магазина: заголовок без крошек (Figma: H1 сразу под шапкой). */
.page-head--shop { padding: 42px 0 32px; }
.page-head--shop .wrap { gap: 8px; }

/* «Продолжить покупки» под кнопкой оформления. */
.sum-card__back { text-align: center; color: var(--c-text-secondary); }
.sum-card__back:hover { color: var(--c-text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Страница фонограмм: список во всю ширину, фильтры — списками в строке поиска. */
.catalog-body__inner--flat .catalog-list { width: 100%; }
.searchbar__select { width: auto; flex: none; min-width: 150px; height: 56px; padding: 15px 40px 15px 16px; }

@media (max-width: 767px) {
  .searchbar__select { width: 100%; }
}

/* Подписи в контактах — обычным регистром, как в макете. */
.contacts__label { text-transform: none; letter-spacing: .02em; }

/* Вход и регистрация: карточки по центру, как в макете (420 + 32, поля 28). */
.auth-layout { grid-template-columns: repeat(2, 420px); justify-content: center; gap: 32px; }
.auth-layout--single { grid-template-columns: 420px; }
.auth-card { padding: 28px; gap: var(--s-16); }
/* Заголовок, подпись, поля, кнопка и сноска идут ровно через 16px. */
.auth-card > h2 { margin: 0; }
.auth-card form { gap: var(--s-16); }
.auth-card .form-row { margin-bottom: 0; gap: var(--s-8); }
.auth-card .form-row:last-of-type { margin-bottom: 0; }
.auth-card__note { text-align: center; color: var(--c-text-secondary); }
a.auth-card__note:hover { color: var(--c-text-primary); text-decoration: underline; text-underline-offset: 3px; }
/* Своего заголовка у страницы входа в макете нет. */
.page-head--auth { display: none; }
@media (max-width: 951px) {
  .auth-layout, .auth-layout--single { grid-template-columns: minmax(0, 420px); }
}
@media (max-width: 479px) {
  .auth-layout, .auth-layout--single { grid-template-columns: minmax(0, 1fr); }
  .auth-card { padding: 20px; }
}

/* Звёздочек обязательности в макете форм входа и регистрации нет. */
.auth-card .required { display: none; }

/* ---------- Оформление: блоки-карточки, как в макете ---------- */
.co-card {
  padding: 24px; border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card);
}
/* Заголовок и пояснение стоят вплотную — их разделяет шаг сетки, не поля. */
.co-card > h2 { margin-bottom: 0; }
.co-card > p { margin-bottom: 0; }
.woo .co-card > p + .form-row { margin-top: 0; }
.co-hidden { display: none; }
.co-item { align-items: center; }
.co-item__media { width: 40px; height: 40px; flex: none; border-radius: var(--r-btn); overflow: hidden; background: var(--c-bg-soft); }
.co-item__media img { width: 100%; height: 100%; object-fit: cover; }
.co-item__name { flex: 1 1 auto; min-width: 0; }

/* Родной заголовок «Платёжные реквизиты» внутри карточки не нужен — он свой у каждой карточки. */
.co-card .woocommerce-billing-fields > h3,
.co-card .woocommerce-shipping-fields > h3 { display: none; }

/* ---------- Результаты поиска (Figma 17) ---------- */
.search-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16); }
.search-group__all { display: inline-flex; align-items: center; gap: 6px; }
.search-group__all:hover { color: var(--c-text-primary); }
.search-group__all svg { width: 14px; height: 10px; }

.find-row {
  display: flex; align-items: center; gap: var(--s-16);
  padding: 14px var(--s-16); min-height: 64px;
  border-bottom: 1px solid var(--c-border-subtle);
  transition: background var(--dur) var(--ease);
}
.find-row:last-child { border-bottom: 0; }
.find-row:hover { background: var(--c-bg-soft); }
.find-row__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.find-row__title { color: var(--c-text-primary); }
.find-row__link { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-secondary); }
.find-row__link svg { width: 14px; height: 10px; }
.find-row:hover .find-row__link { color: var(--c-text-primary); }

/* Успешная оплата: карточка файлов и примечание (Figma 09). */
.thanks__files { display: flex; flex-direction: column; }
.thanks__files-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16);
  padding: 20px var(--s-16) 16px; background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border-subtle);
}
.thanks__note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 20px; border-radius: var(--r-card); background: var(--c-bg-soft);
}
.thanks__note svg { width: 8px; height: 8px; margin-top: 8px; flex: none; color: var(--c-accent-gold); }

/* Значок над сообщением о пустой корзине. */
.cart-empty__mark {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-card);
  background: var(--c-bg-soft); color: var(--c-text-muted); margin-bottom: 4px;
}
.cart-empty__mark svg { width: 22px; height: 22px; }

/* ---------- Заказы в кабинете (Figma 10b) ---------- */
.orders { display: flex; flex-direction: column; gap: var(--s-16); }
.order-card { display: flex; flex-direction: column; }
.order-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--s-16); background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border-subtle);
}
.order-card__sum { margin-left: auto; font: var(--t-label-price); letter-spacing: var(--t-label-price-ls); }
@media (max-width: 639px) {
  .order-card__head { flex-wrap: wrap; }
  .order-card__sum { margin-left: 0; flex: 1 1 100%; }
}

/* ---------- Вкладка «Данные» (Figma 10c) ---------- */
.acc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; gap: 24px; }
.acc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }
.acc-main form { display: flex; flex-direction: column; gap: var(--s-16); }
.acc-side { width: auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }

.acc-choice { display: flex; gap: 8px; margin: 6px 0 14px; }
.acc-choice__opt {
  flex: 1; text-align: center; padding: 9px 0; border-radius: var(--r-btn);
  border: 1px solid var(--c-border-subtle); background: var(--c-bg-card);
  font: var(--t-label-m); color: var(--c-text-secondary);
}
.acc-choice__opt:hover { border-color: var(--c-border-strong); color: var(--c-text-primary); }
.acc-choice__opt.is-on { background: var(--c-bg-ink); border-color: var(--c-bg-ink); color: var(--c-text-inverse); }
.acc-subscribe { margin-top: 4px; }
.acc-subscribe input { width: 16px; height: 16px; accent-color: var(--c-accent-gold); }

.acc-danger { background: var(--c-bg-soft); }
.btn--danger {
  background: none; color: var(--c-state-error);
  border: 1px solid var(--c-state-error); padding: 13px 23px;
}
.btn--danger:hover { background: var(--c-state-error-soft); color: var(--c-state-error); }

@media (max-width: 1023px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
  .acc-side { width: 100%; }
}

/* ---------- Состояния оплаты (Figma 08b) ---------- */
/* Плашка ошибки: точка, заголовок жирным и пояснение под ним. */
.woo .woocommerce-error {
  position: relative; padding: 16px 20px 16px 36px;
  background: var(--c-state-error-soft); color: var(--c-state-error);
  border: 0; border-radius: var(--r-btn);
  display: flex; flex-direction: column; gap: 4px;
}
.woo .woocommerce-error li { font: var(--t-body-s); }
.woo .woocommerce-error li strong,
.woo .woocommerce-error li b { display: block; font: var(--t-label-m); margin-bottom: 2px; }
.woo .woocommerce-error::before {
  content: ""; display: block; position: absolute; left: 20px; top: 22px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-state-error);
}

/* Поле, которое не прошло проверку. */
.woo .woocommerce-invalid input.input-text,
.woo .woocommerce-invalid .input,
.woo .form-row.woocommerce-invalid input {
  border-color: var(--c-state-error); border-width: 1.5px;
}
.woo .woocommerce-invalid .field__error,
.woo .form-row .savc-field-error { font: var(--t-body-xs); color: var(--c-state-error); }

/* Ожидание ответа банка: затемнение с кружком и подписью. */
.woo .blockUI.blockOverlay {
  background: var(--c-bg-card) !important; opacity: .92 !important;
}
.woo .blockUI.blockOverlay::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -56px 0 0 -20px;
  border: 2px solid var(--c-border-subtle); border-top-color: var(--c-accent-gold);
  border-radius: 50%; animation: savc-spin .8s linear infinite;
}
.woo .blockUI.blockOverlay::after {
  content: attr(data-savc-wait); position: absolute; left: 0; right: 0; top: 50%;
  margin-top: 4px; text-align: center;
  font: var(--t-display-s); color: var(--c-text-primary);
}
@keyframes savc-spin { to { transform: rotate(360deg); } }
.woo .savc-wait-hint {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: 44px;
  text-align: center; font: var(--t-body-s); color: var(--c-text-secondary);
}

/* Список бесплатных файлов на странице произведения. */
.work-buy__files { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.work-buy__files a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-btn);
  font: var(--t-body-s); color: var(--c-text-primary);
}
.work-buy__files a:hover { background: var(--c-bg-soft); }
/* Название файла переносится целиком: обрезка прятала, чем версии отличаются. */
.work-buy__files a { align-items: flex-start; }
.work-buy__file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.work-buy__files svg { margin-top: 3px; }
.work-buy__file-meta { flex: none; white-space: nowrap; }
.work-buy__files-head { padding: 0 10px 6px; }
.work-buy__files svg { flex: none; width: 14px; height: 15px; color: var(--c-text-muted); }
.work-buy__files a:hover svg:last-child { color: var(--c-accent-deep); }

/* ---------- Формы: перебиваем отступы из woocommerce.css ---------- */
/* Плагин задаёт .woocommerce form .form-row { padding: 3px; margin: 0 0 6px }
   и label { line-height: 2 } — из-за этого поля расходятся против макета.
   Селекторы той же силы, но наш файл подключается позже, поэтому побеждают. */
.woo form .form-row { width: 100%; padding: 0; margin: 0; }
.woo form .form-row label { line-height: 18px; }
/* Плагин ставит вокруг ряда очистку потока — во flex это два лишних отступа. */
.woo form .form-row::before, .woo form .form-row::after { content: none; display: none; }
/* Поле по макету: 54px вместе с рамкой, текст 16/26, поля 16px по бокам. */
.woo form .form-row .input-text, .woo form .form-row select { padding: 13px 16px; line-height: 26px; }
/* В карточках входа и регистрации ряды разделяет отступ самой формы. */
.auth-card form .form-row { margin: 0; }
/* Служебные обёртки WooCommerce — пустые, но во flex дают лишний отступ. */
.woo form wc-order-attribution-inputs { display: none; }
/* Текст согласия — на всю ширину карточки. display:contents ломал сетку:
   внутренний <p> попадал в одну колонку и переносился по слову. */
.woo form .woocommerce-privacy-policy-text { grid-column: 1 / -1; }
.woo form .woocommerce-privacy-policy-text p { margin: 0; }
/* Заголовок карточки — Display/M, кнопка 48px, как в макете. */
.auth-card > h2 { font: var(--t-display-m); letter-spacing: var(--t-display-m-ls); }
.auth-card .btn--lg { padding: 14px 24px; }

/* ---------- Поле пароля с кнопкой «показать» ---------- */
.pw-field { position: relative; display: block; width: 100%; }
.pw-field input { padding-right: 48px; }
.pw-field__eye {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-btn);
  background: none; color: var(--c-text-muted); cursor: pointer;
}
.pw-field__eye:hover { color: var(--c-text-primary); }
.pw-field__eye:focus-visible { outline: 2px solid var(--c-accent-gold); outline-offset: 1px; }
.pw-field__eye svg { width: 20px; height: 20px; }

/* ---------- Мелкие поправки вёрстки ---------- */
/* Сообщения об ошибке WooCommerce вставляет внутрь формы оформления,
   а она — flex-ряд. Без этого блок встаёт узкой колонкой слева. */

/* Пагинация новостей: подпись слева, стрелки и номера — одной группой справа. */
.news-pagination__inner { justify-content: flex-start; gap: var(--s-8); }
.news-pagination__inner > :first-child { margin-right: auto; }

/* Страницы предпросмотра показываются по одной. */
.work-sheet__img.is-hidden { display: none; }
.work-sheet:fullscreen { background: var(--c-bg-card); display: flex; align-items: center; justify-content: center; padding: 24px; }
.work-sheet:fullscreen .work-sheet__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Миниатюра разворота — кнопка, а выглядит как рамка с картинкой. */
.book-gallery__thumb { padding: 0; background: none; cursor: pointer; }

/* ---------- Отзывы к стихам ---------- */
.poem__talk { background: var(--c-bg-base); padding: 48px 0 80px; }
.talk { display: flex; flex-direction: column; gap: 24px; }
.talk__list { display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; margin: 0; }
.talk__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 24px; border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card);
}
.talk__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.talk__text { color: var(--c-text-primary); overflow-wrap: anywhere; }
.talk__form {
  padding: 28px; border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-card); background: var(--c-bg-card);
}
.talk__form .comment-reply-title { font: var(--t-display-m); letter-spacing: var(--t-display-m-ls); display: block; margin-bottom: 16px; }
.talk__form textarea {
  width: 100%; min-height: 120px; padding: 13px 16px; line-height: 26px;
  background: var(--c-bg-card); border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn); font: var(--t-body-m); color: var(--c-text-primary); resize: vertical;
}
.talk__form textarea:focus { outline: none; border-color: var(--c-accent-gold); }
.talk__form .form-submit { margin-top: 16px; }
.talk__pages { display: flex; gap: 8px; }
/* Поле-приманка: убрано с глаз, но остаётся в форме для роботов. */
.savc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Узкие экраны: ничего не должно вылезать за край ---------- */
/* Строка поиска переносится, а не выталкивает выпадающий список за экран. */
.searchbar { flex-wrap: wrap; }
.searchbar__field { min-width: 0; flex: 1 1 240px; }
.searchbar__select { max-width: 100%; min-width: 0; flex: 0 1 auto; }
.searchbar .btn { flex: none; }

/* Счётчик новостей на узком экране встаёт под фильтры. */
.news-filter__inner { flex-wrap: wrap; }
@media (max-width: 639px) {
  .news-filter__count { padding-top: 0; white-space: normal; }
}

/* Ярлык «Распродажа» из WooCommerce в макете не предусмотрен — цену со скидкой
   показывает сама карточка, а ярлык торчал за край карточки. */
.woo .onsale, .work-card .onsale, .book-card .onsale, .row-sheet .onsale { display: none; }
/* На средних экранах номера страниц переносятся, а не выходят за край. */
.catalog-pagination, .news-pagination__inner { flex-wrap: wrap; row-gap: 12px; }

/* ---------- Промокод в карточке суммы ---------- */
.sum-promo { display: flex; flex-direction: column; gap: var(--s-8); padding-top: var(--s-16); border-top: 1px solid var(--c-border-subtle); }
.sum-promo__row { display: flex; gap: var(--s-8); }
.sum-promo__input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
  background: var(--c-bg-card); border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn); font: var(--t-body-s); color: var(--c-text-primary);
}
.sum-promo__input:focus { outline: none; border-color: var(--c-accent-gold); }
.sum-promo__row .btn { flex: none; }
.sum-promo__msg { color: var(--c-state-free); }
.sum-promo__msg:empty { display: none; }
.sum-promo__msg.is-bad { color: var(--c-state-error); }
.talk__msg { margin-bottom: var(--s-16); color: var(--c-state-free); }
.talk__msg.is-bad { color: var(--c-state-error); }

/* ---------- Оплата: карточка в левой колонке, кнопка — в сводке ---------- */
.co-card .woocommerce-checkout-payment { display: flex; flex-direction: column; gap: var(--s-16); }
.co-secure { display: flex; align-items: center; gap: var(--s-8); }
.co-secure svg { flex: none; width: 12px; height: 14px; }
/* Форма карты Stripe внутри выбранного способа. */
.woo .payment_box { padding: var(--s-16) 0 0; background: none; border: 0; }
.woo .payment_box::before { display: none; }
/* Кружок и подпись способа оплаты в одну строку по центру.
   WooCommerce разносит их полями и float — отсюда съезжало. */
.woo .wc_payment_method { display: flex; flex-direction: column; }
.woo .wc_payment_method > label {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-btn);
  font: var(--t-label-m); color: var(--c-text-primary);
}
.woo .wc_payment_method > label img { max-height: 22px; margin: 0 0 0 auto; }
.woo .wc_payment_method > input[type="radio"] {
  flex: none; width: 18px; height: 18px; margin: 0 -28px 0 12px;
  accent-color: var(--c-accent-gold); position: relative; z-index: 1;
}
.woo .wc_payment_method > input[type="radio"] + label { padding-left: 40px; }
.woo .wc_payment_method > input[type="radio"]:checked + label { border-color: var(--c-accent-gold); }
/* Кнопка оплаты и соглашение в правой карточке. */
.sum-card .place-order { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s-16); }
.sum-card .place-order .woocommerce-terms-and-conditions-wrapper { font: var(--t-body-xs); color: var(--c-text-muted); }

/* ---------- Просмотр листа в окне поверх страницы ---------- */
body.is-locked { overflow: hidden; }
.sheet-pop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: color-mix(in srgb, var(--c-bg-ink) 82%, transparent);
}
.sheet-pop__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; }
.sheet-pop__count { color: var(--c-text-inverse); }
.sheet-pop__nav { display: flex; gap: 8px; }
.sheet-pop__nav--single .sheet-pop__prev, .sheet-pop__nav--single .sheet-pop__next { display: none; }
.sheet-pop__body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.sheet-pop__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  background: var(--c-bg-card); border-radius: var(--r-card);
}
@media (max-width: 639px) {
  .sheet-pop { padding: 12px; }
  .sheet-pop__bar { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* Номер заказа ведёт на его страницу. */
.order-card__num { color: var(--c-text-primary); }
.order-card__num:hover { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Описание издания: живая типографика вместо сплошного абзаца ---------- */
.book-desc__text { color: var(--c-text-secondary); display: flex; flex-direction: column; gap: 14px; }
.book-desc__text p { margin: 0; }
.book-desc__text strong, .book-desc__text b { color: var(--c-text-primary); font-weight: 500; }
.book-desc__text em { font-style: italic; }
.book-desc__text ul, .book-desc__text ol { display: flex; flex-direction: column; gap: 8px; padding-left: 0; }
.book-desc__text li {
  position: relative; padding-left: 20px; list-style: none;
}
.book-desc__text ul > li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent-gold);
}
.book-desc__text ol { counter-reset: sav-li; }
.book-desc__text ol > li { counter-increment: sav-li; }
.book-desc__text ol > li::before {
  content: counter(sav-li) "."; position: absolute; left: 0; top: 0;
  color: var(--c-accent-gold); font: var(--t-body-s);
}
.book-desc__text h2, .book-desc__text h3, .book-desc__text h4 {
  font: var(--t-display-s); color: var(--c-text-primary); margin-top: 6px;
}
.book-desc__text a { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.book-desc__text br + br { display: none; }
/* Картинка, которую можно развернуть. */
.is-zoomable { cursor: zoom-in; }

/* Кнопка внутри карточки занимает своё место в сетке, а не тянется во всю ширину. */
.woo .co-card > .btn, .woo .co-card > button.btn { justify-self: start; grid-column: 1 / -1; width: auto; }
.woo .co-card > .place-order { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Выпадающие списки WooCommerce (select2) ---------- */
/* Плагин ставит ширину контейнера скриптом и рисует свою высоту —
   приводим к тем же 54px и полной ширине, что у обычных полей. */
.woo .select2-container { width: 100% !important; }
.woo .select2-container--default .select2-selection--single {
  height: 54px; box-sizing: border-box;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn);
}
.woo .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 52px;
  font: var(--t-body-m); color: var(--c-text-primary);
}
/* Отступы держит сама кнопка списка, а строка выравнивается по центру —
   так текст не съезжает вниз при любой высоте. */
.woo .select2-container--default .select2-selection--single {
  display: flex; align-items: center;
  padding: 0 40px 0 16px;
}
.woo .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--c-text-muted); }
.woo .select2-container--default .select2-selection--single .select2-selection__arrow { height: 52px; right: 10px; }
.woo .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--c-accent-gold); }

/* Само выпадающее окно живёт в конце страницы, вне блока .woo. */
.select2-dropdown {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.select2-container--default .select2-results__option {
  padding: 7px 12px; font: var(--t-body-s); line-height: 20px; color: var(--c-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Плагин задаёт свой отступ у списка — из-за него строки уезжали вправо. */
.select2-container--default .select2-results > .select2-results__options { padding: 4px; max-height: 260px; }
.select2-results__option { margin: 0; border-radius: var(--r-btn); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--c-bg-soft); color: var(--c-text-primary);
}
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--c-border-subtle); border-radius: var(--r-btn);
  font: var(--t-body-s); color: var(--c-text-primary); background: var(--c-bg-card);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--c-accent-gold); }

/* ---------- Блок оплаты: убираем сиреневую подложку WooCommerce ---------- */
.woo #payment,
.woocommerce-checkout .woo #payment { background: none; border-radius: 0; }
.woo #payment ul.payment_methods,
.woocommerce-checkout .woo #payment ul.payment_methods { padding: 0; border-bottom: 0; }
.woo #payment div.payment_box,
.woocommerce-checkout .woo #payment div.payment_box {
  margin: 12px 0 0; padding: 16px;
  background: var(--c-bg-base);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-btn);
  font: var(--t-body-s); color: var(--c-text-secondary);
}
.woo #payment div.payment_box::before,
.woocommerce-checkout .woo #payment div.payment_box::before { display: none; }
.woo #payment div.payment_box .wc-credit-card-form { margin: 0; }
.woo #payment div.payment_box input.input-text { background: var(--c-bg-card); }

/* ---------- Согласия перед кнопкой оплаты ---------- */
.woo .place-order { display: flex; flex-direction: column; gap: 14px; }
.woo .woocommerce-privacy-policy-text { font: var(--t-body-xs); color: var(--c-text-muted); }
.woo .woocommerce-privacy-policy-text p { margin: 0; }
.woo .woocommerce-terms-and-conditions-wrapper { display: flex; flex-direction: column; gap: 14px; }
.woo .validate-required.woocommerce-validated label,
.woo .woocommerce-terms-and-conditions-checkbox-text { font: var(--t-body-s); color: var(--c-text-secondary); }
.woo .form-row.validate-required > label > input[type="checkbox"],
.woo .woocommerce-form__input-checkbox { width: 18px; height: 18px; margin-right: 10px; accent-color: var(--c-accent-gold); }
.woo .woocommerce-terms-and-conditions-wrapper .form-row { display: flex; }

/* В узкой карточке два поля в ряд становятся тесными — разводим на всю ширину. */
@container (max-width: 520px) {
  .woo .form-row-first, .woo .form-row-last { grid-column: 1 / -1; }
  .woo .form-row-third { grid-column: span 3; }
}
.woo .co-card, .woo .auth-card form { container-type: inline-size; }

/* ---------- Страница заказа в кабинете ---------- */
.order-view { display: flex; flex-direction: column; gap: var(--s-16); }
.order-view__head {
  display: flex; align-items: center; gap: var(--s-16);
  padding: 20px 24px; flex-wrap: wrap;
}
.order-view__title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.order-view__sum { color: var(--c-text-primary); }
.order-view__files, .order-view__items, .order-view__note { padding: 20px 24px; }
.order-view__section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16);
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--c-border-subtle);
}
.order-view__items .co-item { padding: 10px 0; border-bottom: 1px solid var(--c-border-subtle); }
.order-view__items .co-item:last-of-type { border-bottom: 0; }
.co-item__name { display: flex; flex-direction: column; gap: 2px; }
.order-view__totals {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--c-border-subtle);
}
.order-view__totals .sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16); }
.order-view__totals .sum-row--final { padding-top: 10px; border-top: 1px solid var(--c-border-subtle); }
.order-view__addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); }
.order-view__address { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; }
.order-view__address address { font-style: normal; }
.order-view__address a { color: var(--c-accent-deep); }
.order-view__address a:hover { text-decoration: underline; text-underline-offset: 3px; }
.order-view__note { display: flex; flex-direction: column; gap: 8px; }
.order-view__actions { display: flex; gap: var(--s-8); flex-wrap: wrap; }
/* Родные таблицы WooCommerce на этой странице больше не выводятся. */
.woo .woocommerce-order-details, .woo .woocommerce-customer-details, .woo .woocommerce-order-downloads { display: none; }
@media (max-width: 767px) {
  .order-view__addresses { grid-template-columns: 1fr; }
  .order-view__head { align-items: flex-start; }
  .order-view__sum { width: 100%; }
}

/* Полоса прослушивания на странице произведения — по ней перематывают. */
.work-audio__bar {
  position: relative; cursor: pointer; overflow: hidden;
  touch-action: none;
}
.work-audio__bar i {
  display: block; width: 0; height: 100%;
  background: var(--c-accent-gold); border-radius: 2px;
  transition: width .1s linear;
}
.work-audio__bar:hover { height: 5px; margin-block: -1px; }
.work-audio__bar:focus-visible { outline: 2px solid var(--c-accent-gold); outline-offset: 3px; }

/* Миниатюра позиции заказа: картинка по центру рамки. */
.co-item__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- Кабинет на телефоне и планшете ---------- */
@media (max-width: 1023px) {
  /* Боковая колонка на 380px рядом с формами уже не помещается. */
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
  .acc-side { width: 100%; }
}
@media (max-width: 639px) {
  .acc-layout { gap: 12px; }
  .acc-main form { gap: 12px; }
  /* Вкладки кабинета прокручиваются вбок, а не ломают строку. */
  .woo .woocommerce-MyAccount-navigation ul {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .woo .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woo .woocommerce-MyAccount-navigation li { flex: none; }
  .acc-choice { flex-wrap: wrap; }
  .account-files__head { gap: 6px; }
  /* Строка файла: кнопка уходит под название, иначе всё сжимается в кашу. */
  .file-row { flex-wrap: wrap; gap: 10px; }
  .file-row__info { flex: 1 1 100%; order: 2; }
  .file-row .btn { order: 3; width: 100%; }
  .order-card__head { flex-wrap: wrap; gap: 8px; }
  .order-card__sum { width: 100%; }
}

/* Пароль к защищённому PDF — заметная строка под названием файла. */
.file-row__pass {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 4px; padding: 4px 10px; border-radius: 6px;
  background: var(--c-bg-soft); color: var(--c-text-secondary);
  border: 1px solid var(--c-border-subtle);
  font: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.file-row__pass:hover { border-color: var(--c-accent-gold); }
.file-row__pass-text { font-size: 14px; }
/* Значок копирования — две наложенные карточки, рисуем без картинки. */
.file-row__pass::after {
  content: ""; flex: none; width: 11px; height: 12px;
  border: 1.4px solid currentColor; border-radius: 2px; opacity: .6;
  box-shadow: 2px -2px 0 -1.4px var(--c-bg-soft), 3px -3px 0 -1.4px currentColor;
}
.file-row__pass:hover::after { opacity: .9; }
.file-row__pass.is-copied { border-color: var(--c-accent-gold); color: var(--c-text-primary); }
.file-row__pass.is-copied::after { display: none; }
/* Ссылка на видеокурс рядом с файлом. */
.file-row__video {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 4px; color: var(--c-accent-gold); text-decoration: underline;
  text-underline-offset: 2px;
}
.file-row__video:hover { color: var(--c-text-primary); }

/* «Порекомендуйте курс» — ссылки на страницы покупки в кабинете. */
.account-share { margin-top: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.account-share__title { color: var(--c-text-primary); }
.account-share__links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-share__links li { display: flex; flex-direction: column; gap: 2px; }
.account-share__links a { color: var(--c-accent-gold); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.account-share__links a:hover { color: var(--c-text-primary); }

/* Письмо-благодарность в кабинете — тот же вид, что в почте. */
.account-letter { margin-top: 20px; }
.account-letter > div { margin: 0 !important; }

/* Ссылки «поделиться курсом» под файлом в кабинете. */
.file-row__buy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: 4px; color: var(--c-text-muted);
}
/* С полным текстом-просьбой: просьба занимает всю строку, ссылки — рядом под ней. */
.file-row__buy--note { align-items: flex-start; max-width: 640px; }
.file-row__note { flex-basis: 100%; display: block; color: var(--c-text-secondary); }
.file-row__buy a { color: var(--c-accent-gold); text-decoration: underline; text-underline-offset: 2px; }
.file-row__buy a:hover { color: var(--c-text-primary); }
.file-row__buy span { color: var(--c-text-muted); }