/* Стили страниц группы «catalog». Подключается в inc/_meta.php только на этих страницах, после components.css.
   Сначала — доставшееся от подрядчика, затем наше поверх. */
.kln-pannel-overlay { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; content: ""; background: rgba(51, 51, 51, 0.2); z-index: -1; opacity: 0; visibility: hidden; transition: all .3s ease-in-out; }
.kln-container-row { display: flex; align-items: flex-start; margin-bottom: 60px; }
@media screen and (max-width: 992px) {
    .kln-container-row { display: block; }
}
@media screen and (max-width: 480px) {
    .kln-container-row { margin-bottom: 32px; }
}
.kln-container-row .kln-catalog-sidebar { width: 270px; margin-right: 40px; position: relative; z-index: 3000; }
@media screen and (max-width: 1200px) {
    .kln-container-row .kln-catalog-sidebar { width: 250px; margin-right: 20px; }
}
@media screen and (max-width: 992px) {
    .kln-container-row .kln-catalog-sidebar { display: block; width: 100%; }
}
.kln-container-row .kln-main-category { width: calc(100% - 270px - 40px); }
@media screen and (max-width: 1200px) {
    .kln-container-row .kln-main-category { width: calc(100% - 250px - 20px); }
}
@media screen and (max-width: 992px) {
    .kln-container-row .kln-main-category { width: 100%; }
}
.kln-add-basket .kln-btn__more { width: 100%; }
.kln-filter-wrap { background: #fff; border-radius: var(--kln-r-sm); border: 1px solid var(--kln-line); padding-top: 4px; }
.kln-filter-wrap__head { position: absolute; left: 0; top: 0; width: 100%; border-bottom: 2px solid var(--kln-line); height: 50px; padding: 12px; display: flex; align-items: center; color: var(--kln-ink); font-weight: 600; font-size: var(--kln-fs-sm); display: none; font-family: Jun-kalina, serif; }
@media screen and (max-width: 992px) {
    .kln-filter-wrap__head { display: flex; }
}
.kln-filter-wrap__close { position: absolute; top: 0; right: 0; z-index: 2; }
@media screen and (max-width: 992px) {
    .kln-filter-wrap { background: var(--kln-surface); position: fixed; z-index: 3000; visibility: hidden; opacity: 0; }
    .kln-filter-wrap::-webkit-scrollbar { width: 2px; }
    .kln-filter-wrap::-webkit-scrollbar-track { box-shadow: none; }
    .kln-filter-wrap::-webkit-scrollbar-thumb { background-color: rgba(51, 51, 51, 0.1); outline: none; }
}
.kln-filter-wrap__bottom { padding: 20px 24px 20px 24px; display: flex; -webkit-box-orient: vertical; flex-direction: column; text-align: center; }
.kln-filter-wrap__bottom .kln-btn { margin-bottom: 16px; }
.kln-filter-wrap__reset { font-size: var(--kln-fs-sm); background: none; border: none; cursor: pointer; font-weight: 400; transition: all .2s ease-in-out; }
.kln-filter-wrap__reset:hover { background: none; color: var(--kln-red); text-decoration: underline; }
.kln-filter-wrap .bx-filter-container-modef { position: absolute; display: block; left: 100%; top: -5px; z-index: 1000; font-size: 0; width: 110px; height: 50px; transition: all .3s ease-in-out; }
.kln-filter-wrap .bx-filter-container-modef:before { border: 5px solid transparent; border-right: 5px solid var(--kln-red); content: ""; position: absolute; left: -9px; top: 50%; transform: translate(0, -50%); }
.kln-filter-wrap .bx-filter-container-modef:hover { background: color-mix(in srgb, var(--kln-red) 80%, transparent); }
.kln-filter-block { border-bottom: 1px solid var(--kln-line); margin-bottom: 0; position: relative; }
.kln-filter-block._noslide .kln-filter-block__title:before { display: none; }
.kln-filter-block._noslide .kln-filter-block__content { display: block; }
.kln-filter-block:hover .kln-filter-block__title:before { opacity: 1; }
.kln-filter-block__title { padding: 12px 24px; user-select: none; cursor: pointer; font-size: var(--kln-fs-md); font-family: var(--kln-font); color: var(--kln-ink); font-weight: 400; line-height: 1.2; position: relative; margin-bottom: 0; }
@media screen and (max-width: 992px) {
    .kln-filter-block__title { padding: 12px; }
}
.kln-filter-block__title:before { width: 12px; height: 12px; content: ""; background: url(../../img/filter-arrow.svg) no-repeat center; background-size: contain; position: absolute; top: 50%; right: 20px; margin-top: -6px; transition: all .4s ease-in-out; opacity: 0; }
@media screen and (max-width: 992px) {
    .kln-filter-block__title:before { right: 13px; }
}
.kln-filter-block__content { padding: 4px 24px 16px; display: none; }
@media screen and (max-width: 992px) {
    .kln-filter-block__content { padding: 4px 12px 12px; }
}
.kln-filter-search { margin-bottom: 4px; border: 1px solid var(--kln-border); width: 100%; height: 30px; display: block; padding: 0px 4px; font-size: var(--kln-fs-sm); border-radius: var(--kln-r-sm); }
.kln-filter-list { max-height: 266px; overflow-y: auto; }
@media screen and (max-width: 768px) {
    .kln-filter-list { width: 90%; }
}
.kln-filter-list::-webkit-scrollbar { width: 1px; }
.kln-filter-list::-webkit-scrollbar-track { box-shadow: inset 0 0 2px var(--kln-line); }
.kln-filter-list::-webkit-scrollbar-thumb { background-color: var(--kln-line); outline: 1px solid var(--kln-line); }
.kln-filter-price__line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.kln-filter-price__col { flex: 1 1 0; min-width: 0; position: relative; }
.kln-filter-price__input { height: 35px; width: 100%; padding: 0px 4px 0px 32px; font-size: var(--kln-fs-sm); background: transparent; font-family: var(--kln-font); position: relative; z-index: 3; }
.kln-filter-price__label { font-size: var(--kln-fs-xs); color: rgba(51, 51, 51, 0.5); display: block; position: absolute; left: 7px; font-weight: 600; top: 50%; margin-top: -8px; }
@media screen and (max-width: 992px) {
    .kln-filter-price__label { padding-left: 4px; }
}
.kln-filter-choice { position: relative; }
.kln-filter-choice__val { position: absolute; left: 0px; top: 5px; opacity: 0; }
.kln-filter-choice__val:checked + .kln-filter-choice__label { color: var(--kln-red); }
.kln-filter-choice__val:checked + .kln-filter-choice__label:before { border-color: var(--kln-red); background: var(--kln-red); }
.kln-filter-choice__val:checked + .kln-filter-choice__label:after { opacity: 1; }
.kln-filter-choice__label { min-height: 13px; position: relative; font-size: 15px; color: var(--kln-text); cursor: pointer; transition: all .3s ease-in-out; line-height: 1.2; padding: 4px 0px 4px 24px; display: block; user-select: none; }
.kln-filter-choice__label:before { width: 12px; height: 12px; content: ""; border: 1px solid rgba(51, 51, 51, 0.5); border-radius: 4px; position: absolute; left: 0; top: 50%; margin-top: -8px; transition: all .3s ease-in-out; }
.kln-filter-choice__label:after { width: 12px; height: 12px; content: ""; border: 1px solid transparent; background: url(../../img/check.svg) no-repeat center; background-size: 8px 8px; position: absolute; left: 0; top: 50%; margin-top: -8px; opacity: 0; transition: all .3s ease-in-out; }
.kln-filter-choice__label:hover { color: var(--kln-red); }
.kln-filter-labels { list-style: none; display: flex; }
.kln-filter-labels .kln-filter-label { display: block; white-space: nowrap; text-decoration: none; text-align: center; position: relative; }
.kln-filter-labels .kln-filter-label:before { content: ""; position: absolute; top: 50%; border-radius: 50%; }
.kln-filter-label.__hit:before { background: var(--kln-ink); }
.kln-filter-label.__hit:hover { color: var(--kln-ink); }
.kln-sorting-wrapper { display: flex; align-items: center; }
.kln-prod-sorting { position: relative; user-select: none; }
.kln-prod-sorting__current { display: inline-block; position: relative; cursor: pointer; white-space: nowrap; user-select: none; }
.kln-prod-sorting__current:hover { text-decoration: underline; color: var(--kln-red); }
.kln-prod-sorting__list { background: #fff; position: absolute; color: var(--kln-text); white-space: nowrap; z-index: 600; opacity: 0; visibility: hidden; transition: all .3s ease-in-out; }
.kln-prod-sorting__el { display: block; position: relative; cursor: pointer; transition: all .3s ease-in-out; line-height: 1.2; color: var(--kln-text); white-space: nowrap; user-select: none; text-decoration: none; }
.kln-prod-sorting__el:hover { text-decoration: underline; color: var(--kln-red); }
.bx-filter-container-modef { display: block; padding: 0px 24px; }
@media screen and (max-width: 992px) {
    .bx-filter-container-modef { padding: 0px 12px; }
}
.kln-range-price { margin: 12px 8px; }
.kln-range-price.ui-widget-content { background: var(--kln-bg); border: none; height: 2px; }
.kln-range-price .ui-slider-range { background: var(--kln-red); }
.kln-range-price .ui-slider-handle { top: -9px; width: 18px; height: 18px; border: 0px; border-radius: 50%; font-size: 0; background: var(--kln-red); margin-left: -8px; }
.kln-option-category { position: relative; z-index: 10; border-radius: var(--kln-r-sm); display: flex; z-index: 999; }
@media screen and (max-width: 400px) {
    .kln-option-category { justify-content: space-between; }
}
.kln-option-category .kln-show-mobile-filter { margin-right: 40px; }
@media screen and (max-width: 400px) {
    .kln-option-category .kln-show-mobile-filter { margin-right: 20px; }
}
@media screen and (max-width: 768px) {
    .kln-option-category .kln-filter-labels { display: none; }
}
.kln-show-mobile-filter { display: none; padding-left: 32px; background: none; border: none; position: relative; font-size: var(--kln-fs-md); color: var(--kln-text); font-family: var(--kln-font); font-weight: 600; }
@media screen and (max-width: 992px) {
    .kln-show-mobile-filter { display: block; }
}
.kln-show-mobile-filter:before { width: 20px; height: 20px; content: ""; background: url(../../img/filter.svg) no-repeat center; background-size: contain; position: absolute; left: 0px; top: 50%; margin-top: -12px; }
.kln-filter-price__input {
    border: 1px solid var(--kln-border);
    border-radius: var(--kln-r-sm);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.kln-filter-price__input:focus { border-color: var(--kln-ink); box-shadow: none; outline: none; }
.kln-prod-sorting__el:hover { color: var(--kln-red); }
/* «Уже в корзине» — как в карточках каталога: спокойный зелёный с галочкой; при наведении — «Добавить ещё» красной кнопкой. */
.kln-add-basket._added::before { flex: 0 0 16px; width: 16px; }
/* Панель стоит в строке заголовка, чтобы фильтр и товары начинались сразу под ней. Пункты — кнопки с рамкой. */
.kln-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 32px; }
/* ---------- Каталог: заголовок, справа от него сортировка и ярлыки ---------- */
.kln-catalog-head .kln-title_page { margin-bottom: 0; }
.kln-catalog-head .kln-option-category { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; z-index: 40; }
/* выше сердечка на карточке (z-index 30), иначе оно поверх списка сортировки */
.kln-catalog-head .kln-sorting-wrapper { margin: 0; gap: 12px; }
.kln-catalog-head .kln-sorting-wrapper__title { margin: 0; font-size: var(--kln-fs-sm); font-weight: 400; color: var(--kln-muted); }
.kln-catalog-head .kln-prod-sorting__current { display: inline-flex; align-items: center; height: 40px; padding: 0 36px 0 16px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; font-size: var(--kln-fs-sm); line-height: 1; color: var(--kln-ink); transition: border-color .15s; }
.kln-catalog-head .kln-prod-sorting__current:hover { border-color: var(--kln-ink); color: var(--kln-ink); text-decoration: none; }
.kln-catalog-head .kln-prod-sorting__current:after { content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.kln-catalog-head .kln-prod-sorting__el { padding: 8px 0; font-size: var(--kln-fs-sm); }
.kln-prod-sorting__el.selected { color: var(--kln-red); }
.kln-catalog-head .kln-prod-sorting__list { top: calc(100% + 6px); left: 0; width: auto; min-width: 100%; padding: 8px 16px; border: 1px solid var(--kln-line); border-radius: var(--kln-r-sm); box-shadow: var(--kln-shadow-sm); }
.kln-catalog-head .kln-filter-labels { display: flex; gap: 8px; margin: 0; padding: 0; }
.kln-filter-labels__item { margin: 0; }
.kln-filter-labels .kln-filter-label { --dot: var(--kln-ink); height: 40px; padding: 0 16px 0 32px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; font-size: var(--kln-fs-sm); line-height: 38px; color: var(--kln-ink); transition: border-color .15s, background-color .15s; }
.kln-filter-labels .kln-filter-label:before { left: 14px; width: 8px; height: 8px; margin-top: -4px; background: var(--dot); }
.kln-filter-label.__discount { --dot: var(--kln-red); }
.kln-filter-label.__hit { --dot: var(--kln-ink); }
.kln-filter-label.__action { --dot: #011524; }
.kln-filter-labels .kln-filter-label:hover { border-color: var(--dot); color: var(--kln-ink); }
/* Выбранный ярлык: заливка цветом точки, повторное нажатие снимает фильтр. */
.kln-filter-labels .kln-filter-label.__active { border-color: var(--dot); background: var(--dot); color: #fff; } /* и при наведении: правило :hover выше красило текст тёмным */
.kln-filter-label.__active:before { background: #fff; }
/* Планшет и телефон: «Фильтр» — кнопка в рамке, как сортировка; ярлыки — строкой ниже (на телефоне листаются вбок). */
@media (max-width: 992px) {
    .kln-catalog-head .kln-option-category { width: 100%; gap: 12px 8px; }
    .kln-catalog-head .kln-show-mobile-filter { display: inline-flex; align-items: center; justify-content: center; height: 40px; margin: 0; padding: 0 16px 0 42px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; font-size: var(--kln-fs-sm); font-weight: 400; color: var(--kln-ink); cursor: pointer; transition: border-color .15s; } /* как у сортировки рядом */
    .kln-catalog-head .kln-show-mobile-filter:before { left: 14px; margin-top: -10px; }
    .kln-catalog-head .kln-show-mobile-filter:hover { border-color: var(--kln-ink); }
}
/* Планшет: «Фильтр» слева, сортировка и ярлыки прижаты вправо (и при переносе на вторую строку). */
@media (min-width: 769px) and (max-width: 992px) {
    .kln-catalog-head .kln-option-category { justify-content: flex-end; }
    .kln-catalog-head .kln-show-mobile-filter { margin-right: auto; }
}
/* Телефон: заголовок по центру, под ним «Фильтр», сортировка словами («Сначала дешевле») и ярлыки «Хит», «Со скидкой» — одной строкой,
   она листается вбок целиком; кнопки по 36px и чуть плотнее, чем на компьютере. Список сортировки в такой строке
   обрезался бы, поэтому он position: fixed (под кнопку его ставит main.js) и раскрывается маской сверху вниз. */
@media (max-width: 768px) {
    .kln-catalog-head { gap: 12px; margin-bottom: 16px; }
    .kln-catalog-head .kln-option-category { flex: none; flex-wrap: nowrap; width: calc(100% + 32px); gap: 6px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
    .kln-catalog-head .kln-option-category::-webkit-scrollbar { display: none; }
    .kln-catalog-head .kln-option-category > * { flex: none; }
    /* Заголовок и кнопки по центру; кнопки — пока строка помещается, длиннее — листается с левого края
       (justify-content: center срезал бы начало). */
    .kln-catalog-head .kln-title_page { width: 100%; text-align: center; text-wrap: balance; }
    .kln-catalog-head .kln-option-category > :first-child { margin-left: auto; }
    .kln-catalog-head .kln-option-category > :last-child { margin-right: auto; }
    .kln-catalog-head .kln-sorting-wrapper__title { display: none; }
    .kln-catalog-head :is(.kln-show-mobile-filter, .kln-prod-sorting__current) { height: 36px; }
    .kln-catalog-head .kln-show-mobile-filter { padding: 0 14px 0 38px; }
    .kln-catalog-head .kln-show-mobile-filter:before { left: 12px; }
    .kln-catalog-head .kln-prod-sorting__current { padding: 0 32px 0 14px; }
    .kln-catalog-head .kln-prod-sorting__current:after { right: 13px; }
    .kln-catalog-head .kln-filter-labels { flex-wrap: nowrap; gap: 6px; width: auto; margin: 0; padding: 0; overflow: visible; }
    .kln-catalog-head .kln-filter-labels .kln-filter-label { height: 36px; padding: 0 12px 0 26px; line-height: 34px; }
    .kln-catalog-head .kln-filter-labels .kln-filter-label:before { left: 11px; }
    /* top задаёт main.js — его не анимируем (иначе список «приезжал» снизу), раскрываем clip-path. */
    /* Открытый список main.js переносит в <body> (.kln-prod-sorting__list_float, открыт — .__open):
       iPhone Safari обрезает fixed-элемент внутри листающейся строки. */
    .kln-prod-sorting__list_float { padding: 8px 16px; border: 1px solid var(--kln-line); border-radius: var(--kln-r-sm); box-shadow: var(--kln-shadow-sm); }
    .kln-prod-sorting__list_float .kln-prod-sorting__el { padding: 8px 0; font-size: var(--kln-fs-sm); }
    :is(.kln-catalog-head .kln-prod-sorting__list, .kln-prod-sorting__list_float) { position: fixed; right: auto; min-width: max-content; clip-path: inset(-20px -20px 100% -20px); opacity: 0; transition: clip-path .35s cubic-bezier(.2, .8, .2, 1), opacity .2s, visibility 0s .35s; }
    :is(.kln-catalog-head .__act .kln-prod-sorting__list, .kln-prod-sorting__list_float.__open) { visibility: visible; clip-path: inset(-20px); opacity: 1; transition: clip-path .35s cubic-bezier(.2, .8, .2, 1), opacity .15s, visibility 0s; }
    :is(.kln-catalog-head, .kln-prod-sorting__list_float) .kln-prod-sorting__el { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
    :is(.kln-catalog-head .__act, .kln-prod-sorting__list_float.__open) .kln-prod-sorting__el { opacity: 1; transform: none; }
    :is(.kln-catalog-head .__act, .kln-prod-sorting__list_float.__open) .kln-prod-sorting__el:nth-child(2) { transition-delay: .04s; }
    :is(.kln-catalog-head .__act, .kln-prod-sorting__list_float.__open) .kln-prod-sorting__el:nth-child(3) { transition-delay: .08s; }
}
/* Плашка «Показать» у изменённого блока фильтра — в стиле кнопок сайта. */
.kln-filter-wrap .bx-filter-container-modef { border-radius: var(--kln-r-sm); background: var(--kln-red); box-shadow: 0 6px 18px color-mix(in srgb, var(--kln-red) 25%, transparent); }
.kln-filter-wrap .bx-filter-container-modef:hover { background: var(--kln-red-hover); }
.kln-filter-block__title { text-wrap-style: balance; }
/* Лёгкий ховер на строке свойства (у цены заголовок не кликается — без ховера). */
.kln-filter-block:not(._noslide) .kln-filter-block__title { transition: background-color .2s ease; }
@media (hover: hover) {
    .kln-filter-block:not(._noslide) .kln-filter-block__title:hover { background: var(--kln-soft); }
}
/* При первой загрузке такие свойства не выводит шаблон (catalog.smart.filter/main/template.php). После выбора значений
   фильтр пересчитывается на лету и ставит недоступным значениям класс disabled — если доступных не осталось,
   прячем весь блок, чтобы не висел пустой заголовок. Цена (без чекбоксов) не затрагивается.
   Блок с поиском (_search, длинные свойства вроде серии) показывает лишь часть значений — его не прячем. */
.kln-filter-block:not(._search):has(.kln-filter-choice__label):not(:has(.kln-filter-choice__label:not(.disabled))) { display: none; }
/* Стрелка у заголовка свойства в main.css видна только при наведении — на телефоне её не было видно до касания. */
.kln-filter-block__title:before { opacity: 1; }
/* Кнопки «Показать товары» / «Сбросить» — только когда фильтр применён (_applied) или в нём что-то изменили (_dirty);
   классы ставит catalog.smart.filter/main/template.php. Пустой фильтр без кнопок короче. */
.kln-filter-wrap:not(._applied):not(._dirty) .kln-filter-wrap__bottom { display: none; }
/* Без кнопок снизу линия под последним пунктом совпадает с рамкой блока — получалась двойная. */
.kln-filter-wrap:not(._applied):not(._dirty) .kln-filter-block:not(:has(~ .kln-filter-block)) { margin-bottom: 0; border-bottom: 0; }
@media (max-width: 992px) {
    .kln-filter-wrap { top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(380px, calc(100% - 40px)); max-width: none; height: 100dvh; padding: 0; border: 0; border-radius: 0 var(--kln-r-md) var(--kln-r-md) 0; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .18); overflow: hidden; transform: translateX(-105%); transition: transform .25s ease, opacity .25s ease, visibility .25s; }
    .kln-filter-wrap__head { position: relative; flex: 0 0 auto; height: auto; min-height: 56px; padding: env(safe-area-inset-top) 56px 0 16px; border-bottom: 1px solid var(--kln-line); background: #fff; font-family: var(--kln-font-head); font-size: var(--kln-fs-lg); font-weight: 400; }
    .kln-filter-wrap__close { top: env(safe-area-inset-top); width: 56px; height: 56px; }
    .kln-filter-wrap__form { flex: 1 1 auto; min-height: 0; padding: 4px 16px 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .kln-filter-wrap .clb { display: none; }
/* Кнопки всегда видны внизу панели (на компьютере — только после изменений, см. выше). */
    .kln-filter-wrap__bottom,
.kln-filter-wrap:not(._applied):not(._dirty) .kln-filter-wrap__bottom { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 12px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kln-line); background: #fff; text-align: left; }
    .kln-filter-wrap__bottom .kln-btn { margin: 0; }
/* Строки с галочками выше — по ним проще попасть пальцем. */
    .kln-filter-wrap .kln-filter-choice__label { padding-top: 8px; padding-bottom: 8px; }
    .kln-filter-wrap__reset { height: 48px; padding: 0 8px; font-size: var(--kln-fs-md); color: var(--kln-muted); }
    .kln-filter-wrap__bottom .bx-filter-popup-result { display: none !important; }
    .kln-filter-wrap .bx-filter-container-modef { display: none !important; }
}
@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
    .kln-filter-wrap { transition: none; }
}
/* ---------- Фильтр строкой над товарами (компьютер) ---------- */
/* Каталог с классом kln-container-row_top-filter (catalog/main и catalog/all, section.php): фильтр не в боковой колонке,
   а строкой кнопок над товарами, товары по 4 в ряд. Свойство раскрывается списком под кнопкой (класс _open ставит main.js),
   «Показать товары» / «Сбросить» — в конце строки, когда фильтр применён или изменён. Телефон и планшет — без изменений (панель слева). */
@media (min-width: 993px) {
    .kln-container-row_top-filter { display: block; }
    .kln-container-row_top-filter .kln-catalog-sidebar { width: auto; margin: 0 0 24px; z-index: 50; }
    .kln-container-row_top-filter .kln-main-category { width: 100%; }
    .kln-container-row_top-filter .kln-products-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .kln-container-row_top-filter .kln-filter-wrap { padding: 0; border: 0; border-radius: 0; background: none; }
    .kln-container-row_top-filter .kln-filter-wrap__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .kln-container-row_top-filter .kln-filter-wrap .clb { display: none; }
    .kln-container-row_top-filter .kln-filter-block,
    .kln-container-row_top-filter .kln-filter-wrap:not(._applied):not(._dirty) .kln-filter-block:not(:has(~ .kln-filter-block)) { border: 0; margin: 0; }
    /* Кнопка свойства — как «Сортировка» в шапке каталога. */
    .kln-container-row_top-filter .kln-filter-block__title { display: flex; align-items: center; height: 40px; padding: 0 36px 0 16px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; font-size: var(--kln-fs-sm); line-height: 1; white-space: nowrap; transition: border-color .15s; }
    .kln-container-row_top-filter .kln-filter-block:not(._noslide) .kln-filter-block__title:hover { background: #fff; }
    .kln-container-row_top-filter .kln-filter-block__title:hover,
    .kln-container-row_top-filter .kln-filter-block._open .kln-filter-block__title,
    .kln-container-row_top-filter .kln-filter-block:has(.kln-filter-choice__val:checked) .kln-filter-block__title { border-color: var(--kln-ink); }
    .kln-container-row_top-filter .kln-filter-block__title:before,
    .kln-container-row_top-filter .kln-filter-block._noslide .kln-filter-block__title:before,
    .kln-container-row_top-filter .kln-filter-block._active .kln-filter-block__title:before,
    .kln-container-row_top-filter .kln-filter-block__title.__on:before { display: block; right: 15px; width: 7px; height: 7px; margin-top: -6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; background: none; transform: rotate(45deg); transition: transform .15s; }
    .kln-container-row_top-filter .kln-filter-block._open .kln-filter-block__title:before { margin-top: -2px; transform: rotate(-135deg); }
    /* Список значений под кнопкой. !important — поверх _show и display, который оставляет slideToggle. */
    .kln-container-row_top-filter .kln-filter-block__content { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: none !important; width: max-content; min-width: 240px; max-width: 360px; padding: 12px 16px; border: 1px solid var(--kln-line); border-radius: var(--kln-r-sm); background: #fff; box-shadow: var(--kln-shadow-sm); }
    .kln-container-row_top-filter .kln-filter-block._open .kln-filter-block__content { display: block !important; }
    .kln-container-row_top-filter .kln-filter-block._noslide .kln-filter-block__content { width: 280px; }
    .kln-container-row_top-filter .kln-filter-block._search .kln-filter-block__content { width: 300px; }
    /* Плашка «Показать» справа от блока закрывала бы соседние кнопки — число товаров пишется в кнопке «Показать товары». */
    .kln-container-row_top-filter .kln-filter-wrap .bx-filter-container-modef,
    .kln-container-row_top-filter .kln-filter-wrap__bottom .bx-filter-popup-result { display: none !important; }
    .kln-container-row_top-filter .kln-filter-wrap #set_filter[data-count]:after { content: " (" attr(data-count) ")"; }
    .kln-container-row_top-filter .kln-filter-wrap__bottom { flex-direction: row; align-items: center; gap: 8px; padding: 0; margin-left: 8px; }
    .kln-container-row_top-filter .kln-filter-wrap__bottom .kln-btn { height: 40px; margin: 0; padding: 0 20px; font-size: var(--kln-fs-sm); }
    .kln-container-row_top-filter .kln-filter-wrap__reset { height: 40px; padding: 0 8px; color: var(--kln-muted); }
}
/* ---------- Шапка каталога как у бренда ---------- */
/* kln-catalog-head_center (catalog/main и catalog/all, section.php): подпись «N украшений в наличии · от …»
   (include/system/catalog_lead.php). Компьютер — заголовок по центру, подпись слева, сортировка и ярлыки справа,
   колонки 1fr | auto | 1fr держат заголовок ровно по центру (как news/brands/detail.css). Ниже — строка фильтра. */
.kln-catalog-lead { margin: 0; font-size: var(--kln-fs-sm); color: var(--kln-muted); }
@media (min-width: 993px) {
    /* Выше строки фильтра (z-index 50) — иначе список сортировки уходит под кнопки фильтра. */
    .kln-catalog-head.kln-catalog-head_center { display: grid; position: relative; z-index: 60; margin: -12px 0 40px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px 32px; }
    .kln-catalog-head_center .kln-title_page { grid-column: 2; grid-row: 1; text-align: center; }
    .kln-catalog-head_center .kln-catalog-lead { grid-column: 1; grid-row: 1; justify-self: start; text-wrap: balance; }
    .kln-catalog-head_center .kln-option-category { grid-column: 3; grid-row: 1; justify-self: end; justify-content: flex-end; width: auto; }
}
@media (min-width: 993px) and (max-width: 1279px) {
    .kln-catalog-head_center .kln-sorting-wrapper__title { display: none; } /* иначе ярлыки уходят под сортировку */
}
/* Телефон: подпись по центру под заголовком. */
@media (max-width: 768px) {
    .kln-catalog-head_center .kln-catalog-lead { width: 100%; margin-top: -6px; margin-bottom: 12px; font-size: 13px; text-align: center; }
    .kln-catalog-head_center .kln-title_page { padding-top: 8px; line-height: 1.1; }
}
/* Ярлыки («Со скидкой», «Хит»…) на компьютере — в начале строки фильтра (kln-top-labels в section.php), в шапке скрыты;
   на телефоне и планшете — в шапке, как раньше. */
.kln-top-labels { display: none; }
@media (min-width: 993px) {
    :is(.kln-catalog-head_center, .kln-catalog-head_brand) .kln-filter-labels { display: none; }
    .kln-catalog-head_brand { position: relative; z-index: 60; } /* список сортировки поверх строки фильтра, как в каталоге */
    /* Ярлыки и кнопки свойств — одним потоком: обёртка фильтра и форма не дают своих коробок (display: contents). */
    .kln-container-row_top-filter .kln-catalog-sidebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } /* по центру, как заголовок */
    .kln-container-row_top-filter :is(.kln-filter-wrap, .kln-filter-wrap__form) { display: contents; }
    .kln-top-labels { display: block; flex: none; }
    .kln-top-labels .kln-filter-labels { display: flex; gap: 8px; margin: 0; padding: 0; }
}
/* Фильтр применяется сразу (catalog.smart.filter/main/script.js, initInstant): кнопки «Показать товары» / «Сбросить» на компьютере
   не нужны. Свойство с выбранными значениями — тёмная кнопка с их числом и крестиком (renderTags); «Сбросить все» — в конце строки. */
.kln-filter-tags { display: none; }
@media (min-width: 993px) {
    .kln-container-row_top-filter .kln-filter-wrap__bottom { display: none !important; }
    .kln-filter-tags { display: flex; }
    .kln-filter-tags:empty { display: none; }
    .kln-container-row_top-filter .kln-filter-block._selected .kln-filter-block__title { padding-right: 60px; border-color: var(--kln-ink); }
    .kln-container-row_top-filter .kln-filter-block._selected .kln-filter-block__title:before { right: 38px; }
    .kln-filter-block__count { margin-left: 6px; color: var(--kln-muted); }
    .kln-filter-block__clear { position: absolute; top: 50%; right: 12px; width: 14px; height: 14px; margin-top: -7px; padding: 0; border: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 6px 6px no-repeat, var(--kln-ink); cursor: pointer; transition: background-color .15s; } /* чёрный кружок с белым крестиком */
    .kln-filter-block__clear:hover { background-color: var(--kln-red); }
    .kln-filter-tags__reset { height: 40px; padding: 0 8px; border: 0; background: none; font-family: var(--kln-font); font-size: var(--kln-fs-sm); color: var(--kln-muted); cursor: pointer; }
    .kln-filter-tags__reset:hover { color: var(--kln-red); text-decoration: underline; }
    .kln-main-category._loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
}
/* ---------- Страница бренда: строка «ярлыки, категории, Фильтр», фильтр — выезжающей панелью (компьютер) ---------- */
/* kln-container-row_panel-filter (news/brands/detail.php), строка — kln-brand-toolbar (component_epilog.php). Панель — те же правила,
   что у телефона (выше, max-width: 992px), открывает её main.js (.js_show_filter). Товары по 4 в ряд. */
.kln-brand-toolbar { display: none; }
@media (min-width: 993px) {
    .kln-container-row_panel-filter { display: block; }
    .kln-container-row_panel-filter .kln-catalog-sidebar { width: auto; margin: 0 0 24px; }
    .kln-container-row_panel-filter .kln-main-category { width: 100%; }
    .kln-container-row_panel-filter .kln-main-category .kln-brand-sections { display: none; } /* они в строке над товарами */
    .kln-container-row_panel-filter .kln-products-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .kln-brand-toolbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
    .kln-brand-toolbar .kln-filter-labels { display: flex; gap: 8px; margin: 0; padding: 0; }
    .kln-brand-toolbar .kln-brand-sections { display: contents; }
    .kln-brand-toolbar__filter { position: relative; height: 40px; padding: 0 16px 0 42px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; font-family: var(--kln-font); font-size: var(--kln-fs-sm); color: var(--kln-ink); cursor: pointer; transition: border-color .15s; }
    .kln-brand-toolbar__filter:before { content: ''; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url(../../img/filter.svg) no-repeat center / contain; }
    .kln-brand-toolbar__filter:hover { border-color: var(--kln-ink); }
    .kln-brand-filters:has(.kln-filter-wrap._applied) .kln-brand-toolbar__filter { border-color: var(--kln-ink); } /* фильтр применён */

    .kln-container-row_panel-filter .kln-filter-wrap { position: fixed; z-index: 3000; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 400px; height: 100dvh; padding: 0; border: 0; border-radius: 0 var(--kln-r-md) var(--kln-r-md) 0; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .18); overflow: hidden; visibility: hidden; opacity: 0; transform: translateX(-105%); transition: transform .25s ease, opacity .25s ease, visibility .25s; }
    .kln-container-row_panel-filter .kln-filter-wrap._active { visibility: visible; opacity: 1; transform: none; }
    .kln-container-row_panel-filter .kln-filter-wrap__head { position: relative; display: flex; flex: 0 0 auto; height: auto; min-height: 56px; padding: 0 56px 0 16px; border-bottom: 1px solid var(--kln-line); background: #fff; font-family: var(--kln-font-head); font-size: var(--kln-fs-lg); font-weight: 400; }
    .kln-container-row_panel-filter .kln-filter-wrap__close { top: 0; width: 56px; height: 56px; }
    .kln-container-row_panel-filter .kln-filter-wrap__form { flex: 1 1 auto; min-height: 0; padding: 4px 16px 0; overflow-y: auto; overscroll-behavior: contain; }
    .kln-container-row_panel-filter .kln-filter-wrap .clb { display: none; }
    .kln-container-row_panel-filter .kln-filter-wrap__bottom { position: sticky; bottom: 0; z-index: 3; display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 12px -16px 0; padding: 12px 16px; border-top: 1px solid var(--kln-line); background: #fff; text-align: left; }
    .kln-container-row_panel-filter .kln-filter-wrap__bottom .kln-btn { margin: 0; }
    .kln-container-row_panel-filter .kln-filter-wrap__reset { height: 48px; padding: 0 8px; font-size: var(--kln-fs-md); color: var(--kln-muted); }
    .kln-container-row_panel-filter :is(.kln-filter-wrap__bottom .bx-filter-popup-result, .kln-filter-wrap .bx-filter-container-modef) { display: none !important; }
    .kln-container-row_panel-filter .kln-filter-wrap #set_filter[data-count]:after { content: " (" attr(data-count) ")"; }
    body.kln-filter-open:has(.kln-container-row_panel-filter) { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
    body.kln-filter-open .kln-filter-host { z-index: 1001; }
    body.kln-filter-open .kln-pannel-overlay { background: rgba(17, 17, 17, .45); }
}
/* ---------- Страница результатов поиска (catalog.search/main, search.page/.default) ---------- */
.kln-search-page { position: relative; max-width: 640px; margin: 0 0 32px; padding: 0; }
@media (max-width: 600px) {
    .kln-search-page { margin-bottom: 24px; }
}