/*
 * pergam.kz redesign. Base CSS contract.
 * Source of truth: /DESIGN.md (version alpha). Stage: tokens and local fonts only.
 * No component styles, no resets, no element selectors, no overrides of legacy CSS.
 * All custom properties are prefixed with --kz- and scoped to .kz-redesign.
 */

/* Local fonts. Files live in /templates/kz-assets/fonts/ (see _project_docs/ASSET_MANIFEST_2026-09-11.md). */

@font-face {
    font-family: "PT Root UI";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/pt-root-ui_regular.woff2") format("woff2"),
         url("../fonts/pt-root-ui_regular.woff") format("woff");
}

@font-face {
    font-family: "PT Root UI";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/pt-root-ui_medium.woff2") format("woff2"),
         url("../fonts/pt-root-ui_medium.woff") format("woff");
}

/* Technical family alias isolates KZ font weights from legacy Roboto declarations. */

@font-face {
    font-family: "Roboto KZ";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
         url("../fonts/Roboto-Regular.woff") format("woff");
}

@font-face {
    font-family: "Roboto KZ";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
         url("../fonts/Roboto-Medium.woff") format("woff");
}

/* Unbounded ExtraBold 800, латинский набор (подэтап 4.2H). Только для большой надписи PERGAM в футере, другие
   элементы этот шрифт не используют. Файл локальный: пакет @fontsource/unbounded 5.2.8, исходник — Unbounded
   из Google Fonts (The Unbounded Project Authors), лицензия SIL OFL 1.1 — ../fonts/unbounded-OFL.txt. */

@font-face {
    font-family: "Unbounded";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");
}

/* Design tokens from DESIGN.md. Scoped to the KZ redesign root class. */

.kz-redesign {
    /* Colors: base palette */
    --kz-color-graphite: #2B2D41;
    --kz-color-primary: #0044FF;
    --kz-color-paper: #FFFFFF;
    --kz-color-smoke: #F4F6F9;
    --kz-color-primary-soft: #EEF3FF;
    --kz-color-line: #D6DBE4;

    /* Colors: states and derived values */
    --kz-color-primary-hover: #0033CC;
    --kz-color-primary-active: #002699;
    --kz-color-text-muted: rgba(43, 45, 65, 0.72);
    --kz-color-on-dark: #FFFFFF;
    --kz-color-on-dark-link: rgba(255, 255, 255, 0.80);
    --kz-color-on-dark-muted: rgba(255, 255, 255, 0.72);
    --kz-color-on-dark-subtle: rgba(255, 255, 255, 0.60);
    --kz-color-on-dark-line: rgba(255, 255, 255, 0.14);

    /* Colors: derived values for the dark first screen (DESIGN.md: graphite-deep, accent-light, white 40% and 8%) */
    --kz-color-graphite-deep: #25273A;
    --kz-color-accent-light: #6D91FF;
    --kz-color-on-dark-border: rgba(255, 255, 255, 0.40);
    --kz-color-on-dark-hover: rgba(255, 255, 255, 0.08);

    /* Font families. "Roboto KZ" is a technical CSS alias; the typeface per DESIGN.md is Roboto. */
    --kz-font-ui: "PT Root UI", "Roboto KZ", Roboto, system-ui, "Segoe UI", Arial, sans-serif;
    --kz-font-data: "Roboto KZ", Roboto, system-ui, "Segoe UI", Arial, sans-serif;

    /* Typography: display and headings (PT Root UI) */
    --kz-type-display-size: 44px;
    --kz-type-display-weight: 500;
    --kz-type-display-line: 50px;
    --kz-type-display-tracking: -0.01em;

    --kz-type-heading-1-size: 40px;
    --kz-type-heading-1-weight: 500;
    --kz-type-heading-1-line: 46px;
    --kz-type-heading-1-tracking: -0.01em;

    --kz-type-heading-2-size: 30px;
    --kz-type-heading-2-weight: 500;
    --kz-type-heading-2-line: 36px;
    --kz-type-heading-2-tracking: -0.01em;

    --kz-type-heading-3-size: 20px;
    --kz-type-heading-3-weight: 500;
    --kz-type-heading-3-line: 26px;
    --kz-type-heading-3-tracking: -0.01em;

    --kz-type-heading-1-mobile-size: 32px;
    --kz-type-heading-1-mobile-weight: 500;
    --kz-type-heading-2-mobile-size: 24px;
    --kz-type-heading-2-mobile-weight: 500;
    --kz-type-heading-3-mobile-size: 18px;
    --kz-type-heading-3-mobile-weight: 500;

    /* Typography: text (PT Root UI) */
    --kz-type-body-size: 16px;
    --kz-type-body-weight: 400;
    --kz-type-body-line: 25px;

    --kz-type-lead-size: 18px;
    --kz-type-lead-weight: 400;
    --kz-type-lead-line: 28px;

    --kz-type-small-size: 13px;
    --kz-type-small-weight: 400;
    --kz-type-small-line: 19px;

    --kz-type-label-size: 12px;
    --kz-type-label-weight: 500;
    --kz-type-label-tracking: 0.08em;

    --kz-type-button-size: 14px;
    --kz-type-button-weight: 500;

    --kz-type-button-small-size: 13px;
    --kz-type-button-small-weight: 500;

    --kz-type-title-card-size: 18px;
    --kz-type-title-card-weight: 500;

    --kz-type-title-product-size: 16px;
    --kz-type-title-product-weight: 500;

    --kz-type-text-14-size: 14px;
    --kz-type-text-14-weight: 400;

    --kz-type-caption-size: 12px;
    --kz-type-caption-weight: 400;

    --kz-type-phone-size: 20px;
    --kz-type-phone-weight: 500;

    /* Typography: technical data and numbers (Roboto via "Roboto KZ") */
    --kz-type-data-size: 14px;
    --kz-type-data-weight: 400;
    --kz-type-data-line: 20px;

    --kz-type-data-small-size: 13px;
    --kz-type-data-small-weight: 400;

    --kz-type-price-size: 16px;
    --kz-type-price-weight: 500;

    --kz-type-metric-size: 48px;

    /* Radii */
    --kz-radius-control: 4px;
    --kz-radius-card: 8px;
    --kz-radius-chip: 999px;

    /* Spacing scale */
    --kz-space-xs: 4px;
    --kz-space-sm: 8px;
    --kz-space-md: 12px;
    --kz-space-base: 16px;
    --kz-space-lg: 24px;
    --kz-space-xl: 32px;
    --kz-space-xxl: 48px;
    --kz-space-xxxl: 64px;
    --kz-space-section: 64px;
    --kz-space-section-mobile: 40px;
    --kz-space-card-padding: 20px;

    /* Layout */
    --kz-container: 1280px;
    --kz-gutter: 24px;
    --kz-gutter-mobile: 16px;
    --kz-grid-gap: 24px;

    /* Elevation: the only permitted shadow, for overlays such as the mega menu and popups */
    --kz-shadow-overlay: 0 12px 32px rgba(43, 45, 65, 0.16);

    /* Motion: the strong ease-out for state transitions (review-animations standard) */
    --kz-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    /* Width of the page scrollbar while the mega menu is open; set by kz-menu.js, used only without scrollbar-gutter */
    --kz-scrollbar-width: 0px;
}

/*
 * Минимальная поддерживаемая ширина KZ-шаблона — 360px (подэтап 4.2F.1). Легаси-оболочка `.wrap` в
 * templates/css/styles.css строка 296 задаёт `min-width: 480px`, поэтому на экране уже 480px страница
 * переставала помещаться в окно и правый край текста и кнопок обрезался. Ограничение снимается только
 * в KZ-контексте: сам styles.css не менялся и продолжает обслуживать остальные шаблоны.
 * Вторую половину этой же проблемы — подмену meta viewport на `width=480` — снимает
 * templates/kz-assets/js/kz-functions.js, копия legacy-файла без этого механизма.
 * Легаси `overflow: hidden` у `.wrap` намеренно оставлен как есть: он ничего не маскирует, потому что
 * после снятия min-width переполнения нет. Это проверяется сравнением scrollWidth и clientWidth
 * на 1440, 1024, 768, 390, 375 и 360px, а не скрытием полосы прокрутки.
 */

.kz-redesign .wrap {
    min-width: 0;
}

/*
 * Header, stage 1: the common part only (utility bar 36px + main bar 72px).
 * Legacy hooks are kept in markup: .menu_btn, .popup-link, .city-link, .feedback_btn, .lk_btn,
 * .mob_feedback_btn, .js-compare-status, .js-favorites-status, .js-cart-status, .for-events.
 * The legacy .bottom block (search, quick results, guru) is not styled here.
 */

.kz-redesign .kz-header .info {
    padding: 0;
    transition: none;
}

/* Inner pages (header without .absolute): legacy gives the header a fixed height per breakpoint (320/268/210/200/250px)
   and anchors .bottom with position: absolute; bottom: 0. Below 1440px the 109–117px bars plus the 179–228px .bottom
   exceed that height, so .bottom rises over the bars and, as a later positioned box, takes every click. Keep .bottom
   in flow under the bars and let the header grow; the legacy search overlay (html.search_open) keeps its own layout. */

html:not(.search_open) .kz-redesign .kz-header:not(.absolute) {
    height: auto;
}

html:not(.search_open) .kz-redesign .kz-header:not(.absolute) .bottom {
    position: static;
}

.kz-redesign .kz-header .kz-header-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Utility bar */

.kz-redesign .kz-header .kz-header-utility {
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-header .kz-header-utility .kz-header-inner {
    min-height: 36px;
    justify-content: space-between;
    gap: var(--kz-space-base);
}

.kz-redesign .kz-header .contacts {
    position: static;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--kz-space-lg);
    margin: 0;
    min-width: 0;
}

.kz-redesign .kz-header .contacts .location .current {
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.kz-redesign .kz-header .contacts .location .current a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: -2px 0;
    color: var(--kz-color-graphite);
    border-bottom: 1px dashed var(--kz-color-text-muted);
    text-decoration: none;
    transition: none;
}

.kz-redesign .kz-header .contacts .location .current a:hover {
    color: var(--kz-color-graphite);
    border-color: var(--kz-color-graphite);
}

.kz-redesign .kz-header .contacts .location .current .icon {
    display: block;
    width: 10px;
    height: 11px;
    margin-left: 6px;
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-header .contacts .phone {
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    font-weight: var(--kz-type-button-weight);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-header .contacts .phone a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: -2px 0;
    color: var(--kz-color-graphite);
    text-decoration: none;
    white-space: nowrap;
}

.kz-redesign .kz-header .kz-header-hours {
    color: var(--kz-color-text-muted);
    white-space: nowrap;
}

.kz-redesign .kz-header .feedback_btn {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: 40px;
    margin: -2px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    font-weight: var(--kz-type-small-weight);
    line-height: var(--kz-type-small-line);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--kz-color-text-muted);
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-header .feedback_btn:hover {
    border: 0;
    color: var(--kz-color-graphite);
    text-decoration-color: var(--kz-color-graphite);
}

/* Main bar */

.kz-redesign .kz-header .kz-header-main {
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    border-bottom: 1px solid var(--kz-color-line);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-header .kz-header-main .kz-header-inner {
    min-height: 72px;
    gap: var(--kz-space-lg);
}

.kz-redesign .kz-header .menu_btn {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--kz-space-sm);
    min-width: 40px;
    height: 40px;
    padding: 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-header .menu_btn:hover {
    color: var(--kz-color-graphite);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-header .menu_btn .icon {
    display: block;
    width: 20px;
    height: 18px;
}

.kz-redesign .kz-header .kz-header-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    text-decoration: none;
}

/* Логотип logo.svg из /templates/kz-assets/logo/ (подэтап 4.2H.2), пропорции 470.5:100. От 1280px 188px — высота 40px,
   середина рекомендованного бренд-комплектом диапазона 36–44px; замер на главной и внутренних страницах показал, что
   до 200px полосы шапки остаются 36+73px. На 1024–1279px ширина 140px, на узких экранах прежние 100px и 84px. */

.kz-redesign .kz-header .kz-header-logo img {
    display: block;
    width: 188px;
    height: auto;
}

/* Main navigation (legacy .menu class kept for the events widget markup) */

.kz-redesign .kz-header .menu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--kz-space-lg);
    width: auto;
    max-width: none;
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-header .menu > * {
    margin: 0;
    flex: 0 0 auto;
}

.kz-redesign .kz-header .menu a,
.kz-redesign .kz-header .menu span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--kz-color-graphite);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: none;
}

.kz-redesign .kz-header .menu a:hover {
    border-color: var(--kz-color-line);
}

.kz-redesign .kz-header .menu a.active,
.kz-redesign .kz-header .menu > div > span {
    border-color: var(--kz-color-primary);
}

.kz-redesign .kz-header .menu .for-events > a:after,
.kz-redesign .kz-header .menu .for-events > span:after {
    content: none;
}

/* Events dropdown */

.kz-redesign .kz-header .menu .for-events {
    position: relative;
}

.kz-redesign .kz-header .widget-events {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--kz-space-lg);
    margin-top: var(--kz-space-xs);
    padding: var(--kz-space-base);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    box-shadow: var(--kz-shadow-overlay);
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: none;
}

.kz-redesign .kz-header .menu .for-events:hover .widget-events,
.kz-redesign .kz-header .menu .for-events:focus-within .widget-events {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.kz-redesign .kz-header .widget-events-item + .widget-events-item {
    margin-left: 0;
}

.kz-redesign .kz-header .widget-events-item .label {
    background-color: var(--kz-color-smoke);
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-header .widget-events-item .date {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-header .widget-events-item .title a {
    display: inline;
    min-height: 0;
    border: 0;
    color: var(--kz-color-graphite);
    white-space: normal;
}

.kz-redesign .kz-header .widget-events-item .title a:hover {
    color: var(--kz-color-graphite);
    text-decoration: underline;
}

/* Actions: profile, mobile feedback, compare, favorites, cart */

.kz-redesign .kz-header .links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--kz-space-xs);
    margin: 0 0 0 auto;
}

.kz-redesign .kz-header .links > * + * {
    margin-left: 0;
}

.kz-redesign .kz-header .links a,
.kz-redesign .kz-header .links span,
.kz-redesign .kz-header .links .lk_btn,
.kz-redesign .kz-header .links .mob_feedback_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-graphite);
    text-decoration: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-header .links span {
    color: var(--kz-color-text-muted);
    cursor: default;
}

.kz-redesign .kz-header .links a:hover,
.kz-redesign .kz-header .links .lk_btn:hover,
.kz-redesign .kz-header .links .mob_feedback_btn:hover {
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-header .links .icon {
    display: block;
    opacity: 1;
    transition: none;
}

.kz-redesign .kz-header .links .compare_link .icon {
    width: 24px;
    height: 17px;
}

.kz-redesign .kz-header .links .favorite_link .icon {
    width: 22px;
    height: 21px;
}

.kz-redesign .kz-header .links .cart_link .icon {
    width: 22px;
    height: 23px;
}

.kz-redesign .kz-header .links .lk_btn .icon {
    width: 20px;
    height: 23px;
}

.kz-redesign .kz-header .links .mob_feedback_btn .icon {
    width: 22px;
    height: 21px;
}

.kz-redesign .kz-header .links .count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
    font-family: var(--kz-font-data);
    font-size: 11px;
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    text-align: center;
}

.kz-redesign .kz-header .links .wrap-mob-feedback {
    display: none;
}

/* Keyboard focus */

.kz-redesign .kz-header a:focus-visible,
.kz-redesign .kz-header button:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Legacy styles.css removes button outlines with !important, so the header icon buttons need the same weight (4.2I);
   the close button of the home search mode lies on the dark surface */

.kz-redesign .kz-header .feedback_btn:focus-visible,
.kz-redesign .kz-header .lk_btn:focus-visible,
.kz-redesign .kz-header .mob_feedback_btn:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-header .close_search_btn:focus-visible {
    outline: 2px solid var(--kz-color-on-dark) !important;
    outline-offset: 2px !important;
}

/* Responsive */

@media (max-width: 1279px) {
    .kz-redesign .kz-header .links .wrap-mob-feedback {
        display: flex;
    }

    .kz-redesign .kz-header .menu {
        flex-wrap: wrap;
        gap: 0 var(--kz-space-base);
    }

    .kz-redesign .kz-header .kz-header-main .kz-header-inner {
        gap: var(--kz-space-base);
    }

    /* 1024–1279px: меню стоит в одной строке с логотипом впритык, на внутренних страницах уже 155px переносят его
       во вторую строку и шапка становится выше, поэтому здесь прежняя ширина 140px */
    .kz-redesign .kz-header .kz-header-logo img {
        width: 140px;
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-header .menu {
        display: none;
    }

    .kz-redesign .kz-header .kz-header-menu-label {
        display: none;
    }

    .kz-redesign .kz-header .menu_btn {
        width: 40px;
        padding: 0;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-header .kz-header-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-header .kz-header-utility .kz-header-inner {
        gap: var(--kz-space-sm);
    }

    .kz-redesign .kz-header .contacts {
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-header .kz-header-main .kz-header-inner {
        gap: var(--kz-space-sm);
    }

    .kz-redesign .kz-header .kz-header-logo img {
        width: 140px;
    }
}

@media (max-width: 575px) {
    .kz-redesign .kz-header .kz-header-hours {
        display: none;
    }

    .kz-redesign .kz-header .kz-header-logo img {
        width: 100px;
    }

    .kz-redesign .kz-header .links {
        gap: 0;
    }

    .kz-redesign .kz-header .contacts .phone {
        font-size: var(--kz-type-small-size);
    }
}

/* Подэтап 4.2F.1. До него окно уже 480px получало макет шириной ровно 480 CSS-пикселей, поэтому основная
   полоса шапки никогда не верстался уже, и в неё свободно помещались кнопка меню 40px, логотип 100px и пять
   легаси-иконок по 40px. После перехода на настоящую ширину устройства запаса не остаётся.
   Группа действий прижата к правому полю через `margin-left: auto`, поэтому её правый край всегда лежит на
   границе поля 16px и сам по себе за экран не уходит; риск в другом — когда сумма ряда превышает ширину
   полосы, flex начинает сжимать элементы, и содержимое уезжает под легаси-`overflow: hidden` оболочки
   `.wrap`. Считаем именно сумму: 16 + 40 + 8 + 100 + 8 + 200 + 16 = 388.
   Подэтап 4.2F.1a: на 390px ряд помещается (388 из 390), но запас всего 2px, поэтому здесь уменьшены только
   промежутки — 4px вместо 8px, запас становится 10px, а размеры логотипа и иконок на основной приёмочной
   ширине остаются принятыми. Ниже 390px промежутков уже не хватает, и подключается вторая ступень. */

@media (max-width: 390px) {
    .kz-redesign .kz-header .kz-header-main .kz-header-inner {
        gap: var(--kz-space-xs);
    }
}

/* Вторая ступень, 389px и уже: 16 + 40 + 4 + 100 + 4 + 200 + 16 = 380 уже не помещается в 375 и 360.
   Логотип 84px и иконки 36px дают сумму 344 при 360 доступных. Кнопка «Меню» остаётся 40×40, боковые поля
   полосы те же 16px, что и у секций, ни одно действие не скрыто и не уведено в горизонтальную прокрутку.
   Ряд внутренних страниц, где есть ещё и кнопка поиска, этим правилом не лечится: их адаптивность вынесена
   в следующий этап и в этом подэтапе не трогалась. */

@media (max-width: 389px) {
    .kz-redesign .kz-header .kz-header-logo img {
        width: 84px;
    }

    .kz-redesign .kz-header .links a,
    .kz-redesign .kz-header .links span,
    .kz-redesign .kz-header .links .lk_btn,
    .kz-redesign .kz-header .links .mob_feedback_btn {
        width: 36px;
        height: 36px;
    }
}

/* Внутренние страницы до 431px (подэтап 4.2I): в ряду есть ещё кнопка поиска, и при 431px и уже он не помещается
   (корзина срезалась краем экрана на 360–415px). Здесь скрыта только мобильная кнопка «Обратная связь», форма
   остаётся доступной в футере; размеры остальных иконок не меняются. Шапку главной правило не затрагивает. */

@media (max-width: 431px) {
    .kz-redesign .kz-header--inner .links .wrap-mob-feedback {
        display: none;
    }
}

/*
 * Main page hero, stage 2.3: dark first screen per DESIGN.md and the approved concept
 * NEW-TEMPLATE/pergam-redesign/hero-concept-kz.html. Applies only where header .bottom carries .kz-hero (module main).
 * Legacy hooks kept in markup and JS: .search, .search-contaner, .search-contaner-guru, .search-contaner-quick,
 * #quick_input_search, .submit_btn, .close_quick_btn, .tags, .more-tags, .added-tag, .for-more-tag,
 * .js-head-search-answer, .close_search_btn, html.search_open, .search-contaner.opened. No new JavaScript.
 * Internal pages (header without .kz-hero) are not affected.
 */

/* Section shell: no slide photo, no gradient overlay, header in normal flow */

.kz-redesign .first_section {
    background: var(--kz-color-smoke);
}

.kz-redesign .first_section:after {
    content: none;
}

.kz-redesign .first_section .bg {
    display: none;
    visibility: hidden;
}

.kz-redesign .first_section .kz-header {
    position: relative;
    height: auto;
    background: var(--kz-color-paper);
    transition: none;
}

/* Legacy .search_open header forces a dark gradient with !important; the same weight is required.
   Below the hero the header continues the hero's end colour, so the 100vh search mode stays dark. */
.search_open .kz-redesign .first_section .kz-header {
    background: var(--kz-color-graphite-deep) !important;
}

/* Hero container: full-width dark section, two columns 52/48 on the header grid */

.kz-redesign .first_section .kz-hero {
    position: static;
    width: 100%;
    padding: 72px 0;
    background: linear-gradient(180deg, var(--kz-color-graphite) 0%, var(--kz-color-graphite-deep) 100%);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
}

.kz-redesign .first_section .kz-hero .cont {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: var(--kz-space-xxl);
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-hero .kz-hero-copy {
    min-width: 0;
}

/* Eyebrow, title and lead: static text, no animation */

.kz-redesign .kz-hero .kz-hero-intro {
    max-width: 640px;
    margin: 0 0 var(--kz-space-xl);
}

.kz-redesign .kz-hero .kz-hero-eyebrow {
    margin: 0 0 var(--kz-space-card-padding);
    padding: 0;
    color: var(--kz-color-on-dark-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-hero .kz-hero-title {
    margin: 0;
    padding: 0;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-display-size);
    font-weight: var(--kz-type-display-weight);
    line-height: var(--kz-type-display-line);
    letter-spacing: var(--kz-type-display-tracking);
    overflow-wrap: anywhere;
}

.kz-redesign .kz-hero .kz-hero-accent {
    color: var(--kz-color-accent-light);
}

/*
 * Last word of the title changes once (DESIGN.md: Elevation & Depth, exception 2; Components: Переменное слово заголовка).
 * .kz-hero-sr keeps the static «отказы.» for assistive technology; the visual fragment is aria-hidden.
 * The invisible sizer reserves the width of the longest variant «разрушения.», so nothing else moves.
 * Script: /templates/kz-assets/js/kz-hero-word.js (toggles .is-typing while erasing and typing).
 */

.kz-redesign .kz-hero .kz-hero-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.kz-redesign .kz-hero .kz-hero-word {
    position: relative;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

.kz-redesign .kz-hero .kz-hero-word-sizer {
    visibility: hidden;
}

.kz-redesign .kz-hero .kz-hero-word-live {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
}

.kz-redesign .kz-hero .kz-hero-caret {
    display: inline-block;
    width: 2px;
    height: 0.82em;
    margin-left: 3px;
    vertical-align: -0.06em;
    background: var(--kz-color-accent-light);
    opacity: 0;
}

.kz-redesign .kz-hero .kz-hero-word.is-typing .kz-hero-caret {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-hero .kz-hero-caret {
        display: none;
    }
}

.kz-redesign .kz-hero .kz-hero-lead {
    max-width: 560px;
    margin: var(--kz-space-base) 0 0;
    padding: 0;
    color: var(--kz-color-on-dark-link);
    font-size: var(--kz-type-lead-size);
    font-weight: var(--kz-type-lead-weight);
    line-height: var(--kz-type-lead-line);
}

/* Search field 56px: white on the dark surface, focus ring accent-light */

.kz-redesign .kz-hero .search {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0;
    transition: none;
}

.kz-redesign .kz-hero .search form {
    position: relative;
    display: block;
    margin: 0;
}

.kz-redesign .kz-hero .search form .input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 168px 0 var(--kz-space-base);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    font-weight: var(--kz-type-body-weight);
    line-height: 56px;
    outline: none;
    box-shadow: none;
    transition: none;
}

.kz-redesign .kz-hero .search form .input:focus {
    box-shadow: 0 0 0 2px var(--kz-color-accent-light);
}

.kz-redesign .kz-hero .search form .input::placeholder {
    color: var(--kz-color-text-muted);
    opacity: 1;
}

.kz-redesign .kz-hero .search form .submit_btn {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-card-padding);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: none;
}

/* 16px arrow of the primary button (DESIGN.md: Shapes), drawn without touching the form markup */
.kz-redesign .kz-hero .search form .submit_btn::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-left: var(--kz-space-sm);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-hero .search form .submit_btn:hover {
    background: var(--kz-color-primary-hover);
}

.kz-redesign .kz-hero .search form .submit_btn:active {
    background: var(--kz-color-primary-active);
}

.kz-redesign .kz-hero .search form .close_quick_btn {
    position: absolute;
    top: 0;
    right: 120px;
    bottom: 0;
    width: 28px;
    height: 28px;
    margin: auto 0;
    color: var(--kz-color-text-muted);
    transition: none;
}

.kz-redesign .kz-hero .search form .close_quick_btn:hover {
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-hero .search form .close_quick_btn .icon {
    width: 20px;
    height: 20px;
}

/* Guru chips under the field (on dark) and answer chips inside the white panel */

.kz-redesign .kz-hero .search .tags,
.kz-redesign .kz-hero .search .search-answers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-sm);
    height: auto;
    margin: var(--kz-space-base) 0 0;
    overflow: visible;
}

.kz-redesign .kz-hero .search .search-answers {
    margin-top: var(--kz-space-md);
}

.kz-redesign .kz-hero .search .search-answers.hidden,
.search_open .kz-redesign .kz-hero .search .tags {
    display: none;
}

.kz-redesign .kz-hero .search .tags > *,
.kz-redesign .kz-hero .search .search-answers > * {
    margin: 0;
}

.kz-redesign .kz-hero .search .tags button,
.kz-redesign .kz-hero .search .search-answers button {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    font-weight: var(--kz-type-small-weight);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-hero .search .search-answers button:hover {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-paper);
    color: var(--kz-color-primary);
}

/* Outline chips on dark: colour-only hover transition from the approved concept (150 ms ease, border-color and color).
   Named properties only, so the legacy `transition: .2s linear` (all) in styles.css stays overridden.
   Hover colours apply only to fine pointers; the legacy red hover background never applies because this
   base rule outranks `header .search .tags button:hover` in styles.css. */

.kz-redesign .kz-hero .search .tags button {
    border-color: var(--kz-color-on-dark-border);
    background: transparent;
    color: var(--kz-color-on-dark);
    transition: border-color 150ms ease, color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-hero .search .tags button:hover {
        border-color: var(--kz-color-accent-light);
        color: var(--kz-color-accent-light);
    }
}

/* «Ещё» is a text link: instant underline, no colour transition */

.kz-redesign .kz-hero .search .tags button.more-tags {
    padding: 0 var(--kz-space-xs);
    border-color: transparent;
    background: transparent;
    color: var(--kz-color-accent-light);
    font-weight: var(--kz-type-small-weight);
    transition: none;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-hero .search .tags button.more-tags:hover {
        border-color: transparent;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-hero .search .tags button {
        transition: none;
    }
}

/* Secondary action under the chips: outline button on dark */

.kz-redesign .kz-hero .kz-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-base);
    margin: var(--kz-space-xl) 0 0;
}

.search_open .kz-redesign .kz-hero .kz-hero-actions {
    display: none;
}

.kz-redesign .kz-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--kz-space-card-padding);
    border-radius: var(--kz-radius-control);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-btn-secondary {
    border: 1px solid var(--kz-color-graphite);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-btn-secondary:hover {
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-hero .kz-btn-secondary {
    border-color: var(--kz-color-on-dark-border);
    background: transparent;
    color: var(--kz-color-on-dark);
}

.kz-redesign .kz-hero .kz-btn-secondary:hover {
    border-color: var(--kz-color-on-dark);
    background: var(--kz-color-on-dark-hover);
    color: var(--kz-color-on-dark);
}

.kz-redesign .kz-btn:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Keyboard focus on the dark surface is white; inside the white panel it stays primary */

.kz-redesign .kz-hero a:focus-visible,
.kz-redesign .kz-hero button:focus-visible {
    outline-color: var(--kz-color-on-dark);
}

.kz-redesign .kz-hero .search-contaner a:focus-visible,
.kz-redesign .kz-hero .search-contaner button:focus-visible {
    outline-color: var(--kz-color-primary);
}

/* Legacy styles.css removes outlines from form controls with !important; the same weight is needed
   so that keyboard focus on the hero buttons and chips stays visible (WCAG 2.2 AA). */
.kz-redesign .kz-hero button:focus-visible {
    outline: 2px solid var(--kz-color-on-dark) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-hero .search-contaner button:focus-visible {
    outline-color: var(--kz-color-primary) !important;
}

/* The submit and clear buttons sit inside the white search field: their ring is primary, as on light surfaces (4.2I) */

.kz-redesign .kz-hero .search form button:focus-visible {
    outline-color: var(--kz-color-primary) !important;
}

/* Search open state: close button, header bars stay visible on desktop */

@media (min-width: 768px) {
    .search_open .kz-redesign .kz-header .info {
        opacity: 1;
        pointer-events: auto;
    }
}

.kz-redesign .first_section .kz-header .close_search_btn {
    top: 124px;
    right: max(var(--kz-gutter), calc(50% - var(--kz-container) / 2));
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid var(--kz-color-on-dark-border);
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-on-dark);
    transition: none;
}

.kz-redesign .first_section .kz-header .close_search_btn:hover {
    background: var(--kz-color-on-dark-hover);
}

.kz-redesign .first_section .kz-header .close_search_btn .icon {
    width: 16px;
    height: 16px;
}

/* Guru and quick results panel: opens below the field (legacy opened it above) */

.kz-redesign .kz-hero .search .search-contaner {
    top: calc(100% + var(--kz-space-sm));
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 30;
    box-sizing: border-box;
    max-height: calc(100vh - 510px);
    max-height: calc(var(--app-height) - 510px);
    padding: var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    box-shadow: var(--kz-shadow-overlay);
    scrollbar-color: var(--kz-color-line) transparent;
    scrollbar-width: thin;
}

.kz-redesign .kz-hero .search .search-contaner::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}

.kz-redesign .kz-hero .search .search-contaner::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--kz-color-line);
}

.kz-redesign .kz-hero .search .wrap-search-question + .wrap-search-question {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-hero .search .search-question {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
}

.kz-redesign .kz-hero .search .wrap-search-question .wrap-search-answer {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--kz-space-md);
    text-align: left;
}

.kz-redesign .kz-hero .search .wrap-search-question .search-answer {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--kz-space-sm) 0 var(--kz-space-md);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-small-size);
    line-height: 1;
}

.kz-redesign .kz-hero .search .wrap-search-question .search-answer .delete-search-answers-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: var(--kz-space-xs);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-hero .search .wrap-search-question .search-answer .delete-search-answers-btn svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    opacity: 1;
    transition: none;
}

.kz-redesign .kz-hero .search .wrap-search-products-list {
    display: flex;
    gap: var(--kz-space-md);
    margin: var(--kz-space-md) 0 0;
    padding-bottom: var(--kz-space-xs);
    overflow: auto;
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item {
    box-sizing: border-box;
    width: 160px;
    flex: 0 0 160px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    transition: none;
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item:hover {
    border-color: var(--kz-color-primary);
    box-shadow: none;
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item.for-search {
    padding: var(--kz-space-md);
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item .info-prod {
    padding: var(--kz-space-md);
    border-radius: 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item .wrap-image {
    height: 100px;
    margin-bottom: var(--kz-space-md);
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item .wrap-name,
.kz-redesign .kz-hero .search .wrap-search-products-list-item .wrap-more {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    font-weight: var(--kz-type-button-weight);
    line-height: var(--kz-type-small-line);
    text-transform: none;
    transition: none;
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item:hover .wrap-name,
.kz-redesign .kz-hero .search .wrap-search-products-list-item:hover .wrap-more {
    color: var(--kz-color-primary);
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item .sticker,
.kz-redesign .kz-hero .search .wrap-search-products-list-item .sticker.blue,
.kz-redesign .kz-hero .search .wrap-search-products-list-item .sticker.green {
    height: auto;
    padding: var(--kz-space-xs) var(--kz-space-md);
    border-radius: 0;
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: 11px;
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-align: left;
    text-transform: uppercase;
}

.kz-redesign .kz-hero .search .wrap-search-products-list-item .wrap-image.thumbs > * {
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    box-shadow: none;
}

/*
 * SVG scene: pipeline weld scan. Decorative (aria-hidden), CSS-only animation, one run of about 3.8 s,
 * final frame kept (fill-mode both). All selectors are scoped to .kz-hero-scene so no other SVG is affected.
 * The scan field (grid and corner marks, .kz-a-field) and the figcaption are static from the first frame;
 * only the content layers animate. On the main page an inline head script in index.tpl.php sets .kz-hero-hold
 * on <html> before the first paint and removes it after the legacy DOM-ready handlers, see the start guard below.
 */

.kz-redesign .kz-hero .kz-hero-scene {
    min-width: 0;
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 640px;
}

.kz-redesign .kz-hero .kz-hero-scene svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.kz-redesign .kz-hero .kz-hero-scene text {
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-hero .kz-hero-scene figcaption {
    display: flex;
    justify-content: space-between;
    gap: var(--kz-space-base);
    margin: var(--kz-space-sm) 0 0;
    padding: 0 var(--kz-space-md);
    color: var(--kz-color-on-dark-subtle);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

/* Base styles describe the final frame; animations run from the initial state to it */

.kz-redesign .kz-hero-scene .kz-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.kz-redesign .kz-hero-scene .kz-a-trail {
    transform-box: fill-box;
    transform-origin: 0 50%;
}

.kz-redesign .kz-hero-scene .kz-a-plane {
    transform: translateX(576px);
    opacity: 0.55;
}

.kz-redesign .kz-hero-scene .kz-a-ring {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes kz-scene-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kz-scene-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes kz-scene-trail {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes kz-scene-sweep {
    0% { transform: translateX(102px); opacity: 0; }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateX(576px); opacity: 0.55; }
}

@keyframes kz-scene-pop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

.kz-redesign .kz-hero-scene .kz-a-object       { animation: kz-scene-draw 1.0s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.kz-redesign .kz-hero-scene .kz-a-object-fade  { animation: kz-scene-fade 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both; }
.kz-redesign .kz-hero-scene .kz-a-trail        { animation: kz-scene-trail 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.9s both; }
.kz-redesign .kz-hero-scene .kz-a-plane        { animation: kz-scene-sweep 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.9s both; }
.kz-redesign .kz-hero-scene .kz-a-defect       { animation: kz-scene-fade 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1.7s both; }
.kz-redesign .kz-hero-scene .kz-a-measure      { animation: kz-scene-draw 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 2.2s both; }
.kz-redesign .kz-hero-scene .kz-a-measure-fade { animation: kz-scene-fade 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 2.4s both; }
.kz-redesign .kz-hero-scene .kz-a-signal-fade  { animation: kz-scene-fade 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 2.2s both; }
.kz-redesign .kz-hero-scene .kz-a-signal       { animation: kz-scene-draw 0.9s linear 2.4s both; }
.kz-redesign .kz-hero-scene .kz-a-ring         { animation: kz-scene-pop 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 3.1s both; }
.kz-redesign .kz-hero-scene .kz-a-gate         { animation: kz-scene-fade 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) 3.25s both; }
.kz-redesign .kz-hero-scene .kz-a-tag          { animation: kz-scene-draw 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 3.3s both; }
.kz-redesign .kz-hero-scene .kz-a-tag-fade     { animation: kz-scene-fade 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) 3.55s both; }

/* Start guard: while <html> carries .kz-hero-hold the content layers stay paused on their initial frame
   (the static field and figcaption remain visible). The class is removed by index.tpl.php after the legacy
   DOM-ready handlers plus two frames; kz-hero-word.js does not start the word change while it is present. */

.kz-hero-hold .kz-redesign .kz-hero-scene [class^="kz-a-"],
.kz-hero-hold .kz-redesign .kz-hero-scene [class*=" kz-a-"] {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-hero-scene [class^="kz-a-"],
    .kz-redesign .kz-hero-scene [class*=" kz-a-"] {
        animation: none;
    }
}

/*
 * Home page directions, stage 4.1A (replaces the legacy .services tiles inside .first_section).
 * Markup: templates/kz/index.tpl.php, the unchanged $list_slides loop (order, titles and URLs from the CMS).
 * Icons: /templates/kz-assets/img/icons/directions-sprite.svg, the symbols of NEW-TEMPLATE/icons/pergam-kz-icons.zip
 * unchanged: main layer currentColor, second layer var(--icon-accent). No product count: the CMS has no ready
 * per-direction total on the main page. The legacy scripts.js hover handler targets .services .service and finds nothing.
 * Columns follow the measured width of the longest word «Электротехническое» (172px at 18px, 153px at 16px):
 * from 1280px five columns and 18px titles; 1100–1279px five columns and 16px; 900–1099px four; 768–899px rows of
 * three and then rows of two (no single card); up to 767px two.
 * Sub-stage 4.1A.1: H2 with the Fast-Answer paragraph directly before the list, «Открыть каталог» after the list,
 * icons 56px from 1280px and 48px below; hover and focus tint the whole card (border primary, background primary-soft)
 * and move the arrow 4px to the right, 170ms on the project ease-out; no motion with prefers-reduced-motion.
 */

.kz-redesign .kz-home-directions {
    box-sizing: border-box;
    width: 100%;
    padding: var(--kz-space-section) 0;
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    visibility: visible;
    transition: opacity 200ms var(--kz-ease-out), visibility 0s linear 0s;
}

/* The legacy main-page search overlay (html.search_open) faded the old tiles out; the new block does the same.
   visibility: hidden (applied once the fade ends) also removes the links from the Tab order and the accessibility tree. */

.search_open .kz-redesign .first_section .kz-home-directions {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--kz-ease-out), visibility 0s linear 200ms;
}

.kz-redesign .kz-home-directions-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-home-directions-head {
    margin: 0 0 var(--kz-space-xl);
}

/* Вводный абзац каталога живёт в той же ширине, что и заголовок: своего max-width у него нет,
   ширину задаёт общий контейнер .kz-home-directions-inner. Выравнивание — по левому краю. */

.kz-redesign .kz-home-directions-lead {
    margin: var(--kz-space-md) 0 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-lead-size);
    font-weight: var(--kz-type-lead-weight);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-home-directions-foot {
    margin: var(--kz-space-lg) 0 0;
}

.kz-redesign .kz-home-directions-title {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
}

.kz-redesign .kz-home-directions-all {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    color: var(--kz-color-primary);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-decoration: none;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-home-directions-all::after,
.kz-redesign .kz-home-directions-card::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-directions-all:active {
    color: var(--kz-color-primary-active);
}

/* Grid: equal card heights inside every row come from the grid stretch */

.kz-redesign .kz-home-directions-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--kz-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-home-directions-item {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-home-directions-item::before {
    content: none;
}

/* Card: the whole card is the link; icon, title, arrow in the bottom right corner */

.kz-redesign .kz-home-directions-card {
    --icon-accent: var(--kz-color-primary);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    padding: var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    text-decoration: none;
    transition: border-color 170ms var(--kz-ease-out), background-color 170ms var(--kz-ease-out);
}

/* Icon box 56px (48px below 1280px); the symbols keep their 48-unit viewBox, the drawing fills about 71% of the box */

.kz-redesign .kz-home-directions-icon {
    display: block;
    flex: none;
    width: 56px;
    height: 56px;
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-home-directions-name {
    display: block;
    max-width: 100%;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    margin: 0 0 var(--kz-space-md);
}

.kz-redesign .kz-home-directions-card::after {
    align-self: flex-end;
    margin-top: auto;
    color: var(--kz-color-primary);
}

/* Hover only with a precise pointer: the whole surface reacts, the card itself neither moves nor resizes */

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-directions-card:hover {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-primary-soft);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-home-directions-card:hover::after,
    .kz-redesign .kz-home-directions-all:hover::after {
        transform: translateX(4px);
    }

    .kz-redesign .kz-home-directions-all:hover {
        color: var(--kz-color-primary-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

/* Keyboard focus: the same tint as hover plus the 2px ring (legacy styles.css sets :focus { outline: 0 });
   the arrow does not move, so the state never depends on motion */

.kz-redesign .kz-home-directions-card:focus-visible {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary-soft);
}

.kz-redesign .kz-home-directions-card:focus-visible,
.kz-redesign .kz-home-directions-all:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-home-directions-card:active {
    border-color: var(--kz-color-primary-active);
    background: var(--kz-color-primary-soft);
}

@media (max-width: 1279px) {
    .kz-redesign .kz-home-directions-list {
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-home-directions-card {
        padding: var(--kz-space-base);
    }

    .kz-redesign .kz-home-directions-icon {
        width: 48px;
        height: 48px;
    }

    .kz-redesign .kz-home-directions-name {
        font-size: var(--kz-type-title-product-size);
        line-height: 22px;
    }
}

@media (max-width: 1099px) {
    .kz-redesign .kz-home-directions-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 768–899px: a six-track grid, three cards per row; with exactly ten directions the last four go two per row */

@media (max-width: 899px) {
    .kz-redesign .kz-home-directions-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .kz-redesign .kz-home-directions-item {
        grid-column: span 2;
    }

    .kz-redesign .kz-home-directions-item:first-child:nth-last-child(10) ~ .kz-home-directions-item:nth-child(n+7) {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-home-directions {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-home-directions-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-home-directions-head {
        margin-bottom: var(--kz-space-lg);
    }

    .kz-redesign .kz-home-directions-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-directions-lead {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-home-directions-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--kz-space-md);
    }

    .kz-redesign .kz-home-directions-item,
    .kz-redesign .kz-home-directions-item:first-child:nth-last-child(10) ~ .kz-home-directions-item:nth-child(n+7) {
        grid-column: auto;
    }
}

/* Long single words («Электротехническое», «Ультрафиолетовые») do not fit the two-column card at 360–430px (4.2I):
   only words of 16 letters and more are hyphenated, the other titles wrap as before */

@media (max-width: 575px) {
    .kz-redesign .kz-home-directions-name {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 16 8 6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-directions,
    .search_open .kz-redesign .first_section .kz-home-directions,
    .kz-redesign .kz-home-directions-card,
    .kz-redesign .kz-home-directions-card::after,
    .kz-redesign .kz-home-directions-all::after {
        transition: none;
    }

    .kz-redesign .kz-home-directions-card:hover::after,
    .kz-redesign .kz-home-directions-all:hover::after {
        transform: none;
    }
}

/* Heading hierarchy, sub-stage 4.1A.1: the about block title «ТОО «ПЕРГАМ-КАЗАХСТАН»» is now H2 (the hero slogan is the
   only H1). Legacy styles.css sized it only as .about_block .data .title h1 (40px, line-height 1) and gives every h2
   font-size var(--font_size_title); these two values keep its look unchanged at every width. */

.kz-redesign .about_block .data .title h2 {
    font-size: 40px;
    line-height: 1;
}


/*
 * Home page brands block «Производители оборудования», sub-stages 4.2C and 4.2C.1.
 * Scoped to .kz-home-brands, which only the home page carries, so /catalog/ and /catalog/brands/ keep their legacy
 * look with the same .brands class. The markup drops the legacy .slide class (that is what stopped scripts.js from
 * re-creating Swiper with loop: true and clones), so this section hides the slides that are out of view itself.
 * 4.2C.1: the section became a full-width graphite band, its content lines up with the equipment block, and the
 * heading row is an ordinary flex row — the arrows sit in it as real siblings, with no absolute positioning and no
 * negative offsets. Swiper itself, its classes and its data stay as they are.
 */

.kz-redesign .kz-home-brands {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    padding: var(--kz-space-section) 0;
    background: var(--kz-color-graphite);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
}

/* Same measure as .kz-home-products-inner: the legacy .cont is 1528px wide, and only inside this block it is not */

.kz-redesign .kz-home-brands .cont {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

/* Heading row: title on the left, «Все бренды» and the arrows on the right, 32px between the two groups */

.kz-redesign .kz-home-brands .kz-home-brands-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kz-space-base) var(--kz-space-lg);
    width: 100%;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-home-brands .kz-home-brands-head .title {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
}

.kz-redesign .kz-home-brands .kz-home-brands-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--kz-space-xl);
}

.kz-redesign .kz-home-brands .kz-home-brands-nav {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--kz-space-sm);
}

/* «Все бренды» on the dark surface: the secondary button of the contract, white 40% border on transparent */

.kz-redesign .kz-home-brands .all_link a,
.kz-redesign .kz-home-brands .mob_all_link a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    padding: 0 var(--kz-space-lg);
    border: 1px solid var(--kz-color-on-dark-border);
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-decoration: none;
    transition: background-color 170ms var(--kz-ease-out), border-color 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-brands .all_link a .icon,
.kz-redesign .kz-home-brands .mob_all_link a .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.kz-redesign .kz-home-brands .mob_all_link {
    display: none;
}

/* Arrows: 44×44, outlined on the dark surface, clearly a different control than the CTA beside them */

.kz-redesign .kz-home-brands .swiper-button-prev,
.kz-redesign .kz-home-brands .swiper-button-next {
    position: static;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-color-on-dark-border);
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-on-dark);
    opacity: 1;
    transform: none;
    cursor: pointer;
    transition: background-color 170ms var(--kz-ease-out), border-color 170ms var(--kz-ease-out), color 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-brands .swiper-button-prev::after,
.kz-redesign .kz-home-brands .swiper-button-next::after {
    content: none;
}

.kz-redesign .kz-home-brands .swiper-button-prev .icon,
.kz-redesign .kz-home-brands .swiper-button-next .icon {
    width: 10px;
    height: 20px;
    fill: currentColor;
}

.kz-redesign .kz-home-brands .swiper-button-prev .icon {
    transform: rotate(180deg);
}

.kz-redesign .kz-home-brands .swiper-button-next .icon {
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-brands .all_link a:hover,
    .kz-redesign .kz-home-brands .mob_all_link a:hover,
    .kz-redesign .kz-home-brands .swiper-button-prev:not([disabled]):hover,
    .kz-redesign .kz-home-brands .swiper-button-next:not([disabled]):hover {
        border-color: var(--kz-color-on-dark);
        background: var(--kz-color-on-dark-hover);
    }

    .kz-redesign .kz-home-brands .swiper-slide .item:hover {
        background: var(--kz-color-smoke);
    }
}

.kz-redesign .kz-home-brands .all_link a:active,
.kz-redesign .kz-home-brands .mob_all_link a:active,
.kz-redesign .kz-home-brands .swiper-button-prev:not([disabled]):active,
.kz-redesign .kz-home-brands .swiper-button-next:not([disabled]):active {
    border-color: var(--kz-color-on-dark);
    background: rgba(255, 255, 255, 0.14);
}

/* Swiper marks the end of the row with .swiper-button-disabled; kz-home-brands.js mirrors it into the disabled
   property, so the press does nothing and assistive technology hears it. The state is dimmer than the live arrow
   and keeps a dashed border, so it does not read by colour alone. */

.kz-redesign .kz-home-brands .swiper-button-prev[disabled],
.kz-redesign .kz-home-brands .swiper-button-next[disabled] {
    border-style: dashed;
    border-color: var(--kz-color-on-dark-line);
    color: var(--kz-color-on-dark-subtle);
    cursor: default;
    pointer-events: none;
}

/* Focus ring on the dark surface is white, per the contract */

.kz-redesign .kz-home-brands .swiper-button-prev:focus-visible,
.kz-redesign .kz-home-brands .swiper-button-next:focus-visible,
.kz-redesign .kz-home-brands .all_link a:focus-visible,
.kz-redesign .kz-home-brands .mob_all_link a:focus-visible {
    outline: 2px solid var(--kz-color-on-dark) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-home-brands .swiper-slide .item:focus-visible {
    outline: 2px solid var(--kz-color-on-dark) !important;
    outline-offset: 3px !important;
}

.kz-redesign .kz-home-brands .swiper-container {
    position: relative;
    margin-top: var(--kz-space-lg);
    padding: 0;
}

/* Swiper marks the slides in view with .visible (watchSlidesVisibility); the rest stay out of sight and out of the
   Tab order, exactly as the legacy .slide rules did, but without depending on that class. */

.kz-redesign .kz-home-brands .swiper-slide {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 170ms var(--kz-ease-out), visibility 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-brands .swiper-slide.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* White logo plates of one height: the area is reserved before the images arrive, so the section never jumps */

.kz-redesign .kz-home-brands .swiper-slide .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    padding: var(--kz-space-base);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    transition: background-color 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-brands .swiper-slide .item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 64px;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.kz-redesign .kz-home-brands .swiper-slide .item:active {
    background: var(--kz-color-primary-soft);
}

/* Phone: the heading takes its own row, the arrows get a row of their own above the logos, on the right,
   and «Все бренды» stays under the carousel on the left. */

@media (max-width: 767px) {
    .kz-redesign .kz-home-brands {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-home-brands .cont {
        padding: 0 var(--kz-gutter-mobile);
    }

    /* Column layout: legacy .block_head keeps flex-wrap: wrap and align-content: center, and in a column that
       shrinks the line to its widest item and centres it — hence nowrap and stretch here. */

    .kz-redesign .kz-home-brands .kz-home-brands-head {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: stretch;
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-home-brands .kz-home-brands-head .title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-brands .kz-home-brands-actions {
        justify-content: flex-end;
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-home-brands .swiper-container {
        margin-top: var(--kz-space-base);
    }

    .kz-redesign .kz-home-brands .swiper-slide .item {
        height: 80px;
        padding: var(--kz-space-md);
    }

    .kz-redesign .kz-home-brands .swiper-slide .item img {
        height: 52px;
    }

    .kz-redesign .kz-home-brands .mob_all_link {
        display: flex;
        justify-content: flex-start;
        margin-top: var(--kz-space-base);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-brands .swiper-slide,
    .kz-redesign .kz-home-brands .swiper-slide .item,
    .kz-redesign .kz-home-brands .all_link a,
    .kz-redesign .kz-home-brands .mob_all_link a,
    .kz-redesign .kz-home-brands .swiper-button-prev,
    .kz-redesign .kz-home-brands .swiper-button-next {
        transition: none;
    }
}

/*
 * Home page equipment block «Оборудование для промышленной безопасности», stages 4.1B.1 and 4.1B.1a, after the directions.
 * Markup: templates/kz/main.tpl.php and templates/kz/kz_home_products_cards.tpl.php; tabs: /templates/kz-assets/js/
 * kz-home-products.js. Only kz-home-products-* classes, so the legacy .products, .tabs and Swiper code never touch it.
 * White section, photo-led cards, up to four per tab: four in a row from 900px (1440 and 1024), 2 × 2 from 768px,
 * a native scroll-snap row below 768px. Hover: blue border, faint smoke background, arrow +4px, image scale(1.02)
 * inside its own padding (never cropped); 170ms on the project ease-out; no motion with prefers-reduced-motion.
 */

.kz-redesign .kz-home-products {
    /* Carousel geometry, read by the media queries below and matched by the step of the arrow buttons in the JS */
    --kz-products-gap: var(--kz-grid-gap);
    --kz-products-per-view: 4;
    box-sizing: border-box;
    width: 100%;
    padding: var(--kz-space-section) 0;
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-home-products-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-home-products-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kz-space-base) var(--kz-space-xl);
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-home-products-heading {
    min-width: 0;
    max-width: 920px;
}

.kz-redesign .kz-home-products-title {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
}

.kz-redesign .kz-home-products-lead {
    margin: var(--kz-space-md) 0 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-lead-size);
    font-weight: var(--kz-type-lead-weight);
    line-height: var(--kz-type-lead-line);
    text-wrap: pretty;
}

/* «Весь каталог»: to the right of the heading on wide screens (44px box centred on the 36px heading line),
   under the cards below 768px (two links, one shown) */

.kz-redesign .kz-home-products-all,
.kz-redesign .kz-home-articles-all {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    color: var(--kz-color-primary);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-home-products-all::after,
.kz-redesign .kz-home-articles-all::after,
.kz-redesign .kz-home-products-more::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-products-all--head {
    margin-top: -4px;
}

.kz-redesign .kz-home-products-all:active,
.kz-redesign .kz-home-articles-all:active {
    color: var(--kz-color-primary-active);
}

.kz-redesign .kz-home-products-foot {
    display: none;
    margin: var(--kz-space-base) 0 0;
}

/* Tabs, sub-stage 4.1B.1a: compact 44px pills sized by their label, no underline row. The selected one is solid
   primary with white text, so the state reads without hovering; the rest are paper with a line border.
   The row keeps 4px of padding (and the matching negative margin) for the focus ring, which the phone row,
   a horizontal scroller, would otherwise clip. */

/* One line: the pills on the left, the carousel arrows on the right, away from «Весь каталог» in the heading row */

.kz-redesign .kz-home-products-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base);
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-home-products-tabs,
.kz-redesign .kz-home-articles-tabs {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    gap: var(--kz-space-sm);
    margin: 0 -4px;
    padding: 4px;
}

.kz-redesign .kz-home-products-tab,
.kz-redesign .kz-home-articles-tab {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-product-size);
    font-weight: var(--kz-type-title-product-weight);
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 170ms var(--kz-ease-out), background-color 170ms var(--kz-ease-out), border-color 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-products-tab[aria-selected="true"],
.kz-redesign .kz-home-articles-tab[aria-selected="true"] {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
}


/* Carousel arrows: real 44×44 buttons, no label, an arrow drawn with the same mask as the «Подробнее» one.
   The JS hides the pair when a selection fits on one screen and marks an arrow at either end of the row with
   aria-disabled (not the disabled property, which would drop it out of the Tab order and lose the focus);
   that state is shown by a dashed border as well as by colour, so it does not depend on colour alone. */

.kz-redesign .kz-home-products-nav {
    display: flex;
    flex: none;
    gap: var(--kz-space-sm);
}

.kz-redesign .kz-home-products-nav[hidden] {
    display: none;
}

.kz-redesign .kz-home-products-arrow {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    cursor: pointer;
    transition: color 170ms var(--kz-ease-out), background-color 170ms var(--kz-ease-out), border-color 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-products-arrow::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-home-products-arrow--prev::before {
    transform: rotate(180deg);
}

.kz-redesign .kz-home-products-arrow[aria-disabled="true"] {
    border-style: dashed;
    color: var(--kz-color-text-muted);
    opacity: 0.45;
    cursor: default;
}

.kz-redesign .kz-home-products-panel[hidden],
.kz-redesign .kz-home-articles-panel[hidden] {
    display: none;
}

/* Carousel: one native scroll-snap row at every width, a whole page of cards per view (4 / 4 / 2 / 1 and a bit).
   Every card stays in the DOM and in the Tab order — nothing is cloned and nothing is hidden. Equal card heights
   come from the flex stretch; the price and «Подробнее» sit at the bottom. The 4px side padding (cancelled by the
   negative margin) keeps focus rings unclipped, and the bottom padding leaves room for the thin scrollbar. */

.kz-redesign .kz-home-products-list {
    display: flex;
    gap: var(--kz-products-gap);
    margin: 0 -4px;
    padding: 4px 4px var(--kz-space-md);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--kz-color-line) transparent;
    list-style: none;
}

.kz-redesign .kz-home-products-item {
    display: flex;
    flex: 0 0 calc((100% - (var(--kz-products-per-view) - 1) * var(--kz-products-gap)) / var(--kz-products-per-view));
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    list-style: none;
}

.kz-redesign .kz-home-products-item::before {
    content: none;
}

.kz-redesign .kz-home-products-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    text-decoration: none;
    transition: border-color 170ms var(--kz-ease-out), background-color 170ms var(--kz-ease-out);
}

/* Image frame 4:3; the picture is contained inside a 12px inner padding, so scale(1.02) never crops it.
   Multiply lets the white photo backgrounds take the card background (paper, smoke on hover, primary-soft on press). */

.kz-redesign .kz-home-products-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-home-products-img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: var(--kz-space-md);
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-products-badge {
    position: absolute;
    top: var(--kz-space-sm);
    left: var(--kz-space-sm);
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--kz-space-sm);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 1;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-home-products-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: var(--kz-space-md) var(--kz-space-xs) var(--kz-space-xs);
}

.kz-redesign .kz-home-products-category {
    margin: 0 0 var(--kz-space-xs);
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    font-weight: var(--kz-type-small-weight);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-home-products-name {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-product-size);
    font-weight: var(--kz-type-title-product-weight);
    line-height: 22px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-home-products-price {
    margin: auto 0 0;
    padding: var(--kz-space-base) 0 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-data-size);
    font-weight: var(--kz-type-price-weight);
    line-height: var(--kz-type-data-line);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-home-products-price--request {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-home-products-price-old {
    color: var(--kz-color-text-muted);
    font-weight: var(--kz-type-data-weight);
}

.kz-redesign .kz-home-products-more {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-color-primary);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-products-tab:hover,
    .kz-redesign .kz-home-articles-tab:hover {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-primary-soft);
    }

    .kz-redesign .kz-home-products-tab[aria-selected="true"]:hover,
    .kz-redesign .kz-home-articles-tab[aria-selected="true"]:hover {
        border-color: var(--kz-color-primary-hover);
        background: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-home-products-arrow:not([aria-disabled="true"]):hover {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-primary-soft);
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-home-products-card:hover {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-home-products-card:hover .kz-home-products-more::after,
    .kz-redesign .kz-home-products-all:hover::after,
    .kz-redesign .kz-home-articles-all:hover::after {
        transform: translateX(4px);
    }

    .kz-redesign .kz-home-products-card:hover .kz-home-products-img {
        transform: scale(1.02);
    }

    .kz-redesign .kz-home-products-all:hover,
    .kz-redesign .kz-home-articles-all:hover {
        color: var(--kz-color-primary-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.kz-redesign .kz-home-products-card:active {
    background: var(--kz-color-primary-soft);
}

/* After the hover block, so a press reads over hover; the pill keeps its size in every state */

.kz-redesign .kz-home-products-tab:active,
.kz-redesign .kz-home-articles-tab:active {
    border-color: var(--kz-color-primary-active);
    background: var(--kz-color-primary-soft);
}

.kz-redesign .kz-home-products-tab[aria-selected="true"]:active,
.kz-redesign .kz-home-articles-tab[aria-selected="true"]:active {
    border-color: var(--kz-color-primary-active);
    background: var(--kz-color-primary-active);
    color: var(--kz-color-paper);
}

.kz-redesign .kz-home-products-arrow:not([aria-disabled="true"]):active {
    border-color: var(--kz-color-primary-active);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-primary-active);
}

/* Keyboard focus: legacy styles.css removes outlines from buttons with !important and sets :focus { outline: 0 } */

.kz-redesign .kz-home-products-tab:focus-visible,
.kz-redesign .kz-home-articles-tab:focus-visible,
.kz-redesign .kz-home-articles-link:focus-visible,
.kz-redesign .kz-home-articles-all:focus-visible,
.kz-redesign .kz-home-products-arrow:focus-visible,
.kz-redesign .kz-home-products-card:focus-visible,
.kz-redesign .kz-home-products-all:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

@media (max-width: 1279px) {
    .kz-redesign .kz-home-products {
        --kz-products-gap: var(--kz-space-base);
    }
}

@media (max-width: 899px) {
    .kz-redesign .kz-home-products {
        --kz-products-per-view: 2;
    }
}

/* Below 768px: one full card and part of the next, so the row shows it can be swiped; the arrows step aside and
   the finger, the visible scrollbar and the keyboard take over. */

@media (max-width: 767px) {
    .kz-redesign .kz-home-products {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-home-products-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-home-products-head {
        display: block;
        margin-bottom: var(--kz-space-base);
    }

    .kz-redesign .kz-home-products-all--head {
        display: none;
    }

    .kz-redesign .kz-home-products-foot {
        display: block;
    }

    .kz-redesign .kz-home-products-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-products-lead {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    /* One row of pills that scrolls on its own, independent of the product strip below it */

    .kz-redesign .kz-home-products-controls {
        margin-bottom: var(--kz-space-base);
    }

    .kz-redesign .kz-home-products-tabs {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding: 0 4px;
        scrollbar-width: thin;
        scrollbar-color: var(--kz-color-line) transparent;
    }

    .kz-redesign .kz-home-products {
        --kz-products-gap: var(--kz-space-md);
    }

    .kz-redesign .kz-home-products-item {
        flex: 0 0 min(76%, 340px);
    }

    .kz-redesign .kz-home-products-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-products-tab,
    .kz-redesign .kz-home-articles-tab,
    .kz-redesign .kz-home-articles-card,
    .kz-redesign .kz-home-products-arrow,
    .kz-redesign .kz-home-products-card,
    .kz-redesign .kz-home-products-img,
    .kz-redesign .kz-home-products-all::after,
    .kz-redesign .kz-home-articles-all::after,
    .kz-redesign .kz-home-products-more::after {
        transition: none;
    }

    .kz-redesign .kz-home-products-card:hover .kz-home-products-more::after,
    .kz-redesign .kz-home-products-all:hover::after,
    .kz-redesign .kz-home-products-card:hover .kz-home-products-img {
        transform: none;
    }
}

/* Hero responsive */

@media (max-width: 1023px) {
    .kz-redesign .kz-hero .search .search-contaner {
        max-height: calc(100vh - 470px);
        max-height: calc(var(--app-height) - 470px);
    }
}

@media (max-width: 899px) {
    .kz-redesign .first_section .kz-hero {
        padding: 56px 0;
    }

    .kz-redesign .first_section .kz-hero .cont {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
        align-items: start;
    }

    .kz-redesign .kz-hero .kz-hero-scene {
        justify-self: start;
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .kz-redesign .first_section .kz-hero {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .first_section .kz-hero .cont {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-hero .kz-hero-intro {
        margin-bottom: var(--kz-space-lg);
    }

    .kz-redesign .kz-hero .kz-hero-eyebrow {
        margin-bottom: var(--kz-space-base);
    }

    .kz-redesign .kz-hero .kz-hero-title {
        font-size: var(--kz-type-heading-1-mobile-size);
        line-height: 38px;
    }

    .kz-redesign .kz-hero .kz-hero-lead {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-hero .search form .input {
        padding-right: 132px;
    }

    .kz-redesign .kz-hero .search form .submit_btn {
        padding: 0 var(--kz-space-base);
    }

    .kz-redesign .kz-hero .search form .submit_btn::after {
        display: none;
    }

    .kz-redesign .kz-hero .search form .close_quick_btn {
        right: 92px;
    }

    .kz-redesign .kz-hero .kz-hero-actions {
        margin-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-hero .kz-hero-scene {
        max-width: 100%;
    }

    /* Full-screen search overlay on phones (legacy keeps header fixed) */
    .search_open .kz-redesign .first_section .kz-header {
        position: fixed;
    }

    .search_open .kz-redesign .kz-header .info,
    .search_open .kz-redesign .kz-hero .kz-hero-intro {
        display: none;
    }

    /* The scene is hidden without display: none: display: none cancels its one-run CSS animations and
       closing the search would replay them. Visually hidden 1x1 box, out of flow, no focus, no overflow. */
    .search_open .kz-redesign .kz-hero .kz-hero-scene {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        visibility: hidden;
        pointer-events: none;
    }

    .search_open .kz-redesign .first_section .kz-hero {
        padding-top: var(--kz-space-xxxl);
    }

    .kz-redesign .first_section .kz-header .close_search_btn {
        top: var(--kz-space-md);
        right: var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-hero .search .search-contaner {
        max-height: calc(100vh - 200px);
        max-height: calc(var(--app-height) - 200px);
    }
}

@media (max-width: 575px) {
    .kz-redesign .kz-hero .kz-hero-actions .kz-btn {
        width: 100%;
    }
}

/*
 * Mega menu, stage 3 (sub-stage 3.1C): light full-screen catalog per the approved concept
 * NEW-TEMPLATE/pergam-redesign/mega-menu-concept-kz.html. Markup: templates/kz/index.tpl.php (#menu.kz-menu),
 * behaviour: /templates/kz-assets/js/kz-menu.js, the single owner of the menu state.
 * Legacy #menu rules in templates/css/styles.css and response_*.css (slide from the left, transition: all,
 * dark gradient, 50px padding, red letters) are overridden here; body.lock is not used any more.
 * Only clip-path, opacity and transform animate: shell 240 ms open / 180 ms close, two content groups 160 ms
 * with delays 40 and 70 ms, tab switch 140 ms, hover 150 ms ease for fine pointers only.
 */

/* Page lock while the menu is open: the scroll offset is kept and the scrollbar gutter stays reserved, so nothing shifts */

html.kz-menu-open {
    overflow: hidden;
}

@supports (scrollbar-gutter: stable) {
    html.kz-menu-open.kz-menu-gutter {
        scrollbar-gutter: stable;
    }
}

@supports not (scrollbar-gutter: stable) {
    html.kz-menu-open.kz-menu-gutter .kz-redesign {
        padding-right: var(--kz-scrollbar-width);
    }
}

/* A transparent fixed layer under the menu (z 999 < 1000) shields the page from the very first frame until the
   close has completed: clip-path clips hit-testing, so during the reveal a click would otherwise reach the page
   through the not yet revealed area. A body pseudo-element costs one style update of <body>; inert, which
   kz-menu.js applies to the page once the shell transition has ended, recalculates the whole legacy page. */

html.kz-menu-open body::after {
    content: "";
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* The floating Bitrix24 button is a body child with a huge z-index; while the menu is open it is hidden
   (kz-menu.js also makes the page outside #menu inert). The widget code itself is untouched. */

html.kz-menu-open .b24-widget-button-wrapper,
html.kz-menu-open .b24-widget-button-shadow {
    visibility: hidden;
    pointer-events: none;
}

/* Shell: fixed, revealed from the top edge through clip-path; legacy transform and transition: all are reset */

.kz-redesign #menu {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: var(--kz-color-line) var(--kz-color-smoke);
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 180ms var(--kz-ease-out), visibility 0s linear 180ms;
    /* Width of the menu's own scrollbar gutter, measured by kz-menu.js; keeps the content centred on the header axis */
    --kz-menu-gutter: 0px;
}

.kz-redesign #menu.active {
    visibility: visible;
    pointer-events: auto;
    transform: none;
    clip-path: inset(0 0 0 0);
    transition: clip-path 240ms var(--kz-ease-out), visibility 0s;
}

.kz-redesign #menu .cont {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Two content groups: opacity and translateY(-8px) → 0 over 160 ms, 40 ms after the shell for the bar, 70 ms for the grid.
   Closing: the same properties over 100 ms without delay, exit upwards, faster than the shell. */

.kz-redesign #menu .kz-menu-bar,
.kz-redesign #menu .kz-menu-body {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 100ms var(--kz-ease-out), transform 100ms var(--kz-ease-out);
}

.kz-redesign #menu.active .kz-menu-bar {
    opacity: 1;
    transform: none;
    transition: opacity 160ms var(--kz-ease-out) 40ms, transform 160ms var(--kz-ease-out) 40ms;
}

.kz-redesign #menu.active .kz-menu-body {
    opacity: 1;
    transform: none;
    transition: opacity 160ms var(--kz-ease-out) 70ms, transform 160ms var(--kz-ease-out) 70ms;
}

/* Top bar: close button exactly above the header «Меню» button, tabs to the right; sticky while the catalog scrolls */

.kz-redesign #menu .kz-menu-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--kz-space-base);
    min-height: 72px;
    padding: 0 max(var(--kz-gutter), calc(50% - var(--kz-container) / 2 + var(--kz-menu-gutter) / 2));
    background: var(--kz-color-paper);
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign #menu .kz-menu-bar.is-scrolled {
    box-shadow: var(--kz-shadow-overlay);
}

.kz-redesign #menu .close_btn {
    position: static;
    top: auto;
    left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.kz-redesign #menu .close_btn .icon {
    display: block;
    width: 16px;
    height: 16px;
}

/* Tabs: 14 Medium without caps, active tab with a 2px primary line and a primary-soft background */

.kz-redesign #menu .kz-menu-tabs {
    display: flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.kz-redesign #menu .kz-menu-tabs::-webkit-scrollbar {
    display: none;
}

.kz-redesign #menu .kz-menu-tabs button {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 var(--kz-space-md);
    border: 0;
    border-radius: var(--kz-radius-control) var(--kz-radius-control) 0 0;
    background: transparent;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.kz-redesign #menu .kz-menu-tabs button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: transparent;
    transition: background-color 150ms ease;
}

.kz-redesign #menu .kz-menu-tabs button span {
    border: 0;
}

.kz-redesign #menu .kz-menu-tabs button.active {
    color: var(--kz-color-graphite);
    background: var(--kz-color-primary-soft);
}

.kz-redesign #menu .kz-menu-tabs button.active::after {
    background: var(--kz-color-primary);
}

/* Panels: an inactive panel takes no height and is hidden at once; the active one fades in over 140 ms.
   Two texts never overlap and the shell keeps its height. */

.kz-redesign #menu .kz-menu-body {
    position: relative;
    padding: var(--kz-space-xxl) max(var(--kz-gutter), calc(50% - var(--kz-container) / 2 + var(--kz-menu-gutter) / 2)) var(--kz-space-xxxl);
}

.kz-redesign #menu .tab_content {
    position: relative;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    content-visibility: hidden;
    transition: opacity 140ms var(--kz-ease-out), visibility 0s;
}

.kz-redesign #menu .tab_content.active {
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    content-visibility: visible;
}

/* Closed menu (4.2I): the active panel follows the shell. With its own visible/auto the links of an invisible menu
   stayed in the Tab order and, under reduced motion (the shell fades instead of clipping), clickable over the page */

.kz-redesign #menu:not(.active) .tab_content.active {
    visibility: inherit;
    pointer-events: none;
}

/* Section columns: three columns with 1px dividers, titles 16 Medium, items 14; the CMS markup is unchanged */

.kz-redesign #menu .cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    margin: 0;
}

.kz-redesign #menu .cols .col,
.kz-redesign #menu .cols.for-catalog .col {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0 var(--kz-space-xl);
    border-left: 1px solid var(--kz-color-line);
}

.kz-redesign #menu .cols .col:first-child {
    padding-left: 0;
    border-left: 0;
}

.kz-redesign #menu .cols .col:last-child {
    display: block;
    width: auto;
    padding-right: 0;
}

.kz-redesign #menu .cols .col:last-child > * {
    width: auto;
    max-width: none;
}

.kz-redesign #menu .cols .item + .item,
.kz-redesign #menu .cols .col:last-child > .item:nth-child(2) {
    margin-top: var(--kz-space-xl);
}

.kz-redesign #menu .cols .title {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-title-product-size);
    font-weight: var(--kz-type-title-product-weight);
    line-height: 22px;
    letter-spacing: -0.01em;
}

.kz-redesign #menu .cols .title a,
.kz-redesign #menu .cols .items a,
.kz-redesign #menu .alphabet .items a {
    color: var(--kz-color-graphite);
    text-decoration: none;
    transition: color 150ms ease;
}

.kz-redesign #menu .cols .items a,
.kz-redesign #menu .alphabet .items a {
    display: inline-block;
    padding: 6px 0;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    vertical-align: top;
}

.kz-redesign #menu .cols .items > div,
.kz-redesign #menu .alphabet .items > div {
    margin: 0;
}

/* Brand alphabet: primary letters, graphite links */

.kz-redesign #menu .alphabet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--kz-space-xl) var(--kz-space-lg);
    margin: 0;
}

.kz-redesign #menu .alphabet .item {
    width: auto;
    min-width: 0;
    margin: 0;
}

.kz-redesign #menu .alphabet .letter {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-primary);
    font-size: var(--kz-type-title-product-size);
    font-weight: var(--kz-type-title-product-weight);
    line-height: 22px;
}

/* Legacy styles.css paints red hovers for every pointer; neutralise them, then apply the KZ hover for fine pointers only */

.kz-redesign #menu .close_btn:hover {
    color: var(--kz-color-graphite);
    border-color: var(--kz-color-line);
    background: var(--kz-color-paper);
}

.kz-redesign #menu .cols .items a:hover,
.kz-redesign #menu .alphabet .items a:hover {
    color: var(--kz-color-graphite);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign #menu .close_btn:hover {
        color: var(--kz-color-primary);
        border-color: var(--kz-color-primary);
    }

    .kz-redesign #menu .kz-menu-tabs button:hover {
        color: var(--kz-color-graphite);
    }

    .kz-redesign #menu .cols .title a:hover,
    .kz-redesign #menu .cols .items a:hover,
    .kz-redesign #menu .alphabet .items a:hover {
        color: var(--kz-color-primary);
    }
}

/* Keyboard focus: the primary ring only, no colour change, so moving focus with the keyboard starts no transition;
   legacy styles.css removes button outlines with !important, so the same weight is required for the close button,
   the tabs and the header trigger the focus returns to */

.kz-redesign #menu a:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign #menu button:focus-visible,
.kz-redesign .kz-header .menu_btn:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign #menu .kz-menu-tabs button:focus-visible {
    outline-offset: -2px !important;
}

/* Responsive */

@media (max-width: 1023px) {
    .kz-redesign #menu .cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--kz-space-xl);
    }

    /* Folded layout: no desktop divider or inset on any column; the catalog selector `.cols.for-catalog .col`
       outranks `.cols .col`, so it is listed here too */
    .kz-redesign #menu .cols .col,
    .kz-redesign #menu .cols.for-catalog .col {
        padding: 0;
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .kz-redesign #menu .kz-menu-bar {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign #menu .kz-menu-body {
        padding: var(--kz-space-lg) var(--kz-gutter-mobile) var(--kz-space-xxl);
    }

    .kz-redesign #menu .cols {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign #menu .cols .item + .item,
    .kz-redesign #menu .cols .col:last-child > .item:nth-child(2) {
        margin-top: var(--kz-space-lg);
    }

    /* Touch targets: 44px close button and tabs (40px on desktop) */
    .kz-redesign #menu .close_btn {
        width: 44px;
        height: 44px;
    }

    .kz-redesign #menu .kz-menu-tabs button {
        height: 44px;
    }
}

@media (max-width: 575px) {
    .kz-redesign #menu .kz-menu-tabs button {
        padding: 0 10px;
        font-size: var(--kz-type-button-small-size);
    }

    .kz-redesign #menu .alphabet {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--kz-space-lg) var(--kz-space-base);
    }
}

/* Keyboard actions: kz-menu.js sets data-kz-instant only for the synchronous state change, so no transition starts;
   mouse and touch keep the motion above */

.kz-redesign #menu[data-kz-instant],
.kz-redesign #menu[data-kz-instant] .kz-menu-bar,
.kz-redesign #menu[data-kz-instant] .kz-menu-body,
.kz-redesign #menu[data-kz-instant] .tab_content,
.kz-redesign #menu[data-kz-instant] .kz-menu-tabs button,
.kz-redesign #menu[data-kz-instant] .kz-menu-tabs button::after {
    transition: none;
}

/* Reduced motion: opacity only, 160 ms, no delays and no geometry change; the final state equals the default mode */

@media (prefers-reduced-motion: reduce) {
    .kz-redesign #menu {
        clip-path: inset(0 0 0 0);
        opacity: 0;
        transition: opacity 160ms var(--kz-ease-out), visibility 0s linear 160ms;
    }

    .kz-redesign #menu.active {
        opacity: 1;
        transition: opacity 160ms var(--kz-ease-out), visibility 0s;
    }

    .kz-redesign #menu .kz-menu-bar,
    .kz-redesign #menu .kz-menu-body,
    .kz-redesign #menu.active .kz-menu-bar,
    .kz-redesign #menu.active .kz-menu-body {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .kz-redesign #menu .tab_content,
    .kz-redesign #menu .close_btn,
    .kz-redesign #menu .kz-menu-tabs button,
    .kz-redesign #menu .kz-menu-tabs button::after,
    .kz-redesign #menu .cols .title a,
    .kz-redesign #menu .cols .items a,
    .kz-redesign #menu .alphabet .items a {
        transition: none;
    }
}

/*
 * Modal search on inner pages, stage 3.2 (sub-stage 3.2C): per the approved concept
 * NEW-TEMPLATE/pergam-redesign/search-modal-concept-kz.html. Markup: templates/kz/header.tpl.php (header.kz-header--inner,
 * button.kz-header-search, .kz-search-modal inside <header>), shell behaviour: /templates/kz-assets/js/kz-search.js,
 * quick results and the GET form: the untouched templates/js/scripts.js and /search/quick.htm.
 * Every rule below is scoped to .kz-header--inner, .kz-search-* or html.kz-search-open; the main page keeps its hero
 * search. Only opacity and transform animate: backdrop 160 ms, panel 200 ms open / 120 ms close, keyboard without motion.
 */

/* Header button: first in the actions group, same language as the other 40px icons; 44px below 768px */

.kz-redesign .kz-header--inner .links .kz-header-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-graphite);
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-header--inner .links .kz-header-search .icon {
    display: block;
    width: 20px;
    height: 21px;
}

.kz-redesign .kz-header--inner .links .kz-header-search[aria-expanded="true"] {
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-header--inner .links .kz-header-search:hover {
        background: var(--kz-color-smoke);
    }
}

/* The legacy overlay (html.search_open, set by scripts.js on focus of the field) must not restyle the inner header:
   no 100vh height, no fixed position, no hidden bars, no legacy close button */

.kz-redesign .kz-header--inner .close_search_btn {
    display: none;
}

/* Legacy `header { transition: .35s linear }` (all properties) would interpolate the z-index below between 9 and
   1000 for 350 ms on every open and close; nothing on the inner header is meant to animate */

.kz-redesign .kz-header--inner {
    transition: none;
}

html.search_open .kz-redesign .kz-header--inner {
    position: relative !important;
    z-index: 9 !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
}

html.search_open .kz-redesign .kz-header--inner .info {
    opacity: 1;
    pointer-events: auto;
}

/* While the dialog is open the header, which contains it, moves to the overlay level shared with the mega menu
   (1000, below Bitrix24 at 10150): inner pages have sticky blocks such as .product_head with z-index 90 that would
   otherwise paint over the backdrop. Closed state keeps the legacy z-index 9. */

html.kz-search-open .kz-redesign .kz-header--inner {
    z-index: 1000 !important;
}

/* Page lock while the dialog is open (kz-search.js): scroll offset kept, scrollbar gutter reserved.
   Legacy html.search_open also forces 100vw/100vh on <html> and position: fixed on <body>, which would reset the
   scroll offset and widen the page; neutralised while the dialog owns the lock. */

html.kz-search-open {
    overflow: hidden;
}

@supports (scrollbar-gutter: stable) {
    html.kz-search-open.kz-search-gutter {
        scrollbar-gutter: stable;
    }
}

@supports not (scrollbar-gutter: stable) {
    html.kz-search-open.kz-search-gutter .kz-redesign {
        padding-right: var(--kz-scrollbar-width);
    }
}

html.kz-search-open.search_open,
html.kz-search-open.search_open body {
    width: auto;
    height: auto;
}

html.kz-search-open.search_open body {
    position: static;
    overflow: visible;
}

/* Bitrix24 (body children, z-index 10100–1100002: launcher, its shadow and menu, the open line chat window
   .bx-livechat-wrapper, chat/form windows mounted in .b24-window-mounts and .b24-form): hidden and non-interactive
   while the dialog is open; the widget code and its state are untouched, everything returns when
   html.kz-search-open is removed. The widget shows its shadow through a keyframe animation and sets visibility on
   the menu items itself, so the declarations are !important (author !important wins over animations) and opacity
   covers the whole subtree. */

html.kz-search-open .b24-widget-button-wrapper,
html.kz-search-open .b24-widget-button-shadow,
html.kz-search-open .bx-livechat-wrapper,
html.kz-search-open .b24-window-mounts,
html.kz-search-open .b24-form {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Dialog shell: fixed layer on the same level as the mega menu (the two are mutually exclusive) */

.kz-redesign .kz-header--inner .kz-search-modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh var(--kz-gutter) var(--kz-gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-header--inner .kz-search-modal[hidden] {
    display: none;
}

.kz-redesign .kz-header--inner .kz-search-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(43, 45, 65, 0.56);
    opacity: 0;
    transition: opacity 160ms var(--kz-ease-out);
}

.kz-redesign .kz-header--inner .kz-search-panel {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(800px, 100%);
    max-height: calc(100vh - 10vh - var(--kz-gutter));
    background: var(--kz-color-paper);
    border-radius: var(--kz-radius-card);
    box-shadow: var(--kz-shadow-overlay);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms var(--kz-ease-out), transform 200ms var(--kz-ease-out);
}

.kz-redesign .kz-header--inner .kz-search-modal.is-open .kz-search-backdrop {
    opacity: 1;
}

.kz-redesign .kz-header--inner .kz-search-modal.is-open .kz-search-panel {
    opacity: 1;
    transform: none;
}

.kz-redesign .kz-header--inner .kz-search-modal.is-closing .kz-search-backdrop,
.kz-redesign .kz-header--inner .kz-search-modal.is-closing .kz-search-panel {
    transition-duration: 120ms;
}

.kz-redesign .kz-header--inner .kz-search-modal[data-kz-instant] .kz-search-backdrop,
.kz-redesign .kz-header--inner .kz-search-modal[data-kz-instant] .kz-search-panel {
    transition: none;
}

/* Head: title and the close button */

.kz-redesign .kz-header--inner .kz-search-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base);
    padding: var(--kz-space-lg) var(--kz-space-lg) 0;
}

.kz-redesign .kz-header--inner .kz-search-title {
    margin: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-transform: none;
}

.kz-redesign .kz-header--inner .kz-search-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.kz-redesign .kz-header--inner .kz-search-close .icon {
    display: block;
    width: 16px;
    height: 16px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-header--inner .kz-search-close:hover {
        color: var(--kz-color-primary);
        border-color: var(--kz-color-primary);
    }
}

/* Search block: the legacy .search / form / .input / .submit_btn / .close_quick_btn hooks keep their names,
   only the presentation is replaced (legacy: dark 76px field, red uppercase button) */

.kz-redesign .kz-header--inner .search {
    position: static;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--kz-space-base) var(--kz-space-lg) 0;
    transition: none;
}

.kz-redesign .kz-header--inner .search form {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--kz-space-md);
    margin: 0;
}

.kz-redesign .kz-header--inner .search form .kz-search-field-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 20px;
    height: 21px;
    margin-top: -10px;
    color: var(--kz-color-text-muted);
    pointer-events: none;
}

.kz-redesign .kz-header--inner .search form .input {
    box-sizing: border-box;
    flex: 1 1 auto;
    display: block;
    width: auto;
    min-width: 0;
    height: 56px;
    margin: 0;
    padding: 0 56px 0 52px;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    font-weight: var(--kz-type-body-weight);
    line-height: 54px;
    outline: none;
    box-shadow: none;
    transition: none;
}

.kz-redesign .kz-header--inner .search form .input:focus {
    border-color: var(--kz-color-primary);
    box-shadow: 0 0 0 1px var(--kz-color-primary);
}

.kz-redesign .kz-header--inner .search form .input::placeholder {
    color: var(--kz-color-text-muted);
    opacity: 1;
}

.kz-redesign .kz-header--inner .search form ::-webkit-input-placeholder {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-header--inner .search form .submit_btn {
    position: static;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 56px;
    margin: 0;
    padding: 0 var(--kz-space-base);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.kz-redesign .kz-header--inner .search form .submit_btn::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-left: var(--kz-space-sm);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-header--inner .search form .submit_btn:hover {
        background: var(--kz-color-primary-hover);
    }
}

.kz-redesign .kz-header--inner .search form .submit_btn:active {
    background: var(--kz-color-primary-active);
}

/* Clear button: the legacy .close_quick_btn (shown by scripts.js when the field is not empty), inside the field */

.kz-redesign .kz-header--inner .search form .close_quick_btn {
    position: absolute;
    top: 50%;
    right: 140px;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-text-muted);
    cursor: pointer;
    transition: color 150ms ease;
}

.kz-redesign .kz-header--inner .search form .close_quick_btn.hidden {
    display: none;
}

.kz-redesign .kz-header--inner .search form .close_quick_btn .icon {
    width: 14px;
    height: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-header--inner .search form .close_quick_btn:hover {
        color: var(--kz-color-graphite);
    }
}

/* Results: only this area scrolls; the legacy .search-contaner (absolute, opens upward, hidden until .opened) stays
   in flow and always visible, its scrollTop writes from scripts.js have no effect because it does not scroll */

.kz-redesign .kz-header--inner .kz-search-results {
    flex: 1 1 auto;
    min-height: 88px;
    padding: var(--kz-space-base) 0 var(--kz-space-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--kz-color-line) transparent;
    scrollbar-width: thin;
}

.kz-redesign .kz-header--inner .kz-search-results::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}

.kz-redesign .kz-header--inner .kz-search-results::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--kz-color-line);
}

.kz-redesign .kz-header--inner .search .search-contaner,
.kz-redesign .kz-header--inner .search .search-contaner.opened {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transition: none;
}

.kz-redesign .kz-header--inner .kz-search-hint {
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-header--inner .search-contaner-quick:not(.hidden) + .kz-search-hint {
    display: none;
}

/* Quick results from /search/quick.htm (templates/search_quick.tpl.php): heading, product cards, «ещё N моделей» */

.kz-redesign .kz-header--inner .search .wrap-search-question + .wrap-search-question {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-header--inner .search .search-question {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-product-size);
    font-weight: var(--kz-type-title-product-weight);
    line-height: 22px;
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--kz-space-md);
    margin: var(--kz-space-md) 0 0;
    padding: 0;
    overflow: visible;
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item {
    box-sizing: border-box;
    display: block;
    width: auto;
    margin: 0;
    padding: var(--kz-space-md);
    overflow: hidden;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    text-decoration: none;
    transition: border-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-header--inner .search .wrap-search-products-list-item:hover {
        border-color: var(--kz-color-primary);
        box-shadow: none;
    }

    .kz-redesign .kz-header--inner .search .wrap-search-products-list-item:hover .wrap-name,
    .kz-redesign .kz-header--inner .search .wrap-search-products-list-item:hover .wrap-more {
        color: var(--kz-color-primary);
    }
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin: 0 0 var(--kz-space-md);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-image.thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kz-space-xs);
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-image.thumbs > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    box-shadow: none;
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-name,
.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-more {
    display: block;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    font-weight: var(--kz-type-button-weight);
    line-height: var(--kz-type-small-line);
    text-transform: none;
    transition: color 150ms ease;
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-more {
    display: flex;
    align-items: center;
    gap: var(--kz-space-sm);
    color: var(--kz-color-primary);
}

.kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-more .icon {
    width: 6px;
    height: 10px;
    fill: currentColor;
}

/* Keyboard focus inside the dialog: legacy styles.css removes outlines with !important */

.kz-redesign .kz-header--inner .kz-search-modal a:focus-visible,
.kz-redesign .kz-header--inner .kz-search-modal button:focus-visible,
.kz-redesign .kz-header--inner .links .kz-header-search:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

/* Phones: full-screen panel on the legacy viewport height (--app-height from scripts.js); title, close and the
   form stay put, only the results scroll, so the on-screen keyboard shortens the results, not the field */

@media (max-width: 767px) {
    .kz-redesign .kz-header--inner .links .kz-header-search {
        width: 44px;
        height: 44px;
    }

    .kz-redesign .kz-header--inner .kz-search-modal {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }

    .kz-redesign .kz-header--inner .kz-search-panel {
        width: 100%;
        height: 100vh;
        height: var(--app-height, 100vh);
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    .kz-redesign .kz-header--inner .kz-search-head {
        padding: var(--kz-space-base) var(--kz-gutter-mobile) 0;
    }

    .kz-redesign .kz-header--inner .kz-search-close {
        width: 44px;
        height: 44px;
    }

    .kz-redesign .kz-header--inner .search {
        padding: var(--kz-space-base) var(--kz-gutter-mobile) 0;
    }

    .kz-redesign .kz-header--inner .search form {
        flex-direction: column;
        align-items: stretch;
    }

    .kz-redesign .kz-header--inner .search form .input {
        width: 100%;
    }

    .kz-redesign .kz-header--inner .search form .submit_btn {
        width: 100%;
        height: 44px;
    }

    .kz-redesign .kz-header--inner .search form .kz-search-field-icon {
        top: 28px;
    }

    .kz-redesign .kz-header--inner .search form .close_quick_btn {
        top: 28px;
        right: 6px;
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }

    .kz-redesign .kz-header--inner .search .wrap-search-products-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Reduced motion: no transitions, no offset; the dialog appears and disappears at once */

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-header--inner .kz-search-backdrop,
    .kz-redesign .kz-header--inner .kz-search-panel,
    .kz-redesign .kz-header--inner .kz-search-close,
    .kz-redesign .kz-header--inner .search form .submit_btn,
    .kz-redesign .kz-header--inner .search form .close_quick_btn,
    .kz-redesign .kz-header--inner .search .wrap-search-products-list-item,
    .kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-name,
    .kz-redesign .kz-header--inner .search .wrap-search-products-list-item .wrap-more {
        transition: none;
    }

    .kz-redesign .kz-header--inner .kz-search-panel {
        transform: none;
    }
}

/*
 * Home page news block «Новости и мероприятия», sub-stage 4.2D. Scoped to .kz-home-articles, which only the home page
 * carries, so the legacy .articles styling that /news/, /press/, /sales/ and the search pages rely on is untouched.
 * The tabs, the «Пресс-центр» link and the focus rings reuse the rules of the equipment block: this file only adds
 * selectors to them, so there is one tab system on the page, not two.
 * The section owns the gap to the dark brands band above it, so the composition survives a new section between them.
 */

.kz-redesign .kz-home-articles {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--kz-space-section) 0;
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-home-articles-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-home-articles-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kz-space-base) var(--kz-space-xl);
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-home-articles-title {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
}

.kz-redesign .kz-home-articles-tabs {
    margin-bottom: var(--kz-space-lg);
}

.kz-redesign .kz-home-articles-foot {
    display: none;
    margin: var(--kz-space-lg) 0 0;
}

/* Grid of cards: three across from 900px, two from 768px, one on the phone */

.kz-redesign .kz-home-articles-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kz-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-home-articles-item {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-home-articles-item::before {
    content: none;
}

.kz-redesign .kz-home-articles-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
    transition: border-color 170ms var(--kz-ease-out);
}

/* The picture keeps the 467 × 220 ratio of the CMS files and is cropped, never stretched */

.kz-redesign .kz-home-articles-media {
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-home-articles-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 467 / 220;
    object-fit: cover;
    object-position: center;
}

.kz-redesign .kz-home-articles-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: var(--kz-space-lg);
}

.kz-redesign .kz-home-articles-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: 0 0 var(--kz-space-md);
    padding: 0;
}

.kz-redesign .kz-home-articles-label {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--kz-space-sm);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 1;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-home-articles-date {
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-data-size);
    font-weight: var(--kz-type-data-weight);
    line-height: var(--kz-type-data-line);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-home-articles-name {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-home-articles-link {
    color: inherit;
    text-decoration: none;
    transition: color 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-articles-place {
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    font-weight: var(--kz-type-small-weight);
    line-height: var(--kz-type-small-line);
}

/* The excerpt is smaller and quieter than the title, so the two never read as one block of text */

.kz-redesign .kz-home-articles-desc {
    margin: var(--kz-space-md) 0 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    font-weight: var(--kz-type-text-14-weight);
    line-height: 22px;
    overflow-wrap: break-word;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-articles-card:hover {
        border-color: var(--kz-color-primary);
    }

    .kz-redesign .kz-home-articles-card:hover .kz-home-articles-link,
    .kz-redesign .kz-home-articles-link:hover {
        color: var(--kz-color-primary);
    }
}

.kz-redesign .kz-home-articles-link:active {
    color: var(--kz-color-primary-active);
}

@media (max-width: 1279px) {
    .kz-redesign .kz-home-articles-list {
        gap: var(--kz-space-base);
    }
}

@media (max-width: 899px) {
    .kz-redesign .kz-home-articles-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-home-articles {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-home-articles-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-home-articles-head {
        display: block;
        margin-bottom: var(--kz-space-base);
    }

    .kz-redesign .kz-home-articles-all--head {
        display: none;
    }

    .kz-redesign .kz-home-articles-foot {
        display: block;
    }

    .kz-redesign .kz-home-articles-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-articles-tabs {
        margin-bottom: var(--kz-space-base);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding: 0 4px;
        scrollbar-width: thin;
        scrollbar-color: var(--kz-color-line) transparent;
    }

    .kz-redesign .kz-home-articles-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-home-articles-body {
        padding: var(--kz-space-base);
    }
}

/*
 * Home page service block «Сервисный центр», sub-stages 4.2E and 4.2E.1. Scoped to .kz-home-service, a class that only
 * the home page carries, so nothing on /service/ or on the legacy pages changes.
 * The composition repeats the «Сервисный центр, тёмная полоса» section of NEW-TEMPLATE/pergam-kz-design-preview-v3.html:
 * a full-width graphite band, a section head with the small label, the H2 and an outlined button on the right, and a
 * grid of directions with a hairline above each one. The band owns its vertical padding, so the news block above and
 * the about block below keep their own spacing.
 * The DOM order is head → directions → button; on the desktop the grid areas move the button next to the heading,
 * on the phone it stays last, as required. No JavaScript, no image, no shadow and no gradient.
 */

.kz-redesign .kz-home-service {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--kz-space-section) 0;
    background: var(--kz-color-graphite);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
}

/*
 * Атмосфера тёмных полос (подэтапы 4.2E.2 и 4.2C.2). Один механизм на две секции — «Сервисный центр»
 * и «Производители оборудования»: ::before держит объём (мягкий свет от левого верхнего края, приглушённое
 * холодное свечение ниже центра, градиент по ширине и затемнение к правому нижнему углу), ::after — очень мелкое
 * монохромное зерно из встроенной SVG-текстуры, которая описана здесь один раз и подставляется через переменную.
 * Растровых файлов нет, JavaScript не нужен, оба слоя не ловят указатель и лежат ниже содержимого: секция создаёт
 * свой контекст наложения (isolation), поэтому отрицательный z-index остаётся внутри неё, над заливкой #2B2D41.
 * Все пятна заданы в процентах, поэтому на узких ширинах рисунок тот же, только мельче, без обрезанных краёв.
 * Значения по умолчанию — для сервисной полосы; полоса производителей ниже и берёт их ослабленными (см. её раздел),
 * отличаются только прозрачности и вертикальный размах, поэтому обе полосы читаются как одна система.
 */

.kz-redesign .kz-home-service,
.kz-redesign .kz-home-brands {
    --kz-atmo-light: 0.032;
    --kz-atmo-cool: 0.20;
    --kz-atmo-side: 0.22;
    --kz-atmo-edge: 0.40;
    --kz-atmo-spread: 150%;
    --kz-atmo-edge-spread: 135%;
    --kz-atmo-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='kzn' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23kzn)'/%3E%3C/svg%3E");
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Полоса производителей ниже сервисной, поэтому тот же эффект берётся слабее — около 80% по каждому слою */

.kz-redesign .kz-home-brands {
    --kz-atmo-light: 0.026;
    --kz-atmo-cool: 0.16;
    --kz-atmo-side: 0.18;
    --kz-atmo-edge: 0.32;
    --kz-atmo-spread: 170%;
    --kz-atmo-edge-spread: 150%;
}

.kz-redesign .kz-home-service::before,
.kz-redesign .kz-home-service::after,
.kz-redesign .kz-home-brands::before,
.kz-redesign .kz-home-brands::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.kz-redesign .kz-home-service::before,
.kz-redesign .kz-home-brands::before {
    z-index: -2;
    background:
        radial-gradient(56% var(--kz-atmo-spread) at 5% 12%, rgba(255, 255, 255, var(--kz-atmo-light)), rgba(255, 255, 255, 0) 66%),
        radial-gradient(70% 95% at 36% 88%, rgba(74, 80, 110, var(--kz-atmo-cool)), rgba(74, 80, 110, 0) 72%),
        linear-gradient(100deg, rgba(43, 45, 65, 0) 38%, rgba(18, 19, 29, var(--kz-atmo-side)) 100%),
        radial-gradient(125% var(--kz-atmo-edge-spread) at 18% 16%, rgba(18, 19, 29, 0) 40%, rgba(18, 19, 29, var(--kz-atmo-edge)) 100%);
}

/* Зерно: fractalNoise со stitchTiles, поэтому на стыках плитки шва не видно. feComponentTransfer нужен по двум
   причинам: feFuncA делает шум непрозрачным (иначе собственная альфа турбулентности почти гасит его на 5%),
   а одинаковый наклон у R, G и B растягивает контраст, и зерно становится видно, оставаясь монохромным.
   Зерно у обеих полос одинаковое — это общая фактура системы. */

.kz-redesign .kz-home-service::after,
.kz-redesign .kz-home-brands::after {
    z-index: -1;
    opacity: 0.05;
    background-image: var(--kz-atmo-noise);
    background-repeat: repeat;
    background-size: 180px 180px;
}

.kz-redesign .kz-home-service-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head cta"
        "list list";
    align-items: end;
    column-gap: var(--kz-space-lg);
    row-gap: var(--kz-space-xl);
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-home-service-head {
    grid-area: head;
    min-width: 0;
}

.kz-redesign .kz-home-service-label {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-on-dark-muted);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-home-service-title {
    margin: 0;
    padding: 0;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
}

/* Directions: two equal columns, each opened by the 1px white hairline of the reference (.svc) */

.kz-redesign .kz-home-service-list {
    grid-area: list;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kz-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-home-service-item {
    min-width: 0;
    margin: 0;
    padding: var(--kz-space-lg) 0 0;
    border-top: 1px solid var(--kz-color-on-dark-line);
    list-style: none;
}

.kz-redesign .kz-home-service-item::before {
    content: none;
}

.kz-redesign .kz-home-service-item-title {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-transform: none;
}

.kz-redesign .kz-home-service-item-desc {
    margin: 0;
    padding: 0;
    color: var(--kz-color-on-dark-muted);
    font-size: var(--kz-type-text-14-size);
    font-weight: var(--kz-type-text-14-weight);
    line-height: 22px;
}

/* The button is the outlined control of the dark surface, the same one the brands band already uses */

.kz-redesign .kz-home-service-link {
    grid-area: cta;
    justify-self: end;
    align-self: end;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-on-dark-border);
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
    transition: background-color 150ms var(--kz-ease-out), border-color 150ms var(--kz-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-service-link:hover {
        border-color: var(--kz-color-on-dark);
        background: var(--kz-color-on-dark-hover);
        color: var(--kz-color-on-dark);
        text-decoration: none;
    }
}

.kz-redesign .kz-home-service-link:active {
    border-color: var(--kz-color-on-dark);
    background: rgba(255, 255, 255, 0.14);
    color: var(--kz-color-on-dark);
}

.kz-redesign .kz-home-service-link:focus-visible {
    outline: 2px solid var(--kz-color-on-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-service-link {
        transition: none;
    }
}

/* One column on the phone: label, heading, directions, then the button, which keeps its own width */

@media (max-width: 767px) {
    .kz-redesign .kz-home-service {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-home-service-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "list"
            "cta";
        justify-items: start;
        row-gap: var(--kz-space-lg);
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-home-service-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-service-list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-home-service-link {
        justify-self: start;
    }
}

/*
 * «ТОО «ПЕРГАМ-КАЗАХСТАН»» (подэтап 4.2F). Светлая редакционная полоса на smoke между тёмным сервисным
 * центром и футером: слева метка, заголовок и подзаголовок, справа текст записи CMS и кнопка на страницу
 * компании. Референс — секция «О компании, две колонки, #F4F6F9» из
 * NEW-TEMPLATE/pergam-kz-design-preview-v3.html.
 * Поверхность светлая и остаётся без атмосферных слоёв: переменные --kz-atmo-*, зерно и многослойные
 * градиенты относятся только к .kz-home-brands и .kz-home-service (раздел «Атмосфера тёмных полос» выше),
 * новые секции их не наследуют. Фотографий, иллюстраций, декоративных фигур и анимаций в блоке нет.
 * Контейнер тот же, что у оборудования, производителей, новостей и сервиса, поэтому на 1440px левый и
 * правый края совпадают с соседними секциями.
 */

.kz-redesign .kz-home-about {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--kz-space-section) 0;
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

/* Две колонки 5/12 и 7/12 с промежутком 48px; minmax(0, …) не даёт длинному слову раздвинуть трек */

.kz-redesign .kz-home-about-inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: var(--kz-space-xxl);
    row-gap: var(--kz-space-xl);
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-home-about-head,
.kz-redesign .kz-home-about-body {
    min-width: 0;
}

/* Метка не является заголовком: это span со шкалой label, тот же приём, что в сервисной полосе */

.kz-redesign .kz-home-about-label {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-home-about-title {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
    overflow-wrap: break-word;
}

/* Второе заголовочное поле записи CMS по смыслу является подписью к заголовку, поэтому выводится абзацем,
   а не вторым H2: в блоке остаётся единственный заголовок второго уровня. Шкала lead, 18/26. */

.kz-redesign .kz-home-about-subtitle {
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-lead-size);
    font-weight: var(--kz-type-lead-weight);
    line-height: 26px;
    overflow-wrap: break-word;
}

/* Текст приходит из CMS как есть, поэтому правила рассчитаны на произвольную разметку записи: абзацы,
   списки, ссылки. Вертикальный ритм задаёт смежный селектор, чтобы у первого и последнего элемента
   не появлялось лишнего отступа. Длина строки ограничена 68ch: на 1440px колонка шире, чем комфортно
   читать. overflow-wrap переносит длинные слова, адреса и числа, чтобы они не раздвигали колонку. */

.kz-redesign .kz-home-about-text {
    max-width: 68ch;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    font-weight: var(--kz-type-body-weight);
    line-height: var(--kz-type-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-home-about-text > * {
    margin: 0;
}

.kz-redesign .kz-home-about-text > * + * {
    margin-top: var(--kz-space-base);
}

/* Первый абзац записи читается как вводный, поэтому он крупнее, 18/28. Выделение только визуальное:
   HTML-текст CMS не меняется, а если запись начинается не с абзаца, правило просто не сработает. */

.kz-redesign .kz-home-about-text > p:first-child {
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-home-about-text a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-home-about-text ul,
.kz-redesign .kz-home-about-text ol {
    padding-left: var(--kz-space-lg);
}

.kz-redesign .kz-home-about-text li + li {
    margin-top: var(--kz-space-sm);
}

/* Кнопка: вторичный контур редизайна и общая стрелка 16px. На поверхности smoke hover не может быть
   smoke из общего описания вторичной кнопки — он совпал бы с фоном секции, и кнопка при наведении
   пропадала бы, — поэтому здесь hover это primary-soft, а нажатие line: оба состояния читаются и мышью,
   и касанием, заливка остаётся светлой и не спорит с основными синими кнопками страницы. */

.kz-redesign .kz-home-about-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    margin: var(--kz-space-lg) 0 0;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-graphite);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
    transition: background-color 150ms var(--kz-ease-out), border-color 150ms var(--kz-ease-out);
}

.kz-redesign .kz-home-about-link::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-about-link:hover {
        background: var(--kz-color-primary-soft);
        color: var(--kz-color-graphite);
        text-decoration: none;
    }

    .kz-redesign .kz-home-about-link:hover::after {
        transform: translateX(4px);
    }
}

.kz-redesign .kz-home-about-link:active {
    border-color: var(--kz-color-graphite);
    background: var(--kz-color-line);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-home-about-link:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-about-link,
    .kz-redesign .kz-home-about-link::after {
        transition: none;
    }

    .kz-redesign .kz-home-about-link:hover::after {
        transform: none;
    }
}

/* До 899px секция переходит в одну колонку. На 768px две колонки дали бы правой около 390px, и вводный
   абзац 18px читался бы столбиком примерно по 38 знаков, поэтому выбран сплошной порядок: метка,
   заголовок, подзаголовок, текст CMS, кнопка. Порядок задаёт разметка, переставлять его не требуется. */

@media (max-width: 899px) {
    .kz-redesign .kz-home-about-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--kz-space-lg);
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-home-about {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-home-about-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-home-about-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-about-subtitle {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-home-about-text > p:first-child {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }
}

@media (max-width: 575px) {
    .kz-redesign .kz-home-about-link {
        width: 100%;
    }
}

/*
 * «Частые вопросы» (подэтап 4.2G). Последняя секция главной, между «ТОО «ПЕРГАМ-КАЗАХСТАН»» и футером.
 * Продолжает светлую полосу «О компании»: тот же фон smoke, тот же контейнер и та же сетка 5/12 + 7/12,
 * поэтому заголовок стоит точно под заголовком «О компании», а список — под её текстом. Границу между
 * блоками обозначает тонкая линия line по ширине контента, а не смена фона. Атмосферных слоёв, зерна,
 * теней и карточек нет.
 * Аккордеон — нативные <details>/<summary> в нумерованном списке с тонкими разделителями (DESIGN.md,
 * Components, «Аккордеон FAQ»; референс — секция FAQ в NEW-TEMPLATE/pergam-kz-design-preview-v3.html).
 * JavaScript не нужен: фокус, Enter и Space, а также объявление состояния работают средствами браузера.
 */

/* Подэтап 4.2G.1: position и isolation дают фоновому слою окружностей точку отсчёта и собственный контекст
   наложения, поэтому его z-index не выходит за пределы секции и не влияет на «О компании» и футер.
   Сама секция не обрезает содержимое: overflow у неё остаётся visible, а обрезку выходящих за край
   окружностей делает только декоративный слой. Так фокусные рамки вопросов и ссылок не обрезаются ни при
   каких размерах. */

.kz-redesign .kz-home-faq {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 0 var(--kz-space-section);
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-home-faq-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: var(--kz-space-xxl);
    row-gap: var(--kz-space-xl);
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: var(--kz-space-section) var(--kz-gutter) 0;
}

/* Граница с блоком «О компании»: линия ровно по ширине контента контейнера, в поля не выходит.
   Отступы по обе стороны линии одинаковые — 64px, как у любой секции главной. */

.kz-redesign .kz-home-faq-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--kz-gutter);
    right: var(--kz-gutter);
    height: 1px;
    background: var(--kz-color-line);
}

.kz-redesign .kz-home-faq-head,
.kz-redesign .kz-home-faq-list {
    min-width: 0;
}

/* Метка и заголовок — те же меры, что у «О компании»: label 12 в капсе и heading-2 30/36 */

.kz-redesign .kz-home-faq-label {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-home-faq-title {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
    overflow-wrap: break-word;
}

/* Список: тонкая линия сверху и под каждым вопросом, без рамок и карточек */

.kz-redesign .kz-home-faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-home-faq-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-home-faq-details {
    margin: 0;
    padding: 0;
}

/* Вопрос: вся строка — одна нажимаемая область высотой не меньше 62px. Три колонки: номер 24px, текст,
   шеврон 16px. Номер и шеврон занимают строку той же высоты, что первая строка вопроса, поэтому при
   переносе длинного вопроса они остаются на уровне его первой строки. Геометрия строки одинакова
   в свёрнутом и развёрнутом виде: при открытии вопрос не сдвигается и не меняет размер. */

.kz-redesign .kz-home-faq-question {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: start;
    column-gap: 20px;
    padding: 18px 0;
    border-radius: var(--kz-radius-control);
    color: var(--kz-color-graphite);
    list-style: none;
    cursor: pointer;
    transition: color 150ms var(--kz-ease-out);
    -webkit-tap-highlight-color: transparent;
}

/* Стандартный маркер <summary> убирается во всех движках: сетка уже снимает display: list-item,
   ::marker — для Firefox, ::-webkit-details-marker — для Safari. */

.kz-redesign .kz-home-faq-question::marker {
    content: "";
}

.kz-redesign .kz-home-faq-question::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-home-faq-num {
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-data-small-size);
    font-weight: var(--kz-type-data-small-weight);
    line-height: 26px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-home-faq-text {
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 26px;
    overflow-wrap: break-word;
}

/* Шеврон: та же маска и тот же штрих 1.6 со скруглёнными концами, что у стрелок редизайна, цвет primary.
   При открытии поворачивается на 180° — это единственное движение в блоке. */

.kz-redesign .kz-home-faq-question::after {
    content: "";
    display: block;
    width: 16px;
    height: 26px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-home-faq-details[open] > .kz-home-faq-question::after {
    transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-home-faq-question:hover {
        color: var(--kz-color-primary);
    }
}

.kz-redesign .kz-home-faq-question:active {
    color: var(--kz-color-primary-active);
}

.kz-redesign .kz-home-faq-question:active::after {
    background: var(--kz-color-primary-active);
}

/* Фокус с клавиатуры — общее кольцо редизайна: 2px primary с отступом 2px */

.kz-redesign .kz-home-faq-question:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Ответ: под текстом вопроса (отступ слева = номер 24 + промежуток 20), справа не заходит под шеврон.
   Цвет text-muted отделяет ответ от вопроса; длина строки ограничена. Ответ проявляется за 160ms
   только по прозрачности — без сдвигов и без анимации высоты, соседние блоки не дёргаются. */

.kz-redesign .kz-home-faq-answer {
    padding: 0 36px var(--kz-space-card-padding) 44px;
}

.kz-redesign .kz-home-faq-details[open] > .kz-home-faq-answer {
    animation: kz-home-faq-reveal 160ms var(--kz-ease-out);
}

@keyframes kz-home-faq-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.kz-redesign .kz-home-faq-answer p {
    max-width: 64ch;
    margin: 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    font-weight: var(--kz-type-body-weight);
    line-height: var(--kz-type-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-home-faq-answer a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.kz-redesign .kz-home-faq-answer a:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-faq-question,
    .kz-redesign .kz-home-faq-question::after {
        transition: none;
    }

    .kz-redesign .kz-home-faq-details[open] > .kz-home-faq-answer {
        animation: none;
    }
}

/* До 899px — одна колонка, как у «О компании»: метка и заголовок над списком */

@media (max-width: 899px) {
    .kz-redesign .kz-home-faq-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--kz-space-lg);
    }
}

/* Телефон: отступы секций 40px, поля 16px, вопрос 16/24, более узкая колонка номера */

@media (max-width: 767px) {
    .kz-redesign .kz-home-faq {
        padding: 0 0 var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-home-faq-inner {
        padding: var(--kz-space-section-mobile) var(--kz-gutter-mobile) 0;
    }

    .kz-redesign .kz-home-faq-inner::before {
        left: var(--kz-gutter-mobile);
        right: var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-home-faq-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-home-faq-question {
        grid-template-columns: 22px minmax(0, 1fr) 16px;
        column-gap: var(--kz-space-md);
        padding: var(--kz-space-base) 0;
    }

    .kz-redesign .kz-home-faq-num,
    .kz-redesign .kz-home-faq-text,
    .kz-redesign .kz-home-faq-question::after {
        line-height: 24px;
    }

    .kz-redesign .kz-home-faq-question::after {
        height: 24px;
    }

    .kz-redesign .kz-home-faq-text {
        font-size: var(--kz-type-title-product-size);
    }

    .kz-redesign .kz-home-faq-answer {
        padding: 0 28px var(--kz-space-base) 34px;
    }
}

/*
 * «Частые вопросы», фоновые окружности (подэтапы 4.2G.1 и 4.2G.1c). Перенесена только визуальная идея
 * референсов заказчика (upgreight.com, видео Video_2026-09-21_173731 и Video_2026-09-22_131534, снимок
 * 2026-09-22_130405): очень крупные окружности, контур которых собран из мелких равномерных точек,
 * медленно дрейфуют в фоне секции. Заливки, сплошного контура, перекрестий, меток и любых других
 * элементов внутри окружностей нет; изображений, шлейфа, реакции на курсор, пользовательского курсора
 * и чужого кода тоже нет: движение автономное, задано только CSS-анимацией transform, JavaScript
 * и обработчиков событий указателя нет.
 * Каждая окружность — inline SVG с одним <circle fill="none" stroke-linecap="round"> (разметка в
 * templates/kz/main.tpl.php). Точки даёт пунктир: штрих нулевой длины с круглыми концами рисуется
 * кругом диаметром stroke-width, промежуток задаёт шаг. border: dotted не используется: на больших
 * диаметрах браузеры распределяют такие точки неравномерно. Шаг подобран так, чтобы длина окружности
 * 2πr делилась на него нацело, поэтому точки идут ровно и там, где контур замыкается, заметного «шва»
 * нет: браузер измеряет окружность с погрешностью в доли пикселя, глазом она не видна.
 * Слой .kz-home-faq-orbits скрыт от экранных дикторов (aria-hidden в разметке, у каждого SVG тоже),
 * не ловит указатель и касания, лежит под содержимым (z-index 0 против 1 у .kz-home-faq-inner) и сам
 * обрезает окружности по границе секции. Окружности привязаны к верху секции, поэтому открытие ответов,
 * которое удлиняет секцию вниз, их не сдвигает и анимацию не перезапускает; на высоту секции слой
 * не влияет.
 * Цвет точек — graphite #2B2D41 с долей прозрачности 24–28%: на smoke это тихий серый пунктир низкого
 * контраста, под текстом он чтению не мешает.
 * Окружностей две — «b» и «c». Третья, «a», стояла слева над заголовочной колонкой и была привязана к
 * левому краю секции; на широких экранах (около 2560px) она оставалась в пустом поле слева от содержимого,
 * поэтому по замечанию заказчика убрана вместе со своей анимацией.
 */

.kz-redesign .kz-home-faq-orbits {
    --kz-faq-orbit-dot: rgba(43, 45, 65, 0.28);
    --kz-faq-orbit-dot-soft: rgba(43, 45, 65, 0.24);
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.kz-redesign .kz-home-faq-orbit {
    position: absolute;
    display: block;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* Точка 2px, шаг около 10px. Числа пунктира — в единицах viewBox; на десктопе SVG выводится в размер
   viewBox, и единица равна пикселю. Шаг = 2πr / число точек. */

/* B — самая крупная дуга справа за списком, выходит за правый край и низ секции.
   r 588: длина 3694,51, 369 точек, шаг 10,01223. */

.kz-redesign .kz-home-faq-orbit--b {
    top: 140px;
    right: -460px;
    width: 1180px;
    height: 1180px;
    animation-name: kz-home-faq-orbit-b;
    animation-duration: 36s;
    animation-delay: -21s;
}

.kz-redesign .kz-home-faq-orbit--b circle {
    stroke: var(--kz-faq-orbit-dot);
    stroke-width: 2;
    stroke-dasharray: 0 10.01223;
}

/* C — меньшая окружность между колонками, пунктир чуть тише.
   r 238: длина 1495,40, 150 точек, шаг 9,96932. */

.kz-redesign .kz-home-faq-orbit--c {
    top: 420px;
    left: 30%;
    width: 480px;
    height: 480px;
    animation-name: kz-home-faq-orbit-c;
    animation-duration: 24s;
    animation-delay: -13s;
}

.kz-redesign .kz-home-faq-orbit--c circle {
    stroke: var(--kz-faq-orbit-dot-soft);
    stroke-width: 2;
    stroke-dasharray: 0 9.96932;
}

/* Траектории: у каждой окружности свой маршрут из четырёх точек, 0% и 100% совпадают, поэтому повторный
   старт не виден; ease-in-out на каждом отрезке плавно гасит скорость у точки поворота, резких разворотов
   нет. Сдвиг до 56px и масштаб 0,96–1,05 — на фоне 480–1180px это медленный дрейф, а не перемещение.
   Разные длительности и отрицательные задержки разводят фазы: круги никогда не движутся синхронно,
   а при загрузке уже находятся в середине пути, без заметного старта с места. */

@keyframes kz-home-faq-orbit-b {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(-56px, -30px, 0) scale(1.03);
    }

    50% {
        transform: translate3d(-22px, 38px, 0) scale(0.975);
    }

    75% {
        transform: translate3d(34px, -14px, 0) scale(1.015);
    }
}

@keyframes kz-home-faq-orbit-c {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(42px, -40px, 0) scale(1.05);
    }

    50% {
        transform: translate3d(-36px, -18px, 0) scale(0.96);
    }

    75% {
        transform: translate3d(8px, 34px, 0) scale(1.025);
    }
}

/* Уменьшение движения: окружности остаются на месте, оформление сохраняется */

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-home-faq-orbit {
        animation: none;
    }
}

/* Телефон: те же две окружности, меньше размер и заметность. «c» переходит в правый верхний угол за
   заголовком, «b» остаётся дугой в нижней части списка — окружности не накладываются друг на друга.
   SVG здесь меньше viewBox, поэтому толщина и шаг в единицах viewBox пересчитаны так, чтобы на экране
   точка осталась 2px, а шаг — около 10px: b — масштаб 760/1180, 238 точек; c — масштаб 420/480,
   131 точка. */

@media (max-width: 767px) {
    .kz-redesign .kz-home-faq-orbits {
        opacity: 0.75;
    }

    .kz-redesign .kz-home-faq-orbit--b {
        top: 360px;
        right: -420px;
        width: 760px;
        height: 760px;
    }

    .kz-redesign .kz-home-faq-orbit--b circle {
        stroke-width: 3.1053;
        stroke-dasharray: 0 15.52316;
    }

    .kz-redesign .kz-home-faq-orbit--c {
        top: -150px;
        right: -190px;
        left: auto;
        width: 420px;
        height: 420px;
    }

    .kz-redesign .kz-home-faq-orbit--c circle {
        stroke-width: 2.2857;
        stroke-dasharray: 0 11.41525;
    }
}

@media print {
    .kz-redesign .kz-home-faq-orbits {
        display: none;
    }
}

/*
 * Фирменный футер (подэтап 4.2H). Разметка — блок <footer class="kz-footer"> в templates/kz/index.tpl.php, общий
 * для всех страниц KZ. Композиция взята из футера NEW-TEMPLATE/pergam-kz-design-preview-v3.html: графитовая
 * поверхность с верхней линией белой 14%, контактный блок и три навигационные колонки, нижняя служебная строка.
 * Сетка та же, что у «О компании» и «Частых вопросов», 5/12 + 7/12 с промежутком 48px, поэтому колонки футера
 * стоят под списком вопросов. Legacy-правила footer .info / .bottom / .menu / .phone / .text / .typo из styles.css
 * к новой разметке не относятся: все классы собственные.
 * Последней внутри того же контейнера идёт надпись PERGAM — главный декоративный элемент футера (описана ниже).
 */

.kz-redesign .kz-footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-on-dark-line);
    background: var(--kz-color-graphite);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    font-weight: var(--kz-type-text-14-weight);
    line-height: 22px;
}

.kz-redesign .kz-footer-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-footer-cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: var(--kz-space-xxl);
    row-gap: var(--kz-space-xxl);
    padding: var(--kz-space-xxxl) 0 var(--kz-space-xxl);
}

/* Контактный блок: логотип, телефон, адрес и часы из записи города CMS, обратная связь, дисклеймер */

.kz-redesign .kz-footer-about {
    min-width: 0;
}

/* Инверсный логотип logo-inverse.svg из /templates/kz-assets/logo/ (подэтап 4.2H.2), пропорции 470.5:100: 212px — высота 45px */

.kz-redesign .kz-footer-logo {
    display: block;
    width: 212px;
    max-width: 100%;
    height: auto;
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kz-space-xs);
    margin: 0;
    color: var(--kz-color-on-dark-link);
    font-style: normal;
}

.kz-redesign .kz-footer-phone {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-phone-size);
    font-weight: var(--kz-type-phone-weight);
    line-height: 28px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
}

.kz-redesign .kz-footer-address {
    max-width: 44ch;
    overflow-wrap: break-word;
}

/* «Обратная связь»: legacy-кнопка .popup-link открывает прежнюю форму CMS; выглядит как ссылка на тёмном */

.kz-redesign .kz-footer-feedback {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kz-color-on-dark-link);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    font-weight: var(--kz-type-text-14-weight);
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.kz-redesign .kz-footer-disclaimer {
    max-width: 440px;
    margin: var(--kz-space-lg) 0 0;
    padding: 0;
    color: var(--kz-color-on-dark-subtle);
    font-size: var(--kz-type-caption-size);
    font-weight: var(--kz-type-caption-weight);
    line-height: 18px;
}

/* Навигация: три колонки справа, заголовки 12 в капсе, ссылки 14 белые 80% */

.kz-redesign .kz-footer-nav {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--kz-space-xl) var(--kz-space-lg);
    min-width: 0;
}

.kz-redesign .kz-footer-col {
    min-width: 0;
}

.kz-redesign .kz-footer-heading {
    margin: 0 0 var(--kz-space-md);
    padding: 0;
    color: var(--kz-color-on-dark-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-footer-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-footer-list li::before {
    content: none;
}

.kz-redesign .kz-footer-list li + li {
    margin-top: var(--kz-space-xs);
}

.kz-redesign .kz-footer-list a,
.kz-redesign .kz-footer-list span {
    display: inline-block;
    padding: var(--kz-space-xs) 0;
    color: var(--kz-color-on-dark-link);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-decoration: none;
    overflow-wrap: break-word;
}

/* Текущая страница в меню подвала выводится текстом, без ссылки */

.kz-redesign .kz-footer-list span {
    color: var(--kz-color-on-dark);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-footer-list a:hover,
    .kz-redesign .kz-footer-phone:hover,
    .kz-redesign .kz-footer-feedback:hover {
        color: var(--kz-color-on-dark);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

/* Фокус на тёмной поверхности — белое кольцо 2px с отступом 2px. !important нужен из-за legacy styles.css,
   который снимает outline у кнопок и ссылок */

.kz-redesign .kz-footer a:focus-visible,
.kz-redesign .kz-footer button:focus-visible {
    outline: 2px solid var(--kz-color-on-dark) !important;
    outline-offset: 2px !important;
}

/* Нижняя служебная строка: копирайт и подсказка о сообщении об опечатке */

.kz-redesign .kz-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    padding: var(--kz-space-card-padding) 0;
    border-top: 1px solid var(--kz-color-on-dark-line);
    color: var(--kz-color-on-dark-subtle);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-footer-bottom p {
    margin: 0;
    padding: 0;
}

/*
 * Надпись PERGAM. Настоящий текст шрифтом Unbounded ExtraBold 800 (не изображение и не SVG, логотип буквами не
 * воспроизводится), белый на графите, без контура, тени, градиента, анимации и реакции на курсор.
 * Надпись стоит в том же контейнере 1280px, что и остальное содержимое футера и блоки страницы, после нижней
 * строки; графитовый фон футера при этом остаётся на всю ширину окна. Размер задан в cqw — процентах ширины самой
 * обёртки (container-type: inline-size), у которой нет боковых полей, то есть ширины контента контейнера: слово
 * никогда не шире контейнера и горизонтальной прокрутки не создаёт.
 * Края видимых букв совпадают с краями контента. Для этого отрицательными полями убраны боковые зазоры глифов
 * Unbounded 800, измеренные по пикселям отрисовки: слева у P 0,0625em, справа у M 0,0505em при letter-spacing
 * -0.01em (0,0519em при нуле). Ширина букв слова — 5,493em, поэтому кегль 18.2cqw (на 1280px — 233px, это же
 * верхний предел).
 * Межбуквенный интервал подобран по образцу заказчика: при стартовых -0.04em буквы G и A перекрываются, а R–G
 * и A–M соприкасаются, в образце между всеми буквами есть просвет; поэтому -0.01em (самый узкий просвет G–A
 * 0,02em), а на телефоне 0 — на мелком кегле просвет иначе слипается.
 * Высота прописных 0,7656em, при line-height 0.82 буквы занимают строку почти целиком. Внизу контролируемая
 * обрезка 0,05em (около 4% высоты букв) только внутри обёртки с overflow: hidden; html, body и остальной сайт
 * не обрезаются. Для браузеров без контейнерных единиц запасное значение считается от ширины окна за вычетом
 * полей 48px и возможной полосы прокрутки 16px и упирается в тот же предел 233px, поэтому и на широких экранах
 * слово не шире контейнера. Как надпись уступает место кнопке Bitrix24 на телефоне — в блоке до 767px ниже.
 */

.kz-redesign .kz-footer-wordmark {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden;
    container-type: inline-size;
    padding: var(--kz-space-lg) 0 0;
    color: var(--kz-color-on-dark);
    pointer-events: none;
    user-select: none;
}

.kz-redesign .kz-footer-wordmark span {
    display: block;
    flex: none;
    margin: 0 -0.0505em -0.05em -0.0625em;
    color: var(--kz-color-on-dark);
    font-family: "Unbounded", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
    font-size: clamp(58px, calc((100vw - 64px) * 0.182), 233px);
    font-size: clamp(58px, 18.2cqw, 233px);
    font-weight: 800;
    font-style: normal;
    line-height: 0.82;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-footer a,
    .kz-redesign .kz-footer button {
        transition: none;
    }
}

/* До 899px: контактный блок над навигацией, как у «О компании» и «Частых вопросов» */

@media (max-width: 899px) {
    .kz-redesign .kz-footer-cols {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--kz-space-xl);
    }
}

/* Телефон: поля 16px; «Направления» во всю ширину в две колонки, «Компания» и «Пресс-центр» рядом;
   строки ссылок выше, чтобы по ним было удобно попадать пальцем */

@media (max-width: 767px) {
    .kz-redesign .kz-footer-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-footer-cols {
        padding: var(--kz-space-section-mobile) 0 var(--kz-space-xl);
    }

    .kz-redesign .kz-footer-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--kz-space-xl) var(--kz-space-base);
    }

    .kz-redesign .kz-footer-col--directions {
        grid-column: 1 / -1;
    }

    .kz-redesign .kz-footer-col--directions .kz-footer-list {
        columns: 2;
        column-gap: var(--kz-space-base);
    }

    .kz-redesign .kz-footer-col--directions .kz-footer-list li {
        break-inside: avoid;
    }

    .kz-redesign .kz-footer-list a,
    .kz-redesign .kz-footer-list span {
        padding: 6px 0;
    }

    .kz-redesign .kz-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Кнопка Bitrix24 на телефоне фиксирована в 50–116px от низа окна (66px, отступы 50px). Над надписью оставлена
       полоса 80px: когда страница прокручена до конца, кнопка стоит в этой полосе и не закрывает служебную строку.
       Слово по-прежнему по краям контента (поля 16px), кегль 18.01cqw при letter-spacing 0 (ширина букв 5,5516em),
       и глубже уходит под нижний край (0,075em), поэтому верх букв ниже кнопки на 360–414px. */

    .kz-redesign .kz-footer-wordmark {
        padding: 80px 0 0;
    }

    .kz-redesign .kz-footer-wordmark span {
        margin: 0 -0.0519em -0.075em -0.0625em;
        font-size: clamp(58px, calc((100vw - 32px) * 0.1801), 233px);
        font-size: clamp(58px, 18.01cqw, 233px);
        letter-spacing: 0;
    }
}

@media print {
    .kz-redesign .kz-footer-wordmark {
        display: none;
    }
}

/*
 * Заголовок внутренних страниц (подэтап 5.1A, скорректирован подэтапом 5.1B). .kz-page-title — общий H1: сплошной
 * графит, PT Root UI Medium 500, от 40px на телефоне до 64px на десктопе. Модификатор --thermal с подэтапа 5.1B
 * текст не окрашивает: «тепловизионная» идея оставлена короткой неподвижной линией 3px под заголовком (96px, до
 * 767px — 72px). Линия — пустой псевдоэлемент: в дереве доступности её нет, без анимации и свечения. Цвета
 * градиента линии в карту токенов не входят и больше нигде не применяются. Пока подключён только на «Контактах».
 */

.kz-redesign .kz-page-title {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: clamp(40px, 2.5vw + 28px, 64px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
}

.kz-redesign .kz-page-title--thermal::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    margin-top: var(--kz-space-lg);
    background: linear-gradient(90deg, #24344A 0%, #0B637C 55%, #B54A2A 100%);
}

@media (max-width: 767px) {
    .kz-redesign .kz-page-title--thermal::after {
        width: 72px;
        margin-top: var(--kz-space-base);
    }
}

/*
 * Страница «Контакты», подэтапы 5.1A и 5.1B: templates/kz/page_contacts.tpl.php. Светлый первый экран в общем
 * контейнере 1280px (сетка 5/12 + 7/12, как у «О компании» и футера), «Как нас найти» с картой на smoke, представители
 * редакционным списком на белом, затем общий графитовый футер. Прежний блок .contacts_info не выводится.
 * Hover только внутри @media (hover: hover) and (pointer: fine), входных анимаций и движения нет.
 */

.kz-redesign .kz-contacts {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-contacts-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-contacts-num {
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

/* Первый экран: слева H1, компания с городом и действия, справа четыре группы данных с тонкими разделителями */

.kz-redesign .kz-contacts-hero {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-contacts-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-contacts-hero-main {
    min-width: 0;
}

.kz-redesign .kz-contacts-company {
    margin: var(--kz-space-lg) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-lead-size);
    font-weight: var(--kz-type-lead-weight);
    line-height: var(--kz-type-lead-line);
}

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

.kz-redesign .kz-contacts-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--kz-space-base);
    margin: var(--kz-space-sm) 0 0;
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-contacts-cities a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--kz-color-primary);
    text-decoration: none;
}

.kz-redesign .kz-contacts-cities a.active {
    color: var(--kz-color-graphite);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.kz-redesign .kz-contacts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-md);
    margin: var(--kz-space-xl) 0 0;
}

.kz-redesign .kz-contacts-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid transparent;
    border-radius: var(--kz-radius-control);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.kz-redesign .kz-contacts-btn--primary {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
}

.kz-redesign .kz-contacts-btn--primary:active {
    border-color: var(--kz-color-primary-active);
    background: var(--kz-color-primary-active);
}

.kz-redesign .kz-contacts-btn--secondary {
    border-color: var(--kz-color-graphite);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-contacts-btn--secondary:active {
    background: var(--kz-color-line);
}

.kz-redesign .kz-contacts-btn-icon {
    flex: none;
    width: 14px;
    height: 15px;
    color: currentColor;
}

/* Legacy styles.css снимает обводку у button с !important, поэтому кольцо фокуса задано с тем же весом */

.kz-redesign .kz-contacts-btn:focus-visible,
.kz-redesign .kz-contacts a:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

/* Данные: «Телефон», «Почта», «Время работы», «Адрес» — две колонки, линии line сверху и под каждой группой */

.kz-redesign .kz-contacts-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kz-space-xxl);
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-contacts-fact {
    min-width: 0;
    padding: var(--kz-space-lg) 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-contacts-fact dt,
.kz-redesign .kz-contacts-address dt {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-contacts-fact dd {
    margin: 0;
}

.kz-redesign .kz-contacts-fact-main {
    font-size: var(--kz-type-lead-size);
    font-weight: 500;
    line-height: 26px;
    overflow-wrap: anywhere;
}

.kz-redesign .kz-contacts-fact-main + .kz-contacts-fact-main {
    margin-top: var(--kz-space-xs);
}

.kz-redesign .kz-contacts-fact-address {
    font-weight: 400;
    overflow-wrap: break-word;
}

.kz-redesign .kz-contacts-fact-note {
    margin: var(--kz-space-xs) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-contacts-phone {
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-phone-size);
    font-weight: var(--kz-type-phone-weight);
    line-height: 28px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Ссылки телефона и почты: primary без подчёркивания, при наведении подчёркивание 1px; высота строки не меньше 24px */

.kz-redesign .kz-contacts-fact a,
.kz-redesign .kz-contacts-address a,
.kz-redesign .kz-contacts-person-body a,
.kz-redesign .kz-contacts-person-links a,
.kz-redesign .kz-contacts-page-text a {
    color: var(--kz-color-primary);
    text-decoration: none;
}

/* «Как нас найти»: адреса из CMS слева, существующая Яндекс-карта справа; фон smoke */

.kz-redesign .kz-contacts-location {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-contacts-location-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-contacts-location--no-map .kz-contacts-location-grid {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-contacts-location-text {
    min-width: 0;
}

.kz-redesign .kz-contacts-h2 {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
}

.kz-redesign .kz-contacts-address {
    margin: var(--kz-space-lg) 0 0;
    padding: 0;
}

.kz-redesign .kz-contacts-address > div {
    padding: var(--kz-space-base) 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-contacts-address > div:last-child {
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-contacts-address dd {
    margin: 0;
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-contacts-address dd p {
    margin: 0;
}

.kz-redesign .kz-contacts-address dd p + p {
    margin-top: var(--kz-space-sm);
}

/* Карта: контейнер #contacts-map прежний, Яндекс.Карта строится в нём скриптом scripts.js; радиус 4 (подэтап 5.1B),
   без тени и цветовых фильтров */

.kz-redesign .kz-contacts-map {
    box-sizing: border-box;
    height: 440px;
    overflow: hidden;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

/* Представители (подэтап 5.1B): редакционный список вместо карточек. От 1280px заголовок группы слева на 3/12,
   список справа на 9/12 (на 1024–1279px — 4/12 и 8/12, подэтап 5.1B.1); строка — фото 64px, имя и описание из CMS,
   телефон и почта. Линия line над списком и под каждой строкой, как у групп данных первого экрана; рамок, фоновых
   плашек и сетки карточек нет */

.kz-redesign .kz-contacts-people-area {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-contacts-team {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--kz-space-lg) var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-contacts-team + .kz-contacts-team {
    margin-top: var(--kz-space-xxxl);
    padding-top: var(--kz-space-xxxl);
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-contacts-people {
    min-width: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-contacts-person {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--kz-space-lg);
    align-items: start;
    min-width: 0;
    margin: 0;
    padding: var(--kz-space-lg) 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-contacts-person-photo {
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-smoke);
}

/* Если файл фото недоступен, вместо текста alt и значка битой картинки остаётся пустая подложка smoke; alt для
   скринридера сохраняется */

.kz-redesign .kz-contacts-person-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent;
}

.kz-redesign .kz-contacts-person-body {
    min-width: 0;
}

.kz-redesign .kz-contacts-person-name {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-contacts-person-role {
    margin: var(--kz-space-xs) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    overflow-wrap: break-word;
}

.kz-redesign .kz-contacts-person-role p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-contacts-person-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    font-size: var(--kz-type-text-14-size);
    line-height: 24px;
}

.kz-redesign .kz-contacts-person-links a {
    overflow-wrap: anywhere;
}

.kz-redesign .kz-contacts-person-phone {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-contacts-person-phone a {
    display: inline-block;
    font-size: var(--kz-type-body-size);
    white-space: nowrap;
}

/* Текст страницы города из CMS ($selected_city['page']), если он заполнен */

.kz-redesign .kz-contacts-page-text {
    max-width: 64ch;
    margin: var(--kz-space-xxxl) 0 0;
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-contacts-people-area .kz-contacts-page-text:first-child {
    margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-contacts-btn--primary:hover {
        border-color: var(--kz-color-primary-hover);
        background: var(--kz-color-primary-hover);
        color: var(--kz-color-paper);
    }

    .kz-redesign .kz-contacts-btn--secondary:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-contacts-fact a:hover,
    .kz-redesign .kz-contacts-address a:hover,
    .kz-redesign .kz-contacts-person-body a:hover,
    .kz-redesign .kz-contacts-person-links a:hover,
    .kz-redesign .kz-contacts-page-text a:hover,
    .kz-redesign .kz-contacts-cities a:not(.active):hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

/* 1024–1279px (подэтап 5.1B.1): колонка заголовка представителей 4/12 вместо 3/12. При 3/12 она уже 249px до
   ширины окна 1092px, и «Помогаем вашему бизнесу расти в Казахстане» ломался на четыре строки с одиноким «расти» */

@media (max-width: 1279px) {
    .kz-redesign .kz-contacts-team {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-contacts-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-contacts-team {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 899px) {
    .kz-redesign .kz-contacts-location-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-contacts-map {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-contacts-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-contacts-hero,
    .kz-redesign .kz-contacts-location,
    .kz-redesign .kz-contacts-people-area {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-contacts-company {
        margin-top: var(--kz-space-base);
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-contacts-actions {
        margin-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-contacts-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-contacts-team + .kz-contacts-team {
        margin-top: var(--kz-space-section-mobile);
        padding-top: var(--kz-space-section-mobile);
    }

    /* Телефон: строка из двух колонок — фото 56px и столбец «имя, описание, контакты»; ссылки телефона и почты
       с активной областью 44px по высоте */

    .kz-redesign .kz-contacts-team {
        row-gap: var(--kz-space-base);
    }

    .kz-redesign .kz-contacts-person {
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: var(--kz-space-base);
        padding: var(--kz-space-card-padding) 0 var(--kz-space-md);
    }

    .kz-redesign .kz-contacts-person-photo {
        grid-row: span 2;
        width: 56px;
        height: 56px;
    }

    .kz-redesign .kz-contacts-person-links {
        grid-column: 2;
        margin-top: var(--kz-space-xs);
    }

    .kz-redesign .kz-contacts-person-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .kz-redesign .kz-contacts-page-text {
        margin-top: var(--kz-space-section-mobile);
    }
}

@media (max-width: 575px) {
    .kz-redesign .kz-contacts-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-contacts-fact {
        padding: var(--kz-space-base) 0;
    }

    .kz-redesign .kz-contacts-actions .kz-contacts-btn {
        flex: 1 1 100%;
    }

    .kz-redesign .kz-contacts-map {
        height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-contacts-btn {
        transition: none;
    }
}

@media print {
    .kz-redesign .kz-contacts-map,
    .kz-redesign .kz-contacts-actions {
        display: none;
    }
}

/*
 * Страница «О компании», подэтапы 5.2A и 5.2B: templates/kz/page_about.tpl.php, знак-диафрагма, карта и список
 * стран — kz-about.js. Поверхности: светлый первый экран (H1 .kz-page-title, введение из первого абзаца CMS,
 * навигация по разделам), «Оборудование для промышленной безопасности» на smoke со знаком-диафрагмой, «Почему мы»
 * на белом, «Эксперты» на smoke, «География» на белом, затем общий футер. Карточек-плашек нет: группы разделены
 * линиями line и интервалами. Hover только внутри @media (hover: hover) and (pointer: fine). Входных анимаций
 * и декоративного движения нет, знак-диафрагма неподвижен.
 */

.kz-redesign .kz-about {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-about-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

/* Переход по навигации: заголовок раздела не прилипает к краю окна (шапка не липкая, запас 24px) */

.kz-redesign .kz-about [id^="page_anchor"] {
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-about-h2 {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
    text-wrap: balance;
}

/* «ПЕРГАМ-КАЗАХСТАН» не разрывается по дефису, пока помещается в строку (от 480px при кегле 40px);
   уже этого перенос по дефису — иначе название уходит за край и обрезается legacy .wrap { overflow-x: hidden } */

@media (min-width: 480px) {
    .kz-redesign .kz-about-nowrap {
        white-space: nowrap;
    }
}

/* Ссылки в тексте CMS и описаниях: primary, подчёркнуты всегда, как требует DESIGN.md для ссылок в тексте */

.kz-redesign .kz-about-lead a,
.kz-redesign .kz-about-text a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Первый экран: H1, введение слева 7/12, навигация по разделам справа */

.kz-redesign .kz-about-hero {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--kz-space-xxl);
    align-items: start;
    margin-top: var(--kz-space-xl);
}

.kz-redesign .kz-about-lead p {
    max-width: 60ch;
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-about-nav {
    justify-self: end;
    width: 100%;
    max-width: 400px;
}

.kz-redesign .kz-about-nav ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-about-nav li {
    margin: 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-about-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base);
    min-height: 48px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}

/* Стрелка: общая маска стрелок редизайна, в навигации по разделам повёрнута вниз */

.kz-redesign .kz-about-nav a::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transform: rotate(90deg);
}

/* «Оборудование для промышленной безопасности»: заголовок и знак-диафрагма слева 5/12, текст CMS справа 7/12 */

.kz-redesign .kz-about-intro {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-about-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-about-split-head {
    min-width: 0;
}

/* Знак-диафрагма: геометрия круглого знака PERGAM Kazakhstan в цветах страницы — лепестки line с просветами
   цвета фона, шестигранник primary. Цвета логотипа (#00AFCA, #FEC50C) по DESIGN.md принадлежат только файлам
   логотипа и здесь не используются. Знак неподвижен: однократное закрытие диафрагмы при прокрутке проверено
   в 5.2B и снято — на обычных окнах знак виден сразу при загрузке, а при проигрыше отвлекал от текста. */

.kz-redesign .kz-about-iris {
    display: block;
    width: 200px;
    height: 200px;
    margin-top: var(--kz-space-xl);
}

.kz-redesign .kz-about-iris-blade {
    fill: var(--kz-color-line);
    stroke: var(--kz-color-smoke);
    stroke-width: 0.6;
    stroke-linejoin: round;
}

.kz-redesign .kz-about-iris-core {
    fill: var(--kz-color-primary);
}

.kz-redesign .kz-about-text {
    max-width: 68ch;
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-about-text p {
    margin: 0 0 var(--kz-space-base);
}

.kz-redesign .kz-about-text > :last-child {
    margin-bottom: 0;
}

/* «Почему мы»: заголовок слева 5/12 (та же вертикальная ось, что у соседних разделов), справа шесть фактов
   в две колонки с линиями, без карточек */

.kz-redesign .kz-about-why {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-about-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-about-why-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kz-space-xxl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-about-why-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--kz-space-card-padding);
    align-items: start;
    min-width: 0;
    margin: 0;
    padding: var(--kz-space-lg) 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-about-why-item:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-about-why-icon {
    display: block;
    width: 48px;
    height: 48px;
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-about-why-name,
.kz-redesign .kz-about-org-name {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 24px;
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-transform: none;
}

.kz-redesign .kz-about-nobr {
    white-space: nowrap;
}

.kz-redesign .kz-about-why-desc {
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    line-height: 24px;
}

/* «Эксперты НК»: заголовок и пояснение слева, справа редакционный список обществ; логотипы в исходных цветах */

.kz-redesign .kz-about-experts {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-about-note {
    max-width: 44ch;
    margin: var(--kz-space-base) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-about-orgs {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-about-org {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--kz-space-lg);
    align-items: center;
    margin: 0;
    padding: var(--kz-space-card-padding) 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-about-org-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 112px;
    height: 80px;
    padding: var(--kz-space-sm);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-about-org-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.kz-redesign .kz-about-org-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name site" "desc site";
    column-gap: var(--kz-space-lg);
    align-items: center;
    min-width: 0;
}

.kz-redesign .kz-about-org-name {
    grid-area: name;
}

.kz-redesign .kz-about-org-desc {
    grid-area: desc;
    margin: var(--kz-space-xs) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-about-org-site {
    grid-area: site;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* «География проектов» на белом. Основа — список стран на нативных <details>: без JavaScript он открывается мышью,
   касанием и клавиатурой, проект открытой страны — под её названием. Маркер у названия повторяет точку карты.
   Карта — наглядная схема: точки стоят по процентным координатам CMS для плоской map.svg (не широта и долгота),
   выбранная страна — синяя точка с кольцом и подписью. С JavaScript от 1024px (класс is-panel) список становится
   указателем стран справа, а проект открытой страны — панелью под картой; касанием точки карты не выбираются. */

.kz-redesign .kz-about-geo {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-about-geo-hint {
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

/* «…или точку на карте» — только когда точки кликабельны: есть JS и точный указатель */

.kz-redesign .kz-about-geo-hint-map {
    display: none;
}

.kz-redesign .kz-about-geo-grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--kz-space-xxl);
    align-items: start;
    margin-top: var(--kz-space-xl);
}

/* Карта не липкая: legacy .wrap { overflow: hidden } делает обёртку контейнером прокрутки, и position: sticky
   (так было записано в 5.2A) фактически не срабатывал */

.kz-redesign .kz-about-geo-map {
    position: relative;
    min-width: 0;
}

.kz-redesign .kz-about-geo-map img {
    display: block;
    width: 100%;
    height: auto;
}

/* Точка: 12px с белым кантом 2px (видимое ядро 8px) — тот же графит, что у маркера в списке */

.kz-redesign .kz-about-geo-point {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--kz-color-paper);
    border-radius: 50%;
    background: var(--kz-color-text-muted);
    pointer-events: none;
}

.kz-redesign .kz-about-geo-point.is-preview {
    z-index: 2;
    background: var(--kz-color-primary);
}

.kz-redesign .kz-about-geo .kz-about-geo-point.is-active {
    z-index: 3;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: var(--kz-color-primary);
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 0;
}

/* Подпись выбранной (или наведённой) страны у точки: графитовая плашка справа от точки,
   у правого края карты — слева (класс is-left ставит kz-about.js) */

.kz-redesign .kz-about-geo-label {
    position: absolute;
    z-index: 4;
    padding: var(--kz-space-xs) var(--kz-space-sm);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-graphite);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-small-size);
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(16px, -50%);
}

.kz-redesign .kz-about-geo-label.is-left {
    transform: translate(calc(-100% - 16px), -50%);
}

.kz-redesign .kz-about-geo-label[hidden] {
    display: none;
}

.kz-redesign .kz-about-geo-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-about-geo-list > li {
    margin: 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-about-geo-summary {
    display: flex;
    align-items: center;
    gap: var(--kz-space-md);
    min-height: 48px;
    padding: 0 var(--kz-space-md);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
    list-style: none;
    cursor: pointer;
}

.kz-redesign .kz-about-geo-summary::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-about-geo-country {
    flex: 1 1 auto;
    min-width: 0;
}

/* Маркер страны: рамка 18px не меняется, поэтому название не сдвигается при выборе */

.kz-redesign .kz-about-geo-marker {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
}

.kz-redesign .kz-about-geo-marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--kz-color-text-muted);
}

/* Шеврон — тот же, что у «Частых вопросов» главной; у открытой страны повёрнут на 180° */

.kz-redesign .kz-about-geo-summary::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

/* Выбранная страна: подложка primary-soft на всю строку (в аккордеоне — вместе с проектом),
   название primary, маркер — синяя точка с кольцом, как выбранная точка карты */

.kz-redesign .kz-about-geo-item[open] {
    background: var(--kz-color-primary-soft);
}

.kz-redesign .kz-about-geo-item[open] .kz-about-geo-summary {
    color: var(--kz-color-primary);
}

.kz-redesign .kz-about-geo-item[open] .kz-about-geo-summary::after {
    transform: rotate(180deg);
}

.kz-redesign .kz-about-geo-item[open] .kz-about-geo-marker::before {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--kz-color-primary);
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Проект под названием: слева по линии названия (12 + 18 + 12px), фото над текстом */

.kz-redesign .kz-about-geo-body {
    padding: var(--kz-space-xs) var(--kz-space-md) var(--kz-space-card-padding) 42px;
}

/* Фото точки из CMS (вариант normal/, 260px): не растягивается шире исходника */

.kz-redesign .kz-about-geo-thumb {
    max-width: 260px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: 0 0 var(--kz-space-md);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-about-geo-thumb[hidden] {
    display: none;
}

/* Без JavaScript фото не загрузится (legacy .lozad: только data-src) — пустую рамку не показываем */

.kz-redesign .kz-about-geo:not(.is-ready) .kz-about-geo-thumb {
    display: none;
}

.kz-redesign .kz-about-geo-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent;
}

.kz-redesign .kz-about-geo-text {
    min-width: 0;
}

/* Название страны над текстом нужно только в панели под картой; в списке название уже над проектом */

.kz-redesign .kz-about-geo-title {
    display: none;
}

.kz-redesign .kz-about-geo-desc {
    max-width: 60ch;
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-about-geo-desc p {
    margin: 0;
}

.kz-redesign .kz-about-geo-close {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kz-color-primary);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

.kz-redesign .kz-about-geo-close[hidden] {
    display: none;
}

/* Панель под картой (JS, от 1024px). Проект открытой страны остаётся в разметке внутри своего <details> —
   порядок чтения и фокуса не меняется, — а на экране выводится в левой колонке под картой. Верх панели
   (высота карты) и минимальную высоту сетки задаёт kz-about.js */

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-grid {
    position: relative;
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-summary::after {
    display: none;
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-item[open] .kz-about-geo-summary {
    cursor: default;
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-body {
    position: absolute;
    top: calc(var(--kz-about-geo-map-h, 0px) + var(--kz-space-xl));
    left: 0;
    display: flex;
    gap: var(--kz-space-lg);
    align-items: flex-start;
    box-sizing: border-box;
    width: calc((100% - var(--kz-space-xxl)) * 8 / 12);
    padding: var(--kz-space-lg) 0 0;
    border-top: 1px solid var(--kz-color-line);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-thumb {
    flex: none;
    width: 260px;
    margin: 0;
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-text {
    flex: 1 1 auto;
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-title {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
}

.kz-redesign .kz-about-geo.is-panel .kz-about-geo-close {
    display: none;
}

/* Фокус: кольцо 2px primary с отступом 2px; у button и summary с !important из-за legacy-сброса outline.
   У строки страны кольцо внутри строки, чтобы не наезжать на соседние строки списка */

.kz-redesign .kz-about a:focus-visible,
.kz-redesign .kz-about button:focus-visible,
.kz-redesign .kz-about summary:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-about .kz-about-geo-summary:focus-visible {
    outline-offset: -2px !important;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-about-nav a:hover,
    .kz-redesign .kz-about-geo-summary:hover {
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-about-geo-summary:hover .kz-about-geo-marker::before {
        background: var(--kz-color-primary);
    }

    .kz-redesign .kz-about-org-site:hover,
    .kz-redesign .kz-about-geo-close:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-about-lead a:hover,
    .kz-redesign .kz-about-text a:hover {
        color: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-about-geo.is-ready .kz-about-geo-hint-map {
        display: inline;
    }

    /* Указатель стран в панели для мыши — строки 40px; на сенсорных экранах от 1024px остаются 48px */
    .kz-redesign .kz-about-geo.is-panel .kz-about-geo-summary {
        min-height: 40px;
    }

    /* Точки выбираются только мышью и только с JS: kz-about.js ищет ближайшую к курсору точку в радиусе 16px
       и ставит карте класс is-pointing */
    .kz-redesign .kz-about-geo.is-ready .kz-about-geo-map.is-pointing {
        cursor: pointer;
    }
}

/* 1024–1279px: в 7/12 две колонки фактов слишком узкие (около 180px текста) — заголовок над списком */

@media (max-width: 1279px) {
    .kz-redesign .kz-about-why-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-about-hero-grid,
    .kz-redesign .kz-about-split,
    .kz-redesign .kz-about-why-grid,
    .kz-redesign .kz-about-geo-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-about-nav {
        justify-self: stretch;
        max-width: none;
    }

    /* Знак-диафрагма справа от заголовка, 112px */
    .kz-redesign .kz-about-intro .kz-about-split-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-about-iris {
        flex: none;
        width: 112px;
        height: 112px;
        margin-top: 0;
    }
}

/* 768–1023px: в аккордеоне фото слева от текста */

@media (min-width: 768px) and (max-width: 1023px) {
    .kz-redesign .kz-about-geo-body {
        display: flex;
        gap: var(--kz-space-lg);
        align-items: flex-start;
    }

    .kz-redesign .kz-about-geo-thumb {
        flex: none;
        width: 260px;
        margin: 0;
    }

    .kz-redesign .kz-about-geo-text {
        flex: 1 1 auto;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-about-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-about-hero,
    .kz-redesign .kz-about-intro,
    .kz-redesign .kz-about-why,
    .kz-redesign .kz-about-experts,
    .kz-redesign .kz-about-geo {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-about-hero-grid {
        margin-top: var(--kz-space-lg);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-about-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-about-split,
    .kz-redesign .kz-about-why-grid,
    .kz-redesign .kz-about-geo-grid {
        gap: var(--kz-space-lg);
    }

    /* На телефоне свободной колонки нет: раздел — заголовок и текст, знак не выводится */
    .kz-redesign .kz-about-iris {
        display: none;
    }

    .kz-redesign .kz-about-note {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-about-why-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-about-why-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: var(--kz-space-base);
        padding: var(--kz-space-card-padding) 0;
    }

    .kz-redesign .kz-about-why-item:nth-last-child(2) {
        border-bottom: 0;
    }

    .kz-redesign .kz-about-why-icon {
        width: 40px;
        height: 40px;
    }

    .kz-redesign .kz-about-org {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: var(--kz-space-base);
        align-items: start;
    }

    .kz-redesign .kz-about-org-logo {
        width: 80px;
        height: 60px;
        padding: 6px;
    }

    .kz-redesign .kz-about-org-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "name" "desc" "site";
    }

    .kz-redesign .kz-about-org-site {
        justify-self: start;
        min-height: 44px;
    }

    .kz-redesign .kz-about-geo-summary {
        min-height: 52px;
    }

    .kz-redesign .kz-about-geo-close {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-about-geo-summary::after {
        transition: none;
    }
}

@media print {
    .kz-redesign .kz-about-nav,
    .kz-redesign .kz-about-iris,
    .kz-redesign .kz-about-geo-point,
    .kz-redesign .kz-about-geo-label,
    .kz-redesign .kz-about-geo-close {
        display: none;
    }
}

/*
 * Страница «Сервисный центр», подэтап 5.3A: templates/kz/page_service.tpl.php, раскрытие строк — kz-service.js.
 * Поверхности: светлый первый экран (H1 .kz-page-title--thermal, лид CMS, основная кнопка обращения, фото сервиса),
 * «Услуги сервисного центра» на smoke — матрица услуг как белая ведомость (таблица), «Обращение» на белом, затем
 * общий футер. Без карточек и декоративных иконок: строки ведомости разделены линиями line. Движения нет, кроме
 * поворота шеврона раскрытой строки (состояние), при prefers-reduced-motion — без поворота-анимации.
 */

.kz-redesign .kz-service {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-service-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-service-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.kz-redesign .kz-service [id^="service-"],
.kz-redesign .kz-service #services {
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-service-h2 {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
    text-wrap: balance;
}

/* Первый экран: слева 7/12 H1, лид CMS и кнопка обращения, справа 5/12 фото сервисного центра (баннер CMS «top») */

.kz-redesign .kz-service-hero {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-service-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--kz-space-xxl);
    align-items: center;
}

.kz-redesign .kz-service-hero-grid--text {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-service-hero-text {
    min-width: 0;
}

.kz-redesign .kz-service-title {
    text-wrap: balance;
}

.kz-redesign .kz-service-lead {
    max-width: 60ch;
    margin: var(--kz-space-xl) 0 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

/* Все пять услуг в первом экране: ссылки на строки ведомости, стрелка вниз — как в навигации «О компании» */

.kz-redesign .kz-service-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-xs) var(--kz-space-lg);
    margin: var(--kz-space-lg) 0 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-service-index li {
    margin: 0;
}

.kz-redesign .kz-service-index a {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-height: 32px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}

.kz-redesign .kz-service-index a::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transform: rotate(90deg);
}

/* Основная кнопка: заливка primary, стрелка 16px (DESIGN.md, Shapes); общий размер и шрифт — .kz-btn */

.kz-redesign .kz-service-cta {
    gap: var(--kz-space-sm);
    margin-top: var(--kz-space-xl);
    border: 0;
    background: var(--kz-color-primary);
    color: var(--kz-color-on-dark);
}

.kz-redesign .kz-service-cta::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-service-cta:active {
    background: var(--kz-color-primary-active);
    color: var(--kz-color-on-dark);
}

/* Фото — панорама 1920×490: кадр 3:2 сдвинут влево (36%), чтобы в нём были надпись «ПЕРГАМ» на куртке и прибор */

.kz-redesign .kz-service-hero-photo {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-service-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 36% 50%;
    color: transparent;
}

/* Подстраницы сервиса: строка ссылок под первым экраном, выводится, только если есть хотя бы одна подстраница */

.kz-redesign .kz-service-subnav {
    padding: 0 0 var(--kz-space-xl);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-service-subnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin: 0;
    padding: var(--kz-space-base) 0 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-service-subnav li {
    margin: 0;
}

.kz-redesign .kz-service-subnav a,
.kz-redesign .kz-service-subnav span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}

.kz-redesign .kz-service-subnav a {
    color: var(--kz-color-primary);
}

/* «Услуги сервисного центра»: матрица — белая ведомость на smoke. Колонки: услуга 22%, что входит 30%,
   кто и где выполняет 26%, документ и условия 22%. Пустая ячейка — «—» и «не указано» для экранных дикторов */

.kz-redesign .kz-service-services {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-service-matrix {
    width: 100%;
    margin: var(--kz-space-xl) 0 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-service-matrix th,
.kz-redesign .kz-service-matrix td {
    box-sizing: border-box;
    padding: var(--kz-space-card-padding) var(--kz-space-lg);
    border: 0;
    background: none;
    text-align: left;
    vertical-align: top;
}

.kz-redesign .kz-service-matrix thead th {
    padding-top: var(--kz-space-base);
    padding-bottom: var(--kz-space-base);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-service-matrix thead th:nth-child(1) {
    width: 22%;
}

.kz-redesign .kz-service-matrix thead th:nth-child(2) {
    width: 30%;
}

.kz-redesign .kz-service-matrix thead th:nth-child(3) {
    width: 26%;
}

.kz-redesign .kz-service-matrix thead th:nth-child(4) {
    width: 22%;
}

.kz-redesign .kz-service-group {
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-service-name {
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-title-card-size);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: var(--kz-type-heading-3-tracking);
}

.kz-redesign .kz-service-cell {
    font-size: var(--kz-type-text-14-size);
    line-height: 22px;
}

.kz-redesign .kz-service-cell strong {
    font-weight: 500;
}

.kz-redesign .kz-service-empty {
    color: var(--kz-color-text-muted);
}

/* Программы обучения — прямо в ячейке «Что входит» строки обучения */

.kz-redesign .kz-service-cell .kz-service-programs-title {
    display: block;
    margin: var(--kz-space-sm) 0 0;
    font-weight: 500;
}

.kz-redesign .kz-service-cell .kz-service-programs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-service-cell .kz-service-programs li {
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-service-cell .kz-service-programs li::before {
    content: none;
}

.kz-redesign .kz-service-cell .kz-service-programs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Кнопка раскрытия строки (ставит kz-service.js — название услуги внутри, шеврон как у «Частых вопросов») */

.kz-redesign .kz-service-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kz-space-sm);
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}

.kz-redesign .kz-service-chevron {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-service-group.is-open .kz-service-chevron {
    transform: rotate(180deg);
}

.kz-redesign .kz-service-group.is-open .kz-service-name {
    color: var(--kz-color-primary);
}

.kz-redesign .kz-service-matrix.is-ready .kz-service-group--detail .kz-service-row {
    cursor: pointer;
}

/* Подробности строки: фото под колонкой «Услуга», текст CMS или шаблона — точно с колонки «Что входит».
   Ячейка подробностей шире сетки на поля 2 × 24px, поэтому ширина фото: 22% сетки − (48px − 22% от 48px) = 22% − 37.44px */

.kz-redesign .kz-service-matrix .kz-service-detail td {
    padding-top: 0;
    padding-bottom: var(--kz-space-xl);
}

.kz-redesign .kz-service-detail[hidden] {
    display: none;
}

.kz-redesign .kz-service-detail-grid {
    display: grid;
    grid-template-columns: calc(22% - 37.44px) minmax(0, 1fr);
    column-gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-service-photo {
    grid-column: 1;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-service-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    color: transparent;
}

.kz-redesign .kz-service-text {
    grid-column: 2;
    max-width: 68ch;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-service-text p {
    margin: 0 0 var(--kz-space-md);
}

.kz-redesign .kz-service-text ul {
    margin: 0 0 var(--kz-space-md);
    padding: 0 0 0 var(--kz-space-card-padding);
    list-style: disc outside;
}

.kz-redesign .kz-service-text li {
    margin: 0 0 var(--kz-space-xs);
    padding: 0;
}

.kz-redesign .kz-service-text li::before {
    content: none;
}

.kz-redesign .kz-service-text li::marker {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-service-text > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-service-text a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Текст CMS вне разделов (если в CMS появится что-то кроме блоков услуг) — после ведомости, как есть */

.kz-redesign .kz-service-rest {
    margin-top: var(--kz-space-xl);
}

/* «Обращение в сервисный центр»: заголовок и пояснение слева, кнопка справа */

.kz-redesign .kz-service-contact {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-service-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kz-space-lg);
    justify-items: start;
}

.kz-redesign .kz-service-contact-text {
    max-width: 60ch;
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-service-contact .kz-service-cta {
    margin-top: 0;
}

/* Фокус: кольцо 2px primary с отступом 2px; у button с !important из-за legacy-сброса outline */

.kz-redesign .kz-service a:focus-visible,
.kz-redesign .kz-service button:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-service-cta:hover {
        background: var(--kz-color-primary-hover);
        color: var(--kz-color-on-dark);
    }

    .kz-redesign .kz-service-matrix.is-ready .kz-service-group--detail .kz-service-row:hover .kz-service-name {
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-service-text a:hover,
    .kz-redesign .kz-service-subnav a:hover,
    .kz-redesign .kz-service-index a:hover,
    .kz-redesign .kz-service-cell .kz-service-programs a:hover {
        color: var(--kz-color-primary-hover);
    }
}

/* До 1023px: ведомость строками-блоками. Роли таблицы заданы в разметке явно, поэтому смена display не лишает
   экранные дикторы структуры. Подписи колонок — в каждой ячейке (data-label), шапка таблицы скрыта визуально */

@media (max-width: 1023px) {
    .kz-redesign .kz-service-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-service-hero-photo {
        max-width: 720px;
        aspect-ratio: 16 / 9;
    }

    .kz-redesign .kz-service-matrix,
    .kz-redesign .kz-service-matrix tbody,
    .kz-redesign .kz-service-matrix tr,
    .kz-redesign .kz-service-matrix th,
    .kz-redesign .kz-service-matrix td {
        display: block;
    }

    .kz-redesign .kz-service-matrix thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .kz-redesign .kz-service-matrix .kz-service-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--kz-space-base) var(--kz-space-lg);
        padding: var(--kz-space-card-padding) var(--kz-space-card-padding);
    }

    .kz-redesign .kz-service-matrix .kz-service-row th,
    .kz-redesign .kz-service-matrix .kz-service-row td {
        padding: 0;
    }

    .kz-redesign .kz-service-matrix .kz-service-name {
        grid-column: 1 / -1;
    }

    .kz-redesign .kz-service-matrix .kz-service-toggle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-height: 32px;
    }

    .kz-redesign .kz-service-cell::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 var(--kz-space-xs);
        color: var(--kz-color-text-muted);
        font-size: var(--kz-type-label-size);
        font-weight: var(--kz-type-label-weight);
        line-height: 16px;
        letter-spacing: var(--kz-type-label-tracking);
        text-transform: uppercase;
    }

    .kz-redesign .kz-service-matrix .kz-service-detail td {
        padding: 0 var(--kz-space-card-padding) var(--kz-space-lg);
    }

    .kz-redesign .kz-service-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--kz-space-lg);
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-service-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-service-hero,
    .kz-redesign .kz-service-services,
    .kz-redesign .kz-service-contact {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-service-lead {
        margin-top: var(--kz-space-lg);
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-service-hero-photo {
        aspect-ratio: 16 / 9;
    }

    .kz-redesign .kz-service-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-service-matrix {
        margin-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-service-matrix .kz-service-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-md);
        padding: var(--kz-space-base);
    }

    .kz-redesign .kz-service-matrix .kz-service-toggle {
        min-height: 44px;
        align-items: center;
    }

    /* Название услуги — одной высоты 44px у всех строк: с кнопкой раскрытия и без неё */
    .kz-redesign .kz-service-matrix .kz-service-name {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .kz-redesign .kz-service-chevron {
        margin-top: 0;
    }

    .kz-redesign .kz-service-matrix .kz-service-detail td {
        padding: 0 var(--kz-space-base) var(--kz-space-lg);
    }

    .kz-redesign .kz-service-detail-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-service-photo,
    .kz-redesign .kz-service-text {
        grid-column: 1;
    }

    .kz-redesign .kz-service-photo {
        max-width: 420px;
    }

}

@media (max-width: 575px) {
    .kz-redesign .kz-service-cta {
        width: 100%;
    }

    .kz-redesign .kz-service-contact-grid {
        justify-items: stretch;
    }
}

/* Касание: ссылки услуг первого экрана и программ обучения — не ниже 44px */

@media (pointer: coarse) {
    .kz-redesign .kz-service-index a,
    .kz-redesign .kz-service-cell .kz-service-programs a {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-service-chevron {
        transition: none;
    }
}

@media print {
    .kz-redesign .kz-service-cta,
    .kz-redesign .kz-service-chevron {
        display: none;
    }

    .kz-redesign .kz-service-detail[hidden] {
        display: table-row;
    }
}

/*
 * Форма обращения в сервисный центр, подэтап 5.3B: templates/kz/service.tpl.php — окно Fancybox со страницы
 * «Сервисный центр» и та же форма на странице /service/support/ (там — карточка 880px по центру с полями сайта).
 * Всё ограничено областью .modal.service-form (класс есть только у этой формы; у внутреннего div.form он тоже есть,
 * но без .modal) и кнопкой закрытия Fancybox, которая идёт сразу за ней. Разметку полей, name, action и обработчики
 * scripts.js (ajaxSubmit, nice-select, добавление телефона, выбор файла) не трогаем. Ошибки — по DESIGN.md:
 * графитовая рамка поля 2px, иконка и текст, без отдельного сигнального цвета.
 */

.kz-redesign .modal.service-form {
    position: relative;
    box-sizing: border-box;
    width: 880px;
    max-width: calc(100% - 2 * var(--kz-gutter));
    margin: var(--kz-space-xxl) auto;
    padding: var(--kz-space-xxl) var(--kz-space-xxl) var(--kz-space-xl);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    text-align: left;
}

/* Переменные legacy-формы (styles.css объявляет их на самом .form): правила legacy, которые здесь не переопределены
   (автозаполнение, скругления крайних пунктов списка), берут значения системы KZ */

.kz-redesign .modal.service-form .form {
    --form_border_color: var(--kz-color-line);
    --form_focus_color: var(--kz-color-primary);
    --form_error_color: var(--kz-color-graphite);
    --form_border_radius: var(--kz-radius-control);
    --form_bg_color: var(--kz-color-paper);
    --form_placeholder_color: var(--kz-color-text-muted);
    --form_columns_offset: 0px;
}

.kz-redesign .modal.service-form .modal_title {
    margin: 0 var(--kz-space-xxl) var(--kz-space-xl) 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-transform: none;
    text-wrap: balance;
}

/* Сетка: две колонки по 1fr с промежутком 24px вместо отрицательных полей legacy */

.kz-redesign .modal.service-form .form .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kz-space-lg);
    margin: 0;
}

.kz-redesign .modal.service-form .form .columns > * {
    width: auto;
    min-width: 0;
    margin: 0;
}

.kz-redesign .modal.service-form .form .line {
    margin: 0 0 var(--kz-space-card-padding);
}

.kz-redesign .modal.service-form .form .label {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
}

/* Поля: 44px, граница line, радиус 4, шрифт 16px (на телефоне без увеличения при фокусе) */

.kz-redesign .modal.service-form .form .input,
.kz-redesign .modal.service-form .form select {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    line-height: 24px;
    transition: none;
}

.kz-redesign .modal.service-form .form textarea.input {
    height: 72px;
    min-height: 72px;
    padding: 10px var(--kz-space-md);
    resize: vertical;
}

.kz-redesign .modal.service-form .form textarea[name="message"] {
    height: 112px;
}

.kz-redesign .modal.service-form .form .input::placeholder {
    color: var(--kz-color-text-muted);
    opacity: 1;
}

.kz-redesign .modal.service-form .form .input:focus,
.kz-redesign .modal.service-form .form select:focus {
    border-color: var(--kz-color-primary);
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: -1px !important;
}

/* Ошибка: графитовая рамка 2px, иконка и текст; первая буква текста — прописная */

.kz-redesign .modal.service-form .form .input.error {
    border-color: var(--kz-color-graphite);
    box-shadow: inset 0 0 0 1px var(--kz-color-graphite);
}

.kz-redesign .modal.service-form p.error {
    position: relative;
    display: block;
    margin: var(--kz-space-sm) 0 0;
    padding: 0 0 0 22px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-small-size);
    font-weight: 500;
    line-height: 19px;
}

.kz-redesign .modal.service-form p.error::first-letter {
    text-transform: uppercase;
}

.kz-redesign .modal.service-form p.error::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.5v4.25' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='8' cy='11.25' r='1' fill='black'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.5v4.25' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='8' cy='11.25' r='1' fill='black'/></svg>") center / 16px 16px no-repeat;
}

/* Выпадающие списки nice-select (scripts.js): поле 44px, шеврон primary, список — всплывающий слой DESIGN.md */

.kz-redesign .modal.service-form .form .nice-select {
    position: relative;
    display: block;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .modal.service-form .form .nice-select .current {
    box-sizing: border-box;
    height: 44px;
    padding: 0 40px 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: 42px;
    transition: none;
}

.kz-redesign .modal.service-form .form .nice-select .current::after {
    top: 0;
    right: var(--kz-space-md);
    bottom: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 0;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    transform: none;
    transform-origin: 50% 50%;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .modal.service-form .form .nice-select.open .current::after {
    transform: rotate(180deg);
}

.kz-redesign .modal.service-form .form .nice-select.open .current {
    border-color: var(--kz-color-primary);
}

.kz-redesign .modal.service-form .form .nice-select:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .modal.service-form .form .nice-select .list {
    top: calc(100% + var(--kz-space-xs));
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: var(--kz-shadow-overlay);
}

.kz-redesign .modal.service-form .form .nice-select.open .list {
    top: calc(100% + var(--kz-space-xs));
}

.kz-redesign .modal.service-form .form .nice-select .list .list_item {
    padding: 10px var(--kz-space-md);
    border-radius: 0;
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: 24px;
    transition: none;
}

.kz-redesign .modal.service-form .form .nice-select .list .list_item.focus {
    background: var(--kz-color-smoke);
    box-shadow: inset 2px 0 0 var(--kz-color-primary);
    color: var(--kz-color-graphite);
}

.kz-redesign .modal.service-form .form .nice-select .list .list_item.selected {
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-primary);
}

/* Телефоны: поле | тип телефона + кнопка 44×44 «добавить» (первая строка) или «удалить» (добавленные строки).
   Значок рисует маска; имя кнопки — aria-label в разметке, у строк, которые клонирует scripts.js, его выставляет
   kz-service.js по положению строки (подэтап 5.3B.1) */

.kz-redesign .modal.service-form .form .wrap-phone-selector {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-sm);
}

.kz-redesign .modal.service-form .form .phone-selector {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.kz-redesign .modal.service-form .form .btn-add-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-primary);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: none;
}

.kz-redesign .modal.service-form .form .phones-lines .columns .btn-add-phone::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .modal.service-form .form .phones-lines .columns:first-child .btn-add-phone::after {
    content: "";
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5v9M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5v9M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .modal.service-form .form .phones-lines > .columns + .columns {
    margin-top: 0;
}

/* scripts.js клонирует первую строку вместе с текстом и рамкой ошибки сервера: они остаются только у первой строки */

.kz-redesign .modal.service-form .form .phones-lines > .columns + .columns p.error {
    display: none;
}

.kz-redesign .modal.service-form .form .phones-lines > .columns + .columns .input.error:not(:focus) {
    border-color: var(--kz-color-line);
    box-shadow: none;
}

/* Файл: поле выбора визуально скрыто, но доступно с клавиатуры; подпись — вторичная кнопка со скрепкой.
   Выбранный файл (scripts.js пишет имя в .file .name) — плашка со скрепкой, именем и кнопкой удаления 44×44 */

.kz-redesign .modal.service-form .form .file-field {
    position: relative;
    max-width: none;
}

.kz-redesign .modal.service-form .form input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 44px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.kz-redesign .modal.service-form .form input[type="file"] + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    box-sizing: border-box;
    width: auto;
    height: 44px;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-graphite);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .modal.service-form .form input[type="file"] + label::before {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .modal.service-form .form input[type="file"]:focus-visible + label,
.kz-redesign .modal.service-form .form input[type="file"]:focus-visible ~ .file.show {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .modal.service-form .form .file {
    box-sizing: border-box;
    gap: var(--kz-space-xs);
    max-width: 100%;
    min-height: 44px;
    padding: 0 0 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .modal.service-form .form .file.show {
    display: inline-flex;
}

.kz-redesign .modal.service-form .form .file::before {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: var(--kz-space-xs);
    background: var(--kz-color-text-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .modal.service-form .form .file .name {
    min-width: 0;
    max-width: none;
    margin: 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-transform: none;
}

.kz-redesign .modal.service-form .form .file .name span,
.kz-redesign .modal.service-form .form .file .name a {
    color: var(--kz-color-graphite);
    font-weight: 500;
    text-transform: none;
}

.kz-redesign .modal.service-form .form .file .del {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: none;
    color: var(--kz-color-graphite);
    opacity: 1;
    cursor: pointer;
}

.kz-redesign .modal.service-form .form .file .del .icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Нижний ряд: согласие слева, основная кнопка справа, линия line сверху */

.kz-redesign .modal.service-form .form .line-submit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base) var(--kz-space-lg);
    margin: var(--kz-space-sm) 0 0;
    padding: var(--kz-space-lg) 0 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .modal.service-form .form .wrap-checkboxes {
    min-width: 0;
    margin: 0;
}

.kz-redesign .modal.service-form .form .wrap-checkboxes > div {
    position: relative;
}

/* Согласие: сам флажок визуально скрыт, но доступен с клавиатуры и лежит точно под квадратом 18px (по его рамке
   прокручивается окно при фокусе); отмечен — заливка primary */

.kz-redesign .modal.service-form .form input[type="checkbox"] {
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.kz-redesign .modal.service-form .form input[type="checkbox"] + label {
    position: relative;
    display: block;
    height: auto;
    min-height: 20px;
    padding: 0 0 0 28px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    cursor: pointer;
}

.kz-redesign .modal.service-form .form input[type="checkbox"] + label::before {
    top: 1px;
    left: 0;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--kz-color-text-muted);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    transition: none;
}

.kz-redesign .modal.service-form .form input[type="checkbox"]:checked + label::before {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary);
}

.kz-redesign .modal.service-form .form input[type="checkbox"] + label .icon {
    top: 6px;
    left: 4px;
    width: 10px;
    height: 8px;
    fill: var(--kz-color-paper);
    transition: none;
}

.kz-redesign .modal.service-form .form input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .modal.service-form .form input[type="checkbox"] + label a {
    border: 0;
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Основная кнопка «Отправить сообщение»: заливка primary, стрелка 16px, без капса (DESIGN.md, Shapes) */

.kz-redesign .modal.service-form .form .submit_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    flex: none;
    box-sizing: border-box;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-card-padding);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-primary);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .modal.service-form .form .submit_btn::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .modal.service-form .form .submit_btn:active {
    background: var(--kz-color-primary-active);
}

/* Отправка: пока scripts.js держит в окне .loader, кнопка приглушена и не принимает повторное нажатие */

.kz-redesign .modal.service-form:has(> .loader) {
    cursor: progress;
}

.kz-redesign .modal.service-form:has(> .loader) .form .submit_btn {
    background: var(--kz-color-primary-active);
    pointer-events: none;
}

/* Фокус кнопок и ссылок формы: кольцо 2px primary с отступом 2px (!important из-за legacy-сброса outline у button).
   При переходе по Tab окно прокручивается с запасом 32px, чтобы кольцо у нижнего края не срезалось */

.kz-redesign .modal.service-form .form .input,
.kz-redesign .modal.service-form .form select,
.kz-redesign .modal.service-form .form .nice-select,
.kz-redesign .modal.service-form .form input[type="file"],
.kz-redesign .modal.service-form .form input[type="checkbox"],
.kz-redesign .modal.service-form a,
.kz-redesign .modal.service-form button {
    scroll-margin: var(--kz-space-xl) 0;
}

.kz-redesign .modal.service-form a:focus-visible,
.kz-redesign .modal.service-form button:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

/* Успешная отправка: текст CMS-шаблона прежний, слева знак «готово» primary */

.kz-redesign .modal.service-form .kz-support-success {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-md);
    max-width: 60ch;
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

/* Сообщение об успехе принимает программный фокус (kz-service.js), чтобы экранный диктор его зачитал; это не
   элемент управления, поэтому без кольца фокуса */

.kz-redesign .modal.service-form .kz-support-success:focus {
    outline: none;
}

.kz-redesign .modal.service-form .kz-support-success::before {
    content: "";
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.25' fill='none' stroke='black' stroke-width='1.5'/><path d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.25' fill='none' stroke='black' stroke-width='1.5'/><path d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 24px 24px no-repeat;
}

/* Окно Fancybox этой формы: ширина 880px, но не шире слайда (legacy задаёт окну 880px и width: auto до 1023px,
   из-за чего окно то выходит за поля слайда, то зависит от длины подписей); без :has() до 1023px окно получает
   ширину по содержимому. Поля слайда 24px (до 767px — 16/8px): на 1440×900 окно целиком на экране. Крестик —
   внутри белого окна у правого верхнего края, область нажатия 44px, граница line, как у кнопки «Закрыть поиск»;
   прокручивается вместе с окном (закреплённый крестик перекрывал правый край полей, а случайное касание закрывает
   окно и стирает введённое). В DOM кнопка по-прежнему после формы (порядок Tab прежний), наверх её переносит order.
   Затемнение — графит 56%, как у модального поиска. Остальные окна Fancybox сайта не меняются */

.kz-redesign .fancybox__slide:has(> .fancybox__content > .modal.service-form) {
    padding: var(--kz-space-lg);
}

.kz-redesign .fancybox__content:has(> .modal.service-form) {
    width: 100%;
    max-width: 880px;
}

.kz-redesign .fancybox__content > .modal.service-form {
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: var(--kz-shadow-overlay);
}

@media (min-width: 1024px) {
    .kz-redesign .fancybox__content > .modal.service-form {
        width: 880px;
        max-width: 100%;
    }
}

.kz-redesign .fancybox__content > .modal.service-form + .carousel__button.is-close {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    align-self: flex-end;
    flex: none;
    width: 44px;
    height: 44px;
    z-index: 5;
    margin: var(--kz-space-md) var(--kz-space-md) -56px 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    opacity: 1;
    transition: none;
}

.kz-redesign .fancybox__content > .modal.service-form + .carousel__button.is-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    filter: none;
}

.kz-redesign .fancybox__content > .modal.service-form + .carousel__button.is-close:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .fancybox__container:has(.modal.service-form) .fancybox__backdrop {
    background: rgba(43, 45, 65, 0.56);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .modal.service-form .form .nice-select:hover .current,
    .kz-redesign .modal.service-form .form .btn-add-phone:hover {
        border-color: var(--kz-color-primary);
    }

    .kz-redesign .modal.service-form .form .nice-select .list .list_item:not(.selected):hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .modal.service-form .form input[type="file"] + label:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .modal.service-form .form .file .del:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-primary);
    }

    .kz-redesign .modal.service-form .form .submit_btn:hover {
        background: var(--kz-color-primary-hover);
    }

    .kz-redesign .modal.service-form .form input[type="checkbox"] + label a:hover {
        color: var(--kz-color-primary-hover);
    }

    .kz-redesign .fancybox__content > .modal.service-form + .carousel__button.is-close:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }
}

@media (max-width: 767px) {
    .kz-redesign .modal.service-form {
        max-width: calc(100% - 2 * var(--kz-gutter-mobile));
        margin: var(--kz-space-lg) auto;
        padding: var(--kz-space-lg) var(--kz-space-base) var(--kz-space-lg);
    }

    .kz-redesign .modal.service-form .modal_title {
        margin: 0 var(--kz-space-xxl) var(--kz-space-lg) 0;
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .modal.service-form .form .columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .modal.service-form .form .phones-lines .columns > .line:first-child {
        margin-bottom: var(--kz-space-sm);
    }

    .kz-redesign .fancybox__slide:has(> .fancybox__content > .modal.service-form) {
        padding: var(--kz-space-base) var(--kz-space-sm);
    }

    .kz-redesign .fancybox__content > .modal.service-form + .carousel__button.is-close {
        margin: var(--kz-space-sm) var(--kz-space-sm) -52px 0;
    }

    .kz-redesign .modal.service-form .form .line-submit {
        flex-direction: column;
        align-items: stretch;
    }

    .kz-redesign .modal.service-form .form .submit_btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .modal.service-form .form .nice-select .current::after {
        transition: none;
    }
}

/* Режим принудительных цветов: значки-маски рисуются фоном, который режим заменяет на Canvas, — задаём им системные
   цвета текста явно (currentColor унаследовал бы исходный, например белый у основной кнопки); отмеченное согласие —
   системным Highlight */

@media (forced-colors: active) {
    .kz-redesign .modal.service-form p.error::before,
    .kz-redesign .modal.service-form .kz-support-success::before,
    .kz-redesign .modal.service-form .form .nice-select .current::after,
    .kz-redesign .modal.service-form .form .file::before {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .kz-redesign .modal.service-form .form .btn-add-phone::after,
    .kz-redesign .modal.service-form .form input[type="file"] + label::before,
    .kz-redesign .modal.service-form .form .submit_btn::after {
        forced-color-adjust: none;
        background: ButtonText;
    }

    .kz-redesign .modal.service-form .form input[type="checkbox"]:checked + label::before {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
    }

    .kz-redesign .modal.service-form .form input[type="checkbox"] + label .icon {
        forced-color-adjust: none;
        fill: HighlightText;
    }

    .kz-redesign .modal.service-form .form .submit_btn {
        border: 1px solid ButtonText;
    }
}

/*
 * Документ: политика конфиденциальности, подэтап 5.4A. templates/kz/page.tpl.php, ветка для URL agreement (страница
 * CMS id 102); остальные страницы со стандартным шаблоном этих классов не получают. Режим чтения: светлый первый экран
 * с общим H1 .kz-page-title без «тепловизионной» линии, но на шкале heading-1 (40px, до ~800px — 32px), а не 40–64px:
 * заголовок документа спокойнее, а длинное слово «конфиденциальности» помещается на 360px; колонка текста до 70ch в
 * общем контейнере 1280px, выровненная по H1. Текст поля CMS
 * выводится дословно. Его разметка — абзацы с <br>, заголовки разделов — <strong> внутри абзацев, поэтому заголовком
 * раздела считается только <strong> первым элементом абзаца или сразу после пустой строки (<br><br>). Для h2–h3 и
 * списков стили заданы заранее: они понадобятся, если разметку поля сделают семантической. Без анимации, карточек и
 * декоративных градиентов.
 */

.kz-redesign .kz-doc {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-doc-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-doc-hero {
    padding: var(--kz-space-xxxl) 0 var(--kz-space-xxl);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-doc-title {
    max-width: 30ch;
    font-size: clamp(var(--kz-type-heading-1-mobile-size), 1.25vw + 22px, var(--kz-type-heading-1-size));
    line-height: 1.15;
    letter-spacing: var(--kz-type-heading-1-tracking);
    overflow-wrap: break-word;
    text-wrap: balance;
}

.kz-redesign .kz-doc-lead {
    max-width: 70ch;
    margin: var(--kz-space-lg) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-doc-subpages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin: var(--kz-space-lg) 0 0;
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
}

.kz-redesign .kz-doc-subpages a {
    color: var(--kz-color-primary);
    text-decoration: none;
}

.kz-redesign .kz-doc-subpages span {
    color: var(--kz-color-graphite);
}

/* Текст документа: 16/25, абзацы через 24px — столько же, сколько пустая строка из <br><br> в тексте CMS */

.kz-redesign .kz-doc-content {
    padding: 0 0 var(--kz-space-xxxl);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-doc-body {
    box-sizing: border-box;
    max-width: 70ch;
    padding: var(--kz-space-xl) 0 0;
    border-top: 1px solid var(--kz-color-line);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 400;
    line-height: var(--kz-type-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-doc-body p {
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-doc-body > :last-child {
    margin-bottom: 0;
}

/* PT Root UI подключён в 400 и 500: полужирный из разметки выводится Medium без синтетического начертания */

.kz-redesign .kz-doc-body strong,
.kz-redesign .kz-doc-body b {
    font-weight: 500;
}

.kz-redesign .kz-doc-body p > strong:first-child,
.kz-redesign .kz-doc-body br + br + strong {
    display: inline-block;
    margin: var(--kz-space-base) 0 var(--kz-space-xs);
    font-size: var(--kz-type-title-card-size);
    line-height: 26px;
    letter-spacing: 0.02em;
}

.kz-redesign .kz-doc-body h2,
.kz-redesign .kz-doc-body h3 {
    margin: var(--kz-space-xxl) 0 var(--kz-space-md);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
}

.kz-redesign .kz-doc-body h2 {
    font-size: var(--kz-type-heading-3-size);
    line-height: var(--kz-type-heading-3-line);
}

.kz-redesign .kz-doc-body h3 {
    font-size: var(--kz-type-title-card-size);
    line-height: 26px;
}

.kz-redesign .kz-doc-body > h2:first-child,
.kz-redesign .kz-doc-body > h3:first-child {
    margin-top: 0;
}

.kz-redesign .kz-doc-body ul,
.kz-redesign .kz-doc-body ol {
    margin: 0 0 var(--kz-space-lg);
    padding: 0 0 0 1.5em;
}

.kz-redesign .kz-doc-body li {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    list-style: inherit;
}

.kz-redesign .kz-doc-body ul > li {
    list-style-type: disc;
}

.kz-redesign .kz-doc-body ol > li {
    list-style-type: decimal;
}

/* Ссылки: primary с подчёркиванием; <u> вокруг ссылки из редактора не даёт второй линии */

.kz-redesign .kz-doc-body a,
.kz-redesign .kz-doc-subpages a {
    border: 0;
    color: var(--kz-color-primary);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: none;
}

.kz-redesign .kz-doc-body u:has(> a) {
    text-decoration: none;
}

.kz-redesign .kz-doc-body a:focus-visible,
.kz-redesign .kz-doc-subpages a:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-doc-body a:hover,
    .kz-redesign .kz-doc-subpages a:hover {
        color: var(--kz-color-primary-hover);
        text-decoration-thickness: 2px;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-doc-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-doc-hero {
        padding: var(--kz-space-section-mobile) 0 var(--kz-space-lg);
    }

    .kz-redesign .kz-doc-content {
        padding-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-doc-body {
        padding-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-doc-body p > strong:first-child,
    .kz-redesign .kz-doc-body br + br + strong {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }
}

@media print {
    .kz-redesign .kz-doc-hero {
        padding: 0 0 var(--kz-space-base);
    }

    .kz-redesign .kz-doc-body {
        max-width: none;
        padding-top: var(--kz-space-base);
    }
}

/*
 * Статические страницы: разработки и сообщества НК, этап 5.5. templates/kz/page.tpl.php, ветка для full_link
 * about/sdelano-v-pergam («Наши разработки») и about/ndt-partner («Сообщества НК»); остальные страницы со стандартным
 * шаблоном этих классов не получают. Язык страниц «О компании» и «Сервисный центр»: светлый первый экран с H1
 * .kz-page-title--thermal, введение lead и навигация по разделам строками 48px с линиями; разделы на smoke и белом
 * (чередование задаёт класс из шаблона, не :nth-child); позиции и организации — строки с линиями, без карточек и теней.
 * Анимации нет. Текст, изображения и ссылки — из поля CMS в исходном порядке.
 */

.kz-redesign .kz-static {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-static-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

/* Первый экран: H1, введение слева 7/12, навигация по разделам справа 5/12 */

.kz-redesign .kz-static-hero {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-static-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--kz-space-xxl);
    align-items: start;
    margin-top: var(--kz-space-xl);
}

.kz-redesign .kz-static-lead p {
    max-width: 60ch;
    margin: 0 0 var(--kz-space-base);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-static-lead > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-static-nav {
    justify-self: end;
    width: 100%;
    max-width: 440px;
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-static-nav ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-static-nav li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-static-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base);
    min-height: 48px;
    padding: var(--kz-space-md) 0;
    box-sizing: border-box;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}

.kz-redesign .kz-static-nav-text {
    min-width: 0;
}

.kz-redesign .kz-static-nav-count {
    display: block;
    margin-top: 2px;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    font-weight: 400;
    line-height: var(--kz-type-small-line);
}

/* Стрелка вниз: общая маска стрелок редизайна, как в навигации «О компании» */

.kz-redesign .kz-static-nav a::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transform: rotate(90deg);
}

/* Разделы */

.kz-redesign .kz-static-section {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-color-paper);
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-static-section--smoke {
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-static-h2 {
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-align: left;
    text-transform: none;
    text-wrap: balance;
}

/* Ссылки в тексте CMS: primary, подчёркнуты всегда (DESIGN.md) */

.kz-redesign .kz-static-lead a,
.kz-redesign .kz-dev-lead a,
.kz-redesign .kz-dev-desc a,
.kz-redesign .kz-static-text a,
.kz-redesign .kz-ndt-text a,
.kz-redesign .kz-static-raw a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-static-text,
.kz-redesign .kz-static-raw {
    max-width: 72ch;
    margin: var(--kz-space-lg) 0 0;
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

/* «Наши разработки»: заголовок раздела 5/12 и вводный текст 7/12, ниже строки позиций */

.kz-redesign .kz-dev-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kz-space-xxl);
    align-items: start;
    margin-bottom: var(--kz-space-xl);
}

.kz-redesign .kz-dev-lead p {
    max-width: 70ch;
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-dev-lead > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-dev-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--kz-space-xxl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-dev-item {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--kz-space-card-padding);
    align-items: start;
    margin: 0;
    padding: var(--kz-space-lg) 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-dev-item--text {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-dev-thumb a {
    display: block;
}

.kz-redesign .kz-dev-thumb img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: 250 / 143;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    object-fit: contain;
}

.kz-redesign .kz-dev-body {
    min-width: 0;
}

.kz-redesign .kz-dev-name {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 24px;
    text-align: left;
    text-transform: none;
    text-wrap: pretty;
}

/* Название «Описание – Модель»: модель первой строкой (порядок задан flex order, в DOM описание идёт первым,
 * экранный диктор читает исходный заголовок), описание под ней мелким muted; тире скрыто визуально */

.kz-redesign .kz-dev-name--split {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kz-redesign .kz-dev-code {
    order: -1;
}

.kz-redesign .kz-dev-kind {
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    font-weight: 400;
    line-height: 20px;
}

/* Описание: мера около 70 знаков на любой ширине колонки */

.kz-redesign .kz-dev-desc {
    max-width: 62ch;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 22px;
}

/* «Подробнее»: та же ссылка CMS, символы «>>» заменены стрелкой 16px */

.kz-redesign .kz-dev-more {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-height: 32px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-dev-more::after,
.kz-redesign .kz-ndt-site-link::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

/* «К разделам»: в конце каждого раздела «Наших разработок», возврат к навигации первого экрана */

.kz-redesign .kz-static-back {
    margin: 0;
    padding: var(--kz-space-md) 0 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-static-back a {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-height: 32px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-static-back a::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transform: rotate(-90deg);
}

/* «Сообщества НК»: организации строками — логотип на белой подложке, название с аббревиатурой, текст, сайт */

.kz-redesign .kz-ndt-list-section {
    padding-top: 0;
}

.kz-redesign .kz-ndt-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-ndt-item {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: var(--kz-space-xxl);
    align-items: start;
    margin: 0;
    padding: var(--kz-space-xxl) 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-ndt-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.kz-redesign .kz-ndt-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 176px;
    height: 128px;
    padding: var(--kz-space-base);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-ndt-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.kz-redesign .kz-ndt-body {
    min-width: 0;
    max-width: 66ch;
}

.kz-redesign .kz-ndt-name {
    margin: 0 0 var(--kz-space-base);
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-align: left;
    text-transform: none;
    text-wrap: balance;
}

.kz-redesign .kz-ndt-abbr {
    display: block;
    margin-top: var(--kz-space-xs);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.02em;
}

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

.kz-redesign .kz-ndt-sep,
.kz-redesign .kz-dev-sep {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kz-redesign .kz-ndt-text p {
    margin: 0 0 var(--kz-space-base);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-ndt-text > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-ndt-site {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--kz-space-md);
    margin: var(--kz-space-lg) 0 0;
    padding: var(--kz-space-md) 0 0;
    border-top: 1px solid var(--kz-color-line);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-ndt-site-label {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-ndt-site-link {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-height: 44px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

/* Фокус: кольцо 2px primary с отступом 2px */

.kz-redesign .kz-static a:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-static-nav a:hover {
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-dev-more:hover,
    .kz-redesign .kz-static-back a:hover {
        color: var(--kz-color-primary-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-static-lead a:hover,
    .kz-redesign .kz-dev-lead a:hover,
    .kz-redesign .kz-dev-desc a:hover,
    .kz-redesign .kz-ndt-text a:hover,
    .kz-redesign .kz-ndt-site-link:hover {
        color: var(--kz-color-primary-hover);
        text-decoration-thickness: 2px;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-dev-more,
    .kz-redesign .kz-static-back a {
        min-height: 44px;
    }
}

/* Две колонки позиций от 1280px: ряды выравниваются по сетке, линии совпадают */

@media (min-width: 1280px) {
    .kz-redesign .kz-dev-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-dev-item:only-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-static-hero-grid,
    .kz-redesign .kz-dev-head {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-static-nav {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-static-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-static-hero {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-static-hero-grid {
        margin-top: var(--kz-space-lg);
    }

    /* Навигация по разделам — сразу под H1, до вступления: во вступлении нет ссылок, порядок фокуса не меняется */

    .kz-redesign .kz-static-nav {
        order: -1;
    }

    .kz-redesign .kz-static-lead p {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-static-section {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-ndt-list-section {
        padding-top: 0;
    }

    .kz-redesign .kz-static-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-dev-head {
        margin-bottom: var(--kz-space-lg);
    }

    /* Позиция: миниатюра и название в первой строке, описание и «Подробнее» — на всю ширину под ними */

    .kz-redesign .kz-dev-item {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: var(--kz-space-md) var(--kz-space-base);
        padding: var(--kz-space-card-padding) 0;
    }

    .kz-redesign .kz-dev-item--text {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-dev-body {
        display: contents;
    }

    .kz-redesign .kz-dev-body > * {
        grid-column: 1 / -1;
    }

    .kz-redesign .kz-dev-thumb + .kz-dev-body > .kz-dev-name {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .kz-redesign .kz-dev-name {
        margin: 0;
        font-size: var(--kz-type-body-size);
        line-height: 22px;
    }

    .kz-redesign .kz-dev-kind {
        font-size: var(--kz-type-small-size);
        line-height: var(--kz-type-small-line);
    }

    .kz-redesign .kz-dev-desc {
        margin: 0;
    }

    .kz-redesign .kz-dev-more {
        justify-self: start;
    }

    .kz-redesign .kz-ndt-item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-card-padding);
        padding: var(--kz-space-xl) 0;
    }

    .kz-redesign .kz-ndt-logo {
        width: 128px;
        height: 96px;
        padding: var(--kz-space-md);
    }

    .kz-redesign .kz-ndt-name {
        font-size: var(--kz-type-heading-3-mobile-size);
        line-height: 24px;
    }
}

@media print {
    .kz-redesign .kz-static-nav,
    .kz-redesign .kz-static-back {
        display: none;
    }

    .kz-redesign .kz-static-section,
    .kz-redesign .kz-static-hero {
        padding: var(--kz-space-lg) 0;
    }
}

/*
 * Вход в каталог, этап 5.6: templates/kz/catalog.tpl.php (/catalog/ — «Все категории», /catalog/brands/ — производители,
 * служебные tab 1–3 — только первый экран) и templates/kz/catalog_tags_group.tpl.php (/catalog/otrasli/). Классы .kz-cat-*
 * и .kz-ind-* есть только в этих шаблонах. Первый экран компактный: хлебные крошки, H1 .kz-page-title--thermal и строка
 * «переключатель трёх видов + Запросить КП» над линией. Направления — строки с линиями в две колонки от 1024px,
 * производители — сетка логотипов с общими линиями и алфавит в колонках, отрасли — вкладки (kz-catalog.js; без JS —
 * оглавление и все отрасли подряд). Раскрытие — нативный <details>, без анимации.
 * Кнопка «Запросить КП» — глубокий зелёный #276852 по решению владельца: исключение из правила одного акцента только
 * для этой кнопки на трёх страницах (DESIGN.md, Colors); белый текст 6,6:1, наведение 7,9:1, нажатие 9,3:1.
 * Форма запроса КП — оформление формы обращения 5.3B (.modal.service-form) с модификатором .kz-kp-form ниже.
 */

.kz-redesign .kz-cat {
    --kz-cat-kp: #276852;
    --kz-cat-kp-hover: #1F5A46;
    --kz-cat-kp-active: #194A3A;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-cat-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-cat-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Первый экран */

.kz-redesign .kz-cat-hero {
    padding: var(--kz-space-xl) 0 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-cat-crumbs {
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-cat-crumbs .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-xs) var(--kz-space-sm);
    margin: 0;
    padding: 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-cat-crumbs .breadcrumbs a {
    color: var(--kz-color-text-muted);
    text-decoration: none;
}

.kz-redesign .kz-cat-crumbs .breadcrumbs .sep {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* У входа в каталог хлебные крошки CMS состоят из одной ссылки «Пергам» и разделителя после неё — висящий
   разделитель скрыт */

.kz-redesign .kz-cat-crumbs .breadcrumbs > .sep:last-child {
    display: none;
}

.kz-redesign .kz-cat-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kz-space-base) var(--kz-space-xl);
    margin-top: var(--kz-space-xl);
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-cat-views ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--kz-space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-views li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-views a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
}

.kz-redesign .kz-cat-views a[aria-current="page"] {
    border-bottom-color: var(--kz-color-primary);
    color: var(--kz-color-graphite);
}

/* «Запросить КП»: размер и шрифт — .kz-btn, цвет — зелёный этой кнопки, стрелка 16px как у основной кнопки */

.kz-redesign .kz-cat-request {
    flex: none;
    gap: var(--kz-space-sm);
    margin-bottom: var(--kz-space-sm);
    border: 0;
    background: var(--kz-cat-kp);
    color: var(--kz-color-on-dark);
}

.kz-redesign .kz-cat-request::after,
.kz-redesign .kz-ind-title a::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-cat .kz-cat-request:focus-visible {
    outline: 2px solid var(--kz-cat-kp);
    outline-offset: 2px;
}

.kz-redesign .kz-cat-request:active {
    background: var(--kz-cat-kp-active);
    color: var(--kz-color-on-dark);
}

/* Разделы */

.kz-redesign .kz-cat-section {
    padding: var(--kz-space-xxl) 0 var(--kz-space-xxxl);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-cat-section--smoke {
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-cat-h2 {
    margin: 0 0 var(--kz-space-xl);
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-align: left;
    text-transform: none;
}

/* «Все категории»: направления строками — иконка CMS на белой подложке, название (h2), подкатегории списком,
   остальные под «Ещё N» (<details>) */

.kz-redesign .kz-cat-dirs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--kz-space-xxl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-dir {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--kz-space-card-padding);
    align-items: start;
    margin: 0;
    padding: var(--kz-space-lg) 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-cat-dir-thumb {
    display: block;
}

.kz-redesign .kz-cat-dir-thumb img {
    display: block;
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    object-fit: contain;
}

.kz-redesign .kz-cat-dir-body {
    min-width: 0;
}

.kz-redesign .kz-cat-dir-title {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-cat-dir-title a,
.kz-redesign .kz-cat-links a,
.kz-redesign .kz-cat-az-list a,
.kz-redesign .kz-ind-title a,
.kz-redesign .kz-ind-group-link,
.kz-redesign .kz-ind-sub-list a {
    color: var(--kz-color-graphite);
    text-decoration: none;
}

.kz-redesign .kz-cat-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-links a {
    display: inline-block;
    padding: var(--kz-space-xs) 0;
    font-size: var(--kz-type-body-size);
    line-height: 24px;
}

/* «Ещё N» / «Свернуть»: summary без маркера, шеврон-маска поворачивается при раскрытии без перехода */

.kz-redesign .kz-cat-more summary,
.kz-redesign .kz-ind-sub summary {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-height: 32px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    cursor: pointer;
}

.kz-redesign .kz-cat-more summary::-webkit-details-marker,
.kz-redesign .kz-ind-sub summary::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-cat-more summary::after,
.kz-redesign .kz-ind-sub summary::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-cat-more[open] > summary::after,
.kz-redesign .kz-ind-sub[open] > summary::after {
    transform: rotate(180deg);
}

.kz-redesign .kz-cat-more-open,
.kz-redesign .kz-cat-more[open] .kz-cat-more-closed {
    display: none;
}

.kz-redesign .kz-cat-more[open] .kz-cat-more-open {
    display: inline;
}

/* Производители: избранные — сетка логотипов с общими линиями (не отдельные карточки), все — алфавит */

.kz-redesign .kz-cat-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    border-left: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-cat-logos li {
    margin: 0;
    padding: 0;
    border-right: 1px solid var(--kz-color-line);
    border-bottom: 1px solid var(--kz-color-line);
    background: var(--kz-color-paper);
    list-style: none;
}

.kz-redesign .kz-cat-logo {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: var(--kz-space-card-padding);
    color: var(--kz-color-graphite);
    text-decoration: none;
}

.kz-redesign .kz-cat-logo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-bottom: var(--kz-space-md);
}

.kz-redesign .kz-cat-logo-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.kz-redesign .kz-cat-logo-name {
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: anywhere;
}

.kz-redesign .kz-cat-logo-country,
.kz-redesign .kz-cat-az-count,
.kz-redesign .kz-cat-az-country {
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-cat-logo:focus-visible {
    outline-offset: -2px;
}

.kz-redesign .kz-cat-az-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-cat-az-head .kz-cat-h2 {
    margin: 0;
}

.kz-redesign .kz-cat-az-count {
    margin: 0;
    font-size: var(--kz-type-text-14-size);
}

/* Буквы — сразу под переключателем (белая полоса над избранными): ряд латиницы «A–Z» и ряд кириллицы «А–Я» */

.kz-redesign .kz-cat-section--letters {
    padding: var(--kz-space-lg) 0 var(--kz-space-xl);
}

.kz-redesign .kz-cat-letters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-md) var(--kz-space-xl);
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-cat-letters-row {
    display: flex;
    align-items: center;
    gap: var(--kz-space-md);
    min-width: 0;
}

.kz-redesign .kz-cat-letters-label {
    flex: none;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.kz-redesign .kz-cat-letters ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-letters li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-letters a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--kz-space-sm);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.kz-redesign .kz-cat-az {
    columns: 220px 4;
    column-gap: var(--kz-space-xxl);
}

.kz-redesign .kz-cat-az-group {
    break-inside: avoid;
    padding: 0 0 var(--kz-space-lg);
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-cat-az-letter {
    margin: 0 0 var(--kz-space-xs);
    padding: 0 0 var(--kz-space-sm);
    border-bottom: 1px solid var(--kz-color-line);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-cat-az-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-az-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-cat-az-list a {
    display: inline-block;
    padding: var(--kz-space-xs) 0;
    font-size: var(--kz-type-body-size);
    line-height: 24px;
    overflow-wrap: anywhere;
}

/* «К буквам» нужна там, где алфавит длинный: до 1023px (одна-две колонки) */

.kz-redesign .kz-cat-az-back {
    display: none;
}

/* Отрасли: слева список отраслей (вкладки), справа панель выбранной отрасли */

.kz-redesign .kz-ind {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-ind-tabs ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-ind-tabs li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-ind-tabs a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--kz-space-md);
    min-height: 60px;
    padding: var(--kz-space-sm) var(--kz-space-md);
    color: var(--kz-color-graphite);
    text-decoration: none;
}

.kz-redesign .kz-ind-tabs img {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.kz-redesign .kz-ind-tab-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kz-redesign .kz-ind-tab-name {
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 22px;
}

.kz-redesign .kz-ind-tab-count {
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

/* Выбранная отрасль: белая строка, название primary и стрелка к панели (без цветной боковой полосы) */

.kz-redesign .kz-ind--tabs .kz-ind-tabs a[aria-selected="true"] {
    background: var(--kz-color-paper);
}

.kz-redesign .kz-ind--tabs .kz-ind-tabs a[aria-selected="true"] .kz-ind-tab-name {
    color: var(--kz-color-primary);
}

.kz-redesign .kz-ind--tabs .kz-ind-tabs a[aria-selected="true"]::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-ind-panels {
    display: grid;
    gap: var(--kz-space-lg);
    min-width: 0;
}

.kz-redesign .kz-ind-panel {
    box-sizing: border-box;
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    scroll-margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-ind-panel[hidden] {
    display: none;
}

.kz-redesign .kz-ind-title {
    margin: 0 0 var(--kz-space-lg);
    padding: 0;
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-mobile-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: 30px;
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-ind-title a {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
}

.kz-redesign .kz-ind-title a::after {
    color: var(--kz-color-primary);
}

.kz-redesign .kz-ind-groups {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

/* Группа: ссылка на категорию; «N подгрупп» (summary) стоит справа в той же строке, список раскрывается под ней */

.kz-redesign .kz-ind-group {
    position: relative;
    margin: 0;
    padding: var(--kz-space-sm) 0;
    border-bottom: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-ind-group-link {
    display: block;
    padding: var(--kz-space-xs) 0;
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 24px;
}

.kz-redesign .kz-ind-group--subs .kz-ind-group-link {
    margin-right: 136px;
}

.kz-redesign .kz-ind-sub summary {
    position: absolute;
    top: var(--kz-space-sm);
    right: 0;
}

.kz-redesign .kz-ind-sub-list {
    margin: var(--kz-space-xs) 0 var(--kz-space-sm);
    padding: 0 0 0 var(--kz-space-base);
    columns: 240px 2;
    column-gap: var(--kz-space-xl);
    list-style: none;
}

.kz-redesign .kz-ind-sub-list li {
    margin: 0;
    padding: 0;
    break-inside: avoid;
    list-style: none;
}

.kz-redesign .kz-ind-sub-list a {
    display: inline-block;
    padding: 6px 0;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

/* «Не нашли нужное?» — строка запроса КП в конце списков трёх страниц (та же кнопка и форма, что в первом экране) */

.kz-redesign .kz-cat-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base) var(--kz-space-xl);
    margin-top: var(--kz-space-xl);
    padding-top: var(--kz-space-xl);
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-cat-cta-text {
    max-width: 60ch;
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-cat-cta-text strong {
    font-weight: 500;
}

.kz-redesign .kz-cat-cta .kz-cat-request {
    margin: 0;
}

/* Фокус: кольцо 2px primary с отступом 2px; у кнопки КП — её зелёный (правило выше) */

.kz-redesign .kz-cat a:focus-visible,
.kz-redesign .kz-cat summary:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .kz-cat .kz-cat-request:focus-visible {
    outline-color: var(--kz-cat-kp);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-cat-crumbs .breadcrumbs a:hover,
    .kz-redesign .kz-cat-views a:hover,
    .kz-redesign .kz-cat-dir-title a:hover,
    .kz-redesign .kz-cat-links a:hover,
    .kz-redesign .kz-cat-az-list a:hover,
    .kz-redesign .kz-ind-title a:hover,
    .kz-redesign .kz-ind-group-link:hover,
    .kz-redesign .kz-ind-sub-list a:hover {
        color: var(--kz-color-primary);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-cat-views a:hover {
        text-decoration: none;
    }

    .kz-redesign .kz-cat-request:hover {
        background: var(--kz-cat-kp-hover);
        color: var(--kz-color-on-dark);
    }

    .kz-redesign .kz-cat-more summary:hover,
    .kz-redesign .kz-ind-sub summary:hover,
    .kz-redesign .kz-cat-az-back:hover {
        color: var(--kz-color-primary-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-cat-logo:hover .kz-cat-logo-name {
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-cat-letters a:hover {
        border-color: var(--kz-color-primary);
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-ind-tabs a:hover .kz-ind-tab-name {
        color: var(--kz-color-primary);
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-cat-more summary,
    .kz-redesign .kz-ind-sub summary,
    .kz-redesign .kz-cat-az-back {
        min-height: 44px;
    }

    .kz-redesign .kz-cat-letters a {
        min-width: 44px;
        height: 44px;
    }

    .kz-redesign .kz-ind-sub summary {
        top: 2px;
    }
}

@media (min-width: 1024px) {
    .kz-redesign .kz-cat-dirs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-ind {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    /* Отрасли сеткой из двух колонок над панелью */

    .kz-redesign .kz-ind-tabs ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--kz-space-sm);
        border-top: 0;
    }

    .kz-redesign .kz-ind-tabs li {
        border-bottom: 0;
    }

    .kz-redesign .kz-ind-tabs a {
        height: 100%;
        min-height: 56px;
        border: 1px solid var(--kz-color-line);
        border-radius: var(--kz-radius-control);
        background: var(--kz-color-paper);
    }

    .kz-redesign .kz-ind--tabs .kz-ind-tabs a[aria-selected="true"] {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-primary-soft);
    }

    .kz-redesign .kz-ind--tabs .kz-ind-tabs a[aria-selected="true"]::after {
        display: none;
    }

    .kz-redesign .kz-cat-az-back {
        display: inline-flex;
        align-items: center;
        gap: var(--kz-space-xs);
        min-height: 32px;
        margin-top: var(--kz-space-xs);
        color: var(--kz-color-primary);
        font-size: var(--kz-type-text-14-size);
        font-weight: 500;
        line-height: 20px;
        text-decoration: none;
    }

    .kz-redesign .kz-cat-az-back::after {
        content: "";
        display: block;
        flex: none;
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
        transform: rotate(-90deg);
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-cat-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-cat-hero {
        padding-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-cat-crumbs {
        margin-bottom: var(--kz-space-base);
    }

    /* Переключатель — строка над линией, кнопка КП — под ней */

    .kz-redesign .kz-cat-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: var(--kz-space-lg);
        border-bottom: 0;
    }

    .kz-redesign .kz-cat-views {
        border-bottom: 1px solid var(--kz-color-line);
    }

    .kz-redesign .kz-cat-views ul {
        gap: 0 var(--kz-space-card-padding);
    }

    .kz-redesign .kz-cat-views a {
        min-height: 48px;
    }

    .kz-redesign .kz-cat-request {
        align-self: flex-start;
        margin: var(--kz-space-base) 0 0;
    }

    .kz-redesign .kz-cat-section {
        padding: var(--kz-space-lg) 0 var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-cat-h2 {
        margin-bottom: var(--kz-space-lg);
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-cat-dir {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: var(--kz-space-base);
        padding: var(--kz-space-card-padding) 0;
    }

    .kz-redesign .kz-cat-dir-thumb img {
        width: 48px;
        height: 48px;
    }

    .kz-redesign .kz-cat-dir-title {
        font-size: var(--kz-type-heading-3-mobile-size);
        line-height: 24px;
    }

    .kz-redesign .kz-cat-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-cat-logo {
        padding: var(--kz-space-base);
    }

    .kz-redesign .kz-cat-logo-img {
        height: 48px;
    }

    .kz-redesign .kz-cat-logo-img img {
        max-height: 48px;
    }

    .kz-redesign .kz-ind-panel {
        padding: var(--kz-space-card-padding) var(--kz-space-base);
    }

    .kz-redesign .kz-ind-title {
        font-size: var(--kz-type-heading-3-mobile-size);
        line-height: 24px;
    }

    .kz-redesign .kz-ind-group--subs .kz-ind-group-link {
        margin-right: 112px;
    }

    .kz-redesign .kz-ind-tabs a {
        gap: var(--kz-space-sm);
        padding: var(--kz-space-sm);
    }

    .kz-redesign .kz-ind-tabs img {
        width: 24px;
        height: 24px;
    }

    .kz-redesign .kz-ind-tab-name {
        font-size: var(--kz-type-text-14-size);
        line-height: 18px;
    }

    /* Алфавит производителей в две колонки: список вдвое короче */

    .kz-redesign .kz-cat-az {
        columns: 140px 2;
        column-gap: var(--kz-space-lg);
    }
}

/* До 479px иконки отраслей скрыты: длинные названия («Электроэнергетика», «Телекоммуникации») помещаются целиком */

@media (max-width: 479px) {
    .kz-redesign .kz-ind-tabs img {
        display: none;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-cat-section--letters {
        padding: var(--kz-space-base) 0 var(--kz-space-lg);
    }

    .kz-redesign .kz-cat-letters-row {
        align-items: flex-start;
    }

    .kz-redesign .kz-cat-letters-label {
        min-width: 32px;
        padding-top: 10px;
    }

    .kz-redesign .kz-cat-cta {
        flex-direction: column;
        align-items: flex-start;
        margin-top: var(--kz-space-lg);
        padding-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-cat-cta-text {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }
}

/* Узкие телефоны: три вида каталога остаются в одной строке */

@media (max-width: 389px) {
    .kz-redesign .kz-cat-views ul {
        gap: 0 var(--kz-space-base);
    }

    .kz-redesign .kz-cat-views a {
        font-size: var(--kz-type-text-14-size);
    }
}

/* Форма запроса КП (templates/kz/pricerequests_kp.tpl.php): оформление 5.3B, окно 720px, способ связи — две
   радиокнопки 44px, подсказка о полях */

.kz-redesign .modal.service-form.kz-kp-form {
    width: 720px;
}

.kz-redesign .fancybox__content:has(> .modal.kz-kp-form) {
    max-width: 720px;
}

/* В окне ширину задаёт .fancybox__content (до 720px), на узких экранах форма занимает его целиком */

.kz-redesign .fancybox__content > .modal.service-form.kz-kp-form {
    width: auto;
}

@media (min-width: 1024px) {
    .kz-redesign .fancybox__content > .modal.service-form.kz-kp-form {
        width: 720px;
    }
}

.kz-redesign .modal.kz-kp-form .kz-kp-note {
    margin: 0 0 var(--kz-space-lg);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .modal.kz-kp-form .kz-kp-contact {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.kz-redesign .modal.kz-kp-form .kz-kp-contact legend {
    padding: 0;
}

.kz-redesign .modal.kz-kp-form .kz-kp-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--kz-space-lg);
    margin: 0 0 var(--kz-space-sm);
}

.kz-redesign .modal.kz-kp-form .kz-kp-option {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: 22px;
    cursor: pointer;
}

/* legacy styles.css снимает у всех input внешний вид (appearance: none) и обводку (!important) — радиокнопка
   рисуется здесь: круг 20px с рамкой graphite, выбранная — рамка и точка primary; кольцо фокуса — с !important */

.kz-redesign .modal.kz-kp-form .kz-kp-option input {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--kz-color-graphite);
    border-radius: 50%;
    background: var(--kz-color-paper);
    cursor: pointer;
}

.kz-redesign .modal.kz-kp-form .kz-kp-option input:checked {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary);
    box-shadow: inset 0 0 0 4px var(--kz-color-paper);
}

.kz-redesign .modal.kz-kp-form .kz-kp-option input:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .kz-redesign .modal.kz-kp-form .kz-kp-option input {
        -webkit-appearance: auto;
        appearance: auto;
    }
}

@media print {
    .kz-redesign .kz-cat-bar,
    .kz-redesign .kz-cat-letters,
    .kz-redesign .kz-cat-az-back,
    .kz-redesign .kz-cat-cta {
        display: none;
    }

    .kz-redesign .kz-ind-panel[hidden] {
        display: block;
    }
}

/*
 * Страницы категорий, этап 5.7A: templates/kz/catalog_category_products.tpl.php (список товаров подкатегории, в том числе
 * ответ AJAX) и templates/kz/catalog_category_show.tpl.php (страница направления). Карточки — kz_catalog_product_cards,
 * страницы — kz_catalog_paging. Обёртка — .kz-cat .kz-catp: первый экран, хлебные крошки, контейнер и кнопка
 * «Запросить КП» — те же, что у входа в каталог (этап 5.6). Классы .kz-catp-* и .kz-pcard* есть только в этих шаблонах.
 * Из legacy сохранены только классы-хуки scripts.js (.products_head, .views, .btn, .products, .row / .list, .pagination,
 * .mob_filter_btn, .submit.hidden, .field): их прежние правила из templates/css переопределены здесь.
 * H1 — шкала heading-1 (40/46, до 1023px — мобильная 32/38), а не 64px входных страниц: названия подкатегорий длинные.
 * Hover — только при точном указателе; движение — сдвиг стрелки «Подробнее» на 4px и отключается при reduced motion.
 */

.kz-redesign .kz-catp {
    --kz-catp-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --kz-catp-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --kz-catp-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --kz-catp-sort-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 13V3M4 7l4-4 4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --kz-catp-gap: var(--kz-space-lg);
    background: var(--kz-color-paper);
}

/* Первый экран */

.kz-redesign .kz-catp-hero {
    padding-bottom: var(--kz-space-xl);
}

/* Хлебные крошки категорий состоят из нескольких звеньев: разделитель — в цвет текста, без legacy-отступов */

.kz-redesign .kz-catp .kz-cat-crumbs .breadcrumbs {
    font-weight: 400;
}

/* Цель ссылки не ниже 24px (WCAG 2.2, 2.5.8) */

.kz-redesign .kz-catp .kz-cat-crumbs .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.kz-redesign .kz-catp .kz-cat-crumbs .breadcrumbs .sep {
    position: static;
    flex: none;
    margin: 0;
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-catp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kz-space-lg) var(--kz-space-xxl);
}

.kz-redesign .kz-catp-title {
    max-width: 24em;
    font-size: var(--kz-type-heading-1-size);
    line-height: var(--kz-type-heading-1-line);
    letter-spacing: var(--kz-type-heading-1-tracking);
    overflow-wrap: break-word;
}

.kz-redesign .kz-catp-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kz-space-base) var(--kz-space-lg);
    min-height: var(--kz-type-heading-1-line);
}

.kz-redesign .kz-catp-actions .kz-cat-request {
    margin: 0;
}

.kz-redesign .kz-catp-price {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-catp-price::before {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-catp-arrow) center / contain no-repeat;
    mask: var(--kz-catp-arrow) center / contain no-repeat;
    transform: rotate(90deg);
}

.kz-redesign .kz-catp-lead {
    max-width: 72ch;
    margin: var(--kz-space-lg) 0 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-catp-lead p,
.kz-redesign .kz-catp-lead div {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

.kz-redesign .kz-catp-lead p + p,
.kz-redesign .kz-catp-lead div + div {
    margin-top: var(--kz-space-md);
}

.kz-redesign .kz-catp-lead a,
.kz-redesign .kz-catp-about-desc a,
.kz-redesign .kz-catp-seo-text a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Подкатегории второго уровня: чипы (DESIGN.md, Shapes); текущая — на primary-soft, без ссылки */

.kz-redesign .kz-catp-subnav {
    margin: var(--kz-space-xl) 0 0;
}

.kz-redesign .kz-catp-subnav ul,
.kz-redesign .kz-catp-taglist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-catp-subnav li,
.kz-redesign .kz-catp-taglist li,
.kz-redesign .kz-catp-tiles li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-catp-subnav li::before,
.kz-redesign .kz-catp-taglist li::before,
.kz-redesign .kz-catp-tiles li::before,
.kz-redesign .kz-catp-manager-contacts li::before {
    content: none;
}

.kz-redesign .kz-catp-subnav a,
.kz-redesign .kz-catp-subnav span,
.kz-redesign .kz-catp-tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: var(--kz-space-xs) var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-small-size);
    font-weight: 400;
    line-height: var(--kz-type-small-line);
    text-decoration: none;
}

.kz-redesign .kz-catp-subnav span[aria-current] {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary-soft);
    font-weight: 500;
}

/* Направление: подкатегории плитками на smoke с шевроном, четыре колонки */

.kz-redesign .kz-catp-tiles {
    margin: var(--kz-space-xl) 0 0;
}

.kz-redesign .kz-catp-tiles ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-catp-tile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-md);
    height: 100%;
    min-height: 64px;
    padding: var(--kz-space-md) var(--kz-space-base);
    border: 1px solid transparent;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-catp-tile span {
    min-width: 0;
}

.kz-redesign .kz-catp-tile::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--kz-color-text-muted);
    -webkit-mask: var(--kz-catp-chevron) center / contain no-repeat;
    mask: var(--kz-catp-chevron) center / contain no-repeat;
    transform: rotate(-90deg);
}

/* Разделы под первым экраном */

.kz-redesign .kz-catp-section {
    padding: var(--kz-space-xxl) 0;
}

.kz-redesign .kz-catp-section > .kz-cat-inner::before,
.kz-redesign .kz-catp-group > .kz-cat-inner::before {
    content: "";
    display: block;
    margin-bottom: var(--kz-space-xxl);
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-section + .kz-catp-section,
.kz-redesign .kz-catp-main + .kz-catp-section {
    padding-top: 0;
}

.kz-redesign .kz-catp > .kz-catp-section:last-of-type {
    padding-bottom: var(--kz-space-xxxl);
}

.kz-redesign .kz-catp-h2 {
    max-width: 28em;
    margin: 0 0 var(--kz-space-lg);
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-align: left;
    text-transform: none;
}

/* Список товаров: слева фильтры (264px), справа сортировка, вид и товары */

.kz-redesign .kz-catp-main {
    padding: 0 0 var(--kz-space-xxxl);
}

.kz-redesign .kz-catp-main > .kz-cat-inner::before {
    content: "";
    display: block;
    margin-bottom: var(--kz-space-lg);
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-layout {
    min-width: 0;
}

.kz-redesign .kz-catp-layout--filters {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--kz-space-lg) var(--kz-space-xl);
    align-items: start;
}

.kz-redesign .kz-catp-content,
.kz-redesign .kz-catp-aside {
    min-width: 0;
}

/* Сортировка и вид */

.kz-redesign .kz-catp .kz-catp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    width: auto;
    margin: 0 0 var(--kz-space-base);
    padding: 0;
}

.kz-redesign .kz-catp-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--kz-space-lg);
    min-width: 0;
}

.kz-redesign .kz-catp-sort-label {
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-catp-sort .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-xs);
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.kz-redesign .kz-catp-sort .btn.up,
.kz-redesign .kz-catp-sort .btn.down {
    border-bottom-color: var(--kz-color-primary);
    color: var(--kz-color-graphite);
}

/* Стрелка направления: .down — по возрастанию (вверх), .up — по убыванию (вниз); имена классов задаёт scripts.js */

.kz-redesign .kz-catp-sort .btn.up::after,
.kz-redesign .kz-catp-sort .btn.down::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-catp-sort-arrow) center / contain no-repeat;
    mask: var(--kz-catp-sort-arrow) center / contain no-repeat;
}

.kz-redesign .kz-catp-sort .btn.up::after {
    transform: rotate(180deg);
}

.kz-redesign .kz-catp .kz-catp-views {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--kz-space-xs);
    margin: 0;
}

.kz-redesign .kz-catp .kz-catp-views .btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--kz-radius-control);
    background: none;
    color: var(--kz-color-text-muted);
    opacity: 1;
    transition: none;
    cursor: pointer;
}

.kz-redesign .kz-catp .kz-catp-views .btn.active {
    border-color: var(--kz-color-line);
    background: var(--kz-color-smoke);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-catp .kz-catp-views .btn .icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
}

.kz-redesign .kz-catp .kz-catp-bar--off {
    display: none;
}

/* Результаты */

.kz-redesign .kz-catp #content_catalog {
    width: auto;
    min-width: 0;
    outline: none;
}

.kz-redesign .kz-catp-found {
    margin: 0 0 var(--kz-space-base);
    padding: 0;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-catp .kz-catp-products {
    margin: 0;
}

.kz-redesign .kz-catp .kz-catp-products .kz-catp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--kz-catp-gap);
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-catp .kz-catp-products .kz-catp-grid > .kz-pcard,
.kz-redesign .kz-catp .kz-catp-strip > .kz-pcard {
    width: auto;
    margin: 0;
}

.kz-redesign .kz-catp-empty {
    max-width: 60ch;
    margin: 0;
    padding: var(--kz-space-xl) 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-catp-empty p {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

.kz-redesign .kz-catp-empty-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: var(--kz-space-sm);
    color: var(--kz-color-primary);
    font-size: var(--kz-type-body-size);
    line-height: 22px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* «К товарам»: видна только при фокусе с клавиатуры, стоит перед фильтрами */

.kz-redesign .kz-catp-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kz-redesign .kz-catp-skip:focus,
.kz-redesign .kz-catp-skip:focus-visible {
    position: static;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 32px;
    margin-bottom: var(--kz-space-sm);
    overflow: visible;
    clip-path: none;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    text-decoration: underline;
}

/* Карточка товара: белая, граница 1px, радиус 8, фото 4:3 на smoke вписано целиком. Ссылка одна — название,
   её ::after растянут на всю карточку; кнопки-иконки лежат выше */

.kz-redesign .kz-pcard {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-pcard-media {
    position: relative;
    flex: none;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-pcard-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.kz-redesign .kz-pcard-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: var(--kz-space-md);
    object-fit: contain;
    mix-blend-mode: multiply;
    color: transparent;
}

.kz-redesign .kz-pcard.no-available .kz-pcard-thumb img {
    opacity: 0.6;
}

.kz-redesign .kz-pcard-badges {
    position: absolute;
    top: var(--kz-space-sm);
    left: var(--kz-space-sm);
    right: var(--kz-space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-xs);
    pointer-events: none;
}

.kz-redesign .kz-pcard-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 var(--kz-space-sm);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-pcard-badge--stock {
    box-shadow: inset 0 0 0 1px var(--kz-color-line);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-pcard-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--kz-space-md) var(--kz-space-xs) 0;
}

.kz-redesign .kz-pcard-brand {
    margin: 0 0 var(--kz-space-xs);
    padding: 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-pcard-name {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-title-product-size);
    font-weight: var(--kz-type-title-product-weight);
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-pcard-link {
    color: inherit;
    text-decoration: none;
}

.kz-redesign .kz-pcard-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--kz-radius-card);
}

.kz-redesign .kz-pcard-desc {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--kz-space-xs) 0 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow-wrap: break-word;
}

.kz-redesign .kz-pcard-desc:empty,
.kz-redesign .kz-pcard-brief {
    display: none;
}

.kz-redesign .kz-pcard-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-xs) var(--kz-space-md);
    margin-top: auto;
    padding: var(--kz-space-base) var(--kz-space-xs) 0;
}

.kz-redesign .kz-pcard-price {
    flex: 1 1 100%;
    margin: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-data-size);
    font-weight: var(--kz-type-price-weight);
    line-height: var(--kz-type-data-line);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-pcard-price--request {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-pcard-price-old {
    margin-left: var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-weight: var(--kz-type-data-weight);
}

.kz-redesign .kz-pcard-more {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 36px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
}

.kz-redesign .kz-pcard-more::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-catp-arrow) center / contain no-repeat;
    mask: var(--kz-catp-arrow) center / contain no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-pcard-tools {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--kz-space-xs);
    margin-right: -4px;
}

.kz-redesign .kz-pcard-tool {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: none;
    color: var(--kz-color-text-muted);
    cursor: pointer;
}

.kz-redesign .kz-pcard-tool .icon {
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.kz-redesign .kz-pcard-tool.active {
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-primary);
}

/* Вид «списком» (от 768px; ниже scripts.js возвращает плитку): строки с линиями вместо рамок */

@media (min-width: 768px) {
    .kz-redesign .kz-catp .kz-catp-products .kz-catp-grid.list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        border-top: 1px solid var(--kz-color-line);
    }

    .kz-redesign .kz-catp-grid.list > .kz-pcard {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr) 200px;
        column-gap: var(--kz-space-lg);
        align-items: start;
        padding: var(--kz-space-lg) 0;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-link::after {
        border-radius: 0;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-body {
        padding: 0;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-name {
        font-size: var(--kz-type-title-card-size);
        line-height: 24px;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-desc {
        max-width: 70ch;
        font-size: var(--kz-type-text-14-size);
        line-height: 20px;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-brief {
        display: -webkit-box;
        overflow: hidden;
        max-width: 70ch;
        margin: var(--kz-space-sm) 0 0;
        color: var(--kz-color-graphite);
        font-size: var(--kz-type-text-14-size);
        line-height: 20px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow-wrap: break-word;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-brief:empty {
        display: none;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-brief p,
    .kz-redesign .kz-catp-grid.list .kz-pcard-brief div,
    .kz-redesign .kz-catp-grid.list .kz-pcard-brief li {
        display: inline;
        margin: 0;
        padding: 0;
        font: inherit;
        color: inherit;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-foot {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--kz-space-xs);
        margin: 0;
        padding: 0;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-price {
        flex: none;
    }

    .kz-redesign .kz-catp-grid.list .kz-pcard-tools {
        margin: var(--kz-space-xs) 0 0 -8px;
    }
}

/* Страницы: Roboto с табличными цифрами, 44px; текущая — graphite */

.kz-redesign .kz-catp .kz-catp-paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    margin: var(--kz-space-xl) 0 0;
    padding: 0;
}

.kz-redesign .kz-catp .kz-catp-paging > * {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-sm);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-data-size);
    font-weight: 400;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: none;
}

.kz-redesign .kz-catp .kz-catp-paging > .active {
    border-color: var(--kz-color-graphite);
    background: var(--kz-color-graphite);
    color: var(--kz-color-on-dark);
    font-weight: 500;
}

.kz-redesign .kz-catp .kz-catp-paging > .dots {
    min-width: 24px;
    padding: 0;
    border-color: transparent;
    background: none;
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-catp .kz-catp-paging .prev,
.kz-redesign .kz-catp .kz-catp-paging .next {
    color: var(--kz-color-graphite);
    font-size: 18px;
}

.kz-redesign .kz-catp .kz-catp-paging > * > span:not(.kz-cat-vh) {
    display: inline;
    width: auto;
    height: auto;
    color: inherit;
    line-height: inherit;
}

/* Фильтры: группы — нативный <details> с линиями; флажок и переключатель рисуются на самих input (legacy styles.css
   снимает у input внешний вид) */

.kz-redesign .kz-catp-filter-toggle {
    display: none;
}

.kz-redesign .kz-catp-filter form {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-fgroup {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-fgroup:first-of-type {
    border-top: 0;
}

.kz-redesign .kz-catp-fgroup:first-of-type > summary {
    min-height: 36px;
}

.kz-redesign .kz-catp-fgroup > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-md);
    min-height: 48px;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    font-weight: 500;
    line-height: 22px;
    list-style: none;
    cursor: pointer;
}

.kz-redesign .kz-catp-fgroup > summary::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-catp-fgroup > summary::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--kz-color-text-muted);
    -webkit-mask: var(--kz-catp-chevron) center / contain no-repeat;
    mask: var(--kz-catp-chevron) center / contain no-repeat;
}

.kz-redesign .kz-catp-fgroup[open] > summary::after {
    transform: rotate(180deg);
}

.kz-redesign .kz-catp-fvals {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 var(--kz-space-base);
}

.kz-redesign .kz-catp-fvals--row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--kz-space-lg);
}

.kz-redesign .kz-catp-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-md);
    min-width: 0;
    margin: 0;
    padding: var(--kz-space-xs) 0;
}

.kz-redesign .kz-catp-check input[type="checkbox"],
.kz-redesign .kz-catp-check input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--kz-color-graphite);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    cursor: pointer;
}

.kz-redesign .kz-catp-check input[type="radio"] {
    border-radius: 50%;
}

.kz-redesign .kz-catp-check input[type="checkbox"]:checked {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary) var(--kz-catp-check) center / 16px 16px no-repeat;
}

.kz-redesign .kz-catp-check input[type="radio"]:checked {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary);
    box-shadow: inset 0 0 0 4px var(--kz-color-paper);
}

.kz-redesign .kz-catp-check label {
    position: static;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    font-weight: 400;
    line-height: 20px;
    overflow-wrap: break-word;
    cursor: pointer;
}

.kz-redesign .kz-catp-check label::before,
.kz-redesign .kz-catp-check label::after {
    content: none;
}

.kz-redesign .kz-catp-fvals--data label {
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-catp-reset {
    margin: 0;
    padding: var(--kz-space-base) 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-reset.hidden {
    display: none;
}

.kz-redesign .kz-catp-reset .reset_btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Направление: вводный блок 7/12 + 5/12 (менеджер) */

.kz-redesign .kz-catp-about-grid,
.kz-redesign .kz-catp-ask-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--kz-space-xl) var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-catp-about-grid--full {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-catp-about-desc,
.kz-redesign .kz-catp-ask-text p {
    max-width: 72ch;
    margin: 0 0 var(--kz-space-lg);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-catp-about-desc p,
.kz-redesign .kz-catp-about-desc div {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

.kz-redesign .kz-catp-about-desc p + p,
.kz-redesign .kz-catp-about-desc div + div {
    margin-top: var(--kz-space-md);
}

.kz-redesign .kz-catp-manager {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-base);
    min-width: 0;
    padding-left: var(--kz-space-xl);
    border-left: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-ask .kz-catp-manager {
    flex-direction: column;
    gap: var(--kz-space-xs);
}

.kz-redesign .kz-catp-manager-photo {
    flex: none;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-catp-manager-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent;
}

.kz-redesign .kz-catp-manager-body {
    min-width: 0;
}

.kz-redesign .kz-catp-manager-name {
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-title-card-size);
    font-weight: var(--kz-type-title-card-weight);
    line-height: 24px;
}

.kz-redesign .kz-catp-manager-post {
    margin: 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-catp-manager-contacts {
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-text-14-size);
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    list-style: none;
}

.kz-redesign .kz-catp-manager-contacts li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-catp-manager-contacts a {
    display: inline-block;
    color: var(--kz-color-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Направление: товары подкатегорий — заголовок, «N моделей» и до четырёх карточек */

.kz-redesign .kz-catp-group {
    padding: 0 0 var(--kz-space-xxl);
}

.kz-redesign .kz-catp-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-catp-group-title {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-catp-group-all {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 24px;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.kz-redesign .kz-catp-group-all::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-catp-arrow) center / contain no-repeat;
    mask: var(--kz-catp-arrow) center / contain no-repeat;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-catp-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-catp-gap);
    margin: 0;
    padding: 0;
}

/* Пустой блок баннеров (templates/banners_center.tpl.php выводит пустую секцию) не добавляет отступов */

.kz-redesign .kz-catp > .banners {
    margin: 0;
    padding: 0;
}

/* Теги */

/* Второстепенные разделы (теги, текст CMS, вопросы) — шкала heading-3, как у заголовков групп товаров */

.kz-redesign .kz-catp-tags .kz-catp-h2,
.kz-redesign .kz-catp-seo .kz-catp-h2,
.kz-redesign .kz-catp-ask .kz-catp-h2 {
    margin-bottom: var(--kz-space-base);
    font-size: var(--kz-type-heading-3-size);
    line-height: var(--kz-type-heading-3-line);
}

/* SEO-текст CMS: мера около 80 знаков; свёрнут только при работающем скрипте (kz-category.js добавляет класс и кнопку) */

.kz-redesign .kz-catp-seo-text {
    max-width: 80ch;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-catp-seo--clamp .kz-catp-seo-text {
    overflow: hidden;
}

.kz-redesign .kz-catp-seo-text > :first-child {
    margin-top: 0;
}

.kz-redesign .kz-catp-seo-text > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-catp-seo-text p,
.kz-redesign .kz-catp-seo-text div {
    margin: 0 0 var(--kz-space-base);
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

.kz-redesign .kz-catp-seo-text h2,
.kz-redesign .kz-catp-seo-text h3,
.kz-redesign .kz-catp-seo-text h4 {
    margin: var(--kz-space-xl) 0 var(--kz-space-md);
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-catp-seo-text h3,
.kz-redesign .kz-catp-seo-text h4 {
    margin-top: var(--kz-space-lg);
    font-size: var(--kz-type-body-size);
    line-height: 22px;
    letter-spacing: 0;
}

.kz-redesign .kz-catp-seo-text ul,
.kz-redesign .kz-catp-seo-text ol {
    margin: 0 0 var(--kz-space-base);
    padding: 0 0 0 var(--kz-space-lg);
    list-style: disc outside;
}

.kz-redesign .kz-catp-seo-text ol {
    list-style: decimal outside;
}

.kz-redesign .kz-catp-seo-text li {
    margin: 0 0 var(--kz-space-xs);
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    list-style: inherit;
}

.kz-redesign .kz-catp-seo-text li::before {
    content: none;
}

.kz-redesign .kz-catp-seo-text strong,
.kz-redesign .kz-catp-seo-text b {
    font-weight: 500;
}

.kz-redesign .kz-catp-seo-text img,
.kz-redesign .kz-catp-seo-text iframe {
    display: block;
    max-width: 100%;
    margin: var(--kz-space-base) 0;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-catp-seo-text img {
    height: auto;
}

.kz-redesign .kz-catp-seo-text table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    margin: 0 0 var(--kz-space-base);
    border-collapse: collapse;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-catp-seo-text td,
.kz-redesign .kz-catp-seo-text th {
    padding: var(--kz-space-sm) var(--kz-space-md) var(--kz-space-sm) 0;
    border-bottom: 1px solid var(--kz-color-line);
    text-align: left;
    vertical-align: top;
}

.kz-redesign .kz-catp-seo-text blockquote {
    margin: 0 0 var(--kz-space-base);
    padding: 0 0 0 var(--kz-space-base);
    border-left: 2px solid var(--kz-color-line);
}

.kz-redesign .kz-catp-seo-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 36px;
    margin: var(--kz-space-base) 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kz-color-primary);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    cursor: pointer;
}

.kz-redesign .kz-catp-seo-toggle::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-catp-chevron) center / contain no-repeat;
    mask: var(--kz-catp-chevron) center / contain no-repeat;
}

.kz-redesign .kz-catp-seo-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Фокус: кольцо 2px primary с отступом 2px; у button, summary и input — с !important из-за legacy-сброса обводки */

.kz-redesign .kz-catp button:focus-visible,
.kz-redesign .kz-catp summary:focus-visible,
.kz-redesign .kz-catp input:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-catp .kz-pcard-link:focus-visible {
    outline: none;
}

.kz-redesign .kz-catp .kz-pcard-link:focus-visible::after {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-catp-subnav a:hover,
    .kz-redesign .kz-catp-tag:hover {
        border-color: var(--kz-color-primary);
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-catp-tile:hover {
        border-color: var(--kz-color-primary);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-catp-tile:hover::after {
        background: var(--kz-color-primary);
    }

    .kz-redesign .kz-catp-sort .btn:hover {
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-catp .kz-catp-views .btn:hover {
        color: var(--kz-color-graphite);
        opacity: 1;
    }

    .kz-redesign .kz-pcard:hover {
        border-color: var(--kz-color-primary);
    }

    .kz-redesign .kz-pcard:hover .kz-pcard-more::after,
    .kz-redesign .kz-catp-group-all:hover::after {
        transform: translateX(4px);
    }

    .kz-redesign .kz-pcard-tool:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-pcard-tool.active:hover {
        background: var(--kz-color-primary-soft);
        color: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-catp .kz-catp-paging a:hover {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-paper);
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-catp-check label:hover {
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-catp-fgroup > summary:hover::after {
        background: var(--kz-color-primary);
    }

    .kz-redesign .kz-catp-price:hover,
    .kz-redesign .kz-catp-group-all:hover,
    .kz-redesign .kz-catp-reset .reset_btn:hover,
    .kz-redesign .kz-catp-seo-toggle:hover,
    .kz-redesign .kz-catp-manager-contacts a:hover {
        color: var(--kz-color-primary-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-catp-lead a:hover,
    .kz-redesign .kz-catp-about-desc a:hover,
    .kz-redesign .kz-catp-seo-text a:hover {
        color: var(--kz-color-primary-hover);
    }
}

.kz-redesign .kz-pcard-tool:active {
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-primary-active);
}

/* Нажатие видно и при касании: рамка primary у карточки, primary-soft у плитки, чипа и номера страницы */

.kz-redesign .kz-pcard-link:active::after {
    box-shadow: inset 0 0 0 1px var(--kz-color-primary);
}

.kz-redesign .kz-catp-tile:active,
.kz-redesign .kz-catp-subnav a:active,
.kz-redesign .kz-catp-tag:active,
.kz-redesign .kz-catp .kz-catp-paging a:active {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
}

@media (pointer: coarse) {
    .kz-redesign .kz-pcard-tool {
        width: 44px;
        height: 44px;
    }

    .kz-redesign .kz-catp-sort .btn,
    .kz-redesign .kz-catp-seo-toggle,
    .kz-redesign .kz-catp-reset .reset_btn,
    .kz-redesign .kz-catp-group-all {
        min-height: 44px;
    }

    .kz-redesign .kz-catp-subnav a,
    .kz-redesign .kz-catp-subnav span,
    .kz-redesign .kz-catp-tag {
        min-height: 36px;
    }

    .kz-redesign .kz-catp-check {
        padding: var(--kz-space-md) 0;
    }
}

@media (max-width: 1279px) {
    .kz-redesign .kz-catp {
        --kz-catp-gap: var(--kz-space-base);
    }
}

/* До 1023px: фильтры сворачиваются под кнопку (её раскрывает scripts.js: .mob_filter_btn и следующий элемент),
   лента товаров направления прокручивается по горизонтали */

@media (min-width: 1024px) {
    .kz-redesign .kz-catp .kz-catp-filter {
        display: block !important;
        height: auto !important;
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-catp-title {
        max-width: none;
        font-size: var(--kz-type-heading-1-mobile-size);
        line-height: 38px;
    }

    .kz-redesign .kz-catp-actions {
        min-height: 0;
    }

    .kz-redesign .kz-catp-layout--filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-catp .kz-catp-filter-toggle {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--kz-space-sm);
        width: auto;
        min-width: 160px;
        height: 44px;
        margin: 0;
        padding: 0 var(--kz-space-card-padding);
        border: 1px solid var(--kz-color-graphite);
        border-radius: var(--kz-radius-control);
        background: var(--kz-color-paper);
        color: var(--kz-color-graphite);
        font-family: var(--kz-font-ui);
        font-size: var(--kz-type-button-size);
        font-weight: var(--kz-type-button-weight);
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
    }

    .kz-redesign .kz-catp-filter-toggle::after {
        content: "";
        display: block;
        flex: none;
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: var(--kz-catp-chevron) center / contain no-repeat;
        mask: var(--kz-catp-chevron) center / contain no-repeat;
    }

    .kz-redesign .kz-catp-filter-toggle.active::after {
        transform: rotate(180deg);
    }

    .kz-redesign .kz-catp-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: var(--kz-radius-chip);
        background: var(--kz-color-graphite);
        color: var(--kz-color-on-dark);
        font-family: var(--kz-font-data);
        font-size: var(--kz-type-label-size);
        font-weight: 500;
        line-height: 1;
    }

    .kz-redesign .kz-catp-filter-count[hidden] {
        display: none;
    }

    .kz-redesign .kz-catp-filter {
        display: none;
        margin-top: var(--kz-space-base);
    }

    .kz-redesign .kz-catp-tiles ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kz-redesign .kz-catp-about-grid,
    .kz-redesign .kz-catp-ask-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-catp-manager {
        padding: var(--kz-space-lg) 0 0;
        border-top: 1px solid var(--kz-color-line);
        border-left: 0;
    }

    .kz-redesign .kz-catp-strip {
        display: flex;
        overflow-x: auto;
        margin: 0 -4px;
        padding: 4px 4px var(--kz-space-md);
        scroll-snap-type: x proximity;
        scroll-padding: 0 4px;
        scrollbar-width: thin;
        scrollbar-color: var(--kz-color-line) transparent;
    }

    .kz-redesign .kz-catp .kz-catp-strip > .kz-pcard {
        flex: 0 0 min(66%, 264px);
        scroll-snap-align: start;
    }

    .kz-redesign .kz-catp-grid.list > .kz-pcard {
        grid-template-columns: 160px minmax(0, 1fr) 176px;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-catp-hero {
        padding-bottom: var(--kz-space-lg);
    }

    .kz-redesign .kz-catp-head {
        flex-direction: column;
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-catp-actions {
        justify-content: flex-start;
    }

    .kz-redesign .kz-catp .kz-catp-views {
        display: none;
    }

    .kz-redesign .kz-catp-sort-label {
        display: none;
    }

    .kz-redesign .kz-catp-sort {
        gap: 0 var(--kz-space-base);
    }

    .kz-redesign .kz-catp-tiles ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--kz-space-sm);
    }

    /* Подкатегории — одна прокручиваемая строка: товары остаются ближе к началу страницы */

    .kz-redesign .kz-catp-subnav {
        margin-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-catp-subnav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 calc(var(--kz-gutter-mobile) * -1);
        padding: 4px var(--kz-gutter-mobile);
        scroll-padding: 0 var(--kz-gutter-mobile);
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .kz-redesign .kz-catp-subnav ul::-webkit-scrollbar {
        display: none;
    }

    .kz-redesign .kz-catp-subnav li {
        flex: none;
        scroll-snap-align: start;
    }

    .kz-redesign .kz-catp-subnav a,
    .kz-redesign .kz-catp-subnav span {
        white-space: nowrap;
    }

    .kz-redesign .kz-catp-tile {
        min-height: 56px;
        padding: var(--kz-space-sm) var(--kz-space-md);
        font-size: var(--kz-type-text-14-size);
        line-height: 20px;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .kz-redesign .kz-catp-section {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-catp-section > .kz-cat-inner::before,
    .kz-redesign .kz-catp-group > .kz-cat-inner::before {
        margin-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-catp-main,
    .kz-redesign .kz-catp > .kz-catp-section:last-of-type {
        padding-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-catp-group {
        padding-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-catp-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-catp-group-title,
    .kz-redesign .kz-catp-tags .kz-catp-h2,
    .kz-redesign .kz-catp-seo .kz-catp-h2,
    .kz-redesign .kz-catp-ask .kz-catp-h2,
    .kz-redesign .kz-catp-seo-text h2 {
        font-size: var(--kz-type-heading-3-mobile-size);
        line-height: 24px;
    }

    .kz-redesign .kz-catp .kz-catp-paging > * {
        min-width: 40px;
        height: 44px;
        padding: 0 var(--kz-space-xs);
    }

    .kz-redesign .kz-catp .kz-catp-paging {
        gap: var(--kz-space-xs);
    }
}

/* До 575px: товар строкой — фото слева, текст справа, цена и иконки под ними; «Подробнее» не выводится
   (вся карточка — ссылка) */

@media (max-width: 575px) {
    .kz-redesign .kz-catp .kz-catp-products .kz-catp-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-md);
    }

    .kz-redesign .kz-catp-grid > .kz-pcard {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: var(--kz-space-md);
        align-items: start;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-body {
        padding: 0;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-thumb img {
        padding: var(--kz-space-sm);
    }

    /* Фото и метки — отдельные ячейки сетки: фото слева на две строки, метки над текстом */

    .kz-redesign .kz-catp-grid .kz-pcard-media {
        display: contents;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-thumb {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: var(--kz-radius-control);
        background: var(--kz-color-smoke);
    }

    .kz-redesign .kz-catp-grid .kz-pcard-badges {
        position: static;
        grid-column: 2;
        grid-row: 1;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-badge {
        margin-bottom: var(--kz-space-xs);
    }

    .kz-redesign .kz-catp-grid .kz-pcard-body {
        grid-column: 2;
        grid-row: 2;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-foot {
        grid-column: 1 / -1;
        grid-row: 3;
        flex-wrap: nowrap;
        padding: var(--kz-space-sm) 0 0;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-price {
        flex: 1 1 auto;
        min-width: 0;
    }

    .kz-redesign .kz-catp-grid .kz-pcard-more,
    .kz-redesign .kz-catp-strip .kz-pcard-more {
        display: none;
    }

    .kz-redesign .kz-catp-strip .kz-pcard-tools {
        margin: 0 0 0 -8px;
    }

    .kz-redesign .kz-catp .kz-catp-filter-toggle {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .kz-redesign .kz-catp-title {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 16 8 6;
    }

    .kz-redesign .kz-catp-tiles ul {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        border-top: 1px solid var(--kz-color-line);
    }

    .kz-redesign .kz-catp-tile {
        min-height: 48px;
        padding: var(--kz-space-sm) 0;
        border-width: 0 0 1px;
        border-color: var(--kz-color-line);
        border-radius: 0;
        background: none;
        font-size: var(--kz-type-body-size);
        line-height: 22px;
    }

    .kz-redesign .kz-catp-sort {
        gap: 0 var(--kz-space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-pcard-more::after,
    .kz-redesign .kz-catp-group-all::after {
        transition: none;
    }

    .kz-redesign .kz-pcard:hover .kz-pcard-more::after,
    .kz-redesign .kz-catp-group-all:hover::after {
        transform: none;
    }
}

@media (forced-colors: active) {
    .kz-redesign .kz-catp-check input[type="checkbox"],
    .kz-redesign .kz-catp-check input[type="radio"] {
        -webkit-appearance: auto;
        appearance: auto;
    }
}

@media print {
    .kz-redesign .kz-catp-actions,
    .kz-redesign .kz-catp-aside,
    .kz-redesign .kz-catp-bar,
    .kz-redesign .kz-pcard-tools,
    .kz-redesign .kz-pcard-more,
    .kz-redesign .kz-catp-seo-toggle {
        display: none;
    }

    .kz-redesign .kz-catp-seo--clamp .kz-catp-seo-text {
        max-height: none !important;
    }
}

/*
 * Страницы направлений каталога, этап 5.7B: templates/kz/catalog_category_show.tpl.php (.kz-catp--dir). Доработка этапа
 * 5.7A только для страницы направления; список товаров подкатегории, карточки, фильтры и страницы не затронуты.
 * Поверхности по порядку: белый первый экран (крошки, H1, подпись из title_body, «Запросить КП») → полоса smoke с
 * плитками подкатегорий (навигация) → белая зона (вводный текст, товары подкатегорий, теги) → полоса primary-soft
 * «Не нашли нужное?» с кнопками и менеджером направления (обращение) → белая статья → графитовый футер. Тонированная
 * полоса на странице одна (DESIGN.md, Colors). Градиентов, теней и фоновых фото нет.
 * Нижний текст CMS — статья (.kz-catp-article): колонка 7/12 с мерой около 69 знаков, слева содержание по заголовкам текста
 * (строит kz-category.js, если заголовков три и больше) или заголовок текста. Текст поля выводится дословно.
 */

/* Первый экран: подпись под H1 — шкала lead 18/28. Мера задаётся в ch с поправкой: в PT Root UI кириллическая
   строка в N ch вмещает примерно на 8% больше знаков (замер 5.7A: 72ch — 77–80 знаков), поэтому 64ch ≈ 69 знаков.
   Подпись — до 40em: две строки на 1440 и 768px */

.kz-redesign .kz-catp--dir .kz-catp-hero {
    padding-bottom: var(--kz-space-xxl);
}

.kz-redesign .kz-catp--dir .kz-cat-crumbs .breadcrumbs a {
    transition: none;
}

.kz-redesign .kz-catp-head-text {
    min-width: 0;
}

.kz-redesign .kz-catp--dir .kz-catp-title {
    text-wrap: balance;
}

.kz-redesign .kz-catp-caption {
    max-width: 40em;
    margin: var(--kz-space-lg) 0 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
    text-wrap: pretty;
}

/* Подкатегории: полоса smoke на всю ширину, плитки белые с рамкой line; под названием — число моделей из CMS */

.kz-redesign .kz-catp-subs {
    padding: var(--kz-space-xl) 0;
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-catp-subs .kz-catp-tiles {
    margin: 0;
}

.kz-redesign .kz-catp-subs .kz-catp-tile {
    min-height: 72px;
    border-color: var(--kz-color-line);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-catp-subs .kz-catp-tile:active {
    background: var(--kz-color-primary-soft);
}

/* 768–1279px — три колонки: в четырёх названия подкатегорий ломаются на три-четыре строки */

@media (min-width: 768px) and (max-width: 1279px) {
    .kz-redesign .kz-catp-subs .kz-catp-tiles ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kz-redesign .kz-catp-tile-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--kz-space-xs);
    min-width: 0;
}

.kz-redesign .kz-catp-tile-count {
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-small-size);
    font-weight: 400;
    line-height: var(--kz-type-small-line);
    font-variant-numeric: tabular-nums;
}

/* Вводный блок: заголовок слева 5/12, текст и «Задать вопрос» справа 7/12 (DESIGN.md, Layout); линии сверху нет —
   блок идёт сразу под полосой подкатегорий */

.kz-redesign .kz-catp--dir .kz-catp-about > .kz-cat-inner::before {
    content: none;
}

.kz-redesign .kz-catp--dir .kz-catp-about-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.kz-redesign .kz-catp--dir .kz-catp-about-grid--full {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-catp--dir .kz-catp-about .kz-catp-h2 {
    max-width: 16em;
    margin: 0;
    text-wrap: balance;
}

.kz-redesign .kz-catp--dir .kz-catp-about-desc {
    max-width: 64ch;
    margin-bottom: 0;
}

.kz-redesign .kz-catp-about--clamp .kz-catp-about-desc {
    overflow: hidden;
}

.kz-redesign .kz-catp-seo-toggle[hidden] {
    display: none;
}

/* Полоса обращения: единственная тонированная полоса страницы (primary-soft). Слева заголовок, фраза и кнопка КП,
   справа — менеджер направления за линией; без менеджера кнопка стоит справа от текста */

.kz-redesign .kz-catp-request {
    padding: var(--kz-space-xxl) 0;
    background: var(--kz-color-primary-soft);
}

.kz-redesign .kz-catp-request-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kz-space-xl) var(--kz-space-xxl);
    align-items: center;
}

.kz-redesign .kz-catp-request--manager .kz-catp-request-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.kz-redesign .kz-catp-request-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--kz-space-xl);
    align-items: center;
    min-width: 0;
}

.kz-redesign .kz-catp-request--manager .kz-catp-request-text {
    display: block;
}

.kz-redesign .kz-catp-request-title {
    grid-column: 1;
    margin: 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-2-size);
    font-weight: var(--kz-type-heading-2-weight);
    line-height: var(--kz-type-heading-2-line);
    letter-spacing: var(--kz-type-heading-2-tracking);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-catp-request-text p {
    grid-column: 1;
    max-width: 48ch;
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-lead-size);
    line-height: var(--kz-type-lead-line);
}

.kz-redesign .kz-catp-request-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: var(--kz-space-md) var(--kz-space-base);
}

.kz-redesign .kz-catp-request--manager .kz-catp-request-actions {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-catp-request-actions .kz-cat-request {
    margin: 0;
}

/* Менеджер в полосе — белая карточка с рамкой line (радиус 8, отступ 20), а не колонка за линией */

.kz-redesign .kz-catp-request .kz-catp-manager {
    box-sizing: border-box;
    justify-self: end;
    width: 100%;
    max-width: 440px;
    padding: var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

/* Под тонированной полосой линия не нужна: границу задаёт смена поверхности */

.kz-redesign .kz-catp-request ~ .kz-catp-section {
    padding-top: var(--kz-space-xxl);
}

.kz-redesign .kz-catp-request ~ .kz-catp-section > .kz-cat-inner::before {
    content: none;
}

/* После групп товаров раздел тегов не добавляет второй отбивки сверху */

.kz-redesign .kz-catp-groups + .kz-catp-section {
    padding-top: 0;
}

/* Теги стоят перед полосой: отбивка до неё — как у разделов */

.kz-redesign .kz-catp--dir .kz-catp-tags {
    padding-bottom: var(--kz-space-xxl);
}

/* Статья: текст CMS в колонке 7/12 (как вводный текст выше), мера около 69 знаков; слева заголовок текста (если он
   выводится) и под ним содержание */

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

.kz-redesign .kz-catp-article > .kz-cat-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-catp-article > .kz-cat-inner::before {
    grid-column: 1 / -1;
}

.kz-redesign .kz-catp-article .kz-catp-h2 {
    grid-column: 1;
    grid-row: 2;
}

.kz-redesign .kz-catp-article .kz-catp-toc {
    grid-column: 1;
    grid-row: 3;
}

.kz-redesign .kz-catp-article .kz-catp-h2 + .kz-catp-toc {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-catp-article .kz-catp-h2 {
    max-width: 16em;
    margin: 0;
    font-size: var(--kz-type-heading-2-size);
    line-height: var(--kz-type-heading-2-line);
    text-wrap: balance;
}

.kz-redesign .kz-catp-article-body {
    grid-column: 2;
    grid-row: 2 / span 2;
    min-width: 0;
}

/* Слева нечего поставить (заголовок текста не выводится, содержания нет — в тексте меньше трёх заголовков или скрипт
   не сработал): текст идёт одной колонкой от левого края, пустая колонка 5/12 не остаётся */

.kz-redesign .kz-catp-article:not(.kz-catp-article--head):not(.kz-catp-article--toc) > .kz-cat-inner {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-catp-article:not(.kz-catp-article--head):not(.kz-catp-article--toc) .kz-catp-article-body {
    grid-column: 1;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text {
    max-width: 64ch;
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text p,
.kz-redesign .kz-catp-article .kz-catp-seo-text div {
    margin: 0 0 var(--kz-space-base);
}

/* Иерархия: H2 — 24/30 с отбивкой 48px сверху, H3 — 18/26 с 32px, H4 — 16/25 Medium; основной текст 16/25. H2 статьи
   крупнее заголовков групп товаров (20/26), но меньше заголовков разделов страницы (30/36) */

.kz-redesign .kz-catp-article .kz-catp-seo-text h2,
.kz-redesign .kz-catp-article .kz-catp-seo-text h3,
.kz-redesign .kz-catp-article .kz-catp-seo-text h4 {
    max-width: 30em;
    margin: var(--kz-space-xxl) 0 var(--kz-space-md);
    scroll-margin-top: var(--kz-space-lg);
    text-wrap: balance;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text h2 {
    font-size: var(--kz-type-heading-2-mobile-size);
    line-height: 30px;
    letter-spacing: var(--kz-type-heading-2-tracking);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text h3 {
    margin-top: var(--kz-space-xl);
    margin-bottom: var(--kz-space-sm);
    font-size: var(--kz-type-title-card-size);
    line-height: 26px;
    letter-spacing: 0;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text h4 {
    margin-top: var(--kz-space-lg);
    margin-bottom: var(--kz-space-sm);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
    letter-spacing: 0;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text > :first-child,
.kz-redesign .kz-catp-article .kz-catp-seo-text > div:first-child > :first-child {
    margin-top: 0;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text h2:focus {
    outline: none;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text h2:focus-visible,
.kz-redesign .kz-catp-article .kz-catp-seo-text h3:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Списки: маркер в цвет вторичного текста, пункты через 8px; пустые абзацы редактора не дают отбивки */

.kz-redesign .kz-catp-article .kz-catp-seo-text ul,
.kz-redesign .kz-catp-article .kz-catp-seo-text ol {
    margin: 0 0 var(--kz-space-base);
    padding: 0 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text li {
    margin: 0 0 var(--kz-space-sm);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text li::marker {
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text li:last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text p:empty,
.kz-redesign .kz-catp-article .kz-catp-seo-text div:empty {
    display: none;
}

/* Разметка редактора: несколько списков в соседних блоках (div > div > ul) встают колонками; блок-цитата
   (div с вложенным div.inner или blockquote) — панель primary-soft */

.kz-redesign .kz-catp-article .kz-catp-seo-text > div:has(> div > ul) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 var(--kz-space-lg);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text > div:has(> div > ul) > div {
    margin: 0;
}

/* Правила для blockquote записаны отдельно от :has(): браузер без :has() отбрасывает весь список селекторов */

.kz-redesign .kz-catp-article .kz-catp-seo-text blockquote {
    margin: var(--kz-space-lg) 0;
    padding: var(--kz-space-base) var(--kz-space-card-padding);
    border: 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-primary-soft);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text > div:has(> .inner) {
    margin: var(--kz-space-lg) 0;
    padding: var(--kz-space-base) var(--kz-space-card-padding);
    border: 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-primary-soft);
}

.kz-redesign .kz-catp-article .kz-catp-seo-text blockquote > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text > div:has(> .inner) > .inner,
.kz-redesign .kz-catp-article .kz-catp-seo-text > div:has(> .inner) p:last-child {
    margin-bottom: 0;
}

/* Таблицы: строки с линиями, заголовок Medium, цифры Roboto; широкая таблица прокручивается внутри колонки */

.kz-redesign .kz-catp-article .kz-catp-seo-text table {
    width: auto;
    margin: var(--kz-space-lg) 0;
    border-top: 1px solid var(--kz-color-line);
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text th,
.kz-redesign .kz-catp-article .kz-catp-seo-text td {
    padding: var(--kz-space-sm) var(--kz-space-base) var(--kz-space-sm) 0;
}

.kz-redesign .kz-catp-article .kz-catp-seo-text th {
    font-family: var(--kz-font-ui);
    font-weight: 500;
}

/* Содержание статьи (строит kz-category.js по заголовкам текста): ссылки 14/20 с линиями, вложенные H3 — с отступом */

.kz-redesign .kz-catp-toc {
    align-self: start;
    max-width: 22em;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-catp-toc-title {
    margin: 0 0 var(--kz-space-md);
    padding: 0;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-catp-toc ol {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-catp-toc li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--kz-color-line);
    list-style: none;
}

.kz-redesign .kz-catp-toc li::before {
    content: none;
}

/* Пункты H3 — вложенный список внутри пункта своего H2: линии те же, что в плоском списке */

.kz-redesign .kz-catp-toc ol ol li:last-child {
    border-bottom: 0;
}

.kz-redesign .kz-catp-toc a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: var(--kz-space-sm) 0;
    box-sizing: border-box;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-catp-toc .kz-catp-toc-sub a {
    padding-left: var(--kz-space-base);
    color: var(--kz-color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-catp-toc a:hover {
        color: var(--kz-color-primary);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.kz-redesign .kz-catp-toc a:active {
    color: var(--kz-color-primary-active);
}

@media (pointer: coarse) {
    .kz-redesign .kz-catp-toc a {
        min-height: 44px;
    }
}

/* До 1023px: всё в одну колонку; в полосе обращения порядок — заголовок и фраза, кнопка, менеджер */

@media (max-width: 1023px) {
    .kz-redesign .kz-catp--dir .kz-catp-about-grid,
    .kz-redesign .kz-catp-request--manager .kz-catp-request-grid,
    .kz-redesign .kz-catp-article > .kz-cat-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-catp--dir .kz-catp-about-grid {
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-catp--dir .kz-catp-about .kz-catp-h2,
    .kz-redesign .kz-catp-article .kz-catp-h2 {
        max-width: none;
    }

    .kz-redesign .kz-catp--dir .kz-catp-about .kz-catp-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-catp-request .kz-catp-manager {
        justify-self: start;
        padding: var(--kz-space-card-padding);
        border: 1px solid var(--kz-color-line);
    }

    .kz-redesign .kz-catp-article .kz-catp-h2,
    .kz-redesign .kz-catp-article .kz-catp-toc,
    .kz-redesign .kz-catp-article-body {
        grid-column: 1;
        grid-row: auto;
    }

    .kz-redesign .kz-catp-article .kz-catp-h2,
    .kz-redesign .kz-catp-article .kz-catp-toc {
        margin-bottom: var(--kz-space-lg);
    }

    .kz-redesign .kz-catp-toc {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-catp--dir .kz-catp-hero {
        padding-bottom: var(--kz-space-xl);
    }

    .kz-redesign .kz-catp-caption {
        margin-top: var(--kz-space-base);
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-catp-subs {
        padding: var(--kz-space-lg) 0;
    }

    .kz-redesign .kz-catp-subs .kz-catp-tile {
        min-height: 64px;
    }

    .kz-redesign .kz-catp-request {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-catp-request-text {
        display: block;
    }

    .kz-redesign .kz-catp-request-title {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-catp-request-text p {
        font-size: var(--kz-type-body-size);
        line-height: var(--kz-type-body-line);
    }

    .kz-redesign .kz-catp-request-actions {
        margin-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-catp-request ~ .kz-catp-section {
        padding-top: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-catp--dir .kz-catp-tags {
        padding-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-catp-article .kz-catp-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-catp-article .kz-catp-seo-text h2,
    .kz-redesign .kz-catp-article .kz-catp-seo-text h3,
    .kz-redesign .kz-catp-article .kz-catp-seo-text h4 {
        margin-top: var(--kz-space-xl);
    }

    .kz-redesign .kz-catp-article .kz-catp-seo-text h2 {
        font-size: var(--kz-type-heading-3-size);
        line-height: var(--kz-type-heading-3-line);
    }

    .kz-redesign .kz-catp-article .kz-catp-seo-text h3 {
        margin-top: var(--kz-space-lg);
        line-height: 24px;
    }

    .kz-redesign .kz-catp-toc-title {
        font-size: var(--kz-type-heading-3-mobile-size);
        line-height: 24px;
    }
}

@media (max-width: 575px) {
    .kz-redesign .kz-catp-request-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kz-redesign .kz-catp-request-actions .kz-btn {
        width: 100%;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-catp-request .kz-catp-manager-contacts a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .kz-redesign .kz-catp-request .kz-catp-manager-contacts {
        margin-top: 0;
    }
}

/* До 479px плитки — строки на полосе smoke: название слева, число моделей справа */

@media (max-width: 479px) {
    .kz-redesign .kz-catp-subs {
        padding: var(--kz-space-sm) 0;
    }

    .kz-redesign .kz-catp-subs .kz-catp-tiles ul {
        border-top: 0;
    }

    .kz-redesign .kz-catp-subs .kz-catp-tile {
        min-height: 48px;
        background: none;
    }

    .kz-redesign .kz-catp-subs .kz-catp-tiles li:last-child .kz-catp-tile {
        border-bottom-width: 0;
    }

    .kz-redesign .kz-catp-tile-text {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--kz-space-md);
    }

    .kz-redesign .kz-catp-tile-count {
        flex: none;
    }
}

@media print {
    .kz-redesign .kz-catp-request-actions,
    .kz-redesign .kz-catp-toc {
        display: none;
    }

    .kz-redesign .kz-catp-about--clamp .kz-catp-about-desc {
        max-height: none !important;
    }
}

/*
 * Пилот страницы направления, этап 5.7C (2026-10-05, не утверждён владельцем). Направление «Чертёжная синь» под логотип
 * 4.2H.3 (вариант B): цвета взяты из семейства логотипа. Действует только внутри обёртки .kz-dir шаблона
 * templates/kz/catalog_category_show.tpl.php; остальные страницы, в том числе список товаров подкатегории, этих
 * правил не получают. Откат — убрать класс kz-dir из шаблона (или вернуть шаблон 5.7B из
 * _project_docs/handoff/2026-10-05/rollback-5.7B/).
 * Поверхности несут смысл: тёмный ink — выбор раздела (первый экран с подкатегориями), светлый mist — оборудование
 * (товары и теги), белый — чтение (вводный текст, статья), синий — обращение (полоса «Не нашли нужное?»), графит — футер.
 * Без градиентов, теней, фоновых фото и декоративных фигур. Красный центр знака в интерфейсе не используется.
 */

.kz-redesign .kz-dir {
    --kz-dir-ink: #0E244C;
    --kz-dir-blue: #193F8F;
    --kz-dir-sky: #B9C9F2;
    --kz-dir-glow: #6D91FF;
    --kz-dir-on-ink: #FFFFFF;
    --kz-dir-on-ink-2: #D3DDF4;
    --kz-dir-on-ink-line: rgba(255, 255, 255, 0.16);
    --kz-dir-on-ink-fill: rgba(255, 255, 255, 0.06);
    --kz-dir-on-ink-fill-hover: rgba(255, 255, 255, 0.11);
    --kz-dir-mist: #EEF2F9;
    --kz-dir-mist-line: #D3DCEB;
    --kz-dir-text: #2B2D41;
    --kz-dir-text-2: #4A4D63;
    --kz-dir-body-size: 17px;
    --kz-dir-body-line: 28px;
    --kz-dir-read: 680px;
    --kz-dir-media-hover: #E6ECF8;
    color: var(--kz-dir-text);
}

/* ---------- Первый экран: ink, H1, подпись, «Запросить КП» и подкатегории ---------- */

.kz-redesign .kz-dir .kz-dir-hero {
    padding: var(--kz-space-xl) 0 56px;
    background: var(--kz-dir-ink);
    color: var(--kz-dir-on-ink);
}

.kz-redesign .kz-dir .kz-dir-hero .kz-cat-crumbs .breadcrumbs {
    color: var(--kz-dir-on-ink-2);
}

.kz-redesign .kz-dir .kz-dir-hero .kz-cat-crumbs .breadcrumbs a,
.kz-redesign .kz-dir .kz-dir-hero .kz-cat-crumbs .breadcrumbs .sep {
    color: var(--kz-dir-sky);
}

.kz-redesign .kz-dir .kz-dir-head {
    align-items: flex-end;
}

.kz-redesign .kz-dir .kz-dir-title {
    max-width: 18em;
    color: var(--kz-dir-on-ink);
    font-size: clamp(36px, 2vw + 20px, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* «Тепловизионная» линия под H1 на тёмном: сплошная accent-light вместо градиента (его начало не видно на ink) */

.kz-redesign .kz-dir .kz-dir-title.kz-page-title--thermal::after {
    background: var(--kz-dir-glow);
}

.kz-redesign .kz-dir .kz-dir-caption {
    max-width: 38em;
    margin-top: var(--kz-space-lg);
    color: var(--kz-dir-on-ink-2);
    font-size: 20px;
    line-height: 30px;
}

.kz-redesign .kz-dir .kz-dir-actions {
    min-height: 0;
    padding-bottom: var(--kz-space-xs);
}

/* «Запросить КП» на тёмных поверхностях — белая кнопка с текстом ink: на синем и ink зелёная кнопка не читается
   как кнопка (контраст заливки с фоном около 1,5:1). Та же кнопка и та же форма КП этапа 5.6 */

.kz-redesign .kz-dir .kz-dir-hero .kz-cat-request,
.kz-redesign .kz-dir .kz-catp-request .kz-cat-request {
    background: var(--kz-color-paper);
    color: var(--kz-dir-ink);
}

.kz-redesign .kz-dir .kz-dir-hero .kz-cat-request:active,
.kz-redesign .kz-dir .kz-catp-request .kz-cat-request:active {
    background: #C7D5F5;
    color: var(--kz-dir-ink);
}

.kz-redesign .kz-dir .kz-dir-hero .kz-catp-price {
    color: var(--kz-dir-sky);
}

/* Подкатегории: плитки на ink. Слева изображение подкатегории из CMS на белой подложке (без изображения — первая
   буква названия), название 17/22, под ним число моделей Roboto 14/20 цвета sky; справа шеврон */

.kz-redesign .kz-dir .kz-dir-cats {
    margin: 40px 0 0;
}

.kz-redesign .kz-dir .kz-dir-cats-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-dir .kz-dir-cats-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-dir .kz-dir-cats-list li::before {
    content: none;
}

.kz-redesign .kz-dir .kz-dir-cat {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 88px;
    padding: var(--kz-space-md) var(--kz-space-base) var(--kz-space-md) var(--kz-space-md);
    border: 1px solid var(--kz-dir-on-ink-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-dir-on-ink-fill);
    color: var(--kz-dir-on-ink);
    text-decoration: none;
}

.kz-redesign .kz-dir .kz-dir-cat::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: var(--kz-dir-sky);
    -webkit-mask: var(--kz-catp-chevron) center / contain no-repeat;
    mask: var(--kz-catp-chevron) center / contain no-repeat;
    transform: rotate(-90deg);
}

.kz-redesign .kz-dir .kz-dir-cat-media {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-dir .kz-dir-cat-media img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain;
    color: transparent;
}

.kz-redesign .kz-dir .kz-dir-cat-media--letter {
    background: var(--kz-dir-on-ink-fill-hover);
    color: var(--kz-dir-sky);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.kz-redesign .kz-dir .kz-dir-cat-text {
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-xs);
    min-width: 0;
}

.kz-redesign .kz-dir .kz-dir-cat-name {
    color: var(--kz-dir-on-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 16 7 7;
}

.kz-redesign .kz-dir .kz-dir-cat-count {
    color: var(--kz-dir-sky);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-text-14-size);
    font-weight: 400;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-dir .kz-dir-cat:active {
    border-color: var(--kz-dir-glow);
    background: var(--kz-dir-on-ink-fill-hover);
}

/* ---------- Оборудование: полоса mist с товарами подкатегорий и тегами ---------- */

/* Отбивка между группами стоит над заголовком группы (56px сверху, 24px до карточек): заголовок принадлежит своим
   товарам, а не предыдущей ленте (детектор Impeccable, правило heading-rhythm) */

.kz-redesign .kz-dir .kz-dir-band {
    padding: 0 0 var(--kz-space-xs);
    background: var(--kz-dir-mist);
}

.kz-redesign .kz-dir .kz-catp-group > .kz-cat-inner::before {
    content: none;
}

.kz-redesign .kz-dir .kz-catp-group {
    padding: 56px 0 0;
}

.kz-redesign .kz-dir .kz-catp-group-title {
    font-size: 24px;
    line-height: 30px;
}

.kz-redesign .kz-dir .kz-catp-group-all {
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-dir .kz-dir-band .kz-catp-section > .kz-cat-inner::before {
    border-top-color: var(--kz-dir-mist-line);
}

.kz-redesign .kz-dir .kz-dir-band .kz-catp-groups + .kz-catp-tags {
    padding: 56px 0;
}

/* Карточки: основа 5.7A сохранена; крупнее название, темнее описание и цена, заметная метка */

.kz-redesign .kz-dir .kz-pcard {
    border-color: var(--kz-dir-mist-line);
}

.kz-redesign .kz-dir .kz-pcard-name {
    font-size: 17px;
    line-height: 23px;
}

.kz-redesign .kz-dir .kz-pcard-brand,
.kz-redesign .kz-dir .kz-pcard-desc {
    color: var(--kz-dir-text-2);
}

.kz-redesign .kz-dir .kz-pcard-desc {
    margin-top: 6px;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-dir .kz-pcard-price {
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-dir .kz-pcard-price--request {
    color: var(--kz-dir-text-2);
}

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

.kz-redesign .kz-dir .kz-pcard-badge {
    min-height: 24px;
    padding: 0 10px;
    background: var(--kz-dir-blue);
    color: var(--kz-color-paper);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.kz-redesign .kz-dir .kz-pcard-badge--stock {
    box-shadow: inset 0 0 0 1px #8FBBA8;
    background: var(--kz-color-paper);
    color: #1F5A46;
}

/* Теги внутри полосы: белые чипы 40px (44px при грубом указателе) */

.kz-redesign .kz-dir .kz-catp-tag {
    min-height: 40px;
    padding: var(--kz-space-sm) 14px;
    border-color: var(--kz-dir-mist-line);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

/* ---------- Вводный текст направления: белый, после оборудования ---------- */

.kz-redesign .kz-dir .kz-dir-about {
    padding: 72px 0;
}

.kz-redesign .kz-dir .kz-dir-about .kz-catp-h2 {
    font-size: var(--kz-type-heading-2-size);
    line-height: var(--kz-type-heading-2-line);
}

.kz-redesign .kz-dir .kz-dir-about .kz-catp-about-desc {
    max-width: none;
    color: var(--kz-dir-text);
    font-size: var(--kz-dir-body-size);
    line-height: var(--kz-dir-body-line);
}

.kz-redesign .kz-dir .kz-dir-about .kz-catp-about-desc p {
    margin: 0 0 var(--kz-space-base);
}

.kz-redesign .kz-dir .kz-dir-about .kz-catp-about-desc p:last-child {
    margin-bottom: 0;
}

/* ---------- Обращение: полоса синего цвета лепестков, белые кнопки, белая карточка менеджера ---------- */

.kz-redesign .kz-dir .kz-catp-request {
    padding: 64px 0;
    background: var(--kz-dir-blue);
    color: var(--kz-dir-on-ink);
}

.kz-redesign .kz-dir .kz-catp-request-title {
    color: var(--kz-dir-on-ink);
    font-size: 32px;
    line-height: 38px;
}

.kz-redesign .kz-dir .kz-catp-request-text p {
    color: var(--kz-dir-on-ink-2);
    font-size: 18px;
    line-height: 28px;
}

.kz-redesign .kz-dir .kz-catp-request .kz-btn-secondary,
.kz-redesign .kz-dir .kz-catp-request .kz-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.72);
    background: transparent;
    color: var(--kz-dir-on-ink);
}

.kz-redesign .kz-dir .kz-catp-request .kz-btn-secondary:active {
    background: rgba(255, 255, 255, 0.16);
}

.kz-redesign .kz-dir .kz-catp-request .kz-catp-manager {
    border: 0;
    background: var(--kz-color-paper);
    color: var(--kz-dir-text);
}

.kz-redesign .kz-dir .kz-catp-request .kz-catp-manager-post {
    color: var(--kz-dir-text-2);
}

.kz-redesign .kz-dir .kz-catp-request ~ .kz-catp-section {
    padding-top: 64px;
}

/* ---------- Статья: одна колонка чтения, содержание перед текстом ---------- */

.kz-redesign .kz-dir .kz-catp-article > .kz-cat-inner {
    display: block;
}

.kz-redesign .kz-dir .kz-dir-article-col {
    max-width: var(--kz-dir-read);
    margin: 0 auto;
    font-size: var(--kz-dir-body-size);
}

.kz-redesign .kz-dir .kz-catp-article .kz-catp-h2 {
    max-width: none;
    margin: 0 0 var(--kz-space-lg);
    font-size: var(--kz-type-heading-2-size);
    line-height: var(--kz-type-heading-2-line);
}

.kz-redesign .kz-dir .kz-catp-article-body {
    min-width: 0;
}

.kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text {
    max-width: none;
    color: var(--kz-dir-text);
    font-size: var(--kz-dir-body-size);
    line-height: var(--kz-dir-body-line);
}

.kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text h2 {
    margin-top: 56px;
    font-size: 26px;
    line-height: 32px;
}

.kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text h3 {
    margin-top: 40px;
    font-size: 20px;
    line-height: 26px;
}

.kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text > :first-child,
.kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text > div:first-child > :first-child {
    margin-top: 0;
}

.kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text li {
    margin-bottom: 10px;
}

/* Содержание: раскрывающийся блок на светлой подложке; от 1024px пункты в две колонки. Строит kz-category.js */

.kz-redesign .kz-dir .kz-dir-toc {
    max-width: none;
    margin: 0 0 40px;
}

.kz-redesign .kz-dir .kz-dir-toc details {
    border: 1px solid var(--kz-dir-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-dir-mist);
}

.kz-redesign .kz-dir .kz-dir-toc-summary {
    display: flex;
    align-items: center;
    gap: var(--kz-space-md);
    min-height: 52px;
    padding: var(--kz-space-sm) var(--kz-space-card-padding);
    color: var(--kz-dir-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    list-style: none;
}

.kz-redesign .kz-dir .kz-dir-toc-summary::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-dir .kz-dir-toc-summary::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--kz-dir-text);
    -webkit-mask: var(--kz-catp-chevron) center / contain no-repeat;
    mask: var(--kz-catp-chevron) center / contain no-repeat;
}

.kz-redesign .kz-dir .kz-dir-toc details[open] > .kz-dir-toc-summary::after {
    transform: rotate(180deg);
}

.kz-redesign .kz-dir .kz-dir-toc-count {
    color: var(--kz-dir-text-2);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-text-14-size);
    font-weight: 400;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-dir .kz-dir-toc details > ol {
    margin: 0;
    padding: 0 var(--kz-space-card-padding) var(--kz-space-base);
    border-top: 0;
    column-gap: var(--kz-space-xl);
}

.kz-redesign .kz-dir .kz-dir-toc ol ol {
    margin: 0;
    padding: 0 0 0 var(--kz-space-base);
    border-top: 0;
}

.kz-redesign .kz-dir .kz-dir-toc li {
    border-bottom: 0;
    break-inside: avoid;
}

.kz-redesign .kz-dir .kz-dir-toc a {
    min-height: 36px;
    padding: 6px 0;
    color: var(--kz-color-primary);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-dir .kz-dir-toc .kz-catp-toc-sub a {
    padding-left: 0;
    color: var(--kz-dir-text-2);
}

@media (min-width: 1024px) {
    .kz-redesign .kz-dir .kz-dir-toc details > ol {
        columns: 2;
    }
}

/* ---------- Фокус на тёмных и синих поверхностях — белое кольцо; в белой карточке менеджера — primary ---------- */

.kz-redesign .kz-dir .kz-dir-hero a:focus-visible,
.kz-redesign .kz-dir .kz-dir-hero button:focus-visible,
.kz-redesign .kz-dir .kz-catp-request a:focus-visible,
.kz-redesign .kz-dir .kz-catp-request button:focus-visible,
.kz-redesign .kz-dir .kz-dir-hero .kz-cat-request:focus-visible,
.kz-redesign .kz-dir .kz-catp-request .kz-cat-request:focus-visible {
    outline: 2px solid var(--kz-dir-on-ink) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-dir .kz-catp-request .kz-catp-manager a:focus-visible {
    outline-color: var(--kz-color-primary) !important;
}

/* ---------- Наведение ---------- */

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-dir .kz-dir-hero .kz-cat-crumbs .breadcrumbs a:hover {
        color: var(--kz-dir-on-ink);
    }

    .kz-redesign .kz-dir .kz-dir-cat:hover {
        border-color: var(--kz-dir-glow);
        background: var(--kz-dir-on-ink-fill-hover);
    }

    .kz-redesign .kz-dir .kz-dir-cat:hover::after {
        background: var(--kz-dir-on-ink);
    }

    .kz-redesign .kz-dir .kz-dir-hero .kz-cat-request:hover,
    .kz-redesign .kz-dir .kz-catp-request .kz-cat-request:hover {
        background: #DCE5FA;
        color: var(--kz-dir-ink);
    }

    .kz-redesign .kz-dir .kz-catp-request .kz-btn-secondary:hover {
        border-color: var(--kz-dir-on-ink);
        background: rgba(255, 255, 255, 0.12);
    }

    .kz-redesign .kz-dir .kz-dir-toc-summary:hover {
        color: var(--kz-color-primary);
    }
}

/* ---------- Большой монитор: текст крупнее ---------- */

@media (min-width: 1600px) {
    .kz-redesign .kz-dir {
        --kz-dir-body-size: 19px;
        --kz-dir-body-line: 32px;
        --kz-dir-read: 760px;
    }

    .kz-redesign .kz-dir .kz-dir-caption {
        font-size: 22px;
        line-height: 32px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-name {
        font-size: 18px;
        line-height: 24px;
    }
}

/* ---------- 1024–1279px: три колонки подкатегорий ---------- */

@media (max-width: 1279px) {
    .kz-redesign .kz-dir .kz-dir-cats-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- До 1023px ---------- */

/* Лента товаров уходит под край экрана, первая карточка стоит на поле страницы: карточки не прижаты к краю
   области прокрутки (детектор Impeccable, правило edge-flush-cards), и видно, что ленту можно листать */

@media (max-width: 1023px) {
    .kz-redesign .kz-dir .kz-catp-strip {
        margin: 0 calc(var(--kz-gutter) * -1);
        padding: 4px var(--kz-gutter) var(--kz-space-md);
        scroll-padding: 0 var(--kz-gutter);
    }

    .kz-redesign .kz-dir .kz-dir-cats-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-dir .kz-dir-about {
        padding: 56px 0;
    }
}

/* ---------- До 767px ---------- */

@media (max-width: 767px) {
    .kz-redesign .kz-dir {
        --kz-dir-body-size: 16px;
        --kz-dir-body-line: 26px;
    }

    .kz-redesign .kz-dir .kz-catp-strip {
        margin: 0 calc(var(--kz-gutter-mobile) * -1);
        padding: 4px var(--kz-gutter-mobile) var(--kz-space-md);
        scroll-padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-dir .kz-dir-hero {
        padding: var(--kz-space-lg) 0 var(--kz-space-xl);
    }

    .kz-redesign .kz-dir .kz-dir-head {
        align-items: stretch;
    }

    .kz-redesign .kz-dir .kz-dir-title {
        font-size: 32px;
        line-height: 38px;
    }

    .kz-redesign .kz-dir .kz-dir-caption {
        margin-top: var(--kz-space-base);
        font-size: 17px;
        line-height: 26px;
    }

    .kz-redesign .kz-dir .kz-dir-cats {
        margin-top: var(--kz-space-xl);
    }

    .kz-redesign .kz-dir .kz-dir-cats-list {
        gap: var(--kz-space-sm);
    }

    .kz-redesign .kz-dir .kz-dir-cat {
        grid-template-columns: 44px minmax(0, 1fr) 16px;
        gap: var(--kz-space-md);
        min-height: 68px;
        padding: var(--kz-space-md);
    }

    .kz-redesign .kz-dir .kz-dir-cat-media {
        width: 44px;
        height: 44px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-media--letter {
        font-size: 18px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-name {
        font-size: 16px;
        line-height: 21px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-count {
        font-size: 13px;
        line-height: 18px;
    }

    .kz-redesign .kz-dir .kz-catp-group {
        padding: var(--kz-space-section-mobile) 0 0;
    }

    .kz-redesign .kz-dir .kz-catp-group-title {
        font-size: 20px;
        line-height: 26px;
    }

    .kz-redesign .kz-dir .kz-dir-band .kz-catp-groups + .kz-catp-tags {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-dir .kz-dir-about {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-dir .kz-dir-about .kz-catp-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-dir .kz-catp-request {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-dir .kz-catp-request-title {
        font-size: 26px;
        line-height: 32px;
    }

    .kz-redesign .kz-dir .kz-catp-request-text p {
        font-size: 17px;
        line-height: 26px;
    }

    .kz-redesign .kz-dir .kz-catp-request ~ .kz-catp-section {
        padding-top: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-dir .kz-catp-article .kz-catp-h2 {
        font-size: var(--kz-type-heading-2-mobile-size);
        line-height: 30px;
    }

    .kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text h2 {
        margin-top: 40px;
        font-size: 22px;
        line-height: 28px;
    }

    .kz-redesign .kz-dir .kz-catp-article .kz-catp-seo-text h3 {
        margin-top: var(--kz-space-xl);
        font-size: 18px;
        line-height: 24px;
    }

    .kz-redesign .kz-dir .kz-dir-toc {
        margin-bottom: var(--kz-space-xl);
    }

    .kz-redesign .kz-dir .kz-dir-toc-summary {
        min-height: 48px;
        padding: var(--kz-space-sm) var(--kz-space-base);
        font-size: 16px;
    }

    .kz-redesign .kz-dir .kz-dir-toc details > ol {
        padding: 0 var(--kz-space-base) var(--kz-space-md);
    }

    .kz-redesign .kz-dir .kz-dir-toc a {
        min-height: 44px;
    }
}


/* ---------- Этап 5.7C.1: ось чтения ----------
   Вводный текст, оглавление и статья стоят на одной оси: колонка по центру контейнера. Ширина и кегль растут вместе,
   поэтому строка остаётся около 80 знаков (≈66ch): 680px при 17px (768–1023px), 720px при 18px (1024–1599px), 760px
   при 19px (от 1600px); до 767px — вся ширина, 16px. Заголовок вводного блока — над текстом, а не в левой колонке;
   текст CMS одной колонкой */

@media (min-width: 1024px) {
    .kz-redesign .kz-dir {
        --kz-dir-body-size: 18px;
        --kz-dir-body-line: 30px;
        --kz-dir-read: 720px;
    }
}

/* От 1600px — после правила 1024px, чтобы оно не перекрыло крупный кегль */

@media (min-width: 1600px) {
    .kz-redesign .kz-dir {
        --kz-dir-body-size: 19px;
        --kz-dir-body-line: 32px;
        --kz-dir-read: 760px;
    }
}

.kz-redesign .kz-dir .kz-dir-about .kz-catp-about-grid {
    display: block;
    max-width: var(--kz-dir-read);
    margin: 0 auto;
}

.kz-redesign .kz-dir .kz-dir-about .kz-catp-h2 {
    max-width: none;
    margin: 0 0 var(--kz-space-lg);
}

/* ---------- Этап 5.7C.1: наведение и фокус карточки товара ----------
   Рамка карточки синего цвета лепестков толщиной 2px (вторая линия — inset-тень внутрь, размеры не меняются),
   подложка фото светлеет в синий, название — синим с подчёркиванием, стрелка «Подробнее» сдвигается (5.7A).
   То же состояние — у карточки, на ссылке которой стоит фокус с клавиатуры; кольцо фокуса 5.7A вокруг карточки
   сохраняется. Переходы 160ms только цвета и рамки; при reduced motion — без переходов */

.kz-redesign .kz-dir .kz-pcard {
    transition: border-color 160ms var(--kz-ease-out), box-shadow 160ms var(--kz-ease-out);
}

.kz-redesign .kz-dir .kz-pcard-media {
    transition: background-color 160ms var(--kz-ease-out);
}

.kz-redesign .kz-dir .kz-pcard-name {
    transition: color 160ms var(--kz-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-dir .kz-pcard:hover {
        border-color: var(--kz-dir-blue);
        box-shadow: inset 0 0 0 1px var(--kz-dir-blue);
    }

    .kz-redesign .kz-dir .kz-pcard:hover .kz-pcard-media {
        background-color: var(--kz-dir-media-hover);
    }

    .kz-redesign .kz-dir .kz-pcard:hover .kz-pcard-name {
        color: var(--kz-dir-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.kz-redesign .kz-dir .kz-pcard:has(.kz-pcard-link:focus-visible) {
    border-color: var(--kz-dir-blue);
    box-shadow: inset 0 0 0 1px var(--kz-dir-blue);
}

.kz-redesign .kz-dir .kz-pcard:has(.kz-pcard-link:focus-visible) .kz-pcard-media {
    background-color: var(--kz-dir-media-hover);
}

.kz-redesign .kz-dir .kz-pcard:has(.kz-pcard-link:focus-visible) .kz-pcard-name {
    color: var(--kz-dir-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-dir .kz-pcard,
    .kz-redesign .kz-dir .kz-pcard-media,
    .kz-redesign .kz-dir .kz-pcard-name {
        transition: none;
    }
}

/* ---------- До 575px: кнопка КП первого экрана на всю ширину ---------- */

@media (max-width: 575px) {
    .kz-redesign .kz-dir .kz-dir-actions,
    .kz-redesign .kz-dir .kz-dir-actions .kz-cat-request {
        width: 100%;
    }
}

/* ---------- До 559px: подкатегории одной колонкой, строки компактнее: изображение 40px, число моделей — в строке
   названия, чтобы список из 15 разделов не занимал два экрана ---------- */

@media (max-width: 559px) {
    .kz-redesign .kz-dir .kz-dir-cats-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .kz-redesign .kz-dir .kz-dir-cat {
        grid-template-columns: 40px minmax(0, 1fr) 16px;
        min-height: 60px;
        padding: 10px var(--kz-space-md) 10px 10px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-media {
        width: 40px;
        height: 40px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-text {
        display: block;
    }

    .kz-redesign .kz-dir .kz-dir-cat-name {
        font-size: 15px;
        line-height: 20px;
    }

    .kz-redesign .kz-dir .kz-dir-cat-count {
        font-size: 13px;
        line-height: 20px;
        white-space: nowrap;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-dir .kz-catp-tag {
        min-height: 44px;
    }
}

@media print {
    .kz-redesign .kz-dir .kz-dir-hero,
    .kz-redesign .kz-dir .kz-dir-band,
    .kz-redesign .kz-dir .kz-catp-request {
        background: none;
        color: #000000;
    }

    .kz-redesign .kz-dir .kz-dir-title,
    .kz-redesign .kz-dir .kz-dir-caption,
    .kz-redesign .kz-dir .kz-dir-cat,
    .kz-redesign .kz-dir .kz-dir-cat-name,
    .kz-redesign .kz-dir .kz-catp-request-title,
    .kz-redesign .kz-dir .kz-catp-request-text p {
        color: #000000;
    }

    .kz-redesign .kz-dir .kz-dir-cats,
    .kz-redesign .kz-dir .kz-dir-toc {
        display: none;
    }
}

/*
 * Этап 5.8 (2026-10-06, не утверждён владельцем): список товаров подкатегории и полная страница товара в цветах логотипа
 * 4.2H.3 и пилота направлений 5.7C.1 («Чертёжная синь»). Правила действуют только внутри обёрток .kz-sub
 * (templates/kz/catalog_category_products.tpl.php) и .kz-prod (templates/kz/catalog_show_product.tpl.php) и в окне
 * .kz-pr-form (templates/kz/pricerequests.tpl.php). Страницы направлений (.kz-dir), главная и остальные шаблоны каталога
 * этих правил не получают. Откат — _project_docs/handoff/2026-10-06/rollback-5.8/.
 * Поверхности — как у направления: ink — выбор (первый экран подкатегории с соседними разделами, первый экран товара),
 * mist — оборудование (фильтры и товары, аксессуары), белый — чтение и характеристики, синий — обращение.
 * Без градиентов, теней, фоновых фото и декоративных фигур. Красный центр знака в интерфейсе не используется.
 */

.kz-redesign .kz-sub,
.kz-redesign .kz-prod {
    --kz-bp-ink: #0E244C;
    --kz-bp-blue: #193F8F;
    --kz-bp-blue-hover: #15357A;
    --kz-bp-blue-active: #102A63;
    --kz-bp-sky: #B9C9F2;
    --kz-bp-glow: #6D91FF;
    --kz-bp-on-ink: #FFFFFF;
    --kz-bp-on-ink-2: #D3DDF4;
    --kz-bp-on-ink-line: rgba(255, 255, 255, 0.16);
    --kz-bp-on-ink-fill: rgba(255, 255, 255, 0.06);
    --kz-bp-on-ink-fill-hover: rgba(255, 255, 255, 0.11);
    --kz-bp-mist: #EEF2F9;
    --kz-bp-mist-line: #D3DCEB;
    --kz-bp-text: #2B2D41;
    --kz-bp-text-2: #4A4D63;
    --kz-bp-media-hover: #E6ECF8;
    --kz-bp-body-size: 17px;
    --kz-bp-body-line: 28px;
    --kz-bp-read: 680px;
    color: var(--kz-bp-text);
}

@media (min-width: 1024px) {
    .kz-redesign .kz-sub,
    .kz-redesign .kz-prod {
        --kz-bp-body-size: 18px;
        --kz-bp-body-line: 30px;
        --kz-bp-read: 720px;
    }
}

@media (min-width: 1600px) {
    .kz-redesign .kz-sub,
    .kz-redesign .kz-prod {
        --kz-bp-body-size: 19px;
        --kz-bp-body-line: 32px;
        --kz-bp-read: 760px;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-sub,
    .kz-redesign .kz-prod {
        --kz-bp-body-size: 16px;
        --kz-bp-body-line: 26px;
    }
}

/* ======================================================================================================================
 * Этап 5.8: список товаров подкатегории (.kz-sub)
 * Первый экран ink компактный: крошки, H1, «Запросить КП», подпись CMS и соседние разделы чипами — товары начинаются
 * сразу под ним, на полосе mist. Фильтры — белая панель слева, карточки — белые, как в лентах направления 5.7C.1
 * (те же состояния наведения и фокуса). Ответ AJAX заменяет только #content_catalog внутри обёртки, стили сохраняются.
 * ==================================================================================================================== */

/* ---------- Первый экран ---------- */

.kz-redesign .kz-sub .kz-sub-hero {
    padding: var(--kz-space-lg) 0 var(--kz-space-xl);
    background: var(--kz-bp-ink);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs {
    margin-bottom: var(--kz-space-base);
}

.kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs .breadcrumbs {
    color: var(--kz-bp-on-ink-2);
}

.kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs .breadcrumbs a,
.kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs .breadcrumbs .sep {
    color: var(--kz-bp-sky);
}

.kz-redesign .kz-sub .kz-catp-head {
    align-items: flex-end;
}

.kz-redesign .kz-sub .kz-catp-title {
    max-width: 22em;
    color: var(--kz-bp-on-ink);
    font-size: clamp(32px, 1.25vw + 22px, 44px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* «Тепловизионная» линия под H1 на тёмном — сплошная glow, как у направления 5.7C.1 */

.kz-redesign .kz-sub .kz-catp-title.kz-page-title--thermal::after {
    margin-top: var(--kz-space-base);
    background: var(--kz-bp-glow);
}

.kz-redesign .kz-sub .kz-catp-actions {
    min-height: 0;
    padding-bottom: var(--kz-space-xs);
}

/* «Запросить КП» на ink — белая кнопка с текстом ink (как на направлении); та же форма КП этапа 5.6 */

.kz-redesign .kz-sub .kz-sub-hero .kz-cat-request,
.kz-redesign .kz-sub .kz-sub-cta .kz-cat-request {
    margin: 0;
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-sub .kz-sub-hero .kz-cat-request:active,
.kz-redesign .kz-sub .kz-sub-cta .kz-cat-request:active {
    background: #C7D5F5;
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-sub .kz-sub-hero .kz-catp-price {
    color: var(--kz-bp-sky);
}

.kz-redesign .kz-sub .kz-catp-lead {
    max-width: 44em;
    margin-top: var(--kz-space-base);
    color: var(--kz-bp-on-ink-2);
    font-size: 18px;
    line-height: 28px;
}

.kz-redesign .kz-sub .kz-catp-lead a {
    color: var(--kz-bp-on-ink);
}

/* Соседние разделы: чипы на ink; текущий — белый с текстом ink, без ссылки */

.kz-redesign .kz-sub .kz-catp-subnav {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-sub .kz-catp-subnav a,
.kz-redesign .kz-sub .kz-catp-subnav span {
    min-height: 36px;
    padding: 6px 14px;
    border-color: var(--kz-bp-on-ink-line);
    background: var(--kz-bp-on-ink-fill);
    color: var(--kz-bp-on-ink);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-sub .kz-catp-subnav span[aria-current] {
    border-color: var(--kz-color-paper);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    font-weight: 500;
}

.kz-redesign .kz-sub .kz-catp-subnav a:active {
    border-color: var(--kz-bp-glow);
    background: var(--kz-bp-on-ink-fill-hover);
    color: var(--kz-bp-on-ink);
}

/* ---------- Полоса mist: фильтры, сортировка и товары ---------- */

.kz-redesign .kz-sub .kz-catp-main {
    padding: var(--kz-space-xl) 0 var(--kz-space-xxl);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-sub .kz-catp-main > .kz-cat-inner::before {
    content: none;
}

.kz-redesign .kz-sub .kz-catp-layout--filters {
    gap: var(--kz-space-lg);
}

/* Фильтры от 1024px — белая панель с рамкой mist-line */

@media (min-width: 1024px) {
    .kz-redesign .kz-sub .kz-catp-filter {
        padding: var(--kz-space-sm) var(--kz-space-card-padding) 0;
        border: 1px solid var(--kz-bp-mist-line);
        border-radius: var(--kz-radius-card);
        background: var(--kz-color-paper);
    }
}

.kz-redesign .kz-sub .kz-catp-filter form {
    border-bottom: 0;
}

.kz-redesign .kz-sub .kz-catp-fgroup {
    border-top-color: var(--kz-bp-mist-line);
}

.kz-redesign .kz-sub .kz-catp-fgroup > summary {
    color: var(--kz-bp-text);
}

.kz-redesign .kz-sub .kz-catp-check label {
    color: var(--kz-bp-text);
}

.kz-redesign .kz-sub .kz-catp-check input[type="checkbox"],
.kz-redesign .kz-sub .kz-catp-check input[type="radio"] {
    border-color: var(--kz-bp-text-2);
}

.kz-redesign .kz-sub .kz-catp-check input[type="checkbox"]:checked {
    border-color: var(--kz-bp-blue);
    background-color: var(--kz-bp-blue);
}

.kz-redesign .kz-sub .kz-catp-check input[type="radio"]:checked {
    border-color: var(--kz-bp-blue);
    background: var(--kz-bp-blue);
}

.kz-redesign .kz-sub .kz-catp-reset {
    border-top-color: var(--kz-bp-mist-line);
}

.kz-redesign .kz-sub .kz-catp-reset .reset_btn,
.kz-redesign .kz-sub .kz-catp-empty-link {
    color: var(--kz-bp-blue);
}

/* Сортировка и вид: на mist текущая сортировка — текст ink с линией синего цвета лепестков */

.kz-redesign .kz-sub .kz-catp-bar {
    min-height: 40px;
    margin-bottom: var(--kz-space-md);
}

.kz-redesign .kz-sub .kz-catp-sort-label,
.kz-redesign .kz-sub .kz-catp-sort .btn {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-sub .kz-catp-sort .btn.up,
.kz-redesign .kz-sub .kz-catp-sort .btn.down {
    border-bottom-color: var(--kz-bp-blue);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-sub .kz-catp-views .btn {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-sub .kz-catp-views .btn.active {
    border-color: var(--kz-bp-mist-line);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-sub .kz-catp-found {
    margin-bottom: var(--kz-space-md);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-sub .kz-catp-found-all {
    color: var(--kz-bp-text-2);
}

/* Карточки — как в лентах направления 5.7C.1: белые на mist, название 17/23, описание и цена темнее, метка синяя */

.kz-redesign .kz-sub .kz-pcard {
    border-color: var(--kz-bp-mist-line);
    transition: border-color 160ms var(--kz-ease-out), box-shadow 160ms var(--kz-ease-out);
}

.kz-redesign .kz-sub .kz-pcard-media {
    transition: background-color 160ms var(--kz-ease-out);
}

.kz-redesign .kz-sub .kz-pcard-name {
    font-size: 17px;
    line-height: 23px;
    transition: color 160ms var(--kz-ease-out);
}

.kz-redesign .kz-sub .kz-pcard-brand,
.kz-redesign .kz-sub .kz-pcard-desc {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-sub .kz-pcard-desc {
    margin-top: 6px;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-sub .kz-pcard-price {
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-sub .kz-pcard-price--request {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-sub .kz-pcard-more {
    color: var(--kz-bp-blue);
}

.kz-redesign .kz-sub .kz-pcard-badge {
    min-height: 24px;
    padding: 0 10px;
    background: var(--kz-bp-blue);
    color: var(--kz-color-paper);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.kz-redesign .kz-sub .kz-pcard-badge--stock {
    box-shadow: inset 0 0 0 1px #8FBBA8;
    background: var(--kz-color-paper);
    color: #1F5A46;
}

.kz-redesign .kz-sub .kz-pcard-tool.active {
    background: #E1E8F7;
    color: var(--kz-bp-blue);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-sub .kz-pcard:hover {
        border-color: var(--kz-bp-blue);
        box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
    }

    .kz-redesign .kz-sub .kz-pcard:hover .kz-pcard-media {
        background-color: var(--kz-bp-media-hover);
    }

    .kz-redesign .kz-sub .kz-pcard:hover .kz-pcard-name {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.kz-redesign .kz-sub .kz-pcard:has(.kz-pcard-link:focus-visible) {
    border-color: var(--kz-bp-blue);
    box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
}

.kz-redesign .kz-sub .kz-pcard:has(.kz-pcard-link:focus-visible) .kz-pcard-media {
    background-color: var(--kz-bp-media-hover);
}

.kz-redesign .kz-sub .kz-pcard:has(.kz-pcard-link:focus-visible) .kz-pcard-name {
    color: var(--kz-bp-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Вид «списком» (от 768px): строки — белые карточки с отступом 12px вместо линий на белом */

@media (min-width: 768px) {
    .kz-redesign .kz-sub .kz-catp-products .kz-catp-grid.list {
        gap: var(--kz-space-md);
        border-top: 0;
    }

    .kz-redesign .kz-sub .kz-catp-grid.list > .kz-pcard {
        padding: var(--kz-space-card-padding);
        border-width: 1px;
        border-radius: var(--kz-radius-card);
    }

    .kz-redesign .kz-sub .kz-catp-grid.list .kz-pcard-link::after {
        border-radius: var(--kz-radius-card);
    }

    .kz-redesign .kz-sub .kz-catp-grid.list .kz-pcard-name {
        font-size: 19px;
        line-height: 25px;
    }

    .kz-redesign .kz-sub .kz-catp-grid.list .kz-pcard-brief {
        color: var(--kz-bp-text);
        font-size: 15px;
        line-height: 22px;
    }
}

/* Страницы: белые кнопки на mist, текущая — ink */

.kz-redesign .kz-sub .kz-catp-paging > * {
    border-color: var(--kz-bp-mist-line);
}

.kz-redesign .kz-sub .kz-catp-paging > .active {
    border-color: var(--kz-bp-ink);
    background: var(--kz-bp-ink);
    color: var(--kz-color-paper);
}

.kz-redesign .kz-sub .kz-catp-paging > .dots {
    border-color: transparent;
    background: none;
}

/* Пустой список: белая панель с сообщением и ссылкой */

.kz-redesign .kz-sub .kz-catp-empty {
    max-width: none;
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
}

/* «Не нашли нужное?» — синяя полоса обращения с белой кнопкой, как на направлении */

.kz-redesign .kz-sub .kz-sub-cta {
    margin-top: var(--kz-space-xxl);
    padding: var(--kz-space-lg) var(--kz-space-xl);
    border-top: 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-blue);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-sub .kz-sub-cta .kz-cat-cta-text {
    color: var(--kz-bp-on-ink-2);
}

.kz-redesign .kz-sub .kz-sub-cta .kz-cat-cta-text strong {
    color: var(--kz-bp-on-ink);
}

/* ---------- Под полосой: теги, текст CMS и вопросы на одной оси чтения (как статья направления 5.7C.1) ---------- */

.kz-redesign .kz-sub .kz-catp-main + .kz-catp-section {
    padding-top: 56px;
}

.kz-redesign .kz-sub .kz-catp-section > .kz-cat-inner::before {
    margin-bottom: 56px;
    border-top-color: var(--kz-bp-mist-line);
}

.kz-redesign .kz-sub .kz-catp-main + .kz-catp-section > .kz-cat-inner::before {
    content: none;
}

/* Колонка — сам контейнер раздела, суженный до меры чтения: в неё же встают линия раздела и кнопка «Показать
   полностью», которую kz-category.js вставляет после текста */

.kz-redesign .kz-sub .kz-catp-section > .kz-cat-inner {
    max-width: calc(var(--kz-bp-read) + var(--kz-gutter) * 2);
}

.kz-redesign .kz-sub .kz-catp-tags .kz-catp-h2,
.kz-redesign .kz-sub .kz-catp-seo .kz-catp-h2,
.kz-redesign .kz-sub .kz-catp-ask .kz-catp-h2 {
    font-size: 24px;
    line-height: 30px;
}

.kz-redesign .kz-sub .kz-catp-tag {
    min-height: 40px;
    padding: var(--kz-space-sm) 14px;
    border-color: var(--kz-bp-mist-line);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-sub .kz-catp-seo-text {
    max-width: none;
    color: var(--kz-bp-text);
    font-size: var(--kz-bp-body-size);
    line-height: var(--kz-bp-body-line);
}

.kz-redesign .kz-sub .kz-catp-seo-toggle {
    color: var(--kz-bp-blue);
}

.kz-redesign .kz-sub .kz-catp-ask-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    gap: var(--kz-space-xl);
}

.kz-redesign .kz-sub .kz-catp-ask-text p {
    max-width: none;
    color: var(--kz-bp-text);
    font-size: var(--kz-bp-body-size);
    line-height: var(--kz-bp-body-line);
}

.kz-redesign .kz-sub .kz-catp-manager {
    padding: var(--kz-space-card-padding);
    border: 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-sub .kz-catp-manager-post {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-sub .kz-catp-manager-contacts a {
    color: var(--kz-bp-blue);
}

/* ---------- Фокус: на ink и синем — белое кольцо, на mist и белом — primary 5.7A ---------- */

.kz-redesign .kz-sub .kz-sub-hero a:focus-visible,
.kz-redesign .kz-sub .kz-sub-hero button:focus-visible,
.kz-redesign .kz-sub .kz-sub-cta a:focus-visible,
.kz-redesign .kz-sub .kz-sub-hero .kz-cat-request:focus-visible,
.kz-redesign .kz-sub .kz-sub-cta .kz-cat-request:focus-visible {
    outline: 2px solid var(--kz-bp-on-ink) !important;
    outline-offset: 2px !important;
}

/* ---------- Наведение ---------- */

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs .breadcrumbs a:hover {
        color: var(--kz-bp-on-ink);
    }

    .kz-redesign .kz-sub .kz-catp-subnav a:hover {
        border-color: var(--kz-bp-glow);
        background: var(--kz-bp-on-ink-fill-hover);
        color: var(--kz-bp-on-ink);
    }

    .kz-redesign .kz-sub .kz-sub-hero .kz-cat-request:hover,
    .kz-redesign .kz-sub .kz-sub-cta .kz-cat-request:hover {
        background: #DCE5FA;
        color: var(--kz-bp-ink);
    }

    .kz-redesign .kz-sub .kz-sub-hero .kz-catp-price:hover {
        color: var(--kz-bp-on-ink);
    }

    .kz-redesign .kz-sub .kz-catp-sort .btn:hover,
    .kz-redesign .kz-sub .kz-catp-views .btn:hover {
        color: var(--kz-bp-ink);
    }

    .kz-redesign .kz-sub .kz-catp-paging a:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-sub .kz-catp-check label:hover,
    .kz-redesign .kz-sub .kz-catp-reset .reset_btn:hover,
    .kz-redesign .kz-sub .kz-catp-empty-link:hover,
    .kz-redesign .kz-sub .kz-catp-seo-toggle:hover,
    .kz-redesign .kz-sub .kz-catp-manager-contacts a:hover {
        color: var(--kz-bp-blue-hover);
    }

    .kz-redesign .kz-sub .kz-catp-fgroup > summary:hover::after {
        background: var(--kz-bp-blue);
    }

    .kz-redesign .kz-sub .kz-catp-tag:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-sub .kz-pcard,
    .kz-redesign .kz-sub .kz-pcard-media,
    .kz-redesign .kz-sub .kz-pcard-name {
        transition: none;
    }
}

/* ---------- До 1023px: фильтры под кнопкой — панель раскрывается белой карточкой ---------- */

@media (max-width: 1023px) {
    .kz-redesign .kz-sub .kz-catp-filter-toggle {
        border-color: var(--kz-bp-mist-line);
        background: var(--kz-color-paper);
        color: var(--kz-bp-ink);
    }

    .kz-redesign .kz-sub .kz-catp-filter-count {
        background: var(--kz-bp-blue);
    }

    .kz-redesign .kz-sub .kz-catp-filter {
        padding: 0 var(--kz-space-base);
        border: 1px solid var(--kz-bp-mist-line);
        border-radius: var(--kz-radius-card);
        background: var(--kz-color-paper);
    }

    .kz-redesign .kz-sub .kz-catp-grid.list > .kz-pcard {
        grid-template-columns: 160px minmax(0, 1fr) 176px;
    }
}

/* ---------- До 767px ---------- */

@media (max-width: 767px) {
    .kz-redesign .kz-sub .kz-sub-hero {
        padding: var(--kz-space-base) 0 var(--kz-space-lg);
    }

    .kz-redesign .kz-sub .kz-catp-head {
        gap: var(--kz-space-base);
        align-items: stretch;
    }

    .kz-redesign .kz-sub .kz-catp-title {
        font-size: 30px;
        line-height: 36px;
    }

    .kz-redesign .kz-sub .kz-catp-title.kz-page-title--thermal::after {
        margin-top: var(--kz-space-md);
    }

    .kz-redesign .kz-sub .kz-catp-lead {
        margin-top: var(--kz-space-md);
        font-size: 16px;
        line-height: 24px;
    }

    .kz-redesign .kz-sub .kz-catp-subnav {
        margin-top: var(--kz-space-base);
    }

    .kz-redesign .kz-sub .kz-catp-main {
        padding: var(--kz-space-base) 0 var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-sub .kz-catp-bar {
        margin-bottom: var(--kz-space-xs);
    }

    .kz-redesign .kz-sub .kz-catp-empty {
        padding: var(--kz-space-lg) var(--kz-space-base);
    }

    .kz-redesign .kz-sub .kz-sub-cta {
        margin-top: var(--kz-space-xl);
        padding: var(--kz-space-lg) var(--kz-space-base);
    }

    .kz-redesign .kz-sub .kz-catp-main + .kz-catp-section {
        padding-top: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-sub .kz-catp-section > .kz-cat-inner::before {
        margin-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-sub .kz-catp-tags .kz-catp-h2,
    .kz-redesign .kz-sub .kz-catp-seo .kz-catp-h2,
    .kz-redesign .kz-sub .kz-catp-ask .kz-catp-h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .kz-redesign .kz-sub .kz-catp-ask-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-sub .kz-catp-manager {
        padding: var(--kz-space-base);
    }
}

/* До 575px товар — строка (5.7A): белая карточка-строка на mist */

@media (max-width: 575px) {
    .kz-redesign .kz-sub .kz-catp-products .kz-catp-grid {
        gap: var(--kz-space-sm);
    }

    .kz-redesign .kz-sub .kz-catp-grid .kz-pcard-thumb {
        background: var(--kz-bp-mist);
    }

    .kz-redesign .kz-sub .kz-catp-actions,
    .kz-redesign .kz-sub .kz-catp-actions .kz-cat-request {
        width: 100%;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-sub .kz-catp-subnav a,
    .kz-redesign .kz-sub .kz-catp-subnav span,
    .kz-redesign .kz-sub .kz-catp-tag {
        min-height: 44px;
    }
}

@media print {
    .kz-redesign .kz-sub .kz-sub-hero,
    .kz-redesign .kz-sub .kz-catp-main {
        background: none;
        color: #000000;
    }

    .kz-redesign .kz-sub .kz-catp-title,
    .kz-redesign .kz-sub .kz-catp-lead,
    .kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs .breadcrumbs,
    .kz-redesign .kz-sub .kz-sub-hero .kz-cat-crumbs .breadcrumbs a {
        color: #000000;
    }

    .kz-redesign .kz-sub .kz-catp-subnav,
    .kz-redesign .kz-sub .kz-sub-cta {
        display: none;
    }
}

/* ======================================================================================================================
 * Этап 5.8: страница товара (.kz-prod) — templates/kz/catalog_show_product.tpl.php
 * Первый экран ink: крошки, название и назначение, фото на белой панели, основные характеристики, белая карточка цены
 * с основным действием и условия поставки. Под ним — белая полоса разделов (.product_head, липкая через sticky-kit
 * scripts.js), затем разделы во всю ширину контейнера (доработка 06.10.2026; до неё — ось чтения --kz-bp-read): обзор,
 * характеристики, комплектация, отзывы — белые; аксессуары — полоса mist; публикации, теги, документы — белые;
 * «Возникли вопросы?» — синяя полоса обращения.
 * Legacy-правила templates/css для .product_info, .product_head, .product_features, .text_block и др. переопределены
 * только внутри .kz-prod.
 * ==================================================================================================================== */

.kz-redesign .kz-prod {
    --kz-prod-stage: 460px;
    --kz-prod-icon-box: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z M3.5 7.5 12 12l8.5-4.5 M12 12v9' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>");
    --kz-prod-icon-truck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 6.5h11v9h-11z M13.5 9.5h4l3 3v3h-7z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><circle cx='6.5' cy='17.5' r='1.8' fill='none' stroke='black' stroke-width='1.5'/><circle cx='17' cy='17.5' r='1.8' fill='none' stroke='black' stroke-width='1.5'/></svg>");
    --kz-prod-icon-shield: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 4.5 6v5.5c0 4.4 3.1 8 7.5 9.5 4.4-1.5 7.5-5.1 7.5-9.5V6z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='m8.5 12 2.5 2.5 4.5-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --kz-prod-icon-doc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h8l4 4v14H6z M14 3v4h4 M9 12h6 M9 15.5h6' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>");
    --kz-prod-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --kz-prod-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background: var(--kz-color-paper);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-prod .kz-cat-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Первый экран ---------- */

.kz-redesign .kz-prod .kz-prod-hero {
    padding: var(--kz-space-lg) 0 56px;
    background: var(--kz-bp-ink);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-prod .kz-prod-crumbs {
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-prod .kz-prod-crumbs .breadcrumbs {
    max-width: none;
    color: var(--kz-bp-on-ink-2);
    font-weight: 400;
}

.kz-redesign .kz-prod .kz-prod-crumbs .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--kz-bp-sky);
}

.kz-redesign .kz-prod .kz-prod-crumbs .breadcrumbs .sep {
    position: static;
    flex: none;
    margin: 0;
    color: var(--kz-bp-sky);
}

/* Висящий разделитель после последнего звена (последнее звено — раздел товара) */

.kz-redesign .kz-prod .kz-prod-crumbs .breadcrumbs > .sep:last-child {
    display: none;
}

/* От 1024px две колонки: слева фото и под ним основные характеристики, справа название, цена с действием и условия.
   Порядок в разметке и на телефоне: название, фото, характеристики, цена, действие */

.kz-redesign .kz-prod .kz-prod-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
        "media head"
        "media side";
    grid-template-rows: auto 1fr;
    gap: var(--kz-space-lg) var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-prod .kz-prod-grid--nomedia {
    grid-template-areas: "head side";
    grid-template-rows: auto;
}

.kz-redesign .kz-prod .kz-prod-head {
    grid-area: head;
    min-width: 0;
}

.kz-redesign .kz-prod .kz-prod-media {
    grid-area: media;
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-xl);
    min-width: 0;
}

.kz-redesign .kz-prod .kz-prod-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-lg);
    min-width: 0;
}

/* Название и назначение */

.kz-redesign .kz-prod .kz-prod-brand {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin: 0 0 var(--kz-space-base);
    padding: 6px 12px;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-prod .kz-prod-brand img {
    display: block;
    width: auto;
    max-width: 140px;
    height: 100%;
    object-fit: contain;
}

.kz-redesign .kz-prod .kz-prod-title {
    margin: 0;
    padding: 0;
    color: var(--kz-bp-on-ink);
    font-family: var(--kz-font-ui);
    font-size: clamp(30px, 1.25vw + 20px, 44px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-align: left;
    text-transform: none;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.kz-redesign .kz-prod .kz-prod-title::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    margin-top: var(--kz-space-base);
    background: var(--kz-bp-glow);
}

.kz-redesign .kz-prod .kz-prod-purpose {
    margin: var(--kz-space-base) 0 0;
    color: var(--kz-bp-on-ink-2);
    font-size: 18px;
    line-height: 28px;
}

.kz-redesign .kz-prod .kz-prod-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-prod .kz-prod-sku,
.kz-redesign .kz-prod .kz-prod-rating {
    color: var(--kz-bp-on-ink-2);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-prod .kz-prod-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-prod .kz-prod-rating .icon {
    width: 16px;
    height: 16px;
    color: var(--kz-bp-sky);
    fill: currentColor;
}

/* Сравнение, избранное, «Поделиться»: кнопки 40px на ink; включённое состояние — белая кнопка с иконкой ink */

.kz-redesign .kz-prod .kz-prod-tools {
    display: flex;
    align-items: center;
    gap: var(--kz-space-sm);
    margin-left: auto;
}

.kz-redesign .kz-prod .kz-prod-tool {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-bp-on-ink-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-on-ink-fill);
    color: var(--kz-bp-on-ink);
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-prod .kz-prod-tool .icon {
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.kz-redesign .kz-prod .kz-prod-tool.active {
    border-color: var(--kz-color-paper);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-prod .kz-prod-share {
    position: relative;
}

.kz-redesign .kz-prod .share-widget {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: none;
    box-sizing: border-box;
    width: 248px;
    padding: var(--kz-space-sm);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-prod .share-widget.active {
    display: block;
}

.kz-redesign .kz-prod .share-widget-links {
    display: flex;
    flex-direction: column;
}

.kz-redesign .kz-prod .share-widget-link-item {
    display: flex;
    align-items: center;
    gap: var(--kz-space-md);
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 var(--kz-space-sm);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: none;
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
}

.kz-redesign .kz-prod .share-widget-link-item .wrap-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.kz-redesign .kz-prod .share-widget-link-item .icon {
    display: block;
    width: 20px;
    height: 20px;
}

/* Галерея: белая панель на ink; от 768px миниатюры слева вертикальной лентой (Swiper scripts.js: 5 или 6 штук) */

.kz-redesign .kz-prod .product_info .images.kz-prod-gallery {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "thumbs big";
    gap: var(--kz-space-base);
    width: auto;
    max-width: none;
    padding: var(--kz-space-lg);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-prod .product_info .images .big {
    position: relative;
    grid-area: big;
    width: auto;
    min-width: 0;
}

.kz-redesign .kz-prod .product_info .images .big.one-image {
    grid-column: 1 / -1;
}

.kz-redesign .kz-prod .product_info .images .big .slide a {
    position: relative;
    display: block;
    overflow: hidden;
    height: var(--kz-prod-stage);
    border-radius: var(--kz-radius-control);
    cursor: zoom-in;
}

.kz-redesign .kz-prod .product_info .images .big .slide img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    color: transparent;
}

.kz-redesign .kz-prod .product_info .images .big .kz-prod-video a {
    cursor: pointer;
}

.kz-redesign .kz-prod .product_info .images .icon-play-big {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: var(--kz-bp-ink);
}

.kz-redesign .kz-prod .product_info .images .icon-play-big::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 26px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--kz-color-paper);
}

/* Кнопки перелистывания фото — круг 40px, видны, только когда фото больше одного (иначе Swiper ставит lock) */

.kz-redesign .kz-prod .product_info .images .big .swiper-button-prev,
.kz-redesign .kz-prod .product_info .images .big .swiper-button-next {
    top: 50%;
    display: flex;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: 50%;
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    opacity: 1;
    box-shadow: none;
    transform: none;
}

.kz-redesign .kz-prod .product_info .images .big .swiper-button-prev {
    left: 4px;
}

.kz-redesign .kz-prod .product_info .images .big .swiper-button-next {
    right: 4px;
}

.kz-redesign .kz-prod .product_info .images .big .swiper-button-prev .icon,
.kz-redesign .kz-prod .product_info .images .big .swiper-button-next .icon {
    width: 8px;
    height: 14px;
}

.kz-redesign .kz-prod .product_info .images .big .swiper-button-prev .icon {
    transform: rotate(180deg);
}

.kz-redesign .kz-prod .product_info .images .swiper-button-disabled {
    opacity: 0.35;
}

.kz-redesign .kz-prod .product_info .images .swiper-button-lock,
.kz-redesign .kz-prod .product_info .images .big.one-image .swiper-button-prev,
.kz-redesign .kz-prod .product_info .images .big.one-image .swiper-button-next {
    display: none;
}

/* Миниатюры */

.kz-redesign .kz-prod .product_info .images .thumbs.swiper-container {
    position: relative;
    top: auto;
    right: auto;
    grid-area: thumbs;
    box-sizing: border-box;
    width: 76px;
    height: var(--kz-prod-stage);
    margin: 0;
    padding: 28px 0;
}

.kz-redesign .kz-prod .product_info .images .thumbs .slide button {
    position: relative;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    cursor: pointer;
}

.kz-redesign .kz-prod .product_info .images .thumbs .slide button::after {
    content: none;
}

.kz-redesign .kz-prod .product_info .images .thumbs .slide img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kz-redesign .kz-prod .product_info .images .thumbs .slide.swiper-slide-thumb-active button {
    border-color: var(--kz-bp-blue);
    box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
}

.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-prev,
.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-next {
    left: 0;
    right: 0;
    display: flex;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--kz-bp-ink);
    opacity: 1;
    box-shadow: none;
    transform: none;
}

.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-prev {
    top: 0;
    bottom: auto;
}

.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-next {
    top: auto;
    bottom: 0;
}

.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-prev .icon,
.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-next .icon {
    width: 8px;
    height: 14px;
    transform: rotate(90deg);
}

.kz-redesign .kz-prod .product_info .images .thumbs .swiper-button-prev .icon {
    transform: rotate(-90deg);
}

.kz-redesign .kz-prod .kz-prod-gallery-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: none;
    margin: 0;
    padding: 2px 8px;
    border-radius: var(--kz-radius-chip);
    background: var(--kz-bp-ink);
    color: var(--kz-color-paper);
    font-family: var(--kz-font-data);
    font-size: 13px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* Основные характеристики: строки «название — значение» с линиями on-ink */

.kz-redesign .kz-prod .kz-prod-keys-title {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    color: var(--kz-bp-sky);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-align: left;
    text-transform: uppercase;
}

.kz-redesign .kz-prod .kz-prod-keys-group {
    margin: 0 0 var(--kz-space-xs);
    color: var(--kz-bp-on-ink-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-prod .kz-prod-keys-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kz-bp-on-ink-line);
}

.kz-redesign .kz-prod .kz-prod-keys-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--kz-space-base);
    padding: 10px 0;
    border-bottom: 1px solid var(--kz-bp-on-ink-line);
}

.kz-redesign .kz-prod .kz-prod-keys-list dt,
.kz-redesign .kz-prod .kz-prod-keys-list dd {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: break-word;
}

.kz-redesign .kz-prod .kz-prod-keys-list dt {
    color: var(--kz-bp-on-ink-2);
    font-weight: 400;
}

.kz-redesign .kz-prod .kz-prod-keys-list dd {
    color: var(--kz-bp-on-ink);
    font-family: var(--kz-font-data);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-prod .kz-prod-keys-all {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 36px;
    margin-top: var(--kz-space-sm);
    color: var(--kz-bp-sky);
    font-size: var(--kz-type-button-size);
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-prod .kz-prod-keys-all::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-prod-arrow) center / contain no-repeat;
    mask: var(--kz-prod-arrow) center / contain no-repeat;
    transform: rotate(90deg);
}

/* Цена и основное действие: белая карточка на ink */

.kz-redesign .kz-prod .product_info .kz-prod-buy {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: var(--kz-space-lg);
    border: 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
}

.kz-redesign .kz-prod .kz-prod-price {
    margin: 0 0 var(--kz-space-base);
}

.kz-redesign .kz-prod .kz-prod-price-value {
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-data);
    font-size: 32px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-prod .kz-prod-price--request .kz-prod-price-value,
.kz-redesign .kz-prod .kz-prod-price--status .kz-prod-price-value {
    font-family: var(--kz-font-ui);
    font-size: 26px;
    line-height: 32px;
}

.kz-redesign .kz-prod .kz-prod-price--status .kz-prod-price-value {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-prod .kz-prod-price-note {
    margin-top: var(--kz-space-xs);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-prod .kz-prod-price-old {
    color: var(--kz-bp-text-2);
    font-family: var(--kz-font-data);
    font-size: 16px;
    line-height: 22px;
    text-decoration: line-through;
}

.kz-redesign .kz-prod .kz-prod-price-action {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 6px;
    margin: var(--kz-space-xs) 0 var(--kz-space-sm);
    padding: 2px 10px;
    border-radius: var(--kz-radius-chip);
    background: var(--kz-bp-blue);
    color: var(--kz-color-paper);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-prod .kz-prod-price-action a {
    color: inherit;
    text-decoration: underline;
}

.kz-redesign .kz-prod .kz-prod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-md);
}

.kz-redesign .kz-prod .product_info .kz-prod-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex: 1 1 200px;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    min-height: 48px;
    margin: 0;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid var(--kz-bp-blue);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-bp-blue);
    font-family: var(--kz-font-ui);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-prod .product_info .kz-prod-btn span {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

.kz-redesign .kz-prod .product_info .kz-prod-btn--primary {
    background: var(--kz-bp-blue);
    color: var(--kz-color-paper);
}

/* «Добавлено» (scripts.js ставит active и меняет текст) — зелёная кнопка подтверждения */

.kz-redesign .kz-prod .product_info .kz-prod-btn--primary.active {
    border-color: #1F5A46;
    background: #1F5A46;
    color: var(--kz-color-paper);
}

.kz-redesign .kz-prod .product_info .kz-prod-btn:active {
    border-color: var(--kz-bp-blue-active);
    background: #DCE5FA;
    color: var(--kz-bp-blue-active);
}

.kz-redesign .kz-prod .product_info .kz-prod-btn--primary:active {
    background: var(--kz-bp-blue-active);
    color: var(--kz-color-paper);
}

/* Замены снятого товара */

.kz-redesign .kz-prod .kz-prod-replace {
    margin: 0 0 var(--kz-space-base);
    padding: var(--kz-space-base) 0 0;
    border-top: 1px solid var(--kz-bp-mist-line);
}

.kz-redesign .kz-prod .kz-prod-replace-title {
    margin: 0 0 var(--kz-space-xs);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-prod .kz-prod-replace-list,
.kz-redesign .kz-prod .kz-prod-replace-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-replace-list li::before {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-replace-list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--kz-bp-blue);
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Условия поставки: строки с иконками sky на ink */

.kz-redesign .kz-prod .kz-prod-pluses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kz-space-base) var(--kz-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-pluses:empty {
    display: none;
}

.kz-redesign .kz-prod .kz-prod-plus {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-md);
    margin: 0;
    padding: 0;
    color: var(--kz-bp-on-ink-2);
    font-size: 15px;
    line-height: 22px;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-plus::before {
    content: "";
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    background: var(--kz-bp-sky);
    -webkit-mask: var(--kz-prod-icon-box) center / contain no-repeat;
    mask: var(--kz-prod-icon-box) center / contain no-repeat;
}

.kz-redesign .kz-prod .kz-prod-plus--delivery::before {
    -webkit-mask-image: var(--kz-prod-icon-truck);
    mask-image: var(--kz-prod-icon-truck);
}

.kz-redesign .kz-prod .kz-prod-plus--warranty::before {
    -webkit-mask-image: var(--kz-prod-icon-shield);
    mask-image: var(--kz-prod-icon-shield);
}

.kz-redesign .kz-prod .kz-prod-plus--gos::before {
    -webkit-mask-image: var(--kz-prod-icon-doc);
    mask-image: var(--kz-prod-icon-doc);
}

.kz-redesign .kz-prod .kz-prod-plus a {
    color: var(--kz-bp-on-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-prod .wrap-popup-moscow-office {
    display: none;
}

.kz-redesign .kz-prod .wrap-popup-moscow-office.active {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: block;
    width: 260px;
    padding: var(--kz-space-md);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: var(--kz-shadow-overlay);
    color: var(--kz-bp-text);
}

/* ---------- Полоса разделов (.product_head, липкая) ---------- */

.kz-redesign .kz-prod .product_head.kz-prod-nav {
    z-index: 90;
    padding: 0;
    transition: none;
    border-bottom: 1px solid var(--kz-bp-mist-line);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-prod .product_head.kz-prod-nav.is_stuck {
    padding: 0;
}

.kz-redesign .kz-prod .kz-prod-nav-inner {
    display: flex;
    align-items: center;
    gap: var(--kz-space-lg);
    min-height: 56px;
}

.kz-redesign .kz-prod .kz-prod-nav-name {
    display: none;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
    margin: 0;
    overflow: hidden;
    color: var(--kz-bp-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kz-redesign .kz-prod .product_head.is_stuck .kz-prod-nav-name {
    display: block;
}

.kz-redesign .kz-prod .kz-prod-anchors {
    display: flex;
    flex: 1 1 auto;
    gap: 0 var(--kz-space-lg);
    min-width: 0;
    margin: -2px 0;
    padding: 2px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.kz-redesign .kz-prod .kz-prod-anchors::-webkit-scrollbar {
    display: none;
}

.kz-redesign .kz-prod .kz-prod-anchors li {
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-anchors li::before {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-anchors a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--kz-bp-text-2);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.kz-redesign .kz-prod .kz-prod-anchors a[aria-current] {
    border-bottom-color: var(--kz-bp-blue);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-prod .kz-prod-anchors-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--kz-radius-chip);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-data);
    font-size: 12px;
    line-height: 1;
}

/* ---------- Разделы ---------- */

.kz-redesign .kz-prod .kz-prod-section {
    margin: 0;
    padding: 64px 0;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-prod .kz-prod-section + .kz-prod-section {
    padding-top: 0;
}

.kz-redesign .kz-prod .kz-prod-section + .kz-prod-section > .kz-cat-inner::before {
    content: "";
    display: block;
    margin: 0 0 64px;
    border-top: 1px solid var(--kz-bp-mist-line);
}

/* Полоса mist (аксессуары) и раздел после неё: граница — смена поверхности, без линии */

.kz-redesign .kz-prod .kz-prod-section.kz-prod-accessories {
    padding: 64px 0;
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-prod .kz-prod-accessories + .kz-prod-section {
    padding-top: 64px;
}

.kz-redesign .kz-prod .kz-prod-section.kz-prod-accessories > .kz-cat-inner::before,
.kz-redesign .kz-prod .kz-prod-accessories + .kz-prod-section > .kz-cat-inner::before {
    content: none;
}

/* Нижние разделы — во всю ширину контейнера страницы (.kz-cat-inner, 1280px): заголовки, текст, таблицы, карточки и
   разделители стоят по одной сетке с первым экраном; ограничений меры чтения внутри разделов нет */

.kz-redesign .kz-prod .kz-prod-col {
    min-width: 0;
    max-width: none;
    margin: 0;
}

.kz-redesign .kz-prod .kz-prod-h2 {
    max-width: none;
    margin: 0 0 var(--kz-space-lg);
    padding: 0;
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
    overflow-wrap: break-word;
}

/* Текст CMS: кегль 17–19px; legacy .text_block (красные маркеры и ссылки, вес 300) переопределён */

.kz-redesign .kz-prod .kz-prod-text {
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-bp-body-size);
    font-weight: 400;
    line-height: var(--kz-bp-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-prod .kz-prod-text p,
.kz-redesign .kz-prod .kz-prod-text div {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-prod .kz-prod-text h2,
.kz-redesign .kz-prod .kz-prod-text h3,
.kz-redesign .kz-prod .kz-prod-text h4 {
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
}

.kz-redesign .kz-prod .kz-prod-text h2 {
    margin-top: 48px;
    font-size: 22px;
    line-height: 28px;
}

.kz-redesign .kz-prod .kz-prod-text h3 {
    margin-top: 36px;
    font-size: 19px;
    line-height: 26px;
}

.kz-redesign .kz-prod .kz-prod-text h4 {
    margin-top: 24px;
    font-size: 17px;
    line-height: 24px;
}

.kz-redesign .kz-prod .kz-prod-text > :first-child,
.kz-redesign .kz-prod .kz-prod-text > div:first-child > :first-child {
    margin-top: 0;
}

.kz-redesign .kz-prod .kz-prod-text strong,
.kz-redesign .kz-prod .kz-prod-text b {
    font-weight: 500;
}

.kz-redesign .kz-prod .kz-prod-text a {
    color: var(--kz-bp-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-prod .kz-prod-text ul li::before {
    top: calc(var(--kz-bp-body-line) / 2 - 1px);
    width: 10px;
    height: 2px;
    background: var(--kz-bp-blue);
}

.kz-redesign .kz-prod .kz-prod-text ol > li::before {
    background: none;
    color: var(--kz-bp-blue);
}

/* Выноски CMS (div.substrate, blockquote): подложка mist с рамкой mist-line, без кавычек legacy */

.kz-redesign .kz-prod .kz-prod-text .substrate,
.kz-redesign .kz-prod .kz-prod-text blockquote {
    margin: var(--kz-space-lg) 0;
    padding: var(--kz-space-base) var(--kz-space-card-padding);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-text);
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-prod .kz-prod-text blockquote::before,
.kz-redesign .kz-prod .kz-prod-text blockquote::after {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kz-radius-control);
}

/* Фото с обтеканием из CMS (.image-align-left/right): в колонке чтения не шире 44%, чтобы рядом оставалась строка
   нормальной длины; до 767px — без обтекания (как в legacy response_767.css) */

.kz-redesign .kz-prod .kz-prod-text .image-align-left,
.kz-redesign .kz-prod .kz-prod-text .image-align-right {
    max-width: 44%;
    height: auto;
}

.kz-redesign .kz-prod .kz-prod-text .image-align-left {
    margin: 4px var(--kz-space-lg) var(--kz-space-base) 0;
}

.kz-redesign .kz-prod .kz-prod-text .image-align-right {
    margin: 4px 0 var(--kz-space-base) var(--kz-space-lg);
}

@media (max-width: 767px) {
    .kz-redesign .kz-prod .kz-prod-text .image-align-left,
    .kz-redesign .kz-prod .kz-prod-text .image-align-right {
        max-width: 100%;
        margin: var(--kz-space-base) 0;
    }
}

/* Таблицы характеристик: строки с линиями mist-line, подписи групп — на mist, значения Roboto; широкая таблица
   прокручивается внутри колонки */

.kz-redesign .kz-prod .kz-prod-text table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--kz-space-lg);
    border: 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-prod .kz-prod-text table > thead,
.kz-redesign .kz-prod .kz-prod-text table > tbody {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.kz-redesign .kz-prod .kz-prod-text th,
.kz-redesign .kz-prod .kz-prod-text td {
    padding: 10px var(--kz-space-base) 10px 0;
    border: 0;
    border-bottom: 1px solid var(--kz-bp-mist-line);
    color: var(--kz-bp-text);
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    vertical-align: top;
}

/* legacy: полосы tr:nth-child и серые ячейки .pcat-table — сняты */

.kz-redesign .kz-prod .kz-prod-text tr,
.kz-redesign .kz-prod .kz-prod-text td {
    background: none;
}

.kz-redesign .kz-prod .kz-prod-text thead th {
    border-bottom: 1px solid var(--kz-bp-mist-line);
}

.kz-redesign .kz-prod .kz-prod-text td:first-child {
    width: 40%;
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-prod .kz-prod-text td + td {
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-prod .kz-prod-text th {
    padding: 10px var(--kz-space-md);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-ink);
    font-weight: 500;
}

.kz-redesign .kz-prod .kz-prod-text td p,
.kz-redesign .kz-prod .kz-prod-text th p {
    margin: 0;
    color: inherit;
    font: inherit;
}

/* Характеристики: свёрнуты до границы строки (kz-product.js), без затемнения; без скрипта — целиком */

.kz-redesign .kz-prod .product_features .hide {
    position: static;
    overflow: visible;
    max-height: none;
}

.kz-redesign .kz-prod .product_features .hide::after {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-specs--clamp .kz-prod-specs-data.hide {
    overflow: hidden;
}

.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 44px;
    margin: var(--kz-space-base) 0 0;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid var(--kz-bp-blue);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-bp-blue);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--kz-prod-chevron) center / contain no-repeat;
    mask: var(--kz-prod-chevron) center / contain no-repeat;
    transform: rotate(90deg);
}

.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle.active::after {
    transform: rotate(-90deg);
}

.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle span + span,
.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle.active span {
    display: none;
}

.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle.active span + span {
    display: inline;
}

/* Без скрипта и у короткой таблицы кнопки нет */

.kz-redesign .kz-prod .kz-prod-specs:not(.kz-prod-specs--clamp) .kz-prod-specs-toggle,
.kz-redesign .kz-prod .product_features .kz-prod-specs-toggle[hidden] {
    display: none;
}

/* Документы: карточки файлов, тип файла на mist */

.kz-redesign .kz-prod .kz-prod-docs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--kz-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-docs-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-docs-list li::before {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-doc {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-base);
    height: 100%;
    padding: var(--kz-space-base);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
    text-decoration: none;
}

.kz-redesign .kz-prod .kz-prod-doc-type {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 56px;
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-blue);
    font-family: var(--kz-font-data);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
}

.kz-redesign .kz-prod .kz-prod-doc-body {
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-xs);
    min-width: 0;
}

.kz-redesign .kz-prod .kz-prod-doc-name {
    color: var(--kz-bp-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: break-word;
}

.kz-redesign .kz-prod .kz-prod-doc-info {
    color: var(--kz-bp-text-2);
    font-family: var(--kz-font-data);
    font-size: 13px;
    line-height: 19px;
}

/* Аксессуары: Swiper scripts.js (#products_slider1) с корневыми карточками catalog_list_products_list_no_schema —
   оформлены как карточки списка; legacy-кнопки сравнения и избранного в этих карточках без обработчиков — скрыты */

.kz-redesign .kz-prod #products_slider1 {
    padding: 2px;
}

.kz-redesign .kz-prod #products_slider1 .slide {
    height: auto;
}

.kz-redesign .kz-prod #products_slider1 .product {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--kz-space-md);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
}

.kz-redesign .kz-prod #products_slider1 .product .sticker {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    padding: 2px 10px;
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-paper);
    box-shadow: inset 0 0 0 1px #8FBBA8;
    color: #1F5A46;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-prod #products_slider1 .product .thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    height: auto;
    margin: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-prod #products_slider1 .product .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: var(--kz-space-md);
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kz-redesign .kz-prod #products_slider1 .product .info {
    flex: 1 1 auto;
    padding: var(--kz-space-md) var(--kz-space-xs) 0;
}

.kz-redesign .kz-prod #products_slider1 .product .name,
.kz-redesign .kz-prod #products_slider1 .product .name a {
    margin: 0;
    color: var(--kz-bp-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
    text-decoration: none;
}

.kz-redesign .kz-prod #products_slider1 .product .desc {
    margin: 6px 0 0;
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-prod #products_slider1 .product .desc2 {
    display: none;
}

.kz-redesign .kz-prod #products_slider1 .product .btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-xs) var(--kz-space-md);
    margin: 0;
    padding: var(--kz-space-base) var(--kz-space-xs) 0;
}

.kz-redesign .kz-prod #products_slider1 .product .btns .btn {
    display: none;
}

.kz-redesign .kz-prod #products_slider1 .product .price {
    margin: 0;
    color: var(--kz-bp-text);
    font-family: var(--kz-font-data);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}

.kz-redesign .kz-prod #products_slider1 .product .price.request {
    color: var(--kz-bp-text-2);
}

.kz-redesign .kz-prod #products_slider1 .product .link {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--kz-bp-blue);
    font-size: var(--kz-type-button-size);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
}

.kz-redesign .kz-prod #products_slider1 .swiper-button-prev,
.kz-redesign .kz-prod #products_slider1 .swiper-button-next {
    top: 38%;
    display: flex;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: 50%;
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    opacity: 1;
    box-shadow: none;
    transform: none;
}

.kz-redesign .kz-prod #products_slider1 .swiper-button-prev {
    left: 8px;
}

.kz-redesign .kz-prod #products_slider1 .swiper-button-next {
    right: 8px;
}

/* Товаров меньше, чем помещается в ленту, — стрелок нет (как у legacy .products) */

.kz-redesign .kz-prod #products_slider1 .swiper-button-disabled,
.kz-redesign .kz-prod #products_slider1 .swiper-button-lock {
    display: none;
}

.kz-redesign .kz-prod #products_slider1 .swiper-button-prev .icon,
.kz-redesign .kz-prod #products_slider1 .swiper-button-next .icon {
    width: 16px;
    height: 16px;
}

.kz-redesign .kz-prod #products_slider1 .swiper-button-prev .icon {
    transform: rotate(180deg);
}

.kz-redesign .kz-prod #products_slider1 .swiper-button-next .icon {
    transform: none;
}

/* Публикации: корневые списки статей и блогов на всю ширину контейнера */


/* Публикации: статьи и блоги (корневой articles_list и KZ blogs_list, разметка .item > .info + a.thumb не менялась)
   сеткой карточек — фото 16:10 сверху, дата и автор строкой, название до четырёх строк; карточка без фото — только текст;
   краткое описание в карточке не показывается (материал целиком — по ссылке). Правила .equipment из styles.css не
   применяются: у секции нет классов .equipment и .row */

.kz-redesign .kz-prod .kz-prod-pubs-group + .kz-prod-pubs-group {
    margin-top: var(--kz-space-xxl);
}

.kz-redesign .kz-prod .kz-prod-pubs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-space-lg);
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .thumb {
    position: relative;
    order: -1;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: var(--kz-radius-card) var(--kz-radius-card) 0 0;
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .thumb div {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .thumb img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    color: transparent;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .info {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
    gap: var(--kz-space-xs) var(--kz-space-md);
    width: auto;
    margin: 0;
    padding: var(--kz-space-base) var(--kz-space-base) var(--kz-space-card-padding);
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .date,
.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .person {
    margin: 0;
    padding: 0;
    color: var(--kz-bp-text-2);
    font-family: var(--kz-font-data);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .person {
    min-width: 0;
    font-family: var(--kz-font-ui);
    overflow-wrap: anywhere;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .name {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .name a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow-wrap: break-word;
}

/* Вся карточка ведёт по ссылке названия: её ::after растянут на карточку (фото-ссылка остаётся под ним) */

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .name a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--kz-radius-card);
}

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item .desc {
    display: none;
}

/* Фокус с клавиатуры: кольцо вокруг названия (общее правило .kz-prod a:focus-visible) и рамка карточки, как при наведении */

.kz-redesign .kz-prod .kz-prod-pubs-grid > .item:has(.name a:focus-visible) {
    border-color: var(--kz-bp-blue);
    box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
}

/* Теги */

.kz-redesign .kz-prod .kz-prod-taglist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-taglist li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-taglist li::before {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: var(--kz-space-sm) 14px;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    transition: none;
}

/* Отзывы */

.kz-redesign .kz-prod .kz-prod-opinions-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kz-space-base) var(--kz-space-lg);
    margin-bottom: var(--kz-space-lg);
}

.kz-redesign .kz-prod .kz-prod-opinions-head .kz-prod-h2 {
    flex: 1 1 320px;
    margin: 0;
}

.kz-redesign .kz-prod .kz-prod-opinions-head .kz-btn {
    flex: none;
}

.kz-redesign .kz-prod .kz-prod-opinions-list > p {
    margin: 0;
    color: var(--kz-bp-text-2);
    font-size: var(--kz-bp-body-size);
    line-height: var(--kz-bp-body-line);
}

/* Текст отзывов (legacy .text_block): ссылки синие вместо красных, как в тексте CMS страницы */

.kz-redesign .kz-prod .kz-prod-opinions-list .text_block {
    color: var(--kz-bp-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
}

.kz-redesign .kz-prod .kz-prod-opinions-list .text_block a {
    color: var(--kz-bp-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-prod .kz-prod-opinions-list .reviews-item {
    margin: 0 0 var(--kz-space-md);
    padding: var(--kz-space-card-padding);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

/* ---------- «Возникли вопросы?»: синяя полоса обращения, белая карточка менеджера ---------- */

.kz-redesign .kz-prod .kz-prod-ask {
    padding: 64px 0;
    background: var(--kz-bp-blue);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-prod .kz-prod-ask-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--kz-space-xl) var(--kz-space-xxl);
    align-items: start;
}

.kz-redesign .kz-prod .kz-prod-ask-title {
    margin: 0 0 var(--kz-space-base);
    padding: 0;
    color: var(--kz-bp-on-ink);
    font-family: var(--kz-font-ui);
    font-size: 32px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-prod .kz-prod-ask-desc p {
    max-width: 40em;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-bp-on-ink-2);
    font-size: 18px;
    line-height: 28px;
}

.kz-redesign .kz-prod .kz-prod-ask-btn {
    margin-top: var(--kz-space-base);
    border: 0;
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-prod .kz-prod-ask-btn:active {
    background: #C7D5F5;
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-prod .kz-prod-manager {
    padding: var(--kz-space-lg);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
}

.kz-redesign .kz-prod .kz-prod-manager-title {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-label-size);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-prod .kz-prod-manager-cat {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 32px;
    color: var(--kz-bp-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
    text-decoration: none;
}

.kz-redesign .kz-prod .kz-prod-manager-cat::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--kz-bp-blue);
    -webkit-mask: var(--kz-prod-arrow) center / contain no-repeat;
    mask: var(--kz-prod-arrow) center / contain no-repeat;
}

.kz-redesign .kz-prod .kz-prod-manager-contacts {
    margin: var(--kz-space-sm) 0 0;
    padding: 0;
    font-family: var(--kz-font-data);
    font-size: 15px;
    line-height: 26px;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-manager-contacts li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-prod .kz-prod-manager-contacts li::before {
    content: none;
}

.kz-redesign .kz-prod .kz-prod-manager-contacts a {
    color: var(--kz-bp-blue);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* ---------- Фокус: на белом — синее кольцо, на ink и синем — белое ---------- */

.kz-redesign .kz-prod a:focus-visible,
.kz-redesign .kz-prod button:focus-visible,
.kz-redesign .kz-prod [role="button"]:focus-visible {
    outline: 2px solid var(--kz-bp-blue) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-prod .kz-prod-crumbs a:focus-visible,
.kz-redesign .kz-prod .kz-prod-head a:focus-visible,
.kz-redesign .kz-prod .kz-prod-tools > button:focus-visible,
.kz-redesign .kz-prod .kz-prod-share > button:focus-visible,
.kz-redesign .kz-prod .kz-prod-keys a:focus-visible,
.kz-redesign .kz-prod .kz-prod-pluses a:focus-visible,
.kz-redesign .kz-prod .kz-prod-ask-text a:focus-visible,
.kz-redesign .kz-prod .kz-prod-ask-text button:focus-visible {
    outline-color: var(--kz-bp-on-ink) !important;
}

.kz-redesign .kz-prod .kz-prod-anchors a:focus-visible {
    outline-offset: -2px !important;
}

/* Ссылка фото заполняет ленту Swiper (overflow: hidden) — кольцо внутри */

.kz-redesign .kz-prod .product_info .images .big .slide a:focus-visible {
    outline-offset: -4px !important;
}

/* ---------- Наведение ---------- */

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-prod .kz-prod-crumbs .breadcrumbs a:hover,
    .kz-redesign .kz-prod .kz-prod-keys-all:hover {
        color: var(--kz-bp-on-ink);
    }

    .kz-redesign .kz-prod .kz-prod-tool:hover {
        border-color: var(--kz-bp-glow);
        background: var(--kz-bp-on-ink-fill-hover);
        color: var(--kz-bp-on-ink);
    }

    .kz-redesign .kz-prod .kz-prod-tool.active:hover {
        border-color: var(--kz-color-paper);
        background: #DCE5FA;
        color: var(--kz-bp-ink);
    }

    .kz-redesign .kz-prod .share-widget-link-item:hover {
        background: var(--kz-bp-mist);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod .product_info .images .big .swiper-button-prev:hover,
    .kz-redesign .kz-prod .product_info .images .big .swiper-button-next:hover,
    .kz-redesign .kz-prod #products_slider1 .swiper-button-prev:hover,
    .kz-redesign .kz-prod #products_slider1 .swiper-button-next:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod .product_info .images .thumbs .slide button:hover {
        border-color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod .product_info .kz-prod-btn:hover {
        border-color: var(--kz-bp-blue-hover);
        background: #EEF2FB;
        color: var(--kz-bp-blue-hover);
    }

    .kz-redesign .kz-prod .product_info .kz-prod-btn--primary:hover {
        background: var(--kz-bp-blue-hover);
        color: var(--kz-color-paper);
    }

    .kz-redesign .kz-prod .kz-prod-replace-list a:hover,
    .kz-redesign .kz-prod .kz-prod-text a:hover,
    .kz-redesign .kz-prod .kz-prod-manager-contacts a:hover {
        color: var(--kz-bp-blue-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-prod .kz-prod-anchors a:hover {
        color: var(--kz-bp-ink);
    }

    .kz-redesign .kz-prod .product_features .kz-prod-specs-toggle:hover {
        background: #EEF2FB;
        color: var(--kz-bp-blue-hover);
    }

    .kz-redesign .kz-prod .kz-prod-doc:hover {
        border-color: var(--kz-bp-blue);
        box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod .kz-prod-doc:hover .kz-prod-doc-name {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-prod #products_slider1 .product:hover {
        border-color: var(--kz-bp-blue);
        box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod #products_slider1 .product:hover .thumb {
        background: var(--kz-bp-media-hover);
    }

    .kz-redesign .kz-prod #products_slider1 .product:hover .name a {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-prod #products_slider1 .product .link:hover {
        background: none;
        color: var(--kz-bp-blue-hover);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid > .item:hover {
        border-color: var(--kz-bp-blue);
        box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid > .item:hover .name a {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-prod .kz-prod-tag:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-prod .kz-prod-ask-btn:hover {
        background: #DCE5FA;
        color: var(--kz-bp-ink);
    }

    .kz-redesign .kz-prod .kz-prod-manager-cat:hover {
        color: var(--kz-bp-blue);
    }
}

/* ---------- 1024–1279px: фото ниже, условия поставки в одну колонку ---------- */

@media (max-width: 1279px) {
    .kz-redesign .kz-prod {
        --kz-prod-stage: 420px;
    }

    .kz-redesign .kz-prod .kz-prod-grid {
        column-gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-prod .kz-prod-pluses {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- До 1023px: одна колонка — название, фото, характеристики и цена рядом, условия ---------- */

@media (max-width: 1023px) {
    .kz-redesign .kz-prod .kz-prod-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "media"
            "side";
        grid-template-rows: auto;
    }

    .kz-redesign .kz-prod .kz-prod-grid--nomedia {
        grid-template-areas:
            "head"
            "side";
    }

    .kz-redesign .kz-prod .kz-prod-media {
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-prod .kz-prod-pluses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-prod .kz-prod-ask-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-prod .product_head.is_stuck .kz-prod-nav-name {
        display: none;
    }
}

/* ---------- До 767px ---------- */

@media (max-width: 767px) {
    .kz-redesign .kz-prod .kz-prod-hero {
        padding: var(--kz-space-base) 0 var(--kz-space-xl);
    }

    .kz-redesign .kz-prod .kz-prod-crumbs {
        margin-bottom: var(--kz-space-base);
    }

    .kz-redesign .kz-prod .kz-prod-brand {
        height: 36px;
        margin-bottom: var(--kz-space-md);
    }

    .kz-redesign .kz-prod .kz-prod-title {
        font-size: 28px;
        line-height: 34px;
    }

    .kz-redesign .kz-prod .kz-prod-title::after {
        width: 72px;
        margin-top: var(--kz-space-md);
    }

    .kz-redesign .kz-prod .kz-prod-purpose {
        margin-top: var(--kz-space-md);
        font-size: 16px;
        line-height: 24px;
    }

    .kz-redesign .kz-prod .kz-prod-meta {
        margin-top: var(--kz-space-base);
    }

    /* Фото 4:3 без миниатюр, счётчик «2 / 5» и стрелки поверх; панель — во всю ширину экрана */

    .kz-redesign .kz-prod .product_info .images.kz-prod-gallery {
        display: block;
        margin: 0 calc(var(--kz-gutter-mobile) * -1);
        padding: var(--kz-space-base);
        border-radius: 0;
    }

    .kz-redesign .kz-prod .product_info .images .thumbs.swiper-container {
        display: none;
    }

    .kz-redesign .kz-prod .product_info .images .big .slide a {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .kz-redesign .kz-prod .kz-prod-gallery-count {
        display: block;
    }

    .kz-redesign .kz-prod .product_info .kz-prod-buy {
        padding: var(--kz-space-card-padding) var(--kz-space-base);
    }

    .kz-redesign .kz-prod .kz-prod-price-value {
        font-size: 28px;
        line-height: 34px;
    }

    .kz-redesign .kz-prod .kz-prod-price--request .kz-prod-price-value,
    .kz-redesign .kz-prod .kz-prod-price--status .kz-prod-price-value {
        font-size: 22px;
        line-height: 28px;
    }

    .kz-redesign .kz-prod .product_info .kz-prod-btn {
        flex-basis: 100%;
    }

    .kz-redesign .kz-prod .kz-prod-pluses {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-md);
    }

    .kz-redesign .kz-prod .kz-prod-nav-inner {
        min-height: 48px;
    }

    .kz-redesign .kz-prod .kz-prod-anchors {
        gap: 0 var(--kz-space-base);
        margin: -2px calc(var(--kz-gutter-mobile) * -1);
        padding: 2px var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-prod .kz-prod-anchors a {
        min-height: 48px;
        font-size: 14px;
    }

    .kz-redesign .kz-prod .kz-prod-section,
    .kz-redesign .kz-prod .kz-prod-section.kz-prod-accessories,
    .kz-redesign .kz-prod .kz-prod-accessories + .kz-prod-section {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-prod .kz-prod-section + .kz-prod-section {
        padding-top: 0;
    }

    .kz-redesign .kz-prod .kz-prod-accessories + .kz-prod-section,
    .kz-redesign .kz-prod .kz-prod-section.kz-prod-accessories {
        padding-top: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-prod .kz-prod-section + .kz-prod-section > .kz-cat-inner::before {
        margin-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-prod .kz-prod-h2 {
        margin-bottom: var(--kz-space-base);
        font-size: 22px;
        line-height: 28px;
    }

    .kz-redesign .kz-prod .kz-prod-text h2 {
        margin-top: 36px;
        font-size: 20px;
        line-height: 26px;
    }

    .kz-redesign .kz-prod .kz-prod-text h3 {
        margin-top: 28px;
        font-size: 18px;
        line-height: 24px;
    }

    .kz-redesign .kz-prod .kz-prod-text th,
    .kz-redesign .kz-prod .kz-prod-text td {
        font-size: 14px;
        line-height: 20px;
    }

    .kz-redesign .kz-prod .kz-prod-docs-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-sm);
    }

    /* Публикации на телефоне — строки: фото 112px слева, дата и название справа */

    .kz-redesign .kz-prod .kz-prod-pubs-grid > .item {
        flex-direction: row;
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid > .item .thumb {
        flex: 0 0 112px;
        aspect-ratio: auto;
        min-height: 84px;
        border-radius: var(--kz-radius-card) 0 0 var(--kz-radius-card);
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid > .item .info {
        flex: 1 1 auto;
        padding: var(--kz-space-md) var(--kz-space-md) var(--kz-space-md) var(--kz-space-base);
    }

    .kz-redesign .kz-prod .kz-prod-pubs-grid > .item .name a {
        font-size: 15px;
        line-height: 21px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .kz-redesign .kz-prod .kz-prod-pubs-group + .kz-prod-pubs-group {
        margin-top: var(--kz-space-xl);
    }

    .kz-redesign .kz-prod .kz-prod-ask {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-prod .kz-prod-ask-title {
        font-size: 26px;
        line-height: 32px;
    }

    .kz-redesign .kz-prod .kz-prod-ask-desc p {
        font-size: 16px;
        line-height: 25px;
    }

    .kz-redesign .kz-prod .kz-prod-manager {
        padding: var(--kz-space-card-padding) var(--kz-space-base);
    }
}

@media (max-width: 479px) {
    .kz-redesign .kz-prod .kz-prod-keys-list > div {
        gap: var(--kz-space-md);
        padding: var(--kz-space-sm) 0;
    }

    .kz-redesign .kz-prod .kz-prod-keys-list dt,
    .kz-redesign .kz-prod .kz-prod-keys-list dd {
        font-size: 14px;
        line-height: 20px;
    }

    .kz-redesign .kz-prod .kz-prod-tools {
        margin-left: 0;
    }

    .kz-redesign .kz-prod .share-widget {
        right: auto;
        left: 0;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-prod .kz-prod-tool {
        width: 44px;
        height: 44px;
    }

    .kz-redesign .kz-prod .kz-prod-tag,
    .kz-redesign .kz-prod .kz-prod-keys-all {
        min-height: 44px;
    }
}

@media print {
    .kz-redesign .kz-prod .kz-prod-hero,
    .kz-redesign .kz-prod .kz-prod-ask,
    .kz-redesign .kz-prod .kz-prod-accessories {
        background: none;
        color: #000000;
    }

    .kz-redesign .kz-prod .kz-prod-title,
    .kz-redesign .kz-prod .kz-prod-purpose,
    .kz-redesign .kz-prod .kz-prod-keys-list dt,
    .kz-redesign .kz-prod .kz-prod-keys-list dd,
    .kz-redesign .kz-prod .kz-prod-plus,
    .kz-redesign .kz-prod .kz-prod-ask-title,
    .kz-redesign .kz-prod .kz-prod-ask-desc p {
        color: #000000;
    }

    .kz-redesign .kz-prod .kz-prod-nav,
    .kz-redesign .kz-prod .kz-prod-tools,
    .kz-redesign .kz-prod .kz-prod-actions,
    .kz-redesign .kz-prod .kz-prod-specs-toggle {
        display: none;
    }

    .kz-redesign .kz-prod .kz-prod-specs-data.hide {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ---------- Окно «Запросить цену» (templates/kz/pricerequests.tpl.php): оформление формы КП 5.6, товар и пометки ---------- */

.kz-redesign .modal.kz-pr-form .kz-pr-product {
    margin: 0 0 var(--kz-space-base);
    padding: var(--kz-space-md) var(--kz-space-base);
    border-radius: var(--kz-radius-control);
    background: #EEF2F9;
    color: #0E244C;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: break-word;
}

.kz-redesign .modal.kz-pr-form .kz-pr-product-label {
    display: block;
    margin-bottom: 2px;
    color: #4A4D63;
    font-size: var(--kz-type-label-size);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .modal.kz-pr-form .kz-pr-optional {
    margin-left: 6px;
    color: var(--kz-color-text-muted);
    font-weight: 400;
    text-transform: none;
}

/*
 * Доработка 5.8.2 (2026-10-06): иконки интерфейса, знак на «О компании», окно «Задать вопрос».
 * Откат — _project_docs/handoff/2026-10-06/rollback-5.8.2/.
 */

/* ---------- Иконки интерфейса: поиск, профиль, сравнение, избранное, корзина, «Поделиться» ----------
   Символы KZ-спрайта /templates/kz-assets/img/sprite.svg?v=2 перерисованы на сетке 24×24 (id прежние): линия 1.5
   currentColor, скруглённые окончания и углы, один акцент var(--icon-accent) — по умолчанию синий логотипа #193F8F.
   Боксы иконок шапки — квадрат 24px (прежние 24×17, 22×21, 22×23, 20×23 были подогнаны под пропорции старых
   символов). Цвета, наведение, фокус и активное состояние кнопок — прежние правила; на тёмных поверхностях
   акцент светлее, на белой кнопке включённого состояния — снова синий. */

.kz-redesign .kz-header .links .compare_link .icon,
.kz-redesign .kz-header .links .favorite_link .icon,
.kz-redesign .kz-header .links .cart_link .icon,
.kz-redesign .kz-header .links .lk_btn .icon,
.kz-redesign .kz-header--inner .links .kz-header-search .icon {
    width: 24px;
    height: 24px;
}

.kz-redesign .kz-header--inner .search form .kz-search-field-icon {
    width: 22px;
    height: 22px;
    margin-top: -11px;
}

/* Неактивные (без счётчика) сравнение, избранное и корзина в шапке — приглушённая линия и приглушённый акцент */

.kz-redesign .kz-header .links span {
    --icon-accent: #6E7CA6;
}

/* Страница товара, первый экран ink: акцент — glow; включённая белая кнопка — синий логотипа */

.kz-redesign .kz-prod .kz-prod-tool {
    --icon-accent: var(--kz-bp-glow);
}

.kz-redesign .kz-prod .kz-prod-tool.active {
    --icon-accent: var(--kz-bp-blue);
    --icon-fill: rgba(25, 63, 143, 0.14);
}

/* Карточки товаров: включённое избранное — лёгкая заливка звезды цветом акцента */

.kz-redesign .kz-pcard-tool.active {
    --icon-fill: rgba(25, 63, 143, 0.14);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-prod .kz-prod-tool:hover {
        --icon-accent: var(--kz-bp-sky);
    }

    .kz-redesign .kz-prod .kz-prod-tool.active:hover {
        --icon-accent: var(--kz-bp-blue);
    }
}

@media (forced-colors: active) {
    .kz-redesign .kz-header .links .icon,
    .kz-redesign .kz-prod .kz-prod-tool .icon,
    .kz-redesign .kz-pcard-tool .icon {
        --icon-accent: currentColor;
        --icon-fill: none;
    }
}

/* ---------- «О компании»: знак-диафрагма по актуальному logo-mark.svg ----------
   Шесть лепестков (контур лепестка логотипа с поворотами через 60°) оттенками синего логотипа #193F8F — от тёмного
   к светлому по кругу, как в диафрагме; шестигранник центра — светлый mist с рамкой, без красного центра логотипа.
   На десктопе 240px (было 200px), на 768–1023px — 128px рядом с заголовком, на телефоне не выводится (как раньше).
   Однократное раскрытие при загрузке: лепестки поворачиваются на место и проявляются по очереди, 0,9 с;
   при prefers-reduced-motion — сразу на месте. */

.kz-redesign .kz-about-iris {
    width: 240px;
    height: 240px;
    overflow: visible;
}

.kz-redesign .kz-about-iris-blade {
    fill: #193F8F;
    stroke: none;
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: kz-about-iris-open 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.kz-redesign .kz-about-iris-blade--2 { fill: #2B52A6; animation-delay: 60ms; }
.kz-redesign .kz-about-iris-blade--3 { fill: #4669B6; animation-delay: 120ms; }
.kz-redesign .kz-about-iris-blade--4 { fill: #6F8CCB; animation-delay: 180ms; }
.kz-redesign .kz-about-iris-blade--5 { fill: #9DB2DE; animation-delay: 240ms; }
.kz-redesign .kz-about-iris-blade--6 { fill: #C8D4EE; animation-delay: 300ms; }

.kz-redesign .kz-about-iris-core {
    fill: #EEF2F9;
    stroke: #D3DCEB;
    stroke-width: 0.8;
    stroke-linejoin: round;
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: kz-about-iris-core 900ms cubic-bezier(0.23, 1, 0.32, 1) 120ms both;
}

@keyframes kz-about-iris-open {
    from {
        opacity: 0;
        transform: rotate(-40deg) scale(0.92);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes kz-about-iris-core {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-about-iris {
        width: 128px;
        height: 128px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-about-iris-blade,
    .kz-redesign .kz-about-iris-core {
        animation: none;
    }
}

/* ---------- Окно «Задать вопрос» / «Обратная связь» (templates/kz/forms_question.tpl.php) ----------
   Оформление формы КП 5.6 (.modal.service-form.kz-kp-form) с модификатором .kz-q-form — как «Запросить цену» 5.8:
   товар отдельной плашкой mist, пометка «необязательно» у необязательных телефона и компании. Поля, согласие,
   ошибки, сообщение об успехе и кнопка закрытия — общие правила формы обращения 5.3B. */

.kz-redesign .modal.kz-q-form .kz-q-product {
    margin: 0 0 var(--kz-space-base);
    padding: var(--kz-space-md) var(--kz-space-base);
    border-radius: var(--kz-radius-control);
    background: #EEF2F9;
    color: #0E244C;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: break-word;
}

.kz-redesign .modal.kz-q-form .kz-q-product-label {
    display: block;
    margin-bottom: 2px;
    color: #4A4D63;
    font-size: var(--kz-type-label-size);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .modal.kz-q-form .kz-q-optional {
    margin-left: 6px;
    color: var(--kz-color-text-muted);
    font-weight: 400;
    text-transform: none;
}

/*
 * Этап 5.9 (2026-10-07): страница оформления заказа, страница результатов поиска, окно «Оставить отзыв».
 * Откат — _project_docs/handoff/2026-10-07/rollback-5.9/. Палитра и компоненты — базовая система DESIGN.md
 * (graphite, primary, smoke, primary-soft, line); палитра пилота каталога (--kz-bp-*) здесь не используется.
 */

/* ---------- Оформление заказа (templates/kz/orders_add.tpl.php, cart_form, orders_success) ----------
   Поля формы — правила формы обращения 5.3B, перенесённые с .modal.service-form на область страницы .kz-order
   (сама страница не .modal: иначе scripts.js отправил бы заказ через ajaxSubmit). Ниже — сетка страницы, шаги формы,
   тип покупателя, реквизиты, вкладки и сводка заказа. */

.kz-redesign .kz-order .form {
    --form_border_color: var(--kz-color-line);
    --form_focus_color: var(--kz-color-primary);
    --form_error_color: var(--kz-color-graphite);
    --form_border_radius: var(--kz-radius-control);
    --form_bg_color: var(--kz-color-paper);
    --form_placeholder_color: var(--kz-color-text-muted);
    --form_columns_offset: 0px;
}

.kz-redesign .kz-order .form .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kz-space-lg);
    margin: 0;
}

.kz-redesign .kz-order .form .columns > * {
    width: auto;
    min-width: 0;
    margin: 0;
}

.kz-redesign .kz-order .form .line {
    margin: 0 0 var(--kz-space-card-padding);
}

.kz-redesign .kz-order .form .label {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-order .form .input,
.kz-redesign .kz-order .form select {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    line-height: 24px;
    transition: none;
}

.kz-redesign .kz-order .form textarea.input {
    height: 72px;
    min-height: 72px;
    padding: 10px var(--kz-space-md);
    resize: vertical;
}

.kz-redesign .kz-order .form textarea[name="message"] {
    height: 112px;
}

.kz-redesign .kz-order .form .input::placeholder {
    color: var(--kz-color-text-muted);
    opacity: 1;
}

.kz-redesign .kz-order .form .input:focus,
.kz-redesign .kz-order .form select:focus {
    border-color: var(--kz-color-primary);
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: -1px !important;
}

.kz-redesign .kz-order .form .input.error {
    border-color: var(--kz-color-graphite);
    box-shadow: inset 0 0 0 1px var(--kz-color-graphite);
}

.kz-redesign .kz-order p.error {
    position: relative;
    display: block;
    margin: var(--kz-space-sm) 0 0;
    padding: 0 0 0 22px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-small-size);
    font-weight: 500;
    line-height: 19px;
}

.kz-redesign .kz-order p.error::first-letter {
    text-transform: uppercase;
}

.kz-redesign .kz-order p.error::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.5v4.25' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='8' cy='11.25' r='1' fill='black'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.5v4.25' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='8' cy='11.25' r='1' fill='black'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .kz-order .form .nice-select {
    position: relative;
    display: block;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-order .form .nice-select .current {
    box-sizing: border-box;
    height: 44px;
    padding: 0 40px 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: 42px;
    transition: none;
}

.kz-redesign .kz-order .form .nice-select .current::after {
    top: 0;
    right: var(--kz-space-md);
    bottom: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 0;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    transform: none;
    transform-origin: 50% 50%;
    transition: transform 170ms var(--kz-ease-out);
}

.kz-redesign .kz-order .form .nice-select.open .current::after {
    transform: rotate(180deg);
}

.kz-redesign .kz-order .form .nice-select.open .current {
    border-color: var(--kz-color-primary);
}

.kz-redesign .kz-order .form .nice-select:focus-visible {
    outline: 2px solid var(--kz-color-primary) !important;
    outline-offset: 2px !important;
}

.kz-redesign .kz-order .form .nice-select .list {
    top: calc(100% + var(--kz-space-xs));
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: var(--kz-shadow-overlay);
}

.kz-redesign .kz-order .form .nice-select.open .list {
    top: calc(100% + var(--kz-space-xs));
}

.kz-redesign .kz-order .form .nice-select .list .list_item {
    padding: 10px var(--kz-space-md);
    border-radius: 0;
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: 24px;
    transition: none;
}

.kz-redesign .kz-order .form .nice-select .list .list_item.focus {
    background: var(--kz-color-smoke);
    box-shadow: inset 2px 0 0 var(--kz-color-primary);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-order .form .nice-select .list .list_item.selected {
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-primary);
}

.kz-redesign .kz-order .form .wrap-phone-selector {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-space-sm);
}

.kz-redesign .kz-order .form .phone-selector {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.kz-redesign .kz-order .form .btn-add-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-primary);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .form .phones-lines .columns .btn-add-phone::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .kz-order .form .phones-lines .columns:first-child .btn-add-phone::after {
    content: "";
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5v9M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5v9M3.5 8h9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .kz-order .form .phones-lines > .columns + .columns {
    margin-top: 0;
}

.kz-redesign .kz-order .form .phones-lines > .columns + .columns p.error {
    display: none;
}

.kz-redesign .kz-order .form .phones-lines > .columns + .columns .input.error:not(:focus) {
    border-color: var(--kz-color-line);
    box-shadow: none;
}

.kz-redesign .kz-order .form .file-field {
    position: relative;
    max-width: none;
}

.kz-redesign .kz-order .form input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 44px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.kz-redesign .kz-order .form input[type="file"] + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    box-sizing: border-box;
    width: auto;
    height: 44px;
    padding: 0 var(--kz-space-card-padding);
    border: 1px solid var(--kz-color-graphite);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .form input[type="file"] + label::before {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .kz-order .form input[type="file"]:focus-visible + label,
.kz-redesign .kz-order .form input[type="file"]:focus-visible ~ .file.show {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .kz-order .form .file {
    box-sizing: border-box;
    gap: var(--kz-space-xs);
    max-width: 100%;
    min-height: 44px;
    padding: 0 0 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-order .form .file.show {
    display: inline-flex;
}

.kz-redesign .kz-order .form .file::before {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: var(--kz-space-xs);
    background: var(--kz-color-text-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 7.6l-5.3 5.3a3.2 3.2 0 0 1-4.5-4.5l5.6-5.6a2.1 2.1 0 0 1 3 3L6.4 11.4a1 1 0 0 1-1.5-1.5l5-5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
}

.kz-redesign .kz-order .form .file .name {
    min-width: 0;
    max-width: none;
    margin: 0;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-transform: none;
}

.kz-redesign .kz-order .form .file .name span,
.kz-redesign .kz-order .form .file .name a {
    color: var(--kz-color-graphite);
    font-weight: 500;
    text-transform: none;
}

.kz-redesign .kz-order .form .file .del {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: none;
    color: var(--kz-color-graphite);
    opacity: 1;
    cursor: pointer;
}

.kz-redesign .kz-order .form .file .del .icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.kz-redesign .kz-order .form .line-submit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-base) var(--kz-space-lg);
    margin: var(--kz-space-sm) 0 0;
    padding: var(--kz-space-lg) 0 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-order .form .wrap-checkboxes {
    min-width: 0;
    margin: 0;
}

.kz-redesign .kz-order .form .wrap-checkboxes > div {
    position: relative;
}

.kz-redesign .kz-order .form input[type="checkbox"] {
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.kz-redesign .kz-order .form input[type="checkbox"] + label {
    position: relative;
    display: block;
    height: auto;
    min-height: 20px;
    padding: 0 0 0 28px;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    cursor: pointer;
}

.kz-redesign .kz-order .form input[type="checkbox"] + label::before {
    top: 1px;
    left: 0;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--kz-color-text-muted);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    transition: none;
}

.kz-redesign .kz-order .form input[type="checkbox"]:checked + label::before {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary);
}

.kz-redesign .kz-order .form input[type="checkbox"] + label .icon {
    top: 6px;
    left: 4px;
    width: 10px;
    height: 8px;
    fill: var(--kz-color-paper);
    transition: none;
}

.kz-redesign .kz-order .form input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .kz-order .form input[type="checkbox"] + label a {
    border: 0;
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-order .form .submit_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    flex: none;
    box-sizing: border-box;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-card-padding);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-primary);
    color: var(--kz-color-on-dark);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .form .submit_btn::after {
    content: "";
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.kz-redesign .kz-order .form .submit_btn:active {
    background: var(--kz-color-primary-active);
}

.kz-redesign .kz-order .form .input,
.kz-redesign .kz-order .form select,
.kz-redesign .kz-order .form .nice-select,
.kz-redesign .kz-order .form input[type="file"],
.kz-redesign .kz-order .form input[type="checkbox"] {
    scroll-margin: var(--kz-space-xl) 0;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-order .form .nice-select:hover .current,
    .kz-redesign .kz-order .form .btn-add-phone:hover {
        border-color: var(--kz-color-primary);
    }

    .kz-redesign .kz-order .form .nice-select .list .list_item:not(.selected):hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-order .form input[type="file"] + label:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-order .form .file .del:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-primary);
    }

    .kz-redesign .kz-order .form .submit_btn:hover {
        background: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-order .form input[type="checkbox"] + label a:hover {
        color: var(--kz-color-primary-hover);
    }

}

@media (max-width: 767px) {
    .kz-redesign .kz-order .form .columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-order .form .phones-lines .columns > .line:first-child {
        margin-bottom: var(--kz-space-sm);
    }

    .kz-redesign .kz-order .form .line-submit {
        flex-direction: column;
        align-items: stretch;
    }

    .kz-redesign .kz-order .form .submit_btn {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-order .form .nice-select .current::after {
        transition: none;
    }

}

@media (forced-colors: active) {
    .kz-redesign .kz-order p.error::before,
    .kz-redesign .kz-order .form .nice-select .current::after,
    .kz-redesign .kz-order .form .file::before {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .kz-redesign .kz-order .form .btn-add-phone::after,
    .kz-redesign .kz-order .form input[type="file"] + label::before,
    .kz-redesign .kz-order .form .submit_btn::after {
        forced-color-adjust: none;
        background: ButtonText;
    }

    .kz-redesign .kz-order .form input[type="checkbox"]:checked + label::before {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
    }

    .kz-redesign .kz-order .form input[type="checkbox"] + label .icon {
        forced-color-adjust: none;
        fill: HighlightText;
    }

    .kz-redesign .kz-order .form .submit_btn {
        border: 1px solid ButtonText;
    }

}


/* Страница: заголовок KZ, контейнер 1280px, сетка «форма | сводка 400px» от 1024px */

.kz-redesign .kz-order-page {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-order-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-order-head {
    padding: var(--kz-space-lg) 0 var(--kz-space-xl);
}

.kz-redesign .kz-order-head .kz-page-title {
    font-size: clamp(36px, 1.6vw + 26px, 48px);
}

.kz-redesign .kz-order-jump {
    display: none;
    margin: var(--kz-space-base) 0 0;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-order-jump a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kz-redesign .order-page.kz-order {
    margin: 0;
    padding: 0 0 var(--kz-space-section);
}

.kz-redesign .kz-order .row.order.kz-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: var(--kz-space-xxl);
    margin: 0;
}

.kz-redesign .kz-order .row.order.kz-order-grid--empty {
    grid-template-columns: minmax(0, 640px);
}

.kz-redesign .kz-order .kz-order-client,
.kz-redesign .kz-order .kz-order-cart {
    flex: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

/* Пустая корзина */

.kz-redesign .kz-order .kz-order-empty {
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-order .kz-order-empty-title {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
}

.kz-redesign .kz-order .kz-order-empty p {
    margin: 0 0 var(--kz-space-lg);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-order .kz-order-empty a:not(.kz-order-empty-btn) {
    color: var(--kz-color-primary);
}

.kz-redesign .kz-order .kz-order-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--kz-space-lg);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-order .kz-order-empty-btn:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Вкладки «Впервые у нас? / Уже работаете с нами?» — сегментированный переключатель */

.kz-redesign .kz-order .tabs.kz-order-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--kz-space-xs);
    margin: 0 0 var(--kz-space-xl);
    padding: var(--kz-space-xs);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-order .tabs.kz-order-tabs button {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 var(--kz-space-base);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: transparent;
    box-shadow: none;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .tabs.kz-order-tabs button span {
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
}

.kz-redesign .kz-order .tabs.kz-order-tabs button span::after,
.kz-redesign .kz-order .tabs.kz-order-tabs button::after {
    display: none;
}

.kz-redesign .kz-order .tabs.kz-order-tabs button.active {
    background: var(--kz-color-paper);
    box-shadow: 0 0 0 1px var(--kz-color-line);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-order .tabs.kz-order-tabs button:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .kz-order .tab_content {
    padding: 0;
    border: 0;
    background: none;
}

/* Форма: шаги, пометка обязательности, подсказки */

.kz-redesign .kz-order .kz-order-form {
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-order .kz-order-note {
    margin: 0 0 var(--kz-space-lg);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-order .kz-order-step {
    margin: var(--kz-space-xl) 0 var(--kz-space-base);
    padding: var(--kz-space-lg) 0 0;
    border-top: 1px solid var(--kz-color-line);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
}

.kz-redesign .kz-order .kz-order-note + .kz-order-step {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.kz-redesign .kz-order .kz-order-fieldset {
    min-width: 0;
    margin: 0 0 var(--kz-space-card-padding);
    padding: 0;
    border: 0;
}

.kz-redesign .kz-order .kz-order-fieldset > legend.label {
    float: none;
    width: auto;
    padding: 0;
}

.kz-redesign .kz-order .kz-order-phones .phones-lines .line {
    margin-bottom: var(--kz-space-sm);
}

.kz-redesign .kz-order .kz-order-hint {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
}

.kz-redesign .kz-order .kz-order-optional {
    margin-left: 6px;
    color: var(--kz-color-text-muted);
    font-weight: 400;
}

.kz-redesign .kz-order .form textarea.input.big,
.kz-redesign .kz-order .form textarea[name="comment"] {
    height: 112px;
}

.kz-redesign .kz-order .line.full-size {
    width: auto;
}

.kz-redesign .kz-order .hidden {
    display: none !important;
}

/* Тип покупателя: радиокнопки визуально скрыты, но доступны с клавиатуры; подписи — сегменты 44px */

.kz-redesign .kz-order .form .customer-selector {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
}

.kz-redesign .kz-order .form .customer-selector > div {
    position: relative;
}

.kz-redesign .kz-order .form .customer-selector input {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.kz-redesign .kz-order .form .customer-selector label {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--kz-space-base) 0 var(--kz-space-md);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .form .customer-selector > div + div label,
.kz-redesign .kz-order .form .customer-selector > div:first-child label,
.kz-redesign .kz-order .form .customer-selector > div:last-child label {
    border-left: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-order .form .customer-selector label::before {
    content: "";
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--kz-color-text-muted);
    border-radius: 50%;
    background: var(--kz-color-paper);
}

.kz-redesign .kz-order .form .customer-selector :checked + label {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-order .form .customer-selector div > :checked + label {
    border-left-color: var(--kz-color-primary);
}

.kz-redesign .kz-order .form .customer-selector :checked + label::before {
    border-color: var(--kz-color-primary);
    box-shadow: inset 0 0 0 3.5px var(--kz-color-paper);
    background: var(--kz-color-primary);
}

.kz-redesign .kz-order .form .customer-selector input:focus-visible + label {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Реквизиты: строка «подпись | файл», поиск по ИНН — ссылка, затем поле и вторичная кнопка */

.kz-redesign .kz-order .form .for-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-base);
    margin: 0 0 var(--kz-space-sm);
}

.kz-redesign .kz-order .form .for-label > .label {
    margin: 0;
}

.kz-redesign .kz-order .wrap-load-requisites {
    margin: var(--kz-space-sm) 0 0;
}

.kz-redesign .kz-order .link-load-requisites {
    border: 0;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kz-redesign .kz-order .form-load-requisites:not(.hidden) {
    display: flex;
    gap: var(--kz-space-sm);
    max-width: 480px;
}

.kz-redesign .kz-order .form-load-requisites .field {
    flex: 1 1 auto;
    min-width: 0;
}

.kz-redesign .kz-order .btn-search-requisites {
    flex: none;
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--kz-space-base);
    border: 1px solid var(--kz-color-graphite);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    cursor: pointer;
}

.kz-redesign .kz-order .btn-search-requisites:focus-visible,
.kz-redesign .kz-order .link-load-requisites:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

.kz-redesign .kz-order .wrap-load-requisites p.error {
    margin-top: var(--kz-space-sm);
}

/* Нижний ряд: согласие и подписка, затем основная кнопка */

.kz-redesign .kz-order .form .line-submit {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-order .form .wrap-checkboxes > div + div {
    margin-top: var(--kz-space-sm);
}

/* Вкладка «Уже работаете с нами?»: форма входа users_login_form в тех же полях */

.kz-redesign .kz-order .kz-order-login .form {
    max-width: 640px;
}

.kz-redesign .kz-order .kz-order-login .form .input {
    height: 44px;
}

/* Сводка заказа: карточка 400px, прилипает при прокрутке от 1024px */

.kz-redesign .kz-order .order-cart.kz-order-cart {
    position: sticky;
    top: var(--kz-space-lg);
    box-sizing: border-box;
    padding: var(--kz-space-lg);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    box-shadow: none;
}

.kz-redesign .kz-order .order-cart.kz-order-cart .title {
    margin: 0 0 var(--kz-space-base);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
}

.kz-redesign .kz-order .kz-order-cart .cart_info {
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-order .kz-order-cart .cart-product {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 36px;
    align-items: start;
    gap: var(--kz-space-md);
    margin: 0;
    padding: var(--kz-space-base) 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-order .kz-order-cart .cart-product + .cart-product {
    margin-top: 0;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .wrap-image {
    flex: none;
    width: 64px;
    height: 64px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-order .kz-order-cart .cart-product .wrap-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .wrap-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .wrap-info {
    flex: none;
    width: auto;
    min-width: 0;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .name {
    margin: 0 0 var(--kz-space-xs);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .name a {
    color: var(--kz-color-graphite);
    text-decoration: none;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .description p {
    margin: 0;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .btns-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-md);
    margin: var(--kz-space-md) 0 0;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .price-amount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-sm) var(--kz-space-md);
}

.kz-redesign .kz-order .kz-order-cart .cart-product .price-amount .price {
    margin: 0;
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-price-size);
    font-weight: var(--kz-type-price-weight);
    line-height: 22px;
    white-space: nowrap;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .product-inc .numbers-row {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-order .kz-order-cart .cart-product .product-inc .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .product-inc input {
    box-sizing: border-box;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: 15px;
    line-height: 20px;
    text-align: center;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .product-inc .count {
    display: none;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .product-inc .button:focus-visible,
.kz-redesign .kz-order .kz-order-cart .cart-product .product-inc input:focus-visible,
.kz-redesign .kz-order .kz-order-cart .cart-product .delete-product:focus-visible,
.kz-redesign .kz-order .kz-order-cart .cart-product a:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 1px;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .stock-info {
    width: auto;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-small-size);
    line-height: var(--kz-type-small-line);
    white-space: nowrap;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .delete-product {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-color-text-muted);
    opacity: 1;
    cursor: pointer;
    transition: none;
}

.kz-redesign .kz-order .kz-order-cart .cart-product .delete-product .icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.kz-redesign .kz-order .kz-order-cart .cart-total-block {
    margin: 0;
    padding: var(--kz-space-base) 0 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-order .kz-order-cart .total-cost {
    color: var(--kz-color-text-muted);
    text-align: left;
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-order .kz-order-cart .total-cost .product-counter {
    color: var(--kz-color-graphite);
    font-weight: 500;
}

.kz-redesign .kz-order .kz-order-cart .total-cost .js-all-sum-text {
    display: block;
    margin-top: var(--kz-space-xs);
    color: var(--kz-color-graphite);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
}

/* Экран после оформления заказа */

.kz-redesign .kz-order .kz-order-done {
    display: block;
    max-width: 720px;
    margin: 0;
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-order .kz-order-done:focus {
    outline: none;
}

.kz-redesign .kz-order .kz-order-done .text_block p {
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-order .kz-order-done .text_block p.kz-order-done-title {
    position: relative;
    padding-left: 36px;
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
}

.kz-redesign .kz-order .kz-order-done .kz-order-done-title::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--kz-color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.25' fill='none' stroke='black' stroke-width='1.5'/><path d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.25' fill='none' stroke='black' stroke-width='1.5'/><path d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 24px 24px no-repeat;
}

.kz-redesign .kz-order .kz-order-done .order-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: var(--kz-space-base) 0 var(--kz-space-lg);
}

.kz-redesign .kz-order .kz-order-done .order-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-order .kz-order-done .order-socials .icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-order .tabs.kz-order-tabs button:not(.active):hover {
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-order .form .customer-selector label:hover {
        border-color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-order .kz-order-empty-btn:hover {
        background: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-order .btn-search-requisites:hover {
        background: var(--kz-color-smoke);
    }

    .kz-redesign .kz-order .kz-order-cart .cart-product .name a:hover {
        color: var(--kz-color-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-order .kz-order-cart .cart-product .product-inc .button:hover,
    .kz-redesign .kz-order .kz-order-cart .cart-product .delete-product:hover {
        background: var(--kz-color-smoke);
        color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-order .kz-order-done .order-socials a:hover {
        border-color: var(--kz-color-graphite);
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-order .row.order.kz-order-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-order .order-cart.kz-order-cart {
        position: static;
    }

    .kz-redesign .kz-order-jump {
        display: block;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-order-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-order-head {
        padding: var(--kz-space-base) 0 var(--kz-space-lg);
    }

    .kz-redesign .order-page.kz-order {
        padding-bottom: var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-order .tabs.kz-order-tabs {
        display: flex;
        box-sizing: border-box;
        width: 100%;
    }

    .kz-redesign .kz-order .tabs.kz-order-tabs button {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        height: auto;
        min-height: 44px;
        padding: var(--kz-space-xs) var(--kz-space-sm);
    }

    .kz-redesign .kz-order .order-cart.kz-order-cart,
    .kz-redesign .kz-order .kz-order-empty,
    .kz-redesign .kz-order .kz-order-done {
        padding: var(--kz-space-card-padding) var(--kz-space-base);
    }

    .kz-redesign .kz-order .form .customer-selector {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .kz-redesign .kz-order .form .customer-selector label {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .kz-redesign .kz-order .form .customer-selector :checked + label::before {
        background: Highlight;
    }

    .kz-redesign .kz-order .kz-order-done .kz-order-done-title::before {
        background: CanvasText;
    }
}

/* ---------- Результаты поиска (templates/kz/search.tpl.php) ----------
   Заголовок KZ с запросом, поле нового поиска, вкладки типов — чипы с числом результатов (выбранный — primary-soft),
   список — строки «номер | фото | название, описание, Подробнее», вся строка ведёт по ссылке названия.
   Пагинация — templates/kz/kz_catalog_paging.tpl.php; её правила каталога (.kz-catp, 5.7A) перенесены в область .kz-search. */

.kz-redesign .kz-search-page {
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
}

.kz-redesign .kz-search-inner {
    box-sizing: border-box;
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--kz-gutter);
}

.kz-redesign .kz-search-head {
    padding: var(--kz-space-lg) 0 var(--kz-space-xl);
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-search-head .kz-search-title {
    font-size: clamp(36px, 1.6vw + 26px, 48px);
    overflow-wrap: anywhere;
}

.kz-redesign .kz-search-title .kz-search-query {
    display: block;
    margin-top: var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-heading-3-size);
    font-weight: 400;
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: normal;
}

/* Поле нового поиска */

.kz-redesign .kz-search-again {
    display: flex;
    gap: var(--kz-space-sm);
    max-width: 640px;
    margin: var(--kz-space-xl) 0 0;
}

.kz-redesign .kz-search-again input[type="search"] {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 var(--kz-space-base);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-body-size);
    line-height: 24px;
    -webkit-appearance: none;
    appearance: none;
}

.kz-redesign .kz-search-again input[type="search"]::placeholder {
    color: var(--kz-color-text-muted);
    opacity: 1;
}

.kz-redesign .kz-search-again input[type="search"]:focus {
    border-color: var(--kz-color-primary);
    outline: 2px solid var(--kz-color-primary);
    outline-offset: -1px;
}

.kz-redesign .kz-search-again button {
    flex: none;
    box-sizing: border-box;
    height: 48px;
    margin: 0;
    padding: 0 var(--kz-space-lg);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    cursor: pointer;
}

.kz-redesign .kz-search-again button:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Вкладки типов результатов — чипы */

.kz-redesign .btns.kz-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: var(--kz-space-lg) 0 0;
    padding: 0;
}

.kz-redesign .kz-search-tabs .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    padding: 0 var(--kz-space-base);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    transition: none;
}

.kz-redesign .kz-search-tabs .btn .amount {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-small-size);
    font-weight: 400;
    line-height: 19px;
}

.kz-redesign .kz-search-tabs .btn.active {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-search-tabs .btn.active .amount {
    color: var(--kz-color-graphite);
}

.kz-redesign .kz-search-tabs a.btn:focus-visible {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 2px;
}

/* Список результатов */

.kz-redesign .wrap-search-results.kz-search {
    margin: 0;
    padding: var(--kz-space-xl) 0 var(--kz-space-section);
}

.kz-redesign .kz-search .kz-search-summary {
    margin: 0 0 var(--kz-space-base);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-search .search-results.kz-search-list {
    max-width: 960px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-search .search-results-item.kz-search-item {
    position: relative;
    display: grid;
    grid-template-columns: 32px 128px minmax(0, 1fr);
    align-items: start;
    gap: var(--kz-space-lg);
    margin: 0;
    padding: var(--kz-space-lg) 0;
    border-top: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-search .search-results-item.kz-search-item:last-child {
    border-bottom: 1px solid var(--kz-color-line);
}

.kz-redesign .kz-search .search-results-item + .search-results-item {
    margin-top: 0;
}

.kz-redesign .kz-search .search-results-item .num {
    width: auto;
    padding-top: 2px;
    color: var(--kz-color-text-muted);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-search .search-results-item .wrap-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 96px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-search .search-results-item .wrap-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kz-redesign .kz-search .search-results-item .info {
    min-width: 0;
}

.kz-redesign .kz-search .search-results-item .title {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.kz-redesign .kz-search .search-results-item .title a {
    color: var(--kz-color-graphite);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: none;
}

/* вся строка — ссылка названия */
.kz-redesign .kz-search .search-results-item .title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.kz-redesign .kz-search .search-results-item .title a:focus-visible {
    outline: none;
}

.kz-redesign .kz-search .search-results-item:focus-within {
    outline: 2px solid var(--kz-color-primary);
    outline-offset: 4px;
    border-radius: var(--kz-radius-card);
}

.kz-redesign .kz-search .search-results-item .description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-text-14-size);
    line-height: 21px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.kz-redesign .kz-search .search-results-item .description p,
.kz-redesign .kz-search .search-results-item .description ul {
    margin: 0;
}

.kz-redesign .kz-search .search-results-item .link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--kz-space-md) 0 0;
    color: var(--kz-color-primary);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
}

.kz-redesign .kz-search .search-results-item .link-more .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Состояния: короткий запрос, ничего не найдено */

.kz-redesign .kz-search .kz-search-state {
    max-width: 640px;
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-smoke);
}

.kz-redesign .kz-search .kz-search-state-title {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-graphite);
    font-size: var(--kz-type-heading-3-size);
    font-weight: var(--kz-type-heading-3-weight);
    line-height: var(--kz-type-heading-3-line);
}

.kz-redesign .kz-search .kz-search-state p {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-color-text-muted);
    font-size: var(--kz-type-body-size);
    line-height: var(--kz-type-body-line);
}

.kz-redesign .kz-search .kz-search-state p:last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-search .kz-search-state a {
    color: var(--kz-color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kz-redesign .kz-search .kz-catp-paging {
    max-width: 960px;
    margin-top: var(--kz-space-xl);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-search-again button:hover {
        background: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-search-tabs a.btn:hover {
        border-color: var(--kz-color-graphite);
    }

    .kz-redesign .kz-search .search-results-item:hover .title a {
        color: var(--kz-color-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-search-inner {
        padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-search-head {
        padding: var(--kz-space-base) 0 var(--kz-space-lg);
    }

    .kz-redesign .kz-search-title .kz-search-query {
        font-size: 18px;
        line-height: 24px;
    }

    .kz-redesign .kz-search-again {
        margin-top: var(--kz-space-lg);
    }

    .kz-redesign .kz-search-again button {
        padding: 0 var(--kz-space-base);
    }

    .kz-redesign .wrap-search-results.kz-search {
        padding: var(--kz-space-lg) 0 var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-search .search-results-item.kz-search-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: var(--kz-space-base);
        padding: var(--kz-space-base) 0;
    }

    .kz-redesign .kz-search .search-results-item .num {
        display: none;
    }

    .kz-redesign .kz-search .search-results-item .wrap-image {
        width: 72px;
        height: 72px;
    }

    .kz-redesign .kz-search .search-results-item .title {
        font-size: 16px;
        line-height: 22px;
    }

    .kz-redesign .kz-search .kz-search-state {
        padding: var(--kz-space-card-padding) var(--kz-space-base);
    }
}
.kz-redesign .kz-search .kz-catp-paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-sm);
    margin: var(--kz-space-xl) 0 0;
    padding: 0;
}

.kz-redesign .kz-search .kz-catp-paging > * {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-sm);
    border: 1px solid var(--kz-color-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    box-shadow: none;
    color: var(--kz-color-graphite);
    font-family: var(--kz-font-data);
    font-size: var(--kz-type-data-size);
    font-weight: 400;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: none;
}

.kz-redesign .kz-search .kz-catp-paging > .active {
    border-color: var(--kz-color-graphite);
    background: var(--kz-color-graphite);
    color: var(--kz-color-on-dark);
    font-weight: 500;
}

.kz-redesign .kz-search .kz-catp-paging > .dots {
    min-width: 24px;
    padding: 0;
    border-color: transparent;
    background: none;
    color: var(--kz-color-text-muted);
}

.kz-redesign .kz-search .kz-catp-paging .prev,
.kz-redesign .kz-search .kz-catp-paging .next {
    color: var(--kz-color-graphite);
    font-size: 18px;
}

.kz-redesign .kz-search .kz-catp-paging > * > span:not(.kz-cat-vh) {
    display: inline;
    width: auto;
    height: auto;
    color: inherit;
    line-height: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-search .kz-catp-paging a:hover {
        border-color: var(--kz-color-primary);
        background: var(--kz-color-paper);
        color: var(--kz-color-primary);
    }

}

.kz-redesign .kz-search .kz-catp-paging a:active {
    border-color: var(--kz-color-primary);
    background: var(--kz-color-primary-soft);
    color: var(--kz-color-graphite);
}

@media (max-width: 767px) {
    .kz-redesign .kz-search .kz-catp-paging > * {
        min-width: 40px;
        height: 44px;
        padding: 0 var(--kz-space-xs);
    }

    .kz-redesign .kz-search .kz-catp-paging {
        gap: var(--kz-space-xs);
    }

}


/* ---------- Окно «Оставить отзыв» (templates/kz/opinions_add.tpl.php) ----------
   Оформление формы КП 5.6 (.modal.service-form.kz-kp-form) с модификатором .kz-op-form — как «Задать вопрос» 5.8.2:
   товар плашкой mist, пометки «необязательно», поля 44px, списки nice-select, ошибки и успех — общие правила 5.3B. */

.kz-redesign .modal.kz-op-form .kz-op-product {
    margin: 0 0 var(--kz-space-base);
    padding: var(--kz-space-md) var(--kz-space-base);
    border-radius: var(--kz-radius-control);
    background: #EEF2F9;
    color: #0E244C;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: break-word;
}

.kz-redesign .modal.kz-op-form .kz-op-product-label {
    display: block;
    margin-bottom: 2px;
    color: #4A4D63;
    font-size: var(--kz-type-label-size);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .modal.kz-op-form .kz-op-optional {
    margin-left: 6px;
    color: var(--kz-color-text-muted);
    font-weight: 400;
    text-transform: none;
}

.kz-redesign .modal.kz-op-form .form textarea.input {
    height: 88px;
}

.kz-redesign .modal.kz-op-form .form textarea[name="opinion"] {
    height: 112px;
}

.kz-redesign .modal.kz-op-form .form .line.flex {
    display: block;
}

/* ======================================================================================================================
 * Этап 5.10 (2026-10-07): сравнение товаров (.kz-cmp), избранное (.kz-fav), производитель (.kz-brand), отрасль (.kz-tag),
 * страница 404 (.kz-404). Обёртка .kz-cat .kz-catp .kz-sub даёт первый экран ink, полосу mist, карточки и фокус
 * каталога 5.8; правила ниже действуют только внутри этих пяти модификаторов. Откат —
 * _project_docs/handoff/2026-10-07/rollback-5.10/.
 * ==================================================================================================================== */

/* ---------- Общее: число в чипе раздела ---------- */

.kz-redesign .kz-sub .kz-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: var(--kz-space-sm);
    padding: 0 6px;
    border-radius: var(--kz-radius-chip);
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    font-family: var(--kz-font-data);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-sub .kz-catp-subnav span[aria-current] .kz-chip-count {
    background: var(--kz-bp-mist);
    color: var(--kz-bp-ink);
}

/* ---------- Группы товаров на полосе (производитель, отрасль, 404): отбивка над заголовком, без линий ---------- */

.kz-redesign .kz-sub.kz-brand .kz-catp-group > .kz-cat-inner::before,
.kz-redesign .kz-sub.kz-tag .kz-catp-group > .kz-cat-inner::before,
.kz-redesign .kz-sub.kz-404 .kz-catp-group > .kz-cat-inner::before {
    content: none;
}

.kz-redesign .kz-sub.kz-brand .kz-catp-group,
.kz-redesign .kz-sub.kz-tag .kz-catp-group,
.kz-redesign .kz-sub.kz-404 .kz-catp-group {
    padding: 0;
}

.kz-redesign .kz-sub.kz-brand .kz-catp-group + .kz-catp-group,
.kz-redesign .kz-sub.kz-tag .kz-catp-group + .kz-catp-group {
    padding-top: 56px;
}

.kz-redesign .kz-sub.kz-brand .kz-catp-group-title,
.kz-redesign .kz-sub.kz-tag .kz-catp-group-title,
.kz-redesign .kz-sub.kz-404 .kz-catp-group-title {
    color: var(--kz-bp-ink);
    font-size: 24px;
    line-height: 30px;
}

.kz-redesign .kz-sub.kz-brand .kz-catp-group-all {
    color: var(--kz-bp-blue);
    font-size: 15px;
    line-height: 22px;
}

/* ---------- Сравнение товаров ---------- */

.kz-redesign .kz-sub.kz-cmp .kz-cmp-clear {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-sub.kz-cmp .kz-cmp-clear:active {
    background: var(--kz-bp-on-ink-fill-hover);
}

.kz-redesign .kz-cmp {
    --kz-cmp-param: 240px;
    --kz-cmp-col: 264px;
}

.kz-redesign .kz-cmp .kz-cmp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    min-height: 24px;
    margin: 0 0 var(--kz-space-md);
}

.kz-redesign .kz-cmp .kz-cmp-summary {
    margin: 0;
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-cmp .kz-cmp-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    margin: 0;
    color: var(--kz-bp-ink);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-cmp .kz-cmp-hint[hidden] {
    display: none;
}

.kz-redesign .kz-cmp .kz-cmp-hint-arrow {
    width: 16px;
    height: 16px;
    background: var(--kz-bp-blue);
    -webkit-mask: var(--kz-catp-arrow) center / contain no-repeat;
    mask: var(--kz-catp-arrow) center / contain no-repeat;
}

.kz-redesign .kz-cmp .kz-cmp-frame {
    position: relative;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-cmp .kz-cmp-frame[hidden] {
    display: none;
}

/* Затенение правого края, пока правее есть невидимые товары */

.kz-redesign .kz-cmp .kz-cmp-frame::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 40px;
    border-radius: 0 var(--kz-radius-card) var(--kz-radius-card) 0;
    background: linear-gradient(to left, rgba(14, 36, 76, 0.14), rgba(14, 36, 76, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms var(--kz-ease-out);
}

.kz-redesign .kz-cmp .kz-cmp-frame.is-more-right::after {
    opacity: 1;
}

.kz-redesign .kz-cmp .kz-cmp-scroll {
    overflow-x: auto;
    border-radius: var(--kz-radius-card);
    scrollbar-width: thin;
    scrollbar-color: var(--kz-bp-mist-line) transparent;
}

.kz-redesign .kz-cmp .kz-cmp-scroll:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-cmp .kz-cmp-table {
    width: max(100%, calc(var(--kz-cmp-param) + var(--kz-cmp-n, 2) * var(--kz-cmp-col)));
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--kz-bp-text);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-cmp .kz-cmp-table th,
.kz-redesign .kz-cmp .kz-cmp-table td {
    padding: 12px var(--kz-space-base);
    border: 0;
    border-bottom: 1px solid var(--kz-bp-mist);
    background: var(--kz-color-paper);
    font-weight: 400;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-cmp .kz-cmp-table td + td,
.kz-redesign .kz-cmp .kz-cmp-table th + th,
.kz-redesign .kz-cmp .kz-cmp-table th + td {
    border-left: 1px solid var(--kz-bp-mist);
}

/* Первая колонка — названия параметров, закреплена при прокрутке */

.kz-redesign .kz-cmp .kz-cmp-table th[scope="row"],
.kz-redesign .kz-cmp .kz-cmp-corner {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--kz-cmp-param);
    border-right: 1px solid var(--kz-bp-mist-line);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-cmp .kz-cmp-table th[scope="row"] + td {
    border-left: 0;
}

.kz-redesign .kz-cmp .kz-cmp-corner {
    vertical-align: bottom;
}

.kz-redesign .kz-cmp .kz-cmp-corner-label {
    color: var(--kz-bp-text-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Шапка: карточка товара */

.kz-redesign .kz-cmp .kz-cmp-table thead th,
.kz-redesign .kz-cmp .kz-cmp-table thead td {
    padding-top: var(--kz-space-base);
    padding-bottom: var(--kz-space-base);
    border-bottom-color: var(--kz-bp-mist-line);
}

.kz-redesign .kz-cmp .kz-cmp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.kz-redesign .kz-cmp .kz-cmp-thumb {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-mist);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.kz-redesign .kz-cmp .kz-cmp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kz-redesign .kz-cmp .kz-cmp-name {
    color: var(--kz-bp-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}

.kz-redesign .kz-cmp .kz-cmp-desc {
    display: -webkit-box;
    color: var(--kz-bp-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.kz-redesign .kz-cmp .kz-cmp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--kz-space-sm);
    margin-top: 2px;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-data);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-cmp .kz-cmp-price--request {
    color: var(--kz-bp-text-2);
    font-family: inherit;
}

.kz-redesign .kz-cmp .kz-cmp-price-old {
    color: var(--kz-bp-text-2);
    font-size: 13px;
    font-weight: 400;
}

.kz-redesign .kz-cmp .kz-cmp-card .kz-pcard-badge--stock {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--kz-radius-chip);
    box-shadow: inset 0 0 0 1px #8FBBA8;
    background: var(--kz-color-paper);
    color: #1F5A46;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-redesign .kz-cmp .kz-cmp-del {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: 50%;
    background: var(--kz-color-paper);
    color: var(--kz-bp-text-2);
    cursor: pointer;
}

.kz-redesign .kz-cmp .kz-cmp-del .icon {
    width: 18px;
    height: 18px;
}

.kz-redesign .kz-cmp .kz-cmp-del:active {
    border-color: var(--kz-bp-blue);
    background: #E1E8F7;
    color: var(--kz-bp-blue);
}

.kz-redesign .kz-cmp .kz-cmp-del:focus-visible,
.kz-redesign .kz-cmp .kz-cmp-name:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

/* Группы строк: подпись прокручивается вместе с первой колонкой */

.kz-redesign .kz-cmp .kz-cmp-group > th {
    padding-top: 20px;
    padding-bottom: var(--kz-space-sm);
    border-bottom-color: var(--kz-bp-mist-line);
    background: #F6F8FC;
}

.kz-redesign .kz-cmp .kz-cmp-group-title {
    position: sticky;
    left: var(--kz-space-base);
    color: var(--kz-bp-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-redesign .kz-cmp .kz-cmp-none {
    color: #6B6E82;
}

.kz-redesign .kz-cmp .kz-cmp-text {
    font-size: var(--kz-type-text-14-size);
    line-height: 21px;
}

.kz-redesign .kz-cmp .kz-cmp-text > :first-child {
    margin-top: 0;
}

.kz-redesign .kz-cmp .kz-cmp-text > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-cmp .kz-cmp-text p,
.kz-redesign .kz-cmp .kz-cmp-text ul,
.kz-redesign .kz-cmp .kz-cmp-text ol {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-cmp .kz-cmp-text li {
    position: relative;
    margin: 0 0 4px;
    padding: 0 0 0 14px;
    list-style: none;
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-cmp .kz-cmp-text li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kz-bp-sky);
}

/* Наведение на строку подсвечивает её целиком — название параметра и значения в одной полосе */

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-cmp .kz-cmp-table tbody tr:not(.kz-cmp-group):hover > * {
        background: #F6F8FC;
    }

    .kz-redesign .kz-cmp .kz-cmp-name:hover {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-cmp .kz-cmp-del:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-sub.kz-cmp .kz-cmp-clear:hover {
        border-color: var(--kz-bp-on-ink);
        background: var(--kz-bp-on-ink-fill-hover);
    }
}

/* Пустое состояние (после удаления всех товаров) */

.kz-redesign .kz-cmp .kz-cmp-empty,
.kz-redesign .kz-fav .kz-fav-empty {
    max-width: none;
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
}

.kz-redesign .kz-cmp .kz-cmp-empty[hidden],
.kz-redesign .kz-fav .kz-fav-empty[hidden],
.kz-redesign .kz-sub .kz-catp-products[hidden],
.kz-redesign .kz-sub .kz-cmp-bar[hidden],
.kz-redesign .kz-sub .kz-catp-found[hidden],
.kz-redesign .kz-sub .kz-cmp-clear[hidden] {
    display: none;
}

.kz-redesign .kz-cmp .kz-cmp-empty:focus,
.kz-redesign .kz-fav .kz-fav-empty:focus {
    outline: none;
}

.kz-redesign .kz-cmp .kz-cmp-empty:focus-visible,
.kz-redesign .kz-fav .kz-fav-empty:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-cmp .kz-cmp-empty-title,
.kz-redesign .kz-fav .kz-fav-empty-title {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-bp-ink);
    font-size: var(--kz-type-heading-3-size);
    font-weight: 500;
    line-height: var(--kz-type-heading-3-line);
    letter-spacing: var(--kz-type-heading-3-tracking);
}

.kz-redesign .kz-cmp .kz-cmp-empty p,
.kz-redesign .kz-fav .kz-fav-empty p {
    max-width: 62ch;
    margin: 0 0 var(--kz-space-base);
    font-size: 16px;
    line-height: 25px;
}

.kz-redesign .kz-cmp .kz-cmp-empty-links,
.kz-redesign .kz-fav .kz-fav-empty-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin: var(--kz-space-lg) 0 0 !important;
}

.kz-redesign .kz-cmp .kz-cmp-empty-links .kz-btn,
.kz-redesign .kz-fav .kz-fav-empty-links .kz-btn {
    background: var(--kz-bp-blue);
    color: var(--kz-color-paper);
}

.kz-redesign .kz-cmp .kz-cmp-empty-link {
    color: var(--kz-bp-blue);
    font-size: 15px;
    line-height: 22px;
}

/* ---------- Избранное ---------- */

.kz-redesign .kz-fav .kz-fav-empty-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: 0 0 var(--kz-space-base);
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-fav .kz-fav-empty-cats a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-chip);
    color: var(--kz-bp-ink);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-fav .kz-fav-empty-cats .kz-chip-count {
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-sub .kz-pcard.kz-is-removing {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 200ms var(--kz-ease-out), transform 200ms var(--kz-ease-out);
}

/* ---------- Производитель ---------- */

.kz-redesign .kz-brand .kz-brand-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--kz-space-lg) var(--kz-space-xxl);
}

.kz-redesign .kz-brand .kz-brand-head--nologo {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-brand .kz-brand-title .kz-page-title-text {
    display: block;
}

.kz-redesign .kz-brand .kz-brand-country {
    display: block;
    margin-top: var(--kz-space-sm);
    color: var(--kz-bp-sky);
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
}

.kz-redesign .kz-brand .kz-brand-lead {
    max-width: 44em;
}

.kz-redesign .kz-brand .kz-brand-jump {
    margin: var(--kz-space-base) 0 0;
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-brand .kz-brand-jump a {
    color: var(--kz-bp-on-ink);
    text-decoration: underline;
    text-decoration-color: var(--kz-bp-glow);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Логотип — на белой подложке, как логотип производителя на странице товара */

.kz-redesign .kz-brand .kz-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 264px;
    height: 132px;
    padding: var(--kz-space-base) var(--kz-space-lg);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-brand .kz-brand-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.kz-redesign .kz-brand .kz-brand-band {
    padding-top: var(--kz-space-xxl);
}

/* Группа: подпись и число моделей слева, три карточки справа */

@media (min-width: 1024px) {
    .kz-redesign .kz-brand .kz-brand-group-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        gap: var(--kz-catp-gap);
        align-items: start;
    }

    .kz-redesign .kz-brand .kz-brand-group-grid > .kz-catp-group-head {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--kz-space-sm);
        margin: 0;
        padding-top: 4px;
    }

    .kz-redesign .kz-brand .kz-brand-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kz-redesign .kz-brand .kz-catp-group + .kz-catp-group {
        padding-top: var(--kz-space-xl);
    }

    .kz-redesign .kz-brand .kz-catp-group + .kz-catp-group > .kz-cat-inner > .kz-brand-group-grid {
        padding-top: var(--kz-space-xl);
        border-top: 1px solid var(--kz-bp-mist-line);
    }
}

/* «О производителе» и второй текст CMS (доработка 5.10a): по сетке групп товаров — подпись (и сертификат) слева в колонке
   1fr, текст справа в колонке 3fr, под карточками; строка не длиннее 880px. До 1023px — подпись над текстом во всю
   ширину, сертификат после текста */

.kz-redesign .kz-brand .kz-brand-about.kz-catp-section > .kz-cat-inner,
.kz-redesign .kz-sub.kz-brand .kz-brand-seo.kz-catp-section > .kz-cat-inner {
    max-width: calc(var(--kz-container) + var(--kz-gutter) * 2);
}

.kz-redesign .kz-brand .kz-brand-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--kz-space-lg) var(--kz-catp-gap);
}

.kz-redesign .kz-brand .kz-brand-about-side .kz-catp-h2 {
    margin: 0;
    color: var(--kz-bp-ink);
    font-size: 24px;
    line-height: 30px;
    text-wrap: balance;
}

.kz-redesign .kz-brand .kz-brand-about-side .kz-brand-cert {
    margin-top: var(--kz-space-lg);
}

.kz-redesign .kz-brand .kz-brand-text,
.kz-redesign .kz-brand .kz-brand-seo-main {
    max-width: 880px;
}

.kz-redesign .kz-brand .kz-brand-text {
    color: var(--kz-bp-text);
    font-size: var(--kz-bp-body-size);
    line-height: var(--kz-bp-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-brand .kz-brand-text > :first-child {
    margin-top: 0;
}

.kz-redesign .kz-brand .kz-brand-text > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-brand .kz-brand-text p,
.kz-redesign .kz-brand .kz-brand-text div {
    margin: 0 0 1em;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

.kz-redesign .kz-brand .kz-brand-text h2,
.kz-redesign .kz-brand .kz-brand-text h3 {
    margin: 1.6em 0 0.6em;
    color: var(--kz-bp-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-brand .kz-brand-text ul,
.kz-redesign .kz-brand .kz-brand-text ol {
    margin: 0 0 1em;
    padding: 0 0 0 1.2em;
}

.kz-redesign .kz-brand .kz-brand-text li {
    margin: 0 0 0.4em;
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-brand .kz-brand-text a {
    color: var(--kz-bp-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-brand .kz-brand-text img {
    max-width: 100%;
    height: auto;
}

.kz-redesign .kz-brand .kz-brand-cert {
    margin: 0;
    padding: var(--kz-space-base);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-brand .kz-brand-cert-thumb {
    display: block;
    color: var(--kz-bp-blue);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
    text-decoration: none;
}

.kz-redesign .kz-brand .kz-brand-cert-thumb img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--kz-space-sm);
    border: 1px solid var(--kz-bp-mist);
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-brand .kz-brand-cert-open {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kz-redesign .kz-brand .kz-brand-cert figcaption {
    margin-top: var(--kz-space-xs);
    color: var(--kz-bp-text-2);
    font-size: 13px;
    line-height: 19px;
}

.kz-redesign .kz-brand .kz-brand-cert-thumb:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-brand .kz-brand-empty p {
    margin: 0 0 var(--kz-space-sm);
}

/* ---------- Отрасль ---------- */

.kz-redesign .kz-tag .kz-tag-band {
    padding-top: var(--kz-space-xxl);
}

.kz-redesign .kz-tag .kz-tag-group-count {
    margin: 0;
    color: var(--kz-bp-text-2);
    font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
}

.kz-redesign .kz-sub .kz-is-folded {
    display: none !important;
}

.kz-redesign .kz-sub .kz-group-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 44px;
    margin: var(--kz-space-lg) 0 0;
    padding: 0 var(--kz-space-lg);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 1;
    cursor: pointer;
}

.kz-redesign .kz-sub .kz-group-more:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-sub .kz-group-more:active {
    border-color: var(--kz-bp-blue);
    background: #E1E8F7;
}

/* Описание CMS после баннеров: без линии, отбивка как после полосы */

.kz-redesign .kz-sub.kz-tag .kz-catp-seo {
    padding-top: 56px;
}

.kz-redesign .kz-sub.kz-tag .kz-catp-seo > .kz-cat-inner::before {
    content: none;
}

/* ---------- Страница 404 ---------- */

@property --kz404-x {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 29%;
}

@property --kz404-y {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 28%;
}

.kz-redesign .kz-404 .kz-404-hero {
    padding: 56px 0 64px;
    background: var(--kz-bp-ink);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-404 .kz-404-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--kz-space-xxl);
}


.kz-redesign .kz-404 .kz-404-title {
    margin: 0;
}

.kz-redesign .kz-404 .kz-404-lead {
    max-width: 30em;
    margin: var(--kz-space-lg) 0 0;
    color: var(--kz-bp-on-ink-2);
    font-size: 18px;
    line-height: 28px;
}

.kz-redesign .kz-404 .kz-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-md);
    margin-top: var(--kz-space-xl);
}

.kz-redesign .kz-404 .kz-404-btn {
    padding: 0 var(--kz-space-lg);
    border: 1px solid var(--kz-color-paper);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-404 .kz-404-btn--ghost {
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-404 .kz-404-btn:active {
    background: #C7D5F5;
}

.kz-redesign .kz-404 .kz-404-btn--ghost:active {
    background: var(--kz-bp-on-ink-fill-hover);
}

.kz-redesign .kz-404 .kz-404-search {
    max-width: 440px;
    margin-top: var(--kz-space-xl);
}

.kz-redesign .kz-404 .kz-404-search-label {
    display: block;
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-bp-on-ink-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-404 .kz-404-search-row {
    display: flex;
    gap: var(--kz-space-sm);
}

.kz-redesign .kz-404 .kz-404-search-input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 var(--kz-space-base);
    border: 1px solid transparent;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-size: 16px;
    line-height: 22px;
}

.kz-redesign .kz-404 .kz-404-search-input::placeholder {
    color: #6B6E82;
}

.kz-redesign .kz-404 .kz-404-search-btn {
    flex: none;
    height: 48px;
    padding: 0 var(--kz-space-lg);
    border: 0;
    background: var(--kz-color-primary);
    color: var(--kz-color-paper);
}

.kz-redesign .kz-404 .kz-404-hero a:focus-visible,
.kz-redesign .kz-404 .kz-404-hero button:focus-visible,
.kz-redesign .kz-404 .kz-404-search-input:focus-visible {
    outline: 2px solid var(--kz-bp-on-ink) !important;
    outline-offset: 2px !important;
}

/* Сцена: два слоя одной геометрии; цветной открыт кругом в точке --kz404-x / --kz404-y */

.kz-redesign .kz-404 .kz-404-figure {
    margin: 0;
}

.kz-redesign .kz-404 .kz-404-scene {
    --kz404-r: 132px;
    position: relative;
    border: 1px solid var(--kz-bp-on-ink-line);
    border-radius: var(--kz-radius-card);
    background: rgba(255, 255, 255, 0.02);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    cursor: crosshair;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}

.kz-redesign .kz-404 .kz-404-scene:not(.is-active) {
    transition: --kz404-x 520ms var(--kz-ease-out), --kz404-y 520ms var(--kz-ease-out);
}

.kz-redesign .kz-404 .kz-404-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.kz-redesign .kz-404 .kz-404-layer--thermal {
    -webkit-mask-image: radial-gradient(circle var(--kz404-r) at var(--kz404-x) var(--kz404-y), #000 0, #000 calc(var(--kz404-r) - 16px), transparent var(--kz404-r));
    mask-image: radial-gradient(circle var(--kz404-r) at var(--kz404-x) var(--kz404-y), #000 0, #000 calc(var(--kz404-r) - 16px), transparent var(--kz404-r));
}

.kz-redesign .kz-404 .kz-404-lens {
    position: absolute;
    left: var(--kz404-x);
    top: var(--kz404-y);
    width: calc(var(--kz404-r) * 2 - 20px);
    height: calc(var(--kz404-r) * 2 - 20px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Перекрестье в центре круга */

.kz-redesign .kz-404 .kz-404-lens::before,
.kz-redesign .kz-404 .kz-404-lens::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.7);
    transform: translate(-50%, -50%);
}

.kz-redesign .kz-404 .kz-404-lens::before {
    width: 14px;
    height: 1px;
}

.kz-redesign .kz-404 .kz-404-lens::after {
    width: 1px;
    height: 14px;
}

.kz-redesign .kz-404 .kz-404-note {
    max-width: 52em;
    margin: var(--kz-space-md) 0 0;
    color: var(--kz-bp-on-ink-2);
    font-size: 13px;
    line-height: 19px;
}

/* Ниже: направления каталога и недавно просмотренные товары на полосе каталога */

.kz-redesign .kz-404 .kz-404-more {
    padding: var(--kz-space-xxl) 0 64px;
}

.kz-redesign .kz-404 .kz-404-h2 {
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-404 .kz-404-dirs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-404 .kz-404-dirs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-chip);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    font-size: 15px;
    line-height: 22px;
    text-decoration: none;
}

.kz-redesign .kz-404 .kz-404-dirs a:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-404 .kz-404-viewed {
    padding-top: 56px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-404 .kz-404-btn:hover {
        background: #E3EAFA;
    }

    .kz-redesign .kz-404 .kz-404-btn--ghost:hover {
        border-color: var(--kz-bp-on-ink);
        background: var(--kz-bp-on-ink-fill-hover);
    }

    .kz-redesign .kz-404 .kz-404-search-btn:hover {
        background: var(--kz-color-primary-hover);
    }

    .kz-redesign .kz-404 .kz-404-dirs a:hover,
    .kz-redesign .kz-fav .kz-fav-empty-cats a:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-sub .kz-group-more:hover {
        border-color: var(--kz-bp-blue);
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-404 .kz-404-scene.is-active .kz-404-lens {
        border-color: rgba(255, 255, 255, 0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-404 .kz-404-scene:not(.is-active) {
        transition: none;
    }

    .kz-redesign .kz-sub .kz-pcard.kz-is-removing,
    .kz-redesign .kz-cmp .kz-cmp-frame::after {
        transition: none;
    }
}

/* ---------- До 1023px ---------- */

@media (max-width: 1023px) {
    .kz-redesign .kz-brand .kz-brand-strip,
    .kz-redesign .kz-404 .kz-catp-strip {
        margin: 0 calc(var(--kz-gutter) * -1);
        padding: 4px var(--kz-gutter) var(--kz-space-md);
        scroll-padding: 0 var(--kz-gutter);
    }

    .kz-redesign .kz-brand .kz-brand-group-grid > .kz-catp-group-head {
        margin-bottom: var(--kz-space-base);
    }

    .kz-redesign .kz-brand .kz-brand-about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-brand .kz-brand-about-side {
        display: contents;
    }

    .kz-redesign .kz-brand .kz-brand-text,
    .kz-redesign .kz-brand .kz-brand-seo-main {
        order: 1;
        max-width: none;
    }

    .kz-redesign .kz-brand .kz-brand-about-side .kz-brand-cert {
        order: 2;
        max-width: 320px;
        margin-top: 0;
    }

    .kz-redesign .kz-404 .kz-404-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-xl);
    }

    .kz-redesign .kz-404 .kz-404-figure {
        max-width: 720px;
    }
}

/* ---------- До 767px ---------- */

@media (max-width: 767px) {
    .kz-redesign .kz-cmp {
        --kz-cmp-param: 128px;
        --kz-cmp-col: 208px;
    }

    .kz-redesign .kz-cmp .kz-cmp-table {
        font-size: 14px;
        line-height: 20px;
    }

    .kz-redesign .kz-cmp .kz-cmp-table th,
    .kz-redesign .kz-cmp .kz-cmp-table td {
        padding: 10px 12px;
    }

    .kz-redesign .kz-cmp .kz-cmp-table th[scope="row"],
    .kz-redesign .kz-cmp .kz-cmp-corner {
        font-size: 13px;
        line-height: 18px;
    }

    .kz-redesign .kz-cmp .kz-cmp-name {
        font-size: 15px;
        line-height: 21px;
    }

    .kz-redesign .kz-cmp .kz-cmp-group-title {
        left: 12px;
    }

    .kz-redesign .kz-cmp .kz-cmp-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .kz-redesign .kz-cmp .kz-cmp-empty,
    .kz-redesign .kz-fav .kz-fav-empty {
        padding: var(--kz-space-lg);
    }

    .kz-redesign .kz-sub .kz-cmp-clear {
        width: 100%;
    }

    .kz-redesign .kz-brand .kz-brand-head {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-brand .kz-brand-logo {
        order: -1;
        width: 200px;
        height: 96px;
        padding: var(--kz-space-md) var(--kz-space-base);
    }

    .kz-redesign .kz-brand .kz-brand-country {
        font-size: 16px;
        line-height: 24px;
    }

    .kz-redesign .kz-brand .kz-brand-band,
    .kz-redesign .kz-tag .kz-tag-band {
        padding-top: var(--kz-space-xl);
    }

    .kz-redesign .kz-sub.kz-brand .kz-catp-group + .kz-catp-group,
    .kz-redesign .kz-sub.kz-tag .kz-catp-group + .kz-catp-group {
        padding-top: 40px;
    }

    .kz-redesign .kz-sub.kz-brand .kz-catp-group-title,
    .kz-redesign .kz-sub.kz-tag .kz-catp-group-title,
    .kz-redesign .kz-sub.kz-404 .kz-catp-group-title {
        font-size: 20px;
        line-height: 26px;
    }

    .kz-redesign .kz-brand .kz-brand-strip,
    .kz-redesign .kz-404 .kz-catp-strip {
        margin: 0 calc(var(--kz-gutter-mobile) * -1);
        padding: 4px var(--kz-gutter-mobile) var(--kz-space-md);
        scroll-padding: 0 var(--kz-gutter-mobile);
    }

    .kz-redesign .kz-sub.kz-tag .kz-catp-seo {
        padding-top: 40px;
    }

    .kz-redesign .kz-404 .kz-404-hero {
        padding: var(--kz-space-xl) 0 40px;
    }

    .kz-redesign .kz-404 .kz-404-lead {
        font-size: 16px;
        line-height: 25px;
    }

    .kz-redesign .kz-404 .kz-404-actions .kz-btn {
        flex: 1 1 180px;
    }

    .kz-redesign .kz-404 .kz-404-scene {
        --kz404-r: 84px;
    }

    .kz-redesign .kz-404 .kz-404-more {
        padding: var(--kz-space-xl) 0 40px;
    }

    .kz-redesign .kz-404 .kz-404-viewed {
        padding-top: 40px;
    }
}

/* Грубый указатель: кнопки удаления, чипы направлений и разделов 44px */

@media (pointer: coarse) {
    .kz-redesign .kz-404 .kz-404-dirs a,
    .kz-redesign .kz-fav .kz-fav-empty-cats a {
        min-height: 44px;
    }

    .kz-redesign .kz-cmp .kz-cmp-del {
        width: 44px;
        height: 44px;
        top: 2px;
        right: 2px;
    }
}

/* Принудительные цвета: рамки и подписи видны, тепловой слой остаётся иллюстрацией */

@media (forced-colors: active) {
    .kz-redesign .kz-cmp .kz-cmp-frame,
    .kz-redesign .kz-cmp .kz-cmp-del,
    .kz-redesign .kz-404 .kz-404-scene,
    .kz-redesign .kz-404 .kz-404-lens {
        border-color: CanvasText;
    }

    .kz-redesign .kz-cmp .kz-cmp-frame::after {
        display: none;
    }
}

/*
 * Этап 5.11 (2026-10-08, не утверждён владельцем): редакционные страницы — обучение (три программы), мероприятия
 * (будущие, прошедшие, страница мероприятия), пресс-центр, новости, статьи, фотогалерея и альбом.
 * Шаблоны: templates/kz/page.tpl.php (ветка обучения), presentations, presentations_show, page_press, news, news_show,
 * articles, articles_show, photos, photos_show и общие части kz_editorial_cards, kz_event_items, kz_gallery_cards.
 * Все правила раздела начинаются с .kz-redesign .kz-ed (обёртка вместе с .kz-cat .kz-catp .kz-sub): первый экран ink,
 * чипы, полоса mist с карточками каталога и цвета --kz-bp-* — общие со страницами каталога 5.8–5.10.
 * Назначение страниц разное: статьи и новости — чтение (ось чтения, содержание), мероприятия — обзор сроков
 * (сроки первым столбцом, прошедшие по годам), галерея — просмотр фото (крупная сетка, просмотр Fancybox).
 * Редакционные стили текста CMS — .kz-prose (на месте прежнего .text_block, класс .text_block сохранён: на него
 * опираются legacy-правила вкладок, сеток и встроенных блоков). Удачные приёмы старого templates/css/articles.css
 * перенесены и переложены на палитру KZ: подписи к иллюстрациям, цитата-вывод .quote-two, таблица-карточки
 * .pcat-table, списки с подзаголовками. Сам файл articles.css не подключается: он переопределял :root и общие правила.
 * Без декоративной анимации: переходы только цвета и рамки на точном указателе.
 */

/* ======================================================================================================================
 * Первый экран и общие части
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-ed-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-sm) var(--kz-space-md);
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-bp-sky);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-ed .kz-ed-kicker-note {
    padding: 2px 10px;
    border: 1px solid var(--kz-bp-on-ink-line);
    border-radius: var(--kz-radius-chip);
    color: var(--kz-bp-on-ink-2);
    letter-spacing: 0.04em;
    text-transform: none;
}

/* H1 материалов бывает длинным (до 120 знаков): шкала чуть меньше, чем у разделов, перенос по слогам только на телефоне */

.kz-redesign .kz-ed .kz-ed-title {
    max-width: 30em;
    font-size: clamp(30px, 1.1vw + 20px, 40px);
    line-height: 1.15;
}

.kz-redesign .kz-ed .kz-ed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kz-space-xs) var(--kz-space-base);
    margin: var(--kz-space-base) 0 0;
    color: var(--kz-bp-on-ink-2);
    font-size: 16px;
    line-height: 24px;
}

.kz-redesign .kz-ed .kz-ed-meta time {
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-ed-meta-author::before,
.kz-redesign .kz-ed .kz-ed-meta-count::before {
    content: "·";
    margin-right: var(--kz-space-base);
    color: var(--kz-bp-sky);
}

.kz-redesign .kz-ed .kz-ed-meta-count {
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

/* «Подпишитесь на новости» — контурная кнопка на ink (прежнее окно подписки .popup-link) */

.kz-redesign .kz-ed .kz-ed-subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-lg);
    border: 1px solid var(--kz-color-on-dark-border);
    border-radius: var(--kz-radius-control);
    background: transparent;
    color: var(--kz-bp-on-ink);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    text-transform: none;
    cursor: pointer;
}

.kz-redesign .kz-ed .kz-ed-subscribe:focus-visible {
    outline: 2px solid var(--kz-color-paper) !important;
    outline-offset: 2px;
}

.kz-redesign .kz-ed .kz-ed-subscribe:active {
    background: var(--kz-bp-on-ink-fill-hover);
}

/* Сроки и место мероприятия в первом экране */

.kz-redesign .kz-ed .kz-ev-facts-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-space-base) var(--kz-space-xxl);
    margin: var(--kz-space-lg) 0 0;
    padding: 0;
}

.kz-redesign .kz-ed .kz-ev-facts-hero > div {
    min-width: 0;
    max-width: 40em;
}

.kz-redesign .kz-ed .kz-ev-facts-hero dt {
    margin: 0 0 var(--kz-space-xs);
    color: var(--kz-bp-sky);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-ed .kz-ev-facts-hero dd {
    margin: 0;
    color: var(--kz-bp-on-ink);
    font-size: 18px;
    line-height: 26px;
}

/* ---------- Полосы ---------- */

.kz-redesign .kz-ed .kz-ed-band,
.kz-redesign .kz-ed .kz-ed-read,
.kz-redesign .kz-ed .kz-ed-more,
.kz-redesign .kz-ed .kz-ed-gallery {
    padding: var(--kz-space-xxl) 0 var(--kz-space-xxxl);
    background: var(--kz-color-paper);
}

/* Пустой блок баннеров (banners_center новости выводит пустую section.banners) места не занимает */

.kz-redesign .kz-ed > .banners:not(:has(*)) {
    display: none;
}

.kz-redesign .kz-ed .kz-ed-read + .kz-ed-more,
.kz-redesign .kz-ed .kz-ed-read + .banners:not(:has(*)) + .kz-ed-more,
.kz-redesign .kz-ed .kz-ed-read + .kz-ed-gallery,
.kz-redesign .kz-ed .kz-ed-band + .kz-ed-more,
.kz-redesign .kz-ed .kz-ed-gallery + .kz-ed-more,
.kz-redesign .kz-ed .kz-press-section + .kz-press-section {
    padding-top: 0;
}

.kz-redesign .kz-ed .kz-ed-read + .kz-ed-more > .kz-cat-inner::before,
.kz-redesign .kz-ed .kz-ed-read + .banners:not(:has(*)) + .kz-ed-more > .kz-cat-inner::before,
.kz-redesign .kz-ed .kz-ed-read + .kz-ed-gallery > .kz-cat-inner::before,
.kz-redesign .kz-ed .kz-ed-band + .kz-ed-more > .kz-cat-inner::before,
.kz-redesign .kz-ed .kz-ed-gallery + .kz-ed-more > .kz-cat-inner::before,
.kz-redesign .kz-ed .kz-press-section + .kz-press-section > .kz-cat-inner::before {
    content: "";
    display: block;
    margin-bottom: var(--kz-space-xxl);
    border-top: 1px solid var(--kz-bp-mist-line);
}

.kz-redesign .kz-ed .kz-ed-count {
    margin: 0 0 var(--kz-space-lg);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-text-14-size);
    line-height: 20px;
}

.kz-redesign .kz-ed .kz-ed-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-space-sm) var(--kz-space-lg);
    margin: 0 0 var(--kz-space-lg);
}

.kz-redesign .kz-ed .kz-ed-section-title {
    margin: 0;
    padding: 0;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.01em;
    text-transform: none;
}

.kz-redesign .kz-ed .kz-ed-gallery .kz-ed-section-title {
    margin-bottom: var(--kz-space-lg);
}

.kz-redesign .kz-ed .kz-ed-all {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    min-height: 32px;
    color: var(--kz-bp-blue);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}

.kz-redesign .kz-ed .kz-ed-all::after {
    content: "→";
    transition: transform 0.16s ease;
}

.kz-redesign .kz-ed .kz-ed-all:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Пустое состояние на белой полосе — панель mist */

.kz-redesign .kz-ed .kz-ed-empty {
    max-width: none;
    padding: var(--kz-space-xl);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-text);
    font-size: 17px;
    line-height: 26px;
}

.kz-redesign .kz-ed .kz-ed-empty p {
    margin: 0 0 var(--kz-space-base);
}

.kz-redesign .kz-ed .kz-ed-empty p:last-child {
    margin-bottom: 0;
}

/* ---------- Товары материала: полоса mist с карточками каталога ---------- */

.kz-redesign .kz-ed .kz-ed-products {
    padding: 56px 0 var(--kz-space-xxxl);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-ed .kz-ed-products .kz-catp-group-title {
    color: var(--kz-bp-ink);
    font-size: 24px;
    line-height: 30px;
}

/* ======================================================================================================================
 * Карточки новостей и статей (kz_editorial_cards)
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-ed-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kz-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-ed .kz-ed-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.kz-redesign .kz-ed .kz-ed-card::before {
    content: none;
}

.kz-redesign .kz-ed .kz-ed-card-media {
    order: -1;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-ed .kz-ed-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kz-redesign .kz-ed .kz-ed-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--kz-space-card-padding);
}

.kz-redesign .kz-ed .kz-ed-card-title {
    order: 2;
    margin: 0;
    padding: 0;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-ed .kz-ed-card-title a {
    color: inherit;
    text-decoration: none;
}

/* Вся карточка — ссылка заголовка */

.kz-redesign .kz-ed .kz-ed-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.kz-redesign .kz-ed .kz-ed-card-title a:focus-visible {
    outline: none;
}

.kz-redesign .kz-ed .kz-ed-card:focus-within {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-ed .kz-ed-card-meta {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--kz-space-md);
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-bp-text-2);
    font-size: 13px;
    line-height: 18px;
}

.kz-redesign .kz-ed .kz-ed-card-date {
    font-family: var(--kz-font-data);
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-ed-card-author::before {
    content: "·";
    margin-right: var(--kz-space-md);
}

.kz-redesign .kz-ed .kz-ed-card-desc {
    order: 3;
    display: -webkit-box;
    margin: var(--kz-space-md) 0 0;
    overflow: hidden;
    color: var(--kz-bp-text-2);
    font-size: 15px;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.kz-redesign .kz-ed .kz-ed-card--text .kz-ed-card-body {
    padding-top: var(--kz-space-lg);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-ed-card:hover {
        border-color: var(--kz-bp-blue);
        box-shadow: inset 0 0 0 1px var(--kz-bp-blue);
    }

    .kz-redesign .kz-ed .kz-ed-card:hover .kz-ed-card-title {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-ed .kz-ed-all:hover {
        color: var(--kz-bp-blue-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-ed .kz-ed-all:hover::after {
        transform: translateX(3px);
    }

    .kz-redesign .kz-ed .kz-ed-subscribe:hover {
        border-color: var(--kz-color-paper);
        background: var(--kz-bp-on-ink-fill);
    }
}

/* ======================================================================================================================
 * Мероприятия: строки со сроками (kz_event_items)
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-ev-year + .kz-ev-year {
    margin-top: var(--kz-space-xxl);
}

.kz-redesign .kz-ed .kz-ev-year-title {
    margin: 0 0 var(--kz-space-sm);
    padding: 0;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-data);
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

.kz-redesign .kz-ed .kz-ev-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--kz-bp-mist-line);
}

.kz-redesign .kz-ed .kz-ev-item {
    position: relative;
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr) 208px;
    grid-template-areas: "date body media";
    gap: var(--kz-space-xl);
    align-items: start;
    margin: 0;
    padding: var(--kz-space-lg) 0;
    border-top: 1px solid var(--kz-bp-mist-line);
}

.kz-redesign .kz-ed .kz-ev-item::before {
    content: none;
}

.kz-redesign .kz-ed .kz-ev-item--text {
    grid-template-columns: 176px minmax(0, 1fr);
    grid-template-areas: "date body";
}

.kz-redesign .kz-ed .kz-ev-date {
    grid-area: date;
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-xs);
    margin: 0;
    color: var(--kz-bp-ink);
}

.kz-redesign .kz-ed .kz-ev-days {
    font-family: var(--kz-font-data);
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.kz-redesign .kz-ed .kz-ev-days--cross {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0;
}

.kz-redesign .kz-ed .kz-ev-month {
    color: var(--kz-bp-text-2);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-ed .kz-ev-body {
    grid-area: body;
    min-width: 0;
}

.kz-redesign .kz-ed .kz-ev-title {
    margin: 0;
    padding: 0;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: 22px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: -0.005em;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-ed .kz-ev-title a {
    color: inherit;
    text-decoration: none;
}

.kz-redesign .kz-ed .kz-ev-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.kz-redesign .kz-ed .kz-ev-title a:focus-visible {
    outline: none;
}

.kz-redesign .kz-ed .kz-ev-item:focus-within {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 4px;
    border-radius: 2px;
}

.kz-redesign .kz-ed .kz-ev-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-space-sm) var(--kz-space-md);
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-bp-text-2);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-ed .kz-ev-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--kz-radius-chip);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-redesign .kz-ed .kz-ev-desc {
    display: -webkit-box;
    max-width: 38em;
    margin: var(--kz-space-md) 0 0;
    overflow: hidden;
    color: var(--kz-bp-text-2);
    font-size: 16px;
    line-height: 25px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.kz-redesign .kz-ed .kz-ev-media {
    grid-area: media;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 3 / 2;
    padding: var(--kz-space-md);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-ed .kz-ev-media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-ev-item:hover .kz-ev-title {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    .kz-redesign .kz-ed .kz-ev-item:hover .kz-ev-media {
        border-color: var(--kz-bp-blue);
    }
}

/* Страница мероприятия: изображение и альбом в колонке справа */

.kz-redesign .kz-ed .kz-ev-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 160px;
    padding: var(--kz-space-lg);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-ed .kz-ev-logo img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    height: auto;
    object-fit: contain;
}

.kz-redesign .kz-ed .kz-ev-album {
    margin-top: var(--kz-space-xl);
}

.kz-redesign .kz-ed .kz-ed-aside-title {
    margin: 0 0 var(--kz-space-md);
    padding: 0;
    color: var(--kz-bp-text-2);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
}

.kz-redesign .kz-ed .kz-ed-aside .kz-gal-cards {
    grid-template-columns: minmax(0, 1fr);
}

/* ======================================================================================================================
 * Фотогалерея: альбомы (kz_gallery_cards) и сетка фото
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-gal-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kz-space-xl) var(--kz-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-ed .kz-gal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-ed .kz-gal-card::before {
    content: none;
}

.kz-redesign .kz-ed .kz-gal-card-media {
    order: -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.kz-redesign .kz-ed .kz-gal-card-cover {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--kz-radius-card) var(--kz-radius-card) 0 0;
    background: var(--kz-bp-mist);
    object-fit: cover;
}

.kz-redesign .kz-ed .kz-gal-card-media > .kz-gal-card-cover:only-child {
    border-radius: var(--kz-radius-card);
}

.kz-redesign .kz-ed .kz-gal-card-thumbs {
    display: contents;
}

.kz-redesign .kz-ed .kz-gal-card-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--kz-bp-mist);
    object-fit: cover;
}

.kz-redesign .kz-ed .kz-gal-card-thumbs img:first-child {
    border-bottom-left-radius: var(--kz-radius-card);
}

.kz-redesign .kz-ed .kz-gal-card-thumbs img:last-child {
    border-bottom-right-radius: var(--kz-radius-card);
}

.kz-redesign .kz-ed .kz-gal-card-body {
    display: flex;
    flex-direction: column;
    padding: var(--kz-space-base) 0 0;
}

.kz-redesign .kz-ed .kz-gal-card-title {
    order: 2;
    margin: 0;
    padding: 0;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    text-transform: none;
    overflow-wrap: break-word;
}

.kz-redesign .kz-ed .kz-gal-card-title a {
    color: inherit;
    text-decoration: none;
}

.kz-redesign .kz-ed .kz-gal-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.kz-redesign .kz-ed .kz-gal-card-title a:focus-visible {
    outline: none;
}

.kz-redesign .kz-ed .kz-gal-card:focus-within {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 4px;
    border-radius: var(--kz-radius-card);
}

.kz-redesign .kz-ed .kz-gal-card-meta {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--kz-space-md);
    margin: 0 0 var(--kz-space-xs);
    color: var(--kz-bp-text-2);
    font-family: var(--kz-font-data);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-gal-card-count::before {
    content: "·";
    margin-right: var(--kz-space-md);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-gal-card:hover .kz-gal-card-title {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .kz-redesign .kz-ed .kz-gal-card:hover .kz-gal-card-media img {
        filter: brightness(0.94);
    }
}

/* Сетка фото альбома, галереи статьи и обучения: каждое фото — ссылка в просмотр Fancybox */

.kz-redesign .kz-ed .kz-gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--kz-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-ed .kz-gal-grid--album {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--kz-space-base);
}

.kz-redesign .kz-ed .kz-gal-grid > li {
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-ed .kz-gal-grid > li::before {
    content: none;
}

.kz-redesign .kz-ed .kz-gal-item {
    display: block;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-ed .kz-gal-item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.kz-redesign .kz-ed .kz-gal-item:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-gal-item:hover img {
        filter: brightness(0.9);
    }
}

.kz-redesign .kz-ed .kz-gal-lead {
    max-width: 40em;
}

/* ======================================================================================================================
 * Чтение: колонка текста, колонка справа, содержание
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-ed-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--kz-bp-read));
    grid-template-areas: "main";
    gap: var(--kz-space-xl) var(--kz-space-xxxl);
    align-items: start;
}

.kz-redesign .kz-ed .kz-ed-main {
    grid-area: main;
    min-width: 0;
}

.kz-redesign .kz-ed .kz-ed-aside {
    grid-area: aside;
    min-width: 0;
}

.kz-redesign .kz-ed .kz-ed-toc {
    grid-area: toc;
    min-width: 0;
}

@media (min-width: 1024px) {
    .kz-redesign .kz-ed .kz-ed-layout--aside {
        grid-template-columns: minmax(0, var(--kz-bp-read)) minmax(0, 360px);
        grid-template-areas: "main aside";
        justify-content: space-between;
    }

    .kz-redesign .kz-ed .kz-ed-layout--toc {
        grid-template-columns: minmax(0, var(--kz-bp-read)) minmax(0, 320px);
        grid-template-areas: "main toc";
        justify-content: space-between;
    }

    /* Legacy .wrap { overflow: hidden } делает оболочку контейнером прокрутки, и sticky не срабатывает (см. карту
       «О компании», 5.2B). Только на страницах с содержанием статьи оболочка обрезает содержимое через clip — так же
       видно, но без контейнера прокрутки; браузер без overflow: clip оставит hidden, содержание просто не липнет */
    .kz-redesign .wrap:has(.kz-ed-layout--toc) {
        overflow: clip;
    }

    .kz-redesign .kz-ed .kz-ed-layout--toc .kz-ed-toc {
        position: sticky;
        top: var(--kz-space-lg);
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-ed .kz-ed-layout--aside {
        grid-template-areas: "main" "aside";
    }

    .kz-redesign .kz-ed .kz-ed-layout--toc {
        grid-template-areas: "toc" "main";
        gap: var(--kz-space-lg);
    }
}

/* Содержание статьи: от 1024px — колонка справа с линией слева, ниже — раскрывающийся блок перед текстом */

.kz-redesign .kz-ed .kz-ed-toc {
    box-sizing: border-box;
    padding: 0 0 0 var(--kz-space-lg);
    border-left: 1px solid var(--kz-bp-mist-line);
}

.kz-redesign .kz-ed .kz-ed-toc-title {
    display: block;
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-bp-text-2);
    font-size: var(--kz-type-label-size);
    font-weight: var(--kz-type-label-weight);
    line-height: 16px;
    letter-spacing: var(--kz-type-label-tracking);
    text-transform: uppercase;
    list-style: none;
    cursor: default;
}

.kz-redesign .kz-ed .kz-ed-toc-title::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-ed .kz-ed-toc-count {
    display: none;
}

.kz-redesign .kz-ed .kz-ed-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: kz-ed-toc;
}

.kz-redesign .kz-ed .kz-ed-toc-list li {
    display: flex;
    gap: var(--kz-space-md);
    margin: 0;
    padding: 0;
    counter-increment: kz-ed-toc;
}

.kz-redesign .kz-ed .kz-ed-toc-list li::before {
    content: counter(kz-ed-toc, decimal-leading-zero);
    position: static;
    flex: none;
    width: auto;
    height: auto;
    padding-top: 7px;
    background: none;
    color: var(--kz-bp-sky);
    font-family: var(--kz-font-data);
    font-size: 12px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-ed-toc-list a {
    display: block;
    padding: 4px 0;
    color: var(--kz-bp-text-2);
    font-size: 15px;
    line-height: 22px;
    text-decoration: none;
}

.kz-redesign .kz-ed .kz-ed-toc-list a:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-ed-toc-list a:hover {
        color: var(--kz-bp-blue);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-ed .kz-ed-toc {
        padding: 0;
        border: 1px solid var(--kz-bp-mist-line);
        border-radius: var(--kz-radius-card);
        background: var(--kz-bp-mist);
    }

    .kz-redesign .kz-ed .kz-ed-toc-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--kz-space-base);
        min-height: 48px;
        margin: 0;
        padding: var(--kz-space-sm) var(--kz-space-base);
        color: var(--kz-bp-ink);
        font-size: 17px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
    }

    .kz-redesign .kz-ed .kz-ed-toc-title::after {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 2px solid var(--kz-bp-blue);
        border-bottom: 2px solid var(--kz-bp-blue);
        transform: translateY(-2px) rotate(45deg);
    }

    .kz-redesign .kz-ed .kz-ed-toc[open] .kz-ed-toc-title::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .kz-redesign .kz-ed .kz-ed-toc-count {
        display: inline;
        color: var(--kz-bp-text-2);
        font-weight: 400;
    }

    .kz-redesign .kz-ed .kz-ed-toc-title:focus-visible {
        outline: 2px solid var(--kz-bp-blue);
        outline-offset: 2px;
        border-radius: var(--kz-radius-card);
    }

    .kz-redesign .kz-ed .kz-ed-toc-list {
        padding: 0 var(--kz-space-base) var(--kz-space-md);
    }

    .kz-redesign .kz-ed .kz-ed-toc-list a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0;
        color: var(--kz-bp-blue);
    }

    .kz-redesign .kz-ed .kz-ed-toc-list li::before {
        padding-top: 14px;
    }
}

/* «На этой странице» обучения собирает скрипт; без скрипта и до 1024px не выводится (на телефоне текст короче,
   программы переключаются чипами первого экрана) */

.kz-redesign .kz-ed .kz-ed-toc--auto[hidden] {
    display: none;
}

@media (max-width: 1023px) {
    .kz-redesign .kz-ed .kz-ed-toc--auto {
        display: none;
    }
}

/* Якоря разделов не уходят под край окна */

.kz-redesign .kz-ed .kz-prose [id],
.kz-redesign .kz-ed .kz-ed-gallery[id] {
    scroll-margin-top: var(--kz-space-lg);
}

/* ======================================================================================================================
 * Редакционные стили текста CMS (.kz-prose)
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-prose {
    color: var(--kz-bp-text);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-bp-body-size);
    font-weight: 400;
    line-height: var(--kz-bp-body-line);
    overflow-wrap: break-word;
}

.kz-redesign .kz-ed .kz-prose::after {
    content: "";
    display: table;
    clear: both;
}

.kz-redesign .kz-ed .kz-prose p,
.kz-redesign .kz-ed .kz-prose div,
.kz-redesign .kz-ed .kz-prose li,
.kz-redesign .kz-ed .kz-prose td,
.kz-redesign .kz-ed .kz-prose th {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.kz-redesign .kz-ed .kz-prose p {
    margin: 0 0 var(--kz-space-base);
}

.kz-redesign .kz-ed .kz-prose p:empty {
    display: none;
}

.kz-redesign .kz-ed .kz-prose > :first-child,
.kz-redesign .kz-ed .kz-prose > div:first-child > :first-child,
.kz-redesign .kz-ed .kz-prose .kz-prose-lead + h2 {
    margin-top: 0;
}

/* Анонс статьи — вводный абзац крупнее основного текста */

.kz-redesign .kz-ed .kz-prose .kz-prose-lead {
    margin: 0 0 var(--kz-space-xxl);
    color: var(--kz-bp-ink);
    font-size: calc(var(--kz-bp-body-size) + 2px);
    line-height: calc(var(--kz-bp-body-line) + 2px);
}

.kz-redesign .kz-ed .kz-prose .kz-prose-lead:empty {
    display: none;
}

/* Заголовки: спокойная иерархия вместо плашек и подчёркиваний articles.css */

.kz-redesign .kz-ed .kz-prose h1,
.kz-redesign .kz-ed .kz-prose h2,
.kz-redesign .kz-ed .kz-prose h3,
.kz-redesign .kz-ed .kz-prose h4,
.kz-redesign .kz-ed .kz-prose h5,
.kz-redesign .kz-ed .kz-prose h6 {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-align: left;
    text-transform: none;
}

.kz-redesign .kz-ed .kz-prose h1,
.kz-redesign .kz-ed .kz-prose h2 {
    margin: 56px 0 var(--kz-space-base);
    font-size: 26px;
    line-height: 32px;
}

.kz-redesign .kz-ed .kz-prose h3 {
    margin: 40px 0 var(--kz-space-md);
    font-size: 20px;
    line-height: 28px;
}

.kz-redesign .kz-ed .kz-prose h4,
.kz-redesign .kz-ed .kz-prose h5,
.kz-redesign .kz-ed .kz-prose h6 {
    margin: var(--kz-space-xl) 0 var(--kz-space-sm);
    font-size: 18px;
    line-height: 26px;
}

.kz-redesign .kz-ed .kz-prose h2 + h3,
.kz-redesign .kz-ed .kz-prose h3 + h4 {
    margin-top: var(--kz-space-base);
}

.kz-redesign .kz-ed .kz-prose strong,
.kz-redesign .kz-ed .kz-prose b {
    color: inherit;
    font-weight: 500;
}

.kz-redesign .kz-ed .kz-prose a {
    color: var(--kz-bp-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.kz-redesign .kz-ed .kz-prose a:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-prose a:hover {
        color: var(--kz-bp-blue-hover);
        text-decoration-thickness: 2px;
    }
}

/* Списки: маркер — короткая синяя черта, номер — Roboto */

.kz-redesign .kz-ed .kz-prose ul,
.kz-redesign .kz-ed .kz-prose ol {
    margin: 0 0 var(--kz-space-lg);
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-ed .kz-prose ul > li,
.kz-redesign .kz-ed .kz-prose ol > li {
    position: relative;
    margin: 0;
    padding: 0 0 0 28px;
}

.kz-redesign .kz-ed .kz-prose ul > li + li,
.kz-redesign .kz-ed .kz-prose ol > li + li {
    margin-top: var(--kz-space-sm);
}

.kz-redesign .kz-ed .kz-prose ul > li::before {
    content: "";
    position: absolute;
    top: calc(var(--kz-bp-body-line) / 2 - 1px);
    left: 4px;
    width: 10px;
    height: 2px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--kz-bp-blue);
}

.kz-redesign .kz-ed .kz-prose ol {
    counter-reset: kz-prose-ol;
}

.kz-redesign .kz-ed .kz-prose ol > li {
    counter-increment: kz-prose-ol;
}

.kz-redesign .kz-ed .kz-prose ol > li::before {
    content: counter(kz-prose-ol) ".";
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    border: 0;
    background: none;
    color: var(--kz-bp-blue);
    font-family: var(--kz-font-data);
    font-size: 0.9em;
    font-weight: 500;
    line-height: inherit;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-prose li > p:last-child,
.kz-redesign .kz-ed .kz-prose li > ul,
.kz-redesign .kz-ed .kz-prose li > ol {
    margin-bottom: 0;
}

.kz-redesign .kz-ed .kz-prose li > ul,
.kz-redesign .kz-ed .kz-prose li > ol {
    margin-top: var(--kz-space-sm);
}

/* Список с подзаголовками у пунктов (articles.css: «Характеристики»): плитки на mist в две колонки */

.kz-redesign .kz-ed .kz-prose ul:has(> li > h3:first-child),
.kz-redesign .kz-ed .kz-prose ul:has(> li > h4:first-child) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--kz-space-base);
    margin: var(--kz-space-xl) 0;
}

.kz-redesign .kz-ed .kz-prose ul:has(> li > h3:first-child) > li,
.kz-redesign .kz-ed .kz-prose ul:has(> li > h4:first-child) > li {
    margin: 0;
    padding: var(--kz-space-card-padding);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-ed .kz-prose ul:has(> li > h3:first-child) > li::before,
.kz-redesign .kz-ed .kz-prose ul:has(> li > h4:first-child) > li::before {
    content: none;
}

.kz-redesign .kz-ed .kz-prose ul > li > h3:first-child,
.kz-redesign .kz-ed .kz-prose ul > li > h4:first-child {
    margin: 0 0 var(--kz-space-sm);
    font-size: 17px;
    line-height: 24px;
}

/* Программа семинара (li.sem_li: время в span, затем текст) — время отдельной колонкой */

.kz-redesign .kz-ed .kz-prose li.sem_li {
    margin: 0;
    padding: var(--kz-space-md) 0 var(--kz-space-md) 9em;
    border-top: 1px solid var(--kz-bp-mist-line);
    font-size: inherit;
    font-weight: 500;
}

/* legacy .seminardate span — красная плашка с обтеканием; в KZ красного в интерфейсе нет */

.kz-redesign .kz-ed .kz-prose .seminardate li.sem_li > span:first-child {
    float: none;
    padding: 0;
    background: none;
    font-size: inherit;
    text-transform: none;
}

.kz-redesign .kz-ed .kz-prose .seminardate i {
    display: inline-block;
    margin-top: var(--kz-space-xs);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-ed .kz-prose li.sem_li + li.sem_li {
    margin-top: 0;
}

.kz-redesign .kz-ed .kz-prose li.sem_li::before {
    content: none;
}

.kz-redesign .kz-ed .kz-prose li.sem_li > span:first-child {
    display: inline-block;
    width: 9em;
    margin: 0 0 0 -9em;
    color: var(--kz-bp-blue);
    font-family: var(--kz-font-data);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-prose li.sem_li i {
    color: var(--kz-bp-text-2);
}

/* Иллюстрации и подписи (articles.css: figure и figcaption, в том числе подпись сразу после figure) */

.kz-redesign .kz-ed .kz-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kz-radius-control);
}

.kz-redesign .kz-ed .kz-prose figure {
    margin: var(--kz-space-xl) 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

.kz-redesign .kz-ed .kz-prose figure img {
    display: block;
    margin: 0;
}

.kz-redesign .kz-ed .kz-prose figure:has(+ figcaption) {
    margin-bottom: 0;
}

.kz-redesign .kz-ed .kz-prose figcaption {
    margin: var(--kz-space-sm) 0 var(--kz-space-xl);
    padding: 0 0 0 var(--kz-space-md);
    border: 0;
    border-left: 2px solid var(--kz-bp-mist-line);
    color: var(--kz-bp-text-2);
    font-size: 14px;
    line-height: 21px;
    text-align: left;
}

.kz-redesign .kz-ed .kz-prose figure figcaption {
    margin-bottom: 0;
}

.kz-redesign .kz-ed .kz-prose .full-width {
    margin: var(--kz-space-xl) 0;
    padding: 0;
}

.kz-redesign .kz-ed .kz-prose .full-width img {
    display: block;
    width: 100%;
}

.kz-redesign .kz-ed .kz-prose p[style*="center"] img {
    display: inline-block;
}

/* Фото с обтеканием: не шире 44% колонки, до 767px — без обтекания (как на странице товара 5.8) */

.kz-redesign .kz-ed .kz-prose .image-align-left,
.kz-redesign .kz-ed .kz-prose .image-align-right {
    max-width: 44%;
    height: auto;
}

.kz-redesign .kz-ed .kz-prose .image-align-left {
    float: left;
    margin: 4px var(--kz-space-lg) var(--kz-space-base) 0;
}

.kz-redesign .kz-ed .kz-prose .image-align-right {
    float: right;
    margin: 4px 0 var(--kz-space-base) var(--kz-space-lg);
}

.kz-redesign .kz-ed .kz-prose .clear {
    clear: both;
}

/* Разделитель .outline (пустой блок редактора) — тонкая линия */

.kz-redesign .kz-ed .kz-prose .outline,
.kz-redesign .kz-ed .kz-prose hr {
    clear: both;
    height: 0;
    margin: var(--kz-space-xl) 0;
    border: 0;
    border-top: 1px solid var(--kz-bp-mist-line);
    background: none;
}

/* Видео: ширина колонки, 16:9 */

.kz-redesign .kz-ed .kz-prose iframe,
.kz-redesign .kz-ed .kz-prose video {
    max-width: 100%;
    border: 0;
}

.kz-redesign .kz-ed .kz-prose iframe[src*="youtube"],
.kz-redesign .kz-ed .kz-prose iframe[src*="youtu.be"],
.kz-redesign .kz-ed .kz-prose iframe[src*="vimeo"],
.kz-redesign .kz-ed .kz-prose iframe[src*="rutube"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: var(--kz-space-xl) 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-ink);
}

.kz-redesign .kz-ed .kz-prose .thumb-wrap {
    position: static;
    height: auto;
    margin: var(--kz-space-xl) 0;
    padding: 0;
    overflow: visible;
}

.kz-redesign .kz-ed .kz-prose .thumb-wrap iframe {
    position: static;
    margin: 0;
}

/* Выноски и цитаты: .substrate, blockquote, .kvadro — подложка mist; .quote-one — врезка-цитата с синей линией */

.kz-redesign .kz-ed .kz-prose .substrate,
.kz-redesign .kz-ed .kz-prose blockquote,
.kz-redesign .kz-ed .kz-prose .kvadro {
    clear: both;
    margin: var(--kz-space-xl) 0;
    padding: var(--kz-space-card-padding) var(--kz-space-lg);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-mist);
    color: var(--kz-bp-text);
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
}

.kz-redesign .kz-ed .kz-prose blockquote::before,
.kz-redesign .kz-ed .kz-prose blockquote::after {
    content: none;
}

.kz-redesign .kz-ed .kz-prose .substrate > :last-child,
.kz-redesign .kz-ed .kz-prose blockquote > :last-child,
.kz-redesign .kz-ed .kz-prose .kvadro > :last-child,
.kz-redesign .kz-ed .kz-prose .quote-one .inner > :last-child,
.kz-redesign .kz-ed .kz-prose .quote-two .inner > :last-child {
    margin-bottom: 0;
}

.kz-redesign .kz-ed .kz-prose .quote-one {
    clear: both;
    margin: var(--kz-space-xxl) 0;
    padding: var(--kz-space-xs) 0 var(--kz-space-xs) var(--kz-space-lg);
    border-left: 3px solid var(--kz-bp-blue);
    background: none;
}

.kz-redesign .kz-ed .kz-prose .quote-one .inner,
.kz-redesign .kz-ed .kz-prose .quote-one .inner p {
    color: var(--kz-bp-ink);
    font-size: calc(var(--kz-bp-body-size) + 3px);
    font-weight: 400;
    line-height: calc(var(--kz-bp-body-line) + 4px);
    text-align: left;
}

.kz-redesign .kz-ed .kz-prose .signature {
    margin: calc(var(--kz-space-xl) * -1 + var(--kz-space-sm)) 0 var(--kz-space-xl) var(--kz-space-lg);
    color: var(--kz-bp-text-2);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-ed .kz-prose .quote-one .signature {
    margin: var(--kz-space-md) 0 0;
}

/* Вывод .quote-two (articles.css: синяя плашка) — панель цвета лепестков с белым текстом */

.kz-redesign .kz-ed .kz-prose .quote-two {
    clear: both;
    margin: var(--kz-space-xxl) 0;
    padding: var(--kz-space-xl);
    border: 0;
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-blue);
    box-shadow: none;
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-ed .kz-prose .quote-two .inner,
.kz-redesign .kz-ed .kz-prose .quote-two .inner p {
    color: var(--kz-bp-on-ink);
    font-size: calc(var(--kz-bp-body-size) + 1px);
    line-height: calc(var(--kz-bp-body-line) + 2px);
    text-align: left;
}

.kz-redesign .kz-ed .kz-prose .quote-two .inner h2,
.kz-redesign .kz-ed .kz-prose .quote-two .inner h3 {
    margin: 0 0 var(--kz-space-md);
    padding: 0;
    border: 0;
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-ed .kz-prose .quote-two .inner > p:first-child:not(:only-child) {
    font-weight: 500;
}

.kz-redesign .kz-ed .kz-prose .quote-two strong,
.kz-redesign .kz-ed .kz-prose .quote-two a {
    color: var(--kz-bp-on-ink);
}

/* Кнопка-ссылка редактора (.sbutton .cd-btn) — кнопка KZ, а не красная рамка legacy */

.kz-redesign .kz-ed .kz-prose .sbutton,
.kz-redesign .kz-ed .kz-prose .cd-btn-center {
    clear: both;
    margin: var(--kz-space-xl) 0;
    text-align: left;
}

.kz-redesign .kz-ed .kz-prose .sbutton .cd-btn-center {
    margin: 0;
}

.kz-redesign .kz-ed .kz-prose .cd-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: var(--kz-space-md) var(--kz-space-lg);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-blue);
    color: var(--kz-bp-on-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none !important;
}

.kz-redesign .kz-ed .kz-prose .cd-btn:active {
    background: var(--kz-bp-blue-active);
    color: var(--kz-bp-on-ink);
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-prose .cd-btn:hover {
        background: var(--kz-bp-blue-hover);
        color: var(--kz-bp-on-ink);
    }
}

/* Таблицы: строки с линиями, первая строка с жирными подписями — заголовок на mist; широкая таблица
   прокручивается внутри рамки (обёртку .kz-prose-table добавляет kz-editorial.js, без скрипта — сама таблица) */

.kz-redesign .kz-ed .kz-prose .kz-prose-table {
    clear: both;
    margin: var(--kz-space-xl) 0;
    overflow-x: auto;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

.kz-redesign .kz-ed .kz-prose:not(.kz-prose--js) table:not(.kz-prose-cards) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.kz-redesign .kz-ed .kz-prose table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table table {
    min-width: 560px;
}

.kz-redesign .kz-ed .kz-prose table > tbody > tr:nth-child(odd),
.kz-redesign .kz-ed .kz-prose table > tbody > tr {
    background: none;
}

.kz-redesign .kz-ed .kz-prose td,
.kz-redesign .kz-ed .kz-prose th,
.kz-redesign .kz-ed .kz-prose table > tbody > tr > td,
.kz-redesign .kz-ed .kz-prose table > tbody > tr > th,
.kz-redesign .kz-ed .kz-prose table > thead > tr > th {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--kz-bp-mist-line);
    background: none;
    color: var(--kz-bp-text);
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    vertical-align: top;
}

.kz-redesign .kz-ed .kz-prose tr:last-child > td,
.kz-redesign .kz-ed .kz-prose tr:last-child > th {
    border-bottom: 0;
}

/* Заголовок таблицы: th, thead и первая строка, где каждая непустая ячейка — жирная подпись (класс ставит kz-editorial.js) */

.kz-redesign .kz-ed .kz-prose th,
.kz-redesign .kz-ed .kz-prose thead td,
.kz-redesign .kz-ed .kz-prose tr.kz-prose-thead > td {
    background: var(--kz-bp-mist);
    color: var(--kz-bp-ink);
    font-weight: 500;
}

.kz-redesign .kz-ed .kz-prose td p,
.kz-redesign .kz-ed .kz-prose th p {
    margin: 0;
}

.kz-redesign .kz-ed .kz-prose td p[align="center"] {
    text-align: center;
}

/* .pcat-table с карточками (articles.css: ячейка = div > p > strong + текст) — плитки, а не таблица */

.kz-redesign .kz-ed .kz-prose table.pcat-table:has(td > div > p > strong:first-child) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--kz-space-base);
    min-width: 0;
    margin: var(--kz-space-xl) 0;
    overflow: visible;
}

.kz-redesign .kz-ed .kz-prose table.pcat-table:has(td > div > p > strong:first-child) > tbody,
.kz-redesign .kz-ed .kz-prose table.pcat-table:has(td > div > p > strong:first-child) > tbody > tr {
    display: contents;
}

.kz-redesign .kz-ed .kz-prose table.pcat-table:has(td > div > p > strong:first-child) td {
    display: block;
    padding: var(--kz-space-card-padding);
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-ed .kz-prose table.pcat-table:has(td > div > p > strong:first-child) td p > strong:first-child {
    display: block;
    margin-bottom: var(--kz-space-sm);
    color: var(--kz-bp-ink);
    font-size: 17px;
    line-height: 24px;
}

/* Галерея миниатюр редактора (.gallery-small-list) — сетка вместо плавающих блоков 183×123 */

.kz-redesign .kz-ed .kz-prose .gallery-small-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--kz-space-md);
    margin: var(--kz-space-xl) 0;
}

.kz-redesign .kz-ed .kz-prose .gallery-small-list > li {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-ed .kz-prose .gallery-small-list > li::before {
    content: none;
}

.kz-redesign .kz-ed .kz-prose .gallery-small-list img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Без декоративной анимации на текстовых страницах (классы animate.css в старых материалах) */

.kz-redesign .kz-ed .kz-prose .animated {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ======================================================================================================================
 * Фото новости: первое крупно, остальные миниатюрами (контейнер .images — для встроенных правил редактора)
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-ed-photos-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kz-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-redesign .kz-ed .kz-ed-photo {
    margin: 0;
    padding: 0;
}

.kz-redesign .kz-ed .kz-ed-photo::before {
    content: none;
}

.kz-redesign .kz-ed .kz-ed-photo--lead {
    grid-column: 1 / -1;
}

.kz-redesign .kz-ed .kz-ed-photo a {
    display: block;
    overflow: hidden;
    border-radius: var(--kz-radius-control);
    background: var(--kz-bp-mist);
}

.kz-redesign .kz-ed .kz-ed-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.kz-redesign .kz-ed .kz-ed-photo--lead img {
    aspect-ratio: auto;
    height: auto;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    box-sizing: border-box;
}

.kz-redesign .kz-ed .kz-ed-photo--lead a {
    border-radius: var(--kz-radius-card);
    background: none;
}

.kz-redesign .kz-ed .kz-ed-photo a:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-ed-photo a:hover img {
        filter: brightness(0.9);
    }
}

/* ======================================================================================================================
 * Обращение: «Возникли вопросы?» статьи и «Вопросы об обучении» — синяя полоса (как на странице товара 5.8)
 * ==================================================================================================================== */

.kz-redesign .kz-ed .kz-ed-ask {
    padding: var(--kz-space-xxxl) 0;
    background: var(--kz-bp-blue);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-ed .kz-ed-ask-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: var(--kz-space-xl) var(--kz-space-xxxl);
    align-items: center;
}

.kz-redesign .kz-ed .kz-ed-ask-grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

.kz-redesign .kz-ed .kz-ed-ask-grid--solo .kz-ed-ask-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-lg);
}

.kz-redesign .kz-ed .kz-ed-ask-title {
    margin: 0 0 var(--kz-space-base);
    padding: 0;
    color: var(--kz-bp-on-ink);
    font-family: var(--kz-font-ui);
    font-size: 32px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: -0.01em;
    text-transform: none;
}

.kz-redesign .kz-ed .kz-ed-ask-grid--solo .kz-ed-ask-title {
    margin: 0;
}

.kz-redesign .kz-ed .kz-ed-ask-text p {
    max-width: 40em;
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-bp-on-ink-2);
    font-size: 18px;
    line-height: 28px;
}

.kz-redesign .kz-ed .kz-ed-ask-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    margin: var(--kz-space-sm) 0 0;
    padding: 0 var(--kz-space-lg);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-transform: none;
    cursor: pointer;
}

.kz-redesign .kz-ed .kz-ed-ask-grid--solo .kz-ed-ask-btn {
    margin: 0;
}

.kz-redesign .kz-ed .kz-ed-ask-btn:focus-visible {
    outline: 2px solid var(--kz-color-paper) !important;
    outline-offset: 2px;
}

.kz-redesign .kz-ed .kz-ed-ask-btn:active {
    background: #C7D5F5;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-ed .kz-ed-ask-btn:hover {
        background: #DCE5FA;
    }
}

.kz-redesign .kz-ed .kz-ed-manager {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--kz-space-base);
    align-items: start;
    padding: var(--kz-space-card-padding);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
    color: var(--kz-bp-text);
}

.kz-redesign .kz-ed .kz-ed-manager-photo img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--kz-bp-mist);
    object-fit: cover;
}

.kz-redesign .kz-ed .kz-ed-manager-name {
    margin: 0 0 var(--kz-space-xs);
    color: var(--kz-bp-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
}

.kz-redesign .kz-ed .kz-ed-manager-dept {
    margin: 0 0 var(--kz-space-sm);
    color: var(--kz-bp-text-2);
    font-size: 14px;
    line-height: 20px;
}

.kz-redesign .kz-ed .kz-ed-manager-dept a,
.kz-redesign .kz-ed .kz-ed-manager-contacts a {
    color: var(--kz-bp-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kz-redesign .kz-ed .kz-ed-manager-contacts {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-ed .kz-ed-manager-contacts li {
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

.kz-redesign .kz-ed .kz-ed-manager-contacts li::before {
    content: none;
}

/* Прикреплённые файлы обучения — прежний блок, без отрицательных полей legacy */

.kz-redesign .kz-ed .kz-ed-files {
    padding: 0 0 var(--kz-space-xxxl);
}

/* Описание раздела статей — ось чтения (как описание отрасли 5.10) */

.kz-redesign .kz-ed .kz-ed-seo {
    padding-top: var(--kz-space-xxl);
}

/* ======================================================================================================================
 * Ширины
 * ==================================================================================================================== */

@media (max-width: 1279px) {
    .kz-redesign .kz-ed .kz-ev-item {
        grid-template-columns: 152px minmax(0, 1fr) 176px;
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-ed .kz-ev-item--text {
        grid-template-columns: 152px minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .kz-redesign .kz-ed .kz-ed-cards,
    .kz-redesign .kz-ed .kz-gal-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-ed .kz-ed-ask-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-ed .kz-ed-aside .kz-gal-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-ed .kz-ed-photos-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .kz-redesign .kz-ed .kz-ed-photo--lead {
        grid-column: 1 / span 4;
        grid-row: span 2;
    }
}

@media (max-width: 767px) {
    .kz-redesign .kz-ed .kz-ed-band,
    .kz-redesign .kz-ed .kz-ed-read,
    .kz-redesign .kz-ed .kz-ed-more,
    .kz-redesign .kz-ed .kz-ed-gallery {
        padding: var(--kz-space-xl) 0 var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-ed .kz-ed-read + .kz-ed-more > .kz-cat-inner::before,
    .kz-redesign .kz-ed .kz-ed-read + .banners:not(:has(*)) + .kz-ed-more > .kz-cat-inner::before,
    .kz-redesign .kz-ed .kz-ed-read + .kz-ed-gallery > .kz-cat-inner::before,
    .kz-redesign .kz-ed .kz-ed-band + .kz-ed-more > .kz-cat-inner::before,
    .kz-redesign .kz-ed .kz-ed-gallery + .kz-ed-more > .kz-cat-inner::before,
    .kz-redesign .kz-ed .kz-press-section + .kz-press-section > .kz-cat-inner::before {
        margin-bottom: var(--kz-space-xl);
    }

    .kz-redesign .kz-ed .kz-ed-section-title {
        font-size: 22px;
        line-height: 28px;
    }

    .kz-redesign .kz-ed .kz-ed-title {
        font-size: 28px;
        line-height: 34px;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .kz-redesign .kz-ed .kz-ed-head {
        gap: var(--kz-space-base);
    }

    .kz-redesign .kz-ed .kz-ed-head .kz-catp-actions {
        justify-content: flex-start;
    }

    .kz-redesign .kz-ed .kz-ev-facts-hero {
        flex-direction: column;
        gap: var(--kz-space-md);
        margin-top: var(--kz-space-base);
    }

    .kz-redesign .kz-ed .kz-ev-facts-hero dd {
        font-size: 16px;
        line-height: 24px;
    }

    .kz-redesign .kz-ed .kz-ed-products {
        padding: var(--kz-space-xl) 0 var(--kz-space-section-mobile);
    }

    .kz-redesign .kz-ed .kz-ed-products .kz-catp-group-title {
        font-size: 20px;
        line-height: 26px;
    }

    .kz-redesign .kz-ed .kz-ed-ask {
        padding: var(--kz-space-section-mobile) 0;
    }

    .kz-redesign .kz-ed .kz-ed-ask-title {
        font-size: 26px;
        line-height: 32px;
    }

    .kz-redesign .kz-ed .kz-ed-ask-text p {
        font-size: 16px;
        line-height: 25px;
    }

    .kz-redesign .kz-ed .kz-ed-ask-btn {
        width: 100%;
    }

    /* Строки мероприятий: сроки строкой сверху, изображение справа от текста небольшим */

    .kz-redesign .kz-ed .kz-ev-item,
    .kz-redesign .kz-ed .kz-ev-item--text {
        grid-template-columns: minmax(0, 1fr) 88px;
        grid-template-areas: "date date" "body media";
        gap: var(--kz-space-sm) var(--kz-space-base);
        padding: var(--kz-space-base) 0 var(--kz-space-lg);
    }

    .kz-redesign .kz-ed .kz-ev-item--text {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "date" "body";
    }

    .kz-redesign .kz-ed .kz-ev-date {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--kz-space-sm);
    }

    .kz-redesign .kz-ed .kz-ev-days,
    .kz-redesign .kz-ed .kz-ev-days--cross {
        font-size: 20px;
        line-height: 26px;
    }

    .kz-redesign .kz-ed .kz-ev-month {
        color: var(--kz-bp-ink);
        font-size: 16px;
        line-height: 24px;
    }

    .kz-redesign .kz-ed .kz-ev-title {
        font-size: 18px;
        line-height: 24px;
    }

    .kz-redesign .kz-ed .kz-ev-facts {
        font-size: 14px;
        line-height: 20px;
    }

    .kz-redesign .kz-ed .kz-ev-desc {
        font-size: 15px;
        line-height: 22px;
    }

    .kz-redesign .kz-ed .kz-ev-media {
        padding: var(--kz-space-xs);
        border-radius: var(--kz-radius-control);
    }

    .kz-redesign .kz-ed .kz-ev-year-title {
        font-size: 24px;
        line-height: 30px;
    }

    .kz-redesign .kz-ed .kz-ev-year + .kz-ev-year {
        margin-top: var(--kz-space-xl);
    }

    /* Карточки новостей и статей — строки: фото слева, заголовок справа */

    .kz-redesign .kz-ed .kz-ed-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-md);
    }

    .kz-redesign .kz-ed .kz-ed-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: start;
    }

    .kz-redesign .kz-ed .kz-ed-card--text {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-ed .kz-ed-card-media {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 4 / 3;
        margin: var(--kz-space-md) 0 var(--kz-space-md) var(--kz-space-md);
        border-radius: var(--kz-radius-control);
    }

    .kz-redesign .kz-ed .kz-ed-card-body {
        grid-column: 2;
        grid-row: 1;
        padding: var(--kz-space-md) var(--kz-space-base) var(--kz-space-md) var(--kz-space-md);
    }

    .kz-redesign .kz-ed .kz-ed-card--text .kz-ed-card-body {
        grid-column: 1;
        padding: var(--kz-space-base);
    }

    .kz-redesign .kz-ed .kz-ed-card-title {
        font-size: 16px;
        line-height: 22px;
    }

    .kz-redesign .kz-ed .kz-ed-card-meta {
        margin-bottom: var(--kz-space-xs);
        font-size: 12px;
        line-height: 16px;
    }

    .kz-redesign .kz-ed .kz-ed-card-desc {
        display: none;
    }

    .kz-redesign .kz-ed .kz-gal-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-space-lg);
    }

    .kz-redesign .kz-ed .kz-ed-aside .kz-gal-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .kz-redesign .kz-ed .kz-gal-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--kz-space-sm);
    }

    .kz-redesign .kz-ed .kz-gal-grid--album {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kz-redesign .kz-ed .kz-ed-photos-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kz-redesign .kz-ed .kz-ed-photo--lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* Текст: заголовки и врезки компактнее, без обтекания фото */

    .kz-redesign .kz-ed .kz-prose h1,
    .kz-redesign .kz-ed .kz-prose h2 {
        margin-top: 40px;
        font-size: 22px;
        line-height: 28px;
    }

    .kz-redesign .kz-ed .kz-prose h3 {
        margin-top: var(--kz-space-xl);
        font-size: 18px;
        line-height: 25px;
    }

    .kz-redesign .kz-ed .kz-prose .kz-prose-lead {
        margin-bottom: var(--kz-space-xl);
        font-size: 17px;
        line-height: 27px;
    }

    .kz-redesign .kz-ed .kz-prose .image-align-left,
    .kz-redesign .kz-ed .kz-prose .image-align-right {
        float: none;
        display: block;
        max-width: 100%;
        margin: var(--kz-space-base) 0;
    }

    .kz-redesign .kz-ed .kz-prose .quote-two {
        padding: var(--kz-space-lg) var(--kz-space-base);
    }

    .kz-redesign .kz-ed .kz-prose .quote-one {
        padding-left: var(--kz-space-base);
    }

    .kz-redesign .kz-ed .kz-prose .quote-one .inner,
    .kz-redesign .kz-ed .kz-prose .quote-one .inner p {
        font-size: 18px;
        line-height: 27px;
    }

    .kz-redesign .kz-ed .kz-prose .substrate,
    .kz-redesign .kz-ed .kz-prose blockquote,
    .kz-redesign .kz-ed .kz-prose .kvadro {
        padding: var(--kz-space-base);
    }

    .kz-redesign .kz-ed .kz-prose li.sem_li {
        padding-left: 0;
    }

    .kz-redesign .kz-ed .kz-prose li.sem_li > span:first-child {
        display: block;
        width: auto;
        margin-left: 0;
    }

    .kz-redesign .kz-ed .kz-prose .cd-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-ed .kz-ed-all {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kz-redesign .kz-ed .kz-ed-card,
    .kz-redesign .kz-ed .kz-ed-all::after {
        transition: none;
    }
}

@media print {
    .kz-redesign .kz-ed .kz-ed-subscribe,
    .kz-redesign .kz-ed .kz-ed-ask,
    .kz-redesign .kz-ed .kz-ed-toc {
        display: none;
    }

    .kz-redesign .kz-ed .kz-ed-meta,
    .kz-redesign .kz-ed .kz-ed-kicker,
    .kz-redesign .kz-ed .kz-ev-facts-hero dd,
    .kz-redesign .kz-ed .kz-ev-facts-hero dt {
        color: #000000;
    }

    .kz-redesign .kz-ed .kz-ed-layout--aside,
    .kz-redesign .kz-ed .kz-ed-layout--toc {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "aside";
    }

    .kz-redesign .kz-ed .kz-prose .quote-two {
        border: 1px solid #000000;
        background: none;
        color: #000000;
    }

    .kz-redesign .kz-ed .kz-prose .quote-two .inner,
    .kz-redesign .kz-ed .kz-prose .quote-two .inner p {
        color: #000000;
    }
}

/*
 * Доработка 5.11a (2026-10-09, не утверждена): таблицы в тексте CMS — рамка с подписью о продолжении и затенением
 * края, многоколоночная таблица программ обучения на ширину контейнера, закреплённый первый столбец на телефоне;
 * блок «Поделиться списком» в собственном избранном. Правила раздела 5.11 не переписываются — здесь только
 * дополнения и переопределения. Структура таблицы (kz-editorial.js): p.kz-prose-table-hint →
 * div.kz-prose-table-frame → div.kz-prose-table (прокрутка, область с именем) → table.
 */

/* ---------- Рамка таблицы и прокрутка ---------- */

.kz-redesign .kz-ed .kz-prose .kz-prose-table-frame {
    position: relative;
    clear: both;
    margin: var(--kz-space-xl) 0;
    overflow: hidden;
    border: 1px solid var(--kz-bp-mist-line);
    border-radius: var(--kz-radius-card);
    background: var(--kz-color-paper);
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table-frame > .kz-prose-table {
    margin: 0;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table-frame > .kz-prose-table:focus-visible {
    outline: 2px solid var(--kz-bp-blue);
    outline-offset: -2px;
}

/* Пока справа есть скрытые столбцы — затенение правого края (не ловит указатель) */

.kz-redesign .kz-ed .kz-prose .kz-prose-table-frame.has-more::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 56px;
    background: linear-gradient(to left, rgba(14, 36, 76, 0.14), rgba(14, 36, 76, 0));
    pointer-events: none;
}

/* Подпись над таблицей: «Ещё N столбцов справа — прокрутите таблицу» (только пока таблица не прокручена до конца) */

.kz-redesign .kz-ed .kz-prose .kz-prose-table-hint {
    display: flex;
    align-items: center;
    gap: var(--kz-space-sm);
    margin: var(--kz-space-xl) 0 var(--kz-space-sm);
    color: var(--kz-bp-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table-hint::after {
    content: "→";
    color: var(--kz-bp-blue);
    font-size: 16px;
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table-hint[hidden] {
    display: none;
}

.kz-redesign .kz-ed .kz-prose .kz-prose-table-hint:not([hidden]) + .kz-prose-table-frame {
    margin-top: 0;
}

/* ---------- Многоколоночная таблица (от пяти столбцов) ---------- */

/* Обучение: колонка текста остаётся на оси чтения, таблица — на ширину контейнера на всех ширинах (единица cqw
   считается от сетки .kz-ed-layout); от 1024px содержание «На этой странице» на такой странице не закрепляется,
   чтобы не лечь на таблицу */

.kz-redesign .kz-tr .kz-ed-layout {
    container-type: inline-size;
}

.kz-redesign .kz-tr .kz-prose .kz-prose-table--wide {
    width: 100cqw;
    max-width: none;
}

@media (min-width: 1024px) {
    .kz-redesign .kz-tr .kz-ed-layout--wide-table .kz-ed-toc {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .kz-redesign .kz-tr .kz-prose .kz-prose-table--wide td,
    .kz-redesign .kz-tr .kz-prose .kz-prose-table--wide th {
        padding: 12px 16px;
    }
}

/* До 1023px: таблица шире экрана прокручивается; первый столбец закреплён, чтобы строка оставалась узнаваемой;
   ширина столбцов — по содержимому, подписи и значения не обрезаются (переносятся по словам) */

@media (max-width: 1023px) {
    .kz-redesign .kz-ed .kz-prose .kz-prose-table--wide table {
        min-width: 680px;
    }

    .kz-redesign .kz-ed .kz-prose .kz-prose-table--wide td:first-child,
    .kz-redesign .kz-ed .kz-prose .kz-prose-table--wide th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 7.5em;
        background: var(--kz-color-paper);
        box-shadow: inset -1px 0 0 var(--kz-bp-mist-line);
    }

    .kz-redesign .kz-ed .kz-prose .kz-prose-table--wide tr.kz-prose-thead > td:first-child,
    .kz-redesign .kz-ed .kz-prose .kz-prose-table--wide thead td:first-child,
    .kz-redesign .kz-ed .kz-prose .kz-prose-table--wide th:first-child {
        background: var(--kz-bp-mist);
    }
}

/* ---------- Избранное: «Поделиться списком» (собственный непустой список) ---------- */

.kz-redesign .kz-fav .kz-fav-share {
    margin-top: var(--kz-space-lg);
    color: var(--kz-bp-on-ink);
}

.kz-redesign .kz-fav .kz-fav-share-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-sm);
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 var(--kz-space-base);
    border: 1px solid var(--kz-color-on-dark-border);
    border-radius: var(--kz-radius-control);
    color: var(--kz-bp-on-ink);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    line-height: 20px;
    list-style: none;
    cursor: pointer;
}

.kz-redesign .kz-fav .kz-fav-share-toggle::-webkit-details-marker {
    display: none;
}

.kz-redesign .kz-fav .kz-fav-share-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.kz-redesign .kz-fav .kz-fav-share[open] .kz-fav-share-toggle::after {
    transform: translateY(2px) rotate(-135deg);
}

.kz-redesign .kz-fav .kz-fav-share-toggle:focus-visible {
    outline: 2px solid var(--kz-color-paper);
    outline-offset: 2px;
}

.kz-redesign .kz-fav .kz-fav-share-panel {
    max-width: 720px;
    margin-top: var(--kz-space-md);
}

.kz-redesign .kz-fav .kz-fav-share-text {
    margin: 0 0 var(--kz-space-md);
    color: var(--kz-bp-on-ink-2);
    font-size: 15px;
    line-height: 22px;
}

.kz-redesign .kz-fav .kz-fav-share-row {
    display: flex;
    gap: var(--kz-space-sm);
}

.kz-redesign .kz-fav .kz-fav-share-url {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-md);
    border: 1px solid transparent;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-data);
    font-size: 14px;
    line-height: 20px;
}

.kz-redesign .kz-fav .kz-fav-share-url:focus-visible {
    outline: 2px solid var(--kz-bp-glow);
    outline-offset: 2px;
}

.kz-redesign .kz-fav .kz-fav-share-copy {
    flex: none;
    box-sizing: border-box;
    height: 44px;
    margin: 0;
    padding: 0 var(--kz-space-lg);
    border: 0;
    border-radius: var(--kz-radius-control);
    background: var(--kz-color-paper);
    color: var(--kz-bp-ink);
    font-family: var(--kz-font-ui);
    font-size: var(--kz-type-button-size);
    font-weight: var(--kz-type-button-weight);
    cursor: pointer;
}

.kz-redesign .kz-fav .kz-fav-share-copy[hidden] {
    display: none;
}

.kz-redesign .kz-fav .kz-fav-share-copy:active {
    background: #C7D5F5;
}

.kz-redesign .kz-fav .kz-fav-share-copy:focus-visible {
    outline: 2px solid var(--kz-color-paper) !important;
    outline-offset: 2px;
}

.kz-redesign .kz-fav .kz-fav-share-status {
    min-height: 20px;
    margin: var(--kz-space-sm) 0 0;
    color: var(--kz-bp-on-ink-2);
    font-size: 14px;
    line-height: 20px;
}

@media (hover: hover) and (pointer: fine) {
    .kz-redesign .kz-fav .kz-fav-share-toggle:hover {
        border-color: var(--kz-color-paper);
        background: var(--kz-bp-on-ink-fill);
    }

    .kz-redesign .kz-fav .kz-fav-share-copy:hover {
        background: #DCE5FA;
    }
}

@media (max-width: 575px) {
    .kz-redesign .kz-fav .kz-fav-share-row {
        flex-direction: column;
    }

    .kz-redesign .kz-fav .kz-fav-share-copy {
        width: 100%;
    }
}

@media (pointer: coarse) {
    .kz-redesign .kz-fav .kz-fav-share-toggle {
        min-height: 44px;
    }
}

@media print {
    .kz-redesign .kz-fav .kz-fav-share {
        display: none;
    }
}