/* ==========================================================================
   KPK «Демидовъ» — info page stylesheet  v2.0
   --------------------------------------------------------------------------
   Fixes vs v1:
     1. WIDE desktop layout (v1 inherited the block theme's ~650px measure).
     2. Real visual design: numbered sections, cards, tinted panels, styled
        document list, striped tables, callouts, sticky table of contents.
     3. Works on RAW pasted content too (body.kpkd-styled .entry-content),
        so the page looks designed before any pattern classes are added.

   HOW TO RE-BRAND: edit only the :root block below. Every color on the page
   derives from --kpk-brand / --kpk-gold / --kpk-ink / --kpk-paper.
   ========================================================================== */

:root {
	/* ---- Brand palette -------------------------------------------------- */
	--kpk-brand:        #14512f;   /* primary — headings, rules, header bars   */
	--kpk-brand-dark:   #0d3a22;   /* hovers, pressed, dark panels            */
	--kpk-brand-soft:   #eaf2ed;   /* tinted fills                            */
	--kpk-gold:         #b0842c;   /* accent — numbers, links, emphasis       */
	--kpk-gold-soft:    #fbf4e4;   /* accent tint                             */
	--kpk-ink:          #23282a;   /* body text                               */
	--kpk-ink-soft:     #5d666a;   /* meta text                               */
	--kpk-paper:        #ffffff;   /* card / content ground                    */
	--kpk-paper-alt:    #f6f5f1;   /* page ground, zebra rows                  */
	--kpk-line:         #d8dcd6;   /* hairlines                               */

	/* ---- Layout width — THE FIX FOR THE NARROW PAGE --------------------- */
	--kpk-content: 1180px;         /* text column                             */
	--kpk-wide:    1480px;         /* tables, card grids, full-bleed panels    */
	--kpk-gutter:  clamp(16px, 4vw, 48px);

	/* ---- Type ----------------------------------------------------------- */
	--kpk-font: "PT Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--kpk-font-head: "PT Serif", Georgia, "Times New Roman", serif;
	--kpk-fs-body: clamp(16px, 0.55vw + 15px, 18px);
	--kpk-lh: 1.65;

	--kpk-radius: 4px;
	--kpk-shadow: 0 1px 2px rgba(20, 40, 30, 0.06), 0 8px 24px -12px rgba(20, 40, 30, 0.18);
}

/* Widen the WordPress block theme's constrained layout (Twenty Twenty-Four/Five
   and every theme.json theme read these two variables). */
body.kpkd-styled {
	--wp--style--global--content-size: var(--kpk-content);
	--wp--style--global--wide-size: var(--kpk-wide);
}

/* Classic themes / page builders: widen the usual wrappers. */
body.kpkd-styled .site-main,
body.kpkd-styled .entry-content,
body.kpkd-styled .wp-block-post-content,
body.kpkd-styled .kpkd-info-page {
	max-width: none;
	width: auto;
}

body.kpkd-styled .entry-content > *,
body.kpkd-styled .wp-block-post-content > * {
	max-width: var(--kpk-content);
	margin-left: auto;
	margin-right: auto;
}

body.kpkd-styled {
	background: var(--kpk-paper-alt);
	color: var(--kpk-ink);
	font-size: var(--kpk-fs-body);
	line-height: var(--kpk-lh);
}

/* ==========================================================================
   1. BLOCK SHELL
   ========================================================================== */

.kpk-blocks {
	counter-reset: kpkblock;
	max-width: var(--kpk-wide);
	margin: 0 auto;
	padding: 0 var(--kpk-gutter) 64px;
	font-family: var(--kpk-font);
}

.kpk-block {
	counter-increment: kpkblock;
	position: relative;
	background: var(--kpk-paper);
	border: 1px solid var(--kpk-line);
	border-top: 3px solid var(--kpk-brand);
	border-radius: var(--kpk-radius);
	box-shadow: var(--kpk-shadow);
	margin: 0 0 28px;
	padding: 0;
	scroll-margin-top: 90px;
	overflow-wrap: break-word;
}

.kpk-block__inner {
	max-width: none;
	padding: clamp(24px, 3vw, 44px) clamp(20px, 3.2vw, 52px) clamp(28px, 3.4vw, 48px);
}

/* Section head: brand bar + auto number */
.kpk-block__title {
	font-family: var(--kpk-font-head);
	font-size: clamp(22px, 1.5vw + 15px, 32px);
	line-height: 1.22;
	font-weight: 700;
	color: var(--kpk-brand);
	text-align: left;
	text-wrap: balance;
	margin: 0 0 24px;
	padding: 0 0 16px 0;
	border-bottom: 1px solid var(--kpk-line);
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.kpk-block__title::before {
	content: counter(kpkblock, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--kpk-font);
	font-size: 0.55em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--kpk-gold);
	background: var(--kpk-gold-soft);
	border-radius: var(--kpk-radius);
	padding: 0.35em 0.6em;
	transform: translateY(-0.15em);
}

/* Documents block reads as the page's masthead card */
.kpk-block--documents {
	border-top-color: var(--kpk-gold);
}

.kpk-block--coop-details,
.kpk-block--appeals-addresses {
	background: linear-gradient(180deg, var(--kpk-brand-soft) 0 120px, var(--kpk-paper) 120px);
}

/* ==========================================================================
   2. BODY TYPOGRAPHY  (also applied to raw pasted page content)
   ========================================================================== */

.kpk-block__body,
body.kpkd-styled .entry-content {
	font-family: var(--kpk-font);
}

.kpk-block__body > *:first-child { margin-top: 0; }
.kpk-block__body > *:last-child { margin-bottom: 0; }

.kpk-block__body p,
.kpk-block__body li {
	text-wrap: pretty;
	max-width: 78ch;
}

.kpk-block__body p { margin: 0 0 1.1em; }

.kpk-block__body h2,
.kpk-block__body h3,
.kpk-block__body h4,
.kpk-block__body h5,
body.kpkd-styled .entry-content h2,
body.kpkd-styled .entry-content h3,
body.kpkd-styled .entry-content h4 {
	font-family: var(--kpk-font-head);
	color: var(--kpk-brand);
	text-align: left;
	line-height: 1.28;
	text-wrap: balance;
}

.kpk-block__body h3 {
	font-size: clamp(19px, 0.7vw + 16px, 23px);
	margin: 2.2em 0 0.6em;
	padding-left: 14px;
	border-left: 3px solid var(--kpk-gold);
}

.kpk-block__body h4 {
	font-size: clamp(17px, 0.5vw + 15px, 20px);
	margin: 1.8em 0 0.5em;
	color: var(--kpk-brand-dark);
}

.kpk-block__body h5 {
	font-family: var(--kpk-font);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kpk-ink-soft);
	margin: 1.6em 0 0.4em;
}

.kpk-block__body strong,
.kpk-block__body b { color: var(--kpk-brand-dark); }

.kpk-block__body a,
body.kpkd-styled .entry-content a {
	color: var(--kpk-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.kpk-block__body a:hover,
.kpk-block__body a:focus-visible {
	color: var(--kpk-brand);
	background: var(--kpk-gold-soft);
}

.kpk-block :focus-visible,
body.kpkd-styled .entry-content :focus-visible {
	outline: 2px solid var(--kpk-gold);
	outline-offset: 2px;
}

/* Lists — replaces the bare theme bullets and the stray "•" / "—" markers */
.kpk-block__body ul,
.kpk-block__body ol {
	margin: 0 0 1.2em;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.kpk-block__body ul > li,
.kpk-block__body ol > li {
	position: relative;
	padding-left: 30px;
}

.kpk-block__body ul > li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	background: var(--kpk-gold);
	border-radius: 50%;
}

.kpk-block__body ol { counter-reset: kpkli; }

.kpk-block__body ol > li {
	counter-increment: kpkli;
	padding-left: 38px;
}

.kpk-block__body ol > li::before {
	content: counter(kpkli);
	position: absolute;
	left: 0;
	top: 0.1em;
	min-width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--kpk-brand);
	background: var(--kpk-brand-soft);
	border-radius: 50%;
}

.kpk-block__body li > ul,
.kpk-block__body li > ol { margin-top: 10px; }

/* ==========================================================================
   3. DOCUMENT LIST
   Works automatically on any <ul> of links inside the documents block,
   and on demand anywhere via class="kpk-docs".
   ========================================================================== */

.kpk-block--documents .kpk-block__body > ul,
.kpk-block__body .kpk-docs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	gap: 10px;
}

.kpk-block--documents .kpk-block__body > ul > li,
.kpk-block__body .kpk-docs > li {
	padding: 0;
	background: var(--kpk-paper-alt);
	border: 1px solid var(--kpk-line);
	border-radius: var(--kpk-radius);
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.kpk-block--documents .kpk-block__body > ul > li::before,
.kpk-block__body .kpk-docs > li::before { content: none; }

.kpk-block--documents .kpk-block__body > ul > li:hover,
.kpk-block__body .kpk-docs > li:hover {
	background: var(--kpk-gold-soft);
	border-color: var(--kpk-gold);
	transform: translateY(-1px);
}

.kpk-block--documents .kpk-block__body > ul > li > a,
.kpk-block__body .kpk-docs > li > a {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: start;
	gap: 12px;
	padding: 14px 16px;
	color: var(--kpk-ink);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.45;
	max-width: none;
}

.kpk-block--documents .kpk-block__body > ul > li > a:hover,
.kpk-block__body .kpk-docs > li > a:hover {
	background: transparent;
	color: var(--kpk-brand);
}

/* File-type badge from the href — pure CSS, no markup change needed */
.kpk-block--documents .kpk-block__body > ul > li > a::before,
.kpk-block__body .kpk-docs > li > a::before {
	content: "DOC";
	grid-column: 1;
	font-family: var(--kpk-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--kpk-brand);
	border-radius: 3px;
	padding: 4px 0;
	text-align: center;
	margin-top: 2px;
}

.kpk-block__body a[href$=".pdf"]::before,
.kpk-block__body a[href*=".pdf?"]::before { content: "PDF"; background: #9b2c2c; }
.kpk-block__body a[href$=".doc"]::before,
.kpk-block__body a[href$=".docx"]::before { content: "DOC"; background: #1c4587; }
.kpk-block__body a[href$=".xls"]::before,
.kpk-block__body a[href$=".xlsx"]::before { content: "XLS"; background: #1e6b45; }
.kpk-block__body a[href$=".mp4"]::before { content: "▶"; background: var(--kpk-gold); font-size: 12px; }

/* ==========================================================================
   4. PANELS, CALLOUTS, KEY FIGURES

   These four classes are OPTIONAL and applied BY HAND in the editor.
   None of them is required for a block to look correct — plain paragraphs and
   lists are already styled. Use them only where the content below matches.

   ---- .kpk-note — neutral highlight (gold) --------------------------------
   WHAT GOES HERE: one short paragraph the reader must not miss, but which is
   not a risk: a reminder, a clarification, a closing note.
   ON THIS SITE, use it for: the closing note of «Уважаемый пайщик»
   («Из «Информации» исключены... условия, которые могли бы ввести Вас в
   заблуждение»), «Памятка» in «Рекомендации к содержанию обращений»,
   «С текстом указанного стандарта Вы можете ознакомиться...».
   MARKUP:
     <p class="kpk-note">Из «Информации» исключены какие бы то ни было условия…</p>
   Blockquotes get this styling automatically — no class needed.

   ---- .kpk-warning — risk highlight (red) --------------------------------
   WHAT GOES HERE: a legal or financial consequence for the reader. Rule of
   thumb: if the text starts with «Важно:», «Обратите внимание», «Должны
   предупредить Вас» or describes a risk/penalty/loss — it is a warning.
   ON THIS SITE, use it for: «Важно: Датой платежа считается дата фактического
   поступления денежных средств», «Важно: Согласие или отказ от солидарного
   несения субсидиарной ответственности», «Должны предупредить Вас, что, если
   Вы намерены получить потребительский заем в сумме 100 000 рублей и более…»,
   «Кооператив не является участником системы обязательного страхования
   вкладов», «По состоянию на настоящую дату, ответственность Кооператива не
   застрахована».
   MARKUP:
     <p class="kpk-warning"><strong>Важно:</strong> датой платежа считается…</p>
   NEVER use it for ordinary explanatory text — if everything is red, nothing is.

   ---- .kpk-panel — quiet grouping box (light green) ----------------------
   WHAT GOES HERE: two or more paragraphs that belong together as a named
   sub-topic inside a long block, and that are neither a note nor a warning.
   It groups; it does not shout.
   ON THIS SITE, use it for: «Возможность освобождения от ответственности»
   inside «Субсидиарная ответственность пайщиков»; «Доступность услуг для лиц с
   ограниченными возможностями» inside «Условия участия в финансовой
   взаимопомощи»; «Особенности судебного взыскания» inside «Условия досрочного
   погашения».
   MARKUP:
     <div class="kpk-panel">
       <h4>Доступность услуг для лиц с ограниченными возможностями</h4>
       <p>Кооператив окажет необходимое содействие…</p>
     </div>

   ---- .kpk-figures — key numbers row ------------------------------------
   WHAT GOES HERE: 2–4 SHORT numeric facts, and nothing else. A value is at
   most ~8 characters («11–36%», «3 дня», «100 руб.»); the label is 2–6 words.
   Never sentences, never more than four items — it is a scannable strip, not
   a table. For long label/value data use .kpk-facts (section 5) instead.
   ON THIS SITE, use it for: ПСК «от 11,00% до 36,00% годовых», срок займа
   «от 6 до 120 месяцев», «Срок рассмотрения заявки — 3 дня», вступительный и
   паевой взнос «100 руб.», процентная ставка «11–36%».
   MARKUP (one <li> per number, both spans required):
     <ul class="kpk-figures">
       <li><span class="kpk-figure__value">11–36%</span>
           <span class="kpk-figure__label">ПСК, годовых</span></li>
       <li><span class="kpk-figure__value">6–120</span>
           <span class="kpk-figure__label">Срок займа, месяцев</span></li>
       <li><span class="kpk-figure__value">3 дня</span>
           <span class="kpk-figure__label">Рассмотрение заявки</span></li>
     </ul>
   ========================================================================== */

.kpk-block__body .kpk-note,
.kpk-block__body blockquote {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: var(--kpk-gold-soft);
	border: 1px solid #ecd9ab;
	border-left: 4px solid var(--kpk-gold);
	border-radius: var(--kpk-radius);
}

.kpk-block__body .kpk-note > *:last-child,
.kpk-block__body blockquote > *:last-child { margin-bottom: 0; }

/* Paragraph that starts with "Важно:" reads as a warning without extra markup */
.kpk-block__body .kpk-warning {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: #fdf1ef;
	border: 1px solid #f0cdc6;
	border-left: 4px solid #9b2c2c;
	border-radius: var(--kpk-radius);
}

.kpk-block__body .kpk-panel {
	margin: 1.6em 0;
	padding: 22px 24px;
	background: var(--kpk-brand-soft);
	border-radius: var(--kpk-radius);
}

/* Big number / rate display: .kpk-figure with .kpk-figure__value + __label */
.kpk-block__body .kpk-figures {
	list-style: none;
	padding: 0;
	margin: 1.6em 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0;
	border: 1px solid var(--kpk-line);
	border-radius: var(--kpk-radius);
	overflow: hidden;
}

.kpk-block__body .kpk-figures > li {
	padding: 22px 24px;
	border-left: 1px solid var(--kpk-line);
	background: var(--kpk-paper);
}

.kpk-block__body .kpk-figures > li:first-child { border-left: 0; }
.kpk-block__body .kpk-figures > li::before { content: none; }

.kpk-block__body .kpk-figure__value {
	display: block;
	font-family: var(--kpk-font-head);
	font-size: clamp(28px, 2vw + 18px, 42px);
	line-height: 1.05;
	font-weight: 700;
	color: var(--kpk-brand);
}

.kpk-block__body .kpk-figure__label {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--kpk-ink-soft);
}

/* ==========================================================================
   5. FACTS / PEOPLE / CONTACTS

   ---- .kpk-facts — label / value table (a <dl>) --------------------------
   WHAT GOES HERE: registry-style data where every row is «short label →
   value». Any plain <dl> is styled the same way, so the class is optional.
   ON THIS SITE, use it for: «СВЕДЕНИЯ О КООПЕРАТИВЕ «ДЕМИДОВЪ»» (ПОЛНОЕ
   НАИМЕНОВАНИЕ, ЮРИДИЧЕСКИЙ АДРЕС, ДАТА РЕГИСТРАЦИИ, ЗАПИСЬ В РЕЕСТРЕ ЦБ,
   ЧЛЕНСТВО В СРО, ПЛАТЕЖНЫЕ РЕКВИЗИТЫ), «Реквизиты» в подвале, «Контакты и
   график работы головного офиса».
   MARKUP:
     <dl class="kpk-facts">
       <dt>Полное наименование</dt><dd>Кредитный потребительский кооператив «Демидовъ»</dd>
       <dt>Дата регистрации</dt><dd>19.08.2025</dd>
     </dl>

   ---- .kpk-people — office holders --------------------------------------
   WHAT GOES HERE: elected persons — one card per person, always the same
   three parts: position, full name, and the electing protocol / term.
   ON THIS SITE, use it for: «Органы управления Кооператива» (Председатель
   правления, два члена правления), «Состав иных органов» (Ревизор),
   «ОРГАНЫ И ОТВЕТСТВЕННЫЕ СОТРУДНИКИ КООПЕРАТИВА».
   MARKUP (__meta may be omitted):
     <ul class="kpk-people">
       <li><span class="kpk-person__role">Председатель правления</span>
           <span class="kpk-person__name">Лунева Елена Владимировна</span>
           <span class="kpk-person__meta">Протокол общего собрания №1 от 11.08.2025, сроком на 5 лет</span></li>
     </ul>

   ---- .kpk-contacts — address cards -------------------------------------
   WHAT GOES HERE: several ORGANISATIONS, each with its own multi-line block
   of address / phone / e-mail / site. Use it instead of a two-column table
   when the page is read on phones a lot — same data, no horizontal scroll.
   ON THIS SITE, use it for: «СПОСОБЫ И АДРЕСА НАПРАВЛЕНИЯ ОБРАЩЕНИЙ»
   (Правление, Ревизионная комиссия, ответственное лицо, Банк России, СРО
   «Кооперативные Финансы», Прокуратура Свердловской области). The same data
   as a <table> is also fine — pick one, not both.
   MARKUP:
     <ul class="kpk-contacts">
       <li><h4>Правление Кооператива</h4>
           <p>620034, г. Екатеринбург, ул. Труда, д. 10, офис 16<br>
              Телефон: +7 (343) 215-06-41<br>
              E-mail: info@kpk-demidov.ru</p></li>
     </ul>
   ========================================================================== */

.kpk-block__body .kpk-facts,
.kpk-block__body dl {
	margin: 1.6em 0;
	display: grid;
	grid-template-columns: minmax(200px, 26%) 1fr;
	gap: 0;
	border: 1px solid var(--kpk-line);
	border-radius: var(--kpk-radius);
	overflow: hidden;
}

.kpk-block__body .kpk-facts dt,
.kpk-block__body dl dt {
	margin: 0;
	padding: 14px 18px;
	background: var(--kpk-brand-soft);
	border-top: 1px solid var(--kpk-line);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kpk-brand-dark);
}

.kpk-block__body .kpk-facts dd,
.kpk-block__body dl dd {
	margin: 0;
	padding: 14px 18px;
	border-top: 1px solid var(--kpk-line);
}

.kpk-block__body .kpk-facts > dt:first-child,
.kpk-block__body .kpk-facts > dt:first-child + dd,
.kpk-block__body dl > dt:first-child,
.kpk-block__body dl > dt:first-child + dd { border-top: 0; }

/* Office holders */
.kpk-block__body .kpk-people {
	list-style: none;
	padding: 0;
	margin: 1.6em 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 14px;
}

.kpk-block__body .kpk-people > li,
.kpk-block__body .kpk-person {
	padding: 20px 22px;
	background: var(--kpk-paper);
	border: 1px solid var(--kpk-line);
	border-top: 3px solid var(--kpk-gold);
	border-radius: var(--kpk-radius);
}

.kpk-block__body .kpk-people > li::before { content: none; }
.kpk-block__body .kpk-people > li { padding-left: 22px; }

.kpk-block__body .kpk-person__role {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kpk-ink-soft);
	margin-bottom: 8px;
}

.kpk-block__body .kpk-person__name {
	display: block;
	font-family: var(--kpk-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--kpk-brand);
}

.kpk-block__body .kpk-person__meta {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	color: var(--kpk-ink-soft);
}

/* Contact card grid: .kpk-contacts */
.kpk-block__body .kpk-contacts {
	list-style: none;
	padding: 0;
	margin: 1.6em 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 14px;
}

.kpk-block__body .kpk-contacts > li {
	padding: 20px 22px;
	background: var(--kpk-paper-alt);
	border: 1px solid var(--kpk-line);
	border-radius: var(--kpk-radius);
}

.kpk-block__body .kpk-contacts > li::before { content: none; }

/* ==========================================================================
   6. TABLES — full width, striped, sticky head
   ========================================================================== */

.kpk-block__body table,
body.kpkd-styled .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 0.96em;
	background: var(--kpk-paper);
	border: 1px solid var(--kpk-line);
	border-radius: var(--kpk-radius);
	overflow: hidden;
}

.kpk-block__body th,
.kpk-block__body td,
body.kpkd-styled .entry-content th,
body.kpkd-styled .entry-content td {
	text-align: left;
	vertical-align: top;
	padding: 13px 16px;
	border-bottom: 1px solid var(--kpk-line);
	max-width: none;
}

.kpk-block__body thead th,
body.kpkd-styled .entry-content thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--kpk-brand);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 0;
}

.kpk-block__body tbody tr:nth-child(even) { background: var(--kpk-paper-alt); }
.kpk-block__body tbody tr:hover { background: var(--kpk-brand-soft); }
.kpk-block__body tbody tr:last-child td { border-bottom: 0; }

/* Wide tables: give the block full width and let the table scroll */
.kpk-block--appeals-addresses .kpk-block__inner,
.kpk-block--coop-details .kpk-block__inner { max-width: none; }

.kpk-block__body .kpk-table-scroll,
.kpk-block__body .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   7. TABLE OF CONTENTS — sticky, two columns, numbered
   ========================================================================== */

.kpk-toc {
	counter-reset: kpktoc;
	max-width: var(--kpk-wide);
	margin: 0 auto 28px;
	padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 40px);
	background: var(--kpk-brand);
	border-radius: var(--kpk-radius);
	box-shadow: var(--kpk-shadow);
	font-family: var(--kpk-font);
}

.kpk-toc::before {
	content: "Содержание";
	display: block;
	font-family: var(--kpk-font-head);
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.kpk-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 2px 28px;
}

.kpk-toc__item { counter-increment: kpktoc; }

.kpk-toc__link {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 8px;
	padding: 7px 8px 7px 0;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
	border-radius: 3px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.kpk-toc__link::before {
	content: counter(kpktoc, decimal-leading-zero);
	color: var(--kpk-gold);
	font-weight: 700;
	font-size: 13px;
	padding-left: 8px;
}

.kpk-toc__link:hover,
.kpk-toc__link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   8. PAGE INTRO (content typed on the page itself, above the blocks)
   ========================================================================== */

.kpkd-page-intro {
	max-width: var(--kpk-wide);
	margin: 0 auto 28px;
	padding: clamp(28px, 3.4vw, 56px) clamp(20px, 3.2vw, 52px);
	background: var(--kpk-paper);
	border: 1px solid var(--kpk-line);
	border-top: 3px solid var(--kpk-brand);
	border-radius: var(--kpk-radius);
	box-shadow: var(--kpk-shadow);
	font-family: var(--kpk-font);
}

.kpkd-page-intro > *:last-child { margin-bottom: 0; }

.kpkd-info-page { padding: clamp(20px, 3vw, 44px) 0 64px; }

/* ==========================================================================
   9. WIDTH HELPERS
   ========================================================================== */

.kpk-block.kpk-narrow .kpk-block__inner { max-width: 820px; }
.kpk-block.kpk-wide .kpk-block__inner { max-width: none; }
.kpk-block.kpk-wide .kpk-block__body p,
.kpk-block.kpk-wide .kpk-block__body li { max-width: none; }

/* ---- .kpk-cols — two-column list --------------------------------------
   WHERE IT GOES: on the BLOCK, not on the list — i.e. in the shortcode
   (`[kpk_block slug="member-duties" class="kpk-cols"]`) or as an extra class
   on the <section>. It splits the block's top-level <ul> into two columns so a
   very long list of short items stops being a single endless strip.
   USE IT ONLY WHEN: the block is essentially ONE list, it has ~8+ items, and
   each item is 1–3 lines. Do not use it on lists with sub-lists, tables,
   images, or long multi-paragraph items — columns break their reading order.
   ON THIS SITE, use it for: «Обязанности члена кооператива (пайщика)» (14
   items), «Индивидуальные условия договора включают в себя условия о:» (19
   items), «К документам… относятся:» (9 items).
   Collapses back to one column below 900px automatically.

   Other width helpers, same placement (shortcode `class=` / <section>):
     kpk-narrow — 820px measure, for short text-only blocks
     kpk-wide   — full card width, for wide tables («СПОСОБЫ И АДРЕСА…»,
                  «СВЕДЕНИЯ О КООПЕРАТИВЕ», список подразделений)
   -------------------------------------------------------------------------- */
.kpk-block.kpk-cols .kpk-block__body > ul {
	columns: 2;
	column-gap: 40px;
}

.kpk-block.kpk-cols .kpk-block__body > ul > li {
	break-inside: avoid;
	max-width: none;
}

@media (max-width: 900px) {
	.kpk-block.kpk-cols .kpk-block__body > ul { columns: 1; }
}

/* ==========================================================================
   10. SMALL SCREENS
   ========================================================================== */

@media (max-width: 640px) {
	.kpk-block__inner { padding: 22px 18px 26px; }

	.kpk-block__title {
		flex-direction: column;
		gap: 10px;
	}

	.kpk-block__title::before {
		transform: none;
		justify-self: start;
		width: fit-content;
	}

	.kpk-block__body .kpk-facts,
	.kpk-block__body dl { grid-template-columns: 1fr; }

	.kpk-block__body .kpk-facts dd,
	.kpk-block__body dl dd { border-top: 0; }

	.kpk-block__body .kpk-figures > li {
		border-left: 0;
		border-top: 1px solid var(--kpk-line);
	}

	.kpk-block__body .kpk-figures > li:first-child { border-top: 0; }
}

/* ==========================================================================
   11. PRINT
   ========================================================================== */

@media print {
	.kpk-toc { display: none; }

	.kpk-block {
		break-inside: avoid;
		box-shadow: none;
		border: 0;
		border-top: 2px solid #000;
		margin: 0 0 18px;
	}

	.kpk-block__inner { padding: 14px 0; }
	.kpk-block__title { color: #000; }
	.kpk-block__body a { color: #000; }
	.kpk-block__body thead th { background: #eee; color: #000; }
}