/* ==========================================================================
   knigochit.ru — базовые стили + компоненты (Phase 1)
   Перенесено без изменений из prototype/styles.css §2-§22
   (agents/design_agent/web/tasks/active/web_catalog_mvp_uiux_phase1_2026_06_09/).
   Токены — в tokens.css (подключается перед этим файлом).
   Компоненты карточек/офферов/листингов оживают по мере вёрстки поверхностей
   (подзадачи 02-03). Значения менять только по согласованию с design.
   ========================================================================== */

/* ----------------------------- 2. Reset / base -------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-brand); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; background: var(--color-surface);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); z-index: 999; transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--space-3); }

/* ----------------------------- 3. Layout ------------------------------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { .container { padding: 0 var(--gutter-lg); } }
.section { margin: var(--space-7) auto; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
.section__head a { color: var(--color-accent-600); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.stack > * + * { margin-top: var(--space-4); }

/* ----------------------------- 4. Header ------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(248,248,246,0.92); backdrop-filter: blur(8px);
  border-bottom: var(--border-1);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); height: 64px; }
.logo { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-brand); white-space: nowrap; }
.logo b { color: var(--color-accent); }
.site-nav { display: none; gap: var(--space-5); margin-left: auto; font-weight: var(--fw-medium); }
.site-nav a:hover { color: var(--color-accent-600); }
@media (min-width: 768px) { .site-nav { display: flex; } }
.header-search { flex: 1; max-width: 420px; margin-left: auto; }
@media (min-width: 768px) { .header-search { margin-left: var(--space-5); margin-right: var(--space-5); } }
.burger { display: inline-flex; border: var(--border-1); background: var(--color-surface); border-radius: var(--radius-md); width: 40px; height: 40px; align-items: center; justify-content: center; }
@media (min-width: 768px) { .burger { display: none; } }

/* ----------------------------- 5. Search ------------------------------- */
.search { position: relative; display: flex; }
.search input {
  width: 100%; font-size: var(--fs-base); color: var(--color-ink);
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-pill);
  padding: 10px var(--space-5) 10px var(--space-4); transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.search input::placeholder { color: var(--color-muted); }
.search input:focus-visible { box-shadow: var(--focus-ring); border-color: var(--color-accent); }
.search__btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: none; border-radius: var(--radius-pill);
  background: var(--color-accent-600); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.search__btn:hover { background: var(--color-accent-700); }
.search--hero input { padding: 16px var(--space-7) 16px var(--space-5); font-size: var(--fs-md); border-radius: var(--radius-lg); }
.search--hero .search__btn { width: 48px; height: 48px; border-radius: var(--radius-md); }

/* ----------------------------- 6. Hero --------------------------------- */
.hero { text-align: center; padding: var(--space-8) 0 var(--space-6); }
.hero h1 { font-size: clamp(1.75rem, 4vw, var(--fs-2xl)); margin-bottom: var(--space-3); }
.hero p { color: var(--color-ink-2); font-size: var(--fs-md); margin-bottom: var(--space-5); }
.hero .search { max-width: 640px; margin: 0 auto; }

/* ----------------------------- 7. Chips / badges ----------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; padding: 6px var(--space-3);
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-ink-2);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.chip:hover { background: var(--color-bg-2); border-color: var(--color-muted); color: var(--color-ink); }
.chip--accent { background: var(--color-accent-50); border-color: transparent; color: var(--color-accent-700); }
.badge {
  display: inline-flex; align-items: center; padding: 2px var(--space-2);
  background: var(--color-bg-2); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-ink-2);
}

/* ----------------------------- 8. Book grid / card --------------------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-5); }
@media (min-width: 768px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }

.book-card { display: flex; flex-direction: column; }
.cover {
  aspect-ratio: 2/3; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  overflow: hidden; background: var(--color-bg-2); position: relative;
}
.book-card:hover .cover { box-shadow: var(--shadow-md); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
/* плейсхолдер обложки (генеративный, для прототипа) */
.cover--ph { display: flex; align-items: flex-end; padding: var(--space-3); color: #fff; }
.cover--ph .cover__t { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.book-card__title { margin-top: var(--space-3); font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card__author { color: var(--color-muted); font-size: var(--fs-xs); margin-top: 2px; }

/* карточки подборок (коллаж) */
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .collection-grid { grid-template-columns: repeat(4, 1fr); } }
.collection-card { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base); }
.collection-card:hover { box-shadow: var(--shadow-md); }
.collection-card__covers { display: flex; height: 120px; }
.collection-card__covers span { flex: 1; }
.collection-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.collection-card__title { font-family: var(--font-head); font-weight: var(--fw-semibold); }
.collection-card__meta { color: var(--color-muted); font-size: var(--fs-xs); margin-top: 2px; }

/* ----------------------------- 9. Buttons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-weight: var(--fw-semibold); border-radius: var(--radius-md);
  padding: 12px var(--space-5); min-height: var(--tap-min); border: 1px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
/* Основной CTA — фон accent-700: белый текст даёт контраст ~5:1 (AA для обычного текста) */
.btn--primary { background: var(--color-accent-700); color: #fff; }
.btn--primary:hover { background: #0a6a62; color: #fff; }
.btn--primary:active { background: #08544c; }
.btn--secondary { background: var(--color-surface); border-color: var(--color-line); color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-bg-2); color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-accent-600); padding: 8px var(--space-3); }
.btn--block { width: 100%; }
.btn--lg { font-size: var(--fs-md); padding: 16px var(--space-6); }

/* ----------------------------- 10. Rating ------------------------------ */
.rating { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-2); font-size: var(--fs-sm); }
.stars { --val: 0; position: relative; display: inline-block; font-size: var(--fs-md); line-height: 1; }
.stars::before { content: "★★★★★"; color: var(--color-star-empty); letter-spacing: 2px; }
.stars::after { content: "★★★★★"; color: var(--color-star); letter-spacing: 2px; position: absolute; left: 0; top: 0;
  width: calc(var(--val) / 5 * 100%); overflow: hidden; }

/* ----------------------------- 11. Breadcrumbs ------------------------- */
.breadcrumbs { font-size: var(--fs-sm); color: var(--color-muted); padding: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs a:hover { color: var(--color-brand); }
.breadcrumbs span[aria-current] { color: var(--color-ink-2); }

/* ----------------------------- 12. Book page --------------------------- */
.book-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .book-layout { grid-template-columns: 300px 1fr; gap: var(--space-7); align-items: start; } }
.book-hero__cover { max-width: 240px; margin: 0 auto; }
@media (min-width: 768px) { .book-hero__cover { max-width: none; position: sticky; top: 88px; } }
.book-hero h1 { font-size: clamp(1.5rem, 3vw, var(--fs-xl)); }
.book-hero__author { color: var(--color-ink-2); font-size: var(--fs-md); margin-top: var(--space-1); }
.book-hero__author a { color: var(--color-accent-600); }
.book-hero__genres { margin-top: var(--space-3); }

.book-block { margin-top: var(--space-6); }
.book-block > h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.summary { background: var(--color-bg-2); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--color-ink-2); }
.prose { max-width: 68ch; color: var(--color-ink-2); }
.prose p + p { margin-top: var(--space-3); }

/* Текст-блок листинга (SEO §4, миграция 019): подзаголовок под H1 + intro +
   SEO-секции внизу. intro/секции переиспользуют .prose/.section. */
.listing-subtitle { margin-top: var(--space-2); color: var(--color-ink-2); font-size: var(--fs-lg); }
.listing-intro { margin-top: var(--space-3); margin-bottom: var(--space-6); }
.listing-seo { border-top: 1px solid var(--color-line); padding-top: var(--space-6); }
.meta-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.meta-table th, .meta-table td { text-align: left; padding: var(--space-2) 0; border-bottom: var(--border-1); vertical-align: top; }
.meta-table th { color: var(--color-muted); font-weight: var(--fw-regular); width: 40%; }

/* Возрастной знак LAW-005 (.age-badge) — у названия + в углу обложки */
.age-badge { display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--fs-xs); line-height: 1; padding: 3px 7px; border-radius: var(--radius-sm); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink-2); white-space: nowrap; letter-spacing: .01em; }
.age-badge--18 { border-color: var(--color-brand); color: #b3283f; font-weight: var(--fw-bold); }  /* текст затемнён до WCAG AA (§9); рамка — бренд-коралл (highlight) */
.cover { position: relative; }
.cover .age-badge { position: absolute; top: var(--space-2); right: var(--space-2); background: rgba(255,255,255,0.92); backdrop-filter: blur(2px); box-shadow: var(--shadow-sm); }

/* Интерстишл 18+ LAW-005 (.age-gate) — self-attestation, презентационный гейт.
   Контент карточки остаётся в DOM (краулеры/SEO — legal_presentational_age_gate:
   индексация ≠ распространение среди несовершеннолетних), но оверлей обязан
   делать его НЕЧИТАЕМЫМ до подтверждения (legal-оговорка «гейт до показа
   контента»; референс Читай-город = backdrop-filter: blur(8px)). НЕ ослаблять
   blur — при слабом (3px) контент 18+ просвечивает (QA-WEB-001). */
.age-gate-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(31,27,24,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.age-verified .age-gate-backdrop { display: none !important; }
.age-gate { position: relative; z-index: var(--z-modal); width: 100%; max-width: 440px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); text-align: center; }
.age-gate__icon { width: 44px; height: 44px; margin: 0 auto var(--space-4); color: #b3283f; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-brand); border-radius: var(--radius-pill); font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.age-gate h2 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.age-gate p { color: var(--color-ink-2); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.age-gate__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.age-gate__note { color: var(--color-muted); font-size: var(--fs-xs); margin-top: var(--space-4); }
@media (min-width: 520px) { .age-gate__actions { flex-direction: row-reverse; justify-content: center; } .age-gate__actions .btn { min-width: 160px; } }

/* Правовое предупреждение LAW-016 (.legal-notice) — мягкая амбра, не «алярм» */
.legal-notice { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-left: 3px solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-5); color: var(--color-ink-2); font-size: var(--fs-sm); }
.legal-notice__icon { flex: none; width: 20px; height: 20px; color: var(--color-warning); }
.legal-notice p { margin: 0; }

/* FAQ (аккордеон details/summary, GEO) */
.faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 68ch; }
.faq__item { border: var(--border-1); border-radius: var(--radius-md); background: var(--color-surface); }
.faq__q { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: var(--fw-medium); list-style: none; position: relative; padding-right: var(--space-7); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: var(--space-4); color: var(--color-muted); font-size: var(--fs-lg); line-height: 1; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.faq__a { padding: 0 var(--space-4) var(--space-4); color: var(--color-ink-2); }

/* community-задел Phase 2 (UI-OFF) — визуальная отметка в прототипе */
.phase2-stub { border: 1px dashed var(--color-line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--color-muted); font-size: var(--fs-sm); background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.012) 10px, rgba(0,0,0,0.012) 20px); }
.phase2-stub b { color: var(--color-ink-2); }

/* ----------------------------- 13. Offer block (LAW-015) --------------- */
.offers { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.offers > h2 { font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.offers__sub { font-size: var(--fs-sm); color: var(--color-muted); margin: var(--space-5) 0 var(--space-3); text-transform: none; }

.offer { background: var(--color-ad-bg); border: 1px solid var(--color-ad-border); border-radius: var(--radius-md); padding: var(--space-4); }
.offer + .offer { margin-top: var(--space-3); }
.offer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.badge--ad { background: transparent; border: 1px solid var(--color-ad-border); color: var(--color-ad-label); font-size: var(--fs-xs); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-weight: var(--fw-medium); letter-spacing: .02em; }
.offer__partner { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.offer__attrs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-ink-2); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.offer__attrs .price { font-weight: var(--fw-semibold); color: var(--color-ink); }
.offer .btn { width: 100%; }
.ad-meta { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-ad-label); line-height: 1.4; }
.ad-meta .erid { font-family: var(--font-mono); }

.offer--primary { background: var(--color-accent-50); border-color: transparent; box-shadow: var(--shadow-sm); }
.offer--primary .offer__partner { font-size: var(--fs-lg); }

.offers__secondary { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 520px) { .offers__secondary { grid-template-columns: 1fr 1fr; } }
.offer--secondary { padding: var(--space-3); }
.offer--secondary .offer__partner { font-size: var(--fs-base); }

/* ----------------------------- 14. Footer ------------------------------ */
.site-footer { border-top: var(--border-1); background: var(--color-bg-2); margin-top: var(--space-8); }
.site-footer__inner { padding-block: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__links a:hover { color: var(--color-brand); }
.site-footer__disclaimer { color: var(--color-muted); }

/* ----------------------------- 16. Toolbar / sort --------------------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.toolbar__count { color: var(--color-muted); font-size: var(--fs-sm); }
.select {
  appearance: none; font: inherit; font-size: var(--fs-sm); color: var(--color-ink);
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-pill);
  padding: 8px var(--space-5) 8px var(--space-4); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.select:focus-visible { box-shadow: var(--focus-ring); border-color: var(--color-accent); }

/* ----------------------------- 17. Pagination ------------------------- */
.pagination { display: flex; gap: var(--space-2); justify-content: center; align-items: center; margin: var(--space-6) 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: var(--border-1); background: var(--color-surface); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.pagination a:hover { background: var(--color-bg-2); border-color: var(--color-muted); }
.pagination .is-current { background: var(--color-accent-50); border-color: transparent; color: var(--color-accent-700); }
.pagination .is-gap { border: none; background: transparent; }

/* Узкая центрированная колонка для текстовых/редакционных страниц */
.page-narrow { max-width: 820px; margin-inline: auto; }
.page-narrow .prose { max-width: none; }

/* Вступление листинговой страницы — во всю ширину контента (над сеткой) */
.page-intro { color: var(--color-ink-2); margin: var(--space-3) 0 var(--space-6); }

/* ----------------------------- 18. Ranked list (подборка) ------------- */
.ranked { display: flex; flex-direction: column; gap: var(--space-4); }
.ranked__item { display: grid; grid-template-columns: 40px 88px 1fr; gap: var(--space-3) var(--space-4); align-items: start; padding-bottom: var(--space-4); border-bottom: var(--border-1); }
.ranked__num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--color-brand); line-height: 1; }
.ranked__cover .cover { box-shadow: var(--shadow-sm); }
.ranked__body h3 { font-size: var(--fs-md); }
.ranked__body .author { color: var(--color-muted); font-size: var(--fs-sm); margin: 2px 0 var(--space-2); }
.ranked__body .why { color: var(--color-ink-2); font-size: var(--fs-sm); }
@media (max-width: 519px) { .ranked__item { grid-template-columns: 28px 64px 1fr; } .ranked__num { font-size: var(--fs-lg); } }

/* ----------------------------- 19. Empty / noresults ------------------ */
.noresults { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-ink-2); }
.noresults__icon { width: 48px; height: 48px; color: var(--color-muted); margin: 0 auto var(--space-4); display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.noresults h2 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.noresults p { color: var(--color-muted); margin-bottom: var(--space-4); }
.noresults .chip-row { justify-content: center; }

/* ----------------------------- 20. Legal page ------------------------- */
.legal { max-width: var(--container-text); margin: 0 auto; padding-bottom: var(--space-7); }
.legal__meta { color: var(--color-muted); font-size: var(--fs-sm); margin: var(--space-2) 0 var(--space-6); }
.legal h2 { font-size: var(--fs-lg); margin: var(--space-6) 0 var(--space-3); }
.legal h3 { font-size: var(--fs-md); margin: var(--space-5) 0 var(--space-2); }
.legal p, .legal li { color: var(--color-ink-2); }
.legal ul { padding-left: var(--space-5); list-style: disc; }
.legal li { margin-top: var(--space-2); }
.legal__toc { background: var(--color-bg-2); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); }
.legal__toc a { color: var(--color-accent-700); }
.legal__lead { color: var(--color-ink-2); font-size: var(--fs-md); margin-bottom: var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--color-accent-50); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--space-3) 0; }
.legal-table th, .legal-table td { text-align: left; padding: var(--space-2) var(--space-3); border: var(--border-1); vertical-align: top; color: var(--color-ink-2); }
.legal-table th { background: var(--color-bg-2); font-weight: var(--fw-medium); }

/* Cookie-баннер (opt-in) */
.site-footer__cookie { background: none; border: none; padding: 0; color: var(--color-muted); font: inherit; cursor: pointer; text-decoration: underline; }
.site-footer__cookie:hover { color: var(--color-brand); }
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--color-surface); border-top: var(--border-1); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-block: var(--space-4); }
.cookie-banner__text { flex: 1 1 320px; font-size: var(--fs-sm); color: var(--color-ink-2); }
.cookie-banner__text a { color: var(--color-accent-700); }
.cookie-banner__cats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.cookie-banner__cats label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cookie-banner__actions .btn { min-height: 40px; }
@media (max-width: 640px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1 1 auto; } }

/* ----------------------------- 21. Hub (индекс жанров/подборок) ------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .hub-grid { grid-template-columns: repeat(4, 1fr); } }
.hub-tile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); font-weight: var(--fw-medium); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.hub-tile:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.hub-tile .count { color: var(--color-muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }

/* ----------------------------- 22. Book page v2: центрирование + компактные офферы --- */
/* Основной контент карточки — узкая центрированная колонка */
.book-page { max-width: 820px; margin: 0 auto; }
.book-page .prose { max-width: none; }
.book-layout { grid-template-columns: 1fr; }
@media (min-width: 768px) { .book-layout { grid-template-columns: 220px 1fr; gap: var(--space-6); } }
.book-hero__cover { max-width: 200px; }
@media (min-width: 768px) { .book-hero__cover { max-width: none; } }

/* Краткая сводка сразу под идентификацией книги (первый экран) */
.book-lead { color: var(--color-ink-2); font-size: var(--fs-md); margin-top: var(--space-4); }

/* Компактный блок офферов */
.offers--compact { padding: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.offers--compact > h2 { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.offer--compact { padding: var(--space-3) var(--space-4); }
.offer--compact .offer__line { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.offer--compact .offer__partner { font-size: var(--fs-base); }
.offer--compact .offer__price { font-weight: var(--fw-semibold); color: var(--color-ink); }
.offer--compact .offer__fmt { color: var(--color-muted); font-size: var(--fs-sm); }
.offer--compact .offer__cta { margin-left: auto; width: auto; min-height: 40px; padding: 8px var(--space-4); font-size: var(--fs-sm); white-space: nowrap; }
.offer--compact .ad-meta { margin-top: var(--space-2); }
.offers__secondary--compact { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.offers__secondary--compact .offer--compact { background: var(--color-ad-bg); }
.offers__empty { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 519px) { .offer--compact .offer__cta { margin-left: 0; width: 100%; min-height: 44px; } }

/* ----------------------------- 15. Icons ------------------------------- */
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }