/* ═══════════════════════════════════════════════════════════════════════════
   Общий файл компонентов UI Library (docs/ui-library.html) — подключается на всех страницах первым после tokens.css:
   сброс, типографика, каркас, шапка и меню, корзина, кнопки, окна, анонс, подвал, курсор.
   Файлы страниц содержат только свои блоки и компоненты не переопределяют — это проверяет tools/lint-css.mjs
   (npm run check). Новый или изменённый компонент — сюда и в UI Library. После правки — CSS_VERSION в tools/templates/layout.mjs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Токены раскладки сайта — их нет в UI library. Цвета, шрифты, отступы и тень — в css/tokens.css.
   Темы игр (css/themes/*.css) переопределяют --cream/--cocoa/--rust/--honey и эти «обложечные» --sand-2, --dark, --dark-ink, --hero-*, --ink-soft. */
:root {
  --ink-soft: color-mix(in srgb, var(--cocoa) 72%, var(--cream));
  --sand-2: #fff8ed;
  --dark: #2f5247;
  --dark-ink: #3a221d;
  --hero-glow: rgba(236, 160, 74, .48);
  --hero-gradient: linear-gradient(126deg, #f8ebd8 0%, #f5e2c7 58%, #f3d3aa 100%);
  --t-h1: clamp(34px, 7vw, 102px);
  --t-h2: clamp(28px, 5vw, 66px);
  --t-h3: clamp(19px, 1.6vw, 24px);
  --t-lead: clamp(17px, 1.5vw, 21px);
  --t-body: 16px;
  --t-small: 13.5px;
  --t-cap: 12px;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 34px);
  --section-y: clamp(64px, 9vw, 116px);
  --r-sm: 11px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-card: 4.49% / 2.97%;   /* скругление карты: 3,5 мм на формате 78 × 118 мм */
  --shadow-card: 0 18px 34px -20px rgba(84, 43, 38, .34), 0 2px 6px rgba(84, 43, 38, .08);
  --shadow-lift: 0 32px 44px -20px rgba(84, 43, 38, .46);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--cocoa);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, a, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
h1 { margin-bottom: 24px; font-size: var(--t-h1); }
h2 { margin-bottom: 18px; font-size: var(--t-h2); }
h3 { margin-bottom: 10px; font-size: var(--t-h3); line-height: 1.2; }
p { margin-bottom: 0; }
p + p { margin-top: 12px; }
:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cocoa); color: var(--paper); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }

.wrap { width: min(calc(100% - 2 * var(--gutter)), var(--wrap)); margin-inline: auto; }

/* ── секции ─────────────────────────────────────────────────────────────── */
.section { padding: var(--section-y) 0; }
.section-head { max-width: 780px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { max-width: 650px; color: var(--ink-soft); font-size: var(--t-lead); line-height: 1.5; }
.section-head.center p { margin-inline: auto; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  color: var(--rust); font-size: var(--t-cap); font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
}
.eyebrow::before { width: 26px; height: 2px; background: currentColor; content: ""; flex: 0 0 auto; }
.center .eyebrow { justify-content: center; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-soft); }

/* появление при прокрутке — только с JS и без reduced-motion */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── логотип (сама шапка — раздел «шапка» ниже, после вариантов разделов) ── */

/* Логотип Almabella. Отдельный SVG-файл logo-mask.svg с fill:#000 (не currentColor).
   Причина: при использовании SVG как mask-image браузер рендерит его в изоляции — currentColor резолвится в прозрачный → маска пустая → элемент показывает только background = коричневый прямоугольник.
   Для декоративного рендера (в статьях, футере как <img>) используем оригинальный logo.svg с currentColor.
   viewBox 750.36 × 155.13 (~4.84:1). Красится через background = var(--cocoa); dark-вариант — background = var(--paper) в footer. */
.logo { display: block; width: 143px; height: 30px; flex: 0 0 auto; background: var(--cocoa); -webkit-mask: url("../assets/img/logo-mask.svg") left center / contain no-repeat; mask: url("../assets/img/logo-mask.svg") left center / contain no-repeat; }

.nav-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px; border-radius: 10px; background: var(--cocoa); color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.nav-cta span { color: var(--yellow); }

/* ── кнопки ─────────────────────────────────────────────────────────────── */
/* .btn.btn-primary / .btn.btn-secondary — легаси-кнопки (только архивные версии страниц: tools/templates/game.mjs, css/home.css);
   только вместе с .btn — класс .btn-primary без .btn у «Жизненных выборов» (своя кнопка с плашкой) их не получает.
   .ui-btn-primary / .ui-btn-secondary — рекомендуемый вариант по UI library (docs/ui-library.html).
   Новые страницы (legal, cookies, collaboration, qr, digital, blog, about, gift, 404, success, fail) — только их. */
.btn {
  display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 12px;
  padding: 0 24px; border: 0; border-radius: 11px; text-decoration: none; font-weight: 600; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn.btn-primary { background: var(--honey); color: #fff; box-shadow: 4px 4px 0 var(--rust); }
.btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 5px 7px 0 var(--rust); }
.btn.btn-primary:active, .btn.btn-primary.is-pressed { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--rust); }
.btn.btn-secondary { border: 1.5px solid rgba(84, 43, 38, .35); background: rgba(255, 255, 255, .18); }
.btn.btn-secondary:hover { border-color: var(--rust); color: var(--rust); }
.btn.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* ── UI library button (plate-slide) — глобально доступен ─────────────────── */
.ui-btn-primary {
  --btn-plate: var(--rust); --btn-face-bg: var(--honey); --btn-face-text: var(--cocoa);
  position: relative; overflow: visible; display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0; background: var(--btn-plate); border-radius: 12px;
  border: none; cursor: pointer; font-family: var(--display); user-select: none; text-decoration: none;
}
.ui-btn-primary > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 var(--btn-pad-x, 26px); background: var(--btn-face-bg); color: var(--btn-face-text);
  border-radius: 12px; font-weight: 700; font-size: var(--btn-font-size, 15px); font-family: var(--display);
  translate: -4px -4px; transition: translate .18s var(--ease); white-space: nowrap;
}
.ui-btn-primary:hover > span { translate: -7px -7px; }
.ui-btn-primary:active > span, .ui-btn-primary.is-pressed > span { translate: 0 0; }
/* неактивная (форма отправляется): приглушена; курсор — общий (button:disabled → not-allowed) */
.ui-btn-primary:disabled { opacity: .6; }
/* фокус: лицо сдвинуто на 4px вверх-влево — кольцо отодвинуто, чтобы не налезать на него */
.ui-btn-primary:focus-visible { outline-offset: 6px; }

.ui-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 26px; border-radius: 12px; border: 1.5px solid rgba(84, 43, 38, .35);
  color: var(--cocoa); background: transparent; font-weight: 700; font-size: 15px; font-family: var(--display);
  cursor: pointer; text-decoration: none;
  transition: border-color .2s, color .2s, transform .12s var(--ease), background-color .12s var(--ease);
}
.ui-btn-secondary:hover { border-color: var(--rust); color: var(--rust); }
.ui-btn-secondary:active, .ui-btn-secondary.is-pressed { transform: scale(.96); background-color: var(--cream); border-color: var(--rust); color: var(--rust); } /* ui-library: «продавливание» + заливка cream */
/* ui-library: на тач-устройствах hover не нужен — после касания кнопка не остаётся «наведённой» */
@media (hover: none) and (pointer: coarse) { .ui-btn-secondary:hover { border-color: rgba(84, 43, 38, .35); color: var(--cocoa); } }

/* Размер лица задают переменные --btn-pad-x / --btn-font-size (страница может уточнить их у кнопки, например в узкой карточке).
   Модификаторы из UI library (#buttons): цветовые варианты primary, размер sm, secondary для тёмных фонов, мобильные (тап вместо plate-slide) */
.ui-btn-primary--paper { --btn-plate: var(--paper); --btn-face-press: var(--honey-dark); }
.ui-btn-primary--cream { --btn-face-bg: var(--cream); --btn-face-text: var(--cocoa); --btn-face-press: #ead6bb; }
.ui-btn-primary--inverse { --btn-plate: var(--honey); --btn-face-bg: var(--cocoa); --btn-face-text: var(--cream); --btn-face-press: #3a1f19; }
.ui-btn-primary--purple { --btn-face-bg: var(--purple); --btn-face-text: var(--cream); --btn-plate: var(--purple-dark); --btn-face-press: #5a336b; } /* ui-library → «Акцентная пара 2» */
.ui-btn-primary--blue { --btn-face-bg: var(--blue); --btn-face-text: var(--cream); --btn-plate: var(--blue-dark); --btn-face-press: #4f5f88; } /* раздел «Сотрудничество» */
.ui-btn-primary.ui-btn-sm, .ui-btn-primary.ui-btn-sm > span { min-height: 44px; }
.ui-btn-primary.ui-btn-sm > span { padding: 0 var(--btn-pad-x, 18px); font-size: var(--btn-font-size, 14px); }
.ui-btn-secondary.ui-btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.ui-btn-secondary--light { border-color: rgba(245, 231, 211, .5); color: var(--cream); }
.ui-btn-secondary--light:hover { border-color: var(--honey); color: var(--honey); }
.ui-btn-secondary--light:active, .ui-btn-secondary--light.is-pressed { background-color: rgba(245, 231, 211, .12); border-color: var(--honey); color: var(--honey); }
.ui-btn-primary--mobile { width: 100%; min-height: 52px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .12s cubic-bezier(.2, .7, .3, 1); }
.ui-btn-primary--mobile > span { width: 100%; min-height: 52px; padding: 0 22px; font-size: 15px; translate: 0 0; }
.ui-btn-primary--mobile:hover > span { translate: 0 0; }
.ui-btn-primary--mobile:active, .ui-btn-primary--mobile.is-pressed { transform: scale(.94); }
.ui-btn-primary--mobile:active > span, .ui-btn-primary--mobile.is-pressed > span { translate: 0 0; background: var(--btn-face-press, var(--honey-dark)); box-shadow: inset 0 2px 6px rgba(76, 43, 35, .25); }
.ui-btn-secondary--mobile { width: 100%; min-height: 52px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Набор «основная + контурная» (ui-library → «Правило выравнивания»): контурная — 60px, вровень с основной вместе с её подложкой.
   Раскладку набора (строка, колонка, ширина кнопок) задаёт страница. */
.ui-btn-set .ui-btn-secondary { min-height: 60px; padding: 0 22px; }
@media (max-width: 620px) { .ui-btn-set .ui-btn-secondary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } }
/* .ui-btn-secondary--phone: на телефоне (≤620px) — контурная из набора «Мобилка» (ui-library: 48px, 14px, скругление 10) */
@media (max-width: 620px) {
  .ui-btn-secondary.ui-btn-secondary--phone { min-height: 48px; padding: 0 20px; font-size: 14px; border-radius: 10px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .ui-btn-secondary.ui-btn-secondary--phone:hover { border-color: rgba(84, 43, 38, .35); color: var(--cocoa); }
  .ui-btn-secondary.ui-btn-secondary--phone:active, .ui-btn-secondary.ui-btn-secondary--phone.is-pressed { transform: scale(.96); background-color: var(--cream); border-color: var(--rust); color: var(--rust); }
}
/* --phone: на телефоне (≤620px) — высота набора «Мобилка» (52px) без растяжения на всю ширину; движение на телефоне — общее (ниже, «Анимация кнопок») */
@media (max-width: 620px) {
  .ui-btn-primary--phone, .ui-btn-primary--phone > span { min-height: 52px; }
  .ui-btn-primary--phone > span { padding: 0 22px; }
}

/* .ui-btn-ring — круглая иконка-кнопка (стрелки шагов, закрытие модалки): покой — прозрачный круг, hover — заливка --ring */
.ui-btn-ring {
  --ring: var(--cocoa); --ring-on: var(--paper); --ring-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 50%; background: var(--ring-bg); color: var(--ring); font: inherit; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.ui-btn-ring:hover, .ui-btn-ring:focus-visible { background: var(--ring); color: var(--ring-on); }
.ui-btn-ring:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-btn-ring--sm { width: 28px; height: 28px; }
.ui-btn-ring--paper { --ring-bg: var(--paper); }
.ui-btn-ring--rust { --ring: var(--rust); --ring-on: var(--paper); }
.ui-btn-ring--cream { --ring: var(--cream); --ring-on: var(--rust); }
.ui-btn-ring--honey { --ring: var(--honey); --ring-on: var(--cocoa); }
.ui-btn-ring--mobile { width: 44px; height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ui-btn-ring--mobile:hover { background: var(--ring-bg); color: var(--ring); transform: none; }
.ui-btn-ring--mobile:active, .ui-btn-ring--mobile.is-pressed { background: var(--ring); color: var(--ring-on); transform: scale(.92); }
/* крестик закрытия окна в круглой кнопке (ui-library → .btn-ring с .dood-cross): на hover круг заливается и крестик поворачивается на 90° */
.ui-ring-cross { display: block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url('../assets/doodle-icons/SVG/interface/cross.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/interface/cross.svg') center / contain no-repeat; }
.ui-btn-ring:is(:hover, :focus-visible):has(.ui-ring-cross) { transform: rotate(90deg); }
.ui-btn-ring--mobile .ui-ring-cross { width: 16px; height: 16px; }
.ui-btn-ring--mobile:hover:has(.ui-ring-cross) { transform: none; }
.ui-btn-ring--mobile:is(:active, .is-pressed):has(.ui-ring-cross) { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) { .ui-btn-ring:has(.ui-ring-cross) { transform: none !important; } }
.price { display: flex; align-items: baseline; gap: 6px; margin-right: 4px; }
.price strong { font-family: var(--display); font-size: 38px; line-height: 1; letter-spacing: -.02em; font-weight: 700; }
.price span { color: var(--ink-soft); font-size: 15px; }
.price-note { color: var(--ink-soft); font-size: 14px; }

/* ── карточки-изображения ───────────────────────────────────────────────── */
.card-button { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-card); background: transparent; box-shadow: var(--shadow-card); cursor: zoom-in; transition: transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; }
.card-button img { width: 100%; height: auto; border-radius: inherit; }
.card-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(74, 36, 24, .12); background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 44%); pointer-events: none; }
.card-button:hover, .card-button:focus-visible { transform: translateY(-10px) rotate(-1deg); box-shadow: var(--shadow-lift); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--display); font-size: 19px; font-weight: 600; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; content: "+"; text-align: center; font-family: var(--body); font-size: 19px; font-weight: 400; line-height: 26px; transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { max-width: 670px; padding: 0 50px 26px 0; color: var(--ink-soft); }

/* ── галерея (ui-library → «Галерея») ───────────────────────────────────────
   Лента фото 3:2 со scroll-snap (свайп — родной прокруткой), стрелки — .ui-btn-ring, под лентой — миниатюры.
   Цвета читает из --gal-*: страница меняет эти переменные, а не правила компонента. Поведение — js/ui-gallery.js. */
.ui-gallery { --gal-ink: var(--cocoa); --gal-paper: var(--paper); --gal-accent: var(--rust); width: 100%; max-width: 980px; margin: 0 auto; }
.ui-gallery-stage { position: relative; overflow: hidden; border-radius: 16px; background: color-mix(in srgb, var(--gal-ink) 7%, var(--gal-paper)); }
.ui-gallery-track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.ui-gallery-track::-webkit-scrollbar { display: none; }
.ui-gallery-slide { flex: 0 0 100%; aspect-ratio: 3 / 2; scroll-snap-align: center; scroll-snap-stop: always; }
.ui-gallery-slide img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.ui-gallery-arrow { --ring: var(--gal-ink); --ring-on: var(--gal-paper); position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; }
.ui-gallery-arrow--prev { left: 14px; }
.ui-gallery-arrow--next { right: 14px; }
.ui-gallery-arrow:disabled { opacity: .35; pointer-events: none; }
.ui-ring-arrow { display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url('../assets/doodle-icons/SVG/arrows/arrow-right.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/arrows/arrow-right.svg') center / contain no-repeat; }
.ui-gallery-arrow--prev .ui-ring-arrow { transform: scaleX(-1); }
.ui-gallery-count { position: absolute; right: 14px; bottom: 14px; margin: 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gal-ink) 72%, transparent); color: var(--gal-paper); font-size: 13px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ui-gallery-thumbs { position: relative; display: flex; gap: 8px; width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 3px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ui-gallery-thumbs::-webkit-scrollbar { display: none; }
.ui-gallery-thumb { display: block; flex: 0 0 auto; width: 96px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; opacity: .6; cursor: pointer; transition: opacity .2s, border-color .2s; }
.ui-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-gallery-thumb:hover { opacity: 1; }
.ui-gallery-thumb[aria-current="true"] { opacity: 1; border-color: var(--gal-accent); }
.ui-gallery-thumb:focus-visible { outline: 2px solid var(--gal-accent); outline-offset: 2px; }
/* телефон: листают пальцем — стрелок нет, лента на всю ширину, миниатюры мельче */
@media (max-width: 620px) {
  .ui-gallery-stage { border-radius: 12px; }
  .ui-gallery-arrow { display: none; }
  .ui-gallery-thumb { width: 72px; height: 54px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ui-gallery-track { scroll-behavior: auto; } .ui-gallery-thumb { transition: none; } }

/* ── подвал ─────────────────────────────────────────────────────────────── */
footer.site-footer { padding: 54px 0 40px; background: var(--dark-ink); color: rgba(255, 245, 231, .62); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.site-footer .logo { width: 164px; height: 34px; margin-bottom: 20px; background: var(--paper); }
.site-footer p { max-width: 460px; font-size: 13px; }
.site-footer p + p { margin-top: 7px; }
.site-footer h3 { color: var(--paper); font-family: var(--body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; text-decoration: none; }
.footer-links a:hover { color: var(--yellow); }
.footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 245, 231, .12); font-size: 12px; }

/* ── липкая покупка на мобильном ────────────────────────────────────────── */
.mobile-buy { display: none; }

/* ── лайтбокс ───────────────────────────────────────────────────────────── */
dialog.lightbox { width: min(92vw, 640px); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; overflow: visible; background: transparent; }
dialog.lightbox::backdrop { background: rgba(46, 25, 21, .82); backdrop-filter: blur(8px); }
.lightbox-figure { margin: 0; text-align: center; }
.lightbox-figure img { max-height: 84vh; width: auto; max-width: 100%; margin: auto; border-radius: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, .48); }
.lightbox-figure figcaption { margin-top: 13px; color: var(--paper); font-size: 13px; }
/* Фото галереи (.ui-gallery) на весь экран: тот же диалог, шире и без подписи; на телефоне — во весь экран на тёмном фоне, как у карт */
dialog.lightbox--photo { width: min(96vw, 1200px); max-width: none; }
.lightbox--photo .lightbox-figure img { max-height: 88vh; max-width: 100%; cursor: zoom-out; }
@media (max-width: 620px) {
  dialog.lightbox--photo { width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: calc(66px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 0; overflow: auto; background: #211a20; }
  .lightbox--photo .lightbox-figure { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100%; }
  .lightbox--photo .lightbox-figure img { max-height: calc(100dvh - 145px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); object-fit: contain; border-radius: 6px; }
}
.lightbox-close { position: fixed; right: 22px; top: 22px; }
/* Крестик полноэкранного просмотра — круглая кнопка из ui-library (#modal .ui-modal-close / #buttons .btn-ring--paper):
   paper-круг с doodle cross.svg; десктоп 36px — hover заливает cocoa и поворачивает крестик на 90°;
   телефон 44px (touch-target) — без hover, по тапу заливка cocoa + scale .92. Один вид для игр, ежедневников и остальных страниц. */
:is(.lightbox-close, .tb-lightbox-close) { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--paper, #fffcf5); color: var(--cocoa, #4c2b23); font: inherit; line-height: 0; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lightbox-close-icon { display: block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url('../assets/doodle-icons/SVG/interface/cross.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/interface/cross.svg') center / contain no-repeat; }
:is(.lightbox-close, .tb-lightbox-close):hover, :is(.lightbox-close, .tb-lightbox-close):focus-visible { background: var(--cocoa, #4c2b23); color: var(--paper, #fffcf5); transform: rotate(90deg); }
:is(.lightbox-close, .tb-lightbox-close):focus-visible { outline: 2px solid var(--paper, #fffcf5); outline-offset: 2px; }
@media (hover: none), (max-width: 640px) {
  :is(.lightbox-close, .tb-lightbox-close) { width: 44px; height: 44px; }
  .lightbox-close-icon { width: 16px; height: 16px; }
  :is(.lightbox-close, .tb-lightbox-close):hover { background: var(--paper, #fffcf5); color: var(--cocoa, #4c2b23); transform: none; }
  :is(.lightbox-close, .tb-lightbox-close):active { background: var(--cocoa, #4c2b23); color: var(--paper, #fffcf5); transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) { :is(.lightbox-close, .tb-lightbox-close), :is(.lightbox-close, .tb-lightbox-close):hover, :is(.lightbox-close, .tb-lightbox-close):active { transform: none; } }

/* ── адаптив каркаса ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .section { padding: 88px 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  h1 { font-size: clamp(46px, 15vw, 68px); }
  h2 { font-size: clamp(34px, 10vw, 40px); }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 38px; }
  .section-head p { font-size: 17px; }

  .nav-cta { display: none; }
  summary { font-size: 17px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .mobile-buy { position: fixed; z-index: 40; right: 10px; bottom: 10px; left: 10px; display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px 9px 18px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 15px; background: color-mix(in srgb, var(--cocoa) 94%, transparent); color: var(--paper); box-shadow: 0 18px 50px rgba(45, 22, 18, .3); backdrop-filter: blur(12px); transform: translateY(120%); transition: transform .3s var(--ease); }
  .mobile-buy[data-shown="true"] { transform: none; }
  .mobile-buy b { font-family: var(--display); font-size: 19px; }
  .mobile-buy a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 9px; background: var(--honey); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }
}
/* Prefers-reduced-motion: не «делаем всё быстрым» (это ломает бесконечные анимации — они вибрируют вместо остановки),
   а точечно гасим то, что реально мельтешит. Marquee/веер/3D остановят сами свои циклы через animation: none в своих секциях. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Формы — консент-чекбокс 1:1 из ui-library.html#forms (hit-area 44×44, бокс 22×22, галочка — doodle tick) */
.uf-consent-label { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0; margin: 8px 0; color: var(--cocoa); font-size: 12px; font-weight: 400; line-height: 1.45; cursor: pointer; max-width: 520px; }
.uf-consent { position: absolute; inset: 0 auto 0 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.uf-consent-box { display: grid; place-items: center; justify-self: center; width: 22px; height: 22px; border: 1.5px solid var(--cocoa); border-radius: 6px; background: var(--paper); color: transparent; transition: background-color .15s, color .15s; }
.uf-consent-box::after { content: ""; display: block; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; -webkit-mask-image: url('../assets/doodle-icons/SVG/interface/tick.svg'); mask-image: url('../assets/doodle-icons/SVG/interface/tick.svg'); }
.uf-consent:checked + .uf-consent-box { background: var(--rust); border-color: var(--rust); color: var(--paper); }
.uf-consent:focus-visible + .uf-consent-box { outline: 3px solid var(--rust); outline-offset: 2px; }
.uf-consent-text a { color: currentColor; text-decoration: underline; text-underline-offset: 2px; }

/* ══ варианты компонентов для разделов ════════════════════════════════════════════════════════════
   Шапка у всех страниц одна (раздел «шапка»), разделы задают ей только переменные (ниже). У страниц игр
   (html[data-editorial]: .ui-btn-primary в цветах игры, .pg-mobile-buy) и ежедневников (html[data-planner]: .tb-button, .tb-mobile-buy) свои кнопки;
   их оформление — здесь, рядом с остальными компонентами, цвета — через переменные разделов (--pg-*, --tb-*).
   Порядок важен: ниже идут подвал, анонс, шапка и движение кнопок — общие правила, которые эти варианты уточняют. */

/* ── шапка разделов: только переменные (сама шапка — общая, раздел «шапка» ниже) ── */
/* игры: цвета палитры игры, логотип — чёрный 87%, шапка 76/64px, поля контейнера 22 → 18 → 14px */
html[data-editorial] { --nav-z: 50; --nav-line: color-mix(in srgb, var(--pg-ink) 12%, transparent); --nav-surface: color-mix(in srgb, var(--pg-bg) 90%, transparent); --nav-ink: var(--pg-ink); --nav-accent: var(--pg-accent); --nav-blur: 16px; --nav-gap: 30px; --nav-gutter: 22px; --nav-logo: rgb(0 0 0 / .87); --nav-logo-w: 144px; --nav-logo-w-phone: 144px; --nav-toggle-ink: var(--cocoa); --nav-menu-pad: 12px 22px 20px; --nav-menu-link-h: 47px; --nav-toggle-m: 0; --nav-menu-shadow: 0 24px 40px -24px #30243355; --nav-account-m: 0 0 8px;
  --announce-display: grid; --announce-min-h: 36px; --announce-py: 7px; --announce-bg: var(--pg-announce-bg, var(--pg-accent)); --announce-ink: var(--pg-announce-ink, var(--pg-paper)); --announce-ls: .04em; --announce-on: var(--pg-accent, #ae5036); }
@media (max-width: 1050px) { html[data-editorial] { --nav-links-gap: 16px; } }
@media (max-width: 860px) { html[data-editorial] { --nav-h: 64px; --nav-gap: 12px; } }
@media (max-width: 620px) { html[data-editorial] { --nav-gutter: 18px; } }
@media (max-width: 360px) { html[data-editorial] { --nav-gap: 6px; --nav-gutter: 14px; --nav-logo-w-phone: 122px; --announce-fs-phone: 9px; --announce-ls: .01em; } }
/* ежедневники: цвета ежедневника, логотип — чёрный 88%, высота шапки — --tb-nav-h (css/planner.css: 72 → 62px) */
html[data-planner] { --nav-z: 60; --nav-line: var(--tb-line); --nav-surface: color-mix(in srgb, var(--tb-bg) 88%, transparent); --nav-ink: var(--tb-ink); --nav-accent: var(--tb-terra); --nav-blur: 16px; --nav-gap: 28px; --nav-gutter: 22px; --nav-h: var(--tb-nav-h); --nav-logo: rgb(0 0 0 / .88); --nav-logo-w: 140px; --nav-logo-w-phone: 120px; --nav-link-opacity: 1; --nav-toggle-ink: var(--cocoa); --nav-menu-pad: 8px 16px 16px; --nav-menu-link-pad: 13px 0; --nav-toggle-m: 0; --nav-menu-shadow: none; --nav-account-m: 6px 0 8px;
  --announce-display: grid; --announce-min-h: 34px; --announce-py: 7px; --announce-bg: var(--tb-black); --announce-ink: var(--tb-on-dark); --announce-ls: .04em; --announce-fs-phone: 12px; --announce-on: var(--tb-black, #14110f); }
@media (max-width: 1100px) { html[data-planner] { --nav-links-gap: 20px; } }
@media (max-width: 860px) { html[data-planner] { --nav-gap: 10px; --nav-gutter: 16px; --nav-logo-w: 120px; } }
/* «Жизненные выборы»: контейнер шапки — с полями внутри ширины 1180 (как .zv-wrap), знак 30px в высоту, анонс — 12px и на телефоне */
html[data-page="zhv"] { --nav-max: calc(var(--wrap) - 2 * var(--gutter)); --nav-logo-w: 145.11px; --nav-logo-w-phone: 125.76px; --announce-py: 10px; --announce-ink: var(--cream); --announce-fs-phone: 12px; }
@media (max-width: 860px) { html[data-page="zhv"] { --nav-h: 64px; --nav-logo-w: 125.76px; } }
/* сотрудничество: тёмно-синяя шапка, светлые логотип, пункты и бургер, синий анонс */
.collab { --nav-surface: color-mix(in srgb, var(--blue-dark) 94%, transparent); --nav-line: rgba(255, 255, 255, .12); --nav-ink: var(--cream); --nav-logo: var(--cream); --nav-accent: var(--yellow); --announce-bg: var(--blue); --announce-on: var(--blue, #5f709b); }
/* цифровые материалы: фиолетовый анонс */
.dg { --announce-bg: var(--purple); --announce-on: var(--purple); }

/* ── игры (перенесено из css/game-editorial.css) ── */

/* «В корзину» на первом экране и в финале — основная кнопка UI library (.ui-btn-primary, plate-slide) в цветах игры:
   на десктопе лицо сдвигается, на телефоне лежит на подложке (раздел «Анимация кнопок» ниже) */
html[data-editorial] :is(.pg-actions, .pg-finale-actions) .ui-btn-primary{--btn-plate:var(--pg-button-plate);--btn-face-bg:var(--pg-button);--btn-face-text:var(--pg-button-ink);--btn-face-press:color-mix(in srgb,var(--pg-button) 88%,#4c2b23)}
html[data-editorial] :is(.pg-actions, .pg-finale-actions) .ui-btn-primary>span{gap:13px}
.pg-mobile-buy{position:fixed;z-index:45;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;display:none;min-height:64px;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px 9px 17px;border-radius:14px;background:var(--pg-ink);color:var(--pg-paper);box-shadow:0 16px 45px #170d203b;transform:translateY(calc(100% + 22px));transition:transform .3s}
.pg-mobile-buy[data-shown="true"]{transform:none}
.pg-mobile-buy span{font-weight:700;font-size:17px}
.pg-mobile-buy a{display:grid;min-height:44px;place-items:center;padding:0 13px;border-radius:9px;background:var(--pg-button);color:var(--pg-ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.pg-mobile-buy button{display:grid;min-height:44px;place-items:center;padding:0 13px;border:0;border-radius:9px;background:var(--pg-button);color:var(--pg-ink);font-size:13px;font-weight:700;white-space:nowrap}
html[data-editorial] .lightbox{border:0;background:none;padding:0;max-width:min(95vw,800px)}
html[data-editorial] .lightbox::backdrop{background:#211a20d9;backdrop-filter:blur(8px)}
html[data-editorial] .lightbox-figure{margin:0;text-align:center}
html[data-editorial] .lightbox-figure img{max-height:83vh;width:auto;max-width:90vw;margin:auto;border-radius:8px}
html[data-editorial] .lightbox-figure figcaption{margin-top:8px;color:#fff;font-size:13px}
@media(max-width:620px){
html[data-editorial] .lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:calc(66px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));background:#211a20;border-radius:0;overflow:auto}
html[data-editorial] .lightbox-figure{display:flex;min-height:100%;flex-direction:column;justify-content:center;align-items:center;gap:12px}
html[data-editorial] .lightbox-figure img{max-height:calc(100dvh - 145px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:calc(100vw - 32px);object-fit:contain;border-radius:6px}
html[data-editorial] .lightbox-figure figcaption{margin:0;font-size:13px;line-height:1.4}
}
html[data-editorial] body.modal-open .pg-mobile-buy{visibility:hidden;pointer-events:none}

@media(max-width:820px){

.pg-mobile-buy{display:flex} /* подвалу запас под панель не закладываем: у конца страницы она уезжает за экран (#rule-sticky-hide-on-end) */
}

@media(max-width:360px){

html[data-editorial] .pg-actions .ui-btn-primary{--btn-pad-x:15px;--btn-font-size:13px}

html[data-editorial] .pg-finale-actions .ui-btn-primary{--btn-pad-x:12px;--btn-font-size:12px}
}

/* ── ежедневники (перенесено из css/planner.css) ── */
.tb-button{display:inline-flex;min-height:56px;padding:0;border:0;border-radius:12px;background:var(--tb-black);color:var(--tb-ink);transition:transform .2s}
.tb-button>span{display:flex;min-height:56px;align-items:center;gap:12px;padding:0 24px;border:1.5px solid var(--tb-black);border-radius:12px;background:var(--tb-lemon);font-size:15px;font-weight:700;transform:translate(-4px,-4px);transition:transform .2s var(--tb-ease)}
.tb-button:hover>span{transform:translate(-6px,-6px)}
.tb-button:active>span{transform:none}

a.tb-button{color:var(--tb-ink);text-decoration:none}
.tb-mobile-buy{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:70;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:16px;background:var(--tb-black);color:var(--tb-on-dark);box-shadow:0 18px 40px rgba(13,11,9,.35);transform:translateY(140%);transition:transform .35s var(--tb-ease)}
.tb-mobile-buy[data-shown="true"]{transform:none}
.tb-mobile-buy span{display:grid;min-width:0;line-height:1.15}
.tb-mobile-buy b{font-size:19px}
.tb-mobile-buy small{overflow:hidden;color:var(--tb-on-dark-muted);font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.tb-mobile-buy button,.tb-mobile-buy a{display:inline-flex;align-items:center;text-decoration:none;flex:none;min-height:46px;padding:0 20px;white-space:nowrap;border:0;border-radius:11px;background:var(--tb-lemon);color:var(--tb-black);font-weight:700}

@media (max-width:620px){
.tb-mobile-buy{display:flex} /* запаса в подвале нет — как у .pg-mobile-buy */
}
@media (max-width:380px){
.tb-mobile-buy button,.tb-mobile-buy a{padding:0 16px}
.tb-button>span{padding:0 18px}
}

/* ── сотрудничество: синие шапка, подвал и согласие в форме (перенесено из css/collab.css) ── */
.collab .uf{ position: relative; margin-top: calc(-1 * var(--leaf)); border-radius: var(--leaf) var(--leaf) 0 0;
  box-shadow: 0 -24px 48px -28px rgba(10, 27, 63, .28); }
.cl-form .uf-consent-label{ margin: var(--space-3) 0 0; max-width: none; color: var(--blue-dark); font-size: 13px; }
.cl-form .uf-consent-box{ border-color: var(--blue-dark); }
.cl-form .uf-consent:checked + .uf-consent-box{ background: var(--blue); border-color: var(--blue); }
.cl-form .uf-consent:focus-visible + .uf-consent-box{ outline-color: var(--blue); }
.cl-form .uf-consent-text a{ color: var(--blue); }

.collab footer.site-footer{ background: var(--blue-dark); color: rgba(245, 231, 211, .7); }
.collab .uf{ background: var(--blue-dark); }
.collab .footer-bottom{ border-top-color: rgba(255, 255, 255, .14); }

/* ── цифровые материалы: фиолетовые анонс и корзина (перенесено из css/digital.css) ── */

.dg .ui-cart-pill:hover,.dg .ui-cart-pill:focus-visible{ background: var(--purple); }

/* ── оформление цифровых материалов: фиолетовые кнопки магазина (перенесено из css/digital-checkout.css) ── */
@media (hover: none), (max-width: 600px){
.dgc .ab-btn-primary:active:not(:disabled) > span{ background: #5a336b; }
}
@media (prefers-reduced-motion: reduce){
.dgc .ab-btn-primary:active:not(:disabled){ transform: none; }
}
.dgc .ab-btn-secondary:hover{ border-color: var(--purple); color: var(--purple); }
.dgc .ab-btn-primary:focus-visible,.dgc .ab-btn-secondary:focus-visible{ outline-color: var(--purple); }

/* ── «Жизненные выборы» (html[data-page=zhv]): кнопки с плашкой, плавающая покупка (перенесено из css/zhv.css) ── */

:where(html[data-page="zhv"]) .btn-primary{--btn-plate:var(--rust);--btn-face-bg:var(--honey);--btn-face-text:var(--cocoa);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0;background:var(--btn-plate);border-radius:12px;border:none;cursor:pointer;
  font-family:var(--display);text-decoration:none;user-select:none}
:where(html[data-page="zhv"]) .btn-primary > span{display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:56px;padding:0 26px;background:var(--btn-face-bg);color:var(--btn-face-text);
  border-radius:12px;font-weight:700;font-size:15px;font-family:var(--display);
  translate:-4px -4px;transition:translate .18s var(--ease);white-space:nowrap}
:where(html[data-page="zhv"]) .btn-primary:hover > span{translate:-7px -7px}
:where(html[data-page="zhv"]) .btn-primary:active > span,:where(html[data-page="zhv"]) .btn-primary.is-pressed > span{translate:0 0}
:where(html[data-page="zhv"]) .btn-secondary{display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 26px;border-radius:12px;border:1.5px solid rgba(84,43,38,.35);
  color:var(--cocoa);background:transparent;font-weight:700;font-size:15px;font-family:var(--display);cursor:pointer;text-decoration:none;
  transition:border-color .2s,color .2s,background .12s var(--ease),transform .12s var(--ease)}
:where(html[data-page="zhv"]) .btn-secondary:hover{border-color:var(--rust);color:var(--rust)}
:where(html[data-page="zhv"]) .btn-secondary:active,:where(html[data-page="zhv"]) .btn-secondary.is-pressed{transform:scale(.96);background:var(--cream)}
:where(html[data-page="zhv"]) .mobile-buy{display:none;position:fixed;left:8px;right:8px;bottom:8px;z-index:40;min-height:58px;padding:8px 10px 8px 16px;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.24);border-radius:13px;background:color-mix(in srgb,var(--cocoa) 94%,transparent);color:var(--cream);box-shadow:0 14px 40px rgba(45,22,18,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateY(0);transition:transform .24s cubic-bezier(.2,.7,.3,1);will-change:transform}
:where(html[data-page="zhv"]) .mobile-buy.is-hidden{transform:translateY(calc(100% + 16px))}
:where(html[data-page="zhv"]) .mobile-buy strong{font-family:var(--display);font-size:18px;font-weight:700;color:var(--cream)}
:where(html[data-page="zhv"]) .sticky-btn{display:inline-flex;align-items:center;border:0;cursor:pointer;min-height:40px;padding:0 15px;border-radius:9px;background:var(--honey);color:var(--cocoa);font-size:13px;font-weight:700;text-decoration:none;font-family:var(--display);-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;transition:transform .12s cubic-bezier(.2,.7,.3,1),background-color .12s ease,box-shadow .12s ease;will-change:transform}
:where(html[data-page="zhv"]) .sticky-btn:active{transform:scale(.94);background:var(--honey-dark);box-shadow:inset 0 2px 6px rgba(76,43,35,.25)}
@media (prefers-reduced-motion:reduce){
:where(html[data-page="zhv"]) .mobile-buy{transition:none}
:where(html[data-page="zhv"]) .sticky-btn{transition:background-color .12s ease}
:where(html[data-page="zhv"]) .sticky-btn:active{transform:none}
}

/* ── «Жизненные выборы», первый экран: кнопка покупки (перенесено из css/zhv-hero-road.css) ── */
:where(html[data-page="zhv"]) .hero-road .btn-primary:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
:where(html[data-page="zhv"]) .hero-road .btn-primary:focus-visible > span{translate:-7px -7px}
@media (max-width:840px){
:where(html[data-page="zhv"]) .hero-road .btn-primary{min-height:52px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s cubic-bezier(.2,.7,.3,1)}
:where(html[data-page="zhv"]) .hero-road .btn-primary > span{min-height:52px;padding:0 22px;font-size:15px;translate:0 0}
:where(html[data-page="zhv"]) .hero-road .btn-primary:is(:hover,:focus-visible) > span{translate:0 0}
:where(html[data-page="zhv"]) .hero-road .btn-primary:active,:where(html[data-page="zhv"]) .hero-road .btn-primary.is-pressed{transform:scale(.94)}
:where(html[data-page="zhv"]) .hero-road .btn-primary:active > span,:where(html[data-page="zhv"]) .hero-road .btn-primary.is-pressed > span{translate:0 0;background:var(--honey-dark);box-shadow:inset 0 2px 6px rgba(76,43,35,.25)}
}
@media (prefers-reduced-motion:reduce){
:where(html[data-page="zhv"]) .hero-road .btn-primary{transition:none}
:where(html[data-page="zhv"]) .hero-road .btn-primary:active,:where(html[data-page="zhv"]) .hero-road .btn-primary.is-pressed{transform:none}
}

/* ══ подвал (ui-library → «Подвал») ══════════════════════════════════════════ */
/* Подвал — компонент «Подвал» из docs/ui-library.html (.ui-footer). Подключается на всех страницах.
   Токены с запасными значениями: страницы ежедневников и игр живут на своих наборах переменных. */
.uf { padding: 44px 0 28px; background: var(--cocoa, #4c2b23); color: rgba(245, 231, 211, .62); font-family: var(--body, 'Inter', system-ui, sans-serif); font-size: 13px; line-height: 1.5; }
.uf-in { width: min(1180px, 100% - 44px); margin-inline: auto; }
/* «Контакты» — по ширине содержимого у правого края: правый край колонки вровень с правым краем реквизитов «ИП Рубцов…» */
.uf-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 28px; margin-bottom: 28px; }
.uf h4 { margin: 0 0 12px; color: rgba(255, 245, 231, .9); font-family: var(--body, 'Inter', system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.uf-links { display: flex; flex-direction: column; gap: 8px; }
.uf-links a { color: rgba(245, 231, 211, .65); font-size: 13px; text-decoration: none; }
.uf-links a:hover { color: var(--honey, #eca04a); }
.uf-social { display: flex; gap: 16px; margin: 16px 0 0 -6px; }
.uf-social a { display: inline-flex; align-items: center; justify-content: center; padding: 6px; color: var(--cream, #f5e7d3); text-decoration: none; transition: color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.uf-social a:hover { color: var(--honey, #eca04a); }
.uf-social a:active { transform: scale(.92); }
.uf-icon { display: block; width: 28px; height: 28px; background-color: currentColor; -webkit-mask: var(--uf-mask) center / contain no-repeat; mask: var(--uf-mask) center / contain no-repeat; }
.uf-vk { --uf-mask: url('../assets/partner-logos/mono/vk.svg'); }
.uf-telegram { --uf-mask: url('../assets/partner-logos/mono/telegram.svg'); }
.uf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; font-size: 12px; }
.uf-logo { display: inline-block; height: 22px; aspect-ratio: 750.36 / 155.13; background-color: var(--cream, #f5e7d3); -webkit-mask: url('../assets/logo/wordmark.svg') left center / contain no-repeat; mask: url('../assets/logo/wordmark.svg') left center / contain no-repeat; }
.uf-copy { color: rgba(245, 231, 211, .6); font-size: 11px; letter-spacing: .02em; line-height: 1.55; text-align: right; }
.uf-name { display: block; color: rgba(245, 231, 211, .8); font-weight: 600; }

@media (max-width: 900px) { .uf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .uf { padding: 32px 0 24px; }
  .uf-in { width: calc(100% - 44px); }
  .uf-grid { grid-template-columns: 1fr; gap: 26px; margin-bottom: 26px; }
  .uf h4 { margin-bottom: 10px; }
  .uf-links { gap: 10px; }
  .uf-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; }
  .uf-social { gap: 22px; margin: 20px 0 0 -8px; }
  .uf-social a { padding: 8px; }
  .uf-icon { width: 40px; height: 40px; }
  .uf-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
  .uf-logo { height: 24px; }
  .uf-copy { text-align: left; line-height: 1.6; }
}

/* Подвал в цвете страницы — цвет берётся из палитры самой страницы, а не задаётся заново:
   ежедневники — цвет обложки линейки (--tb-black: Classic — чёрный, Japandi — коричневый, Business — тёмно-синий графит),
   цифровые материалы — фиолетовый акцент (--purple), игры — тон, которым на странице залиты крупные блоки.
   Сотрудничество — свой синий (css/collab.css). Наведение — акцентный цвет кнопок страницы. */
html[data-planner] .uf { background: var(--tb-black, var(--cocoa, #4c2b23)); }
html[data-planner] .uf-links a:hover, html[data-planner] .uf-social a:hover { color: var(--tb-lemon, var(--honey, #eca04a)); }
.dg .uf { background: var(--purple, #6c407f); }
html[data-editorial] .uf { background: var(--pg-ink, var(--cocoa, #4c2b23)); }
html[data-editorial="noya"] .uf { background: var(--pg-accent); }      /* «На одном языке» — розовый */
html[data-editorial="vsd"] .uf { background: var(--pg-accent); }       /* «Вечер с друзьями» — фиолетовый */
html[data-editorial="vnd"] .uf { background: var(--pg-deep); }         /* «Вечер на двоих» — сине-фиолетовый (лента, финал) */
html[data-editorial="zhv2"] .uf { background: var(--pg-ribbon-bg); }   /* «Жизненные выборы 2» — коричневый (лента, финал) */
html[data-editorial] .uf-links a:hover, html[data-editorial] .uf-social a:hover { color: var(--pg-button, var(--honey, #eca04a)); }
/* на среднетёмных заливках (розовый, фиолетовый) ссылки светлее — чтобы читались */
.dg .uf-links a, html[data-editorial="noya"] .uf-links a, html[data-editorial="vsd"] .uf-links a { color: rgba(255, 248, 238, .86); }
.dg .uf, html[data-editorial="noya"] .uf, html[data-editorial="vsd"] .uf { color: rgba(255, 248, 238, .8); }
.dg .uf-copy, html[data-editorial="noya"] .uf-copy, html[data-editorial="vsd"] .uf-copy { color: rgba(255, 248, 238, .78); }
.dg .uf-links a:hover, .dg .uf-social a:hover { color: var(--honey, #eca04a); }

/* ══ полоса анонса (ui-library → «Анонс») ════════════════════════════════════ */
/* Крестик полосы анонса — по docs/ui-library.html#announce (.btn-ring--cream--sm); сама полоса — в разделе «шапка». */

.ab-announce-close { position: absolute; top: calc(50% - 14px); right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cream, #f5e7d3); cursor: pointer; transition: background-color .2s, color .2s, transform .2s; -webkit-tap-highlight-color: transparent; }
.ab-announce-close span { display: block; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: url('../assets/doodle-icons/SVG/interface/cross.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/interface/cross.svg') center / contain no-repeat; }
.ab-announce-close:hover, .ab-announce-close:focus-visible { background: var(--cream, #f5e7d3); color: var(--ab-on); transform: rotate(90deg); }
.ab-announce-close:focus-visible { outline: 2px solid var(--cream, #f5e7d3); outline-offset: 2px; }
@media (hover: none), (max-width: 640px) {
  /* видимая кнопка 28px — в пределах полосы; зона нажатия 40px — псевдоэлементом */
  .ab-announce-close { top: calc(50% - 14px); width: 28px; height: 28px; right: 8px; }
  .ab-announce-close::after { content: ''; position: absolute; inset: -6px; }
  .ab-announce-close span { width: 12px; height: 12px; }
  .ab-announce-close:hover { background: transparent; color: var(--cream, #f5e7d3); transform: none; }
  .ab-announce-close:active { background: var(--cream, #f5e7d3); color: var(--ab-on); transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .ab-announce-close { transition: background-color .2s, color .2s; } .ab-announce-close:hover { transform: none; } }

/* ══ шапка: корзина, кабинет, меню; движение кнопок (ui-library → «Навигация», «Кнопки») ════ */
/* Шапка: корзина, кабинет и пункты меню — одни на всех страницах (ui-library → «Навигация»).
   Десктоп: пункты Каталог · Сотрудничество · Доставка и оплата · О нас по центру, справа .nav-actions — иконка кабинета + корзина.
   Когда пункты свёрнуты в бургер: в шапке остаются логотип, корзина и бургер, кабинет переезжает в список —
   кнопкой во всю ширину над пунктами (ui-library → «Мобильная шапка», вариант 6.3); на телефоне корзина — круг 44px с бейджем.
   Количество в корзине считает js/nav-cart.js. Подключается на всех страницах после их собственных стилей. */

/* ── Цвета кнопок — по странице, как у десктопной шапки ─────────────────────────────────────────────
   Одни переменные на корзину, иконку кабинета и кнопку кабинета в списке. Без страницы — cocoa, иконка honey, наведение rust. */
html[data-planner] :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--tb-lemon); --cart-hover: var(--tb-lemon-2); --cart-ink: var(--tb-ink); --cart-icon: var(--tb-ink); --cart-icon-hover: var(--tb-ink); --cart-badge-bg: var(--tb-ink); --cart-badge-ink: var(--tb-lemon); }
html[data-editorial] :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--pg-button); --cart-hover: color-mix(in srgb, var(--pg-button) 86%, var(--pg-button-ink)); --cart-ink: var(--pg-button-ink); --cart-icon: var(--pg-button-ink); --cart-icon-hover: var(--pg-button-ink); --cart-badge-bg: var(--pg-button-ink); --cart-badge-ink: var(--pg-button); }
/* игры, где кнопки шапки в цвете палитры: «На одном языке» — розовый, «Вечер с друзьями» — фиолетовый, «Вечер на двоих» — сине-фиолетовый */
html[data-editorial="noya"] :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--pg-accent); --cart-hover: var(--pg-deep); }
html[data-editorial="vsd"] :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--pg-accent); --cart-hover: color-mix(in srgb, var(--pg-accent) 75%, #000); }
html[data-editorial="vnd"] :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--pg-button-plate); --cart-hover: var(--pg-deep); }
html:is([data-editorial="noya"], [data-editorial="vsd"], [data-editorial="vnd"]) :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-ink: var(--pg-paper); --cart-icon: var(--pg-paper); --cart-icon-hover: var(--pg-paper); --cart-badge-bg: var(--pg-button); --cart-badge-ink: var(--pg-ink); }
/* цифровые материалы — фиолетовый */
.dg :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--purple, #6c407f); --cart-hover: var(--purple-dark, #430f57); --cart-ink: var(--cream, #f5e7d3); --cart-icon: var(--cream, #f5e7d3); --cart-icon-hover: var(--paper, #fffcf5); --cart-badge-bg: var(--honey, #eca04a); --cart-badge-ink: var(--cocoa, #4c2b23); }
/* сотрудничество — синий раздела */
.collab :is(.ui-cart-pill, .ui-account-pill, .nav-account-row) { --cart-bg: var(--blue, #5f709b); --cart-hover: var(--blue-dark, #3f4d78); }

/* ── Корзина — «Pill (иконка + счётчик + цена)» из docs/ui-library.html#cart ── */
.ui-cart-pill { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--cart-bg, var(--cocoa, #4c2b23)); color: var(--cart-ink, var(--cream, #f5e7d3)); border: none; font-family: var(--display, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, transform .12s cubic-bezier(.2, .8, .2, 1); }
.ui-cart-pill:hover, .ui-cart-pill:focus-visible { background: var(--cart-hover, var(--rust, #ae5036)); }
.ui-cart-pill:active, .ui-cart-pill.is-pressed { transform: scale(.97); }
.ui-cart-pill-icon { display: block; width: 16px; height: 16px; background-color: var(--cart-icon, var(--honey, #eca04a)); -webkit-mask: url('../assets/doodle-icons/SVG/e-commerce/shopping-cart.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/e-commerce/shopping-cart.svg') center / contain no-repeat; transition: background-color .15s; }
.ui-cart-pill:hover .ui-cart-pill-icon, .ui-cart-pill:focus-visible .ui-cart-pill-icon { background-color: var(--cart-icon-hover, var(--paper, #fffdf8)); }
.ui-cart-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cart-badge-bg, var(--honey, #eca04a)); color: var(--cart-badge-ink, var(--cocoa, #4c2b23)); font-size: 12px; font-weight: 800; line-height: 1; }
.ui-cart-pill-count[hidden] { display: none; }
.ui-cart-pill-price { opacity: .9; letter-spacing: .01em; }
/* там сброс html[data-editorial|data-planner] a/button { font: inherit } сильнее .ui-cart-pill — возвращаем шрифт пилюли */
html[data-editorial] .ui-cart-pill, html[data-planner] .ui-cart-pill { font-family: var(--display, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 700; }

/* ── Иконка кабинета (ui-library → «Иконка кабинета») — в стиле корзины, по высоте тянется за ней ── */
.nav-actions { display: flex; align-items: center; gap: 8px; }
.ui-account-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-height: 37px; padding: 0 12px; border-radius: 999px; background: var(--cart-bg, var(--cocoa, #4c2b23)); border: none; text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .12s cubic-bezier(.2, .8, .2, 1); }
.ui-account-pill-icon, .nav-account-row-icon { display: block; flex: none; width: 16px; height: 16px; background-color: var(--cart-icon, var(--honey, #eca04a)); -webkit-mask: url('../assets/doodle-icons/SVG/interface/user.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/interface/user.svg') center / contain no-repeat; transition: background-color .15s; }
.ui-account-pill:hover, .ui-account-pill:focus-visible { background: var(--cart-hover, var(--rust, #ae5036)); }
.ui-account-pill:hover .ui-account-pill-icon, .ui-account-pill:focus-visible .ui-account-pill-icon { background-color: var(--cart-icon-hover, var(--paper, #fffdf8)); }
.ui-account-pill:focus-visible { outline: 2px solid var(--rust, #ae5036); outline-offset: 2px; }
.ui-account-pill:active, .ui-account-pill.is-pressed { transform: scale(.97); }
.ui-account-pill[aria-current="page"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust, #ae5036) 22%, transparent); }
/* точка «вы вошли» ставится скриптом кабинета (data-logged-in) */
.ui-account-pill[data-logged-in]::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--good, #5f8f4f); border: 2px solid var(--paper, #fffcf5); }

/* ══ шапка (ui-library → «Навигация», «Мобильная шапка», «Анонс») ═══════════════════════════════════════
   Одна разметка на всех страницах — tools/templates/layout.mjs → header(): div.announcement, nav.nav > .wrap.nav-inner >
   a.logo, .nav-links (кабинет кнопкой + пункты), .nav-actions (иконка кабинета, корзина), button.nav-toggle.
   Вид раздела — только переменными (раздел «шапка разделов» ниже): --nav-*, --announce-*. Бургер — с 860px: пункты уходят
   в выпадающий список, кабинет — кнопкой во всю ширину над пунктами, иконка кабинета из шапки исчезает (вариант 6.3);
   на телефоне (620px) корзина — круг 44px. Меню открывает js/nav-menu.js ([data-open] у .nav, --nav-menu-h). */

/* полоса анонса: пустая и скрытая, пока js/announce.js не получит текст из админки; закреплена над шапкой,
   шапка — сразу под ней (высоту кладёт js/announce.js в --ab-announce-h); справа крестик .ab-announce-close */
.announcement { position: sticky; top: 0; z-index: 70; display: var(--announce-display, block); place-items: center; min-height: var(--announce-min-h, 0); padding: var(--announce-py, 9px) 44px; background: var(--announce-bg, var(--rust)); color: var(--announce-ink, var(--paper)); text-align: center; font-size: var(--announce-fs, 12px); font-weight: 600; letter-spacing: var(--announce-ls, .07em); --ab-on: var(--announce-on, var(--rust, #ae5036)); }
.announcement[hidden] { display: none !important; }
.announcement a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.announcement a:hover { text-decoration-thickness: 2px; }
.announcement a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 620px) { .announcement { font-size: var(--announce-fs-phone, 10px); } }

.nav { position: sticky; top: var(--ab-announce-h, 0px); z-index: var(--nav-z, 30); border-bottom: 1px solid var(--nav-line, var(--line)); background: var(--nav-surface, color-mix(in srgb, var(--cream) 84%, transparent)); color: var(--nav-ink, var(--cocoa)); backdrop-filter: blur(var(--nav-blur, 14px)); -webkit-backdrop-filter: blur(var(--nav-blur, 14px)); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap, 24px); width: min(calc(100% - 2 * var(--nav-gutter, var(--gutter))), var(--nav-max, var(--wrap))); height: var(--nav-h, 76px); }
.nav-inner > .nav-actions { flex: none; }
/* логотип — маска .logo (выше); размер — по ширине, высота — по пропорции знака 750.36 × 155.13 */
.nav .logo { width: var(--nav-logo-w, 143px); height: calc(var(--nav-logo-w, 143px) * 155.13 / 750.36); background: var(--nav-logo, var(--cocoa)); }
.nav-links { display: flex; align-items: center; gap: var(--nav-links-gap, 30px); }
.nav .nav-links a { color: inherit; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; opacity: var(--nav-link-opacity, .88); }
.nav .nav-links a:hover, .nav .nav-links a[aria-current="page"] { color: var(--nav-accent, var(--rust)); opacity: 1; }
@media (max-width: 620px) {
  .nav-inner { height: var(--nav-h-phone, var(--nav-h, 64px)); }
  .nav .logo { width: var(--nav-logo-w-phone, 124px); height: calc(var(--nav-logo-w-phone, 124px) * 155.13 / 750.36); }
}

/* кнопка меню — doodle menu.svg, в открытом состоянии — cross.svg (поворот 90° + проявление), рисуется псевдоэлементами;
   span в разметке — только для старых страниц, скрыт. Цвет — у шапки (--nav-ink) или свой (--nav-toggle-ink) */
.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--nav-toggle-ink, inherit); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle > span { display: none; }
.nav-toggle::before, .nav-toggle::after { content: ""; grid-area: 1 / 1; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url('../assets/doodle-icons/SVG/interface/menu.svg') center / contain no-repeat; mask: url('../assets/doodle-icons/SVG/interface/menu.svg') center / contain no-repeat; transition: opacity .2s ease, transform .3s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.nav-toggle::after { width: 16px; height: 16px; -webkit-mask-image: url('../assets/doodle-icons/SVG/interface/cross.svg'); mask-image: url('../assets/doodle-icons/SVG/interface/cross.svg'); opacity: 0; transform: rotate(-90deg) scale(.6); }
.nav[data-open="true"] .nav-toggle::before { opacity: 0; transform: rotate(90deg) scale(.6); }
.nav[data-open="true"] .nav-toggle::after { opacity: 1; transform: none; }

/* кабинет в списке меню: кнопка во всю ширину над пунктами; на десктопе скрыта */
.nav .nav-links a.nav-account-row { display: none; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: var(--nav-account-m, 6px var(--gutter, 18px) 10px); padding: 0 18px; border: 0; border-radius: 999px; background: var(--cart-bg, var(--cocoa, #4c2b23)); color: var(--cart-ink, var(--cream, #f5e7d3)); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .15s ease; }
.nav .nav-links a.nav-account-row:hover, .nav .nav-links a.nav-account-row:focus-visible { background: var(--cart-hover, var(--rust, #ae5036)); color: var(--cart-ink, var(--cream, #f5e7d3)); }
.nav .nav-links a.nav-account-row:hover .nav-account-row-icon { background-color: var(--cart-icon-hover, var(--paper, #fffdf8)); }

/* Бургер. Шапка и раскрытое меню — одна подложка: размытие и фон шапки лежат на её ::before, при открытом меню ::before
   вытягивается вниз на высоту меню (--nav-menu-h); у самого меню своего фона нет — на стыке нет полосы.
   ::before, а не сама шапка: элемент с backdrop-filter стал бы «корнем фона» для меню внутри неё.
   Список: появление .38s — clip-path сверху вниз + opacity, пункты каскадом через .04s; исчезание .24s без каскада. */
@media (max-width: 860px) {
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: -1; height: 100%; pointer-events: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: height .24s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
  .nav[data-open="true"] { background: transparent; border-bottom-color: transparent; }
  .nav[data-open="true"]::before { height: calc(100% + var(--nav-menu-h, 0px)); background: var(--nav-surface, color-mix(in srgb, var(--cream) 84%, transparent)); transition-duration: .38s; }
  .nav-inner > .nav-actions { margin-left: auto; }
  .nav-inner > .nav-actions + .nav-toggle { margin-left: var(--nav-toggle-m, 8px); }
  .nav-toggle { display: inline-grid; }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: var(--nav-menu-pad, 8px 0 12px); border-bottom: 1px solid var(--nav-line, var(--line)); background: transparent; box-shadow: var(--nav-menu-shadow, 0 24px 40px -24px rgba(84, 43, 38, .4));
    visibility: hidden; opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); transition: opacity .2s ease, transform .24s var(--ease, cubic-bezier(.2, .8, .2, 1)), clip-path .24s var(--ease, cubic-bezier(.2, .8, .2, 1)), visibility 0s linear .24s; }
  .nav[data-open="true"] .nav-links { visibility: visible; opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); transition: opacity .25s ease, transform .38s var(--ease, cubic-bezier(.2, .8, .2, 1)), clip-path .38s var(--ease, cubic-bezier(.2, .8, .2, 1)), visibility 0s; }
  .nav .nav-links > a { display: flex; align-items: center; min-height: var(--nav-menu-link-h, 0); padding: var(--nav-menu-link-pad, 14px var(--gutter)); font-size: 16px; transform: translateY(-8px); transition: opacity .15s ease, transform .2s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
  .nav:not([data-open="true"]) .nav-links > a { opacity: 0; }
  .nav[data-open="true"] .nav-links > a { opacity: 1; transform: none; transition: opacity .3s ease, transform .38s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
  .nav .nav-links a.nav-account-row { display: flex; }
  .nav-actions .ui-account-pill { display: none; }
}
.nav[data-open="true"] .nav-links > a:nth-child(1) { transition-delay: .04s; }
.nav[data-open="true"] .nav-links > a:nth-child(2) { transition-delay: .08s; }
.nav[data-open="true"] .nav-links > a:nth-child(3) { transition-delay: .12s; }
.nav[data-open="true"] .nav-links > a:nth-child(4) { transition-delay: .16s; }
.nav[data-open="true"] .nav-links > a:nth-child(5) { transition-delay: .2s; }
.nav[data-open="true"] .nav-links > a:nth-child(n+6) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links > a, .nav-toggle::before, .nav-toggle::after { transform: none !important; clip-path: none !important; transition-property: opacity, visibility !important; transition-delay: 0s !important; }
}

/* ── Телефон: корзина — круг 44px, бейдж-счётчик в углу ── */
@media (max-width: 620px) {
  .nav-actions .ui-cart-pill, .nav-inner > .ui-cart-pill { justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
  .nav-actions .ui-cart-pill-price, .nav-inner > .ui-cart-pill .ui-cart-pill-price { display: none; }
  /* иконка ровно по центру, но «вес» корзины (кузов, колёса) справа, а слева тонкая ручка — оптически сдвигаем на 1px влево */
  .nav-actions .ui-cart-pill-icon { width: 18px; height: 18px; translate: -1px 0; }
  .nav-actions .ui-cart-pill-count { position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; box-shadow: 0 0 0 2px var(--paper, #fffcf5); }
  .nav-inner > .ui-cart-pill { margin-left: auto; }
  .nav-inner > .ui-cart-pill + .nav-toggle { margin-left: 8px; }
}
@media (max-width: 360px) { .nav-actions { gap: 4px; } .nav-actions + .nav-toggle { margin-left: 4px; } }
@media (prefers-reduced-motion: reduce) { .ui-cart-pill, .ui-account-pill, .nav-account-row { transition: background-color .15s; } .ui-cart-pill:active, .ui-account-pill:active, .ui-account-pill.is-pressed { transform: none; } }

/* ── Анимация кнопок — одна на весь сайт, по ui-library → «Кнопки» (цвета у страниц свои, здесь только движение) ──
   У страниц были свои копии кнопок, и движение разъехалось: смещение 6/7px, .2s вместо .18s, сжатие на десктопе, подложка на телефоне,
   липкие «Купить» без отклика. Подключается последним на всех страницах (checkout/order — css/shop-pages.css).
   Основная (plate-slide): лицо сдвинуто на −4px; десктоп — hover −7px, нажатие закрывает подложку (0), translate .18s;
   телефон (.btn-primary--mobile) — лицо лежит на подложке, hover нет, тап — scale .94 + лицо темнее, transform .12s.
   Второстепенная: цвета .2s, нажатие — scale .96, transform .12s. Кнопка липкой плашки (.btn-mobile): тап — scale .94 + темнее.
   .is-pressed = :active: держит нажатое состояние, пока доигрывает анимация перед переходом или открытием корзины (js/press-nav.js). */
html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button) { transform: none; transition: transform .12s cubic-bezier(.2, .7, .3, 1); }
html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button) > span { transform: none; translate: -4px -4px; transition: translate .18s cubic-bezier(.2, .8, .2, 1), background-color .12s ease; }
html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button):hover > span { translate: -7px -7px; }
html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button):is(:active, .is-pressed) > span { translate: 0 0; }
html body :is(.ui-btn-secondary, .btn-secondary:not(.btn)) { transition: border-color .2s, color .2s, transform .12s cubic-bezier(.2, .8, .2, 1), background-color .12s cubic-bezier(.2, .8, .2, 1); }
html body :is(.ui-btn-secondary, .btn-secondary:not(.btn)):is(:active, .is-pressed) { transform: scale(.96); }
html body :is(.pg-mobile-buy, .tb-mobile-buy) :is(button, a), html body .sticky-btn { touch-action: manipulation; transition: transform .12s cubic-bezier(.2, .7, .3, 1), filter .12s ease; }
html body :is(.pg-mobile-buy, .tb-mobile-buy) :is(button, a):is(:active, .is-pressed), html body .sticky-btn:is(:active, .is-pressed) { transform: scale(.94); filter: brightness(.9); box-shadow: inset 0 2px 6px rgba(76, 43, 35, .25); }
@media (hover: none), (max-width: 620px) {
  html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button) { touch-action: manipulation; }
  html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button) > span,
  html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button):hover > span { translate: 0 0; }
  html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button):is(:active, .is-pressed) { transform: scale(.94); }
  html body :is(.ui-btn-primary, .btn-primary:not(.btn)):is(:active, .is-pressed) > span { background: var(--btn-face-press, var(--honey-dark, #e5924a)); box-shadow: inset 0 2px 6px rgba(76, 43, 35, .25); }
  html body .tb-button:is(:active, .is-pressed) > span { background: color-mix(in srgb, var(--tb-lemon) 86%, #14110f); box-shadow: inset 0 2px 6px rgba(20, 17, 15, .22); }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button, .ui-btn-secondary, .btn-secondary:not(.btn), .sticky-btn),
  html body :is(.pg-mobile-buy, .tb-mobile-buy) :is(button, a) { transition: none; transform: none !important; }
  html body :is(.ui-btn-primary, .btn-primary:not(.btn), .tb-button) > span { transition: none; }
}
/* Кнопки магазина в корзине на страницах сайта («Оформить заказ», «Проверить» — dist/ab-shop.css): то же движение.
   На checkout/order то же самое — в css/shop-pages.css. Граница 600px — как у мобильных правил ab-shop. */
html body .ab-btn-primary.is-pressed:not(:disabled) > span { translate: 0 0; }
html body .ab-btn-secondary { transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .12s cubic-bezier(.2, .8, .2, 1); }
html body .ab-btn-secondary:is(:active, .is-pressed):not(:disabled) { transform: scale(.96); }
@media (hover: none), (max-width: 600px) {
  html body .ab-btn-primary { touch-action: manipulation; transition: transform .12s cubic-bezier(.2, .7, .3, 1); }
  html body .ab-btn-primary:is(:active, .is-pressed):not(:disabled) { transform: scale(.94); }
  html body .ab-btn-primary:is(:active, .is-pressed):not(:disabled) > span { background: var(--honey-dark, #e5924a); box-shadow: inset 0 2px 6px rgba(76, 43, 35, .25); }
}
@media (prefers-reduced-motion: reduce) { html body :is(.ab-btn-primary, .ab-btn-secondary) { transition: none; transform: none !important; } }

/* ══ курсор бренда (ui-library → «Курсор») ═══════════════════════════════════ */
/* Курсор Capitaine из ui-library (docs/ui-library.html) — единый на всех страницах.
   !important: компоненты пишут свой cursor:pointer/grab с разной специфичностью, курсор бренда должен перебивать их все. */
:root{
  --cur-default:url('../assets/cursors/capitaine-dark/default.svg') 8 4,default;
  --cur-pointer:url('../assets/cursors/capitaine-dark/pointer.svg') 19 4,pointer;
  --cur-text:url('../assets/cursors/capitaine-dark/text.svg') 22 22,text;
  --cur-grab:url('../assets/cursors/capitaine-dark/grab.svg') 22 22,grab;
  --cur-grabbing:url('../assets/cursors/capitaine-dark/grabbing.svg') 22 22,grabbing;
}
html,body{cursor:var(--cur-default)}
a[href],button,label,summary,select,[role="button"],[onclick],input[type=checkbox],input[type=radio],input[type=submit],input[type=button],input[type=range],input[type=color]{cursor:var(--cur-pointer) !important}
button:disabled,[aria-disabled="true"]{cursor:not-allowed !important}
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],input[type=url],input:not([type]),textarea,[contenteditable]{cursor:var(--cur-text) !important}
[data-grab],.testi-scroll,.tb-testi-scroll,.ui-testi-scroll,.box-rig,.pg-stage,.pg-fan,[data-drag-scroll]{cursor:var(--cur-grab) !important}
[data-grab]:active,.is-dragging,.testi-scroll:active,.tb-testi-scroll:active,.ui-testi-scroll:active,.box-rig:active,.pg-stage:active,.pg-stage[data-dragging="true"],.pg-fan:active,[data-drag-scroll]:active{cursor:var(--cur-grabbing) !important}

/* Касание (телефоны и планшеты): тап по тексту не выделяет слово — иначе Chrome на Android открывает «Поиск по касанию» Google.
   Поля ввода остаются выделяемыми. На компьютере (есть мышь) текст выделяется как обычно. */
@media (hover:none) and (pointer:coarse){
  html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
}