:root {
  /* Палитра снята с cart-power.ru: тёмно-синий текст, синие ссылки,
     малиновый акцент действий, светло-серые плоскости и НУЛЕВЫЕ скругления —
     на сайте всё строго прямоугольное. */
  --bg: #ffffff;
  --bg-alt: #f3f4f5;      /* серый карточек с сайта */
  --bg-sidebar: #fafafa;  /* фон страницы с сайта */
  --border: #e3e6ea;
  --text: #1f3554;        /* фирменный тёмно-синий */
  --text-muted: #6b7c94;
  --accent: #fd244e;      /* малиновый: кнопки и акценты */
  --accent-soft: #fff0f3;
  --link: #3c94fd;        /* фирменный синий */
  --code-bg: #f3f4f5;
  /* callout / changelog palette */
  --info: #3c94fd;   --info-bg: #eef5ff;   --info-bd: #c7e0ff;
  --warn: #b5730a;   --warn-bg: #fff7e6;   --warn-bd: #f0d59a;
  --danger: #fd244e; --danger-bg: #fff0f3; --danger-bd: #ffc9d5;
  --ok: #1a7f4b;     --ok-bg: #eafaf1;     --ok-bd: #bfe8cf;
  --code-block-bg: #1f3554; --code-block-fg: #e6ebff;
  --shadow: 0 1px 2px rgba(31, 53, 84, .06), 0 6px 20px rgba(31, 53, 84, .06);
  --sidebar-w: 320px;
  --toc-w: 240px;
  --header-h: 68px;
  --radius: 0;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Dark palette. It applies when the OS asks for dark and the reader has not
   pinned light, and whenever the reader has pinned dark. The two rule blocks
   below carry identical declarations — keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131b28; --bg-alt: #1b2534; --bg-sidebar: #161f2c;
    --border: #2a3648; --text: #e8edf4; --text-muted: #93a3ba;
    --accent: #ff4d6f; --accent-soft: #2b1621; --link: #6fb0ff; --code-bg: #1b2534;
    --shadow: 0 1px 3px rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.35);
    --info: #6fb0ff;   --info-bg: #14212f;   --info-bd: #27486b;
    --warn: #e6ad4d;   --warn-bg: #2a2113;   --warn-bd: #5c4620;
    --danger: #ff6b88; --danger-bg: #2b1621; --danger-bd: #5f2738;
    --ok: #63dd8f;     --ok-bg: #12271b;     --ok-bd: #245c39;
  }
}
:root[data-theme="dark"] {
  --bg: #131b28; --bg-alt: #1b2534; --bg-sidebar: #161f2c;
    --border: #2a3648; --text: #e8edf4; --text-muted: #93a3ba;
    --accent: #ff4d6f; --accent-soft: #2b1621; --link: #6fb0ff; --code-bg: #1b2534;
    --shadow: 0 1px 3px rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.35);
    --info: #6fb0ff;   --info-bg: #14212f;   --info-bd: #27486b;
    --warn: #e6ad4d;   --warn-bg: #2a2113;   --warn-bd: #5c4620;
    --danger: #ff6b88; --danger-bg: #2b1621; --danger-bd: #5f2738;
    --ok: #63dd8f;     --ok-bg: #12271b;     --ok-bd: #245c39;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 17px; white-space: nowrap; color: var(--text); }
.brand-sep { width: 1px; height: 26px; background: var(--border); flex: none; }
.brand:hover { text-decoration: none; }
.brand .logo { height: 40px; }
/* У логотипа надпись тёмно-синяя, на тёмной теме она сливается с фоном —
   поэтому вариантов два, и переключаются они теми же селекторами, что палитра
   (держать синхронно с блоками --bg выше). Размеры задаются отдельно и НЕ
   трогают display, иначе более специфичное правило перебьёт переключение. */
.logo-light, .logo-dark { width: auto; flex: none; background: none; }
.logo-light { display: block; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.brand small { color: var(--text-muted); font-weight: 500; font-size: 12px; }
.topbar .spacer { flex: 1; }

.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lang-switch button {
  border: 0; background: transparent; color: var(--text-muted);
  padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.lang-switch button.active { background: var(--accent); color: #fff; }

.menu-toggle { display: none; flex: none; border: 1px solid var(--border); background: var(--bg-alt);
  color: var(--text); border-radius: var(--radius); width: 38px; height: 38px; cursor: pointer; font-size: 18px; }

.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.theme-toggle svg { display: block; }

/* ---------- Layout ---------- */
.layout { display: flex; align-items: flex-start; }
.sidebar {
  width: var(--sidebar-w); flex: none;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  padding: 18px 14px 40px;
}
.search { margin-bottom: 14px; }
.search-field { position: relative; display: flex; align-items: center; }
.search input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 14px;
}
.search input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.search .icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; color: var(--text-muted); pointer-events: none;
}
.search .count { margin-top: 6px; font-size: 12px; color: var(--text-muted); padding-left: 4px; }

.cat-group { margin-bottom: 6px; }
.cat-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700; padding: 12px 8px 6px;
}
.mod-link {
  display: block; padding: 8px 10px; border-radius: var(--radius);
  color: var(--text); font-size: 14px; cursor: pointer; line-height: 1.35;
}
.mod-link:hover { background: var(--bg-alt); text-decoration: none; }
.mod-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mod-link .code { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.mod-link.active .code { color: var(--accent); opacity: .8; }
mark { background: #ffe58a; color: inherit; border-radius: var(--radius); padding: 0 1px; }

/* ---------- Content ---------- */
.content { flex: 1; min-width: 0; display: flex; justify-content: center; }
.article-wrap { flex: 1; min-width: 0; max-width: 860px; padding: 34px 46px 120px; }
.article-wrap.home { max-width: 1180px; } /* the tile grid wants more room than prose */

.doc-header { margin-bottom: 8px; }
.doc-header .kicker { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.doc-header h1 { font-size: 34px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 4px; line-height: 1.18; }
.doc-header .meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--text-muted); font-size: 13px; margin-top: 10px; }
.doc-header .meta .code { font-family: var(--mono); }

.ver-select { display: inline-flex; align-items: center; gap: 8px; }
.ver-select label { font-size: 13px; color: var(--text-muted); }
.ver-select select {
  font: inherit; font-size: 13px; padding: 5px 30px 5px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2366707c' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.badge-latest { font-size: 11px; font-weight: 700; color: #0a7d34; background: #e4f7ea; padding: 2px 8px; border-radius: var(--radius); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-latest { color: #61e08a; background: #14301d; }
}
:root[data-theme="dark"] .badge-latest { color: #61e08a; background: #14301d; }

hr.sep { border: 0; border-top: 1px solid var(--border); margin: 22px 0 28px; }

/* rendered docx body */
.article { font-size: 15.5px; overflow-wrap: break-word; word-break: break-word; }
/* `anywhere` рвал слова посреди («документаци / я»): он же разрешает элементу
   сжиматься до одной буквы. `break-word` переносит только то, что само по себе
   не помещается в строку, — длинные URL по-прежнему не ломают вёрстку. */
.article a { overflow-wrap: break-word; }

/* headings — a hairline rule opens every top-level section */
.article h2 {
  font-size: 25px; line-height: 1.25;
  margin: 46px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.article > h2:first-child { border-top: 0; margin-top: 4px; padding-top: 0; }
.article h3 { font-size: 20px; margin: 32px 0 10px; }
.article h4 { font-size: 16.5px; margin: 24px 0 8px; }
.article h2, .article h3, .article h4 { scroll-margin-top: calc(var(--header-h) + 16px); position: relative; }
.article p { margin: 12px 0; }
.article ul, .article ol { padding-left: 26px; margin: 12px 0; }
.article li { margin: 6px 0; }
.article ul li::marker { color: var(--accent); }
.article ol li::marker { color: var(--text-muted); font-weight: 700; }
.article li ul, .article li ol { margin: 6px 0; }
.article hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* screenshots — framed, with optional caption */
.article img {
  max-width: 100%; height: auto; display: block;
  margin: 18px auto; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: zoom-in;
}
.article figure {
  margin: 22px 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt); overflow: hidden; box-shadow: var(--shadow);
}
.article figure img { margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.article figcaption {
  padding: 9px 14px; font-size: 13px; color: var(--text-muted);
  background: var(--bg); border-top: 1px solid var(--border);
}

.article a[href^="http"]::after { content: " ↗"; font-size: .8em; color: var(--text-muted); }

/* callouts — notes, warnings, tips */
.article .callout {
  position: relative; margin: 20px 0; padding: 14px 16px 14px 48px;
  border: 1px solid var(--cal-bd); background: var(--cal-bg); border-radius: var(--radius);
}
.article .callout::before {
  content: var(--cal-icon); position: absolute; left: 15px; top: 13px;
  font-size: 16px; line-height: 1.3;
}
.article .callout > :first-child { margin-top: 0; }
.article .callout > :last-child { margin-bottom: 0; }
.article .callout.note   { --cal-bg: var(--info-bg);   --cal-bd: var(--info-bd);   --cal-icon: "ℹ️"; }
.article .callout.warn   { --cal-bg: var(--warn-bg);   --cal-bd: var(--warn-bd);   --cal-icon: "⚠️"; }
.article .callout.danger { --cal-bg: var(--danger-bg); --cal-bd: var(--danger-bd); --cal-icon: "⛔"; }
.article .callout.ok     { --cal-bg: var(--ok-bg);     --cal-bd: var(--ok-bd);     --cal-icon: "💡"; }

/* code */
.article code {
  font-family: var(--mono); font-size: .88em; background: var(--code-bg);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius);
}
.article pre {
  background: var(--code-block-bg); color: var(--code-block-fg);
  border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
}
.article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.article kbd, .article .kbd {
  display: inline-block; font-family: var(--sans); font-size: .88em; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: var(--radius); padding: 1px 7px;
}

/* tables — .table-wrap is emitted by the build; bare tables stay scrollable too */
.article .table-wrap {
  margin: 20px 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto;
}
.article .table-wrap table { display: table; width: 100%; margin: 0; }
.article table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 14px; display: block; overflow-x: auto; }
.article th, .article td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.article th { background: var(--bg-alt); font-weight: 700; }
.article tbody tr:nth-child(2n) td { background: color-mix(in srgb, var(--bg-alt) 55%, transparent); }
.article .table-wrap tr > :first-child { border-left: 0; }
.article .table-wrap tr > :last-child { border-right: 0; }
.article .table-wrap tr:first-child > * { border-top: 0; }
.article .table-wrap tr:last-child > * { border-bottom: 0; }
.article table p { margin: 6px 0; }

/* release history — "Version 1.25 from 23 May 2024" + [+]/[!]/[*] entries */
.article .rel-head {
  /* Обычный поток, а не flex: во flex каждый текстовый узел становится
     отдельным элементом, и на узком экране скобки вокруг ссылки разъезжались
     по разным строкам («… 2017 (» / «Документация )»). */
  display: block; overflow: hidden;
  margin: 30px 0 12px; font-size: 15px; font-weight: 700;
}
/* Линия дорисовывается в остаток последней строки: inline-block шириной во всю
   колонку с отрицательным правым полем не может вытолкнуть текст на перенос. */
.article .rel-head::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 100%; height: 1px; background: var(--border);
  margin-left: 12px; margin-right: -100%;
}
.article .chg { display: flex; align-items: flex-start; gap: 10px; margin: 7px 0; }
.article .chg-tag {
  flex: none; margin-top: 2px; width: 21px; height: 21px; border-radius: var(--radius);
  display: inline-grid; place-items: center; line-height: 1;
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  color: var(--chg-fg); background: var(--chg-bg); border: 1px solid var(--chg-bd);
}
.article .chg-add { --chg-fg: var(--ok);     --chg-bg: var(--ok-bg);     --chg-bd: var(--ok-bd); }
.article .chg-fix { --chg-fg: var(--danger); --chg-bg: var(--danger-bg); --chg-bd: var(--danger-bd); }
.article .chg-upd { --chg-fg: var(--info);   --chg-bg: var(--info-bg);   --chg-bd: var(--info-bd); }

/* ---------- FAQ: вопрос и ответ под ним ----------
   Раньше такие разделы писали таблицей «симптом → решение», но длинный ответ
   в узкой колонке читается плохо, а на телефоне колонка схлопывается вовсе.
   Пара — это вопрос с меткой и ответ, привязанный к нему вертикальной линией. */
.article .faq-q {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 26px 0 0; font-size: 16px; font-weight: 700; line-height: 1.45;
}
.article .faq-q::before {
  content: "?"; flex: none;
  width: 21px; height: 21px; margin-top: 2px; border-radius: var(--radius);
  display: inline-grid; place-items: center; line-height: 1;
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  color: var(--info); background: var(--info-bg); border: 1px solid var(--info-bd);
}
/* Отступ ответа совпадает с текстом вопроса: метка 21px + промежуток 10px. */
.article .faq-a {
  margin: 8px 0 0 10px; padding-left: 20px;
  border-left: 2px solid var(--border);
}
.article .faq-a + .faq-a { margin-top: 8px; }
.article .faq-a > :first-child { margin-top: 0; }
.article .faq-a > :last-child { margin-bottom: 0; }
/* Списки внутри ответа не должны уезжать за линию. */
.article .faq-a ul, .article .faq-a ol { margin: 8px 0; padding-left: 20px; }
/* Если ответ сам список — маркерам нужно место сверх отступа от линии. */
.article ul.faq-a, .article ol.faq-a { padding-left: 40px; }

/* ---------- Home: search + module tiles ---------- */
.home-lead { color: var(--text-muted); font-size: 16px; max-width: 640px; margin: 10px 0 0; }

.home-search { position: relative; display: flex; align-items: center; margin: 26px 0 6px; }
.home-search input {
  width: 100%; padding: 13px 16px 13px 44px; font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.home-search input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.home-search .icon {
  position: absolute; left: 15px; display: flex; align-items: center;
  color: var(--text-muted); pointer-events: none;
}
.home-count { font-size: 13px; color: var(--text-muted); margin: 0 0 18px 4px; }
.home-heading { font-size: 18px; margin: 22px 0 14px; }
.home-heading:empty { display: none; }
.home-more { margin: 22px 0 10px; }
.home-more-btn {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text-muted);
  padding: 9px 14px; font: 600 13px var(--sans); cursor: pointer;
}
.home-more-btn:hover { background: var(--bg-alt); color: var(--text); }
.tile-date { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }
.tile-head { display: flex; align-items: flex-start; gap: 12px; }
.tile-img {
  width: 48px; height: 48px; flex: none; object-fit: contain;
  border: 1px solid var(--link); background: var(--link); padding: 4px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 30px 46px 22px;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start;
  max-width: 1180px; margin: 0 auto;
}
.footer-about { flex: 1 1 280px; min-width: 240px; }
.footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.footer-brand .logo { height: 34px; }
.footer-about p { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; max-width: 380px; }
.footer-links { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.footer-links a { color: var(--text); }
.footer-links a:hover { color: var(--link); }
.footer-cta { margin-left: auto; }
.cta-btn {
  display: inline-block; padding: 11px 18px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow);
}
.cta-btn:hover { filter: brightness(1.08); text-decoration: none; }
.footer-bottom {
  max-width: 1180px; margin: 22px auto 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px;
}
@media (max-width: 760px) {
  .site-footer { padding: 24px 20px 18px; }
  .footer-cta { margin-left: 0; }
  .cta-btn { display: block; text-align: center; }
}

.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); text-decoration: none;
}
.tile:hover {
  text-decoration: none; border-color: var(--accent);
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.tile-name { font-weight: 650; font-size: 15px; line-height: 1.35; }
.tile-desc {
  /* Аннотация обрезается по числу строк, и на границе обрыв выглядел как ошибка
     вёрстки. Уменьшенный кегль вмещает больше, а градиент снизу показывает,
     что текст продолжается, вместо резко срезанной строки. */
  position: relative;
  font-size: 12.5px; line-height: 1.45; color: var(--text-muted); flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
  max-height: calc(12.5px * 1.45 * 4);
}
.tile-desc.is-clipped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg) 92%);
  pointer-events: none;
}
.tile-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11px; color: var(--text-muted);
}
.tile-meta .ver {
  font-family: var(--mono); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 8px;
}
.tile-meta .lang { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.tile-meta .lang.off { opacity: .35; }

/* ---------- On-page TOC ---------- */
.toc {
  width: var(--toc-w); flex: none;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 34px 20px 60px; font-size: 13px;
}
.toc .toc-title { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.toc a { display: block; color: var(--text-muted); padding: 4px 0; border-left: 2px solid transparent; padding-left: 12px; margin-left: -2px; line-height: 1.4; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.lvl-3 { padding-left: 24px; }
.toc a.lvl-4 { padding-left: 36px; font-size: 12px; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* ---------- States ---------- */
.empty { padding: 80px 40px; text-align: center; color: var(--text-muted); }
.empty h2 { color: var(--text); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* image lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100; display: none; place-items: center; padding: 40px; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: 0 10px 60px rgba(0,0,0,.6); }

/* ---------- Responsive ---------- */
/* ---------- Карточка товара ---------- */
.product-card { margin-bottom: 22px; }
.product-card .pc-img { display: block; border: 1px solid var(--link); background: var(--link); }
.product-card .pc-img img { display: block; width: 100%; height: auto; }
.product-card .pc-price { font-size: 20px; font-weight: 800; margin: 12px 0 10px; }
.product-card .pc-from { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.product-card .pc-buy {
  display: block; text-align: center; padding: 11px 14px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
}
.product-card .pc-buy:hover { filter: brightness(1.08); text-decoration: none; }
.product-card .pc-note { color: var(--text-muted); font-size: 12px; margin-top: 8px; }
/* в потоке статьи (узкие экраны) карточка ложится в строку */
.product-card-inline { display: none; }
.product-card-inline .pc-img { float: left; width: 96px; margin: 0 14px 10px 0; }
.product-card-inline .pc-price { margin: 0 0 10px; }
.product-card-inline .pc-buy { display: inline-block; }
.product-card-inline::after { content: ''; display: block; clear: both; }

@media (max-width: 1180px) {
  .toc { display: none; }
  .product-card-inline:not([hidden]) { display: block; }
}
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand { font-size: 15px; min-width: 0; overflow: hidden; }
  .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand small { display: none; }
  .lang-switch button { padding: 6px 10px; }
  .sidebar {
    position: fixed; top: var(--header-h); left: 0; z-index: 25;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow); width: min(85vw, var(--sidebar-w));
  }
  .sidebar.open { transform: translateX(0); }
  .article-wrap { padding: 24px 18px 100px; }
  .doc-header h1 { font-size: 26px; }
  .scrim { position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0,0,0,.4); z-index: 24; display: none; }
  .scrim.open { display: block; }
}