/* ====================================================================
 * KENDA. Блоки левой колонки каталога: баннер для оптовых покупателей,
 * отобранные товары, полезные материалы.
 *
 * Задача Вени 25.08.2026: «чтобы меню слева не казалось пустым и вместе с
 * товарами прокручивалось вниз, все блоки в едином стиле и дизайне левого
 * меню».
 *
 * Разметку печатает mu-plugins/kenda-kolonka.php.
 * Надзаголовок со значком и карточка общие с меню разделов,
 * см. themes/salient-child/menyu-razdelov.css.
 * ==================================================================== */

/* ====================================================================
 * ЛИПКАЯ КОЛОНКА
 *
 * Веня 25.08.2026: колонка должна «цепляться низа» и ехать вместе с товарами.
 *
 * ⛔⭐⭐⭐ Главное препятствие было НЕ в раскладке, а в одной строке темы:
 * у `body` стоит `overflow: hidden`. Такой предок становится контейнером
 * прокрутки, и `position: sticky` внутри него не липнет вовсе. Проверено
 * пробой в браузере 25.08.2026: с `overflow: hidden` колонка уезжала вверх до
 * -2477, со снятым липла ровно у низа окна.
 *
 * ⭐ Меняем `hidden` на `clip` только на страницах каталога. Разница
 * принципиальная: `clip` тоже обрезает вылезающее, но НЕ создаёт контейнер
 * прокрутки, поэтому `sticky` работает. Горизонтальной прокрутки при этом не
 * появляется, замер 25.08.2026: документ 1440 при окне 1440.
 * ==================================================================== */
/* ⛔⭐⭐ Правило про `overflow` живёт ТОЛЬКО от 1000 пикселей, там же, где сама
   липкость. Ниже тема блокирует прокрутку страницы, когда открыта выезжающая
   панель меню и окно поиска, и наш `overflow: visible` мог бы эту блокировку
   отменить. Замечание Codex 25.08.2026: это был главный риск правки. */
@media (min-width: 1000px) {
	body.tax-product_cat,
	body.tax-product_tag,
	body.post-type-archive-product {
		overflow: visible;
		overflow-x: clip;
	}

	/* Ряд тянет колонку на всю высоту, иначе липнуть некуда: у `sticky`
	   должен быть запас хода внутри родителя. */
	.archive.woocommerce .container.main-content > .row,
	.woocommerce-shop .container.main-content > .row {
		align-items: stretch;
	}

	.archive.woocommerce .container.main-content > .row > #sidebar,
	.woocommerce-shop .container.main-content > .row > #sidebar {
		align-self: stretch;
	}

	/* ⚠️ Липнет НЕ сама колонка, а её содержимое: колонка растянута до низа
	   ряда и служит дорожкой, по которой едет блок.
	   ⚠️ Липкость включается КЛАССОМ от скрипта, а не сразу: до первого
	   расчёта сдвига колонка стояла бы с запасным `top: 92px` и прыгала бы,
	   когда скрипт наконец посчитает отрицательное значение.
	   Замечание Codex 25.08.2026. */
	html.k-lipkaya #sidebar > .widget {
		position: sticky;
		top: var(--k-sticky-top, 92px);
	}

	/* ⛔⭐ Клавиатура важнее липкости. У колонки выше окна её верх уезжает за
	   экран, и таб уводил бы фокус в невидимое. Пока фокус внутри колонки,
	   липкость выключается и браузер спокойно прокручивает к ссылке.
	   Замечание Codex 25.08.2026. */
	html.k-lipkaya #sidebar > .widget:focus-within {
		position: static;
	}
}

.k-blok {
	--k-tekst: #23262b;
	--k-tihiy: #7c828c;
	--k-akcent: #d81f2a;
	--k-liniya: #ebedf0;
	position: relative;
	display: block;
	margin-top: 24px;
}

/* ⭐ Разделитель между блоками: тонкая полоска во всю ширину колонки.
   Веня 25.08.2026: «между блоками полоска тонкая разделитель». Прежний приём
   с затухающей линией и точкой посередине убран.
   ⛔ Полоска НЕ красная: рядом стоят красные надзаголовки, и второй акцент
   спорил бы с ними.
   ⚠️ Живёт ВНУТРИ прежнего промежутка 24 пикселя и своей высоты не добавляет,
   иначе блоки разъезжаются. */
.k-blok::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 1px;
	background: #e6e8ec;
	pointer-events: none;
}

/* ⭐ Карточка блока повторяет карточку меню разделов: тот же радиус, та же
   рамка и та же тень. Это и есть «единый стиль»: набор читается как одно
   семейство, а не как три случайные плашки. */
.k-karta {
	overflow: hidden;
	border: 1px solid var(--k-liniya);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(24, 32, 45, .06);
}

#sidebar .widget .k-spisok,
.k-spisok {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

#sidebar .widget .k-spisok > li,
.k-spisok > li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

.k-spisok > li::before,
.k-spisok > li::after,
.k-spisok > li::marker {
	content: none !important;
	display: none !important;
}

.k-spisok > li + li {
	border-top: 1px solid #f1f2f4 !important;
}

/* ------------------------------------------------ баннер для дилеров */
/* ⚠️ Баннер ТЁМНЫЙ, а не красный: в шапке сайта уже стоит красная кнопка
   «Стать дилером», и второй красный прямоугольник рядом спорил бы с ней.
   Красным здесь остаётся только кнопка внутри. */
/* ⛔⭐⭐ Селектор обязан быть узким: класс `k-diler` носит И этот баннер, И
   пункт верхнего меню с кнопкой «Стать дилером». Без `#sidebar` заливка
   баннера уходила в шапку и рисовала там тёмный прямоугольник, который
   торчал ниже плашки меню (поймано кадром 25.08.2026).
   ⚠️ Искать такое поиском по `background-color` бесполезно: заливка задана
   градиентом, а он лежит в `background-image`. */
#sidebar .k-diler {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 18px;
	border-radius: 16px;
	background: linear-gradient(155deg, #232629 0%, #131416 62%);
	box-shadow: 0 6px 20px rgba(24, 32, 45, .12);
}

.k-diler__nad {
	color: #ff6169;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

.k-diler__zagolovok {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.k-diler__nadpis {
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
	line-height: 1.45;
}

.k-diler__knopka {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin-top: 2px;
	padding: 0 14px;
	border-radius: 10px;
	background: var(--k-akcent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .16s ease;
}

.k-diler__knopka:hover,
.k-diler__knopka:visited {
	color: #fff;
}

.k-diler__knopka:hover {
	background: #b3141e;
}

.k-diler__knopka:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

#ajax-content-wrap .k-diler__knopka svg,
.k-diler__knopka svg {
	flex: 0 0 15px;
	width: 15px !important;
	height: 15px !important;
	max-width: 15px;
}

/* ---------------------------------------------------- строка обзора */
/* ⭐ Раскладка задана Веней 25.08.2026: слева квадратный снимок, справа текст
   чуть выше середины по высоте снимка, а переход прижат к правому нижнему
   углу строки. Никаких меток и дат: «больше ничего нет, нет приписок». */
/* ⛔⭐⭐ Селектор с идентификатором обёртки ОБЯЗАТЕЛЕН: тема задаёт ссылкам в
   виджете `display: block`, и строка обзора разваливалась на снимок сверху и
   текст под ним (замер 25.08.2026: display=block вместо flex). */
#sidebar .widget .k-material__ssylka,
.k-material__ssylka {
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding: 12px 14px;
	color: var(--k-tekst);
	text-decoration: none;
	transition: background-color .15s ease;
}

#sidebar .widget .k-material__ssylka:visited,
.k-material__ssylka:visited {
	color: var(--k-tekst);
}

#sidebar .widget .k-material__ssylka:hover,
.k-material__ssylka:hover,
.k-material__ssylka:focus-visible {
	background: #f5f6f8;
	color: var(--k-tekst);
}

.k-material__ssylka:focus-visible {
	outline: 2px solid var(--k-akcent);
	outline-offset: -2px;
}

/* ⚠️ Поле снимка задано жёстко и с идентификатором обёртки: тема раздувает
   любую вложенную графику до ширины ячейки (то же было с плитками разделов). */
#sidebar .widget .k-material__pole,
.k-material__pole {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	/* тот же спокойный фон, что у плиток категорий и полей подбора */
	background: #f6f6f6;
}

#ajax-content-wrap .k-material__snimok,
.k-material__snimok {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px;
	margin: 0;
	border-radius: 10px;
	/* фотография сцены кадрируется по центру, а не вписывается целиком */
	object-fit: cover;
}

#sidebar .widget .k-material__slova,
.k-material__slova {
	display: flex;
	flex-direction: column;
	/* ⚠️ Высоту снимка держим, чтобы строка не становилась ниже квадрата, но
	   содержимое прижато к верху: переход идёт сразу за заголовком. */
	justify-content: flex-start;
	min-height: 72px;
	min-width: 0;
	padding-top: 2px;
}

/* ⚠️ Тот же случай: без обёртки в селекторе тема ставила `flow-root`, и
   обрезка на две строки с многоточием не работала вовсе. Веня 25.08.2026:
   «текст в этих трёх не более 2 строк и троеточие». */
#sidebar .widget .k-material__imya,
.k-material__imya {
	/* ⚠️ Важность обязательна: даже с обёрткой в селекторе тема оставляла
	   flow-root, и обрезка на две строки не включалась (замер 25.08.2026). */
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

/* ⭐⭐ Блок обзоров показывается только на БОЛЬШОМ мониторе: «если монитор
   большой, добавляется 3 статьи из обзоров» (Веня 25.08.2026). На меньших
   экранах колонка и без него дотягивается до низа каталога, а лишний блок
   отжимал бы товары. Порог 1360: это ширина окна, на которой у сайта уже
   стоит полная колонка 260 плюс сетка из четырёх карточек. */
.k-blok--bolshoy {
	display: none;
}

@media (min-width: 1360px) {
	.k-blok--bolshoy {
		display: block;
	}
}

/* строка обзора: фото слева, справа заголовок, метка и переход */
#sidebar .widget .k-material__dalshe,
.k-material__dalshe {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	gap: 6px;
	/* ⚠️ Было `auto`, то есть прижато к самому низу строки. Веня 25.08.2026:
	   «далее подними выше». Теперь переход идёт сразу под заголовком. */
	margin-top: 6px;
	color: var(--k-akcent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}

#ajax-content-wrap .k-material__dalshe svg,
.k-material__dalshe svg {
	flex: 0 0 13px;
	width: 13px !important;
	height: 13px !important;
	max-width: 13px;
	transition: transform .16s ease;
}

.k-material__ssylka:hover .k-material__dalshe svg {
	transform: translateX(3px);
}

/* ------------------------------------------------- помощь по каталогу */
/* ⭐ Спокойная развязка внизу колонки: линейный значок, заголовок и одна
   строка пояснения. Снимков здесь нет намеренно, блок должен читаться легче
   товаров и материалов над ним. */
.k-pomoshch__ssylka {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 68px;
	padding: 12px 16px;
	color: var(--k-tekst);
	text-decoration: none;
	transition: background-color .15s ease;
}

#sidebar .widget .k-pomoshch__ssylka:visited,
.k-pomoshch__ssylka:visited {
	color: var(--k-tekst);
}

#sidebar .widget .k-pomoshch__ssylka:hover,
.k-pomoshch__ssylka:hover,
.k-pomoshch__ssylka:focus-visible {
	background: #f5f6f8;
	color: var(--k-tekst);
}

.k-pomoshch__ssylka:focus-visible {
	outline: 2px solid var(--k-akcent);
	outline-offset: -2px;
}

#ajax-content-wrap .k-pomoshch__znachok,
.k-pomoshch__znachok {
	flex: 0 0 22px;
	width: 22px !important;
	height: 22px !important;
	max-width: 22px;
	color: #4a505a;
	transition: color .15s ease;
}

.k-pomoshch__ssylka:hover .k-pomoshch__znachok {
	color: var(--k-akcent);
}

.k-pomoshch__slova {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.k-pomoshch__imya {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.k-pomoshch__nadpis {
	color: var(--k-tihiy);
	font-size: 12px;
	line-height: 1.35;
}

/* ------------------------------------------------- хвост карточки */
.k-karta__hvost {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border-top: 1px solid #f1f2f4;
	color: var(--k-akcent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease;
}

.k-karta__hvost:hover,
.k-karta__hvost:visited {
	color: var(--k-akcent);
}

.k-karta__hvost:hover {
	background: #fdeef0;
}

.k-karta__hvost:focus-visible {
	outline: 2px solid var(--k-akcent);
	outline-offset: -2px;
}

#ajax-content-wrap .k-karta__hvost svg,
.k-karta__hvost svg {
	flex: 0 0 14px;
	width: 14px !important;
	height: 14px !important;
	max-width: 14px;
}

/* ------------------------------------------------ планшет: в ряд */
/* ⚠️ От 691 до 999 колонка встаёт НАД товарами во всю ширину. В столбик блоки
   отжали бы сетку почти на два экрана вниз, поэтому раскладываем их рядом. */
@media (max-width: 999px) and (min-width: 691px) {
	.k-blok {
		margin-top: 20px;
	}

	.k-blok::before {
		top: -10px;
	}

	#sidebar .k-diler {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 16px;
	}

	.k-diler__nadpis {
		flex: 1 1 260px;
	}

	.k-diler__knopka {
		margin-left: auto;
	}

	#sidebar .widget .k-spisok,
	.k-spisok {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k-spisok > li + li {
		border-top: 0 !important;
	}

	.k-spisok > li:nth-child(n + 3) {
		border-top: 1px solid #f1f2f4 !important;
	}

	.k-spisok > li:nth-child(even) {
		border-left: 1px solid #f1f2f4 !important;
	}
}

/* ------------------------------------------------------------ телефон */
/* ⛔ На телефоне из колонки остаётся ТОЛЬКО баннер для оптовых покупателей:
   разделы дублирует плитка над товарами, а два списка по четыре строки
   отодвинули бы сам каталог на экран вниз. Сам `#sidebar` при этом показан,
   правило его скрытия отменяется точечно. */
@media (max-width: 690px) {
	body.tax-product_cat #sidebar,
	body.tax-product_tag #sidebar,
	body.post-type-archive-product #sidebar {
		display: block;
	}

	body.tax-product_cat #sidebar .widget > *:not(.k-diler),
	body.tax-product_tag #sidebar .widget > *:not(.k-diler),
	body.post-type-archive-product #sidebar .widget > *:not(.k-diler) {
		display: none;
	}

	/* ⛔ Разделителя на телефоне нет: из колонки виден только тёмный баннер,
	   отделять его не от чего. */
	.k-blok::before {
		content: none;
	}

	#sidebar .k-diler {
		margin: 0 0 18px;
		padding: 16px;
		gap: 8px;
	}

	.k-diler__zagolovok {
		font-size: 17px;
	}

	.k-diler__nadpis {
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-material__ssylka,
	.k-karta__hvost,
	.k-diler__knopka {
		transition: none;
	}
}


/* ⛔ На планшете блок для дилеров сжимался в строку, и кнопка уезжала за
   правый край карточки (кадр 26.08.2026 на 768). Возвращаем столбик. */
@media (min-width: 691px) and (max-width: 999px) {
	#sidebar .k-diler {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	#sidebar .k-diler__knopka {
		width: auto;
	}

	/* ⛔⭐⭐ Выше, в блоке `@media (max-width: 999px) and (min-width: 691px)`,
	   стоят `flex: 1 1 260px` у подписи и `margin-left: auto` у кнопки. Оба
	   написаны под СТРОКУ, а здесь карточка развёрнута в СТОЛБЕЦ, и там 260
	   читаются уже как ВЫСОТА. Замер 28.08.2026 на ширине 768: подпись
	   занимала 260 пикселей вместо 36, карточка росла до 405, и между
	   текстом и кнопкой зияла пустота на треть экрана.
	   В столбце размер даёт содержимое, поэтому оба правила отменяем. */
	#sidebar .k-diler__nadpis {
		flex: 0 0 auto;
	}

	#sidebar .k-diler__knopka {
		margin-left: 0;
	}
}

/* ⭐ Кнопка блока для дилеров на телефоне была целью 163 на 23 пикселя. */
@media (max-width: 690px) {
	#sidebar .k-diler__knopka,
	.k-opt .k-diler__knopka {
		min-height: 40px;
	}
}