(kartochka.js больше не оборачивает его в
` после заголовка блока,
и правило «вход в раздел» (`.kt-blok h2 + p`) поднимало его до --fs-lead,
17.92px. Вместе с кеглем росла и линейка: `--measure` задан в `ch`, а `ch`
считается от размера шрифта элемента, — 713px у клейма против 637px у
характеристик. Правило про вход в раздел написано для прозы: там крупный
первый абзац даёт глазу точку старта. Строке из двух слов стартовать
некуда. */
font-size: var(--fs-body, 1rem);
line-height: var(--lh-body, 1.55);
}
/* Две строки подряд — линейка между ними одна, а не две вплотную. */
.kartochka .kt-znachki .kt-osnovan + .kt-znak { border-top: 0; }
.kartochka .kt-znak {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: 4px var(--space-2, 16px);
}
.kartochka .kt-znak span { color: var(--kt-muted); }
.kartochka .kt-znak a { color: var(--kt-accent); }
/* ПОДПИСЬ РАЗДЕЛА ФАКТОВ — капитель, не заголовок.
Кегль h3 над одной серой строкой обещает содержание, которого нет. Капитель
в цвете текста ставит раздел выше метки поля (та приглушена) и ниже прозы
карточки — ровно то место, которое ему отведено профилем витрины: «порядок
ведёт эмоция, число подтверждает».
Красная строка снята: она стоит на абзацах и заголовках прозы, а над листом
фактов служебная метка с отступом читается как сбитая вёрстка — исключение
названо в самом правиле красной строки выше по файлу.
Выбор по `:has()`, а не по классу: роли «спецификация» и «варианты» дают
классы кириллицей (`kt-спецификация`) — известный дефект движка, который
чинится отдельной правкой kartochka.js с пересборкой разметки. Здесь он не
нужен: блок опознаётся по своему содержимому. `:not(:has(> p))` отсекает
прозаические разделы с таблицей внутри — у них заголовок остаётся заголовком.
`.kt-znachki > h2` намеренно стоит в ОДНОМ списке с `:has()`-строками, хотя
своего класса ему хватило бы. Браузер, не знающий `:has()`, выбрасывает
правило целиком — и тогда все три подписи разом возвращаются к прежнему
заголовочному виду. Разнеси я их по разным правилам, на таком браузере одна
подпись осталась бы капителью, а две — заголовками: откат вразнобой хуже
отката целиком. `:has()` понимают Chrome с 105-го и Safari с 15.4 (март
2022), так что откат — страховка, а не рабочий случай. */
.kartochka .kt-znachki > h2,
.kartochka .kt-blok:has(> .kt-spec) > h2,
.kartochka .kt-blok:has(> .kt-tabl):not(:has(> p)) > h2,
.kartochka details.kt-blok:has(> .kt-spec) > summary,
.kartochka details.kt-blok:has(> .kt-tabl) > summary {
font-size: var(--fs-label, .75rem);
font-weight: var(--fw-label, 500);
line-height: var(--lh-label, 1.3);
letter-spacing: var(--tr-label, .22em);
text-transform: uppercase;
text-indent: 0;
color: var(--kt-ink);
}
.kartochka .kt-znachki > h2,
.kartochka .kt-blok:has(> .kt-spec) > h2,
.kartochka .kt-blok:has(> .kt-tabl):not(:has(> p)) > h2 {
margin: var(--space-4, 40px) 0 var(--space-1, 8px);
}
.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);
}
/* Свёрнутая спецификация — тот же лист фактов, только под треугольником.
Поле по 12px сверху и снизу держит палец: капитель сама по себе даёт строку
в 16px, а по стандарту доступности нажимаемое место не меньше 40px. */
.kartochka details.kt-blok:has(> .kt-spec) > summary,
.kartochka details.kt-blok:has(> .kt-tabl) > summary {
padding: 12px 0;
margin: var(--space-3, 24px) 0 0;
border-top: 1px solid var(--kt-line);
}
/* Ограничение ставится на сам `details`, а не на `summary`: `--measure` задан
в `ch`, а у подписи кегль лейбла — её собственные 65ch дали бы 478px вместо
637px, и линейка свёрнутого раздела кончалась бы на треть раньше соседних. */
.kartochka details.kt-blok:has(> .kt-spec),
.kartochka details.kt-blok:has(> .kt-tabl) { max-width: var(--measure, 65ch); }
.kartochka details.kt-blok:has(> .kt-spec)[open] > summary,
.kartochka details.kt-blok:has(> .kt-tabl)[open] > summary { margin-bottom: var(--space-1, 8px); }
.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); }
/* Телефон: метка над значением, линейка одна на пару — иначе каждая строка
спецификации обрастает двумя. Ширины на две колонки здесь нет: капитель с
трекингом .22em съедает половину экрана, и значение осталось бы в щели. */
.kartochka .kt-spec { grid-template-columns: 1fr; }
.kartochka .kt-spec dt {
padding: var(--space-1, 8px) 0 0;
border-bottom: 0;
}
.kartochka .kt-spec dd { padding: 2px 0 var(--space-1, 8px); }
}
/* ═══ ВХОД С САЙТА ═══════════════════════════════════════════════════════════
Плитка «карточки этого раздела» на тематических страницах. Разметку собирает
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 обязателен. У проставлены 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; }
}
/* Подпись под кадром — только там, где кадр показывает не тот предмет.
Заведена 23.09.2026 по слову Айгуль («кадр с честной подписью») вместо
заглушки: у простыни DecoFlux WILD SAGE своей фотографии нет ни у нас, ни у
производителя — в этом цвете он снимал только пижаму, шорты и маску для сна
(проверено по его магазину: 24 простыни без резинки, 35 на резинке, 42
наволочки Solid — WILD SAGE нет ни в одной из 117). Подпись тише товарного
текста и шире кадра не бывает: она объясняет снимок, а не спорит с ним. */
.kartochka .kt-foto-podpis {
margin: 10px 0 0;
font-size: 13px;
line-height: 1.45;
color: var(--muted, #6b6b6b);
text-align: left;
max-width: 62ch;
}