/* Карточка товара KENDA, вторая раскладка. Правки Вени 24 и 25.08.2026.
   Верх: слева квадратный липкий снимок с миниатюрами ВНУТРИ него, справа
   сведения и открытые характеристики. Низ идёт ОДНОЙ колонкой: описание,
   представительство, вопросы раскрывающимся списком, ниже два ряда товаров
   теми же карточками, что в каталоге.
   Роль цены занимает размер: цен на сайте нет, а размер это то,
   по чему покрышку выбирают.

   Разметка: salient-child/woocommerce/content-single-product.php
   Данные:   mu-plugins/kenda-karta-v2.php */

.k-tovar {
	--k-holst: #f4f4f4;
	--k-panel: #ffffff;
	--k-tekst: #16181a;
	--k-tusklo: #6b7076;
	--k-liniya: #e2e4e6;
	--k-krasnyy: #c8102e;
	--k-krasnyy-nazhat: #a30d25;
	--k-radius: 12px;
	/* ⚠️ Вторичный фон и внутренняя линия по одному на всю карточку:
	   было пять близких серых, и страница выглядела собранной из кусков.
	   Замечание Кодекса 25.08.2026. */
	--k-fon2: #f8f9fa;
	--k-liniya2: #ecedef;
	--k-bystro: 140ms;
	/* ⭐⭐⭐ Сколько высоты экрана съедено до верха поля снимка: шапка,
	   крошки и запас снизу. Замер 26.08.2026: верх поля всегда на 223,
	   крошки в две строки добавляют ещё около 30. */
	/* 224 = верх карточки в потоке (217) плюс запас снизу 7. Пересчитано
	   27.08.2026 после того, как крошки поднялись: липкость держала поле на
	   прежних 268, и между крошками и полем зияла дыра в 85 вместо 34. */
	--k-nad-polem: 224px;
}

/* Холст под карточкой: панели белые, поэтому фон страницы серый.
   ⚠️ `!important` тут вынужденный. В salient-child/style.css строка 36 стоит
   старая правка `.ascend .container-wrap { background-color: #fff!important }`,
   и без такого же веса она перебивает наш фон на всех страницах товара. */
body.single-product .container-wrap {
	background-color: #f4f4f4 !important;
}

.k-tovar,
.k-tovar * { box-sizing: border-box; }

.k-tovar img { max-width: 100%; display: block; }

/* тема даёт каждому абзацу padding-bottom 27px: ритм внутри наших панелей
   задаём сами через margin, иначе между абзацами провал шире строки */
.k-tovar p { padding-bottom: 0; }

/* ------------------------------------------------------------ раскладка */
.k-tovar.product {
	color: var(--k-tekst);
	font-size: 16px;
	line-height: 1.55;
}

/* ⭐⭐ Веня 26.08.2026, вторым заходом: «фото нужно оставить размера
   как сейчас и на 4байк, а вот правую колонку как было по ширине.
   Размести фото в широком размере в поле для фото».

   Значит ширины колонок возвращаются к прежним, а мельче становится
   САМ СНИМОК внутри своего поля: поле широкое, снимок в нём 630,
   как на 4bike. Ограничение стоит у картинки (`.k-scena img`, `max-width`),
   а не у колонки. */
.k-verh {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	/* Веня выставил 5 руками в DevTools 27.08.2026. Было 30. */
	gap: 5px;
	align-items: start;
}

/* ⭐ На широком экране правая колонка шире, а не снимок больше. Причина
   замерена 25.08.2026: после перехода на ширину 4bike (содержимое 1600)
   квадратный снимок вырос до 1050 пикселей, стал выше окна (950), и
   липкости не осталось хода: она цепляется низом, а элемент выше экрана
   цепляться не может. При колонке 700 снимок встаёт в 870, помещается в окно целиком и держится низом у низа экрана. */
@media (min-width: 1600px) {
	.k-verh { grid-template-columns: minmax(0, 1fr) 700px; }
}

/* --------------------------------------------- снимок, миниатюры, лупа */
.k-scena {
	position: relative;
	margin: 0;
	background: var(--k-panel);
	border: 1px solid var(--k-liniya);
	border-radius: var(--k-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.k-scena img {
	width: 100%;
	/* ⛔⭐⭐ НЕ `height: 100%`. Высота сцены задана через `aspect-ratio`, а для
	   процентов такая высота считается НЕопределённой, и 100% ведёт себя как
	   `auto`. У вертикального снимка бокс выходил выше сцены (808 на 1077 в
	   рамке 810 на 810), `overflow: hidden` срезал верх и низ, и покупатель
	   видел кусок протектора вместо шины. Резалось 25 до 30 процентов у 48
	   товаров из 358 (замер 26.08.2026).
	   ⭐ Лечение: собственная квадратная пропорция у самой картинки. Тогда
	   `object-fit: contain` вписывает снимок в квадрат целиком.
	   ⚠️ Проверено: у горизонтальных и квадратных снимков ничего не менялось
	   ни до, ни после, срезка у них была нулевой. */
	aspect-ratio: 1 / 1;
	height: auto;
	/* ⭐⭐ Снимок не больше 630 в любом поле. Замер 4bike на 1440 дал 623,
	   и Веня попросил именно такой размер, но в широком поле.
	   ⚠️ На узких экранах ограничение не срабатывает вовсе: там поле само уже 630,
	   и снимок занимает его целиком, как и раньше. */
	max-width: 630px;
	margin: 0 auto;
	object-fit: contain;
	/* ⛔ Отступа НЕТ. Веня 26.08.2026: «что за отступы белые на фото по краям?
	   Я же просил без отступов и в миниатюрах тоже». Было 46 пикселей со всех
	   сторон, и снимок занимал заметно меньше своей рамки.
	   ⚠️ `object-fit: contain` и так не даёт картинке обрезаться: она впишется
	   в квадрат целиком, просто станет крупнее. */
	padding: 0;
	/* подложка у снимков разная: белая, #f5f5f5, #f6f6f6.
	   Дожимаем светлое до белого, иначе виден квадрат вокруг товара. */
	filter: brightness(1.06);
}

/* ⛔⭐⭐⭐ Фото должно быть видно ЦЕЛИКОМ без прокрутки.
   Веня 26.08.2026: «когда нажимаешь на фото, оно нормально помещается в
   видимую область, а сейчас фото нужно ловить прокручивая вверх вниз».
   Замер до правки: при окне 970 поле уходило за низ экрана на 123
   пикселя, при 660 сам снимок на 246.
   ⚠️ Квадрат при этом перестаёт быть квадратом: ширина остаётся от
   колонки, высота ограничена экраном. Снимок внутри центруется.
   ⛔ Только там, где две колонки: на телефоне `100vh` скачет вместе с
   адресной строкой, и поле будет прыгать при прокрутке. */
/* ⛔⭐⭐ Два режима поля, и оба нужны.

   1. От 1200: колонка широкая, поле берёт всю её ширину, а высоту
      ограничивает экран. Веня просил именно широкое поле.
   2. От 861 до 1199: колонка узкая (382 на 900), и там высота по экрану
      давала поле 382 на 675, вытянутое вверх. Там держим квадрат,
      но не выше экрана.

   ⚠️ В обоих случаях смысл один: фото видно ЦЕЛИКОМ без прокрутки.
   Веня 26.08.2026: «фото нужно ловить прокручивая вверх вниз».
   ⛔ Телефона не касается: там `100vh` скачет вместе с адресной строкой. */
@media (min-width: 1200px) {
	.k-tovar .k-scena {
		aspect-ratio: auto;
		/* ⭐⭐⭐ Меньшее из двух: сколько даёт экран и сколько разрешает
		   потолок. Потолок считает tovar.js по собственной высоте правой
		   колонки, чтобы липкости остался ход.
		   ⚠️ На мониторе высотой 1080 потолок больше экранной высоты и в
		   расчёт не входит: там всё остаётся ровно как было. Он вступает
		   в дело от 1440, где поле иначе перерастает колонку и карточка
		   перестаёт цепляться вовсе (замер `475`). */
		height: min(calc(100vh - var(--k-nad-polem)), var(--k-pole-potolok, 100vh));
		/* ⛔ Предел 810 СНЯТ 27.08.2026. Он ставился, чтобы поле не росло выше
		   своей ширины, но после перехода на два состояния именно он не давал
		   низу встать в 7 от края: на окне 970 оставалось 78 вместо 7. Веня
		   выбрал, чтобы карточка занимала экран целиком. */
		min-height: 320px;
	}
}

@media (min-width: 861px) and (max-width: 1199px) {
	.k-tovar .k-scena {
		max-height: calc(100vh - var(--k-nad-polem));
	}
}

@media (min-width: 861px) {
	.k-tovar .k-scena img {
		max-height: calc(100vh - var(--k-nad-polem));
	}
}


/* ⛔⭐⭐⭐ Пустота ПОД фото. Веня 26.08.2026: «и так тоже не красиво,
   есть ли золотая середина? Сейчас некрасиво смотрится, пустой низ под фото».

   Замер: левая колонка кончалась на 695, правая на 1054, разрыв 359.
   Пустота была не внутри поля (там воздуха всего 33), а под ним.

   ⭐ Решение: белая карточка теперь ВСЯ КОЛОНКА, а липкая сцена со
   снимком, миниатюрами и лупой едет внутри неё. Низ слева вровень
   с низом сведений, разрыва нет, а снимок остаётся на виду при прокрутке.

   ⚠️ Липкость РАБОТАЛА и до этого. Прежняя проверка врала: она
   прокручивала на 1425 пикселей, а колонка кончается на 1277, и липкий
   элемент законно уезжал вместе с родителем. Пошаговый замер показал:
   держится на 116 от прокрутки 150 до 450. Здесь мы даём ей больше хода. */
/* ⛔⭐⭐⭐ Карточка снимка стоит низом у НИЗА ЭКРАНА.

   Веня 27.08.2026, стрелка 2 на кадре: «внизу закруглённые края
   квадрата и мало пикселей до конца экрана отступ, это фиксируется
   к низу монитора, а картинка размещается по высоте и центру».

   ⭐ Арифметика, по которой всё сходится без прыжка:
   высота карточки = 100vh минус `--k-nad-полем`,
   привязка `top` = `--k-nad-полем` минус отступ снизу.
   Тогда низ = 100vh минус отступ ПРИ ЛЮБОЙ высоте окна, а сама
   привязка почти совпадает с естественным местом карточки на
   непрокрученной странице, поэтому прилипание не видно глазом.

   ⚠️ Фон и рамка вернулись САМОЙ карточке. Прежний заход отдавал их
   колонке целиком, чтобы закрыть пустоту под фото, но тогда белое
   поле уходило ниже экрана на 344 пикселя и скруглённого низа было не
   видно. Колонка остаётся растянутой, но прозрачной: она держит место
   и даёт липкости запас хода. */
@media (min-width: 861px) {
	.k-tovar .k-vitrina {
		background: transparent;
		border: 0;
		height: 100%;
	}

	.k-tovar .k-scena {
		background: var(--k-panel);
		border: 1px solid var(--k-liniya);
		border-radius: var(--k-radius);
	}

	/* низ карточки всегда в 7 пикселях от низа экрана */
	html.k-tovar-lip .k-tovar .k-scena {
		top: var(--k-tovar-lip-top, 82px);
		/* ⛔⭐⭐⭐ ПЛАВНОСТЬ ВЫСОТЫ СНЯТА 27.08.2026.
		   Веня: «всё дёргается, будто шина едет по горам». Замер `468`
		   показал, что виновата именно она: высота меняется теперь
		   непрерывно, вслед за прокруткой, и `transition` превращал
		   это ровное движение в шесть отдельных рывков со ступенями
		   до 24 пикселей. Плавность нужна скачку, а непрерывному
		   движению она мешает. */
	}
}

/* квадратная кнопка лупы в свободном углу: миниатюры стоят слева сверху */
.k-tovar button.k-lupa {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 48px;
	height: 48px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--k-liniya);
	border-radius: 9px;
	cursor: pointer;
	backdrop-filter: blur(2px);
	transition: border-color var(--k-bystro) ease-out,
	            background-color var(--k-bystro) ease-out;
}

.k-tovar button.k-lupa:hover {
	border-color: var(--k-tekst);
	background: #fff;
}

.k-lupa svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--k-tekst);
	stroke-width: 1.7;
	stroke-linecap: round;
}

.k-lupa:focus-visible {
	outline: 2px solid var(--k-krasnyy);
	outline-offset: 3px;
}

/* миниатюры лежат ПОВЕРХ снимка, слева сверху */
.k-miny {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.k-min {
	width: 74px;
	height: 74px;
	/* ⛔ Отступа НЕТ, по тому же слову Вени «и в миниатюрах тоже». Было 6. */
	padding: 0;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--k-liniya);
	border-radius: 9px;
	cursor: pointer;
	backdrop-filter: blur(2px);
	transition: border-color var(--k-bystro) ease-out;
}

.k-min img { width: 100%; height: 100%; object-fit: contain; padding: 0; filter: none; }
.k-min:hover { border-color: #9ea3a8; }
/* ⭐ Веня 26.08.2026: «ужасное обрамление миниатюр, сделай обычным».
   Было 2 пикселя против 1 у соседей, и активная выпирала из ряда.
   Толщина у всех одна, текущая отличается только цветом линии. */
.k-min--tek { border-color: var(--k-tekst); border-width: 1px; }

.k-min:focus-visible,
.k-plitka:focus-visible,
.k-knopka:focus-visible {
	outline: 2px solid var(--k-krasnyy);
	outline-offset: 3px;
}

/* ⛔ У миниатюры контур скромнее: она всего 74 пикселя, и красная линия с
   отступом в 3 читалась как вторая рамка поверх первой. Отступ убран, линия
   тоньше. Совсем снимать нельзя: это единственная подсказка для того, кто
   ходит по странице с клавиатуры. */
.k-min:focus-visible {
	outline-width: 1px;
	outline-offset: 0;
}

/* ------------------------------------- окно просмотра снимка крупно
   ⛔ Окно печатается в подвале страницы, ВНЕ `.k-tovar`: внутри карточки
   `position: fixed` цепляется за предка с трансформацией. Поэтому здесь
   нельзя опираться ни на переменные `--k-*`, ни на предка `.k-tovar`. */
.k-okno-foto[hidden] { display: none; }

.k-okno-foto {
	position: fixed;
	inset: 0;
	/* окно должно лежать выше липкой шапки темы, у неё z-index около 9000 */
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-okno-foto__fon {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 16, 0.92);
}

.k-okno-foto__telo {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 76px 96px;
}

.k-okno-foto__snimok {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	border-radius: 10px;
}

.k-okno-foto button.k-okno-foto__krest,
.k-okno-foto button.k-okno-foto__strelka {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 9px;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 140ms ease-out;
}

.k-okno-foto button.k-okno-foto__krest:hover,
.k-okno-foto button.k-okno-foto__strelka:hover {
	background: rgba(255, 255, 255, 0.26);
}

.k-okno-foto__krest { top: 18px; right: 18px; width: 48px; height: 48px; }

.k-okno-foto__strelka { top: 50%; margin-top: -28px; width: 56px; height: 56px; }
.k-okno-foto__strelka--vlevo { left: 18px; }
.k-okno-foto__strelka--vpravo { right: 18px; }

.k-okno-foto svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.k-okno-foto__krest:focus-visible,
.k-okno-foto__strelka:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.k-okno-foto__schet {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ сведения */
.k-svedeniya {
	background: var(--k-panel);
	border: 1px solid var(--k-liniya);
	border-radius: var(--k-radius);
	padding: 34px 34px 30px;
}

.k-tovar h1.k-zag {
	font-size: 32px;
	line-height: 1.16;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: var(--k-tekst);
}

.k-naznachenie {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--k-tusklo);
	margin-bottom: 22px;
}

.k-naznachenie a { color: inherit; text-decoration: none; }
.k-naznachenie a:hover { color: var(--k-krasnyy); }

.k-razmer {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Наличие слева с точкой, артикул у правого края (правка Вени 25.08.2026):
   две подписи об одном и том же товаре не должны липнуть друг к другу. */
.k-podrazmer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 10px;
	font-size: 14px;
}

.k-podrazmer > span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* точка состояния: цвет берётся от самой надписи, поэтому у «по запросу»
   она жёлтая, а у «нет» серая, и отдельных правил не нужно */
.k-podrazmer > span:first-child::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* три состояния наличия, правило Вени 24.08.2026 */
.k-est { color: #1a7f45; font-weight: 600; }
.k-zapros { color: #a06b00; font-weight: 600; }
.k-netu { color: var(--k-tusklo); font-weight: 600; }
.k-art { color: var(--k-tusklo); }

.k-deystvie {
	margin: 24px 0 28px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--k-liniya);
}

.k-tovar a.k-knopka {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 44px;
	background: var(--k-krasnyy);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color var(--k-bystro) ease-out;
}

.k-tovar a.k-knopka:hover { background: var(--k-krasnyy-nazhat); color: #fff; }

/* дилерские кнопки идут второй строкой: розница это главное действие */
.k-knopki-opt {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.k-knopki-opt .kenda-knopka {
	flex: 1 1 calc(50% - 5px);
	min-height: 48px;
	border-radius: 8px;
	font-size: 14px;
}

.k-knopki-opt .kenda-knopka:hover,
.k-knopki-opt .kenda-knopka:focus-visible {
	border-color: var(--k-krasnyy);
	color: var(--k-krasnyy);
}

.k-tovar p.k-primechanie {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--k-tusklo);
}

/* ------------------------------------------- характеристики, открыто */
.k-blok + .k-blok { margin-top: 28px; }

.k-metka {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--k-tusklo);
	margin-bottom: 12px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.k-metka span {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	font-size: 13px;
}

.k-hark { margin: 0; }

.k-har {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--k-liniya2);
	font-size: 15px;
}

.k-har:last-child { border-bottom: 0; }
.k-har dt { color: var(--k-tusklo); }
.k-har dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------ размеры */
.k-plitki {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 9px;
}

.k-tovar a.k-plitka {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 54px;
	padding: 7px;
	border: 1px solid var(--k-liniya);
	border-radius: 8px;
	text-decoration: none;
	color: var(--k-tekst);
	background: var(--k-panel);
	transition: border-color var(--k-bystro) ease-out,
	            background-color var(--k-bystro) ease-out;
}

.k-plitka__razmer {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.k-plitka__nizhe {
	font-size: 10px;
	font-weight: 500;
	color: var(--k-tusklo);
	line-height: 1.25;
	text-align: center;
}

.k-tovar a.k-plitka:hover { border-color: #9ea3a8; background: #fafafa; }

.k-tovar a.k-plitka--tek {
	border-color: var(--k-krasnyy);
	border-width: 2px;
	color: var(--k-krasnyy);
}

.k-plitka--tek .k-plitka__nizhe { color: var(--k-krasnyy); opacity: 0.75; }
.k-tovar a.k-plitka--net { color: #a8adb2; background: #fbfbfb; }
.k-plitka--net .k-plitka__razmer { text-decoration: line-through; }

/* ⛔ Прежняя двухколоночная раскладка низа (описание слева, вопросы
   справа) убрана 25.08.2026: у соседей разная высота, и под низкой
   карточкой оставалась дыра. Низ идёт одной колонкой, правила ниже. */

.k-tovar .k-niz h2 {
	margin: 0 0 18px;
	font-size: 22px;
	/* ⛔⭐⭐ Межстрочье задавать ОБЯЗАТЕЛЬНО, иначе остаётся тёмное наследство
	   темы: она пишет `body h2 { font-size: 50px; line-height: 50px }`, и
	   когда мы меняем только кегль, межстрочье продолжает быть 50.
	   Веня 30.08.2026 по кадру: «у заголовков слишком большой отступ между
	   строк». Замер: «Официальный представитель Kenda в России» при кегле 22
	   имел межстрочье 50, на телефоне вставал в три строки и занимал 150
	   пикселей вместо 82. */
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--k-tekst);
}

.k-opisanie p { margin: 0 0 14px; font-size: 15px; line-height: 1.68; color: #3d4247; }
.k-opisanie p:last-child { margin-bottom: 0; }

.k-tovar p.k-lid { font-weight: 600; color: var(--k-tekst); font-size: 16px; }

.k-vopros + .k-vopros { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--k-liniya2); }
.k-tovar .k-vopros h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--k-tekst); }
.k-vopros p { margin: 0 0 10px; font-size: 15px; line-height: 1.66; color: #3d4247; }
.k-vopros p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ похожие товары */
.k-tovar .related.products {
	margin-top: 34px;
	background: var(--k-panel);
	border: 1px solid var(--k-liniya);
	border-radius: var(--k-radius);
	padding: 30px 34px 34px;
	clear: both;
}

/* ⚠️ `#ajax-content-wrap` в селекторе не для красоты: тема задаёт
   `#ajax-content-wrap .related.products h2 { font-size: 30px }`, и без
   идентификатора наш размер проигрывает по специфичности. */
#ajax-content-wrap .k-tovar .related.products > h2 {
	margin: 0 0 22px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--k-tekst);
}

/* ------------------------------------------------------------ адаптив */
@media (max-width: 1320px) {
	.k-verh { grid-template-columns: minmax(0, 1fr) 440px; }
	.k-svedeniya { padding: 28px 26px 26px; }
	.k-tovar h1.k-zag { font-size: 28px; }
	.k-plitki { grid-template-columns: repeat(3, 1fr); }
	.k-har { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ⛔⭐⭐ Порог одной колонки понижен с 1040 до 860. На 4bike две колонки
   держатся до 768: там на 1024 снимок 404 пикселя. У нас на 1024 стояла одна
   колонка, и снимок разворачивался во всю ширину, 960 на 960. Это и был
   самый огромный случай из всех (замер 26.08.2026). */
@media (max-width: 860px) {
	.k-verh, .k-niz { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	.k-verh, .k-niz { gap: 16px; }
	.k-scena { aspect-ratio: 1 / 1; }
	.k-scena img { padding: 0; }
	.k-miny { top: 10px; left: 10px; gap: 8px; }
	.k-min { width: 56px; height: 56px; }
	.k-svedeniya, .k-opisanie, .k-faq, .k-tovar .related.products { padding: 22px 18px; }
	.k-tovar h1.k-zag { font-size: 24px; }
	.k-razmer { font-size: 28px; }
	.k-knopki-opt .kenda-knopka { flex: 1 1 100%; }
	.k-plitki { grid-template-columns: repeat(3, 1fr); }
	.k-har { grid-template-columns: minmax(0, 1fr); gap: 2px; }

	.k-tovar button.k-lupa { top: 10px; right: 10px; width: 42px; height: 42px; }
	.k-lupa svg { width: 19px; height: 19px; }

	/* на узком экране рамки окна съедали снимок: оставляем поля под кнопки */
	.k-okno-foto__telo { padding: 68px 14px 62px; }
	.k-okno-foto__krest { top: 12px; right: 12px; width: 42px; height: 42px; }
	.k-okno-foto__strelka { width: 44px; height: 44px; margin-top: -22px; }
	.k-okno-foto__strelka--vlevo { left: 8px; }
	.k-okno-foto__strelka--vpravo { right: 8px; }
	.k-okno-foto svg { width: 20px; height: 20px; }
	.k-okno-foto__schet { bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.k-tovar *, .k-scena img { transition: none !important; }
}

/* ------------------------------------------------------------------ *
 * Блок описания, новый вид (эталон, решение Вени 25.08.2026)
 *
 * Слова «Описание» нет: h2 несёт запрос с LSI словом. Подзаголовков
 * не больше двух, три на 90 слов это уже переспам. Факты идут списком
 * с точками, проверка перед покупкой отдельной карточкой с галочками.
 * Раскладка вертикальная: блок стоит в левой половине сетки `.k-niz`,
 * в две колонки внутри него текст стал бы слишком узким.
 * ------------------------------------------------------------------ */

.k-opisanie--v2 p.k-lid { margin: 0 0 18px; }

.k-tovar .k-opisanie--v2 h3 {
	margin: 22px 0 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--k-tekst);
}

.k-opisanie--v2 p { margin: 0 0 12px; }

/* факты: список с точками */
.k-opisanie--v2 ul.k-fakty { margin: 0; padding: 0; list-style: none; }

.k-opisanie--v2 ul.k-fakty li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #3d4247;
}

.k-opisanie--v2 ul.k-fakty li:last-child { margin-bottom: 0; }

.k-opisanie--v2 ul.k-fakty li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--k-krasnyy, #d0021b);
}

/* проверка перед покупкой: своя карточка, галочки вместо точек */
.k-opisanie--v2 .k-proverka {
	margin-top: 22px;
	padding: 20px 22px;
	background: #f6f6f6;
	border-radius: 12px;
}

.k-tovar .k-opisanie--v2 .k-proverka h3 { margin: 0 0 10px; }

.k-opisanie--v2 .k-proverka ul { margin: 0; padding: 0; list-style: none; }

.k-opisanie--v2 .k-proverka li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.6;
	color: #3d4247;
}

.k-opisanie--v2 .k-proverka li:last-child { margin-bottom: 0; }

/* галочка нарисована двумя границами, повёрнутыми на 45 градусов */
.k-opisanie--v2 .k-proverka li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 7px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--k-krasnyy, #d0021b);
	border-bottom: 2px solid var(--k-krasnyy, #d0021b);
	transform: rotate(-45deg);
}

@media (max-width: 767px) {
	.k-opisanie--v2 .k-proverka { padding: 16px 18px; }
	.k-tovar .k-opisanie--v2 h3 { font-size: 15px; }
}

/* ------------------------------------------------------------------ *
 * ⛔ Правка после кадра живой страницы 25.08.2026.
 *
 * Беда 1: у пунктов рисовались ДВА маркера, серая точка темы и наш
 * красный значок. `list-style: none` на `ul` тема перебивает своим
 * правилом на `li`, поэтому гасим маркер и на `li`, и через `::marker`.
 *
 * Беда 2: заголовок блока рвался на две строки с межстрочным
 * интервалом от темы, между строками зияла дыра.
 * ------------------------------------------------------------------ */

.k-tovar .k-opisanie--v2 ul,
.k-tovar .k-opisanie--v2 ul li {
	list-style: none;
}

.k-tovar .k-opisanie--v2 ul li::marker { content: ""; font-size: 0; }

.k-tovar .k-opisanie--v2 > h2 {
	line-height: 1.24;
	text-wrap: balance;
}

/* заголовок карточки проверки встаёт вровень с текстом пунктов */
.k-tovar .k-opisanie--v2 .k-proverka h3 { padding-left: 24px; }

/* ==================================================================== *
 * КАРТОЧКА, ПЕРЕДЕЛКА 25.08.2026 по правкам Вени, разбор с Codex.
 *
 * Что изменилось и почему:
 *  1. Снимок на максимуме внутри квадрата: поля были 46 пикселей, товар
 *     из-за них казался мелким. Осветление снимка убрано, оно меняло
 *     товар и съедало светлые детали.
 *  2. Левая колонка кончается там же, где правая: под квадратом стоит
 *     тянущаяся панель. Квадрат высоту менять не может, панель может.
 *  3. Сайт ОПТОВЫЙ: дилерские кнопки главные, розничное «Где купить»
 *     уходит тихой строкой. Три кнопки подряд не ставим.
 *  4. Характеристики: колонка имени стала долевой, значение больше не
 *     уезжает к правому краю.
 *  5. Внизу два ряда товаров по шесть, отступы минимальные.
 * ==================================================================== */

/* ------------------------------------------------ верх: равные низы */
.k-tovar .k-verh { align-items: stretch; }

.k-vitrina {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.k-vitrina .k-scena { flex: 0 0 auto; }

/* ------------------------------------------- снимок на максимуме */
/* ⛔ ЭТО правило и рисовало поля на деле: оно сильнее и стоит позже, чем
   `.k-scena img` в начале файла. 26.08.2026 обнуление там не дало ничего,
   замер показал прежние 22 пикселя на 1440 и 10 на 390.
   ⭐ Веня: «я же просил без отступов и в миниатюрах тоже». Полей нет.
   ⚠️ Горизонтальный снимок в квадрат всё равно впишется целиком:
   object-fit: contain не обрезает, просто оставит полосы сверху и снизу. */
.k-tovar .k-scena img {
	padding: 0;
	/* ⛔⭐⭐ Подсветка вернулась. Пока снимок занимал всё поле, его
	   собственная подложка и была фоном поля, и `none` никому не мешал.
	   С 26.08.2026 снимок меньше поля, и серая подложка исходника
	   (#f5f5f5 и #f6f6f6 у части товаров) проступила квадратом на белом.
	   1.06 дожимает 245 до 255, то есть до чистого белого. */
	filter: brightness(1.06);
}

/* миниатюры своих полей не получают */
.k-tovar .k-scena .k-min img { padding: 0; }

/* ------------------------------------------------ блок для дилеров */
/* ⭐ Веня 27.08.2026: «артикул и в наличии ровно по середине высоты».
   Замер до: над строкой 10, под ней 40, то есть она прижата к заголовку.
   Делаем поровну: 25 сверху и 25 снизу. */
.k-tovar .k-podrazmer {
	margin-top: 25px;
}

.k-opt {
	/* ⭐ Веня 27.08.2026, стрелка 3 на кадре: «увеличь расстояние»
	   между строкой наличия и блоком для дилеров. Было 22. */
	margin-top: 25px;
	padding: 20px 22px;
	background: #f6f6f6;
	border-radius: 12px;
}

.k-opt__metka {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-tusklo);
}

.k-opt__knopki {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.k-tovar .k-opt__glavnaya,
.k-tovar .k-opt__vtoraya {
	min-height: 52px;
	padding: 12px 14px;
	border: 2px solid var(--k-krasnyy, #d0021b);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.k-tovar .k-opt__glavnaya { background: var(--k-krasnyy, #d0021b); color: #fff; }
.k-tovar .k-opt__vtoraya { background: #fff; color: var(--k-krasnyy, #d0021b); }
.k-tovar .k-opt__glavnaya:hover { background: #b00016; border-color: #b00016; }
.k-tovar .k-opt__vtoraya:hover { background: #fdeef0; }

.k-opt__primechanie {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--k-tusklo);
}

/* ------------------------------------------- розница, тихая строка */
.k-roznica {
	margin: 14px 0 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	color: var(--k-tusklo);
}

/* Цена прижимается к вопросу, а не расползается по ширине: без этого
   `justify-content: space-between` растащил бы три элемента по краям и
   поставил цену в середину пустоты. */
.k-tovar .k-roznica__cena {
	margin-right: auto;
	color: var(--k-tekst, #1a1a1a);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* Розничная кнопка красная, но НЕ такая же, как дилерская: она меньше и
   без заливки, иначе спорила бы с главным действием страницы. */
.k-tovar a.k-roznica__knopka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	background: var(--k-krasnyy, #c8102e);
	border: 1px solid var(--k-krasnyy, #c8102e);
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

/* ⛔ Надпись кнопки не ломается: она короткая, а перенос читается как
   дефект вёрстки. Поймано на 390 после того, как в строку добавилась цена. */
.k-tovar a.k-roznica__knopka {
	white-space: nowrap;
	flex: none;
}

/* На узком экране трём элементам в одну строку тесно: пускаем кнопку
   на свою строку целиком, а вопрос с ценой оставляем вместе. */
@media (max-width: 600px) {
	.k-tovar .k-roznica {
		flex-wrap: wrap;
		gap: 10px 14px;
	}

	.k-tovar .k-roznica__cena {
		margin-right: auto;
	}

	.k-tovar a.k-roznica__knopka {
		width: 100%;
	}
}

.k-tovar a.k-roznica__knopka:hover {
	background: var(--k-krasnyy-nazhat, #a30d25);
	border-color: var(--k-krasnyy-nazhat, #a30d25);
	color: #fff;
}

/* --------------------------------- характеристики: ровные две колонки */
/* ⭐ Правка Вени 25.08.2026: «слишком прижаты друг к другу и справа много
   пустого места». Имя слева с двоеточием, значение уходит к ПРАВОМУ краю:
   так ширина занята содержанием, а не воздухом посередине. Строки стали
   выше на треть. */
.k-tovar .k-har {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 20px;
	align-items: baseline;
	padding: 15px 0;
	line-height: 1.45;
}

.k-tovar .k-har dd {
	text-align: right;
	font-weight: 600;
	color: var(--k-tekst);
}

/* двоеточие приклеено к имени, а не висит отдельным знаком */
.k-tovar .k-har dt span { margin-left: 1px; }

.k-tovar .k-har dt,
.k-tovar .k-har dd { min-width: 0; margin: 0; }
.k-tovar .k-har dd { overflow-wrap: anywhere; }

/* ⛔⭐⭐ Порог был 1040 и стоит ПОЗЖЕ правила с `aspect-ratio: auto`,
   поэтому на 1024 и 900 он выигрывал и возвращал квадрат. А высота теперь
   задана экраном (675), и квадрат тянул ширину за ней: сцена становилась
   675 при доступных 490 и вылезала за свою колонку (замер 26.08.2026).
   Квадрат нужен только там, где страница идёт одной колонкой. */
@media (max-width: 860px) {
	.k-tovar .k-scena { aspect-ratio: 1 / 1; }
}

@media (max-width: 767px) {
	.k-opt { padding: 16px 18px; }
}

@media (max-width: 520px) {
	.k-opt__knopki { grid-template-columns: minmax(0, 1fr); }
	.k-tovar .k-har { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 0; }
	.k-tovar .k-har dd { text-align: left; }
	.k-tovar .k-har dt { font-size: 13px; }
}


/* ==================================================================== *
 * Правка Вени 25.08.2026, вечер. Дословно: «мне не нравятся пустые
 * места на сайте, когда что-то несимметрично».
 *
 * 1. Снимок липкий: цепляется низом к низу экрана, правая колонка едет.
 * 2. Панели под снимком нет. Она добирала высоту и делала колонку со
 *    снимком вытянутым прямоугольником вместо квадрата.
 * 3. Низ идёт одной колонкой: описание, представительство, вопросы.
 *    Разной высоты соседей нет, значит и дыре взяться неоткуда.
 * 4. Вопросы раскрывающиеся.
 * 5. Ряды товаров теми же карточками, что в каталоге: пять на десктопе,
 *    три на планшете, два на телефоне.
 * ==================================================================== */

/* ------------------------------------------------ 1. липкий снимок */

/* ⛔⭐⭐⭐ Главное препятствие было НЕ в раскладке, а в одной строке темы:
   у `body` стоит `overflow: hidden`. Такой предок становится контейнером
   прокрутки, и `position: sticky` внутри него не липнет вовсе. Проверено
   пробой в браузере 25.08.2026: с `hidden` пробный липкий блок уезжал за
   экран, с `clip` вставал ровно там, где положено.

   ⚠️ Блокировку прокрутки при открытом меню это правило НЕ отменяет:
   тема держит её на `html.no-overflow-y { overflow-y: hidden !important }`
   (salient/css/style.css), а её половина для тела весит больше нашего
   селектора. Проверено замером: с прежним `overflow: hidden` у body
   страница прокручивалась ровно так же. Ограничение по ширине оставлено
   намеренно, липкость нужна только там, где колонки две. */
@media (min-width: 1041px) {
	body.single-product {
		overflow: visible;
		overflow-x: clip;
	}
}

/* Колонка со снимком растянута на высоту ряда и служит ДОРОЖКОЙ, по которой
   едет сама сцена. Липнет не колонка, а её содержимое: у липкого элемента
   должен быть запас хода внутри родителя, а растянутому ехать некуда. */
.k-tovar .k-verh { align-items: stretch; }

.k-tovar .k-vitrina {
	min-width: 0;
	display: block;
	height: 100%;
	position: static;
}

/* ⚠️ Привязка ВЕРХНЯЯ, а не нижняя: `bottom` в этой раскладке не
   срабатывает (замер 25.08.2026), а `top` срабатывает. Нужное значение
   считает `tovar.js`: окно минус высота сцены минус запас снизу. */
html.k-tovar-lip .k-tovar .k-scena {
	position: sticky;
	top: var(--k-tovar-lip-top, 82px);
}

/* ⛔⭐ Клавиатура важнее липкости: у сцены внутри кнопки миниатюр и лупа.
   Пока фокус внутри, липкость выключается и браузер спокойно прокручивает
   к нужной кнопке. Тот же приём стоит на липкой колонке каталога. */
html.k-tovar-lip .k-tovar .k-scena:focus-within {
	position: relative;
	top: auto;
}

/* ------------------------------------------- 2. низ одной колонкой */
.k-tovar .k-niz {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	margin-top: 22px;
	align-items: start;
}

/* один вид у всех секций низа: фон, рамка, радиус и поля общие */
.k-tovar .k-niz > section {
	background: var(--k-panel);
	border: 1px solid var(--k-liniya);
	border-radius: var(--k-radius);
	padding: 30px 34px 32px;
}

.k-tovar .k-niz > section > h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: var(--k-tekst);
	text-wrap: balance;
}

/* ---------------------------------- описание: текст и карточка рядом */

/* ⚠️ Длина строки ограничена: во всю ширину 1360 строка уходила за сто
   знаков, такую строку глаз теряет при переносе. */
.k-opisanie__setka {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 26px 34px;
	align-items: start;
}

/* нет карточки проверки, значит текст один и ширину держит сам.
   ⚠️ Класс из шаблона, а не `:has()`: он надёжнее в старых браузерах.
   Замечание Кодекса 25.08.2026. */
.k-opisanie__setka--odna {
	grid-template-columns: minmax(0, 1fr);
}

.k-opisanie__telo { min-width: 0; max-width: 74ch; }

/* -------------------------- старое описание: текст в две колонки

   ⚠️ Замер 25.08.2026: во всю ширину строка выходила 1290 пикселей, около
   170 знаков. Читаемый предел примерно 90. Две колонки дают 85 и заодно
   закрывают ширину содержанием. */
.k-opisanie__kolonki {
	columns: 2;
	column-gap: 44px;
}

/* ⚠️ Разрыв абзаца между колонками РАЗРЕШЁН, и это замер, а не вкус.
   С запретом при трёх абзацах (334 товара из 358) колонки расходились на
   64 пикселя из 190, с разрешением перекос стал 0. `orphans` и `widows`
   не дают оторвать одну строку. */
.k-tovar .k-opisanie__kolonki p {
	break-inside: auto;
	orphans: 3;
	widows: 3;
	margin: 0 0 14px;
}

.k-tovar .k-opisanie__kolonki p:last-child { margin-bottom: 0; }

/* лид один и короткий, его в колонки не отправляем, но длину строки
   всё равно ограничиваем */
.k-tovar .k-opisanie p.k-lid { max-width: 92ch; }

.k-tovar .k-opisanie--v2 .k-proverka {
	margin: 0;
	background: var(--k-fon2);
	border: 1px solid var(--k-liniya2);
}

/* ------------------------- 3. представительство: четыре плитки

   Правка Вени 25.08.2026: «4 блока оберни в красивые блоки и визуально
   красиво оформи». Плитка это значок, заголовок и подпись. Вторичный фон
   отделяет их от белой панели секции, а красный остаётся только значку:
   четыре красных пятна подряд спорили бы с кнопками наверху страницы. */
.k-tovar .k-oficial__verh {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 22px;
}

.k-tovar .k-oficial__verh h2 { margin: 0; }

.k-tovar a.k-oficial__ssylka {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 600;
	/* красная: это переход к главному действию сайта (правка Вени) */
	color: var(--k-krasnyy, #c8102e);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.k-tovar a.k-oficial__ssylka:hover { color: var(--k-krasnyy-nazhat, #a30d25); }

.k-tovar .k-oficial__setka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-tovar .k-oficial__plitka {
	margin: 0;
	padding: 20px 20px 22px;
	background: var(--k-fon2);
	border: 1px solid var(--k-liniya2);
	border-radius: 10px;
	list-style: none;
	transition: border-color .18s ease, background .18s ease;
}

.k-tovar .k-oficial__plitka::marker { content: ""; font-size: 0; }

.k-tovar .k-oficial__plitka:hover {
	background: #fff;
	border-color: #dfe2e6;
}

/* значок: тонкие линии в currentColor, как у остальных значков сайта */
.k-oficial__znachok {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 10px;
	/* тёплая подложка вместо белой: значок на белом терялся, а сплошного
	   красного пятна на четырёх плитках было бы слишком */
	background: #fdf2f4;
	border: 1px solid #f7e2e6;
	color: var(--k-krasnyy, #c8102e);
}

.k-tovar .k-oficial__plitka:hover .k-oficial__znachok {
	background: #fbe9ec;
}

.k-oficial__znachok svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.k-tovar .k-oficial__plitka strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--k-tekst);
	text-wrap: balance;
}

.k-tovar .k-oficial__plitka span:not(.k-oficial__znachok) {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--k-tusklo);
}

/* ------------------------------- 4. вопросы раскрывающимся списком */
.k-faq__spisok {
	border-top: 1px solid var(--k-liniya2);
}

.k-tovar details.k-vopros {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--k-liniya2);
	background: none;
}

.k-tovar details.k-vopros > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
}

/* стрелка браузера по умолчанию: у Chrome треугольник, у Safari свой */
.k-tovar details.k-vopros > summary::-webkit-details-marker { display: none; }
.k-tovar details.k-vopros > summary::marker { content: ""; font-size: 0; }

.k-tovar details.k-vopros > summary h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--k-tekst);
	transition: color .15s ease;
}

.k-tovar details.k-vopros > summary:hover h3 { color: var(--k-krasnyy, #d0021b); }

/* знак раскрытия: тонкая стрелка, которая переворачивается при открытии.
   ⚠️ Кружка с плюсом здесь нет намеренно: он тяжелее спокойной страницы и
   повторяет вид готового набора. Замечание Кодекса 25.08.2026. */
.k-vopros__znak {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.k-vopros__znak::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 7px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--k-tusklo);
	border-bottom: 2px solid var(--k-tusklo);
	transform: rotate(45deg);
	transform-origin: 60% 60%;
	transition: transform .18s ease;
}

.k-tovar details.k-vopros[open] .k-vopros__znak::before {
	transform: rotate(225deg);
	border-color: var(--k-krasnyy, #c8102e);
}

.k-tovar details.k-vopros > summary:hover .k-vopros__znak::before {
	border-color: var(--k-tekst);
}

.k-vopros__otvet { padding: 0 40px 18px 0; }

.k-tovar .k-vopros__otvet p {
	margin: 0 0 10px;
	max-width: 86ch;
	font-size: 15px;
	line-height: 1.68;
	color: #3d4247;
}

.k-tovar .k-vopros__otvet p:last-child { margin-bottom: 0; }

/* ----------------------------- 5. ряды карточками каталога */

/* ⛔ Карточка здесь НЕ описывается: она приходит из `karta-kataloga.css`,
   тем же файлом, что рисует каталог. Здесь только сетка ряда. */
.k-ryad { margin-top: 22px; }

.k-tovar .k-ryad__zag {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--k-tekst);
}

.k-tovar ul.products.k-ryad__setka {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 17px 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-tovar ul.products.k-ryad__setka::before,
.k-tovar ul.products.k-ryad__setka::after { display: none; }

/* ⚠️ Товаров берём шесть на все экраны, а лишний прячем показом: на
   планшете и телефоне нужны все шесть, и разная выборка по ширине экрана
   на стороне сервера невозможна, ширину знает только браузер. */
.k-tovar ul.products.k-ryad__setka > li.product:nth-child(6) { display: none; }

/* ⛔ Серой коробки у ряда дополнений нет. Дополнений почти всегда меньше
   пяти (берутся только по совпадению диаметра), и в коробке из пяти мест
   три карточки читались как «две потерялись». Без коробки короткий ряд это
   просто короткий ряд. Разделяет ряды заголовок, а не фон.
   ⚠️ Правка 25.08.2026 сперва попала в раннюю копию этого правила, а поздняя
   её перебивала: коробка осталась на месте. Замечание Кодекса, подтверждено
   замером фона rgb(246, 246, 246). Копия теперь одна, эта. */
.k-ryad--dop { padding: 0; background: none; }

/* --------------------------------------------------------- адаптив */

/* планшет: три карточки в ряд, шестая возвращается вторым рядом */
@media (max-width: 1040px) {
	/* одна колонка: дорожки нет, липнуть некуда */
	html.k-tovar-lip .k-tovar .k-scena { position: relative; top: auto; }

	.k-tovar ul.products.k-ryad__setka {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.k-tovar ul.products.k-ryad__setka > li.product:nth-child(6) { display: flex; }

	.k-tovar .k-oficial__setka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k-opisanie__setka { grid-template-columns: minmax(0, 1fr); }
	.k-opisanie__kolonki { columns: 1; }
}

/* телефон: две карточки в ряд, три ряда */
@media (max-width: 767px) {
	.k-tovar ul.products.k-ryad__setka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 9px;
	}
	.k-tovar .k-niz > section { padding: 22px 18px; }
	.k-tovar .k-niz { gap: 16px; }
	.k-vopros__otvet { padding-right: 0; }
}

@media (max-width: 520px) {
	.k-tovar .k-oficial__setka { grid-template-columns: minmax(0, 1fr); }
	.k-tovar .k-oficial__plitka { padding: 16px 16px 18px; }
	.k-tovar .k-oficial__verh { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.k-vopros__znak::before { transition: none; }
}

/* ⛔⭐⭐ Содержимое товара не центрировалось на широком экране.
   Тело страницы товара тема раскладывает гибко (`display: flex`), и обёртка
   содержимого получала ширину ПО СОДЕРЖИМОМУ: при окне 1920 она выходила
   1680 и прижималась к левому краю, а справа оставалось 240 пикселей пустоты
   (замер 25.08.2026, проверка ширины: «содержимое от 0, шапка от 120»).
   ⚠️ Беда была только на товаре: на остальных страницах тело обычное. */
body.single-product #ajax-content-wrap {
	width: 100%;
}

/* ⭐ На телефоне миниатюры уезжают ПОД снимок горизонтальной лентой.
   Поверх снимка колонкой они съедали треть его ширины, а при пяти кадрах
   доходили до нижнего края (кадр 26.08.2026 на 390). */
@media (max-width: 690px) {
	.k-tovar .k-miny {
		/* ⛔ Не `static`: лента лежит ВНУТРИ сцены с заданным соотношением
		   сторон, и в потоке она вставала над снимком и обрезалась сверху
		   (кадр 26.08.2026). Оставляем слой, но кладём его вдоль нижнего
		   края снимка. */
		position: absolute;
		top: auto;
		bottom: 10px;
		left: 10px;
		right: 10px;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		padding-bottom: 2px;
		/* ⚠️ Лента прокручивается вбок: кадров бывает шесть, и в 390 они
		   иначе не помещаются. */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.k-tovar .k-miny::-webkit-scrollbar {
		display: none;
	}

	.k-tovar .k-min {
		flex: 0 0 62px;
		width: 62px;
		height: 62px;
	}
}

/* ⭐⭐ Расстояние от меню до крошек считано, а не подобрано на глаз.
   Веня 27.08.2026: «рассчитай расстояние от поля картинки до хлебных
   крошек, это расстояние увеличь на одну треть и сделай это
   расстояние от меню до хлебных крошек».

   Замер 27.08.2026 на 1920: от крошек до поля картинки **34**,
   плюс треть даёт **45**. Столько и ставим от меню до крошек.

   ⛔ Почему правим `padding` обёртки, а не `margin` крошек: своими
   силами обёртки дают **70** (30 от шапки плюс 40 собственного
   `padding`), а нужно 45. Отступом крошек это не уменьшить, пришлось
   бы ставить отрицательные -25.
   ⚠️ Правило сужено до `body.single-product`: на остальных страницах,
   включая каталог с баннером, обёртка остаётся прежней. */
body.single-product .container-wrap {
	padding-top: 15px;
}

/* ⭐ Крошки на странице товара тоже цель нажатия: на телефоне они были
   высотой 20 пикселей (замер 26.08.2026). */
@media (max-width: 690px) {
	body.single-product .woocommerce-breadcrumb a,
	body.single-product .woocommerce-breadcrumb span {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}
}

/* ⭐ Последние мелкие цели на телефоне (замер 26.08.2026): ссылка раздела
   над названием была 17 пикселей высотой, ссылка «Условия для дилеров» 23. */
@media (max-width: 690px) {
	.k-tovar .k-naznachenie a,
	.k-tovar .k-oficial__ssylka {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
	}
}


/* ============ КРАСНОЕ ПОДЧЁРКИВАНИЕ ЗАГОЛОВКОВ ============
   Веня 27.08.2026: «сделай подчеркивание красное у заголовков, пометил
   полоской (подчеркивание как у Условия для дилеров, только в конце
   дотягиваем на 7 px полоску дальше)».

   ⭐⭐⭐ Приём для выступа: пустой `::after` шириной 7 пикселей внутри
   строки. Подчёркивание рисуется под всей строкой, включая этот
   пустой кусок, и линия уходит на 7 пикселей дальше букв.

   ⛔ Почему НЕ `::after` с `position: absolute` и `width: calc(100% + 7px)`:
   у многострочного заголовка («Покрышка на детский велосипед 10
   дюймов Kenda K-912, ширина 2.00 дюйма») такая линия прошла бы по всей
   ширине блока, а не по тексту. Штатное `text-decoration` идёт точно
   по буквам каждой строки, как у образца.

   Образец (замер ссылки `.k-oficial__ssylka`):
   `text-decoration: underline rgb(200,16,46)`, `text-underline-offset: 3px`. */

.k-tovar .k-naznachenie a,
.k-tovar .k-opt__metka,
.k-tovar .k-roznica > span,
.k-tovar .k-metka:not(:has(span)),
.k-tovar .k-oficial__verh h2,
.k-tovar .k-oficial__plitka strong,
.k-tovar .k-opisanie > h2,
.k-tovar .k-proverka h3,
.k-tovar .k-faq > h2,
.k-tovar .k-ryad__zag {
	text-decoration: underline;
	text-decoration-color: #c8102e;
	text-underline-offset: 3px;
	/* ⛔ Толщина НЕ задаётся. Веня 27.08.2026: «толщина подчеркивания
	   как у Условия для дилеров», а у того образца замер показал `auto`.
	   Прежние 2px были моей отсебятиной и давали линию толще образца. */
}

/* тот самый хвостик в 7 пикселей за концом текста */
.k-tovar .k-naznachenie a::after,
.k-tovar .k-opt__metka::after,
.k-tovar .k-roznica > span::after,
.k-tovar .k-metka:not(:has(span))::after,
.k-tovar .k-oficial__verh h2::after,
.k-tovar .k-oficial__plitka strong::after,
.k-tovar .k-opisanie > h2::after,
.k-tovar .k-proverka h3::after,
.k-tovar .k-faq > h2::after,
.k-tovar .k-ryad__zag::after {
	content: "";
	display: inline-block;
	width: 7px;
}

/* ⚠️ У ссылки раздела над названием тема ставит своё подчёркивание
   при наведении: держим наш цвет, иначе линия меняет цвет под курсором. */
.k-tovar .k-naznachenie a:hover {
	text-decoration-color: #c8102e;
}



/* ====================================================================
 * ⭐⭐⭐ СНИМОК НЕПОДВИЖЕН, РАСТЁТ ТОЛЬКО ПОЛЕ. Веня 27.08.2026:
 * «всё дёргается при прокрутке, при скроле картинка больше, потом
 * нормально, будто шина уже едет по горам».
 *
 * Замер `469` поймал два разных случая одной болезни:
 *   1920 и 1440: снимок размера не менял, но всплывал на 45 пикселей,
 *                потому что стоял по центру растущего поля;
 *   1366 на 660: снимок ещё и рос на 91, упираясь в высоту поля.
 *
 * ⛔ Убрать рост поля нельзя: именно им закрывается пустота, которая
 * иначе зияет над карточкой при ужатии шапки (жалоба «сверху не
 * цепляется» от 27.08.2026). Поле обязано расти вверх.
 *
 * ⭐ Поэтому снимок отвязан от растущей высоты: он живёт по высоте поля
 * В ПОКОЕ (`--k-pole-pokoy`, её ставит tovar.js и меняет только вслед за
 * окном) и прижат к НИЗУ поля. Низ поля прибит к краю экрана, значит
 * снимок неподвижен на экране, а прибывающая высота уходит вверх белым.
 *
 * ⚠️ Только от 861: ниже страница идёт одной колонкой, липкости нет и
 * поле не растёт, там снимок остаётся в потоке.
 * ==================================================================== */
@media (min-width: 861px) {
	html.k-tovar-lip .k-tovar .k-scena > img {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: var(--k-konec-teksta, 630px);
		height: var(--k-pole-pokoy, 100%);
		/* ⛔ Прежний потолок снят намеренно: он считался от `--k-nad-polem`,
		   то есть от растущей высоты, и был причиной роста снимка. */
		max-height: 100%;
		object-fit: contain;
	}
}


/* ================================================================== *
 * Характеристики на телефоне и планшете. Веня 30.08.2026 по двум кадрам:
 * «мобила и планшет проверь, характеристики».
 * ================================================================== */

/* ⭐ Планшет: строка была 53 пикселя при содержимом 22. Поля срезаны с 15 до
   11, строка стала 45, пять характеристик экономят 40 пикселей высоты. */
@media (min-width: 521px) and (max-width: 999px) {
	.k-tovar .k-har { padding: 11px 0; }
}

/* ⛔ Телефон: было имя сверху, значение под ним со сдвигом, строка 69
   пикселей, пять характеристик занимали 345.
   ⭐ Возвращаем ту же пару в строку, что на широком экране: имя слева,
   значение справа. Веня 25.08.2026 просил именно так («справа много пустого
   места»), а столбик появился 26-го из опасения, что длинные значения не
   влезут. Замер 30.08.2026 на 390: самому длинному значению
   «Авто/AV/Schrader» хватает места, перенос не нужен.
   ⚠️ Страховка на 320 оставлена: `overflow-wrap: anywhere` выше по файлу
   разрешает перенос внутри слова, строка станет выше, но не уедет за край. */
@media (max-width: 520px) {
	.k-tovar .k-har {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 14px;
		padding: 10px 0;
	}

	.k-tovar .k-har dd { text-align: right; }
}


/* ================================================================== *
 * Телефон: хлебные крошки одной строкой с прокруткой пальцем.
 * Веня 30.08.2026: «в мобиле хлебные крошки в одной строке и можно пальцем
 * двигать влево вправо».
 * ================================================================== */

/* ⛔ Было: крошки переносились и занимали ДВЕ строки высотой 58 пикселей
   (замер 30.08.2026 на 390). Виновата не сама длина, а цель нажатия: ссылкам
   крошек мы задали `min-height: 32` ради пальца, и при переносе это дало две
   полосы по 29.
   ⭐ Стало: одна строка, лишнее уезжает вбок и достаётся пальцем.
   ⚠️ Поля обёртки на карточке товара 6 пикселей, поэтому лента выходит за
   них отрицательным полем и возвращает его своим внутренним: так последняя
   крошка не обрывается ровно у края экрана, а уходит под него. Тем же
   приёмом сделана лента разделов в каталоге, katalog.css. */
@media (max-width: 690px) {
	body.single-product .woocommerce-breadcrumb {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;
		/* ⛔⭐ Просвет обязателен. Разделители «больше» лежат в разметке
		   отдельными текстовыми узлами с пробелами вокруг, а гибкий контейнер
		   делает из каждого такого узла свой элемент и пробелы по краям
		   схлопывает. Первый кадр 30.08.2026 показал «Главная>Камеры>Камера»
		   без единого просвета. */
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		margin-left: -6px;
		margin-right: -6px;
		padding-left: 6px;
		padding-right: 6px;
		/* прокрутка вбок не должна тянуть за собой страницу */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	body.single-product .woocommerce-breadcrumb::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	/* ⚠️ Без этого гибкий элемент сжимается по содержимому и текст всё равно
	   ломается: `nowrap` запрещает перенос строки, но не запрещает сжатие. */
	body.single-product .woocommerce-breadcrumb a,
	body.single-product .woocommerce-breadcrumb span {
		flex: 0 0 auto;
	}
}