/* Кабельрост — сквозной каркас сайта.
   Шапка, полоса каталога, ритм секций, кнопки, подвал: то, что живёт на каждой
   странице. Страничные блоки — в home.css и product.css.

   Все новые классы носят префикс k-. Это не украшательство: в 00.css лежит
   бутстраповское наследство (только .btn встречается 66 раз), и без префикса
   новые компоненты столкнулись бы со старыми правилами.

   Здесь нет ни одного селектора по голому тегу: файл грузится на всех
   страницах, а старая вёрстка ещё живая. Токены в :root безопасны — это
   инертные переменные. */

:root {
    /* Тема у сайта одна — светлая. Без этой строки Chrome с тёмной темой ОС
       включает авто-инверсию: затемнение лайтбокса светлеет, белые подписи
       чернеют, поля форм уезжают в тёмный. */
    color-scheme: only light;

    /* Цвет. Сцена — дневной офис снабженца и планшет на объекте, поэтому
       светлая тема. Оливковый затемнён с #5e7438 до AA на белом. */
    --c-ink: #14171a;
    --c-ink-2: #4d545c;
    --c-ink-3: #6b7280;
    --c-surface: #ffffff;
    --c-surface-2: #f5f6f3;
    --c-surface-3: #ecefe7;
    --c-hairline: #d9ddd6;
    --c-hairline-strong: #b9c0b3;

    --c-brand: #4f6630;
    --c-brand-hover: #3c4f22;
    --c-brand-tint: #eef2e5;
    --c-brand-ink: #38491f;

    --c-alert: #8f2f1d;
    --c-alert-tint: #fbeeeb;

    --font: "Montserrat", system-ui, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-s: 0.875rem;
    --fs-m: 1rem;
    --fs-l: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.5rem;

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-body: 1.55;

    /* Шаг сетки 4px. Промежуточных значений нет. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    --radius: 3px;
    --radius-lg: 4px;

    --shadow-raised: 0 1px 2px rgba(20, 23, 26, 0.06), 0 8px 24px rgba(20, 23, 26, 0.08);

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 220ms;

    --measure: 68ch;
    --page: 1200px;
}

/* ---------- Каркас ---------- */

.k-wrap {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--s-5);
    box-sizing: border-box;
}

.k-skip {
    position: absolute;
    left: var(--s-4);
    top: calc(-1 * var(--s-9));
    z-index: 20;
    background: var(--c-surface);
    border: 1px solid var(--c-brand);
    padding: var(--s-3) var(--s-4);
    transition: top var(--dur) var(--ease);
}

.k-skip:focus {
    top: var(--s-4);
}

/* Секция — единственная единица вертикального ритма.
   Над заголовком воздуха больше, чем под ним. */
.k-section {
    padding-block: var(--s-8);
    font-family: var(--font);
    color: var(--c-ink);
    line-height: var(--lh-body);
    font-variant-numeric: tabular-nums;
}

.k-section--tight {
    padding-block: var(--s-7);
}

.k-section--quiet {
    background: var(--c-surface-2);
}

.k-section + .k-section:not(.k-section--quiet) {
    border-top: 1px solid var(--c-hairline);
}

.k-section__head {
    margin-bottom: var(--s-5);
}

.k-section__head h2,
.k-section h2.k-h2 {
    margin: 0;
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--c-ink);
    text-wrap: balance;
}

.k-eyebrow {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-3);
    margin-bottom: var(--s-2);
}

.k-lead {
    color: var(--c-ink-2);
    max-width: var(--measure);
    margin: var(--s-3) 0 0;
}


/* ---------- Кнопки ---------- */

.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: var(--s-3) var(--s-5);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--c-brand);
    color: #fff;
    font-family: var(--font);
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: var(--lh-tight);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.k-btn:hover,
.k-btn:focus {
    background: var(--c-brand-hover);
    color: #fff;
    text-decoration: none;
}


.k-btn--on-dark {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.k-btn--on-dark:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}


/* ---------- Наследство старой шапки ----------
   Два правила из mobile/adaptive.css написаны под шапку, которая была
   фиксированной целиком. Теперь липкая только полоса каталога, поэтому
   оба гасим здесь, а не правим adaptive.css: он ещё обслуживает мобильное
   меню и трогать его рискованно. */

.head-wrap {
    position: static;
}

/* Полоса каталога вынесена из .head-wrap: sticky работает только в пределах
   родителя, а .head-wrap кончается вместе с шапкой — полоса уезжала вместе
   с ней вместо того, чтобы прилипнуть. */

@media (max-width: 900px) {
    .newwrap {
        padding-top: 0;
    }
}

/* ---------- Шапка ---------- */
/* Две строки, липкая только нижняя. Прежняя шапка держала обе фиксированными
   и постоянно съедала 175px — пятую часть экрана ноутбука. */

.k-head {
    background: var(--c-surface);
    font-family: var(--font);
    color: var(--c-ink);
    position: relative;
    z-index: 13;
}

/* Утилитарная полоса: режим, доставка, почта, соцсети. Мелким кеглем и
   приглушённым цветом — это справочный слой, он не должен спорить с поиском
   и телефоном за внимание. */
.k-head__utility {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-hairline);
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
}

.k-head__utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: 38px;
}

/* Информационные разделы. Поднялись сюда из липкой полосы, поэтому кегль
   утилитарный, а не навигационный: это справочный слой, читаемый один раз. */
.k-head__nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-head__nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}

.k-head__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    color: var(--c-ink-2);
    font-size: var(--fs-xs);
    text-decoration: none;
}

.k-head__nav a:hover {
    color: var(--c-brand-ink);
}

.k-head__nav .current > a,
.k-head__nav .active > a {
    color: var(--c-brand-ink);
    font-weight: 700;
}

.k-head__util-right {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

/* Только абзацы модулей. Селектор по div обнулял margin-inline: auto
   у самого .k-wrap, и полоса растягивалась во всю ширину окна, пока
   остальные строки шапки центрировались по контейнеру 1200px. */
.k-head__utility p,
.k-head__utility .custom {
    margin: 0;
}

.k-head__mail .custom {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    flex-wrap: wrap;
}

/* Модуль печатает иконку как <i> вплотную к тексту — разводим их. */
.k-head__mail p {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.k-head__mail .i-icon {
    color: var(--c-ink-3);
    font-size: 14px;
    line-height: 1;
}

.k-head__utility a {
    color: var(--c-ink-2);
    text-decoration: none;
}

.k-head__utility a:hover {
    color: var(--c-brand-ink);
}


/* Модули «Доставка» и «Соцсети» пришли из прежней шапки, где стояли на
   оливковом фоне: белый текст, иконка в белом кружке 40px. В светлой
   утилитарной полосе всё это невидимо — перекрашиваем и уменьшаем. */
.k-head__delivery .custom,
.k-head__delivery .custom p,
.k-head__delivery .custom a {
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
    gap: var(--s-2);
    white-space: nowrap;
}

.k-head__delivery .custom a .img {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
}

.k-head__delivery img {
    width: 20px;
    height: 20px;
    filter: brightness(0.35);
}

.k-head__socials .custom p {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    height: auto;
}

.k-head__socials .custom p a {
    display: inline-flex;
    padding: 0;
}

.k-head__socials img {
    width: 18px;
    height: 18px;
    max-width: 18px;
    filter: brightness(0.4);
    opacity: 0.7;
}

.k-head__socials a:hover img {
    opacity: 1;
}

.k-head__top {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    padding-block: var(--s-4);
}

/* Поиск уехал в липкую полосу, свободную ширину забирает дескриптор —
   контакты прижимаем к правому краю. */
.k-head__brand {
    margin-right: auto;
}

/* Логотип с дескриптором: на внутренних страницах это единственное место,
   где сказано, чем занимается компания и где она находится. */
.k-head__brand {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex: none;
}

.k-head__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    white-space: nowrap;
}

.k-head__slogan {
    max-width: 12rem;
    padding-left: var(--s-4);
    border-left: 1px solid var(--c-hairline);
    color: var(--c-ink-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
}

.k-head__slogan p {
    margin: 0;
}

.k-head__logo {
    display: inline-flex;
    flex: none;
}

.k-head__logo img {
    height: 52px;
    width: auto;
}

/* Поиск живёт в липкой полосе каталога: 3,4 тыс. позиций ищут поиском, и он
   должен быть под рукой на любой глубине страницы, а не только наверху.
   Тема модуля задаётся его собственными переменными --vls-*, здесь только
   палитра и размеры под оливковую полосу. */
.k-nav__search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
}

.k-nav__search .vm-livesearch {
    --vls-accent: var(--c-brand-ink);
    --vls-accent-dark: #2c3a17;
    --vls-text: var(--c-ink);
    --vls-muted: var(--c-ink-3);
    --vls-border: transparent;
    --vls-border-soft: var(--c-hairline);
    --vls-surface: var(--c-surface);
    --vls-surface-alt: var(--c-surface-2);
    --vls-hover: var(--c-surface-3);
    --vls-highlight: var(--c-brand-tint);
    --vls-radius: var(--radius);
    --vls-radius-drop: var(--radius);
    --vls-max-width: none;
}

.k-nav__search .vm-livesearch__form {
    margin: 0;
}

.k-nav__search .vm-livesearch__input {
    height: 40px;
    padding-inline: var(--s-4);
    font-family: var(--font);
    font-size: var(--fs-s);
}

.k-nav__search .vm-livesearch__submit {
    height: 40px;
    font-family: var(--font);
    font-size: var(--fs-s);
    font-weight: 700;
}

/* Выпадающая подсказка отбивается от оливкового фона тенью, а не рамкой. */
.k-nav__search .vm-livesearch__dropdown {
    margin-top: 4px;
    border-top: 1px solid var(--c-hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-raised);
}

.k-nav__search .vm-livesearch__title,
.k-nav__search .vm-livesearch__price {
    font-family: var(--font);
    font-size: var(--fs-s);
}

.k-nav__search .vm-livesearch__meta {
    font-family: var(--font);
    font-size: var(--fs-xs);
}

/* У шапки z-index выше липкой полосы, поэтому полноэкранный поиск с телефона
   оказался бы под логотипом. Поднимаем полосу, пока оверлей открыт. */
.k-nav:has(.vm-livesearch--overlay) {
    z-index: 20;
}

.k-phone {
    position: relative;
    text-align: right;
    line-height: var(--lh-snug);
}

.k-phone__main {
    display: block;
    font-size: var(--fs-l);
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: none;
    white-space: nowrap;
}

.k-phone__main:hover {
    color: var(--c-brand-ink);
    text-decoration: none;
}

.k-phone__more {
    font-size: var(--fs-xs);
}

.k-phone__more summary {

    cursor: pointer;
    list-style: none;
    color: var(--c-brand-ink);

    span {
        border-bottom: 1px dashed var(--c-brand-ink);
    }
}

.k-phone__more summary::-webkit-details-marker {
    display: none;
}

.k-phone__list {
    position: absolute;
    right: 0;
    z-index: 15;
    margin-top: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-raised);
    text-align: left;
}

.k-phone__list a {
    display: block;
    padding-block: var(--s-1);
    font-size: var(--fs-s);
    white-space: nowrap;
    text-decoration: none;
    color: var(--c-ink);
}

.k-phone__list a:hover {
    color: var(--c-brand-ink);
}

.k-phone__hours {
    display: block;
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-hairline);
    color: var(--c-ink-3);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

/* ---------- Полоса каталога ---------- */

.k-nav {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--c-brand);
    color: #fff;
    font-family: var(--font);
}

.k-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: 56px;
}

.k-nav__catalog {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    align-self: stretch;
    padding-inline: var(--s-5);
    margin-left: calc(-1 * var(--s-5));
    background: var(--c-brand-ink);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-s);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.k-nav__catalog:hover {
    background: #2c3a17;
    color: #fff;
    text-decoration: none;
}

/* Панель каталога растягивается на всю ширину контейнера: в adaptive.css
   (строки 17–19, медиа min-width:900) у .cat-menu-holder намеренно снято
   position:relative, а списку заданы left:0/right:0 и четыре колонки. Опорой
   там служил .menu-line .menu-holder, которого в новой шапке уже нет, — без
   него панель считала координаты от липкой .k-nav и вылезала во всю ширину
   окна. Возвращаем опору на контейнер строки. */
.k-nav__inner {
    position: relative;
}

/* Кнопка «Каталог» и выпадающее меню приходят из оверрайда
   html/mod_menu/catmenu.php. Разметку не трогаем — раскрытие держится на
   CSS-ховере .cat-menu-holder, — только приводим вид к токенам. */
.k-nav .cat-menu-holder {
    align-self: stretch;
    display: flex;
    margin-left: calc(-1 * var(--s-5));
    margin-right: var(--s-5);
}

.k-nav .cd-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    line-height: var(--lh-tight);
    padding: 0 var(--s-5);
    background: var(--c-brand-ink);
    font-family: var(--font);
    font-size: var(--fs-s);
    letter-spacing: 0.06em;
}

.k-nav .cd-dropdown-trigger:hover {
    background: #2c3a17;
}

.k-nav .cat-menu-holder ul {
    top: 100%;
    border: 1px solid var(--c-hairline);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-raised);
    font-family: var(--font);
    font-size: var(--fs-s);
}

.k-nav__aside {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

/* Уехав вниз по каталогу, человек теряет контакт из виду. Когда основная
   строка шапки уходит за верх экрана, липкая полоса подхватывает телефон
   и кнопку — их показывает класс k-nav--compact (js/header.js). */
.k-nav__phone {
    display: none;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    font-size: var(--fs-s);
    font-weight: 700;
}

.k-nav__phone:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.k-nav--compact .k-nav__phone {
    display: inline-flex;
}

.k-nav-sentinel {
    height: 1px;
    margin-bottom: -1px;
}



/* Кнопка-лупа рядом с иконкой телефона: поле поиска на телефоне уведено
   за экран, и открывает его именно она — отдаёт полю фокус. */
.k-head__searchbtn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
}

.k-head__burger,
.k-head__mobile {
    display: none;
}

/* ---------- Подвал ---------- */

.k-foot {
    background: var(--c-ink);
    color: #c3c8cd;
    padding-block: var(--s-8) var(--s-6);
    font-family: var(--font);
    font-size: var(--fs-s);
    line-height: var(--lh-body);
}

.k-foot a {
    color: #c3c8cd;
    text-decoration: none;
}

.k-foot a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.k-foot__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
}

.k-foot__title {
    color: #fff;
    font-size: var(--fs-s);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.k-foot__list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: var(--lh-snug);
}

.k-foot__list li {
    margin: 0 0 var(--s-2);
    padding: 0;
    list-style: none;
}

.k-foot__contact {
    margin: 0;
    line-height: var(--lh-snug);
}

.k-foot__contact dt {
    color: #8a9199;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--s-4);
}

.k-foot__contact dt:first-child {
    margin-top: 0;
}

.k-foot__contact dd {
    margin: var(--s-1) 0 0;
    color: #fff;
}

.k-foot__socials {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.k-foot__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius);
}

.k-foot__socials a:hover {
    border-color: #fff;
}

/* Тип файла — отдельная колонка слева, а не хвост после названия: у длинных
   названий бейдж переносился на вторую строку и ряд выглядел рваным. */
.k-foot__list--docs a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--s-3);
    align-items: baseline;
}

.k-foot__ext {
    color: #6f767d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
}

.k-foot__hours {
    display: inline-block;
    margin-top: var(--s-1);
    color: #8a9199;
    font-size: var(--fs-xs);
}

.k-foot__delivery {
    margin-top: var(--s-5);
}

.k-foot__delivery a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: #fff;
}

.k-foot__delivery .img img {
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.k-foot__socials .mod-custom p {
    display: flex;
    gap: var(--s-3);
    margin: 0;
}

.k-foot__socials a.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius);
}

.k-foot__socials a.icon:hover {
    border-color: #fff;
}

.k-foot__socials img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.k-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    justify-content: space-between;
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #8a9199;
    font-size: var(--fs-xs);
}

/* ---------- Адаптив ---------- */

@media (max-width: 1100px) {
    .k-head__top {
        gap: var(--s-4);
    }

    .k-head__slogan,
    .k-head__socials {
        display: none;
    }

    /* Полосу делят «Каталог», поиск и прайс — от поиска остаётся достаточно,
       пока не отвалится и прайс на 900px. */
    .k-nav__search {
        max-width: none;
    }

    .k-head__nav ul {
        gap: var(--s-2) var(--s-4);
    }
}

/* 768–868 не разбираются: узкий планшет ещё умещает шапку целиком.
   Порог был 900 — при проверке 18.08 выяснилось, что утилитарная полоса
   («Как купить»…«Контакты» + почта) переносится на вторую строку только
   ниже ~860px, а на 866+ уже помещается в одну. 900 гасил её с большим
   запасом без причины. */
@media (max-width: 868px) {
    .k-section {
        padding-block: var(--s-7);
    }

    .k-head__top {
        gap: var(--s-3);
        padding-block: var(--s-3);
    }

    .k-head__logo img {
        height: 40px;
    }

    .k-phone,
    .k-head__cta,
    .k-head__utility {
        display: none;
    }

    /* Планшет 768–868: поиск остаётся в полосе, места хватает — там только
       «Каталог» и поле. На телефоне его убирает блок 767 ниже. */
    .k-nav__search {
        min-width: 200px;
    }

    /* На телефоне липкая полоса сразу держит контакт: основная строка
       здесь короткая и уезжает мгновенно. */
    .k-nav__aside {
        display: flex;
        margin-left: auto;
    }

    .k-nav__phone {
        display: inline-flex;
    }

    .k-head__burger,
    .k-head__mobile {
        display: inline-flex;
        align-items: center;
        gap: var(--s-3);
    }

    /* Бургер рисуется полосками из mobile/adaptive.css, там они синие (#1b3260)
       со времён прежней темы. Перекрашиваем в основной цвет текста. */
    .k-head__burger {
        width: 44px;
        height: 44px;
        justify-content: center;
        margin: 0;
        border: 1px solid var(--c-hairline);
        border-radius: var(--radius);
        background: var(--c-surface);
        color: var(--c-ink);
    }

    .k-head__burger .mobilelink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .k-head__burger span,
    .k-head__burger span::before,
    .k-head__burger span::after {
        background: var(--c-ink);
        width: 20px;
        height: 2px;
    }

    .k-head__mobile a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--c-hairline);
        border-radius: var(--radius);
        color: var(--c-ink);
    }

    .k-foot__cols {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}

@media (max-width: 767px) {
    /* Поле в липкой полосе на телефоне не помещается: там уже «Каталог» и
       телефон. Уводим за экран, но НЕ через display:none — иначе кнопка-лупа
       не сможет отдать полю фокус, а именно фокус разворачивает модуль
       на весь экран. */
    .k-nav__search {
        position: absolute;
        left: -9999px;
        width: 1px;
        min-width: 0;
        max-width: 1px;
        overflow: hidden;
    }

    .k-nav__search .vm-livesearch--overlay {
        position: fixed;
        left: 0;
        width: auto;
        max-width: none;
        overflow: visible;
    }

    .k-head__searchbtn {
        display: inline-flex;
    }

    /* Три иконки (поиск, прайс, телефон) плюс бургер и логотип в 390px влезают
       только при 40px и узком зазоре — иначе строка вылезает за экран. */
    .k-head__burger,
    .k-head__mobile {
        gap: var(--s-2);
    }

    .k-head__searchbtn,
    .k-head__mobile a,
    .k-head__burger,
    .k-head__burger .mobilelink {
        width: 40px;
        height: 40px;
    }
}

/* Узкий телефон (iPhone SE, 320–400): бургер, логотип и три иконки в строку
   помещаются только с урезанными полями контейнера и мельче логотипом. */
@media (max-width: 400px) {
    .k-head__top {
        padding-inline: var(--s-3);
        gap: var(--s-2);
    }

    .k-head__logo img {
        height: 34px;
    }
}

/* 320px (старые SE и подобные): три иконки уже не помещаются. Убираем прайс —
   он остаётся кнопкой «Скачать прайс» на первом экране и в подвале. */
@media (max-width: 340px) {
    /* Селектор с тегом: правило .k-head__mobile a из блока 900 специфичнее
       одного класса и иначе выигрывает. */
    .k-head__mobile a.k-head__mobile-price {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-skip,
    .k-btn {
        transition: none;
    }
}


/* ---------- Якоря ----------
   Плавная прокрутка по всему сайту и отступ под липкой полосой каталога:
   без scroll-margin-top цель якоря уезжает под меню. */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

:target,
[id] {
    scroll-margin-top: 72px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* На узком экране телефон и кнопка в липкой полосе не помещаются рядом.
   Телефон убираем — он остаётся иконкой в шапке, а кнопка ведёт к форме,
   которой на телефоне пользуются чаще, чем звонком с сайта. */
@media (max-width: 560px) {
    /* Оба состояния полосы: обычное и компактное (после прокрутки его ставит
       js/header.js). Без второго селектора правило .k-nav--compact .k-nav__phone
       выигрывало по специфичности, телефон возвращался вместе с кнопкой, и
       строка вылезала за экран — 296px содержимого при 383px ширины. */
    .k-nav__phone,
    .k-nav--compact .k-nav__phone {
        display: none;
    }
}

/* ——— Преимущества компании (модуль 154, позиция company-benefits) ———

   Блок выводится на всех страницах, кроме главной, поэтому и стили здесь, а
   не в product.css. Раньше он верстался бутстраповской сеткой row/col-md-4,
   зашитой в HTML модуля, а к дизайн-системе приводился перебивкой правил по
   контейнеру .pre-footer — из-за этого на карточке товара блок выглядел
   иначе, чем на разделе. Теперь разметка модуля своя (k-benefits), а правила
   цепляются за неё, а не за чужие классы. */

.k-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-6) var(--s-7);
}

.k-benefits__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
}

.k-benefits__icon {
    width: 56px;
    height: auto;
    margin-bottom: var(--s-1);
}

.k-benefits__title {
    margin: 0;
    font-size: var(--fs-l);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

.k-benefits__text {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fs-s);
    line-height: var(--lh-body);
    color: var(--c-ink-2);
}

@media (max-width: 900px) {
    .k-benefits {
        gap: var(--s-5);
    }
}


/* ---------- Вопросы и ответы ----------
   Модули mod_articles_category с layout krost:faq (faq-global, faq-nk,
   faq-aksess, faq-fur). Вставляются шорткодом {loadposition} в описание
   категории, поэтому снаружи лежит чужая обёртка .moduletable с h3.

   Разметка — <details>/<summary>: раскрытие и доступ с клавиатуры даёт сам
   браузер, обработчик '.faq a' из js/00.js больше не нужен и не срабатывает —
   класса .faq в разметке нет. Старые правила .mod-list.faq в 00.css по той же
   причине ни за что не цепляются, трогать их не понадобилось.

   Вид — «производственный документ»: не плашки, а строки таблицы,
   разделённые волосяной линией. */

.k-faq {
    margin: var(--s-5) 0 0;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
}

.moduletable:has(> .k-faq) > h3 {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    font-weight: 700;
    color: var(--c-ink);
}

.k-faq__group {
    margin: var(--s-5) 0 var(--s-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.k-faq__item {
    border-top: 1px solid var(--c-hairline);
}

.k-faq__item:last-child {
    border-bottom: 1px solid var(--c-hairline);
}

.k-faq__q {
    position: relative;
    display: block;
    padding: var(--s-4) var(--s-7) var(--s-4) 0;
    cursor: pointer;
    font-size: var(--fs-l);
    line-height: var(--lh-snug);
    font-weight: 700;
    color: var(--c-ink);
    transition: color var(--dur) var(--ease);

    /* Стандартный треугольник убираем в обоих движках: маркер рисуем сами. */
    list-style: none;
}

.k-faq__q::-webkit-details-marker {
    display: none;
}

.k-faq__q:hover {
    color: var(--c-brand);
}

.k-faq__q:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.k-faq__q::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--s-3);
    width: 9px;
    height: 9px;
    border: solid var(--c-hairline-strong);
    border-width: 0 0 2px 2px;
    transform: translateY(-70%) rotate(-45deg);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.k-faq__q:hover::after {
    border-color: var(--c-brand);
}

.k-faq__item[open] > .k-faq__q {
    color: var(--c-brand-ink);
}

.k-faq__item[open] > .k-faq__q::after {
    border-color: var(--c-brand);
    transform: translateY(-25%) rotate(135deg);
}

.k-faq__cat {
    margin-left: var(--s-2);
    font-size: var(--fs-s);
    font-weight: 400;
    color: var(--c-ink-3);
}

.k-faq__a {
    max-width: var(--measure);
    padding: 0 var(--s-7) var(--s-5) 0;
    font-size: var(--fs-m);
    line-height: var(--lh-body);
    color: var(--c-ink-2);
}

.k-faq__a > :first-child {
    margin-top: 0;
}

.k-faq__a > :last-child {
    margin-bottom: 0;
}

.k-faq__more a {
    color: var(--c-brand);
}

/* Плавное раскрытие там, где браузер умеет анимировать высоту details.
   Где не умеет — открывается мгновенно, поведение не ломается. */
@supports (interpolate-size: allow-keywords) {
    .k-faq__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
    }

    .k-faq__item[open]::details-content {
        block-size: auto;
    }
}

@media (max-width: 560px) {
    .moduletable:has(> .k-faq) > h3 {
        font-size: var(--fs-xl);
    }

    .k-faq__q {
        padding-right: var(--s-6);
        font-size: var(--fs-m);
    }

    .k-faq__a {
        padding-right: 0;
        font-size: var(--fs-s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-faq__q,
    .k-faq__q::after,
    .k-faq__item::details-content {
        transition: none;
    }
}

/* ——— Блок заявки после каталога (модуль 156, форма ConvertForms #6) ———

   Секция задаёт только место и ритм. Оформление самой формы — цвета, поля,
   кнопка, тексты — живёт в настройках ConvertForms (решение от 13.08):
   компонент печатает свою тему инлайном с id-селектором, и перебивать её из
   таблицы стилей значит заводить скрытую связь, которая ломается при первой
   же правке формы в админке.

   Правила ниже заужены до .k-cta намеренно: форма #cf_6 стоит на страницах
   разделов, а на карточке товара работает другая форма — #cf_5. Общие
   селекторы .convertforms / .cf-* задели бы обе. */

.k-cta {
    margin: var(--s-8) 0;
    padding: var(--s-7) var(--s-5);
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-hairline);
    border-bottom: 1px solid var(--c-hairline);
}

.k-cta > .module-wrapper {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Согласие на обработку: чекбокс лежит внутри label, и текст обтекал квадрат
   — первая строка начиналась левее остальных. */
.k-cta .cf-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}

.k-cta .cf-checkbox-group .cf-input {
    flex: none;
    margin: 3px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--c-brand);
}

/* ——— SEO-текст раздела (описание категории VirtueMart) ———

   Текст приходит из базы и содержит собственные h2/h3/p/ul. Ограничиваем
   ширину строки и приводим к шкале — иначе абзац растягивается на весь
   контейнер. Внутри этого же текста стоят шорткоды {loadposition}, которыми
   вставляются блоки «Вопросы и ответы» и «Полезные статьи»: они полноширинные,
   поэтому ограничение ширины вешаем на текстовые потомки, а не на контейнер. */

.k-seo {
    margin: var(--s-8) 0;
}

.k-seo > p,
.k-seo > ul,
.k-seo > ol {
    max-width: var(--measure);
    font-size: var(--fs-m);
    line-height: var(--lh-body);
    color: var(--c-ink-2);
}

.k-seo > h2,
.k-seo > h3 {
    margin: var(--s-7) 0 var(--s-3);
    color: var(--c-ink);
    line-height: var(--lh-tight);
    text-wrap: balance;
}

.k-seo > h2 {
    font-size: var(--fs-2xl);
}

.k-seo > h3 {
    font-size: var(--fs-xl);
}

.k-seo > h2:first-child,
.k-seo > h3:first-child {
    margin-top: 0;
}

.k-seo img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .k-cta {
        margin: var(--s-7) 0;
        padding: var(--s-6) var(--s-4);
    }

    .k-seo {
        margin: var(--s-7) 0;
    }
}

/* ---------- Лайтбокс ---------- */
/* Оверлей рисуется поверх всего: у липкой полосы каталога z-index 900,
   у виджета Jivo — 2147483000, поэтому кадр держим на своём слое и не
   пытаемся перебить чужой максимум, а закрываемся по Esc и клику мимо. */

.k-lb {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-7) var(--s-5);
    background: rgba(20, 23, 26, 0.88);
}

.k-lb[hidden] {
    display: none;
}

body.k-lb-open {
    overflow: hidden;
}

.k-lb__frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.k-lb__img {
    max-width: min(100%, 1100px);
    max-height: calc(100vh - var(--s-9) - var(--s-7));
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--c-surface);
}

.k-lb__cap {
    display: flex;
    gap: var(--s-3);
    align-items: baseline;
    color: var(--c-surface);
    font-size: var(--fs-s);
    line-height: var(--lh-snug);
    text-align: center;
}

.k-lb__count {
    color: var(--c-hairline-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.k-lb__close,
.k-lb__nav {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1);
    color: var(--c-surface);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.k-lb__close:hover,
.k-lb__nav:hover {
    background: rgba(255, 255, 255, 0.22);
}

.k-lb__close:focus-visible,
.k-lb__nav:focus-visible {
    outline: 2px solid var(--c-surface);
    outline-offset: 2px;
}

.k-lb__close {
    top: var(--s-4);
    right: var(--s-4);
}

/* Крестик и стрелки — псевдоэлементами: иконочный шрифт грузится отдельным
   запросом и на оверлее успевает мигнуть квадратом. */
.k-lb__close::before,
.k-lb__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.k-lb__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.k-lb__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.k-lb__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.k-lb__nav--prev {
    left: var(--s-4);
}

.k-lb__nav--next {
    right: var(--s-4);
}

.k-lb__nav--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.k-lb__nav--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.k-lb--single .k-lb__nav {
    display: none;
}

/* Кликабельность превью: подсказываем курсором и лёгким подъёмом. */
.k-shots a,
.pdp__shot a {
    display: block;
    cursor: zoom-in;
}

@media (max-width: 900px) {
    .k-lb {
        padding: var(--s-8) var(--s-2) var(--s-6);
    }

    .k-lb__nav {
        top: auto;
        bottom: var(--s-4);
    }

    .k-lb__img {
        max-height: calc(100vh - 200px);
    }
}