/* ====================================================================
 * KENDA. Баннер раздела каталога.
 *
 * Собран по макету Вени от 25.08.2026 (кадр в переписке). Что в нём:
 * над названием красная строка капсом, под названием короткая красная
 * черта, ниже описание и две плашки, а НИЗ БАННЕРА идёт дугой: центр
 * опущен, края подняты, вдоль края тонкая красная подсветка. Путь по
 * разделам ушёл из баннера вниз, на белое поле под ним.
 *
 * ⭐⭐⭐ Отступы задаются ОДНОЙ шкалой (`--k-shag`, кратно 4). Менять
 * промежутки поштучно нельзя: пропорции сразу разъезжаются, а это первое,
 * что видно глазом. Правило: C:\Users\De-sign\.claude\rules\verstka-otstupy.md
 *
 * Картинки: wp-content/uploads/kenda-bannery/{ярлык}.jpg
 * Рисует их _arves/121-bannery-razdelov.py (модель gpt-image-2).
 * Разметку печатает mu-plugins/kenda-shapka-razdela.php.
 * ==================================================================== */

/* ⛔ Штатная шапка темы на каталоге не нужна: она рисует один и тот же снимок
   рук на руле всем разделам подряд. Заголовок из неё убран в PHP. */
/* ⚠️ Страницы МЕТОК товара тоже: баннер им печатается, а штатную шапку
   темы им прежде не гасили, и две шапки шли подряд. Замечание Codex 25.08.2026. */
body.post-type-archive-product #page-header-wrap,
body.tax-product_cat #page-header-wrap,
body.tax-product_tag #page-header-wrap,
body.post-type-archive-product #page-header-bg,
body.tax-product_cat #page-header-bg,
body.tax-product_tag #page-header-bg {
	display: none !important;
}

.k-shapka {
	/* ⭐⭐⭐ ОДНА шкала на весь баннер. Все промежутки ниже кратны шагу:
	   16 = 2 шага, 24 = 3, 32 = 4, 56 = 7. Правка пропорций делается здесь. */
	--k-shag: 8px;
	--k-pole-boka: 40px;
	/* ⭐ Веня 25.08.2026: «блок описания в баннере сдвинуть правее, на уровень
	   конца логотипа». Это ширина логотипа в шапке: 150 на десктопе и 72 на
	   узком экране (замер 25.08.2026). Меняется вместе с логотипом. */
	--k-shirina-logotipa: 150px;
	--k-shirina: 1680px;
	/* глубина дуги: на сколько центр нижнего края опущен ниже краёв */
	--k-duga: 72px;
	--k-krasnyy: #d81f2a;

	/* ⭐⭐⭐ Три величины, которые правятся МЫШКОЙ прямо на странице:
	   mu-plugins\kenda-nastrojka-bannera.php. Здесь стоят значения по
	   умолчанию, сохранённые перекрываются инлайн-стилем в head.
	   ⚠️ Действуют только на десктопе: у экранов уже 1025 свои min-height
	   в медиазапросах ниже, и они сильнее этой строки. */
	--k-vysota: 440px;
	--k-tekst-x: 0px;
	--k-tekst-y: 0px;
	/* ⭐ Размер всего текста в баннере одним множителем. 1 это как нарисовано.
	   ⛔ Сделано умножением кеглей, а НЕ через transform: scale или zoom.
	   transform создаёт новый контейнер для position: fixed и ломает
	   прилипшее меню, а zoom вдобавок масштабирует смещение текста, и ручка
	   начинает ездить не туда, куда тянешь. */
	--k-masshtab: 1;

	position: relative;
	/* ⚠️ Баннер идёт во всю ширину окна, а не по ширине содержимого: верхнее
	   меню тоже во всю ширину, и по бокам оставались бы белые углы. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	/* Высота задаётся содержимым, число ниже только пол: очень короткое
	   описание не должно сплющить картинку. По макету полоса высокая. */
	min-height: var(--k-vysota);
	display: flex;
	align-items: stretch;
	background-color: #171717;
	background-position: center 42%;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;

	/* ⭐⭐⭐ ДУГА. Нижние углы скруглены сильно по горизонтали и мягко по
	   вертикали: середина остаётся внизу, края поднимаются. Так режется и
	   фотография, потому что она фон этого же блока. */
	border-radius: 0 0 50% 50% / 0 0 var(--k-duga) var(--k-duga);
	/* ⛔ Красной подсветки у дуги НЕТ: Веня 25.08.2026 «убрать красную тень
	   у дуги». Дуга читается формой, подсветка только шумела. */
}

/* ⭐ Градиент, на котором держится текст. Без него читаемость зависела бы от
   того, что нарисовано в левом углу конкретной картинки.
   ⚠️ Правый край светлее, чем было: по макету фотография видна почти
   наполовину, а раньше затемнение съедало её до 70 процентов ширины. */
.k-shapka::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 10, 12, .95) 0%, rgba(10, 10, 12, .88) 32%, rgba(10, 10, 12, .42) 58%, rgba(10, 10, 12, 0) 82%),
		linear-gradient(180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, 0) 30%);
	pointer-events: none;
}

/* ⭐ Содержимое баннера одной колонкой сверху вниз. Промежутки между строками
   разные по смыслу, но все кратны шагу: связанное стоит ближе, чужое дальше. */
.k-shapka__vnutri {
	position: relative;
	/* ⭐ Смещение текста мышкой. Именно left и top у relative, а НЕ transform:
	   transform создаёт новый контейнер для position: fixed, и в нём ломается
	   прилипшее меню и окно поиска. Уже наступали на это 25.08.2026. */
	left: var(--k-tekst-x);
	top: var(--k-tekst-y);
	z-index: 1;
	width: 100%;
	max-width: var(--k-shirina);
	margin: 0 auto;
	/* верхнее поле 7 шагов, нижнее 8 плюс половина глубины дуги: у нижнего
	   края текст иначе наезжает на изгиб, а он съедает высоту к центру.
	   ⭐ Оба поля вынесены в переменные с этими же значениями по умолчанию.
	   Когда Веня задаёт высоту руками, поля ужимаются до 20 и 40, иначе
	   край упирается в них и не поднимается: 156 пикселей полей держали
	   баннер на 577 при любой тяге ручки (поймано 26.08.2026).
	   ⛔ Нижнее поле не опускать ниже 40: дуга поднимает КРАЯ, и текст
	   слева уходит под изгиб. */
	padding: var(--k-pole-verh, calc(var(--k-shag) * 7)) var(--k-pole-boka)
	         var(--k-pole-niz, calc(var(--k-shag) * 8 + var(--k-duga) * .5))
	         calc(var(--k-pole-boka) + var(--k-shirina-logotipa) - var(--k-popravka-lida, 0px));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

/* ------------------------------------------- красная строка над названием */
.k-shapka__nad {
	display: block;
	/* ⚠️ Три шага, а не два: мерило отступов 25.08.2026 показало, что между
	   БУКВАМИ надзаголовка и заголовка остаётся всего 3 пикселя. Крупная
	   строка заголовка съедает просвет своей высотой строки. */
	margin: 0 0 calc(var(--k-shag) * 3 * var(--k-masshtab));
	color: #ff5762;
	font-size: calc(13px * var(--k-masshtab));
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------- название */
#ajax-content-wrap .k-shapka__zagolovok,
.k-shapka__zagolovok {
	/* ⭐ Только заголовок уходит влево, на уровень логотипа. Остальные строки
	   баннера стоят где стояли: Веня 26.08.2026 просил сдвинуть именно его.
	   ⚠️ Отрицательное поле, а не свой padding у блока: так строка выходит за
	   левый край текстовой колонки, не двигая соседей. */
	margin: 0 0 0 calc(var(--k-zagolovok-vlevo, 0px) * -1);
	padding: 0;
	color: #fff;
	font-size: calc(64px * var(--k-masshtab));
	line-height: calc(66px * var(--k-masshtab));
	font-weight: 800;
	/* ⚠️ Длинный артикул без пробелов иначе вылезал за край экрана и давал
	   горизонтальную прокрутку. Замечание Codex 25.08.2026. */
	overflow-wrap: anywhere;
	letter-spacing: -0.024em;
	text-transform: none;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .55);
}

/* короткая красная черта под названием */
.k-shapka__cherta {
	display: block;
	width: calc(52px * var(--k-masshtab));
	height: 3px;
	margin: calc(var(--k-shag) * 2 * var(--k-masshtab)) 0 calc(var(--k-shag) * 2.5 * var(--k-masshtab));
	border-radius: 2px;
	background: var(--k-krasnyy);
	box-shadow: 0 0 18px rgba(216, 31, 42, .55);
}

/* -------------------------------------------------------------- описание */
.k-shapka__nadpis {
	margin: 0;
	/* ширину держим по числу знаков в строке: по макету описание занимает
	   примерно треть ширины и ложится в три строки */
	max-width: 60ch;
	overflow-wrap: anywhere;
	color: #e3e7ec;
	font-size: calc(15px * var(--k-masshtab));
	line-height: calc(24px * var(--k-masshtab));
	text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------- плашки */
.k-shapka__plashki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--k-shag) * 1.5 * var(--k-masshtab));
	margin-top: calc(var(--k-shag) * 3.5 * var(--k-masshtab));
	/* ⭐⭐ Веня 27.08.2026: «кнопки сдвинь вправо на уровень конца текста».

	   ⛔ Две попытки сделать это одним css провалились:
	   1. Постоянный сдвиг. Замер по четырём разделам дал разную нужную
	      величину, от 100 до 150: у каждого своя длина описания и своя
	      ширина плашек.
	   2. `max-width: 60ch`, как у описания. Единица `ch` считается от шрифта
	      САМОГО элемента, у плашек он другой, и рамка вышла 549 вместо
	      нужной. Плашки уехали правее текста на 125.

	   ⭐ Поэтому ширину даёт скрипт `shapka-razdela.js`: он меряет правый
	   край БУКВ описания через `Range`. Рамка абзаца шире самой длинной
	   строки, по ней равнять нельзя.
	   ⚠️ Запасное значение 60ch на случай, если скрипт не отработал:
	   плашки всё равно останутся в пределах баннера. */
	width: 100%;
	max-width: var(--k-konec-teksta, 60ch);
	justify-content: flex-end;
}

.k-shapka__plashka {
	display: inline-flex;
	align-items: center;
	gap: calc(8px * var(--k-masshtab));
	min-height: calc(46px * var(--k-masshtab));
	padding: 0 calc(20px * var(--k-masshtab));
	border-radius: 11px;
	font-size: calc(15px * var(--k-masshtab));
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
}

/* главная плашка: сколько моделей в разделе */
.k-shapka__schet {
	background: var(--k-krasnyy);
	color: #fff;
	box-shadow: 0 10px 26px -12px rgba(216, 31, 42, .9);
}

/* вторая плашка тише: она поясняет, а не зовёт */
.k-shapka__plashka--tihaya {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #eef1f5;
	font-weight: 600;
	backdrop-filter: blur(6px);
}

#ajax-content-wrap .k-shapka__plashka-znachok,
.k-shapka__plashka-znachok {
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	max-width: 18px;
	opacity: .85;
}

/* ⚠️ Раздел, для которого картинку ещё не нарисовали, не остаётся с пустой
   полосой: фон становится тёмным градиентом, текст читается так же. */
.k-shapka[data-bez-kartinki] {
	background-image: linear-gradient(120deg, #171717 0%, #24262b 100%);
}

/* ====================================================================
 * Путь по разделам: под баннером, на белом поле.
 * ⭐ Веня 25.08.2026 по макету: «хлебные крошки снизу». Раньше они лежали
 * внутри баннера последней строкой и спорили с описанием за внимание.
 * ⚠️ Баннер печатается ВНЕ контейнера темы, поэтому крошки равняются по
 * ширине сами: те же 1680 с полями 40, что у содержимого (shirina.css).
 * ==================================================================== */
.k-put {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 24px 40px 0;
	color: #6e747e;
	font-size: 13px;
	line-height: 18px;
}

.k-put a {
	color: #6e747e;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.k-put a:hover {
	color: #23262b;
	border-bottom-color: rgba(35, 38, 43, .35);
}

/* последним звеном идёт текущий раздел: он не ссылка и он красный */
.k-put__zveno {
	display: inline-flex;
	align-items: center;
}

.k-put__zveno:last-child {
	color: #d81f2a;
	font-weight: 600;
}

#ajax-content-wrap .k-put__dom,
.k-put__dom {
	flex: 0 0 16px;
	width: 16px !important;
	height: 16px !important;
	max-width: 16px;
	color: #d81f2a;
}

#ajax-content-wrap .k-put__znak,
.k-put__znak {
	flex: 0 0 13px;
	width: 13px !important;
	height: 13px !important;
	max-width: 13px;
	color: #b9bec6;
}

/* тема ставит свои значки-стрелки в крошки, они здесь не нужны */
.k-put i,
.k-put .fa {
	display: none;
}

/* ============================================================================
   ⭐⭐⭐ ВИД БАННЕРА, ВЫСТАВЛЕННЫЙ ВЕНЕЙ РУКАМИ 26.08.2026

   Он настроил мышкой в инструменте ручек и сказал «применяй и убирай эту
   штуку». Инструмент снят, числа зашиты сюда.

   ⛔ Селектор тройной силы не для красоты: в menyu-verh.css есть правило
   `body.tax-product_cat .k-shapka` из двух классов, и с обычным `.k-shapka`
   высота не применяется вовсе. Проверять `getComputedStyle`, а не глазами.

   ⚠️ Верхнее поле 122, потому что поверх баннера лежит шапка темы высотой
   106: с меньшим полем текст прячется под меню. Нижнее 40, потому что дуга
   поднимает края и текст слева уходит под изгиб.

   ⚠️ Только шире 1024: у телефона и планшета свои значения ниже.
   ============================================================================ */
@media (min-width: 1025px) {
	.k-shapka.k-shapka.k-shapka {
		--k-vysota: 432px;
		--k-masshtab: .84;
		--k-tekst-x: 47px;
		--k-tekst-y: -16px;
		/* ⭐ Веня 26.08.2026: «заголовок в баннере сдвинь влево на уровень
		   логотипа», и следом «я просил ТОЛЬКО заголовок».
		   Замер: блок текста стоит на 197 пикселей правее логотипа (150
		   отступа на ширину логотипа плюс 47 собственного сдвига). На эти же
		   197 заголовок и уходит влево, а надзаголовок, описание и плашки
		   остаются на своих местах. */
		/* ⛔⭐⭐ Две величины работают в паре и только здесь, от 1025.

		   Веня 26.08.2026: «сдвинь эту надпись на уровень конца логотипа».
		   Замер: логотип кончается на 190 (1440) и 310 (1920), а буквы описания
		   начинались с 237 и 357, то есть правее на 47 на обеих ширинах.

		   ⚠️ Поправка двигает ВЕСЬ текстовый блок: описание, красная черта
		   и плашки стоят по одной линии, и сдвинь мы одно описание, они
		   разъехались бы. Заголовок же должен остаться на месте, поэтому
		   его собственный сдвиг уменьшен на ту же величину: 197 минус 47.

		   ⛔ Ниже 1025 поправки НЕТ и быть не должно: там заголовок не
		   сдвинут, а описание и так стоит ровно на конце логотипа.
		   Первая попытка стояла в общем блоке и увела описание на 1024
		   влево на 47 (замер показал минус 47 вместо нуля). */
		--k-popravka-lida: 47px;
		/* ⭐ Веня 27.08.2026: «начало заголовка в баннере на уровень
		   центра логотипа». Логотип 40..190 на 1440 и 160..310 на 1920,
		   центр 115 и 235. Описание стоит на конце логотипа, значит
		   заголовку нужно выйти левее ровно на половину логотипа, то
		   есть на 75. Было 150, это было начало логотипа. */
		--k-zagolovok-vlevo: 75px;
		--k-pole-verh: 122px;
		--k-pole-niz: 40px;
		height: var(--k-vysota);
		min-height: var(--k-vysota);
	}
}

/* ------------------------------------------------------ 1000 до 1199 */
@media (max-width: 1199px) {
	.k-shapka {
		min-height: 380px;
		--k-duga: 60px;
		--k-pole-boka: 32px;
	}
	#ajax-content-wrap .k-shapka__zagolovok,
	.k-shapka__zagolovok { font-size: 50px; line-height: 54px; }
	.k-shapka__nadpis { max-width: 46ch; }
	.k-put { padding-left: 32px; padding-right: 32px; }
}

/* --------------------------------------------------------- 691 до 999 */
@media (max-width: 999px) {
	/* здесь шапка сайта уже 48 пикселей, замерено 24.08.2026 */
	.k-shapka {
		min-height: 330px;
		--k-duga: 48px;
		--k-pole-boka: 28px;
		--k-shirina-logotipa: 72px;
	}
	#ajax-content-wrap .k-shapka__zagolovok,
	.k-shapka__zagolovok { font-size: 42px; line-height: 46px; }
	.k-shapka__nadpis { font-size: 14px; line-height: 22px; max-width: none; }
	/* описание здесь без ограничения ширины, значит и плашки слева */
	.k-shapka__plashki { max-width: none; justify-content: flex-start; }
	.k-put { padding: 20px 28px 0; }
}

/* ------------------------------------------------------------ телефон */
@media (max-width: 690px) {
	.k-shapka {
		min-height: 300px;
		--k-duga: 32px;
		--k-pole-boka: 20px;
		background-position: center 45%;
	}

	/* на узком экране текст занимает всю ширину, поэтому затемнение идёт
	   снизу вверх, а не слева направо */
	.k-shapka::before {
		background:
			linear-gradient(180deg, rgba(10, 10, 12, .62) 0%, rgba(10, 10, 12, .35) 34%, rgba(10, 10, 12, .92) 100%);
	}

	.k-shapka__vnutri {
		/* на телефоне текст остаётся у левого поля: логотип там 72 пикселя,
		   и сдвиг съедал бы треть ширины строки */
		padding: calc(var(--k-shag) * 5) var(--k-pole-boka)
		         calc(var(--k-shag) * 5 + var(--k-duga) * .5);
	}

	#ajax-content-wrap .k-shapka__zagolovok,
	.k-shapka__zagolovok { font-size: 34px; line-height: 38px; }

	.k-shapka__nad { font-size: 12px; letter-spacing: .13em; }
	.k-shapka__nadpis { font-size: 13px; line-height: 21px; }
	.k-shapka__plashka { min-height: 38px; padding: 0 14px; font-size: 13px; }
	.k-put { padding: 16px 20px 0; font-size: 12px; }
}

/* ⚠️ На телефоне между баннером и содержимым зияло 80 пикселей пустоты:
   20 своих и 40 верхнего поля контейнера темы (замерено 24.08.2026).
   Правило узкое: только страницы каталога. */
@media (max-width: 690px) {
	body.tax-product_cat .container-wrap,
	body.tax-product_tag .container-wrap,
	body.post-type-archive-product .container-wrap {
		padding-top: 10px;
	}

	/* ⛔⭐ Что делать с боковой колонкой на телефоне, решает ОДИН файл:
	   themes/salient-child/kolonka.css. Прежде правило скрытия жило здесь, и
	   два правила одинаковой силы спорили за одно и то же: побеждал тот файл,
	   который тема подключила позже, а из колонки пропадал и баннер для
	   оптовых покупателей (замер 25.08.2026: колонка 0 пикселей). */
}

/* ⭐ Расстояние от крошек до карточек. Своё нижнее поле у баннера снято,
   промежуток задаёт верхнее поле обёртки темы. Правило узкое: каталог. */
@media (min-width: 691px) {
	body.tax-product_cat .container-wrap,
	body.tax-product_tag .container-wrap,
	body.post-type-archive-product .container-wrap {
		padding-top: 26px;
	}
}

/* ⚠️ У ссылок пути фокус был волосяной и тёмный: на белом поле он почти не
   виден. Обход клавишей Tab 25.08.2026. */
.k-put a:focus-visible {
	outline: 2px solid #d81f2a;
	outline-offset: 3px;
	border-radius: 3px;
}


/* ====================================================================
 * Планшет: описание не должно ложиться на светлую часть фотографии.
 * ⛔ Кадр 26.08.2026 на 768: текст доходил до правого края и пересекал
 * освещённый участок снимка, читать было тяжело.
 * ==================================================================== */
@media (min-width: 691px) and (max-width: 999px) {
	.k-shapka__nadpis {
		max-width: 62%;
	}

	/* затемнение держится дальше вправо, раз текст занимает две трети */
	.k-shapka::before {
		background:
			linear-gradient(90deg, rgba(10, 10, 12, .95) 0%, rgba(10, 10, 12, .9) 46%, rgba(10, 10, 12, .55) 72%, rgba(10, 10, 12, .12) 100%),
			linear-gradient(180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, 0) 30%);
	}

	/* поля баннера равняются на поля содержимого */
	.k-shapka {
		--k-pole-boka: 24px;
	}
}

@media (max-width: 690px) {
	.k-shapka {
		--k-pole-boka: 16px;
	}

	.k-put {
		padding-left: 16px;
		padding-right: 16px;
	}
}


/* ⭐ Цели нажатия на телефоне. Замер 26.08.2026: ссылки пути были высотой
   19 пикселей, палец по такой цели промахивается. Растим полями, а не
   кеглем: набор остаётся прежним. */
@media (max-width: 690px) {
	.k-put {
		gap: 4px 8px;
		row-gap: 2px;
	}

	.k-put a,
	.k-put__zveno {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}
}