/* Модуль "Список ножей" для GameCMS — стили блока на сайте.
   Два оформления, переключаются в админке («Оформление блока»):
     .kl-skin-never — под шаблон never (фиолетовый фон, розовые акценты);
     .kl-skin-block — под Standart / Standart Pro (родные .block и .block_head шаблона, цвета темы).
   Базовые правила ниже — это вид never; оформление Standart перекрывает их в своём разделе. */

/* =====================================================================
   NEVER
   ===================================================================== */

/* Сам блок. На шаблоне never его рамку, фон и RGB-подсветку рисует шаблон (класс .block);
   на других шаблонах и в админке тот же вид дают эти правила */
.block.kl-block,
.kl-block {
	position: relative;
	margin: 15px 0 0;
	padding: 24px 16px;
	overflow: hidden;
	border: 1px solid rgba(236, 41, 223, .38);
	border-radius: 15px;
	background: linear-gradient(180deg, rgba(44, 13, 53, .96), rgba(23, 5, 31, .98)), #220829;
	box-shadow: 0 0 22px rgba(236, 41, 223, .42), inset 0 0 24px rgba(236, 41, 223, .08);
	font-family: inherit;
	color: #fff;
	box-sizing: border-box;
}
.kl-block *, .kl-modal * { box-sizing: border-box; }

/* Полоса заголовка — как .block_card_header у остальных блоков never */
.kl-skin-never .kl-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	border-radius: 15px;
	background: linear-gradient(90deg, rgba(84, 26, 79, .96), rgba(97, 33, 89, .94));
	box-shadow: inset 0 0 18px rgba(236, 41, 223, .12);
}
.kl-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kl-head-text { min-width: 0; }
.kl-icon {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, #7b2cff 0%, #ec29df 55%, #ff72a8 100%);
	box-shadow: 0 0 18px rgba(236, 41, 223, .45);
	font-size: 22px;
	color: #fff;
}
.kl-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff; }
.kl-subtitle { margin-top: 2px; font-size: 12px; color: #d9b8dc; }

/* Кнопка магазина в заголовке */
.kl-store {
	display: inline-block;
	margin-right: 4px;
	padding: 10px 22px;
	border-radius: 10px;
	background: linear-gradient(135deg, #7b2cff 0%, #ec29df 55%, #ff72a8 100%);
	box-shadow: 0 0 14px rgba(236, 41, 223, .35);
	font-size: 13px;
	font-weight: 600;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: filter .2s, transform .2s, box-shadow .2s;
}
.kl-store:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0 20px rgba(236, 41, 223, .55); }

/* Подсказка в пунктирной рамке */
.kl-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 1px dashed rgba(236, 41, 223, .45);
	border-radius: 10px;
	background: rgba(255, 79, 184, .06);
	font-size: 12px;
	font-weight: 500;
	color: #d9b8dc;
}
.kl-notice i { flex-shrink: 0; font-size: 18px; color: #ff4fb8; }

/* Сетка (лента выключена) */
.kl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

/* Лента карточек, которая едет по кругу */
.kl-slider { position: relative; }
.kl-viewport {
	overflow: hidden;
	margin: -4px 0 -6px;
	padding: 4px 0 6px;
	touch-action: pan-y;
}
/* .kl-shift — слой для плавного доезда по стрелкам, .kl-track — сама лента (её двигает анимация браузера) */
.kl-shift { will-change: transform; }
.kl-track {
	display: flex;
	gap: 10px;
	will-change: transform;
	-webkit-user-select: none;
	user-select: none;
}
.kl-track .kl-card {
	flex: 0 0 calc((100% - 10px * (var(--kl-per, 5) - 1)) / var(--kl-per, 5));
	min-width: 0;
}
.kl-track img { -webkit-user-drag: none; pointer-events: none; }

/* Стрелки ленты */
.kl-nav {
	position: absolute;
	top: 38%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 0 3px;
	border: 1px solid rgba(236, 41, 223, .45);
	border-radius: 50%;
	background: rgba(23, 5, 31, .9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	font-size: 24px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .2s, background .2s;
}
.kl-prev { left: 6px; }
.kl-next { right: 6px; }
.kl-slider:hover .kl-nav, .kl-nav:focus-visible { opacity: 1; }
.kl-nav:hover { background: linear-gradient(135deg, #7b2cff 0%, #ec29df 55%, #ff72a8 100%); }
@media (hover: none) { .kl-nav { opacity: .85; } }

/* Карточка ножа */
.kl-card {
	overflow: hidden;
	border: 1px solid rgba(236, 41, 223, .3);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(97, 33, 89, .55), rgba(42, 11, 51, .92));
	cursor: pointer;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}
.kl-card:hover {
	border-color: rgba(255, 79, 184, .85);
	box-shadow: 0 0 16px rgba(236, 41, 223, .35);
	transform: translateY(-3px);
}
.kl-card:focus-visible { outline: 2px solid #ff4fb8; outline-offset: 2px; }
html.kl-noscroll { overflow: hidden; }

.kl-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: radial-gradient(circle at 50% 45%, rgba(236, 41, 223, .38) 0%, rgba(123, 44, 255, .18) 45%, transparent 75%), #1a0620;
}
.kl-img::before {
	content: "";
	position: absolute;
	width: 50%;
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='none' stroke='%23ff8fd0' stroke-opacity='.45' stroke-width='3'/%3E%3Cpolygon points='50,18 78,34 78,66 50,82 22,66 22,34' fill='none' stroke='%23ff8fd0' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kl-img img {
	position: relative;
	max-width: 92%;
	max-height: 92%;
	object-fit: contain;
	transition: transform .25s;
}
.kl-card:hover .kl-img img { transform: scale(1.06) rotate(-3deg); }
.kl-info { padding: 10px 12px 12px; }
.kl-name {
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kl-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
.kl-open { font-size: 12px; font-weight: 600; color: #ff4fb8; }
.kl-card-price { font-size: 12px; font-weight: 700; color: #ffc94d; white-space: nowrap; }

/* Окно с описанием ножа */
.kl-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 2, 14, .78);
}
.kl-modal.kl-show { display: flex; }
.kl-modal-box {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	border: 1px solid rgba(236, 41, 223, .5);
	border-radius: 15px;
	background: linear-gradient(180deg, #2c0d35, #17051f);
	box-shadow: 0 0 30px rgba(236, 41, 223, .35), 0 20px 50px rgba(0, 0, 0, .5);
	font-family: inherit;
	color: #fff;
}
.kl-modal-box .kl-img { aspect-ratio: 16 / 9; }
.kl-close {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 2;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}
.kl-close:hover { color: #ff4fb8; }
.kl-modal-body { padding: 16px 18px 20px; }
.kl-modal-body h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #fff; }
.kl-price { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #ffc94d; }
.kl-desc { margin-bottom: 10px; font-size: 13px; color: #d9b8dc; white-space: pre-line; }
.kl-sec { margin: 12px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #ff4fb8; }
.kl-list { margin: 0; padding: 0; list-style: none; }
.kl-list li {
	margin-bottom: 4px;
	padding: 7px 10px;
	border-radius: 8px;
	background: rgba(97, 33, 89, .45);
	font-size: 13px;
	color: #fff;
}

/* Нижняя панель окна ножа: значок корзины и кнопка «Купить» */
.kl-buy {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(97, 33, 89, .35);
	border: 1px solid rgba(236, 41, 223, .25);
}
.kl-buy-icon {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 79, 184, .7);
	border-radius: 50%;
	font-size: 20px;
	color: #ff4fb8;
}
.kl-buy-btn {
	display: inline-block;
	padding: 8px 18px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, #7b2cff 0%, #ec29df 55%, #ff72a8 100%);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff !important;
	text-decoration: none !important;
	transition: filter .2s, box-shadow .2s;
}
.kl-buy-btn:hover, .kl-buy-btn:focus-visible { filter: brightness(1.12); box-shadow: 0 0 14px rgba(236, 41, 223, .5); outline: none; }

@media (max-width: 575px) {
	.kl-store { width: 100%; margin: 0 0 4px; text-align: center; }
	.kl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   STANDART / STANDART PRO
   Рамку и заголовок блока рисует сам шаблон (его классы .block и .block_head),
   цвета берутся из его темы: --border-color (акцент) и --color-head (заголовок).
   ===================================================================== */
.kl-skin-block *, .kl-modal.kl-skin-block * { box-sizing: border-box; }
/* Заголовок блока — цвет и размер как у .block_head шаблона.
   Без этого Standart красил <span> заголовка в серый (.block .block_head span) — текст почти не был виден */
.kl-skin-block .block_head > span {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.kl-skin-block .kl-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.kl-skin-block .kl-bar-sub { font-size: 14px; color: #b5b5b5; }
.kl-skin-block .kl-store {
	margin: 0;
	padding: 10px 22px;
	border-radius: 10px;
	background: #ca0248;
	background: var(--border-color, #ca0248);
	box-shadow: none;
	font-size: 13px;
}
.kl-skin-block .kl-store:hover { filter: brightness(1.15); box-shadow: none; }
.kl-skin-block .kl-notice {
	margin: 16px 0 0;
	border-color: rgba(202, 2, 72, .55);
	border-color: color-mix(in srgb, var(--border-color, #ca0248) 55%, transparent);
	background: rgba(255, 255, 255, .03);
	font-size: 13px;
	color: #b5b5b5;
}
.kl-skin-block .kl-notice i { color: #ca0248; color: var(--border-color, #ca0248); }
.kl-skin-block .kl-slider, .kl-skin-block .kl-grid { margin-top: 20px; }
.kl-skin-block .kl-card {
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 15px;
	background: linear-gradient(1deg, rgba(58, 58, 70, .47) 30%, #3a3a46 100%);
	box-shadow: none;
}
.kl-skin-block .kl-card:hover { border-color: #ca0248; border-color: var(--border-color, #ca0248); box-shadow: none; }
.kl-skin-block .kl-card:focus-visible { outline-color: #ca0248; outline-color: var(--border-color, #ca0248); }
.kl-skin-block .kl-img, .kl-modal.kl-skin-block .kl-img {
	background: radial-gradient(circle at 50% 42%, rgba(202, 2, 72, .32) 0%, rgba(146, 31, 189, .14) 45%, transparent 75%), #16161f;
	background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--border-color, #ca0248) 32%, transparent) 0%, color-mix(in srgb, var(--color-head, #921fbd) 14%, transparent) 45%, transparent 75%), #16161f;
}
.kl-skin-block .kl-img::before, .kl-modal.kl-skin-block .kl-img::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='3'/%3E%3Cpolygon points='50,18 78,34 78,66 50,82 22,66 22,34' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='2'/%3E%3C/svg%3E");
}
.kl-skin-block .kl-name { color: #fff; }
.kl-skin-block .kl-open { color: #f0447f; color: color-mix(in srgb, var(--border-color, #ca0248) 65%, #fff); }
.kl-skin-block .kl-card-price { color: #fbab7e; }
.kl-skin-block .kl-nav { border-color: rgba(255, 255, 255, .08); background: rgba(10, 10, 26, .9); }
.kl-skin-block .kl-nav:hover { background: #ca0248; background: var(--border-color, #ca0248); }

/* Окно ножа — как окна шаблона (.modal-content) */
.kl-modal.kl-skin-block { background: rgba(5, 8, 14, .75); }
.kl-modal.kl-skin-block .kl-modal-box {
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 20px;
	background: linear-gradient(145deg, rgba(42, 42, 60, .98), rgba(31, 31, 45, .98));
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.kl-modal.kl-skin-block .kl-close:hover { color: #ca0248; color: var(--border-color, #ca0248); }
.kl-modal.kl-skin-block .kl-price { color: #fbab7e; }
.kl-modal.kl-skin-block .kl-desc { color: #b5b5b5; }
.kl-modal.kl-skin-block .kl-sec { color: #f0447f; color: color-mix(in srgb, var(--border-color, #ca0248) 65%, #fff); }
.kl-modal.kl-skin-block .kl-list li { background: rgba(255, 255, 255, .05); color: #e6e6ef; }
.kl-modal.kl-skin-block .kl-buy { border-color: transparent; background: rgba(255, 255, 255, .05); }
.kl-modal.kl-skin-block .kl-buy-icon { border-color: rgba(255, 181, 71, .7); color: #ffb547; }
.kl-modal.kl-skin-block .kl-buy-btn {
	border: 1px solid #ffb547;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	filter: none;
}
.kl-modal.kl-skin-block .kl-buy-btn:hover,
.kl-modal.kl-skin-block .kl-buy-btn:focus-visible { background: #ffb547; color: #131821 !important; }