/* СКОПИРОВАНО МАШИНОЙ — ПРАВИТЬ ЗДЕСЬ НЕЛЬЗЯ.
 * Источник: 02-ERFOLG/site/_shared/tovar/kartochka/kartochka.css
 * Правка в этой копии живёт до первой синхронизации и молча исчезает.
 * Разнести заново: python3 02-ERFOLG/site/sync_kartochka.py
 */
/* ═══════════════════════════════════════════════════════════════════════════
   КАРТОЧКА ТОВАРА — оформление, одно на три сайта. Заведено 28.08.2026.

   ЦВЕТА НЕ НАЗНАЧАЮТСЯ ЗДЕСЬ. Палитра у каждого сайта своя — решение Айгуль
   17.08.2026 «каждый сайт должен быть индивидуален»: HOME тёплый бежево-золотой
   (--ink, --paper, --gold), Hospitality кофейно-золотой (--color-ink,
   --color-cream, --color-gold), Med холодный сине-серый. Имена переменных у них
   РАЗНЫЕ, и это не недосмотр.

   Поэтому карточка объявляет собственные --kt-* и подставляет в них имя того
   сайта, на котором оказалась. Ни одного цвета своим значением здесь нет —
   кроме последнего запаса на случай, если файл подключён вообще без токенов.
   Нужен другой цвет на конкретной витрине — переопределить --kt-* в её стилях,
   а не править этот файл.

   РАЗМЕРЫ И РИТМ — общие токены (_shared/tokens/core.css), они у трёх сайтов
   совпадают по устройству. Взята нижняя граница шкалы отступов: размашистая
   вёрстка заставляет читателя скроллить там, где читать нечего.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Последний запас на случай, если файл подключён вообще без токенов сайта.
   Числовые значения цвета стоят только здесь, в :root, — правило audit_site.py:
   цвет, вписанный числом посреди правила, мимо темы и мимо палитры сайта, и
   находится он потом только глазами. */
:root {
  --kt-zapas-ink:    #2a2520;
  --kt-zapas-muted:  #7a7066;
  --kt-zapas-line:   #e4dccf;
  --kt-zapas-paper:  #f1ebe1;
  --kt-zapas-accent: #b89968;
  --kt-zapas-fon:    #faf7f2;
  --kt-zapas-err:    #c0392b;
  --kt-zapas-ok:     #1f7a4d;

  /* Ролик. Эти три НЕ переключаются вместе с темой, и это решение, а не
     недосмотр: поле вокруг кадра у видео чёрное в любой теме (светло-серое
     читалось бы как обрезанный кадр), а значок проигрывания белый на тёмном
     кружке — его узнают именно таким. Токенами они всё равно заведены: иначе
     число сидит посреди правила, и следующий, кто будет собирать палитру,
     найдёт его только глазами. */
  --kt-video-fon:    #000;
  --kt-igra-fon:     rgba(0, 0, 0, .55);
  --kt-igra-strelka: #fff;
}

.kartochka {
  --kt-ink:    var(--ink,   var(--color-ink,     var(--kt-zapas-ink)));
  --kt-muted:  var(--muted, var(--color-muted,   var(--kt-zapas-muted)));
  --kt-line:   var(--line,  var(--color-line,    var(--kt-zapas-line)));
  --kt-paper:  var(--paper, var(--color-cream-2, var(--kt-zapas-paper)));
  --kt-accent: var(--gold,  var(--color-gold,    var(--kt-zapas-accent)));
  --kt-fon:    var(--bg,    var(--color-cream,   var(--kt-zapas-fon)));

  max-width: var(--wrap, 1200px);
  margin: 0 auto;
  padding: var(--space-4, 40px) var(--gutter, 32px) var(--space-5, 64px);
  color: var(--kt-ink);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.55);
}

/* ── КРАСНАЯ СТРОКА ─────────────────────────────────────────────────────────
   Отступ первой строки — стандарт русской типографики, обозначает начало
   нового смыслового блока. Ставится и на абзацы, и на заголовки; отбивка
   между абзацами при этом остаётся — это не «или», а оба вместе.
   Скил `pravilo-krasnoy-stroki`, применено по слову Айгуль 28.08.2026.

   НЕ ставится: в списках, кнопках, подписях под фото и таблицами, в ячейках
   таблиц и в служебных метках (артикул, наличие, подпись под ценой) — там
   отступ читается как сбитая вёрстка, а не как начало мысли. */
.kartochka .kt-imya,
.kartochka .kt-vygoda,
.kartochka .kt-blok h2,
.kartochka .kt-blok p,
.kartochka .kt-spravka,
.kartochka .kt-prosba,
.kartochka details.kt-blok > summary {
  text-indent: 1.5em;
}

/* Имя модели. Крупный кегль тонким начертанием — источник дорогого вида в этой
   системе; жирный заголовок здесь выглядит дёшево (BRAND-SYSTEM §2). */
.kartochka .kt-imya {
  font-size: var(--fs-h2, 2rem);
  font-weight: var(--fw-h1, 300);
  line-height: var(--lh-h2, 1.08);
  letter-spacing: var(--tr-h2, -.01em);
  margin: 0 0 var(--space-1, 8px);
}

/* Заголовок-выгода. Он, а не имя модели, отвечает на «что мне с этого» —
   и поэтому набран крупнее подзаголовков и стоит сразу под именем. */
.kartochka .kt-vygoda {
  font-size: var(--fs-lead, 1.25rem);
  line-height: var(--lh-lead, 1.5);
  color: var(--kt-ink);
  margin: 0 0 var(--space-2, 16px);
  max-width: var(--measure, 65ch);
}

.kartochka .kt-artikul {
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--kt-muted);
  margin: 0 0 var(--space-2, 16px);
}
/* Клеймо года основания — внутри строки марки, поэтому высоту карточки не
   меняет (04.09.2026). Прописные и разрядка сняты намеренно: сама строка
   набрана капителью с разрядкой .22em, и «EST. 1949» в ней читалось бы как
   очередная характеристика товара, а не как клеймо производителя. */
.kartochka .kt-znachki .kt-osnovan {
  margin: 0 0 .7em;
  font-size: .92em;
  letter-spacing: .04em;
  opacity: .78;
}
.kartochka .kt-znachki .kt-osnovan span {
  text-transform: none;
  letter-spacing: .02em;
}
.kartochka .kt-artikul span { margin-right: .5em; }

.kartochka .kt-foto {
  margin: 0 0 var(--space-3, 24px);
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  background: var(--kt-paper);
}
.kartochka .kt-foto img { display: block; width: 100%; height: auto; }

/* СНИМКА НЕТ. У 533 моделей витрины HOME из 702 фотографии пока нет вовсе, и с
   30.08.2026 страница есть у каждой из них. Пустая рамка обещала бы снимок,
   битая картинка читалась бы как сломанный сайт — вместо обеих рисуется
   пластина с именем марки (kartochka.js::пластина). Приём и вид те же, что у
   подборщика (.pb-bez-foto): он уже стоит на живом и уже узнаваем.

   ПЛАСТИНА НИЗКАЯ, И ЭТО ИСПРАВЛЕНИЕ ПЕРВОЙ РЕДАКЦИИ. Сначала ей была задана
   доля ширины 4/3 — «пусть занимает место будущей фотографии». На телефоне
   вышло ровно то, что Айгуль запретила 28.08.2026 словами «все размашистые
   места плотнее — чтоб не скроллить клиенту»: пустой прямоугольник занимал
   треть экрана и уводил цену и наличие под сгиб. Проверено глазами на 375 px
   30.08.2026.

   Место будущей фотографии беречь незачем: снимок появится вместе с пересборкой
   витрины, и страница перестроится вся. Пластина говорит одно — «вещь наша,
   марка такая, снимка пока нет» — и на это хватает полосы. */
.kartochka .kt-foto--bez {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--space-2, 16px) 0;
  border: 1px solid var(--kt-line);
}
.kartochka .kt-foto--bez .kt-marka {
  font-size: var(--fs-label, .75rem);
  font-weight: 700;
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--kt-muted);
  padding: 0 var(--space-2, 16px);
  text-align: center;
}

/* Марка, линия и исполнение под именем модели. Служебная метка, не заголовок:
   набор тот же, что у артикула и наличия, — красная строка ей не ставится. */
.kartochka .kt-brend {
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--kt-muted);
  margin: 0 0 var(--space-2, 16px);
}

/* ── Галерея снимков ────────────────────────────────────────────────────────
   Появляется только у моделей, где кадров больше одного (см. Р["снимок"] в
   kartochka.js). У модели с одним снимком ни один селектор отсюда не
   срабатывает, и карточка выглядит ровно как до 30.08.2026.

   Миниатюры лежат ВНУТРИ .kt-foto, на той же бумаге и под тем же скруглением,
   поэтому снимок и его кадры читаются как одна вещь, а не как картинка и
   отдельная полоска под ней.

   Полоса плотная намеренно. Замечание Айгуль 28.08.2026 про «размашистость»
   относилось к окошкам вариантов, но действует и здесь: пять кадров рыхлой
   лентой съедают экран телефона до того, как читающая дойдёт до текста.
   Высота 64 px — это ниже кнопки выбора, но здесь она и не нужна больше:
   палец попадает по площади всей миниатюры, а не по её краю. */
.kartochka .kt-galereya {
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.kartochka .kt-kadr {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--kt-line, #e3e0da);
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  /* Прозрачная рамка выбора стоит ЗАРАНЕЕ: без неё выбранный кадр в момент
     нажатия становится на 2 px больше и вся лента дёргается. */
  outline: 2px solid transparent;
  outline-offset: 1px;
}
/* МИНИАТЮРА ПОКАЗЫВАЕТ ВЕСЬ КАДР, А НЕ ЕГО СЕРЕДИНУ. Первая редакция резала
   кадр по центру, как плитка витрины. Айгуль посмотрела живую страницу
   31.08.2026 и сказала про плед: «второе фото не квадрат[ное], [как] в первом»
   — ряд миниатюр читался разноформатным.

   Причина не в разметке: обе плитки были одного размера и с одним правилом.
   Резала подача. Главный снимок вписан ЦЕЛИКОМ (.kt-foto img: height auto), а
   миниатюра того же снимка показывала 58 % его высоты у первого кадра и 49 % у
   второго — сколько именно, зависело от того, как высок сам файл. Миниатюра
   обещала не тот кадр, который открывается по нажатию, и обещала каждый раз
   по-разному.

   Снимки галерей витрины HOME идут от 0.565 до 2.228 по отношению сторон
   (замер 31.08.2026, 119 файлов у 56 моделей): 49 портретных, 13 квадратных,
   57 альбомных. Ни одна фиксированная доля не подойдёт им всем — значит
   одинаковой должна быть не доля кадра, а рамка вокруг него. Отсюда contain:
   правило вписывания одно на все кадры, и оно то же, что у главного снимка.

   Квадрат, а не прежние 86×64. В квадрате поле вокруг узкое и для высокого
   кадра, и для широкого; в прежней альбомной плитке портретный снимок (а их
   почти половина) висел узкой полоской посреди пустой рамки. Высота 64 px
   оставлена прежней намеренно: полоса кадров сохраняет высоту 80 px, и высоты
   страниц не сдвигаются — эталон плотности не трогается.

   Побочно вылечено то, ради чего галерея и заводилась: у пледа COTTON NATURE
   три миниатюры при резке читались тремя одинаковыми бежевыми пятнами, теперь
   в них видно сложенный плед, плед с игрушкой и край с обмёткой. */
.kartochka .kt-kadr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kartochka .kt-kadr--vybran {
  outline-color: var(--kt-accent, #8a6d3b);
  border-color: var(--kt-accent, #8a6d3b);
}
/* Клавиатуре видно, где она находится, даже на невыбранном кадре. */
.kartochka .kt-kadr:focus-visible { outline-color: var(--kt-accent, #8a6d3b); }

@media (hover: hover) {
  .kartochka .kt-kadr:hover { border-color: var(--kt-accent, #8a6d3b); }
}

/* ── Ролик в галерее ────────────────────────────────────────────────────────
   Заведено 09.09.2026: до этого дня движок карточки слова «видео» не знал
   вовсе — не «плохо показывал», а не показывал. Ролик встаёт в ту же ленту
   миниатюр, что и снимки, и открывается в той же рамке: отдельным блоком
   внизу страницы его увидела бы только та, кто долистала.

   ВЫСОТА ОГРАНИЧЕНА, И ЭТО НЕ ПРИДИРКА. Главный снимок вписан во всю ширину
   рамки (.kt-foto img: width 100%), а на широком экране это 1136 px. Ролик
   09:16, растянутый по тому же правилу, вышел бы 2020 px высотой — вдвое выше
   квадратного снимка, который он заменяет, и страница прыгала бы на пол-экрана
   при каждом нажатии на кадр. Поэтому ширина не задана вовсе: ролик берёт свой
   собственный размер и упирается в потолок высоты, оставаясь ниже снимка. На
   высоту страницы при загрузке это не влияет никак — до нажатия в рамке стоит
   снимок, ролик появляется на его место.

   Чёрная подложка — под сам кадр, пока грузится постер. Она же поле по бокам
   на широком экране: ролик вертикальный, рамка альбомная, и серая бумага
   карточки в этом просвете читалась бы как обрезанное видео.

   ПОЛ У ПОТОЛКА ОБЯЗАТЕЛЕН. Первая редакция стояла на `min(70vh, 620px)` без
   нижней границы, и на коротком окне (телефон, положенный набок; окно в пол-
   экрана) 70vh давало ролик высотой в палец. Замер 09.09.2026: при нулевой
   высоте окна вычисленный max-height был ровно 0 — то есть в пределе видео
   исчезало совсем, оставив пустую рамку. max() держит 320 px при любом окне:
   ниже этого ролик уже не смотрят, а прокрутка на короткой странице дешевле,
   чем кадр, в котором ничего не разобрать. */
.kartochka .kt-video {
  display: block;
  max-width: 100%;
  max-height: max(320px, min(70vh, 620px));
  margin: 0 auto;
  background: var(--kt-video-fon);
}

/* Значок проигрывания. Нужен потому, что миниатюрой ролика служит его постер —
   обычный кадр, и без значка он в ленте неотличим от фотографии: посетитель
   нажимает, ожидая снимок, и получает проигрыватель. Голосовому доступу
   значок не виден (aria-hidden) — там то же самое говорит слово «Ролик:» в
   подписи кнопки, kartochka.js::галерея. */
.kartochka .kt-kadr--rolik { position: relative; }
.kartochka .kt-kadr--rolik .kt-igra {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--kt-igra-fon);
  pointer-events: none;
}
.kartochka .kt-kadr--rolik .kt-igra::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  border: 5px solid transparent;
  border-left: 8px solid var(--kt-igra-strelka);
  border-right: 0;
}

/* ── Окошки вариантов ───────────────────────────────────────────────────────
   Стоят ДО текста и до справочной строки — правило 8 ТОН-КАРТОЧЕК-HOME.md:
   от выбора меняются числа, и в конце страницы читающая увидела бы цифры не от
   своего варианта. Выбранное отмечено заливкой и рамкой сразу: одной заливки
   мало там, где страницу смотрят в тёмной теме. */
/* Плотно. Замечание Айгуль 28.08.2026 по карточке CHALET: «размеры слишком
   размашистые». У одеяла пять размеров, у матраса семь — на телефоне рыхлые
   кнопки занимали пол-экрана до того, как читающая дошла до текста. Кегль,
   поля и просветы уменьшены; трогать высоту касания ниже 40 px нельзя — по
   мелкой кнопке пальцем не попасть, и «плотнее» превратилось бы в «не
   нажимается». Здесь 38–40 px с учётом рамки. */
.kartochka .kt-okoshki {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 var(--space-2, 16px);
}
.kartochka .kt-okoshko { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kartochka .kt-okoshko-pole {
  flex: 0 0 100%;
  font-size: var(--fs-label, .75rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kt-muted);
  margin-bottom: 2px;
}
.kartochka .kt-var {
  font: inherit;
  font-size: .9rem;
  line-height: 1.2;
  padding: 9px 12px;
  /* Обычный --kt-line здесь не годится: замер уплотнения 29.08.2026 нашёл
     контраст рамки к фону 1.1:1 в светлой теме и 1.44:1 в тёмной при норме
     ≥3:1 для границы органа управления (WCAG 1.4.11) — кнопка держалась не
     рамкой, а тем, что внутри есть текст. Затемнено/осветлено локально
     подмесом --kt-ink, а не новым цветом и не правкой общего --kt-line —
     после подмеса 3.49:1 (светлая) и 5.04:1 (тёмная), проверено живьём. */
  border: 1px solid color-mix(in srgb, var(--kt-line) 55%, var(--kt-ink) 45%);
  border-radius: 10px;
  background: transparent;
  color: var(--kt-ink);
  cursor: pointer;
}
.kartochka .kt-var:hover { border-color: var(--kt-accent); }
.kartochka .kt-var.on {
  border-color: var(--kt-accent);
  border-width: 2px;
  background: var(--kt-paper);
  color: var(--kt-ink);
  font-weight: 700;
}

.kartochka .kt-cena {
  font-size: var(--fs-num, 2rem);
  font-weight: var(--fw-num, 300);
  line-height: var(--lh-num, 1);
  margin: 0 0 var(--space-1, 8px);
}
/* Оглавление списка всего товара (public/tovar/index.html). Разделов десять,
   строк семьсот — без оглавления человек с телефона до своего раздела не
   доскроллит. Лента метками в одну-две строки: высоты странице она почти не
   добавляет (требование Айгуль 28.08.2026 — «все размашистые места плотнее,
   чтоб не скроллить клиенту»). */
.kartochka .kt-spisok-navigaciya {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-3, 24px);
}
.kartochka .kt-spisok-navigaciya a {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  padding: 8px 14px;
  border: 1px solid var(--kt-line);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kt-ink);
}
.kartochka .kt-spisok-navigaciya a b {
  font-weight: 400;
  color: var(--kt-muted);
}

/* Свёрнутый раздел списка всего товара. Раскрытый список из семисот строк
   давал 61 экран прокрутки на телефоне (замер 30.08.2026) — Айгуль такое
   запретила прямо. Треугольник браузера убран: строка раздела и так читается
   как кнопка, а стрелка в этой типографике выглядит чужой.

   ОТДЕЛЬНЫЙ ОТСТУП СНИЗУ — не только padding строки. Элемент несёт ещё и
   класс `.kt-blok` (общий для всех сворачиваемых блоков карточки — FAQ,
   спецификация), а у него своя нижняя граница `var(--space-3, 24px)` — на
   своём месте оправданная, но у списка ИЗ ДЕСЯТИ строк подряд она даёт
   вторую порцию воздуха поверх первой. Правится здесь точечно (выше
   специфичность класса `.kt-blok`), не в самом `.kt-blok` — того же
   отступа у FAQ и спецификации никто не трогает, замечание Айгуль 01.09.2026
   было именно про список разделов на `/tovar/`. Тоже нижняя граница шкалы —
   тот же принцип, что у padding строки чуть ниже. */
.kartochka details.kt-spisok-razdel {
  /* У СВЁРНУТОГО раздела отступа снизу нет вовсе: строки и так разделены линией,
     а одиннадцать восьмипиксельных промежутков — это ещё один экран прокрутки на
     ровном месте. Отступ возвращается только раскрытому, чтобы список товаров не
     лип к следующему разделу. 04.09.2026, замечание Айгуль про /tovar/. */
  margin-bottom: 0;
}
.kartochka details.kt-spisok-razdel[open] {
  margin-bottom: var(--space-2, 16px);
}
/* КЕГЕЛЬ СТРОКИ — не --fs-h3. На HOME этот токен переопределён в 1.75rem (28 px)
   при каноне бренда 18–22; расхождение записано в home.css замером 17.08.2026 с
   пометкой «ждёт решения Айгуль» и с тех пор так и стояло. Одиннадцать разделов
   этим кеглем не помещались на экран, и список читался как выпадающее меню, а не
   как каталог — замечание Айгуль 04.09.2026 на живом /tovar/: «так размашисто, что
   не попадаю на экран, как гамбургер или выпадающий список выглядит».
   Здесь берётся --fs-lead (16.8–20 px) — ступень внутри канона. Сам --fs-h3 не
   трогается: он держит заголовки всего сайта, и его правка — отдельное решение. */
.kartochka details.kt-blok.kt-spisok-razdel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: var(--space-1, 8px) 0;
  border-bottom: 1px solid var(--kt-line);
  font-size: var(--fs-lead, 1.125rem);
  line-height: 1.35;
  font-weight: var(--fw-h1, 300);
}
.kartochka details.kt-blok.kt-spisok-razdel > summary::-webkit-details-marker { display: none; }
.kartochka details.kt-blok.kt-spisok-razdel > summary b {
  font-size: var(--fs-label, .75rem);
  font-weight: 400;
  letter-spacing: var(--tr-label, .22em);
  color: var(--kt-muted);
}
.kartochka details.kt-blok.kt-spisok-razdel[open] > summary { border-bottom-color: transparent; }

/* МЕСТО ПОД АКЦИЮ. Файла акций ещё нет (kartochka.js::акция — договор описан
   там), и ни один селектор ниже сегодня не срабатывает. Стоят они здесь для
   того, чтобы сессия акций завела файл, а не переверстала карточку.
   Старая цена — зачёркнутая и приглушённая, рядом с новой на одной строке:
   две цены столбиком читаются как две разные вещи. */
.kartochka .kt-cena-bylo {
  font-size: var(--fs-lead, 1.25rem);
  color: var(--kt-muted);
  margin-right: .4em;
}

.kartochka .kt-cena small {
  display: block;
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--kt-muted);
  margin-top: 6px;
}

/* Наличие отвечает «есть или нет», а не «сколько»: число штук на витрине не
   показывается нигде (решение Айгуль 26.08.2026). */
.kartochka .kt-nalichie {
  display: inline-block;
  font-size: var(--fs-label, .75rem);
  letter-spacing: .06em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--kt-line);
  color: var(--kt-muted);
  margin: 0 0 var(--space-3, 24px);
}
.kartochka .kt-nalichie.est { border-color: var(--kt-accent); color: var(--kt-ink); }

/* ── Текстовые блоки ────────────────────────────────────────────────────────
   Ширина строки ограничена --measure: длинная строка на широком экране
   читается тяжелее короткой, сколько бы места ни было. */
/* ── РИТМ РАЗДЕЛОВ ──────────────────────────────────────────────────────────
   Требование Айгуль 28.08.2026: «шрифт в разделах по правилам мировым вёрстки,
   важное — жирным, глаз должен идти по тексту как привязанный».

   Держится тремя приёмами, а не украшением:

   1. ПРАВИЛО БЛИЗОСТИ. Отбивка ПЕРЕД заголовком заметно больше, чем после
      него: заголовок принадлежит своему тексту, а не предыдущему. Раньше
      отступы сверху и снизу были равны, и раздел читался как оторванный.
   2. ВХОД В РАЗДЕЛ. Первый абзац после заголовка крупнее остальных. Глазу
      нужна точка, с которой начать; дальше кегль падает до основного, и
      чтение идёт вниз само.
   3. ДЛИНА СТРОКИ. 65 знаков (--measure). Строка длиннее сбрасывает глаз на
      обратном ходе, и читатель теряет место — сколько бы ни было ширины. */
.kartochka .kt-blok { margin: 0 0 var(--space-3, 24px); }
.kartochka .kt-blok h2 {
  font-size: var(--fs-h3, 1.25rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
  letter-spacing: var(--tr-h3, -.01em);
  margin: var(--space-4, 40px) 0 10px;
}
.kartochka .kt-blok p {
  max-width: var(--measure, 65ch);
  margin: 0 0 var(--space-2, 16px);
}
.kartochka .kt-blok h2 + p {
  font-size: var(--fs-lead, 1.125rem);
  line-height: var(--lh-lead, 1.5);
}
/* Первый блок карточки идёт сразу под окошками, своего заголовка у него нет —
   отбивку сверху ему добавлять не за чем. */
.kartochka .kt-blok:first-of-type > p:first-child {
  font-size: var(--fs-lead, 1.125rem);
  line-height: var(--lh-lead, 1.5);
}

/* Важное — жирным. Выделение обязано быть ВИДНЫМ: полутон вместо контраста
   читается как случайность вёрстки, и глаз мимо него проходит. Поэтому вес
   плюс цвет основного текста, а не приглушённый. */
.kartochka .kt-blok b,
.kartochka .kt-spravka b,
.kartochka .kt-prosba b {
  font-weight: 700;
  color: var(--kt-ink);
}

/* ── ПОДЛОЖКА ───────────────────────────────────────────────────────────────
   Замечание Айгуль 28.08.2026: «подложки под текст не сделала под какой-нибудь
   абзац или раздел». Подложка — не украшение: она делит длинную карточку на
   куски, за которые цепляется глаз, и говорит «это другой разговор».

   Подложены ровно два блока, и оба выбраны не наугад:
     · уход и стирка — то, что читают ПЕРЕД покупкой и ищут ПОСЛЕ неё, когда
       возвращаются на страницу с вопросом «а как стирать»;
     · справочная строка — свод фактов, единственное место карточки, куда
       смотрят, чтобы проверить.

   Больше двух подложек на карточку не ставить: когда выделено всё, не выделено
   ничего, а страница начинает выглядеть полосатой. */
.kartochka .kt-gigiena {
  background: var(--kt-paper);
  border-radius: var(--radius-block, 20px);
  padding: var(--space-3, 24px) var(--space-3, 24px) 10px;
  margin-top: var(--space-3, 24px);
}
.kartochka .kt-gigiena h2 { margin-top: 0; }

.kartochka .kt-spravka {
  max-width: var(--measure, 65ch);
  padding: var(--space-3, 24px);
  background: var(--kt-paper);
  border-radius: var(--radius-block, 20px);
  color: var(--kt-ink);
  margin: 0 0 var(--space-3, 24px);
}

.kartochka .kt-prosba {
  max-width: var(--measure, 65ch);
  font-size: var(--fs-lead, 1.25rem);
  line-height: var(--lh-lead, 1.5);
  margin: 0 0 var(--space-3, 24px);
}

/* Таблицы — своя полоса прокрутки. Сетка «размер · цвет · артикул · цена» у
   полотенца AQUANOVA это 54 строки и пять колонок: на телефоне она обязана
   ехать внутри себя, а не растягивать страницу вбок. */
.kartochka .kt-tabl { overflow-x: auto; margin: 0 0 var(--space-2, 16px); }
.kartochka .kt-tabl table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.kartochka .kt-tabl th, .kartochka .kt-tabl td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--kt-line);
  white-space: nowrap;
}
.kartochka .kt-tabl th {
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--kt-muted);
  font-weight: var(--fw-label, 500);
}

.kartochka .kt-spec { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 8px 20px; margin: 0; }
.kartochka .kt-spec dt { color: var(--kt-muted); font-size: .95rem; }
.kartochka .kt-spec dd { margin: 0; }

/* Знак сертификата. Номер лицензии не показывается никогда — видно знак и
   проверяемую ссылку на реестр (решение Айгуль 23.08.2026). */
.kartochka .kt-znak {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: var(--space-2, 16px);
  border: 1px solid var(--kt-line);
  border-radius: var(--radius-btn, 12px);
}
.kartochka .kt-znak span { color: var(--kt-muted); font-size: .95rem; }
.kartochka .kt-znak a { color: var(--kt-accent); }

.kartochka details.kt-blok > summary {
  cursor: pointer;
  font-size: var(--fs-h3, 1.25rem);
  font-weight: var(--fw-h3, 500);
  margin-bottom: var(--space-2, 16px);
}

.kartochka .kt-raschet { margin: 0 0 var(--space-3, 24px); }
.kartochka .kt-raschet input {
  font: inherit; width: 6em; margin: 0 6px;
  padding: 6px 10px; border: 1px solid var(--kt-line); border-radius: var(--radius-btn, 12px);
  background: transparent; color: inherit;
}
.kartochka .kt-raschet small { display: block; margin-top: 4px; color: var(--kt-muted); }

/* ── Форма запроса ──────────────────────────────────────────────────────────
   Поля в столбец: форма в две колонки на телефоне складывается всё равно, а на
   широком экране лишняя ширина поля телефона ничего не даёт. */
/* Форма запроса. Уплотнена 28.08.2026 по замечанию Айгуль «уменьшить по
   высоте, плотнее».

   Числа берутся из общих значений (--space-*), а не подгоняются своими:
   плотностью трёх сайтов занимается отдельная работа, и собственное число
   здесь означало бы, что её правка эту форму не достанет. Ровно та причина,
   по которой сайт не переобъявляет --space-section своим значением.

   На широком экране поля встают в ряд: телефон и согласие рядом занимают одну
   строку вместо двух. На телефоне складываются обратно — там ряд не помещается
   и дал бы поля в половину пальца. */
.kartochka .kt-zapros { max-width: var(--measure, 65ch); }
.kartochka .kt-zapros form {
  display: flex; flex-direction: column; gap: 10px;
}
/* Заголовок формы заявки — служебный, не редакционный: остальные h2 карточки
   набраны крупным Playfair Display (глобальное правило h1,h2,h3 на сайте),
   этот идёт мельче и в шрифте текста, как ярлык поля, а не заголовок статьи.
   Правка по слову Айгуль 28.08.2026. */
.kartochka .kt-zapros h2 {
  margin-top: var(--space-3, 24px);
  font-family: var(--sans, inherit);
  font-size: var(--fs-cap, 1rem);
  font-weight: 600;
}
.kartochka .kt-zapros > p { margin-bottom: 10px; }
.kartochka .kt-zapros label { display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-label, .75rem); letter-spacing: .12em;
  text-transform: uppercase; color: var(--kt-muted); }
/* Подсказка перед двумя полями замера у кроватей (kartochka.js::Р["запрос"],
   08.09.2026) — обычный текст, не подпись поля: строчные буквы, без
   letter-spacing формы. */
.kartochka .kt-zamer-podskazka {
  font-size: var(--fs-small, .875rem); line-height: 1.5; color: var(--kt-muted);
  text-transform: none; letter-spacing: 0; margin: 0 0 4px;
}
@media (min-width: 641px) {
  .kartochka .kt-zapros form { flex-direction: row; flex-wrap: wrap; align-items: end; }
  .kartochka .kt-zapros label:not(.kt-soglasie) { flex: 1 1 200px; }
  .kartochka .kt-zapros .kt-knopka { flex: 0 0 auto; }
  .kartochka .kt-zapros .kt-soglasie,
  .kartochka .kt-zapros .kt-zamer-podskazka { flex: 1 1 100%; }
}
.kartochka .kt-zapros input[type="text"],
.kartochka .kt-zapros input:not([type]),
.kartochka .kt-zapros input[type="tel"] {
  font: inherit; text-transform: none; letter-spacing: 0; color: var(--kt-ink);
  /* 10 px по вертикали — поле остаётся 42 px высотой вместе с рамкой. Ниже
     40 px опускать нельзя: по такому полю на телефоне не попасть пальцем. */
  padding: 10px 14px; border: 1px solid var(--kt-line);
  border-radius: 10px; background: transparent;
}
.kartochka .kt-soglasie {
  flex-direction: row; align-items: flex-start; gap: 10px;
  text-transform: none; letter-spacing: 0; font-size: .9rem;
}
.kartochka .kt-knopka {
  font: inherit; padding: 12px 22px; border: 0; cursor: pointer;
  border-radius: 10px;
  background: var(--kt-accent); color: var(--kt-fon);
}
.kartochka .kt-status { margin: 0; font-size: .95rem; }
.kartochka .kt-status.err { color: var(--color-error, var(--kt-zapas-err)); }
.kartochka .kt-status.ok  { color: var(--color-success, var(--kt-zapas-ok)); }

.kartochka .kt-net { padding: var(--space-5, 64px) 0; text-align: center; }

/* Список карточек — public/tovar/index.html. Имя модели и выгода в одной
   строке-ссылке: по имени человек узнаёт товар, по выгоде понимает, зачем
   заходить. Одного имени в списке мало — «COMO KS» ни о чём не говорит тому,
   кто марку видит впервые. */
.kartochka .kt-spisok { list-style: none; margin: 0; padding: 0; }
.kartochka .kt-spisok li { border-bottom: 1px solid var(--kt-line); }
.kartochka .kt-spisok a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: var(--space-2, 16px) 0;
  color: var(--kt-ink); text-decoration: none;
}
.kartochka .kt-spisok a:hover { color: var(--kt-accent); }
.kartochka .kt-spisok b { font-weight: var(--fw-h3, 500); }
.kartochka .kt-spisok span { color: var(--kt-muted); }

/* Экран телефона: боковой отступ меньше, крупная цена не переносится. */
@media (max-width: 640px) {
  .kartochka { padding: var(--space-3, 24px) 20px var(--space-4, 40px); }
  .kartochka .kt-spec { grid-template-columns: 1fr; gap: 2px 0; }
  .kartochka .kt-spec dd { margin-bottom: 10px; }
}


/* ═══ ВХОД С САЙТА ═══════════════════════════════════════════════════════════
   Плитка «карточки этого раздела» на тематических страницах. Разметку собирает
   sync_kartochka.py между маркерами, руками её не пишут.

   ОДНА ЛЕНТА, А НЕ СЕТКА. Требование Айгуль 28.08.2026: «все размашистые места
   плотнее — чтоб не скроллить клиенту по большим страницам». Главная HOME и без
   того девять экранов телефона. Лента прокручивается вбок и добавляет странице
   один экран максимум — сетка в три ряда добавила бы три.

   СНИМОК, А НЕ СТРОКА. Второе её требование того же дня: «люди не читают, им
   нужны понятные картинки или иконки». Поэтому плитка начинается снимком, и он
   крупнее подписи. */
.kt-vhod {
  --kt-ink:    var(--ink,   var(--color-ink,     var(--kt-zapas-ink)));
  --kt-muted:  var(--muted, var(--color-muted,   var(--kt-zapas-muted)));
  --kt-line:   var(--line,  var(--color-line,    var(--kt-zapas-line)));
  --kt-paper:  var(--paper, var(--color-cream-2, var(--kt-zapas-paper)));
  --kt-accent: var(--gold,  var(--color-gold,    var(--kt-zapas-accent)));
  padding: var(--space-4, 40px) 0;
  color: var(--kt-ink);
}
.kt-vhod .wrap { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 0 var(--gutter, 32px); }

.kt-vhod-shapka {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: var(--space-2, 16px);
}
.kt-vhod-shapka .eyebrow {
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--kt-muted);
}
.kt-vhod-shapka a { color: var(--kt-accent); text-decoration: none; white-space: nowrap; }

/* Лента. На широком экране плитки просто встают в ряд; когда их станет больше,
   чем помещается, ряд начнёт прокручиваться — и от девятой карточки вёрстка не
   поедет. Полосу прокрутки не прячем: невидимая прокрутка не читается как
   прокрутка, и половина посетителей до дальних плиток не доберётся. */
.kt-vhod-lenta {
  display: flex; gap: var(--space-2, 16px);
  list-style: none; margin: 0; padding: 0 0 12px;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.kt-vhod-lenta li { flex: 0 0 min(240px, 62vw); scroll-snap-align: start; }
.kt-vhod-lenta a {
  display: flex; flex-direction: column; gap: 6px;
  color: inherit; text-decoration: none;
}
.kt-vhod-lenta img {
  /* height:auto обязателен. У <img> проставлены width/height атрибутами — они
     держат место до загрузки и не дают странице прыгать, — но пока высота
     задана числом, aspect-ratio не действует: картинка берёт 450 px из
     атрибута и плитка вырастает вдвое. Поймано замером 28.08.2026. */
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card, 16px);
  background: var(--kt-paper);
  margin-bottom: 4px;
}
.kt-vhod-lenta b { font-weight: var(--fw-h3, 500); }
.kt-vhod-lenta span { color: var(--kt-muted); font-size: .95rem; line-height: 1.35; }
.kt-vhod-lenta a:hover b { color: var(--kt-accent); }

@media (max-width: 640px) {
  .kt-vhod { padding: var(--space-3, 24px) 0; }
  .kt-vhod .wrap { padding: 0 20px; }
}