/* ========== Kalina: общие компоненты — кнопки, поля, карточки товаров, окна, заголовки блоков. Правила вёрстки — README.md.
   Сначала — правила, доставшиеся от подрядчика (переведены на токены), затем наши поверх них: порядок важен, не переставлять
   без проверки. Блоки по мере переписывания на kln- переезжают в layout.css или в стили своих страниц. ========== */

/* ---------- Наследие подрядчика ---------- */
/* Прокрутку держит html, а не body: так работает scrollbar-gutter (base.css) и страница не дёргается при открытии меню. */
html:has(> body.no-scroll) { overflow: hidden; }
.hidden { display: none !important; visibility: hidden !important; }
.kln-container,
.container { margin-right: auto; margin-left: auto; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 1280px; }
.container-fluid { margin-right: auto; margin-left: auto; }

/* ========== Кнопка kln-btn — единственная кнопка сайта ==========
   Вид: без модификатора — второстепенная (белая, красная рамка), _primary — главная (красная), _quiet — тихая (серая рамка, тёмный текст),
   _text — текстовая. Размер: M (по умолчанию, 46px, как поля), _l — 52px (главное действие страницы), _s — 36px, _adaptive — M, на телефоне S.
   _block — во всю ширину, _icon — квадратная под значок. Блоки задают кнопке только ширину и отступы снаружи. */
.kln-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--kln-h-control); padding: 0 24px; border: 1px solid var(--kln-red); border-radius: var(--kln-r-sm); background: #fff; color: var(--kln-red); font: 600 var(--kln-fs-md)/1.2 var(--kln-font); letter-spacing: normal; text-transform: none; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color .15s, border-color .15s, color .15s; -webkit-appearance: none; appearance: none; }
.kln-btn:hover { border-color: var(--kln-red-hover); background: var(--kln-red-soft); color: var(--kln-red-hover); text-decoration: none; }
.kln-btn:focus-visible { outline: none; box-shadow: var(--kln-ring); }
.kln-btn:disabled,
.kln-btn.disabled,
.kln-btn._disabled { opacity: .5; pointer-events: none; }
.kln-btn_primary { border-color: var(--kln-red); background: var(--kln-red); color: #fff; }
.kln-btn_primary:hover { border-color: var(--kln-red-hover); background: var(--kln-red-hover); color: #fff; }
.kln-btn_quiet { border-color: var(--kln-border); background: #fff; color: var(--kln-ink); }
.kln-btn_quiet:hover { border-color: var(--kln-border-strong); background: var(--kln-surface); color: var(--kln-ink); }
.kln-btn_text { height: auto; padding: 0; border: 0; background: none; color: var(--kln-red); }
.kln-btn_text:hover { background: none; color: var(--kln-red-hover); text-decoration: underline; }
/* Bootstrap (корзина, оформление) красит a:focus синим с подчёркиванием — у кнопки-ссылки в фокусе цвет как в покое. */
a.kln-btn:focus:not(:hover) { color: var(--kln-red); text-decoration: none; }
a.kln-btn_primary:focus:not(:hover) { color: #fff; }
a.kln-btn_quiet:focus:not(:hover),
a.kln-btn_glass:focus:not(:hover) { color: var(--kln-ink); }
.kln-btn_l { height: var(--kln-h-cta); }
.kln-btn_s { height: var(--kln-h-small); padding: 0 16px; font-size: var(--kln-fs-sm); }
@media (max-width: 480px) {
    .kln-btn_adaptive { height: var(--kln-h-small); padding: 0 16px; font-size: var(--kln-fs-sm); }
}
.kln-btn_block { display: flex; width: 100%; }
/* Долгое действие (переход к оформлению, отправка заказа): подпись прячется, по центру крутится индикатор,
   повторно нажать нельзя. Класс _loading ставит скрипт места. На основной кнопке индикатор белый, на остальных — красный.
   Двойной класс и a:focus — чтобы перебить цвет текста у a.kln-btn_primary:focus. */
.kln-btn._loading._loading,
.kln-btn._loading:is(:hover, :focus, :active),
a.kln-btn._loading:focus:not(:hover) { color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; transition: none; }
/* transition: none — подпись гаснет сразу, без плавной смены цвета; text-fill-color — Safari на iPhone после касания держал
   у кнопки состояние наведения с белым текстом, и подпись проступала под индикатором. */
.kln-btn._loading > * { visibility: hidden; }
.kln-btn._loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--kln-btn-spin, var(--kln-red)); border-right-color: transparent; border-radius: 50%; animation: kln-spin .7s linear infinite; }
.kln-btn_primary._loading { --kln-btn-spin: #fff; }
.kln-btn_icon { width: var(--kln-h-control); padding: 0; }
/* Значок и подпись внутри кнопки; форму значка задаёт --kln-icon (классы kln-icon_* в base.css или свой элемент). */
.kln-btn__icon { display: block; flex: 0 0 22px; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--kln-icon) no-repeat center / contain; mask: var(--kln-icon) no-repeat center / contain; }
.kln-btn__icon_collapse { display: none; } /* виден только в свёрнутой кнопке */
/* Значок перед подписью — слева отступ меньше: у значка свои поля, иначе слева пусто. :where — чтобы _collapse ниже перебивал. */
.kln-btn:where(:has(> .kln-btn__icon:not(.kln-btn__icon_collapse):first-child)) { padding-left: 16px; }
.kln-btn_s:where(:has(> .kln-btn__icon:not(.kln-btn__icon_collapse):first-child)) { padding-left: 12px; }
/* _glass — на полупрозрачной подложке (компактная шапка): светлая плашка, тёмный текст, красный значок. */
.kln-btn_glass { border-color: rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .5); color: var(--kln-ink); }
.kln-btn_glass:hover { border-color: rgba(0, 0, 0, .08); background: #fff; color: var(--kln-red); }
.kln-btn_glass .kln-btn__icon { color: var(--kln-red); }
/* _collapse — на планшете и телефоне кнопка сворачивается в значок 40×40 без рамки (шапка). */
@media (max-width: 1023px) {
    .kln-btn_collapse { width: 40px; height: 40px; padding: 0; border-color: transparent; background: none; color: var(--kln-ink); }
    .kln-btn_collapse:hover { border-color: transparent; background: none; color: var(--kln-red); }
    .kln-btn_collapse .kln-btn__label { display: none; }
    .kln-btn_collapse .kln-btn__icon { flex-basis: 26px; width: 26px; height: 26px; color: inherit; }
    .kln-btn_collapse .kln-btn__icon_collapse { display: block; }
}
@media (max-width: 359px) {
    .kln-btn_collapse { width: 34px; height: 34px; }
    .kln-btn_collapse .kln-btn__icon { flex-basis: 24px; width: 24px; height: 24px; }
}
/* ========== Поля формы ==========
   kln-input — поле, селект, многострочное (_area), маленькое (_s); kln-float — поле с подписью внутри (вход, регистрация);
   kln-password — поле пароля с «глазком»; kln-label, kln-hint, kln-error — подпись, подсказка, ошибка.
   Поле с кнопкой (поиск, промокод) — kln-search в layout.css, крупное — kln-search_l. Блоки задают полям только ширину и отступы снаружи. */
.kln-input { display: block; width: 100%; height: var(--kln-h-control); margin: 0; padding: 0 16px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; box-shadow: none; color: var(--kln-ink); font: var(--kln-fs-md)/1.4 var(--kln-font); transition: border-color .15s, box-shadow .15s; }
.kln-input::placeholder { color: var(--kln-muted); opacity: 1; }
.kln-input:focus { border-color: var(--kln-ink); box-shadow: none; outline: none; }
.kln-input._locked,
.kln-input:disabled { background: var(--kln-surface); color: var(--kln-muted); cursor: default; }
.kln-input._locked:focus { border-color: var(--kln-border); box-shadow: none; }
.kln-input._error { border-color: var(--kln-error); }
.kln-input_area { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.kln-input_s { height: var(--kln-h-small); padding: 0 12px; font-size: var(--kln-fs-sm); }
.kln-label { display: block; margin: 0 0 8px; font-size: var(--kln-fs-sm); font-weight: 600; color: var(--kln-ink); }
.kln-label .req { margin-left: 2px; color: var(--kln-red); }
.kln-hint { margin-top: 8px; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); text-wrap: balance; }
.kln-error { margin-top: 8px; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-error); }
/* Поле с подписью внутри: подпись поднимается при вводе (kalina.js). */
.kln-float { position: relative; display: block; margin: 0 0 12px; cursor: text; }
.kln-float__label { position: absolute; left: 15px; top: 50%; z-index: 2; max-width: calc(100% - 30px); overflow: hidden; font-size: var(--kln-fs-md); line-height: 1.2; color: var(--kln-muted); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transform: translateY(-50%); transform-origin: left top; transition: top .15s ease, font-size .15s ease, color .15s ease; }
.kln-input:focus + .kln-float__label,
.kln-input:not(:placeholder-shown) + .kln-float__label,
.kln-input:-webkit-autofill + .kln-float__label { top: 8px; font-size: var(--kln-fs-xs); color: var(--kln-muted); transform: none; }
.kln-input:focus + .kln-float__label { color: var(--kln-ink); }
.kln-float .kln-input { height: 56px; padding: 24px 16px 4px; border-color: var(--kln-border-strong); }
.kln-float .kln-input:hover { border-color: var(--kln-faint); }
.kln-float .kln-input:focus { border-color: var(--kln-ink); box-shadow: none; }
.kln-password .kln-float__label { max-width: calc(100% - 64px); }
@media (prefers-reduced-motion: reduce) {
    .kln-float__label { transition: none; }
}
/* Пароль: «глазок» справа показывает и прячет введённое (main.js). */
.kln-password { position: relative; }
.kln-password .kln-input { padding-right: 48px; }
.kln-password__eye { position: absolute; top: 50%; right: 0; z-index: 3; width: 48px; height: 32px; background: url(../img/eye.svg) no-repeat center / 16px 16px; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .3s; }
.kln-password__eye._on { opacity: 1; }
.kln-password__eye.view { background-image: url(../img/invisible.svg); }
/* ========== Заголовки ==========
   kln-title — заголовок на шрифте заголовков; размер и вид задаёт модификатор:
   _page — заголовок страницы (h1), _section — заголовок секции главной и слайдеров (прописные, разрядка),
   _sub — подзаголовок раздела (кабинет, пустые состояния), _s — маленький на основном шрифте (карточки «Доставка», бонусы),
   _eyebrow — надзаголовок: мелкие серые прописные (контакты, «О магазине»), _display — крупный (404).
   Секция со ссылкой «Смотреть все» или стрелками — kln-sec-head. Блоки задают заголовку только отступы и место. */
.kln-title { margin: 0; font-family: var(--kln-font-head); font-weight: 600; line-height: 1.2; color: var(--kln-ink); text-wrap: balance; }
.kln-title_page { margin-bottom: 52px; font-size: var(--kln-fs-page); }
.kln-title_section { font-size: var(--kln-fs-2xl); letter-spacing: .12em; text-transform: uppercase; }
.kln-title_sub { font-size: var(--kln-fs-xl); }
.kln-title_s { font-family: var(--kln-font); font-size: var(--kln-fs-lg); line-height: 1.4; }
.kln-title_eyebrow { font-family: var(--kln-font); font-size: var(--kln-fs-xs); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--kln-muted); }
.kln-title_display { font-size: var(--kln-fs-display); }
@media (max-width: 767px) {
    .kln-title_sub { font-size: var(--kln-fs-lg); }
}
@media (max-width: 480px) {
    .kln-title_page { margin-bottom: 32px; font-size: var(--kln-fs-page-sm); }
    .kln-title_section { font-size: var(--kln-fs-lg); letter-spacing: .08em; }
    .kln-title_display { font-size: var(--kln-fs-2xl); }
}
/* ========== Цена ==========
   kln-price — строка цены: __current — текущая, __old — старая (зачёркнута), __discount — плашка скидки.
   Размер: обычный — карточка товара; _l — страница товара; _s — строчная (поиск, истории, заказ в кабинете).
   Блок задаёт только выравнивание и отступы снаружи. */
/* Цифры цен на 15% меньше шрифтовой шкалы (29.10.2026). */
.kln-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kln-price__current { font-family: var(--kln-font-head); font-size: calc(var(--kln-fs-xl) * .85); font-weight: 400; line-height: 1.2; color: var(--kln-ink); white-space: nowrap; }
.kln-price__old { font-size: var(--kln-fs-md); line-height: 1.4; color: var(--kln-muted); text-decoration: line-through; white-space: nowrap; }
.kln-price_l .kln-price__current { font-size: calc(var(--kln-fs-2xl) * .89); } /* страница товара: на 5% крупнее остальных цен */
.kln-price_s { display: inline-flex; gap: 4px; align-items: baseline; }
.kln-price_s .kln-price__current { font-family: var(--kln-font); font-size: calc(var(--kln-fs-md) * .85); font-weight: 600; line-height: 1.4; }
.kln-price_s .kln-price__old { font-size: var(--kln-fs-xs); }
@media (max-width: 560px) {
    .kln-price { gap: 4px 8px; }
    .kln-price__current { font-size: calc(var(--kln-fs-lg) * .85); }
}
/* ========== Метки и счётчики ==========
   kln-badge — метка: по умолчанию серая; цвет — _sale (красная: скидка, распродажа, акция), _hit (чёрная), _new (зелёная),
   _soft (бежевая), _success (светло-зелёная: «Выполнен»), _muted (бледная: «Отменён»).
   Вид: _l — крупнее (метки карточки, статусы заказа), _pill — овальная, _caps — прописными, _adaptive — на телефоне мельче.
   kln-count — красный кружок с числом на значке (избранное, корзина); виден с ._filled, место задаёт блок. */
.kln-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: var(--kln-r-sm); background: var(--kln-surface); color: var(--kln-text); font-size: var(--kln-fs-sm); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.kln-badge_sale { background: var(--kln-red); color: #fff; }
.kln-badge_hit { background: var(--kln-ink); color: #fff; }
.kln-badge_new { background: var(--kln-success); color: #fff; }
.kln-badge_soft { background: var(--kln-soft); color: var(--kln-text); }
.kln-badge_success { background: var(--kln-success-soft); color: var(--kln-success); }
.kln-badge_muted { color: var(--kln-muted); font-weight: 400; }
.kln-badge_l { padding: 4px 12px; }
.kln-badge_pill { border-radius: 999px; }
.kln-badge_caps { text-transform: uppercase; }
@media (max-width: 480px) {
    .kln-badge_adaptive { padding: 2px 4px; font-size: var(--kln-fs-xs); }
}
.kln-count { display: none; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--kln-red); color: #fff; font-size: var(--kln-fs-xs); font-weight: 600; line-height: 18px; text-align: center; }
.kln-count._filled { display: block; }
/* ========== Крестик «закрыть» ==========
   kln-close — круглая кнопка с крестиком (окна, «Добавлено в корзину», фильтр на телефоне); _s — маленькая, серая.
   Место и, при необходимости, размер задаёт блок. */
.kln-close { position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.kln-close::before,
.kln-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; background: var(--kln-ink); transform: translate(-50%, -50%) rotate(45deg); }
.kln-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.kln-close:hover { background: var(--kln-surface); }
.kln-close_s { width: 28px; height: 28px; }
.kln-close_s::before,
.kln-close_s::after { width: 14px; background: var(--kln-muted); }
/* ========== Стрелка слайдера ==========
   kln-arrow — круглая кнопка «назад/вперёд» у каруселей и баннера: _prev — стрелка влево, _raised — на подложке с тенью
   (поверх фото), _adaptive — на планшете и телефоне меньше (30px). Место задаёт блок. */
.kln-arrow { position: relative; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; user-select: none; transition: background-color .3s ease-in-out; }
.kln-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; background: url(../img/right-arrow.svg) no-repeat center / contain; transform: translate(-50%, -50%); }
.kln-arrow::after { content: none; }
.kln-arrow_prev::before { transform: translate(-50%, -50%) rotate(-180deg); }
.kln-arrow:hover { background: var(--kln-red); }
.kln-arrow:hover::before { background-image: url(../img/right-arrow__white.svg); }
.kln-arrow_raised { z-index: 100; background: var(--kln-surface); box-shadow: var(--kln-shadow-sm); }
@media (max-width: 768px) {
    .kln-arrow_adaptive { width: 30px; height: 30px; }
    .kln-arrow_adaptive::before { width: 10px; height: 10px; }
}
/* ========== Постраничная навигация ==========
   kln-page-navigation — строка под списком товаров (system.pagenavigation/main_show_more, над ней «Показать больше»):
   kln-navigation — номера страниц, __link — ссылка (и «…»), __current — текущая страница. */
.kln-page-navigation { display: flex; justify-content: center; padding-top: 24px; }
.kln-navigation { display: flex; align-items: center; gap: 2px; list-style: none; }
.kln-navigation__link,
.kln-navigation__current { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; font-size: var(--kln-fs-sm); font-weight: 600; line-height: 0; text-decoration: none; transition: color .3s ease-in-out, background-color .3s ease-in-out; }
.kln-navigation__link { color: var(--kln-muted); }
.kln-navigation__link:hover { color: var(--kln-red); }
.kln-navigation__current { background: color-mix(in srgb, var(--kln-red) 50%, transparent); color: #fff; }
/* ========== Пустое состояние ==========
   kln-empty — пустая корзина, избранное, поиск без результатов: значок в круге (__icon: свой svg или __glyph с kln-icon_*),
   заголовок (kln-title kln-title_page + __title), подсказка (__text), действия (__actions: __btn — кнопка, __link — ссылка). */
.kln-empty { max-width: 520px; margin: 0 auto; padding: 48px 0 40px; text-align: center; }
.kln-empty__icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; background: var(--kln-soft); color: var(--kln-red); }
.kln-empty__icon svg,
.kln-empty__glyph { width: 40px; height: 40px; }
.kln-empty__glyph { background: currentColor; -webkit-mask: var(--kln-icon) no-repeat center / contain; mask: var(--kln-icon) no-repeat center / contain; }
.kln-empty__title { margin: 0 0 12px; }
.kln-empty__text { margin: 0 0 28px; font-size: var(--kln-fs-md); line-height: 1.5; color: var(--kln-muted); }
.kln-empty__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kln-empty__btn { min-width: 240px; }
.kln-empty__link { font-size: var(--kln-fs-md); color: var(--kln-text); }
.kln-empty__link:hover { color: var(--kln-red); }
/* Пустая страница (корзина, избранное): модификатор kln-container-wrapper_empty у белой области — без заголовка страницы,
   пустое состояние по центру всей белой области под «хлебными крошками»: её высота — экран минус её верх,
   --kln-empty-top и --kln-empty-gap (белый отступ над блоком) считает kalina.js (klnFitEmpty). */
.kln-container-wrapper.kln-container-wrapper_empty { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--kln-empty-top, 320px)); padding: 32px 0 calc(32px + var(--kln-empty-gap, 0px)); } /* снизу больше на белый отступ над блоком — центр по всей белой области */
.kln-container-wrapper_empty > .kln-container > .kln-title_page { display: none; } /* только заголовок страницы: у пустого состояния тот же класс */
.kln-container-wrapper_empty .kln-page-wrapper { margin-bottom: 0; }
.kln-container-wrapper_empty .kln-empty { padding: 0; }
@media (max-width: 767px) {
    .kln-empty { padding: 24px 0 20px; }
    .kln-empty__btn { min-width: 240px; } /* на телефоне кнопка по размеру, а не во всю ширину */
}
/* «В корзину» после добавления — зелёная «Уже в корзине» с галочкой; при наведении — «Добавить ещё» (span вставляют шаблон и JS). */
.kln-btn._added { border-color: transparent; background: var(--kln-success-soft); color: var(--kln-success); }
/* После нажатия ссылка остаётся в фокусе: без этого a.kln-btn_primary:focus:not(:hover) (строка ~30) красил текст белым,
   а кольцо фокуса было красным — на зелёном фоне текст пропадал. */
a.kln-btn._added:focus:not(:hover) { color: var(--kln-success); }
.kln-btn._added:focus-visible { box-shadow: var(--kln-ring); }
.kln-btn._added:before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.kln-btn__more { position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--kln-red); color: #fff; opacity: 0; transition: opacity .15s; }
@media (hover: hover) {
    .kln-btn._added:hover .kln-btn__more { opacity: 1; }
}
.kln-section { padding-top: 56px; padding-bottom: 72px; position: relative; z-index: 5; }
@media screen and (max-width: 480px) {
    .kln-section { padding-top: 40px; padding-bottom: 52px; }
}
@media screen and (max-width: 768px) {
    .kln-sec-head .kln-title_section { max-width: calc(100% - 120px); }
}
.kln-section_slider { z-index: 1; overflow: hidden; }
.kln-bread-crumbs-wrap { background: var(--kln-bg); padding: 8px 0px; margin-bottom: 52px; }
@media screen and (max-width: 480px) {
    .kln-bread-crumbs-wrap { margin-bottom: 20px; }
}
.kln-bread-crumbs { list-style: none; display: flex; flex-wrap: wrap; font-size: var(--kln-fs-sm); }
@media screen and (max-width: 480px) {
    .kln-bread-crumbs { font-size: var(--kln-fs-xs); }
}
.kln-bread-crumbs__item { margin-right: 40px; }
.kln-bread-crumbs__item:last-child { margin-right: 0px; }
.kln-bread-crumbs__link { display: block; position: relative; text-decoration: none; transition: all .3s ease-in-out; padding-bottom: 2px; }
.kln-bread-crumbs__link:hover { color: var(--kln-red); text-decoration: underline; }
.kln-bread-crumbs__link:before { width: 20px; top: 10px; height: 1px; right: -30px; content: ""; position: absolute; background: var(--kln-border); }
@media screen and (max-width: 480px) {
    .kln-bread-crumbs__link:before { top: 7px; }
}
.kln-container-wrapper { position: relative; }
.kln-container-wrapper .kln-container,
.kln-container-wrapper .container { position: relative; z-index: 2; }
.kln-pannel-overlay._show { opacity: 1; visibility: visible; z-index: 2500; }
.kln-register-recaptcha-text { font-size: var(--kln-fs-xs); margin-top: 16px; }
.location-block-wrapper .bx-sls .dropdown-block { border: 2px solid var(--kln-line); border-radius: var(--kln-r-sm); box-shadow: none; }
.location-block-wrapper .bx-sls .bx-ui-sls-container { height: 50px; }
.location-block-wrapper .bx-sls .bx-ui-sls-container input { height: 50px; font-family: var(--kln-font); }
.location-block-wrapper .bx-sls .bx-ui-sls-clear { height: 30px; top: 50%; margin-top: -16px; }
.location-block-wrapper .bx-sls .dropdown-icon { top: 50%; margin-top: -8px; left: 7px; }
.location-block-wrapper .bx-sls .bx-ui-sls-variants .bx-ui-sls-variant:hover { background-color: var(--kln-text); }
.location-block-wrapper .bx-sls .bx-ui-sls-variant-active { background-color: var(--kln-text); }
.kln-foot-shops { display: block; padding-left: 32px; position: relative; color: var(--kln-text); text-decoration: none; line-height: 1.2; transition: all .3s ease-in-out; }
.kln-foot-shops:before { width: 15px; height: 25px; content: ""; position: absolute; left: 0; top: 0; background: url(../img/poin.svg) no-repeat center; background-size: contain; }
.kln-foot-shops__city,
.kln-foot-shops__count { display: block; font-size: var(--kln-fs-md); }
.kln-foot-shops__city { transition: all .3s ease-in-out; }
.kln-foot-shops:hover { text-decoration: none; color: var(--kln-text); }
.kln-foot-shops:hover .kln-foot-shops__city { color: var(--kln-red); }
.kln-home-slider { position: relative; z-index: 5; }
.kln-home-slider .kln-carousel__slide { width: auto; padding-bottom: 36px; }
.kln-home-slider__item { display: block; overflow: hidden; border-radius: var(--kln-r-md); line-height: 0px; position: relative; transform: scale(0.97); user-select: none; }
.kln-home-slider__item:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0; top: 0px; background: #fff; opacity: .4; transition: all .3s ease-in-out; }
@media (max-width: 768px) {
    .kln-home-slider .kln-home-slider__prev,
    .kln-home-slider .kln-home-slider__next { display: none; }
}
.kln-h-about-gallery { width: calc(50% - 30px); margin-left: 0px; box-shadow: var(--kln-shadow-lg); }
@media screen and (max-width: 1200px) {
    .kln-h-about-gallery { width: 400px; }
}
@media screen and (max-width: 992px) {
    .kln-h-about-gallery { width: 100%; max-width: 500px; }
}
.kln-h-about-gallery__item { height: 425px; overflow: hidden; display: block; line-height: 0px; border-radius: var(--kln-r-sm); }
@media screen and (max-width: 1200px) {
    .kln-h-about-gallery__item { height: 330px; }
}
.kln-h-about-gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kln-el-category { display: flex; -webkit-box-orient: vertical; flex-direction: column; align-items: center; justify-content: center; width: 170px; height: 175px; background: #fff; border-radius: var(--kln-r-sm); border: 1px solid var(--kln-bg); text-align: center; color: var(--kln-text); text-decoration: none; user-select: none; position: relative; overflow: hidden; top: 0px; transition: all .3s ease-in-out; }
@media screen and (max-width: 768px) {
    .kln-el-category { width: 140px; height: 145px; }
}
@media screen and (max-width: 480px) {
    .kln-el-category { width: 105px; height: 110px; }
}
.kln-el-category:before { width: 100%; height: 3px; content: ""; background: var(--kln-red); position: absolute; left: 0; bottom: -3px; opacity: 0; transition: all .3s ease-in-out; }
.kln-el-category__img { height: 85px; line-height: 0px; width: calc(100% - 30px); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
@media screen and (max-width: 768px) {
    .kln-el-category__img { height: 55px; }
}
@media screen and (max-width: 480px) {
    .kln-el-category__img { height: 40px; }
}
.kln-el-category__img img { width: auto; max-width: 100%; height: auto; max-height: 100%; }
.kln-el-category__title { font-family: var(--kln-font); font-size: var(--kln-fs-md); font-weight: 400; line-height: 1.2; padding: 0px 12px; overflow: hidden; transition: all .3s ease-in-out; }
@media screen and (max-width: 480px) {
    .kln-el-category__title { font-size: var(--kln-fs-sm); }
}
.kln-el-category__name { font-size: var(--kln-fs-md); font-weight: 400; font-family: var(--kln-font); }
@media screen and (max-width: 480px) {
    .kln-el-category__name { font-size: var(--kln-fs-sm); }
}
@media (hover: hover) {
    .kln-el-category:hover { top: -5px; color: var(--kln-red); }
    .kln-el-category:hover:before { opacity: 1; bottom: 0px; }
    .kln-el-category:hover .kln-el-category__name { color: var(--kln-red); text-decoration: underline; }
}
/* ========== Карточка товара ==========
   Одна разметка для каталога, слайдеров, избранного и поиска (catalog.item: .default, slider, slider_product).
   __head — фото с метками (__labels) и «в избранное» (__favorite/__wish); __image — ссылка с фото (__photo, второе — __photo-next,
   у нескольких фото — листалка kln-hover-gallery); __body — бренд и название; __footer — наличие, цена (kln-price), «В корзину» (kln-btn).
   Ширину и отступы карточки задаёт список (kln-products-list) или слайдер. */
.kln-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--kln-line); border-radius: var(--kln-r-md); background: #fff; transition: border-color .15s, box-shadow .15s; }
/* Только там, где есть настоящее наведение: на iPhone :hover, который показывает второе фото или плашку, съедал первый тап — переход срабатывал со второго. */
@media (hover: hover) {
    .kln-card:hover { z-index: 5; border-color: var(--kln-border); box-shadow: var(--kln-shadow-sm); }
}
.kln-card__head { position: relative; margin-bottom: 4px; }
.kln-card__labels { position: absolute; top: 9px; left: 9px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; user-select: none; }
/* Метки на фото — компактные: мелкие капсы с разрядкой и малое скругление (8px на высоте 30px читалось как «таблетка»).
   Отступ от края — как у сердечка справа. */
.kln-card__labels .kln-card__label { padding: 4px calc(7px - .06em) 4px 7px; border-radius: 4px; font-size: 11px; line-height: 1.2; letter-spacing: .06em; } /* справа минус разрядка после последней буквы */
/* Капсы точно по центру: строка подрезана по высоте заглавных, поля сверху и снизу равны. */
@supports (text-box: trim-both cap alphabetic) {
    .kln-card__labels .kln-card__label { display: block; padding-top: 6px; padding-bottom: 6px; text-box: trim-both cap alphabetic; } /* у flex-контейнера подрезка не работает */
}
.kln-card__favorite { position: absolute; top: 5px; right: 5px; z-index: 30; }
.kln-card__wish { display: block; width: 36px; height: 30px; margin: 4px; border-radius: var(--kln-r-sm); background: rgba(255, 255, 255, .79) url(../img/favorites.svg) no-repeat center / 16px 16px; }
.kln-card__wish:hover { background-image: url(../img/favorites_hover.svg); }
.kln-card__wish._added { background-image: url(../img/favorites_added.svg); }
.kln-card__image { position: relative; z-index: 1; display: block; width: 100%; height: 285px; margin-bottom: 4px; overflow: hidden; }
.kln-card__photo,
.kln-card__photo-next { position: absolute; inset: 0; }
.kln-card__photo { z-index: 1; display: flex; align-items: center; justify-content: center; }
.kln-card__photo-next { z-index: 2; opacity: 0; transition: opacity .4s ease-in-out; }
.kln-card__photo img,
.kln-card__photo-next img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; }
/* Пока фото карточки грузится — скелетон с бликом (класс _loading в разметке, снимает kalina.js по загрузке фото) */
.kln-card__photo._loading { background: linear-gradient(90deg, var(--kln-bg) 25%, #fff 50%, var(--kln-bg) 75%) 0 0 / 200% 100%; animation: kln-skeleton 1.4s linear infinite; }
.kln-card__photo._loading img { opacity: 0; }
.kln-card__photo img { transition: opacity .3s; }
/* Слой нового фото при свайпе (kalina.js): поверх текущего, под полосками. */
.kln-card__photo_wipe { z-index: 2; overflow: hidden; pointer-events: none; }
@media (hover: hover) {
    .kln-card:hover .kln-card__photo-next { opacity: 1; }
}
.kln-hover-gallery .kln-card__photo-next { display: none; }
/* Сверху 16px (было 4): название чуть ниже, ближе к цене; у всех карточек ряда на одной высоте. */
.kln-card__body { flex: 1 1 auto; padding: 16px 32px 0; }
.kln-card__brand { font-size: var(--kln-fs-sm); color: var(--kln-red); text-align: center; }
.kln-card__title { margin-bottom: 12px; font-size: var(--kln-fs-md); line-height: 1.5; letter-spacing: .005em; text-align: center; text-wrap: balance; }
/* Чем отличаются карточки с одинаковым названием на странице (ProductName::markRepeated). */
.kln-card__variant { margin-top: 2px; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); }
.kln-card__name { margin: 0; font: inherit; letter-spacing: inherit; }
.kln-card__link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: var(--kln-ink); text-decoration: none; transition: color .15s; }
.kln-card__link:hover,
@media (hover: hover) {
    .kln-card:hover .kln-card__link { color: var(--kln-text); text-decoration: none; }
}
.kln-card__footer { padding: 0 32px 24px; }
.kln-card__availability { margin-bottom: 12px; font-size: var(--kln-fs-sm); text-align: center; }
.kln-card__availability-note { color: var(--kln-ink); }
.kln-card__prices { justify-content: center; margin: 16px 0; }
.kln-card__buy._added::before { flex: 0 0 14px; width: 14px; }
@media (max-width: 1200px) {
    .kln-card__image { height: 255px; }
    .kln-card__body { padding: 12px 16px 0; }
    .kln-card__footer { padding: 0 16px 20px; }
}
@media (max-width: 560px) {
    .kln-card__prices .kln-price__current { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .kln-card__labels { gap: 2px; }
    .kln-card__image { height: 210px; }
    .kln-card__body { padding: 8px 8px 0; }
    .kln-card__brand { margin-bottom: 4px; font-size: var(--kln-fs-xs); color: var(--kln-text); }
    .kln-card__title { font-size: var(--kln-fs-sm); line-height: 1.4; }
    .kln-card__footer { padding: 0 8px 8px; } /* снизу как по бокам */
    .kln-card__prices { margin: 8px 0 16px; } /* над ценой меньше, чем на компьютере (16px): карточка компактнее; до кнопки — как было */
}
.kln-catalog-list { display: flex; flex-wrap: wrap; padding-bottom: 44px; }
.kln-catalog-list .kln-catalog-categories { width: calc(100%/3 - 16.666px); margin-right: 24px; margin-bottom: 24px; }
@media screen and (max-width: 1200px) {
    .kln-catalog-list .kln-catalog-categories { width: calc(100%/2 - 15px); margin-right: 32px; }
}
@media screen and (max-width: 992px) {
    .kln-catalog-list .kln-catalog-categories { width: calc(100%/2 - 6px); margin-right: 12px; margin-bottom: 12px; }
}
@media screen and (max-width: 660px) {
    .kln-catalog-list .kln-catalog-categories { width: 100%; margin-right: 0px; margin-bottom: 16px; }
}
.kln-catalog-list .kln-catalog-categories:nth-child(3n+3) { margin-right: 0px; }
@media screen and (max-width: 1200px) {
    .kln-catalog-list .kln-catalog-categories:nth-child(3n+3) { margin-right: 32px; }
}
@media screen and (max-width: 992px) {
    .kln-catalog-list .kln-catalog-categories:nth-child(3n+3) { margin-right: 12px; }
}
@media screen and (max-width: 660px) {
    .kln-catalog-list .kln-catalog-categories:nth-child(3n+3) { margin-right: 0px; }
}
@media screen and (max-width: 1200px) {
    .kln-catalog-list .kln-catalog-categories:nth-child(2n+2) { margin-right: 0px; }
}
.kln-catalog-categories { background: #fff; border-radius: var(--kln-r-sm); border: 1px solid var(--kln-bg); padding: 24px; }
@media screen and (max-width: 1280px) {
    .kln-catalog-categories { padding: 20px 16px; }
}
.kln-catalog-categories__logo { width: 95px; text-align: center; margin-bottom: 12px; }
@media screen and (max-width: 1280px) {
    .kln-catalog-categories__logo { width: 70px; }
}
@media screen and (max-width: 1200px) {
    .kln-catalog-categories__logo { width: 95px; }
}
.kln-catalog-categories__logo img { width: auto; max-width: 100%; height: auto; max-height: 70px; display: inline-block; }
@media screen and (max-width: 1280px) {
    .kln-catalog-categories__logo img { max-width: 60px; }
}
@media screen and (max-width: 1200px) {
    .kln-catalog-categories__logo img { max-width: 100%; }
}
.kln-catalog-categories__list { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.kln-catalog-categories__name { margin-bottom: 12px; width: 100%; font-size: var(--kln-fs-md); }
.kln-catalog-categories__title-link { color: var(--kln-ink); text-decoration: none; width: 100%; transition: all .3s ease-in-out; }
.kln-catalog-categories__title-link:hover { color: var(--kln-red); text-decoration: underline; }
.kln-catalog-categories__title { font-size: var(--kln-fs-md); font-weight: 600; margin: 0px; font-family: var(--kln-font); }
.kln-catalog-categories__link { width: 50%; display: inline-block; padding: 2px 0px; color: var(--kln-text); text-decoration: none; transition: all .3s ease-in-out; padding-right: 12px; }
@media screen and (max-width: 768px) {
    .kln-catalog-categories__link { width: auto; }
}
.kln-catalog-categories__link:hover { color: var(--kln-red); text-decoration: underline; }
/* Список товаров — сетка карточек: 3 в ряд, на телефоне 2; _4 — 4 в ряд (каталог без боковой колонки), на планшете 3.
   Карточки в строке одной высоты, кнопка прижата к низу. */
.kln-products-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; padding-bottom: 20px; }
.kln-products-list_4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kln-products-list .kln-card__footer { margin-top: auto; }
@media (max-width: 992px) {
    .kln-products-list_4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .kln-products-list,
    .kln-products-list_4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 4px; padding-bottom: 12px; }
}
.kln-seo-block { background: #fff; border-radius: var(--kln-r-sm); border: 1px solid var(--kln-bg); margin-bottom: 16px; padding: 40px 40px 24px 40px; margin-top: 72px; }
@media screen and (max-width: 992px) {
    .kln-seo-block { padding: 20px; }
}
@media screen and (max-width: 768px) {
    .kln-seo-block { font-size: var(--kln-fs-sm); }
}
.kln-seo-block h2 { margin-bottom: 20px; padding-top: 20px; position: relative; font-weight: 600; font-size: var(--kln-fs-2xl); }
@media screen and (max-width: 992px) {
    .kln-seo-block h2 { font-size: var(--kln-fs-2xl); line-height: 1.2; }
}
@media screen and (max-width: 768px) {
    .kln-seo-block h2 { font-size: var(--kln-fs-lg); }
}
.kln-seo-block h2:before { width: 70px; height: 2px; background: var(--kln-red); content: ""; position: absolute; left: 0; top: 0px; }
.kln-seo-block h3 { font-weight: 600; font-size: var(--kln-fs-2xl); margin-bottom: 20px; }
.kln-seo-block h4 { font-weight: 600; font-size: var(--kln-fs-xl); margin-bottom: 16px; }
.kln-seo-block p { margin-bottom: 12px; }
.kln-product-gallery .kln-gallery-video { height: 505px; background: #fff; display: flex; justify-content: center; align-items: center; width: 100%; cursor: pointer; }
@media screen and (max-width: 992px) {
    .kln-product-gallery .kln-gallery-video { height: 460px; }
}
@media screen and (max-width: 768px) {
    .kln-product-gallery .kln-gallery-video { height: 450px; }
}
.kln-product-gallery .kln-gallery-video__file { position: absolute; left: 0; top: 0px; width: 100%; height: 100%; }
.kln-product-gallery .kln-gallery-video__file video { position: absolute; left: 0; top: 0px; width: 100%; height: 100%; object-position: center; object-fit: contain; }
.kln-product-gallery .kln-gallery-video__link { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; padding-bottom: 70%; }
.kln-product-gallery .kln-gallery-video__link iframe { position: absolute; left: 0; top: 0px; width: 100%; height: 100%; object-position: center; object-fit: contain; }
.kln-product-condition ._not { color: var(--kln-ink); }
.kln-add-favorites._added { color: var(--kln-red); }
.kln-add-favorites._added:before { background: url(../img/favorites_added.svg) no-repeat center; background-size: contain; }
@media screen and (max-width: 992px) {
    .kln-filter-wrap._active { opacity: 1; visibility: visible; }
}
.kln-filter-wrap .bx-filter-container-modef a { display: block; width: 100%; height: 100%; font-size: var(--kln-fs-sm); font-family: Jun-kalina, serif; font-weight: 600; text-transform: uppercase; color: #fff; text-align: center; line-height: 50px; position: absolute; left: 0; top: 0; text-decoration: none; }
.kln-filter-wrap .bx-filter-container-modef:hover a { color: #fff; text-decoration: none; }
.kln-filter-block._active .kln-filter-block__title:before { transform: rotate(90deg); background: url(../img/filter-arrow_active.svg) no-repeat center; background-size: contain; margin-top: -6px; }
.kln-filter-block._show .kln-filter-block__content { display: block; }
.kln-filter-block__title.__on:before { transform: rotate(90deg); background: url(../img/filter-arrow_active.svg) no-repeat center; background-size: contain; margin-top: -6px; }
.kln-filter-choice_radio .kln-filter-choice__label:before { border-radius: 50%; }
.kln-filter-choice_radio .kln-filter-choice__label:after { width: 4px; height: 4px; left: 4px; margin-top: -4px; opacity: 1; opacity: 1; background: #fff; border-radius: 50%; transform: scale(1.1); }
.kln-prod-sorting.__act .kln-prod-sorting__current { text-decoration: underline; color: var(--kln-red); }
.kln-prod-sorting.__act .kln-prod-sorting__list { opacity: 1; visibility: visible; top: calc(100% - 5px); }
.bx-filter-container-modef .bx-filter-popup-result { display: flex !important; padding-bottom: 12px; }
.bx-filter-container-modef .bx-filter-popup-result #modef_num { padding: 0px 12px 0px 4px; font-weight: 600; display: inline-block; color: var(--kln-text); }
.bx-filter-container-modef a { margin-left: auto; transition: all .3s ease-in-out; }
.bx-filter-container-modef a:hover { color: var(--kln-red); }
.kln-range-price .ui-slider-handle.ui-state-active { transform: scale(0.85); }
.kln-wishlist-bottom { margin-bottom: 72px; text-align: center; padding-top: 32px; }
.kln-full-section { width: 100%; background: no-repeat center top / cover; display: flex; justify-content: center; position: relative; }
.kln-full-section .kln-container,
.kln-full-section .container { display: flex; align-items: center; justify-content: center; position: relative; }
.kln-block-form { width: 100%; border-radius: var(--kln-r-sm); position: relative; }
.kln-block-form .kln-btn { width: 100%; }
.kln-block-form__links { padding-top: 32px; margin-bottom: 24px; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-items: center; }
.kln-block-form__link { color: var(--kln-ink); display: inline-block; font-size: var(--kln-fs-md); transition: all .3s ease-in-out; margin-bottom: 4px; }
.kln-block-form__link:hover { color: var(--kln-red); }
.kln-aut-social { display: flex; align-items: center; justify-content: center; }
@media screen and (max-width: 480px) {
    .kln-aut-social { flex-wrap: wrap; }
}
.kln-aut-social__title { font-size: var(--kln-fs-md); margin-right: 12px; }
@media screen and (max-width: 480px) {
    .kln-aut-social__title { width: 100%; margin-right: 0px; margin-bottom: 12px; text-align: center; }
}
.kln-aut-social .kln-soc-icon { margin-right: 4px; }
.kln-soc-icon { width: 30px; height: 30px; content: ""; display: block; line-height: 0px; transition: all .3s ease-in-out; }
.kln-soc-icon:hover { opacity: .7; }
.kln-soc-icon._vk { background: url(../img/aut-vk.svg) no-repeat center; background-size: contain; }
.kln-soc-icon._fb { background: url(../img/aut-facebook.svg) no-repeat center; background-size: contain; }
.kln-soc-icon._ok { background: url(../img/aut-odnoklassniki.svg) no-repeat center; background-size: contain; }
.kln-soc-icon._yandex { background: url(../img/aut-yandex.svg) no-repeat center; background-size: contain; }
.kln-soc-icon._google { background: url(../img/aut-google.svg) no-repeat center; background-size: contain; }
.kln-contacts-social__title { font-size: var(--kln-fs-md); margin-bottom: 4px; }
.kln-page-wrapper { margin-bottom: 72px; }
.kln-page-content { line-height: 1.4; }
/* Текст из админки — страницы (kln-page-content) и акции (kln-stock-page): одна типографика, через :where — не перебивает компоненты. */
:where(.kln-page-content, .kln-stock-page) p { margin-bottom: 16px; }
:where(.kln-page-content, .kln-stock-page) h2 { margin-top: 32px; margin-bottom: 16px; font-size: var(--kln-fs-2xl); font-weight: 600; }
:where(.kln-page-content, .kln-stock-page) h3 { margin-top: 32px; margin-bottom: 16px; font-size: var(--kln-fs-xl); font-weight: 600; }
:where(.kln-page-content, .kln-stock-page) h4 { margin-top: 20px; margin-bottom: 16px; font-size: var(--kln-fs-xl); font-weight: 600; }
:where(.kln-page-content, .kln-stock-page) h5,
:where(.kln-page-content, .kln-stock-page) h6 { margin-top: 20px; margin-bottom: 16px; font-size: var(--kln-fs-lg); font-weight: 600; }
:where(.kln-page-content, .kln-stock-page) ul,
:where(.kln-page-content, .kln-stock-page) ol { list-style-position: inside; padding-left: 12px; margin-bottom: 16px; }
:where(.kln-page-content, .kln-stock-page) li { margin-bottom: 4px; }
:where(.kln-page-content, .kln-stock-page) hr { margin-bottom: 16px; border-color: var(--kln-text); }
:where(.kln-page-content, .kln-stock-page) img { max-width: 100%; margin-bottom: 20px; border-radius: var(--kln-r-sm); }
:where(.kln-page-content, .kln-stock-page) table { max-width: 100%; margin-bottom: 20px; border-collapse: collapse; border: 1px solid rgba(0, 0, 0, 0.1); }
:where(.kln-page-content, .kln-stock-page) table p { margin-bottom: 4px; }
:where(.kln-page-content, .kln-stock-page) table p:last-child { margin-bottom: 0; }
:where(.kln-page-content, .kln-stock-page) table img { margin-bottom: 4px; }
:where(.kln-page-content, .kln-stock-page) tr { border: 1px solid rgba(0, 0, 0, 0.1); }
:where(.kln-page-content, .kln-stock-page) th,
:where(.kln-page-content, .kln-stock-page) td { padding: 12px; font-size: var(--kln-fs-md); line-height: 1.2; border: 1px solid rgba(0, 0, 0, 0.1); }
:where(.kln-page-content, .kln-stock-page) th { text-align: left; font-weight: 600; font-size: var(--kln-fs-sm); }
.kln-product-list-slider__top { margin-top: 60px; }
@media screen and (min-width: 992px) {
    .kln-product-list-slider .kln-carousel__track { display: flex; flex-wrap: wrap; }
}
@media screen and (min-width: 992px) {
    .kln-product-list-slider .kln-carousel__slide { width: calc(100%/4 - 15px); margin-right: 20px; margin-bottom: 20px; }
    .kln-product-list-slider .kln-carousel__slide:nth-child(4n+4) { margin-right: 0px; }
}
@media screen and (max-width: 992px) {
    .kln-product-list-slider .kln-carousel__slide { width: 250px; }
}
@media screen and (min-width: 992px) {
    .kln-product-list-slider .kln-card { box-shadow: none; }
}
.kln-page-404 { margin-left: 64px; max-width: 430px; }
@media screen and (max-width: 768px) {
    .kln-page-404 { margin-left: 0px; }
}
@media screen and (max-width: 480px) {
    .kln-page-404 { max-width: 300px; }
}
.kln-page-404__title { margin-bottom: 36px; }
.kln-page-404__desc { font-size: var(--kln-fs-2xl); font-family: Jun-kalina, serif; font-weight: 600; line-height: 1.2; margin-bottom: 52px; }
@media screen and (max-width: 480px) {
    .kln-page-404__desc { font-size: var(--kln-fs-lg); }
}
.kln-page-404__line { margin-bottom: 20px; }



/* ---------- Наши компоненты и правки ---------- */
/* ---------- Шрифт заголовков и крупных цифр: Jun (Василий Шишкин, свободная лицензия, fonts/Jun/LICENSE.txt) ---------- */
/* woff2 вдвое легче otf (17 и 16 КБ вместо 38 и 29). otf запасным не указываем: Chrome скачивал оба файла.
   Начертание одно, без жирного: диапазон 100–900 отдаёт этот файл на любую толщину, и браузер не дорисовывает искусственный жирный. */
/* В Jun нет «×», «·», «−», «±», английских кавычек, стрелок и дробей — браузер брал для них случайный системный шрифт
   (жирный крестик в «12×3 см»). Эти знаки берём из Georgia (есть на Mac, iOS, Windows), на Android — из системного serif.
   Файл шрифта Jun не меняем: лицензия разрешает использование, но не правку. */


/* ---------- Компоненты: кнопки корзины и оформления ---------- */
/* Главная кнопка — красная, вторичная — белая с рамкой. Надписи, размеры и радиусы — в «Системе кнопок» ниже. */
.kln-confirm__pay,
.kln-confirm__ps input[type="submit"] {
    font-family: var(--kln-font);
    font-size: var(--kln-fs-sm);
    font-weight: 600;
    border-radius: var(--kln-r-sm);
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s; background: var(--kln-red); border: 1px solid var(--kln-red); color: #fff; }
.kln-confirm__pay:hover,
.kln-confirm__ps input[type="submit"]:hover { background: var(--kln-red-hover); border-color: var(--kln-red-hover); color: #fff; }

/* Заголовки шагов и страниц — тем же шрифтом, что логотип и разделы каталога. */
.kln-confirm__title { font-family: var(--kln-font-head); font-weight: 600; color: var(--kln-ink); }

/* ---------- Общие компоненты сайта поверх main.css подрядчика ---------- */

/* Кнопки: без тени, скругление и шрифт из токенов. */

/* «В корзину»: в каталоге — вторичная, в карточке товара — главная. */

/* Карточки: тонкая рамка и одно скругление вместо теней разной силы. */
/* Наведение — лёгкое: чуть темнее рамка карточки и мягкий тон названия, без красного и подчёркивания. */

/* Поля ввода: как поиск в шапке. */

/* Сортировка и вкладки: активный пункт — красный. */
.kln-product-tabs__nav ._active,
.kln-product-tabs__nav .active { color: var(--kln-red); }

/* Ссылки в тексте и боковом меню. */

/* ---------- Второстепенная кнопка: красный текст и красная рамка ---------- */
/* Одна на весь сайт: «Применить», «Назад», «В корзину» в каталоге, «Показать ещё». */

/* ---------- Карточка товара ---------- */
.kln-product-page__gallery--single .kln-product-gallery { width: 100%; }

.kln-product-page__info .kln-certificates__color { order: 0; margin: 0; }
.kln-product-condition ._not { color: var(--kln-muted); }
/* «Уже в корзине» в каталоге — та же второстепенная кнопка с лёгкой красной заливкой вместо голубой. */

/* Карточка в каталоге: название читается легче, цена и кнопка всегда прижаты к низу — в ряду на одном уровне. */
.kln-prod-sorting.__act .kln-prod-sorting__current { border-color: var(--kln-ink); color: var(--kln-ink); text-decoration: none; }
.kln-prod-sorting.__act .kln-prod-sorting__current:after { margin-top: -2px; transform: rotate(-135deg); }
/* Плашка «Хит» — чёрная (в main.css голубая), в карточках и на странице товара. */
._hit,

/* Главный слайдер: одна рамка по ширине сетки сайта (.container: 1280px − поля по 15px), слайды в ней друг на друге,
   смена «шторкой» (assets/js/story-slider.js). На низких окнах рамка уже: высота не больше свободной под шапкой
   (экран − шапка (--kln-header-h из JS) − отступы, × пропорции баннера 5000×2200), но не уже 560px. */
.kln-home-slider { --kln-slide-w: calc(min(100%, 1280px) - 30px); --kln-banner-ratio: 2.2727; --kln-slide-pad: 40px; padding: 16px 0 24px; touch-action: pan-y; }
.kln-home-slider__frame { position: relative; aspect-ratio: 5000 / 2200; margin: 0 auto; overflow: hidden; border-radius: var(--kln-r-md); background: var(--kln-line, var(--kln-line)); box-shadow: var(--kln-shadow-sm); }
@supports (height: 100svh) {
    .kln-home-slider__frame { width: min(var(--kln-slide-w), max(calc((100svh - var(--kln-header-h, 260px) - var(--kln-slide-pad)) * var(--kln-banner-ratio)), 560px)); }
}
.kln-home-slider__slide { position: absolute; inset: 0; overflow: hidden; }
/* До запуска скрипта виден только первый слайд, иначе при загрузке баннеры мигают друг за другом
   (дальше видимость задаёт story-slider.js в style слайда). */
.kln-home-slider__slide:not(:first-child) { visibility: hidden; }
.kln-home-slider__item { width: 100%; height: 100%; border-radius: 0; box-shadow: none; transform: none; transition: none; }
.kln-home-slider__item:before { display: none; }
.kln-home-slider__item img { width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; will-change: transform; }
.kln-home-slider:focus-visible .kln-home-slider__frame { outline: 1px solid var(--kln-ink); outline-offset: 3px; }
/* Стрелки внутри рамки, поверх слайдов. */
.kln-home-slider .kln-home-slider__prev,
.kln-home-slider .kln-home-slider__next { position: absolute; z-index: 1000; top: 50%; margin-top: -24px; padding: 0; border: 0; }
.kln-home-slider .kln-home-slider__prev { left: 20px; margin-right: 0; }
.kln-home-slider .kln-home-slider__next { right: 20px; }
@media (max-width: 480px) {
    .kln-home-slider { --kln-slide-pad: 28px; padding: 12px 0 20px; }
    .kln-home-slider__frame { border-radius: var(--kln-r-md); }
}

/* Фото в карточке — на всю ширину и высоту блока, как и второе фото при наведении (раньше было уже на 10px и по центру). */

/* ---------- Заголовки блоков: по центру, без красной черты, с разрядкой ---------- */
/* Заголовки страниц и текстовых блоков — тоже без красной черты (отступ сверху был под неё). */
.kln-seo-block h2 { padding-top: 0; }
.kln-seo-block h2:before { display: none; }
/* Заголовок посередине, стрелки карусели справа — сетка из трёх колонок держит заголовок ровно по центру. */
.kln-section .kln-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; margin-bottom: 36px; }
.kln-sec-head .kln-title_section { grid-column: 2; justify-self: center; margin: 0; text-align: center; }
@media (max-width: 768px) {
    .kln-section .kln-sec-head { margin-bottom: 24px; }
}
@media (max-width: 480px) {
    /* На телефоне стрелки не помещаются по бокам — заголовок по центру, стрелки скрыты (карусель листается пальцем). */
    .kln-section .kln-sec-head { grid-template-columns: 1fr; }
    .kln-sec-head .kln-title_section { grid-column: 1; }
}
.kln-filter-wrap .bx-filter-container-modef a { font-family: var(--kln-font); font-size: var(--kln-fs-xs); letter-spacing: .06em; }
.lk-user__avatar img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
/* Пользователь без фото: контур даёт сама иконка, фон и рамку убираем. */
.kln-user-icon { display: block; width: 100%; height: 100%; color: var(--kln-ink); }
.lk .lk-section__subtitle { margin: 20px 0 8px; font-family: var(--kln-font); font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-ink); }
.lk-section__text { font-size: var(--kln-fs-md); margin: 0; color: var(--kln-text); }
/* ========== Уведомление ==========
   kln-alert — сообщение над формой или блоком: _success — зелёное (сохранено), _error — красное (ошибка).
   Текст внутри часто приходит из Битрикса (p, font, ссылки) — наследует цвет и размер. */
.kln-alert { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--kln-r-sm); font-size: var(--kln-fs-md); line-height: 1.5; text-align: left; }
.kln-alert_success { background: var(--kln-success-soft); color: var(--kln-success); }
.kln-alert_error { background: var(--kln-red-soft); color: var(--kln-error); }
.kln-alert p,
.kln-alert font { margin: 0; color: inherit; font-size: inherit; }
.kln-alert a { color: inherit; }
.lk-paid { color: var(--kln-success); font-weight: 600; }
.lk-order__note { font-size: var(--kln-fs-sm); color: var(--kln-muted); }
.lk-items__prop { font-size: var(--kln-fs-sm); color: var(--kln-muted); }
.lk-field_wide { grid-column: 1 / -1; }
.kln-input._locked { background: var(--kln-surface); color: var(--kln-muted); cursor: default; }
.kln-input._locked:focus { border-color: var(--kln-border); box-shadow: none; }
.lk-photo__initial[hidden] { display: none; }
.lk-pass__eye._on { background: var(--kln-red); }

/* Поле «Город» с поиском — по размерам как остальные поля */
.lk .location-block-wrapper .bx-sls .dropdown-block { border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); }
.lk .location-block-wrapper .bx-sls .bx-ui-sls-container,
.lk .location-block-wrapper .bx-sls .bx-ui-sls-container input { height: calc(var(--kln-h-control) - 2px); font-family: var(--kln-font); font-size: var(--kln-fs-md); }

/* Отмена заказа: стандартный шаблон Битрикса */
.lk-cancel .bx-order-cancel { padding: 0; }
.lk-cancel textarea { width: 100%; min-height: 110px; margin: 8px 0 16px; padding: 12px 16px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); font: inherit; }
.lk .lk-cancel input[type="submit"] { height: var(--kln-h-control); padding: 0 24px; border: 1px solid var(--kln-red); border-radius: var(--kln-r-sm); background: var(--kln-red); color: #fff !important; font-family: var(--kln-font); font-size: var(--kln-fs-sm); font-weight: 600; cursor: pointer; }
/* Поля адреса: убрать отступы и узкую ширину из стилей подрядчика и обёртки bootstrap */
.lk .sale-profile-detail-form .lk-field.form-group { max-width: none; margin: 0; }
.lk .sale-profile-detail-form > .lk-section:first-of-type .lk-field { max-width: calc(50% - 10px); }
.lk .sale-profile-detail-form .lk-field > .col-md-12 { width: 100%; padding: 0; float: none; }
@media (max-width: 767px) {
    .lk .sale-profile-detail-form > .lk-section:first-of-type .lk-field { max-width: none; }
}
.lk .lk-cancel input[type="submit"]:hover { background: var(--kln-red-hover); border-color: var(--kln-red-hover); }
.lk-cancel .bx-order-cancel > a:first-child { display: inline-flex; margin-bottom: 20px; font-size: var(--kln-fs-md); color: var(--kln-muted); text-decoration: none; }
.lk-cancel .bx-order-cancel > a:first-child:before { content: "← "; white-space: pre; }
.lk-cancel .bx-order-cancel > a:first-child:hover { color: var(--kln-red); }
.lk-cancel .bx-order-cancel a { color: var(--kln-red); }

/* Блок покупки: наличие — точкой, «В избранное» — по центру под кнопкой, промокод и бонусы — одинаковыми плашками
   вплотную друг к другу, артикул отделён линией. */
.kln-product-condition:has(._not) { color: var(--kln-muted); }
.kln-product-condition:has(._not):before { background: var(--kln-border-strong); }

/* ---------- Хлебные крошки: по центру и приглушённые, чтобы не спорили с заголовком ---------- */
.kln-bread-crumbs { justify-content: center; text-align: center; row-gap: 4px; margin-bottom: 0; } /* в корзине bootstrap даёт ul margin-bottom: 10px — плашка выше снизу */
.kln-bread-crumbs__link,
.kln-bread-crumbs__current { color: var(--kln-muted); }
.kln-bread-crumbs__link:hover { color: var(--kln-red); text-decoration: none; }
/* На телефоне — одна строка со свайпом. Центр — авто-отступами у крайних пунктов: при переполнении они
   обнуляются и начало строки не обрезается (justify-content: center обрезал бы). К концу строки прокручивает kalina.js. */
@media (max-width: 767px) {
    .kln-bread-crumbs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
    .kln-bread-crumbs::-webkit-scrollbar { display: none; }
    .kln-bread-crumbs__item { flex-shrink: 0; white-space: nowrap; }
    .kln-bread-crumbs__item:first-of-type { margin-left: auto; }
    .kln-bread-crumbs__item:last-of-type { margin-right: auto; }
}

/* ---------- «В корзину» в карточках каталога и главной: спокойная кнопка ---------- */
/* Без капса и красной рамки — карточка не должна кричать; красный появляется при наведении. */
/* «Уже в корзине»: спокойный зелёный с галочкой и обычным регистром. В разметке и JS карточек текст
   прячем и выводим подпись здесь (с галочкой); «Добавить ещё» при наведении как было. */

/* ---------- Карточка: листание фото при движении мыши ---------- */
/* Второе фото «при наведении» у таких карточек не нужно — его заменяет листание. */
.kln-hover-gallery__bars { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 3; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.kln-hover-gallery__bar { flex: 1 1 0; height: 2px; border-radius: 1px; background: rgba(30, 30, 30, .18); }
.kln-hover-gallery__bar._active { background: var(--kln-red); }
@media (hover: hover) {
    .kln-card:hover .kln-hover-gallery__bars { opacity: 1; }
}
/* Телефон и планшет: полоски видны всегда, фото листаются свайпом (kalina.js); вертикальную прокрутку страницы не перехватываем. */
@media (hover: none), (pointer: coarse) {
    .kln-hover-gallery { touch-action: pan-y; }
    .kln-hover-gallery__bars { opacity: 1; }
}
/* Красная полоса снизу карточки при наведении (main.css .card-product:before) — убрана, хватает рамки и тени. */

/* ---------- Страница товара: фото крупнее ---------- */
/* Было окно фиксированной высоты 505px — вертикальные снимки 2:3 стояли узкой полосой по центру.
   Теперь окно по пропорции 2:3 на всю ширину колонки, миниатюры тянутся на ту же высоту. */
@media (min-width: 993px) {
    .kln-product-gallery .kln-gallery-video { height: auto; aspect-ratio: 2 / 3; max-height: 720px; border-radius: var(--kln-r-md); overflow: hidden; }
}

/* Цены в карточках — шрифтом заголовков (Jun), как цена на странице товара. */

/* ---------- Переносы строк по всему сайту ---------- */
/* Основной текст — pretty: браузер подбирает переносы так, чтобы в конце абзаца не оставалось одного слова.
   Задано на body и наследуется всеми p, li, div, span. Свойство text-wrap-style, а не сокращение text-wrap:
   сокращение заодно включало бы перенос там, где текст намеренно в одну строку (nowrap). */
/* Заголовки и короткие тексты — balance: строки выравниваются по длине (браузер делает это до ~6 строк).
   Вводные абзацы, тексты карточек, примечания, плашки, подписи, кнопки, пункты списков в текстовых страницах.
   pretty в Chrome не трогает тексты в две строки — у коротких одно слово уходило вниз. Длинные абзацы остаются pretty. */
.kln-btn,
.kln-small-title,
.bx-title,
.kln-trigers__cont p,
.kln-confirm__title,
.lk-section__subtitle,
.lk-order__note,
.product-item-title,
.product-item-info-container-title,
.kln-product-tabs__accordion-title,
.kln-catalog-categories__name { text-wrap-style: balance; }

/* ---------- Страница товара: галерея ---------- */
/* Когда листать некуда (миниатюр мало или уже край), стрелки не показываем. */

/* ---------- Страница товара: характеристики ---------- */
/* Одна таблица вместо короткого списка в карточке + таблицы ниже. Подписи читаемые, значения со ссылками на подборки. */
.kln-product-tabs { margin-top: 48px; }
.kln-product-tabs__nav { gap: 32px; margin-bottom: 12px; border-bottom-color: var(--kln-line); }
.kln-product-tabs__tab { padding: 16px 0; font-family: var(--kln-font); font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-muted); }
.kln-product-tabs__tab--active { color: var(--kln-ink); }
.kln-product-tabs__tab--active::after { height: 2px; background: var(--kln-red); }
.kln-product-tabs--single .kln-product-tabs__tab { cursor: default; }
.kln-product-tabs__pane--active { margin-top: 0; }
.kln-product-tabs__table { max-width: 860px; font-family: var(--kln-font); }
.kln-product-tabs__row { background: none; border-bottom: 1px solid var(--kln-line); }
.kln-product-tabs__name,
.kln-product-tabs__value { padding: 12px 0; font-family: var(--kln-font); font-size: var(--kln-fs-md); line-height: 1.4; vertical-align: top; }
.kln-product-tabs__name { width: 40%; padding-right: 24px; color: var(--kln-muted); }
.kln-product-tabs__value { width: 60%; color: var(--kln-ink); }
.kln-product-tabs__link { color: var(--kln-ink); text-decoration: underline; }
.kln-product-tabs__link:hover { color: var(--kln-red); text-decoration-color: currentColor; }
.kln-product-tabs__pane p { max-width: 72ch; font-family: var(--kln-font); font-size: var(--kln-fs-md); line-height: 1.5; color: var(--kln-text); }

/* ---------- Страница товара: телефон ---------- */
@media (max-width: 767px) {
    .kln-product-tabs { margin-top: 32px; }
    /* Аккордеон в шрифте сайта, а не крупным 22px; если раздел один — это просто заголовок. */
    .kln-product-tabs__accordion-header { padding: 16px 0; border-bottom-color: var(--kln-line); }
    .kln-product-tabs__accordion-title { font-family: var(--kln-font); font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-ink); }
    /* Текст под линией заголовка — с тем же отступом, что строки характеристик над ним. */
    .kln-product-tabs__accordion-header--open + .kln-product-tabs__pane { margin-top: 0; padding: 12px 0 8px; }
    .kln-product-tabs--single .kln-product-tabs__accordion-header { pointer-events: none; }
    .kln-product-tabs--single .kln-product-tabs__accordion-icon { display: none; }
    .kln-product-tabs__name,
.kln-product-tabs__value { padding: 12px 0; font-size: var(--kln-fs-sm); }
    .kln-product-tabs__name { width: 45%; padding-right: 16px; }
    .kln-product-tabs__value { width: 55%; }
}


/* ---------- Логотипы брендов: полоса на главной и страница /brands/ ---------- */
/* Размер и обрезку задают переменные из logos.json (news.list/brands/brand_logo.php). */
.brand-filters { position: absolute; pointer-events: none; }
.brand-art { --brand-scale: 1; position: relative; display: block; flex: 0 0 auto; width: calc(var(--brand-width) * var(--brand-scale)); height: calc(var(--brand-height) * var(--brand-scale)); overflow: hidden; }
.brand-art[style] img { position: absolute; left: calc(var(--brand-left) * var(--brand-scale)); top: calc(var(--brand-top) * var(--brand-scale)); width: calc(var(--brand-image-width) * var(--brand-scale)); height: calc(var(--brand-image-height) * var(--brand-scale)); max-width: none; max-height: none; }
.brand-art--enzo img { filter: url(#brand-enzo-ink); }
.brand-art--kaylin img { filter: grayscale(1) contrast(8); }
.brand-art--enzo,
.brand-art--kaylin { mix-blend-mode: multiply; }
.kln-brands__logo > img { display: block; max-width: 156px; max-height: 52px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 480px) {
    .kln-brands__logo > img { max-width: 100%; max-height: 44px; }
}

/* ---------- Подчёркивание ссылок: тонкое, цветом текста с прозрачностью 30% ---------- */
/* Одно на весь сайт: !important перекрывает сокращённое text-decoration в правилах подрядчика и bootstrap
   (оно сбрасывает цвет и толщину линии). Там, где подчёркивания нет (text-decoration: none), ничего не меняется.
   Подчёркнутые span внутри ссылок (.kln-promo__more, .lk-photo__action) — так же. */
a {
    text-decoration-thickness: 1px !important;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent) !important;
    text-underline-offset: 3px !important;
}

/* ---------- Плашка cookie (модуль awz:cookies.sett) ---------- */
/* Модуль печатает свои стили в конце страницы, поэтому селекторы с body — чтобы перебить их. */
body .awz_cookies_sett__message {
    width: calc(100% - 32px);
    max-width: 640px;
    left: 50%;
    right: auto;
    bottom: 16px;
    margin-left: 0;
    transform: translateX(-50%);
    background: #fff;
    color: var(--kln-text);
    font-family: var(--kln-font);
    font-size: var(--kln-fs-sm);
    line-height: 1.5;
    border: 1px solid var(--kln-line);
    border-radius: var(--kln-r-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
    text-align: left;
}
body .awz_cookies_sett__container { padding: 20px 24px; }
body .awz_cookies_sett__row { gap: 24px; }
body .awz_cookies_sett__col { color: var(--kln-text); }
body .awz_cookies_sett__agr_link,
body a.awz_cookies_sett__agr_link { color: var(--kln-ink); text-decoration: underline; }
body a.awz_cookies_sett__agr_link:hover { color: var(--kln-red); text-decoration-color: currentColor; }
body .awz_cookies_sett__col__right { display: flex; flex-direction: column; gap: 8px; padding: 0; }
body .awz_cookies_sett__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 40px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--kln-red);
    border-radius: var(--kln-r-sm);
    font-size: var(--kln-fs-sm);
    transition: background-color .15s, border-color .15s, color .15s;
}
body #awz_cookies_sett__all { background: var(--kln-red); color: #fff; }
body #awz_cookies_sett__all:hover { background: var(--kln-red-hover); border-color: var(--kln-red-hover); }
body #awz_cookies_sett__all_decline { background: #fff; color: var(--kln-ink); border-color: var(--kln-border); }
body #awz_cookies_sett__all_decline:hover { background: #fff; border-color: var(--kln-border-strong); color: var(--kln-ink); }

@media (max-width: 767.98px) {
    body .awz_cookies_sett__message { bottom: 12px; border-radius: var(--kln-r-md); text-align: left; }
    body .awz_cookies_sett__container { padding: 16px; }
    body .awz_cookies_sett__row { gap: 12px; }
    body .awz_cookies_sett__col__right { flex-direction: row; width: 100%; }
    body .awz_cookies_sett__btn { flex: 1 1 0; min-width: 0; }
}
:where(.kln-page-content) > h3 { margin: 32px 0 12px; font-family: var(--kln-font); font-size: var(--kln-fs-lg); font-weight: 600; line-height: 1.4; color: var(--kln-ink); }

/* ---------- Значок подарка вместо цифры скидки: приветственный промокод ---------- */
/* Размер — от font-size контейнера (крупные цифры в плашках), цвет — от color. */
.kln-gift-icon { display: block; width: 1em; height: 1em; }

/* ---------- Подвал на телефоне: всё по центру ---------- */

/* ---------- Подвал на телефоне: компактнее (был ~1270px высотой) ---------- */

/* ---------- Умный фильтр: блок без доступных значений не показываем ---------- */
.kln-filter-search__empty { padding: 4px 0; font-size: var(--kln-fs-sm); color: var(--kln-muted); }

/* ---------- Вход: восстановление и смена пароля ---------- */
.kln-auth-lead__accent { font-weight: 600; color: var(--kln-ink); }
.kln-auth-done { text-align: center; }
.kln-auth-done__icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--kln-red-soft); color: var(--kln-red); }
.kln-auth-done__icon svg { width: 34px; height: 34px; }
.kln-auth-done__title { margin: 0 0 12px; font-family: var(--kln-font-head); font-size: var(--kln-fs-xl); line-height: 1.2; color: var(--kln-ink); }
.kln-auth-done__text { margin: 0 0 12px; font-size: var(--kln-fs-md); line-height: 1.5; color: var(--kln-text); }
.kln-auth-done__accent { font-weight: 600; color: var(--kln-ink); overflow-wrap: anywhere; }
.kln-auth-done__hint { margin: 0 0 24px; font-size: var(--kln-fs-sm); line-height: 1.5; color: var(--kln-muted); }
.kln-auth-done__link { color: var(--kln-ink); }

/* Вход: кнопка регистрации с красной обводкой — под ссылкой «Забыли пароль?». */
.kln-block-form__links + .kln-auth-register { margin-top: -8px; }
.kln-auth-register { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 8px; padding-top: 24px; border-top: 1px solid var(--kln-line); text-align: center; }


/* ---------- Мобильный фильтр каталога ---------- */
/* Панель слева на всю высоту экрана: шапка панели и кнопки «Показать товары» / «Сбросить» на месте, прокручивается только список.
   .container-wrapper .container (z-index: 2) запирал панель под шапкой сайта (z-index: 1000) — пока фильтр открыт, его контейнер (kln-filter-host) выше шапки.
   Класс kln-filter-open и блокировку прокрутки страницы (position: fixed — иначе iOS Safari прокручивает страницу под панелью) ставит main.js. */
@media (max-width: 992px) {
    body.kln-filter-open { 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); }
    .kln-filter-wrap._active { left: 0; transform: none; }
    /* Всплывашка «Показать» справа от блока уезжала за край экрана — на мобилке её заменяет кнопка внизу с числом товаров
       (data-count ставит catalog.smart.filter/main/script.js). */
    .kln-filter-wrap #set_filter[data-count]:after { content: " (" attr(data-count) ")"; }
}
@keyframes kln-skeleton {
	to { background-position: -200% 0; }
}

/* Формы входа и регистрации — общие и для страниц /login/, и для окна входа на любой странице. */
.kln-register-privacy-text { font-size: var(--kln-fs-xs); margin-top: 16px; }
/* Две галочки согласия перед кнопкой «Зарегистрироваться» (Kalina\RegisterConsent). */
.kln-register-consents { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.kln-register-consent { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-text); cursor: pointer; }
.kln-register-consent input[type="checkbox"] { position: static; flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--kln-red); }
.kln-register-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kln-block-form__title { text-align: center; }
@media screen and (max-width: 480px) {
    .kln-block-form__title { padding: 0px 40px; }
}
.kln-block-form__row { display: flex; justify-content: space-between; }
.kln-block-form__row .kln-block-form__col { width: calc(50% - 10px); }
/* Подсказка над полем, ошибка мягкой плашкой, после отправки — экран «Письмо отправлено» вместо формы. */
.kln-block-form .kln-auth-lead { margin: 0 0 20px; font-size: var(--kln-fs-md); line-height: 1.5; text-align: center; color: var(--kln-muted); }
.kln-float__req { color: var(--kln-red); }
.kln-block-form__col .kln-float { margin-bottom: 12px; }
@media (max-width: 600px) {
/* Имя и фамилия — друг под другом: в две узкие колонки подписи обрезались. */
    .kln-block-form__row { display: block; }
    .kln-block-form__row .kln-block-form__col { width: 100%; }
    .kln-block-form__row .kln-block-form__col--captcha-img { margin-bottom: 12px; } }
/* ========== Окно ==========
   kln-modal — всплывающее окно поверх страницы (вход и регистрация, согласие на обработку данных): __overlay — затемнение,
   __dialog — карточка 440px, __close — место крестика (kln-close). Наполнение задаёт блок окна (kln-auth-modal, kln-consent).
   Пока окно входа открыто, у html класс kln-auth-open — прокрутка страницы выключена. */
/* Внутри — те же формы, что на /login/: тело окна с классом .block-form, поэтому поля и кнопки оформлены как там. */
.kln-auth-open,
.kln-auth-open body { overflow: hidden; }
.kln-modal { position: fixed; inset: 0; z-index: 10000; /* выше «историй» (9999) и мобильного фильтра (3000) */ display: flex; align-items: center; justify-content: center; padding: 16px; }
.kln-modal[hidden] { display: none; }
.kln-modal__overlay { position: absolute; inset: 0; background: rgba(30, 30, 30, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kln-modal__dialog { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: var(--kln-r-md); box-shadow: var(--kln-shadow-lg); }
.kln-modal__close { position: absolute; top: 10px; right: 10px; z-index: 1; }
/* Появление: затемнение проявляется, карточка чуть поднимается — анимация срабатывает, когда окно перестаёт быть display: none.
   Закрытие: скрипт окна ставит ._closing и прячет окно через 200 мс (kalina.js — вход, user_consent.js — согласие). */
@keyframes kln-modal-fade-in { from { opacity: 0; } }
@keyframes kln-modal-fade-out { to { opacity: 0; } }
@keyframes kln-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes kln-modal-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.kln-modal__overlay { animation: kln-modal-fade-in .25s ease-out; }
.kln-modal__dialog { animation: kln-modal-in .3s cubic-bezier(.2, .8, .2, 1); }
.kln-modal._closing { pointer-events: none; }
.kln-modal._closing .kln-modal__overlay { animation: kln-modal-fade-out .2s ease-in forwards; }
.kln-modal._closing .kln-modal__dialog { animation: kln-modal-out .2s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
    .kln-modal__overlay,
    .kln-modal__dialog { animation: none !important; }
}
@media (max-width: 480px) {
    .kln-modal { padding: 8px; }
    .kln-modal__dialog { max-height: calc(100dvh - 16px); }
}
/* Загрузка: крутящийся кружок; отступы задаёт блок. */
.kln-spinner { width: 28px; height: 28px; border: 2px solid var(--kln-line); border-top-color: var(--kln-red); border-radius: 50%; animation: kln-spin .8s linear infinite; }
@keyframes kln-spin { to { transform: rotate(360deg); } }
/* ---------- Окно входа и регистрации (kalina.js, local/ajax/auth-modal.php) ---------- */
.kln-auth-modal__spinner { margin: 52px auto; }
/* Регистрация — отдельной вкладкой, кнопка «Впервые у нас? Зарегистрироваться» из формы входа в окне лишняя. */
.kln-auth-modal .kln-auth-register { display: none; }
.kln-auth-signup { display: none; }
.kln-auth-modal .kln-auth-signup { display: block; margin: 20px 0 4px; padding-top: 20px; border-top: 1px solid var(--kln-line); text-align: center; color: var(--kln-muted); }
.kln-auth-signup__link { margin-bottom: 0; }
.kln-auth-modal .kln-block-form__links { padding-top: 24px; margin-bottom: 0; }
.kln-auth-modal__tabs { display: flex; justify-content: center; gap: 32px; padding: 24px 28px 0; border-bottom: 1px solid var(--kln-line); }
.kln-auth-modal__tab { position: relative; padding: 0 0 12px; border: 0; background: none; font-family: var(--kln-font-head); font-size: var(--kln-fs-xl); line-height: 1.2; color: var(--kln-muted); cursor: pointer; }
.kln-auth-modal__tab._active { color: var(--kln-ink); }
.kln-auth-modal__tab._active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kln-red); }
.kln-auth-modal__body { max-width: none; min-height: 160px; padding: 24px 28px 28px; background: none; border-radius: 0; box-shadow: none; }
@media (max-width: 480px) {
    .kln-auth-modal__tabs { padding: 20px 20px 0; }
    .kln-auth-modal__body { padding: 20px; } }
.kln-auth-modal._loading .kln-auth-modal__body { opacity: .5; pointer-events: none; }
.kln-auth-modal__error { color: var(--kln-error); }

/* Ошибки форм входа и регистрации (ShowMessage/ShowError Битрикса: <p><font class="errortext">) — красной плашкой,
   чёрным текстом над полями их не замечали. И в окне входа, и на страницах /login/. */
.kln-block-form .errortext { display: block; padding: 12px 16px; border-radius: var(--kln-r-sm); background: var(--kln-red-soft); color: var(--kln-error); font-size: var(--kln-fs-sm); line-height: 1.4; }
.kln-block-form p:has(> .errortext) { margin: 0 0 16px; }
.kln-block-form .errortext br:last-child { display: none; }

/* ---------- Компактная шапка при прокрутке (_foot.php, kalina.js) ---------- */
/* Когда прилипающие блоки (карточка покупки, итог заказа, меню кабинета, карта) прилипают, страница уже прокручена
   и сверху видна компактная шапка — поэтому они встают под ней: высота шапки + зазор. */
:root { --kln-sticky-top: 84px; }
@media (max-width: 1023px) { :root { --kln-sticky-top: 72px; } }

/* ---------- Страницы входа: шапка и подвал сайта, карточка формы сразу под шапкой ---------- */
/* Раньше секция с фото была на весь экран без шапки; теперь над ней шапка, и высота — по содержимому. */
.kln-full-section { height: auto; min-height: 0; padding: 48px 20px 72px; align-items: flex-start; }
@media (max-width: 600px) {
    .kln-full-section { padding: 24px 12px 48px; }
}
/* Страница 404 — секция без формы: фон-картинка, текст сверху. */
.kln-section-404 { display: block; padding-top: 112px; background-image: url(../img/404_bg.jpg); }
.kln-section-404 .kln-container { display: block; }
@media (max-width: 480px) {
    .kln-section-404 { min-height: 50vh; padding-top: 52px; }
}

.kln-search-page .search-language-guess { margin-top: 12px; font-size: var(--kln-fs-md); color: var(--kln-muted); }
/* Ничего не нашлось — как пустая корзина. */
.kln-search-start { padding: 0 0 64px; }
.kln-search-start__hint { margin: 0 0 20px; font-size: var(--kln-fs-md); line-height: 1.5; color: var(--kln-muted); }
.kln-search-start__list { display: flex; flex-wrap: wrap; gap: 12px; }
.kln-container-wrapper .kln-search-start__item { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); background: #fff; font-size: var(--kln-fs-md); color: var(--kln-ink); text-decoration: none; }
.kln-container-wrapper .kln-search-start__item:hover { border-color: var(--kln-red); color: var(--kln-red); }

/* ========== Система кнопок: три вида, три размера, надписи обычными буквами ==========
   Виды: главная — красная заливка; второстепенная — белая с красной рамкой; тихая — белая с серой рамкой, тёмный текст.
   Размеры: L 52px, текст 16px (главное действие страницы, формы входа, оформление), M 46px, текст 16px — как поля ввода (шапка, промокод,
   «Показать больше», фильтр, карточки на компьютере), S 36px, текст 14px (карточки на телефоне).
   Обычные буквы читаются мельче капса — поэтому текст крупнее, чем был у кнопок капсом. Скругление везде 8px.
   Слой стоит последним и перебивает разнобой подрядчика и старых правил; капс и разрядку снимаем с !important,
   потому что их задают правила разной силы, в том числе стили компонентов, которые грузятся позже. */

/* L — 52px, 16px */
.kln-block-form .btn,
.kln-confirm__pay { min-height: var(--kln-h-cta); height: var(--kln-h-cta); padding-top: 0; padding-bottom: 0; border-radius: var(--kln-r-sm); font-size: var(--kln-fs-md); line-height: 1.2; }

/* M — 46px, 16px. «Войти» в шапке задан отдельно (только на компьютере; на телефоне это иконка). */
.lk .lk-cancel input[type="submit"] { height: var(--kln-h-control); line-height: normal; border-radius: var(--kln-r-sm); font-size: var(--kln-fs-md); }
/* Карточки товаров — тихая кнопка: M на компьютере, S на телефоне (правила «body .card-product .add-basket» выше).
   Страница 404 — главная кнопка L. */
.kln-page-404__link .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 240px; height: var(--kln-h-cta); padding: 0 32px; font-size: var(--kln-fs-md); line-height: normal; }
.kln-page-404__link .kln-btn { min-width: 240px; }
.kln-product-gallery .kln-gallery-video { position: relative; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
/* Миниатюра видео: значок «плей» вместо надписи. */
.kln-product-thumbs__video { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--kln-red); font-size: 0; }
.kln-product-thumbs__video svg { width: 55%; max-width: 48px; height: auto; }
.kln-product-thumbs__slide:hover .kln-product-thumbs__video { color: var(--kln-red-hover); }
/* Ролик YouTube: на миниатюре кадр-обложка (i.ytimg.com), поверх белый значок — видно, что ролики разные. */
.kln-product-thumbs__video--poster { position: relative; overflow: hidden; border-radius: 4px; color: #fff; }
.kln-product-thumbs__video--poster img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.kln-product-thumbs__video--poster svg { position: relative; width: 40%; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
.kln-product-thumbs__slide:hover .kln-product-thumbs__video--poster { color: #fff; }

/* ---------- Главная: воздух вокруг Shorts ---------- */
.kln-arrow-link:after { content: ""; flex: 0 0 auto; width: 10px; height: 7px; background: var(--kln-red); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h12M9 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
.kln-arrow-link:hover:after,
.kln-panel-promo:hover .kln-arrow-link:after { transform: translateX(3px); }

/* На компьютере панель — выпадающая, по высоте содержимого; ниже — затемнённая страница. */
@media (min-width: 1024px) {
    /* Затемнение есть всегда, но прозрачное и не ловит нажатий; с открытием панели плавно проявляется, с закрытием гаснет
       за 0,1 с — быстрее, чем сворачивается панель (0,2 с): иначе она открывала ещё тёмную страницу и мигало. */
    body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--kln-panel-top, 0px); z-index: 9999; background: rgba(17, 17, 17, .35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease-out, visibility 0s linear .1s; }
    /* С задержкой 0,15 с: к этому времени панель почти раскрылась. Без неё полоса страницы над ещё не дошедшим нижним
       краем панели успевала потемнеть, и её тут же закрывала светлая панель — выглядело как тёмная вспышка. */
    body.kln-menu-open::after { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; transition: opacity .35s ease .15s, visibility 0s; }
}


/* ---------- Из custom.css подрядчика ---------- */
.kln-register-captcha { margin-top: 1rem; }
.kln-register-captcha .kln-register-captcha-title { margin-bottom: 0.5rem; }
.kln-register-captcha .kln-block-form__col--captcha-img img { display: block; max-width: 100%; }
/* Временное на период НГ */
.kln-b-page_newyear { height: 70px; }


/* Карточка товара: старая цена, скидка, «Под заказ» (были в стилях страницы товара — нужны везде, где есть карточки) */

/* kln-split — оплата «Долями» (Т‑Банк): серый логотип и график из 4 платежей раз в две недели, как на странице оплаты банка,
   но без жёлтого и чёрного. Содержимое рисует klnSplit (kalina.js) по сумме из data-total; пустой блок не показываем.
   Где: итог оформления (из карточки товара убрано 29.10). */
.kln-split { padding: 14px 16px 12px; border: 1px solid var(--kln-line); border-radius: var(--kln-r-sm); background: #fff; color: var(--kln-muted); font-size: var(--kln-fs-xs); line-height: 1.4; text-align: left; }
.kln-split:empty, .kln-split[hidden] { display: none; }
.kln-split__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; }
.kln-split__logo { flex: 0 0 auto; width: 74px; height: 11px; background: currentColor; -webkit-mask: url(../img/icons/dolyami.svg) no-repeat center / contain; mask: url(../img/icons/dolyami.svg) no-repeat center / contain; }
.kln-split__plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.kln-split__step { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 0 8px; border-bottom: 2px solid var(--kln-line); white-space: nowrap; }
.kln-split__step:first-child { border-bottom-color: var(--kln-muted); }
.kln-split__sum { color: var(--kln-ink); font-size: var(--kln-fs-sm); font-weight: 600; }
.kln-split__note { margin: 10px 0 0; }