/* ========== Kalina: каркас всех страниц — шапка. Правила вёрстки — README.md. ========== */

/* ---------- Шапка (inc/_head.php) ----------
   Сверху вниз: красная полоса с бонусами (для гостей) → город, меню сайта, телефон → «Каталог» и поиск, логотип, иконки → разделы каталога.
   На планшете и телефоне «Каталог» — иконкой, поиск — под лупой. */
.kln-header { position: relative; z-index: 1000; background: #fff; border-bottom: 1px solid var(--kln-line); }
.kln-header :is(a, button):focus-visible { outline: 1px solid var(--kln-ink); outline-offset: 3px; }

/* Полоса с бонусами */
.kln-promo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 16px; min-height: 38px; padding: 8px 16px; background: var(--kln-red); color: #fff; font-size: var(--kln-fs-sm); line-height: 1.4; text-align: center; text-decoration: none; text-wrap: balance; transition: background-color .15s; }
.kln-promo:is(:hover, :focus) { background: var(--kln-red-hover); color: #fff; text-decoration: none; }
.kln-header .kln-promo:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.kln-promo__more { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; opacity: .9; }

/* Город, меню сайта, телефон */
.kln-header__bar { background: var(--kln-surface); border-bottom: 1px solid var(--kln-line); }
.kln-header__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.kln-header__city { display: flex; align-items: center; gap: 8px; font-size: var(--kln-fs-sm); line-height: 1.2; white-space: nowrap; text-decoration: none; }
.kln-header__city:before { content: ''; flex: 0 0 18px; height: 18px; background: var(--kln-muted); mask: url(../img/icons/pin.svg) no-repeat center / contain; }
.kln-header__city-name { color: var(--kln-ink); transition: color .15s; }
.kln-header__city:hover .kln-header__city-name { color: var(--kln-red); }

.kln-header__menu { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.kln-header__menu-list { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
/* Наведение: под пунктом слева направо прорисовывается красная линия, а когда курсор уходит — уезжает вправо
   (точка опоры меняется: при наведении слева, без наведения справа). У текущего раздела линия видна всегда. */
.kln-header__menu-link { position: relative; display: block; padding: 8px 0; font-size: var(--kln-fs-sm); color: var(--kln-text); white-space: nowrap; text-decoration: none; }
.kln-header__menu-link:hover { color: var(--kln-text); text-decoration: none; }
.kln-header__menu-link._active { color: var(--kln-red); }
.kln-header__menu-link:before { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--kln-red); transform: scaleX(0); transform-origin: right; transition: transform .6s cubic-bezier(.625, .05, 0, 1); }
.kln-header__menu-link:is(:hover, :focus-visible, ._active):before { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) {
    .kln-header__menu-link:before { transition: none; }
}

.kln-header__contacts { display: flex; align-items: center; gap: 16px; }
.kln-header__phone { font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-ink); white-space: nowrap; text-decoration: none; }
.kln-header__phone:hover { color: var(--kln-red); text-decoration: none; }
.kln-header__hours { font-size: var(--kln-fs-sm); color: var(--kln-muted); white-space: nowrap; }
.kln-header__messengers { display: flex; align-items: center; gap: 4px; }
.kln-header__messenger { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--kln-muted); text-decoration: none; }
.kln-header__messenger:hover { color: var(--kln-red); }
.kln-header__messenger svg { width: 17px; height: 17px; opacity: .75; transition: opacity .15s; } /* знаки соцсетей полупрозрачные — не спорят с текстом; при наведении — в полную силу */
.kln-header__messenger:hover svg { opacity: 1; }

/* Основная строка: «Каталог» и поиск | логотип | избранное, корзина, вход. Под ней — разделы каталога. */
.kln-header__main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 32px; padding-top: 20px; }
.kln-header__logo { grid-column: 2; grid-row: 1; display: block; width: 150px; }
.kln-header__logo img { display: block; width: 100%; height: auto; }
.kln-header__tools { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.kln-header__actions { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 24px; }

/* Кнопка «Каталог» (и в компактной шапке): открывает панель со всеми разделами, при открытой — крестик. */
.kln-catalog-btn__icon { --kln-icon: url(../img/icons/catalog.svg); }
.kln-catalog-btn._open .kln-catalog-btn__icon { --kln-icon: url(../img/icons/close.svg); }
.kln-header__catalog { flex: 0 0 auto; }
/* «Каталог» и «Закрыть» одной ширины — поиск рядом не сдвигается, когда открывается панель. */
@media (min-width: 1024px) { .kln-header__catalog { min-width: 136px; justify-content: flex-start; } }

/* Поиск (шаблон tega.fuzzysearch/search.title/search, подсказки — его style.css) */
.kln-search { position: relative; }
.kln-search__form { position: relative; margin: 0; }
.kln-search__input { display: block; width: 100%; height: var(--kln-h-control); margin: 0; padding: 0 40px 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) var(--kln-font); -webkit-appearance: none; appearance: none; }
.kln-search__input::placeholder { color: var(--kln-muted); opacity: 1; }
.kln-search__input:focus { border-color: var(--kln-ink); box-shadow: none; outline: none; }
.kln-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kln-search__submit { position: absolute; top: 0; right: 0; width: var(--kln-h-control); height: var(--kln-h-control); padding: 0; border: 0; background: var(--kln-muted); cursor: pointer; mask: url(../img/icons/search.svg) no-repeat center / 22px; }
.kln-search__submit:hover { background: var(--kln-red); }
.kln-search_l .kln-search__input { height: var(--kln-h-cta); padding: 0 56px 0 20px; }
.kln-search_l .kln-search__submit { width: var(--kln-h-cta); height: var(--kln-h-cta); }
.kln-header__search { flex: 0 1 290px; width: 100%; max-width: 290px; } /* подсказка «Поиск среди N товаров» (число из каталога) помещается целиком */
/* В шапке на компьютере текст поля мельче — больше воздуха вокруг подсказки. На телефоне остаётся 16px: при меньшем iOS увеличивает страницу при вводе. */
@media (min-width: 1024px) {
    .kln-header__search .kln-search__input,
    .kln-sticky__input { font-size: var(--kln-fs-sm); }
}

/* Значок со счётчиком и подписью: избранное, корзина, лупа. Иконки линейные, из одного набора; цвет — из color. */
.kln-icon-link { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: var(--kln-ink); font: inherit; text-decoration: none; cursor: pointer; }
.kln-icon-link:hover { color: var(--kln-red); text-decoration: none; }
.kln-icon-link__icon { position: relative; display: block; width: 40px; height: 40px; }
.kln-icon-link__icon:before { --kln-icon: url(../img/icons/heart.svg); content: ''; position: absolute; inset: 7px; background: currentColor; -webkit-mask: var(--kln-icon) no-repeat center / contain; mask: var(--kln-icon) no-repeat center / contain; }
.kln-icon-link_cart .kln-icon-link__icon:before { --kln-icon: url(../img/icons/cart.svg); }
.kln-icon-link_search .kln-icon-link__icon:before { --kln-icon: url(../img/icons/search.svg); }
.kln-icon-link__label { margin-top: -4px; font-size: var(--kln-fs-xs); line-height: 1.2; color: var(--kln-muted); } /* под значком 7px пустоты — подпись подтянута к нему */
/* Кружок с числом виден, когда kalina.js нашёл в нём число больше нуля (._filled). */
.kln-icon-link__count { position: absolute; top: -1px; left: calc(50% + 7px); } /* у правого края значка, а не подписи */

.kln-header__search-toggle { display: none; }
.kln-header._search-open .kln-header__search-toggle { color: var(--kln-red); }

/* Вход: «Войти» на компьютере, значок на планшете и телефоне. Вошедший — аватар или контур человечка. */
.kln-header__account { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; color: var(--kln-ink); }
.kln-header__avatar { position: absolute; inset: 0; display: block; border-radius: 50%; background: center / cover no-repeat; }

/* Разделы каталога, в которых есть товары (menu/catalog_line) */
.kln-sections { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: 20px; border-top: 1px solid var(--kln-line); }
.kln-sections__list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 14px 0; list-style: none; }
.kln-sections__link { display: block; padding: 4px 0; font-size: 17px; color: var(--kln-ink); white-space: nowrap; text-decoration: none; }
.kln-sections__link:is(:hover, ._active) { color: var(--kln-red); text-decoration: none; }

@media (max-width: 1200px) {
    .kln-header__main { column-gap: 24px; }
    .kln-header__menu-list { gap: 16px; }
    .kln-header__hours { display: none; }
    .kln-sections__list { column-gap: 20px; justify-content: center; }
    .kln-header__actions { gap: 16px; }
    .kln-icon-link__label { display: none; } /* на узком экране значки без подписей */
}
/* Планшет и телефон: «Каталог» — значком слева, поиск под лупой, разделы листаются вбок.
   По краям по три колонки по 40px (одна справа от лупы пустая) — так логотип стоит ровно посередине. */
@media (max-width: 1023px) {
    .kln-header__menu { display: none; }
    .kln-header__main { grid-template-columns: 40px 40px 40px minmax(0, 1fr) auto minmax(0, 1fr) 40px 40px 40px; grid-template-rows: 96px auto auto; column-gap: 0; padding-top: 0; }
    .kln-header__tools,
    .kln-header__actions { display: contents; }
    .kln-header__actions > * { grid-row: 1; justify-self: center; }
    .kln-header__catalog { grid-column: 1; grid-row: 1; }
    .kln-header__search-toggle { display: flex; grid-column: 2; }
    .kln-header__logo { grid-column: 5; width: 120px; }
    .kln-icon-link_wish { grid-column: 7; }
    .kln-header__cart { grid-column: 8; }
    .kln-header__login,
    .kln-header__account { grid-column: 9; }
    .kln-header__search { display: none; grid-column: 1 / -1; grid-row: 2; max-width: none; padding-bottom: 12px; }
    .kln-header._search-open .kln-header__search { display: block; }
    .kln-header__avatar { inset: 1px; }
    .kln-sections { grid-row: 3; margin: 0 -16px; border-top: 0; overflow-x: auto; scrollbar-width: none; }
    .kln-sections::-webkit-scrollbar { display: none; }
    .kln-sections__list { justify-content: flex-start; flex-wrap: nowrap; gap: 20px; width: max-content; padding: 8px 16px 12px; }
}
@media (max-width: 767px) {
    .kln-promo { min-height: 34px; padding: 8px 12px; }
    .kln-promo__more { display: none; }
    .kln-header__bar { display: none; }
    .kln-header__main { grid-template-rows: 72px auto auto; }
    .kln-header__logo { width: 96px; }
    .kln-sections__link { font-size: var(--kln-fs-sm); }
}
/* 6 кнопок по 34px + логотип 76px + поля контейнера помещаются в 320px. */
@media (max-width: 359px) {
    .kln-header__main { grid-template-columns: 34px 34px 34px minmax(0, 1fr) auto minmax(0, 1fr) 34px 34px 34px; }
    .kln-header__logo { width: 76px; }
    .kln-icon-link__icon,
    .kln-header__account { width: 34px; height: 34px; }
    .kln-icon-link__icon:before { inset: 5px; }
}


/* ---------- Компактная шапка (inc/_foot.php) ----------
   Выезжает сверху, когда обычная ушла за верх экрана (kalina.js). Слева «Каталог» и поиск, по центру логотип, справа избранное,
   корзина, кабинет; на планшете и телефоне — значки, поиск под лупой. Ниже панели каталога и окна входа (10000) и мобильного фильтра (3000). */
.kln-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; border-bottom: 1px solid rgba(0, 0, 0, .06); box-shadow: var(--kln-shadow-sm); font-family: var(--kln-font); transform: translateY(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.kln-sticky._shown { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.kln-menu-open .kln-sticky { box-shadow: none; }
/* Полупрозрачный фон с размытием: страница просвечивает, текст читается. Размытие — на подложке, а не на самой шапке:
   иначе строка поиска на телефоне (дочерний блок) не смогла бы размыть страницу под собой. Без поддержки размытия — белый фон. */
.kln-sticky:before,
.kln-sticky__search:before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; pointer-events: none; }
.kln-sticky__search:before { display: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .kln-sticky:before,
    .kln-sticky__search:before { background: rgba(255, 255, 255, .68); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
}
.kln-sticky__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; height: 64px; }
.kln-sticky__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kln-sticky__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.kln-sticky__logo { display: block; }
.kln-sticky__logo img { display: block; width: auto; height: 40px; } /* logo-mark.svg без подписи: ягоды и буквы того же размера, что раньше при 46px */
/* «Каталог» — спокойный: такая же полупрозрачная плашка, как поиск, тёмный текст, красный только значок. */
.kln-sticky__catalog { flex: 0 0 auto; }
.kln-sticky__search { position: relative; flex: 0 1 290px; min-width: 0; margin: 0; }
.kln-sticky__input { width: 100%; height: 42px; margin: 0; padding: 0 42px 0 16px; border: 1px solid var(--kln-border); border-radius: var(--kln-r-sm); font: var(--kln-fs-md) var(--kln-font); color: var(--kln-ink); -webkit-appearance: none; appearance: none; }
.kln-sticky__input::placeholder { color: var(--kln-muted); }
.kln-sticky__input:focus { border-color: var(--kln-ink); box-shadow: none; outline: none; }
.kln-sticky__input::-webkit-search-cancel-button { display: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .kln-sticky__input { border-color: rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .kln-sticky__input:focus { background: #fff; }
}
.kln-sticky__submit { position: absolute; top: 0; right: 0; width: 42px; height: 42px; padding: 0; border: 0; background: var(--kln-muted); cursor: pointer; -webkit-mask: url(../img/icons/search.svg) no-repeat center / 20px; mask: url(../img/icons/search.svg) no-repeat center / 20px; }
.kln-sticky__submit:hover { background: var(--kln-red); }
.kln-sticky__icon { position: relative; display: block; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--kln-ink); cursor: pointer; }
.kln-sticky__icon:before { --kln-icon: url(../img/icons/user.svg); content: ''; position: absolute; inset: 8px; background: currentColor; -webkit-mask: var(--kln-icon) no-repeat center / contain; mask: var(--kln-icon) no-repeat center / contain; }
.kln-sticky__icon:hover,
.kln-sticky._search-open .kln-sticky__icon--search { color: var(--kln-red); }
.kln-sticky__icon--search { display: none; }
.kln-sticky__icon--search:before { --kln-icon: url(../img/icons/search.svg); }
.kln-sticky__icon--wish:before { --kln-icon: url(../img/icons/heart.svg); }
.kln-sticky__icon--cart:before { --kln-icon: url(../img/icons/cart.svg); }
.kln-sticky__count { position: absolute; top: 1px; right: -3px; }
/* Под кружком с числом значок вырезан маской: зазор вокруг кружка прозрачный, а не белая обводка — на полупрозрачной панели и любом фоне. */
.kln-icon-link:has(.kln-count._filled) .kln-icon-link__icon:before,
.kln-sticky__icon:has(.kln-count._filled):before {
    -webkit-mask: var(--kln-icon) no-repeat center / contain, radial-gradient(circle at right -3px top 1px, #0000 11px, #000 11.5px);
    -webkit-mask-composite: source-in;
    mask: var(--kln-icon) no-repeat center / contain, radial-gradient(circle at right -3px top 1px, #0000 11px, #000 11.5px);
    mask-composite: intersect;
}
.kln-sticky__icon:focus-visible,
.kln-sticky__logo:focus-visible,
.kln-sticky__submit:focus-visible { outline: 1px solid var(--kln-ink); outline-offset: 2px; }
/* Компьютер: поиск — лупой; по нажатию на месте лупы раскрывается поле (класс _search-open ставит kalina.js, он же ставит фокус).
   Поле всегда полной ширины, но в потоке занимает только лупу (отрицательный отступ справа), а видно его через маску (clip-path):
   закрытое — квадрат 42px, при открытии маска раскрывается вправо. Лупа — одна (:after формы) и едет вместе с краем маски,
   поэтому при открытии ничего не мигает. Над лупой — прозрачная кнопка-переключатель (стоит перед полем). */
@media (min-width: 1024px) {
    .kln-sticky__icon--search { display: block; order: 1; width: 42px; height: 42px; margin-left: -54px; }
    .kln-sticky__icon--search:before { display: none; }
    .kln-sticky._search-open .kln-sticky__icon--search { display: none; }
    .kln-sticky__search { --kln-sticky-search-w: 290px; flex: 0 0 auto; width: var(--kln-sticky-search-w); margin-right: calc(42px - var(--kln-sticky-search-w)); visibility: hidden; transition: visibility 0s .25s; }
    .kln-sticky__input { clip-path: inset(0 calc(var(--kln-sticky-search-w) - 42px) 0 0 round var(--kln-r-sm)); transition: clip-path .25s ease; }
    .kln-sticky__search:after { content: ''; position: absolute; top: 0; left: 0; width: 42px; height: 42px; background: var(--kln-ink); -webkit-mask: url(../img/icons/search.svg) no-repeat center / 20px; mask: url(../img/icons/search.svg) no-repeat center / 20px; visibility: visible; pointer-events: none; transition: transform .25s ease, background-color .25s ease; }
    .kln-sticky__icon--search:hover + .kln-sticky__search:after,
    .kln-sticky__search:has(.kln-sticky__submit:hover):after { background: var(--kln-red); }
    .kln-sticky__submit { background: none; -webkit-mask: none; mask: none; }
    .kln-sticky__submit:hover { background: none; }
    .kln-sticky._search-open .kln-sticky__search { visibility: visible; transition: none; }
    .kln-sticky._search-open .kln-sticky__input { clip-path: inset(0 0 0 0 round var(--kln-r-sm)); }
    .kln-sticky._search-open .kln-sticky__search:after { transform: translateX(calc(var(--kln-sticky-search-w) - 42px)); }
    .kln-sticky._search-open .kln-sticky__search:not(:has(.kln-sticky__submit:hover)):after { background: var(--kln-muted); }
}
@media (max-width: 1023px) {
    .kln-sticky__inner { column-gap: 8px; height: 56px; }
    .kln-sticky__left,
    .kln-sticky__right { gap: 0; }
    .kln-sticky__icon--search { display: block; }
    .kln-sticky__logo img { height: 34px; }
    /* Поиск — строкой под шапкой по нажатию на лупу; поле 46px и 16px — иначе iOS увеличивает страницу при вводе. */
    .kln-sticky__search { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 0 16px 12px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
    .kln-sticky._search-open .kln-sticky__search { display: block; }
    .kln-sticky__search:before { display: block; }
    .kln-sticky__input { height: var(--kln-h-control); }
    .kln-sticky__submit { right: 15px; height: var(--kln-h-control); }
    .kln-sticky__search .kln-search-results { left: 15px; right: 15px; min-width: 0; }
}
@media (max-width: 359px) {
    .kln-sticky__icon { width: 34px; height: 34px; }
    .kln-sticky__icon:before { inset: 6px; }
    .kln-sticky__logo img { height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
    .kln-sticky,
    .kln-sticky._shown { transition: none; }
    .kln-sticky .kln-sticky__search,
    .kln-sticky._search-open .kln-sticky__search,
    .kln-sticky__input,
    .kln-sticky__search:after { transition: none; }
}

/* ---------- Панель «Каталог» (inc/_foot.php, inc/_panel_brands.php, menu/panel_catalog) ----------
   Открывается под логотипом (--kln-panel-top считает kalina.js) и закрывает строку разделов; кнопка «Каталог» в шапке становится «Закрыть».
   Слева разделы с подборками, справа промо и логотипы брендов. Меню сайта, магазины и контакты дублируют шапку — показываются до 1023px,
   где её строки над логотипом нет. Слой 10000 — выше плавающих кружков историй (9999). Анимации — 0,2 с. */
.kln-panel { position: fixed; top: var(--kln-panel-top, 0px); left: 0; z-index: 10000; width: 100%; height: calc(100% - var(--kln-panel-top, 0px)); padding: 32px 0 48px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--kln-line); background: var(--kln-surface); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .2s ease-in, visibility 0s linear .2s; }
/* Открытие: плашка выезжает из-под шапки сверху вниз (clip-path раскрывает её по высоте), пункты появляются по очереди
   (--kln-i у пункта ставит kalina.js); сама плашка не сдвигается. Закрытие: пункты гаснут разом, плашка сворачивается вверх. Слой всегда 10000 — иначе
   при закрытии панель гасла под карточками. _previously ставит main.js на 0,2 с закрытия, до снятия _active. */
.kln-panel._active { visibility: visible; clip-path: inset(0 0 -80px 0); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.kln-panel._active._previously { clip-path: inset(0 0 100% 0); transition: clip-path .2s ease-in; }
.kln-panel__inner { position: relative; z-index: 10; }
.kln-panel__close { display: none; } /* закрывает панель кнопка «Каталог»; эту нажимает kalina.js */
.kln-panel :is(.kln-panel-head, .kln-panel__search, .kln-mm__cat, .kln-panel-promo, .kln-panel-brands) { opacity: 0; transform: translateY(10px); transition: opacity .12s ease, transform .12s ease; }
.kln-panel._active :is(.kln-panel-head, .kln-panel__search, .kln-mm__cat, .kln-panel-promo, .kln-panel-brands) { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.1s + var(--kln-i, 0) * 35ms); }
.kln-panel._active._previously :is(.kln-panel-head, .kln-panel__search, .kln-mm__cat, .kln-panel-promo, .kln-panel-brands) { opacity: 0; transition: opacity .12s ease; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .kln-panel, .kln-panel._active, .kln-panel._active._previously { clip-path: none; }
    .kln-panel :is(.kln-panel-head, .kln-panel__search, .kln-mm__cat, .kln-panel-promo, .kln-panel-brands) { transform: none !important; transition-delay: 0s !important; }
}
.kln-panel__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px 56px; }
/* Заголовки колонок — мелкие подписи, как в подвале. */
.kln-panel__title { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--kln-line); font-size: var(--kln-fs-xs); font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--kln-muted); text-wrap: balance; }
@media (max-width: 767px) {
    .kln-panel__title { margin-bottom: 8px; padding-bottom: 8px; }
}
/* «Каталог» и подборки — в одной строке заголовка. */
.kln-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.kln-panel-quick { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.kln-panel-quick__link { font-size: var(--kln-fs-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--kln-muted); text-decoration: none; white-space: nowrap; transition: color .15s; }
.kln-panel-quick__link:hover { color: var(--kln-red); text-decoration: none; }
/* Ссылки «дальше» — с тонкой красной стрелкой вместо символа «→». */
.kln-panel-quick__link.kln-arrow-link,
.kln-panel-brands__all { display: inline-flex; align-items: center; gap: 4px; }
/* Разделы с подборками */
.kln-mm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; margin: 0; list-style: none; }
.kln-mm__col { display: contents; list-style: none; }
.kln-mm__cat { order: var(--kln-o); } /* общий порядок разделов, хотя в разметке они разложены по колонкам */
.kln-mm__head { display: flex; align-items: center; }
.kln-mm__name { flex: 1 1 auto; font-size: var(--kln-fs-md); font-weight: 600; line-height: 1.2; color: var(--kln-ink); text-decoration: none; }
.kln-mm__name:hover { color: var(--kln-red); text-decoration: none; }
.kln-mm__toggle { display: none; }
.kln-mm__links { margin: 8px 0 0; padding: 0; list-style: none; }
.kln-mm__all { display: none; }
.kln-mm__link { display: block; padding: 4px 0; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); text-decoration: none; }
.kln-mm__link:hover { color: var(--kln-red); text-decoration: none; }
/* Промо и бренды */
.kln-panel-promo { position: relative; display: block; margin-bottom: 24px; padding: 16px 20px; border-radius: var(--kln-r-md); background: #fff; color: var(--kln-text); text-decoration: none; transition: box-shadow .15s; }
.kln-panel-promo__icon { float: right; width: 48px; height: 48px; margin: -4px -4px 4px 12px; }
.kln-panel-promo:hover { color: var(--kln-text); text-decoration: none; box-shadow: var(--kln-shadow-sm); }
.kln-panel-promo__title { display: block; margin-bottom: 8px; font-family: var(--kln-font-head); font-size: var(--kln-fs-lg); line-height: 1.2; color: var(--kln-ink); }
.kln-panel-promo__text { display: block; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); }
.kln-panel-promo__more { display: inline-block; margin-top: 12px; font-size: var(--kln-fs-sm); font-weight: 600; color: var(--kln-ink); }
.kln-panel-brands { margin-bottom: 28px; }
.kln-panel-brands__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; list-style: none; }
.kln-panel-brands__link { display: flex; align-items: center; justify-content: center; height: 60px; padding: 16px 24px; border-radius: var(--kln-r-sm); background: #fff; transition: box-shadow .15s; }
.kln-panel-brands__link:hover { box-shadow: var(--kln-shadow-sm); }
.kln-panel-brands__link img { display: block; max-width: 100%; max-height: 28px; object-fit: contain; }
.kln-panel-brands__logos .brand-art { --brand-scale: .56; }
.kln-panel-brands__all { margin-top: 12px; font-size: var(--kln-fs-sm); font-weight: 600; color: var(--kln-ink); text-decoration: none; }
.kln-panel-brands__all:hover { color: var(--kln-red); text-decoration: none; }
/* Меню сайта, магазины, контакты, соцсети — до 1023px */
.kln-panel-more { display: none; }
.kln-panel__menu { margin-bottom: 24px; }
.kln-panel__menu-list { margin: 0; list-style: none; }
.kln-panel__menu-link { display: inline-block; padding: 4px 0; font-size: var(--kln-fs-md); color: var(--kln-text); text-decoration: none; transition: color .15s; }
.kln-panel__menu-link:hover { color: var(--kln-red); text-decoration: none; }
.kln-panel-shops { margin-bottom: 20px; }
.kln-panel-shops__list { margin: 0; list-style: none; }
.kln-panel-shops__item { margin: 0 0 12px; }
.kln-panel-shops__address { display: block; font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-ink); text-decoration: none; }
.kln-panel-shops__address:hover { color: var(--kln-red); text-decoration: none; }
.kln-panel-shops__mode { display: block; margin-top: 2px; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); }
.kln-panel-contacts { margin-bottom: 20px; }
.kln-panel-contacts__phone { display: block; font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-ink); text-decoration: none; }
.kln-panel-contacts__hours { display: block; margin-top: 2px; font-size: var(--kln-fs-sm); color: var(--kln-muted); }
.kln-panel__social { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--kln-line); }
.kln-panel__social-title { font-size: var(--kln-fs-sm); line-height: 1; color: var(--kln-muted); }
.kln-panel__social-list { display: flex; align-items: center; gap: 8px; margin: 0; list-style: none; }
.kln-panel__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--kln-ink); text-decoration: none; transition: color .15s; }
.kln-panel__social-link:hover { color: var(--kln-red); text-decoration: none; }
.kln-panel__social-link img,
.kln-panel__social-link svg { display: block; width: 17px; height: 17px; object-fit: contain; }
.kln-panel__social-link svg { opacity: .5; transition: opacity .15s; }
.kln-panel__social-link:hover svg { opacity: 1; }
/* На компьютере панель не во всю высоту, под ней затемнение (kalina.js); поле поиска уже есть в шапке. */
@media (min-width: 1024px) {
    .kln-panel { height: auto; max-height: calc(100% - var(--kln-panel-top, 0px)); padding-top: 28px; padding-bottom: 36px; box-shadow: var(--kln-shadow-lg); }
    .kln-panel__search { display: none; }
}
@media (max-width: 1300px) {
    .kln-panel__grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px 36px; }
    .kln-mm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .kln-panel__grid { grid-template-columns: minmax(0, 1fr); }
    .kln-mm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kln-panel-brands__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kln-panel-more { display: block; }
    .kln-panel-nav { margin-bottom: 24px; }
}
/* Телефон: разделы — аккордеон, меню — в две колонки. */
@media (max-width: 767px) {
    .kln-panel { padding: 16px 0 24px; }
    .kln-panel__grid { margin-top: 20px; }
    .kln-panel-quick { gap: 4px 16px; }
    /* Разделы — две независимые колонки (через один, см. panel_catalog/template.php): раскрытый список сдвигает вниз только свою колонку. */
    .kln-mm { display: flex; gap: 16px; }
    .kln-mm__col { display: block; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
    .kln-mm__cat { border-bottom: 1px solid var(--kln-line); }
    .kln-mm__head { min-height: 48px; }
    /* Типографика: без жирного — разделы обычным начертанием чуть крупнее, подборки мельче и светлее, «Все …» — цветом текста. */
    .kln-mm__name { padding: 13px 0; font-size: 17px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
    .kln-mm__toggle { display: block; flex: 0 0 auto; width: 36px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
    .kln-mm__toggle:after { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-right: 1.25px solid var(--kln-muted); border-bottom: 1.25px solid var(--kln-muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
    .kln-mm__cat._open .kln-mm__toggle:after { transform: translateY(2px) rotate(-135deg); }
    /* Список раскрывается вниз плавно: строка сетки 0fr → 1fr. */
    .kln-mm__drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
    .kln-mm__cat._open .kln-mm__drop { grid-template-rows: 1fr; }
    .kln-mm__links { min-height: 0; margin: 0; padding: 0; overflow: hidden; }
    .kln-mm__links > li:first-child { margin-top: -4px; }
    .kln-mm__links > li:last-child { margin-bottom: 12px; }
    .kln-mm__all { display: block; }
    .kln-mm__all .kln-mm__link { color: var(--kln-ink); }
    .kln-mm__link { padding: 5px 0; font-size: 15px; line-height: 1.35; }
    .kln-panel-brands__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kln-panel-promo { margin-bottom: 24px; padding: 16px 16px; }
    .kln-panel__menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    .kln-panel__menu-link { display: block; }
}

/* ---------- Подвал (inc/_foot.php, menu/bottom, news.list/social, news.list/shop_main) ----------
   Светлый фон. Сверху по центру логотип (у него центральная композиция) с тонкими линиями по бокам и подписью,
   под ним колонки: меню | каталог | магазины | связаться. Заголовки колонок — мелкий капс, ссылки — основной текст. */
.kln-footer { position: relative; z-index: 1; border-top: 1px solid var(--kln-line); background: var(--kln-surface); font-family: var(--kln-font); color: var(--kln-text); }
.kln-footer__head { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0 32px; text-align: center; }
.kln-footer__mark { display: flex; justify-content: center; width: 100%; }
.kln-footer__logo { display: block; flex: 0 0 auto; width: 128px; }
.kln-footer__logo img { display: block; width: 100%; height: auto; }
.kln-footer__tagline { max-width: 560px; margin: 0; font-size: var(--kln-fs-sm); line-height: 1.5; color: var(--kln-muted); text-wrap: balance; }
.kln-footer__grid { display: grid; gap: 32px 48px; padding: 0 0 40px; }
.kln-footer__grid :is(.kln-footer__title, .kln-footer__shops-title) { display: none; } /* центральная композиция — без заголовков колонок */
.kln-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kln-footer__brand .kln-footer__title { margin-bottom: 0; }
.kln-footer__phone { font-size: var(--kln-fs-lg); font-weight: 600; line-height: 1.2; color: var(--kln-ink); text-decoration: none; white-space: nowrap; }
.kln-footer__phone:hover { color: var(--kln-red); text-decoration: none; }
/* «Написать нам» — личные чаты по номеру магазина, «Наши каналы» — соцсети и каналы; один ряд круглых кнопок. */
.kln-footer__contact { display: flex; flex-direction: column; gap: 8px; }
.kln-footer__contact + .kln-footer__contact { margin-top: 4px; }
.kln-footer__label { font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); text-wrap: balance; }
.kln-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Значки без кружков — контурные, как остальные на сайте; область нажатия 40px. */
.kln-footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--kln-ink); text-decoration: none; transition: color .15s; }
.kln-footer__social-link:hover { color: var(--kln-red); }
.kln-footer__social-link svg { flex: 0 0 auto; width: 20px; height: 20px; opacity: .3; transition: opacity .15s; }
.kln-footer__social-link:hover svg { opacity: 1; }
.kln-footer__social-link img { width: 18px; height: 18px; object-fit: contain; }
/* Меню */
.kln-footer__col { justify-self: center; width: fit-content; max-width: 100%; padding: 16px 0; border-block: 1px solid var(--kln-border); } /* строка меню отбита линиями по ширине пунктов */
.kln-footer__title,
.kln-footer__shops-title { margin: 0 0 16px; font-size: var(--kln-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kln-muted); text-wrap: balance; }
.kln-footer__menu-list { margin: 0; list-style: none; }
.kln-footer__menu-item { margin: 0 0 12px; break-inside: avoid; }
.kln-footer__menu-link { font-size: var(--kln-fs-md); line-height: 1.4; color: var(--kln-ink); text-decoration: none; transition: color .15s; }
.kln-footer__menu-link:is(:hover, ._active) { color: var(--kln-red); text-decoration: none; }
/* Магазины: узкие телефоны — адреса переносятся, а не раздвигают страницу. */
.kln-footer__shops { min-width: 0; overflow-wrap: anywhere; } /* узкие экраны: длинное примечание к адресу переносится */
.kln-footer__shop { margin: 0 0 20px; }
.kln-footer__shop:last-child { margin-bottom: 0; }
.kln-footer__shop-address { margin: 0; font-size: var(--kln-fs-md); font-weight: 600; line-height: 1.4; color: var(--kln-ink); }
.kln-footer__shop-note { display: block; margin: 2px 0 4px; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); text-wrap: balance; }
.kln-footer__shop-mode { margin: 0; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-text); }
/* Нижняя строка. Ссылки — во включаемом файле /include/footer/privacy-policy.php (правится в админке), поэтому по тегу. */
.kln-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px 0 16px; border-top: 1px solid var(--kln-line); font-size: var(--kln-fs-sm); color: var(--kln-muted); }
.kln-footer__copyright { font-size: var(--kln-fs-sm); color: var(--kln-muted); text-wrap: balance; }
.kln-footer__links { font-size: var(--kln-fs-sm); color: var(--kln-muted); }
.kln-footer__links a { margin-left: 20px; color: var(--kln-muted); text-decoration: none; transition: color .3s ease-in-out; }
.kln-footer__links a:first-child { margin-left: 0; }
.kln-footer__links a { display: inline-block; padding: 8px 0; } /* область нажатия не меньше 36px по высоте */
.kln-footer__links a:hover { color: var(--kln-red); }
/* Компьютер и планшет — центральная композиция, как логотип: меню одной строкой, под ним магазин | связь | магазин.
   Каталог не дублируем — он в шапке. Заголовки колонок при такой раскладке не нужны. */
@media (min-width: 601px) {
    .kln-footer__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 64px; text-align: center; }
    .kln-footer__col { grid-column: 1 / -1; grid-row: 1; }
    .kln-footer__menu-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
    .kln-footer__menu-item { margin: 0; }
    .kln-footer__shops { display: contents; }
    /* Адреса прижаты к блоку связи посередине, а не разнесены по краям. */
    .kln-footer__shop { grid-row: 2; max-width: 280px; margin: 0; }
    .kln-footer__shop:nth-child(1 of .kln-footer__shop) { grid-column: 1; justify-self: end; }
    .kln-footer__shop:nth-child(2 of .kln-footer__shop) { grid-column: 3; justify-self: start; }
    /* Связь: телефон, под ним «Написать нам» и «Наши каналы» рядом. */
    .kln-footer__brand { display: grid; grid-template-columns: auto auto; grid-row: 2; grid-column: 2; justify-items: center; gap: 16px 40px; }
    .kln-footer__phone { grid-column: 1 / -1; }
    .kln-footer__contact { align-items: center; }
    .kln-footer__contact + .kln-footer__contact { margin-top: 0; }
    .kln-footer__bottom { justify-content: center; column-gap: 40px; }
}
@media (max-width: 1100px) {
    .kln-footer__grid { column-gap: 32px; }
    .kln-footer__menu-list { column-gap: 24px; }
}
@media (max-width: 768px) {
    .kln-footer__copyright { width: 100%; text-align: center; }
    .kln-footer__links { width: 100%; text-align: center; }
}
/* Телефон: всё по центру, связь — сеткой в две колонки, меню и магазины — компактно. */
@media (max-width: 600px) {
    .kln-footer__head { gap: 12px; padding: 28px 0 24px; }
    .kln-footer__br { display: none; } /* на узком экране подпись переносится сама */
    .kln-footer__logo { width: 112px; }
    .kln-footer__grid { grid-template-columns: 1fr; gap: 24px; padding: 0 0 20px; text-align: center; }
    .kln-footer__brand { order: 0; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 12px 12px; }
    .kln-footer__brand > :not(.kln-footer__contact) { grid-column: 1 / -1; }
    .kln-footer__brand .kln-footer__title { display: none; } /* телефон и мессенджеры сразу под логотипом понятны и без заголовка */
    .kln-footer__tagline { line-height: 1.4; }
    .kln-footer__phone { margin: 2px 0 4px; }
    .kln-footer__contact { align-items: center; gap: 8px; }
    .kln-footer__contact + .kln-footer__contact { margin-top: 0; }
    .kln-footer__social { justify-content: center; gap: 8px; }
    .kln-footer__social-link { width: 36px; height: 36px; }
    .kln-footer__title,
    .kln-footer__shops-title { margin-bottom: 12px; }
    .kln-footer__menu-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; columns: auto; }
    .kln-footer__menu-item { margin: 0; }
    .kln-footer__shop { margin-bottom: 12px; }
    .kln-footer__shop-address,
    .kln-footer__shop-mode { display: inline; }
    .kln-footer__shop-note { margin: 2px 0; }
    .kln-footer__bottom { flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 20px; text-align: center; }
    /* Ссылки разделены только пробелом: любой другой текст между ними стал бы лишним flex-элементом и сдвинул строки. */
    .kln-footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 20px; padding-top: 0; }
    .kln-footer__links a { margin: 0; font-size: var(--kln-fs-sm); line-height: 1.4; white-space: nowrap; }
}
@media (max-width: 480px) {
    .kln-footer__copyright { max-width: 300px; }
}

/* ---------- Плашка «что в корзине» при наведении на значок корзины (kalina.js, /local/ajax/cart-preview.php) ----------
   Небольшая карточка под значком: до трёх последних товаров и итог; в корзину ведёт сам значок. */
.kln-cart-preview { position: fixed; z-index: 2100; width: 320px; padding: 16px; border: 1px solid var(--kln-line); border-radius: var(--kln-r-md); background: #fff; box-shadow: var(--kln-shadow-lg); font-family: var(--kln-font); }
.kln-cart-preview[hidden] { display: none; }
/* Появление — короткое: подъезжает снизу из прозрачности; уход (класс _out ставит kalina.js) — вниз в прозрачность. */
.kln-cart-preview:not([hidden]) { animation: kln-cart-preview-in .2s cubic-bezier(.22, 1, .36, 1); }
.kln-cart-preview._out { animation: kln-cart-preview-out .18s ease-in forwards; pointer-events: none; }
@keyframes kln-cart-preview-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes kln-cart-preview-out { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
    .kln-cart-preview:not([hidden]),
    .kln-cart-preview._out { animation: none; }
}
.kln-cart-preview__list { margin: 0; padding: 0; list-style: none; }
.kln-cart-preview__item + .kln-cart-preview__item { border-top: 1px solid var(--kln-line); }
.kln-cart-preview__link { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px 0; color: var(--kln-ink); text-decoration: none; }
.kln-cart-preview__item:first-child .kln-cart-preview__link { padding-top: 0; }
.kln-cart-preview__link:hover { color: var(--kln-ink); text-decoration: none; }
.kln-cart-preview__link:hover .kln-cart-preview__name { color: var(--kln-red); }
.kln-cart-preview__photo { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: var(--kln-r-sm); background: var(--kln-surface); overflow: hidden; }
.kln-cart-preview__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kln-cart-preview__name { align-self: end; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--kln-fs-sm); line-height: 1.35; transition: color .15s; }
.kln-cart-preview__meta { align-self: start; display: flex; gap: 8px; font-size: var(--kln-fs-sm); line-height: 1.35; }
.kln-cart-preview__qty { color: var(--kln-muted); }
.kln-cart-preview__price { font-weight: 600; white-space: nowrap; }
.kln-cart-preview__more { padding: 4px 0 0; font-size: var(--kln-fs-xs); color: var(--kln-muted); }
.kln-cart-preview__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--kln-line); font-size: var(--kln-fs-sm); color: var(--kln-text); }
.kln-cart-preview__sum { font-size: var(--kln-fs-md); font-weight: 600; color: var(--kln-ink); white-space: nowrap; }
.kln-cart-preview__go { color: var(--kln-red); text-decoration: none; white-space: nowrap; }
.kln-cart-preview__count { margin-left: auto; white-space: nowrap; }
.kln-cart-preview__go:hover { color: var(--kln-red-hover); text-decoration: underline; }
.kln-cart-preview__empty { padding: 8px 0; font-size: var(--kln-fs-sm); color: var(--kln-muted); text-align: center; }