/*!
 * kit.css — дизайн-система chusovskoy для WordPress.
 * Сгенерировано tools/build-wp-css.mjs из ui-kit/assets/css. Руками не править:
 * правки в ките + повторный запуск скрипта.
 * Источников: 28. Слои @layer сняты (иначе проигрывают CSS Blocksy).
 */

/* ===== assets/fonts/fonts.css ===== */
/* ==========================================================================
   Локальные шрифты кита. Файл сгенерирован: node tools/fetch-fonts.mjs
   Не редактируйте вручную — перезапустите скрипт.
   Unbounded / Manrope — variable: один файл на диапазон весов.
   ========================================================================== */

/* Manrope · font-weight: 400 700 · cyrillic-ext (2 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Manrope · font-weight: 400 700 · cyrillic (14 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Manrope · font-weight: 400 700 · latin-ext (15 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · font-weight: 400 700 · latin (24 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Unbounded · font-weight: 400 800 · cyrillic-ext (2 KB) */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/unbounded-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Unbounded · font-weight: 400 800 · cyrillic (31 KB) */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Unbounded · font-weight: 400 800 · latin-ext (116 KB) */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Unbounded · font-weight: 400 800 · latin (50 KB) */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== assets/css/base/tokens.css ===== */
/* ==========================================================================
   tokens.css — единственный источник значений дизайн-системы.

   Значения сняты пипеткой с макетов site-design/*.png (1920px, контейнер 1200px).
   Префикс --ck- защищает от конфликтов со стилями Blocksy (--theme-*) при переносе
   кита в дочернюю тему WordPress.

   Правило: компоненты НЕ используют «сырые» значения (hex, px вне шкалы, шрифты
   по имени). Только переменные из этого файла.
   ========================================================================== */

  :root {
    color-scheme: light;

    /* ======================================================================
       1. Бренд — 4 цвета из брифа (проверены по пикселям макетов)
       ====================================================================== */
    --ck-blue: #003cf6;
    --ck-blue-hover: #0032cc;
    --ck-blue-active: #0029a8;

    --ck-lime: #d1f600;
    --ck-lime-hover: #bce000;
    --ck-lime-active: #a8c900;

    --ck-ink: #161616;
    --ck-white: #ffffff;
    --ck-black: #000000;

    /* ======================================================================
       2. Нейтральные (surface-* и line-* сняты с макетов)
       ====================================================================== */
    --ck-surface: #f3f4f5;        /* подложка фильтр-бара, футера, табов */
    --ck-surface-strong: #e6e7e9;
    --ck-line: #e2e2e2;           /* рамки карточек */
    --ck-line-soft: #eeeeee;      /* разделители внутри карточек */
    --ck-muted: #6d6d6d;          /* вторичный текст, старая цена */
    --ck-muted-soft: #757575;     /* подписи, мета (затемнено до AA 4.7:1) */

    /* Служебные состояния (в макете нет — спроектированы для форм) */
    --ck-danger: #d92d20;
    --ck-danger-soft: #fef3f2;
    --ck-success: #12805c;

    /* ======================================================================
       3. Пастельные подложки медиа в карточках товаров
       ====================================================================== */
    --ck-pastel-mint: #d9f4f4;
    --ck-pastel-cream: #f4f0d9;
    --ck-pastel-leaf: #daf4d9;
    --ck-pastel-lavender: #e8d2f1;
    --ck-pastel-peach: #f1ddd2;

    /* Цвет текста на пастельных бейджах — снят с макетов */
    --ck-pastel-lavender-text: #452c50;
    --ck-pastel-leaf-text: #2f502c;
    --ck-pastel-peach-text: #502e2c;

    /* ======================================================================
       4. «Стекло» на синем фоне (вычислено из #4C76F9 и #2054F7 поверх #003CF6)
       ====================================================================== */
    --ck-glass-1: rgba(255, 255, 255, 0.125); /* тонкие строки FAQ/секций */
    --ck-glass-2: rgba(255, 255, 255, 0.3);   /* заметные плашки */

    /* ======================================================================
       5. Семантика — то, чем пользуются компоненты.
       Контекст (синяя секция, лаймовая карточка) переопределяет эти
       переменные, а не отдельные компоненты.
       ====================================================================== */
    --ck-color-bg: var(--ck-white);
    --ck-color-bg-subtle: var(--ck-surface);
    --ck-color-text: var(--ck-ink);
    --ck-color-muted: var(--ck-muted);
    --ck-color-accent: var(--ck-lime);
    --ck-color-accent-text: var(--ck-ink);
    --ck-color-primary: var(--ck-blue);
    --ck-color-primary-text: var(--ck-white);
    --ck-color-border: var(--ck-line);
    --ck-color-link: var(--ck-blue);
    --ck-color-focus: var(--ck-blue);
    --ck-color-overlay: rgba(22, 22, 22, 0.55);

    /* ======================================================================
       6. Шрифты
       Локальные woff2 (Unbounded/Manrope, variable) подключаются из
       assets/fonts/fonts.css. Никаких внешних CDN.
       ====================================================================== */
    --ck-font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
    --ck-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ck-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

    --ck-weight-regular: 400;
    --ck-weight-medium: 500;
    --ck-weight-semibold: 600;
    --ck-weight-bold: 700;
    --ck-weight-black: 800;

    /* Кегли — замерены по макетам (1920px, контейнер 1200px) пересчётом
       «ширина строки / капитель» с рендера в 100px:
         hero «Я СОЗДАЮ ОФОРМЛЕНИЕ»  ≈ 36px (шаг строк 44)
         заголовки секций лендинга   ≈ 40px
         H1 страницы (лайм-карточка) ≈ 34px (шаг строк 35)
         eyebrow (Unbounded, строчными) ≈ 24px
         заголовок карточки ≈ 18px, body ≈ 18px (шаг строк 29)
       В системе display = 38px покрывает и hero, и заголовки секций. */
    --ck-fs-display: clamp(1.75rem, 1.05rem + 2.2vw, 2.375rem);
    --ck-fs-h1: clamp(1.625rem, 1.1rem + 1.6vw, 2.125rem);
    --ck-fs-h2: clamp(1.375rem, 1.05rem + 1vw, 1.75rem);
    --ck-fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.375rem);
    --ck-fs-h4: 1.125rem;
    --ck-fs-h5: 1rem;
    --ck-fs-h6: 0.875rem;
    --ck-fs-lead: 1.25rem;
    --ck-fs-body: 1.125rem;
    --ck-fs-body-sm: 1rem;
    --ck-fs-sm: 0.875rem;
    --ck-fs-xs: 0.75rem;
    --ck-fs-eyebrow: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);

    /* Интерлиньяж: плотный у крупных заголовков (в макете шаг 35px при 34px),
       свободный у текста (шаг 29px при 18px). */
    --ck-lh-display: 1.15;
    --ck-lh-heading: 1.05;
    --ck-lh-heading-tight: 1.25;
    --ck-lh-body: 1.6;
    --ck-lh-body-sm: 1.5;

    /* Трекинг в макете нулевой — проверено по ширине строк. */
    --ck-ls-display: 0;
    --ck-ls-heading: 0;
    --ck-ls-eyebrow: 0;
    --ck-ls-button: 0.01em;

    /* ======================================================================
       7. Отступы — шкала на базе 4px
       ====================================================================== */
    --ck-space-1: 0.25rem;  /* 4  */
    --ck-space-2: 0.5rem;   /* 8  */
    --ck-space-3: 0.75rem;  /* 12 */
    --ck-space-4: 1rem;     /* 16 */
    --ck-space-5: 1.25rem;  /* 20 */
    --ck-space-6: 1.5rem;   /* 24 */
    --ck-space-7: 1.75rem;  /* 28 */
    --ck-space-8: 2rem;     /* 32 */
    --ck-space-10: 2.5rem;  /* 40 */
    --ck-space-12: 3rem;    /* 48 */
    --ck-space-14: 3.5rem;  /* 56 */
    --ck-space-16: 4rem;    /* 64 */
    --ck-space-20: 5rem;    /* 80 */
    --ck-space-24: 6rem;    /* 96 */
    --ck-space-30: 7.5rem;  /* 120 */

    /* Сетка макета: контейнер ровно 1200px, карточки 380px, gap 30px. */
    --ck-container: 1200px;
    --ck-gutter: clamp(1rem, 3vw, 2.5rem);
    --ck-grid-gap: 1.875rem; /* 30 */
    --ck-section-space: clamp(3rem, 2rem + 3.5vw, 6rem);

    /* ======================================================================
       8. Скругления — замерены по макетам
       ====================================================================== */
    --ck-radius-xs: 6px;
    --ck-radius-sm: 10px;
    --ck-radius-md: 12px;   /* header-плашка, лаймовая карточка кейса */
    --ck-radius-lg: 18px;   /* медиа в карточках товаров */
    --ck-radius-xl: 24px;
    --ck-radius-pill: 999px;

    /* ======================================================================
       9. Тени, рамки, фокус
       ====================================================================== */
    --ck-border-width: 1px;
    --ck-shadow-sm: 0 1px 2px rgba(22, 22, 22, 0.06);
    --ck-shadow-card: 0 2px 12px rgba(22, 22, 22, 0.05);
    --ck-shadow-lift: 0 10px 30px rgba(22, 22, 22, 0.12);
    --ck-shadow-primary: 0 10px 30px rgba(0, 60, 246, 0.25);
    --ck-focus-ring-width: 2px;
    --ck-focus-ring-offset: 3px;

    /* ======================================================================
       10. Движение
       ====================================================================== */
    --ck-dur-fast: 120ms;
    --ck-dur: 200ms;
    --ck-dur-slow: 320ms;
    --ck-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ck-ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* ======================================================================
       11. Слои
       ====================================================================== */
    --ck-z-header: 100;
    --ck-z-overlay: 200;
    --ck-z-modal: 300;

    /* ======================================================================
       12. Аспекты медиа
       ====================================================================== */
    --ck-aspect-card: 380 / 240;  /* 238–240px при ширине 380 (замер) */
    --ck-aspect-cover: 4 / 3;
    --ck-aspect-square: 1 / 1;
    --ck-aspect-portrait: 3 / 4;

    /* Локальный «руль» компонента .ck-media: значение по умолчанию,
       переопределяется на конкретном элементе через style/модификатор. */
    --ck-media-ratio: var(--ck-aspect-cover);

    /* ======================================================================
       Брейкпоинты (для медиазапросов, т.к. var() в @media не работает):
         480px  — крупный мобильный
         768px  — планшет
         1024px — ноутбук
         1280px — десктоп
         1440px — широкий десктоп (контейнер уже 1200px)
       ====================================================================== */
  }

  /* Контекстные переопределения семантики.
     Класс-поверхность задаёт и переменные, и сам цвет/фон — иначе вложенные
     элементы останутся с цветом родителя (например, тёмный логотип на синем).
     Используется классами-поверхностями: .ck-on-blue, .ck-on-lime, .ck-on-ink. */
  .ck-on-blue {
    --ck-color-bg: var(--ck-blue);
    --ck-color-bg-subtle: var(--ck-glass-1);
    --ck-color-text: var(--ck-white);
    /* 0.8 — минимум для AA: на #003CF6 даёт 4.97:1 (0.72 давало 4.28:1) */
    --ck-color-muted: rgba(255, 255, 255, 0.8);
    --ck-color-border: rgba(255, 255, 255, 0.24);
    --ck-color-primary: var(--ck-lime);
    --ck-color-primary-text: var(--ck-ink);
    --ck-color-focus: var(--ck-white);
    background-color: var(--ck-color-bg);
    color: var(--ck-color-text);
    color-scheme: dark;
  }

  .ck-on-lime {
    --ck-color-bg: var(--ck-lime);
    --ck-color-bg-subtle: rgba(22, 22, 22, 0.06);
    --ck-color-text: var(--ck-ink);
    --ck-color-muted: rgba(22, 22, 22, 0.7);
    --ck-color-border: rgba(22, 22, 22, 0.16);
    --ck-color-primary: var(--ck-blue);
    --ck-color-primary-text: var(--ck-white);
    --ck-color-focus: var(--ck-ink);
    background-color: var(--ck-color-bg);
    color: var(--ck-color-text);
  }

  .ck-on-ink {
    --ck-color-bg: var(--ck-ink);
    --ck-color-bg-subtle: rgba(255, 255, 255, 0.08);
    --ck-color-text: var(--ck-white);
    --ck-color-muted: rgba(255, 255, 255, 0.64);
    --ck-color-border: rgba(255, 255, 255, 0.16);
    --ck-color-primary: var(--ck-lime);
    --ck-color-primary-text: var(--ck-ink);
    --ck-color-focus: var(--ck-white);
    background-color: var(--ck-color-bg);
    color: var(--ck-color-text);
    color-scheme: dark;
  }

/* ===== assets/css/base/reset.css ===== */
/* ==========================================================================
   reset.css — минимальный современный сброс.
   Сознательно НЕ стилизует компоненты: только убирает поведение браузера.
   В WordPress этот слой можно отключить — компоненты от него не зависят.
   ========================================================================== */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p,
  figure,
  blockquote,
  dl, dd,
  fieldset {
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  fieldset {
    padding: 0;
    border: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [hidden] {
    display: none !important;
  }

  :focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: var(--ck-focus-ring-offset);
  }

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

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

/* ===== assets/css/base/typography.css ===== */
/* ==========================================================================
   typography.css — базовый слой типографики и классы текстовых стилей.

   Классы (.ck-display, .ck-h2, .ck-eyebrow и т.д.) — публичный API кита.
   Теги h1..h6 стилизуются только как «дефолт страницы»: компоненты
   всегда задают класс явно, поэтому в WordPress этот слой можно ослабить.
   ========================================================================== */

  html {
    font-family: var(--ck-font-body);
    font-size: 100%;
    font-weight: var(--ck-weight-regular);
    line-height: var(--ck-lh-body);
    color: var(--ck-color-text);
    background-color: var(--ck-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-size: var(--ck-fs-body);
  }

  /* --- Заголовки по умолчанию --------------------------------------------
     Цвет наследуется от контекста (.ck-on-blue / .ck-on-ink / карточки),
     иначе заголовки в тёмных блоках были бы невидимы. */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--ck-font-display);
    font-weight: var(--ck-weight-bold);
    line-height: var(--ck-lh-heading);
    letter-spacing: var(--ck-ls-heading);
    color: inherit;
  }

  h1 { font-size: var(--ck-fs-h1); }
  h2 { font-size: var(--ck-fs-h2); }
  h3 { font-size: var(--ck-fs-h3); }
  h4 { font-size: var(--ck-fs-h4); }
  h5 { font-size: var(--ck-fs-h5); }
  h6 { font-size: var(--ck-fs-h6); }

  /* --- Текстовые элементы ------------------------------------------------- */
  p {
    margin: 0;
    text-wrap: pretty;
  }

  p + p {
    margin-top: var(--ck-space-4);
  }

  strong, b {
    font-weight: var(--ck-weight-bold);
  }

  small {
    font-size: var(--ck-fs-sm);
  }

  code, kbd, samp, pre {
    font-family: var(--ck-font-mono);
    font-size: 0.9375em;
  }

  /* Ссылки: базовый цвет и переход, но БЕЗ глобального подчёркивания при hover.
     Иначе карточка, целиком являющаяся ссылкой (<a class="ck-post-card">),
     подчёркивает весь текст. Подчёркивание задаётся контекстом:
     .ck-prose a, .ck-link, .ck-toc a:hover. */
  a {
    color: var(--ck-color-link);
    text-underline-offset: 0.2em;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  ul:not([class]),
  ol:not([class]) {
    padding-left: 1.25em;
    list-style: disc;
  }

  ol:not([class]) {
    list-style: decimal;
  }

  li + li {
    margin-top: var(--ck-space-1);
  }

  /* ======================================================================
     Публичные классы текста
     ====================================================================== */

  /* Крупный заголовок-плакат: Unbounded 700, верхний регистр, плотный интерлиньяж.
     Используется для hero и заголовков секций лендинга (в макете 36–40px). */
  .ck-display {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-display);
    font-weight: var(--ck-weight-bold);
    line-height: var(--ck-lh-display);
    letter-spacing: var(--ck-ls-display);
    text-transform: uppercase;
  }

  .ck-h1,
  .ck-h2,
  .ck-h3,
  .ck-h4 {
    font-family: var(--ck-font-display);
    font-weight: var(--ck-weight-bold);
    letter-spacing: var(--ck-ls-heading);
  }

  .ck-h1 {
    font-size: var(--ck-fs-h1);
    line-height: var(--ck-lh-heading);
    text-transform: uppercase;
  }

  .ck-h2 {
    font-size: var(--ck-fs-h2);
    line-height: var(--ck-lh-heading);
    text-transform: uppercase;
  }

  .ck-h3 {
    font-size: var(--ck-fs-h3);
    line-height: var(--ck-lh-heading);
  }

  .ck-h4 {
    font-size: var(--ck-fs-h4);
    line-height: var(--ck-lh-heading-tight);
    font-weight: var(--ck-weight-semibold);
  }

  /* Надзаголовок секции: «услуги», «портфолио», «обо мне».
     В макете это Unbounded 500 СТРОЧНЫМИ (не капсом) около 24px. */
  .ck-eyebrow {
    display: block;
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-eyebrow);
    font-weight: var(--ck-weight-medium);
    line-height: 1.1;
    letter-spacing: var(--ck-ls-eyebrow);
    color: var(--ck-color-muted);
  }

  .ck-lead {
    font-size: var(--ck-fs-lead);
    line-height: var(--ck-lh-body);
    color: var(--ck-color-text);
  }

  .ck-body {
    font-size: var(--ck-fs-body);
    line-height: var(--ck-lh-body);
  }

  .ck-body-sm {
    font-size: var(--ck-fs-body-sm);
    line-height: var(--ck-lh-body-sm);
  }

  .ck-meta {
    font-size: var(--ck-fs-sm);
    line-height: 1.45;
    color: var(--ck-color-muted);
  }

  .ck-caption {
    font-size: var(--ck-fs-xs);
    line-height: 1.4;
    color: var(--ck-color-muted);
  }

  /* Текст на кнопках и бейджах — Unbounded, верхний регистр */
  .ck-label {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-medium);
    line-height: 1;
    letter-spacing: var(--ck-ls-button);
    text-transform: uppercase;
  }

  /* Цифры статистики: 160+, 5 лет, 400+ */
  .ck-stat-number {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h1);
    font-weight: var(--ck-weight-bold);
    line-height: 1;
    letter-spacing: var(--ck-ls-display);
    color: var(--ck-color-primary);
  }

  /* Вертикальные подписи (резюме: «ОСНОВНЫЕ НАПРАВЛЕНИЯ») */
  .ck-vertical-label {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-medium);
    letter-spacing: var(--ck-ls-eyebrow);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

/* ===== assets/css/layout/layout.css ===== */
/* ==========================================================================
   layout.css — контейнер, секции, сетки, медиа-боксы.
   Только раскладка: никаких цветов/шрифтов, кроме токенов.
   ========================================================================== */

  /* Контейнер повторяет макет: ровно 1200px контента при широком экране,
     поля появляются только когда места меньше. */
  .ck-container {
    width: min(100% - (var(--ck-gutter) * 2), var(--ck-container));
    margin-inline: auto;
  }

  .ck-section {
    padding-block: var(--ck-section-space);
  }

  .ck-section--tight {
    padding-block: calc(var(--ck-section-space) * 0.6);
  }

  .ck-section--flush {
    padding-block: 0;
  }

  /* Шапка секции: eyebrow + заголовок + опциональное описание */
  .ck-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
    margin-bottom: var(--ck-space-10);
  }

  .ck-section__head--center {
    align-items: center;
    text-align: center;
  }

  .ck-section__head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ck-space-6);
    margin-bottom: var(--ck-space-10);
  }

  /* --- Сетки -------------------------------------------------------------- */
  .ck-grid {
    display: grid;
    gap: var(--ck-grid-gap);
  }

  .ck-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ck-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }

  /* --- Потоки ------------------------------------------------------------- */
  .ck-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-4);
  }

  .ck-stack--sm { gap: var(--ck-space-2); }
  .ck-stack--lg { gap: var(--ck-space-8); }

  .ck-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-3);
  }

  .ck-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ck-space-10);
    align-items: center;
  }

  /* --- Медиа-бокс ---------------------------------------------------------
     Аспект задаётся переменной --ck-media-ratio, чтобы WP-изображения
     (srcset/sizes) ложились без сдвигов layout. */
  .ck-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--ck-media-ratio, var(--ck-aspect-cover));
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-surface);
  }

  .ck-media > img,
  .ck-media > picture > img,
  .ck-media > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Адаптив сеток ------------------------------------------------------ */
  @media (max-width: 1024px) {
    .ck-grid--3,
    .ck-grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ck-split {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 640px) {
    .ck-grid--2,
    .ck-grid--3,
    .ck-grid--4 {
      grid-template-columns: minmax(0, 1fr);
    }
  }

/* ===== assets/css/base/utilities.css ===== */
/* ==========================================================================
   utilities.css — небольшой набор утилит.
   Сознательно минимальный: кит построен на компонентах, а не на utility-классах.
   ========================================================================== */

  /* Доступность: скрыто визуально, но читается скринридером */
  .ck-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Скрыть визуально, показать при фокусе (skip-link) */
  .ck-skip-link {
    position: absolute;
    top: var(--ck-space-2);
    left: var(--ck-space-2);
    z-index: var(--ck-z-modal);
    padding: var(--ck-space-2) var(--ck-space-4);
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-white);
    color: var(--ck-ink);
    font-weight: var(--ck-weight-semibold);
    transform: translateY(-200%);
    transition: transform var(--ck-dur) var(--ck-ease);
  }

  .ck-skip-link:focus-visible {
    transform: translateY(0);
  }

  /* Текст */
  .ck-text-center { text-align: center; }
  .ck-text-right { text-align: right; }
  .ck-text-balance { text-wrap: balance; }

  .ck-muted { color: var(--ck-color-muted); }
  .ck-accent { color: var(--ck-color-accent); }
  .ck-primary { color: var(--ck-color-primary); }

  .ck-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--ck-ls-eyebrow);
  }

  /* Фоны (поверхности). Цвет текста задаётся контекстом .ck-on-*. */
  .ck-bg-white { background-color: var(--ck-white); }
  .ck-bg-surface { background-color: var(--ck-surface); }
  .ck-bg-blue { background-color: var(--ck-blue); }
  .ck-bg-lime { background-color: var(--ck-lime); }
  .ck-bg-ink { background-color: var(--ck-ink); }

  /* Рамки */
  .ck-border {
    border: var(--ck-border-width) solid var(--ck-color-border);
  }

  /* Списки без маркеров */
  .ck-list-reset {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Растянуть элемент на всю ширину */
  .ck-full-width { width: 100%; }

/* ===== assets/css/components/icon.css ===== */
/* ==========================================================================
   icon.css — иконки из SVG-спрайта assets/icons/icons.svg.

   Разметка:
     <svg class="ck-icon" aria-hidden="true" focusable="false">
       <use href="../assets/icons/icons.svg#i-arrow-right"></use>
     </svg>

   Иконка наследует цвет текста (currentColor) и размер шрифта родителя
   через em — поэтому одинаково хорошо живёт в кнопке, ссылке и бейдже.

   В WordPress спрайт один раз инлайнится в подвал (footer.php), а href
   меняется на #i-arrow-right — см. README, чек-лист переноса.
   ========================================================================== */

  .ck-icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.15em;
    overflow: visible;
    pointer-events: none;
  }

  /* Крупнее/мельче относительно текста */
  .ck-icon--sm {
    width: 1em;
    height: 1em;
  }

  .ck-icon--lg {
    width: 1.5em;
    height: 1.5em;
  }

  /* Круглая подложка под иконку (кнопки-стрелки слайдера, соцсети) */
  .ck-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-blue);
    color: var(--ck-white);
    transition: background-color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-icon-box:hover {
    background-color: var(--ck-blue-hover);
  }

  /* На синем/тёмном фоне кружок делаем «стеклянным», а на hover — лаймовым */
  .ck-on-blue .ck-icon-box,
  .ck-on-ink .ck-icon-box {
    background-color: var(--ck-glass-2);
    color: var(--ck-color-text);
  }

  .ck-on-blue .ck-icon-box:hover,
  .ck-on-ink .ck-icon-box:hover {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  /* Иконка внутри кнопки: не сжимается и держит размер */
  .ck-btn > .ck-icon {
    width: 1.125em;
    height: 1.125em;
  }

/* ===== assets/css/components/btn.css ===== */
/* ==========================================================================
   btn.css — кнопки.

   Замеры по макетам:
     кнопки-действия (Купить сразу / В корзину) — pill, высота 60px
     крупный лаймовый CTA (Портфолио)            — радиус 24px, высота 78px
     мелкие лаймовые CTA (Детали / Кейс)         — pill, высота ~44px

   Модификаторы независимы: цвет, размер, форма и лейбл комбинируются.

   Разметка:
     <a class="ck-btn ck-btn--lime ck-btn--lg ck-btn--caps ck-btn--rect" href="#">
       <span class="ck-btn__label">Портфолио</span>
     </a>
     <button class="ck-btn ck-btn--blue" type="button">Купить сразу</button>
   ========================================================================== */

  .ck-btn {
    /* Локальные «рули» — переопределяются модификаторами и контекстом */
    --ck-btn-h: 60px;
    --ck-btn-px: var(--ck-space-8);
    --ck-btn-fs: 1.125rem;
    --ck-btn-radius: var(--ck-radius-pill);
    --ck-btn-bg: var(--ck-blue);
    --ck-btn-fg: var(--ck-white);
    --ck-btn-bg-hover: var(--ck-blue-hover);
    --ck-btn-bg-active: var(--ck-blue-active);
    --ck-btn-border: transparent;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    min-height: var(--ck-btn-h);
    padding-inline: var(--ck-btn-px);
    border: var(--ck-border-width) solid var(--ck-btn-border);
    border-radius: var(--ck-btn-radius);
    background-color: var(--ck-btn-bg);
    color: var(--ck-btn-fg);
    font-family: var(--ck-font-body);
    font-size: var(--ck-btn-fs);
    font-weight: var(--ck-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition:
      background-color var(--ck-dur-fast) var(--ck-ease),
      border-color var(--ck-dur-fast) var(--ck-ease),
      color var(--ck-dur-fast) var(--ck-ease),
      transform var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-btn:hover {
    background-color: var(--ck-btn-bg-hover);
    text-decoration: none;
  }

  .ck-btn:active {
    background-color: var(--ck-btn-bg-active);
    transform: translateY(1px);
  }

  .ck-btn:focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: var(--ck-focus-ring-offset);
  }

  .ck-btn[disabled],
  .ck-btn[aria-disabled='true'],
  .ck-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Загрузка: текст скрыт, по центру крутится спиннер */
  .ck-btn.is-loading {
    color: transparent;
    pointer-events: none;
  }

  .ck-btn.is-loading > * {
    visibility: hidden;
  }

  .ck-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25em;
    height: 1.25em;
    margin: -0.625em 0 0 -0.625em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--ck-btn-fg);
    animation: ck-btn-spin 700ms linear infinite;
  }

  @keyframes ck-btn-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ======================================================================
     Цветовые варианты. `.ck-btn` без модификатора — синяя (основная).
     ====================================================================== */
  .ck-btn--lime {
    --ck-btn-bg: var(--ck-lime);
    --ck-btn-fg: var(--ck-ink);
    --ck-btn-bg-hover: var(--ck-lime-hover);
    --ck-btn-bg-active: var(--ck-lime-active);
  }

  .ck-btn--ink {
    --ck-btn-bg: var(--ck-ink);
    --ck-btn-fg: var(--ck-white);
    --ck-btn-bg-hover: color-mix(in srgb, var(--ck-ink), var(--ck-white) 16%);
    --ck-btn-bg-active: color-mix(in srgb, var(--ck-ink), var(--ck-white) 28%);
  }

  .ck-btn--white {
    --ck-btn-bg: var(--ck-white);
    --ck-btn-fg: var(--ck-ink);
    --ck-btn-bg-hover: var(--ck-surface);
    --ck-btn-bg-active: var(--ck-surface-strong);
    --ck-btn-border: var(--ck-line);
  }

  .ck-btn--ghost {
    --ck-btn-bg: transparent;
    --ck-btn-fg: currentColor;
    --ck-btn-bg-hover: color-mix(in srgb, currentColor 10%, transparent);
    --ck-btn-bg-active: color-mix(in srgb, currentColor 18%, transparent);
    --ck-btn-border: currentColor;
  }

  /* ======================================================================
     Размеры. По умолчанию 60px — как кнопки действий в макете.
     ====================================================================== */
  .ck-btn--sm {
    --ck-btn-h: 44px;
    --ck-btn-px: var(--ck-space-5);
    --ck-btn-fs: 1rem;
  }

  .ck-btn--lg {
    --ck-btn-h: 78px;
    --ck-btn-px: var(--ck-space-10);
    --ck-btn-fs: 1.25rem;
  }

  /* Прямоугольная форма (крупные лаймовые CTA: радиус 24px в макете) */
  .ck-btn--rect {
    --ck-btn-radius: var(--ck-radius-xl);
  }

  /* Лейбл в Unbounded капсом — для маркетинговых CTA */
  .ck-btn--caps {
    font-family: var(--ck-font-display);
    font-weight: var(--ck-weight-semibold);
    font-size: 1.375rem;
    letter-spacing: var(--ck-ls-button);
    text-transform: uppercase;
  }

  .ck-btn--caps.ck-btn--sm {
    font-size: 0.875rem;
  }

  .ck-btn--caps.ck-btn--lg {
    font-size: 1.375rem;
  }

  /* На всю ширину контейнера */
  .ck-btn--block {
    display: flex;
    width: 100%;
  }

  /* Круглая кнопка-иконка (стрелки слайдера, закрытие) */
  .ck-btn--icon {
    --ck-btn-px: 0;
    width: var(--ck-btn-h);
    min-width: var(--ck-btn-h);
    padding-inline: 0;
  }

  .ck-btn--icon.ck-btn--sm {
    --ck-btn-h: 40px;
  }

  /* Микроанимация иконки-стрелки при наведении */
  .ck-btn > .ck-icon {
    transition: transform var(--ck-dur) var(--ck-ease);
  }

  .ck-btn--arrow:hover > .ck-icon {
    transform: translateX(2px);
  }

  .ck-btn--arrow-left:hover > .ck-icon {
    transform: translateX(-2px);
  }

  /* ======================================================================
     Узкие экраны: длинные подписи (особенно капсом) переносятся,
     а не растягивают страницу по горизонтали.
     ====================================================================== */
  @media (max-width: 480px) {
    .ck-btn {
      --ck-btn-px: var(--ck-space-5);

      max-width: 100%;
      white-space: normal;
      text-align: center;
      line-height: 1.2;
    }

    .ck-btn--caps {
      font-size: 0.875rem;
    }

    .ck-btn--caps.ck-btn--lg {
      font-size: 1rem;
    }
  }

/* ===== assets/css/components/badge.css ===== */
/* ==========================================================================
   badge.css — бейджи типов товара, чипы фильтров и #теги.

   Замеры по макетам:
     бейдж типа товара — pill, высота 28px, padding-inline 15px,
                         текст 12px semibold капсом с трекингом .04em
     чип фильтр-бара   — pill, высота 38px, padding-inline 20px, текст 15px
   Цвета текста на пастельных бейджах сняты пипеткой с макета.
   ========================================================================== */

  /* --- Бейдж типа товара ------------------------------------------------ */
  .ck-badge {
    --ck-badge-bg: var(--ck-surface);
    --ck-badge-fg: var(--ck-muted);

    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    min-height: 28px;
    padding-inline: var(--ck-space-4);
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-badge-bg);
    color: var(--ck-badge-fg);
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-semibold);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ck-badge--extension {
    --ck-badge-bg: var(--ck-pastel-lavender);
    --ck-badge-fg: var(--ck-pastel-lavender-text);
  }

  .ck-badge--widget {
    --ck-badge-bg: var(--ck-pastel-leaf);
    --ck-badge-fg: var(--ck-pastel-leaf-text);
  }

  .ck-badge--template {
    --ck-badge-bg: var(--ck-pastel-peach);
    --ck-badge-fg: var(--ck-pastel-peach-text);
  }

  .ck-badge--accent {
    --ck-badge-bg: var(--ck-lime);
    --ck-badge-fg: var(--ck-ink);
  }

  /* Бейдж поверх фотографии (карточки услуг «ОФОРМЛЕНИЕ») */
  .ck-badge--glass {
    --ck-badge-bg: rgba(255, 255, 255, 0.78);
    --ck-badge-fg: var(--ck-ink);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* --- Чип фильтра / таб ------------------------------------------------- */
  .ck-chip {
    --ck-chip-bg: var(--ck-white);
    --ck-chip-fg: var(--ck-ink);
    --ck-chip-border: var(--ck-line);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    min-height: 38px;
    padding-inline: var(--ck-space-5);
    border: var(--ck-border-width) solid var(--ck-chip-border);
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-chip-bg);
    color: var(--ck-chip-fg);
    font-family: var(--ck-font-body);
    font-size: 0.9375rem;
    font-weight: var(--ck-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--ck-dur-fast) var(--ck-ease),
      border-color var(--ck-dur-fast) var(--ck-ease),
      color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-chip:hover {
    --ck-chip-border: color-mix(in srgb, var(--ck-ink) 28%, transparent);
  }

  .ck-chip:focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: 2px;
  }

  .ck-chip.is-active,
  .ck-chip[aria-pressed='true'],
  .ck-chip[aria-current='true'] {
    --ck-chip-bg: var(--ck-blue);
    --ck-chip-fg: var(--ck-white);
    --ck-chip-border: var(--ck-blue);
  }

  .ck-chip--count {
    gap: var(--ck-space-1);
  }

  /* Счётчик внутри чипа («Все 12») */
  .ck-chip__count {
    font-size: var(--ck-fs-xs);
    opacity: 0.6;
  }

  /* --- #теги под заголовком карточки ------------------------------------ */
  .ck-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-1) var(--ck-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ck-tag {
    font-size: var(--ck-fs-sm);
    line-height: 1.4;
    color: var(--ck-muted-soft);
    text-decoration: none;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-tag:hover {
    color: var(--ck-blue);
    text-decoration: none;
  }

/* ===== assets/css/components/field.css ===== */
/* ==========================================================================
   field.css — поля формы: input, поиск, select, textarea, чекбоксы, радио.

   Замеры: поле поиска в фильтр-баре — pill высотой 38px;
   обычное поле ввода — 48px, радиус 12px.
   Состояния: hover / focus / error / disabled.
   ========================================================================== */

  /* --- Обёртка поля с лейблом, подсказкой и ошибкой --------------------- */
  .ck-field {
    display: grid;
    align-content: start;
    gap: var(--ck-space-2);
    min-width: 0;
  }

  .ck-field__label {
    font-size: var(--ck-fs-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-color-text);
  }

  .ck-field__hint {
    font-size: var(--ck-fs-xs);
    line-height: 1.4;
    color: var(--ck-color-muted);
  }

  .ck-field__error {
    display: none;
    font-size: var(--ck-fs-xs);
    line-height: 1.4;
    color: var(--ck-danger);
  }

  .ck-field.is-error .ck-field__error {
    display: block;
  }

  .ck-field.is-error .ck-field__hint {
    display: none;
  }

  /* --- Текстовые поля --------------------------------------------------- */
  .ck-input,
  .ck-select,
  .ck-textarea {
    --ck-input-h: 48px;
    --ck-input-bg: var(--ck-white);
    --ck-input-border: var(--ck-line);

    width: 100%;
    min-height: var(--ck-input-h);
    padding: var(--ck-space-3) var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-input-border);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-input-bg);
    color: var(--ck-color-text);
    font-family: var(--ck-font-body);
    font-size: 1rem;
    line-height: 1.3;
    transition:
      border-color var(--ck-dur-fast) var(--ck-ease),
      box-shadow var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-input::placeholder,
  .ck-textarea::placeholder {
    color: var(--ck-muted-soft);
  }

  .ck-input:hover,
  .ck-select:hover,
  .ck-textarea:hover {
    --ck-input-border: color-mix(in srgb, var(--ck-ink) 22%, transparent);
  }

  .ck-input:focus,
  .ck-select:focus,
  .ck-textarea:focus {
    outline: none;
    --ck-input-border: var(--ck-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-blue) 18%, transparent);
  }

  .ck-input:disabled,
  .ck-select:disabled,
  .ck-textarea:disabled {
    --ck-input-bg: var(--ck-surface);
    color: var(--ck-muted);
    cursor: not-allowed;
  }

  .ck-input[aria-invalid='true'],
  .ck-select[aria-invalid='true'],
  .ck-textarea[aria-invalid='true'] {
    --ck-input-border: var(--ck-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-danger) 14%, transparent);
  }

  /* Форма-пилюля (поиск, фильтры) и компактный размер */
  .ck-input--pill {
    border-radius: var(--ck-radius-pill);
  }

  .ck-input--sm,
  .ck-select--sm {
    --ck-input-h: 38px;
    padding-inline: var(--ck-space-4);
    font-size: var(--ck-fs-sm);
  }

  .ck-textarea {
    min-height: 120px;
    resize: vertical;
  }

  /* --- Поиск с иконкой справа (как в макете) ---------------------------- */
  .ck-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .ck-search .ck-input {
    padding-inline-end: 2.75rem;
  }

  .ck-search__icon {
    position: absolute;
    right: var(--ck-space-4);
    display: inline-flex;
    color: var(--ck-muted-soft);
    pointer-events: none;
  }

  /* --- Селект с иконкой-шевроном --------------------------------------- */
  .ck-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .ck-select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.5rem;
    cursor: pointer;
  }

  .ck-select-wrap > .ck-icon {
    position: absolute;
    right: var(--ck-space-3);
    color: var(--ck-muted);
    pointer-events: none;
  }

  /* --- Чекбокс и радио -------------------------------------------------- */
  .ck-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--ck-space-3);
    font-size: var(--ck-fs-body-sm);
    line-height: 1.4;
    cursor: pointer;
  }

  .ck-check__input {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    border: 2px solid var(--ck-line);
    border-radius: var(--ck-radius-xs);
    background-color: var(--ck-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    cursor: pointer;
    transition:
      background-color var(--ck-dur-fast) var(--ck-ease),
      border-color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-check__input[type='radio'] {
    border-radius: var(--ck-radius-pill);
  }

  .ck-check__input:hover {
    border-color: color-mix(in srgb, var(--ck-ink) 30%, transparent);
  }

  .ck-check__input:focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: 2px;
  }

  .ck-check__input:checked {
    border-color: var(--ck-blue);
    background-color: var(--ck-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E");
  }

  .ck-check__input[type='radio']:checked {
    background-color: var(--ck-white);
    border-color: var(--ck-blue);
    background-image: none;
    box-shadow: inset 0 0 0 5px var(--ck-blue);
  }

  .ck-check__input:disabled {
    background-color: var(--ck-surface);
    border-color: var(--ck-line);
    cursor: not-allowed;
  }

  .ck-check__text {
    padding-top: 1px;
  }

  /* --- Группа чипов-переключателей (табы фильтра) ----------------------- */
  .ck-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
  }

/* ===== assets/css/components/price.css ===== */
/* ==========================================================================
   price.css — цена товара: старая зачёркнутая + текущая синяя.

   В макете: старая цена 14px серым, текущая 20px Unbounded semibold синим.
   ========================================================================== */

  .ck-price {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    font-variant-numeric: tabular-nums;
  }

  .ck-price__old {
    font-size: var(--ck-fs-sm);
    line-height: 1;
    color: var(--ck-muted);
    text-decoration: line-through;
  }

  .ck-price__current {
    font-family: var(--ck-font-display);
    font-size: 1.25rem;
    font-weight: var(--ck-weight-semibold);
    line-height: 1;
    color: var(--ck-blue);
    white-space: nowrap;
  }

  .ck-price__currency {
    font-size: 0.8em;
  }

  .ck-price--lg .ck-price__current {
    font-size: 1.5rem;
  }

  .ck-price--lg .ck-price__old {
    font-size: var(--ck-fs-body-sm);
  }

  /* Цена без скидки — нейтральная */
  .ck-price--plain .ck-price__current {
    color: var(--ck-color-text);
  }

/* ===== assets/css/components/stat.css ===== */
/* ==========================================================================
   stat.css — цифра + подпись (160+ проектов, 5 лет, 400+ работ).

   В hero цифры белые (цвет текста контекста), в резюме — синие:
   для этого модификатор .ck-stat--accent.
   ========================================================================== */

  .ck-stat {
    display: grid;
    gap: var(--ck-space-1);
  }

  .ck-stat__value {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h1);
    font-weight: var(--ck-weight-bold);
    line-height: 1;
    color: var(--ck-stat-value-color, var(--ck-color-text));
    font-variant-numeric: tabular-nums;
  }

  .ck-stat__label {
    font-size: var(--ck-fs-sm);
    line-height: 1.35;
    color: var(--ck-color-muted);
  }

  .ck-stat--accent {
    --ck-stat-value-color: var(--ck-color-primary);
  }

  .ck-stat--lg .ck-stat__value {
    font-size: var(--ck-fs-display);
  }

  /* Горизонтальная компоновка: цифра и подпись в одну строку */
  .ck-stat--inline {
    grid-auto-flow: column;
    align-items: baseline;
    justify-content: start;
    gap: var(--ck-space-2);
  }

/* ===== assets/css/components/avatar.css ===== */
/* ==========================================================================
   avatar.css — аватары: в отзывах, в блоке «Команда», в шапке профиля.

   Все размеры кратны 4px; изображение всегда объект-фит, чтобы
   WP-медиа с srcset не плющило пропорции.
   ========================================================================== */

  .ck-avatar {
    --ck-avatar-size: 48px;

    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--ck-avatar-size);
    height: var(--ck-avatar-size);
    overflow: hidden;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-surface);
    color: var(--ck-muted);
    font-size: var(--ck-fs-sm);
    font-weight: var(--ck-weight-semibold);
    text-transform: uppercase;
  }

  .ck-avatar > img,
  .ck-avatar > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ck-avatar--sm {
    --ck-avatar-size: 32px;
  }

  .ck-avatar--md {
    --ck-avatar-size: 48px;
  }

  .ck-avatar--lg {
    --ck-avatar-size: 72px;
  }

  .ck-avatar--xl {
    --ck-avatar-size: 120px;
  }

  /* Группа аватаров внахлёст (команда проекта) */
  .ck-avatar-group {
    display: inline-flex;
    align-items: center;
  }

  .ck-avatar-group > .ck-avatar + .ck-avatar {
    margin-left: -12px;
    box-shadow: 0 0 0 2px var(--ck-color-bg);
  }

  /* Бейдж-иконка поверх аватара (например, «клиент») */
  .ck-avatar__dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-success);
    box-shadow: 0 0 0 2px var(--ck-color-bg);
  }

/* ===== assets/css/components/logo.css ===== */
/* ==========================================================================
   logo.css — логотип-слово «chusovskoy» с лаймовой точкой.

   Цвет наследуется (currentColor), поэтому логотип работает и на белом,
   и на синем фоне без отдельных модификаторов.
   ========================================================================== */

  .ck-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.18em;
    font-family: var(--ck-font-display);
    font-size: 1.375rem;
    font-weight: var(--ck-weight-semibold);
    line-height: 1;
    letter-spacing: -0.01em;
    color: currentColor;
    text-decoration: none;
    white-space: nowrap;
  }

  .ck-logo:hover {
    text-decoration: none;
  }

  .ck-logo__mark {
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background-color: var(--ck-lime);
  }

  .ck-logo--sm {
    font-size: 1.125rem;
  }

  .ck-logo--lg {
    font-size: 1.75rem;
  }

  /* Логотип-иконка без текста (мобильная шапка, фавикон-подобные места) */
  .ck-logo--mark-only .ck-logo__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

/* ===== assets/css/components/card.css ===== */
/* ==========================================================================
   card.css — карточки: товар, услуга, проект, тёмный блок преимуществ,
   базовая панель.

   Замеры по макетам:
     карточка товара — 380px в сетке с зазором 30px, медиа 238px,
     радиус медиа 18px, бейдж в правом верхнем углу с отступом 10px,
     контентная часть — padding 20px.
   ========================================================================== */

  /* --- Базовая поверхность ---------------------------------------------- */
  .ck-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: var(--ck-border-width) solid var(--ck-color-border);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-color-bg);
    color: var(--ck-color-text);
  }

  /* Серая панель-подложка (табы, описание товара) */
  .ck-panel {
    padding: var(--ck-space-8);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-surface);
  }

  @media (max-width: 640px) {
    .ck-panel {
      padding: var(--ck-space-5);
    }
  }

  /* --- Карточка товара --------------------------------------------------- */
  .ck-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: var(--ck-border-width) solid var(--ck-line);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-white);
    transition:
      border-color var(--ck-dur) var(--ck-ease),
      box-shadow var(--ck-dur) var(--ck-ease),
      transform var(--ck-dur) var(--ck-ease);
  }

  .ck-product-card:hover {
    border-color: transparent;
    box-shadow: var(--ck-shadow-lift);
    transform: translateY(-2px);
  }

  .ck-product-card__media {
    position: relative;
    display: block;
    aspect-ratio: var(--ck-aspect-card);
    overflow: hidden;
    background-color: var(--ck-pastel-mint);
  }

  .ck-product-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ck-dur-slow) var(--ck-ease);
  }

  .ck-product-card:hover .ck-product-card__media > img {
    transform: scale(1.03);
  }

  .ck-product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .ck-product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--ck-space-3);
    padding: var(--ck-space-5);
  }

  .ck-product-card__title {
    font-size: var(--ck-fs-h4);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.3;
  }

  .ck-product-card__title a {
    color: inherit;
  }

  .ck-product-card__title a:hover {
    color: var(--ck-blue);
    text-decoration: none;
  }

  .ck-product-card__tags {
    margin-top: calc(var(--ck-space-1) * -1);
  }

  .ck-product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin-top: auto;
    padding-top: var(--ck-space-3);
  }

  .ck-product-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font-size: var(--ck-fs-sm);
    color: var(--ck-muted);
    white-space: nowrap;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-product-card__link:hover {
    color: var(--ck-blue);
    text-decoration: none;
  }
  /* --- Карточка услуги (лендинг, «Оформление личного кабинета») ---------- */
  .ck-service-card {
    display: flex;
    flex-direction: column;
    gap: var(--ck-space-3);
    padding: var(--ck-space-5);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-white);
    color: var(--ck-ink);
    box-shadow: var(--ck-shadow-card);
  }

  .ck-service-card__tag {
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ck-muted);
  }

  .ck-service-card__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h5);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.25;
  }

  .ck-service-card__media {
    margin-top: auto;
    overflow: hidden;
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-surface);
  }

  .ck-service-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Карточка проекта (портфолио) ------------------------------------- */
  .ck-project-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ck-grid-gap);
    align-items: stretch;
  }

  .ck-project-card__media {
    overflow: hidden;
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-pastel-peach);
  }

  .ck-project-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ck-project-card__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ck-space-4);
    padding: var(--ck-space-8);
    border: var(--ck-border-width) solid var(--ck-color-border);
    border-radius: var(--ck-radius-lg);
    background-color: transparent;
  }

  .ck-project-card__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: var(--ck-fs-body-sm);
    line-height: var(--ck-lh-body);
    color: var(--ck-color-muted);
  }

  .ck-project-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-5);
    margin-top: auto;
    padding-top: var(--ck-space-2);
  }

  .ck-project-card__stack {
    display: grid;
    gap: 2px;
    font-size: var(--ck-fs-xs);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ck-color-muted);
  }

  /* Медиа справа (чередование в портфолио) */
  .ck-project-card--reverse .ck-project-card__media {
    order: 2;
  }

  @media (max-width: 900px) {
    .ck-project-card {
      grid-template-columns: minmax(0, 1fr);
    }

    .ck-project-card--reverse .ck-project-card__media {
      order: 0;
    }
  }

  /* --- Тёмный блок преимуществ ----------------------------------------- */
  .ck-feature-card {
    display: grid;
    gap: var(--ck-space-6);
    padding: var(--ck-space-8);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-ink);
    color: var(--ck-white);
  }

  .ck-feature {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--ck-space-4);
    align-items: start;
  }

  .ck-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ck-radius-sm);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--ck-lime);
  }

  .ck-feature__title {
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-bold);
    line-height: 1.3;
  }

  .ck-feature__text {
    margin-top: 2px;
    font-size: var(--ck-fs-xs);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.64);
  }

  /* ======================================================================
     Карточки-ссылки: не подчёркиваем весь текст при наведении.

     Базовый слой задаёт `a:hover { text-decoration: underline }`; на карточке,
     которая целиком является ссылкой, это подчёркивает все строки. Отменить
     наследованное подчёркивание у потомков нельзя, поэтому гасим его на самом
     якоре — в обычном состоянии и при наведении.
     ====================================================================== */
  .ck-product-card,
  .ck-product-card:hover,
  .ck-product-card__media,
  .ck-product-card__media:hover,
  .ck-service-card,
  .ck-service-card:hover,
  .ck-project-card__media,
  .ck-project-card__media:hover {
    text-decoration: none;
  }

  /* Заголовок проекта-ссылка: цвет наследуется, подчёркивания нет.
     Кнопки внутри панели не трогаем — у них свой цвет из .ck-btn--*  */
  .ck-project-card__panel a:not(.ck-btn) {
    color: inherit;
    text-decoration: none;
  }

  .ck-project-card__panel a:not(.ck-btn):hover {
    color: var(--ck-blue);
    text-decoration: none;
  }

/* ===== assets/css/components/accordion.css ===== */
/* ==========================================================================
   accordion.css — FAQ-аккордеон.

   Состояние задаётся классом .is-open на .ck-accordion__item и
   aria-expanded на кнопке (дублируется JS для доступности).
   Варианты: на белом фоне (светлые строки) и на синем (.ck-accordion--on-blue,
   где раскрытый пункт заливается лаймом — как в макете).
   ========================================================================== */

  .ck-accordion {
    display: grid;
    gap: var(--ck-space-3);
  }

  .ck-accordion__item {
    overflow: hidden;
    border: var(--ck-border-width) solid var(--ck-line);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-surface);
    color: var(--ck-ink);
    transition:
      background-color var(--ck-dur) var(--ck-ease),
      border-color var(--ck-dur) var(--ck-ease);
  }

  /* На синем фоне обводка не нужна: плашки отделяются стеклом */
  .ck-accordion--on-blue .ck-accordion__item {
    border-color: transparent;
  }

  .ck-accordion__heading {
    margin: 0;
    font: inherit;
  }

  .ck-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-4);
    width: 100%;
    min-height: 64px;
    padding: var(--ck-space-4) var(--ck-space-6);
    color: inherit;
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-body);
    font-weight: var(--ck-weight-medium);
    line-height: 1.3;
    text-align: left;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-accordion__trigger:hover {
    color: var(--ck-blue);
  }

  .ck-accordion__trigger:focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: -3px;
    border-radius: var(--ck-radius-md);
  }

  .ck-accordion__icons {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    color: currentColor;
  }

  .ck-accordion__icon-minus {
    display: none;
  }

  .ck-accordion__item.is-open .ck-accordion__icon-plus {
    display: none;
  }

  .ck-accordion__item.is-open .ck-accordion__icon-minus {
    display: inline-flex;
  }

  /* Панель: скрыта атрибутом hidden, открывается классом .is-open */
  .ck-accordion__panel {
    padding: 0 var(--ck-space-6) var(--ck-space-6);
    font-size: var(--ck-fs-body-sm);
    line-height: var(--ck-lh-body);
    color: inherit;
  }

  .ck-accordion__panel[hidden] {
    display: none;
  }

  /* --- Вариант на синем фоне -------------------------------------------- */
  .ck-accordion--on-blue .ck-accordion__item {
    background-color: var(--ck-glass-1);
    color: var(--ck-white);
  }

  .ck-accordion--on-blue .ck-accordion__trigger:hover {
    color: var(--ck-lime);
  }

  .ck-accordion--on-blue .ck-accordion__item.is-open {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-accordion--on-blue .ck-accordion__item.is-open .ck-accordion__trigger:hover {
    color: var(--ck-ink);
  }

  /* --- Компактный вариант (внутри панели, как на странице товара) -------- */
  .ck-accordion--compact .ck-accordion__item {
    background-color: var(--ck-surface);
  }

  .ck-accordion--compact .ck-accordion__trigger {
    min-height: 56px;
    padding: var(--ck-space-3) var(--ck-space-5);
    font-size: var(--ck-fs-body-sm);
  }

  .ck-accordion--compact .ck-accordion__panel {
    padding: 0 var(--ck-space-5) var(--ck-space-4);
  }

/* ===== assets/css/components/tabs.css ===== */
/* ==========================================================================
   tabs.css — табы внутри серой панели («Возможности / Установка»).

   Роли и aria-атрибуты переключает JS (modules/tabs.js).
   ========================================================================== */

  .ck-tabs {
    display: grid;
    gap: var(--ck-space-6);
  }

  .ck-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
  }

  .ck-tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: var(--ck-space-2) var(--ck-space-4);
    border-radius: var(--ck-radius-sm);
    background-color: transparent;
    color: var(--ck-muted);
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-sm);
    font-weight: var(--ck-weight-medium);
    line-height: 1;
    transition:
      background-color var(--ck-dur-fast) var(--ck-ease),
      color var(--ck-dur-fast) var(--ck-ease),
      box-shadow var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-tabs__tab:hover {
    color: var(--ck-ink);
  }

  .ck-tabs__tab:focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: 2px;
  }

  .ck-tabs__tab.is-active,
  .ck-tabs__tab[aria-selected='true'] {
    background-color: var(--ck-white);
    color: var(--ck-ink);
    box-shadow: var(--ck-shadow-sm);
  }

  .ck-tabs__panel {
    font-size: var(--ck-fs-body-sm);
    line-height: var(--ck-lh-body);
    color: var(--ck-color-text);
  }

  .ck-tabs__panel[hidden] {
    display: none;
  }

  .ck-tabs__panel > :first-child {
    margin-top: 0;
  }

  .ck-tabs__panel > :last-child {
    margin-bottom: 0;
  }

  /* Табы на синем фоне (переключатель разделов внутри секции) */
  .ck-tabs--on-blue .ck-tabs__tab {
    color: rgba(255, 255, 255, 0.72);
  }

  .ck-tabs--on-blue .ck-tabs__tab:hover {
    color: var(--ck-white);
  }

  .ck-tabs--on-blue .ck-tabs__tab.is-active,
  .ck-tabs--on-blue .ck-tabs__tab[aria-selected='true'] {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
    box-shadow: none;
  }

/* ===== assets/css/components/slider.css ===== */
/* ==========================================================================
   slider.css — слайдер отзывов (и любая карусель одного слайда).

   Разметка + JS-хуки:
     .ck-slider[data-slider]
       .ck-slider__viewport
         .ck-slider__track  (flex, transform: translateX)
           .ck-slider__slide
       .ck-slider__nav
         button[data-slider-prev] / button[data-slider-next]
       .ck-slider__dots[data-slider-dots]  (кнопки создаёт JS)

   Без JS слайды всё равно видны (overflow-x: auto как graceful fallback).
   ========================================================================== */

  .ck-slider {
    position: relative;
    display: grid;
    gap: var(--ck-space-6);
  }

  .ck-slider__viewport {
    overflow: hidden;
    margin-inline: calc(var(--ck-space-2) * -1);
    padding-inline: var(--ck-space-2);
  }

  .ck-slider__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform var(--ck-dur-slow) var(--ck-ease);
    will-change: transform;
  }

  .ck-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
  }

  /* --- Карточка отзыва --------------------------------------------------- */
  .ck-testimonial {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--ck-space-8);
    align-items: center;
    padding: var(--ck-space-8);
    border-radius: var(--ck-radius-xl);
    background-color: var(--ck-surface);
  }

  .ck-testimonial__media {
    position: relative;
  }

  .ck-testimonial__avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-white);
  }

  .ck-testimonial__avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ck-testimonial__quote {
    position: absolute;
    top: 4px;
    left: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-testimonial__body {
    display: grid;
    gap: var(--ck-space-4);
  }

  .ck-testimonial__text {
    font-size: var(--ck-fs-body-sm);
    line-height: var(--ck-lh-body);
    color: var(--ck-color-text);
  }

  .ck-testimonial__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-4);
  }

  .ck-testimonial__author {
    display: grid;
    gap: 2px;
  }

  .ck-testimonial__name {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h6);
    font-weight: var(--ck-weight-semibold);
  }

  .ck-testimonial__role {
    font-size: var(--ck-fs-sm);
    color: var(--ck-muted);
  }

  .ck-testimonial__footer .ck-btn {
    margin-left: auto;
  }

  @media (max-width: 768px) {
    .ck-testimonial {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ck-space-5);
      padding: var(--ck-space-6);
    }

    .ck-testimonial__media {
      width: 128px;
    }

    .ck-testimonial__footer .ck-btn {
      margin-left: 0;
    }
  }

  /* --- Навигация --------------------------------------------------------- */
  .ck-slider__nav {
    display: flex;
    gap: var(--ck-space-2);
  }

  .ck-slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--ck-space-2);
  }

  .ck-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-color-border);
    cursor: pointer;
    transition:
      background-color var(--ck-dur-fast) var(--ck-ease),
      width var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-slider__dot.is-active {
    width: 24px;
    background-color: var(--ck-blue);
  }

  .ck-slider__dot:focus-visible {
    outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
    outline-offset: 3px;
  }

  /* Стрелки по бокам (вариант с абсолютным позиционированием) */
  .ck-slider--overlay .ck-slider__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .ck-slider--overlay .ck-slider__nav .ck-btn {
    pointer-events: auto;
  }

/* ===== assets/css/components/header.css ===== */
/* ==========================================================================
   header.css — шапка: синяя «плашка» 84px с радиусом 12 (замер по макету).

   Варианты: обычная (в потоке поверх синей секции) и .ck-header--sticky.
   Мобильная навигация: бургер + выпадающая панель (.ck-header__nav.is-open),
   состояние переключает JS (modules/mobile-nav.js).
   ========================================================================== */

  .ck-header {
    position: relative;
    z-index: var(--ck-z-header);
    padding-block-start: var(--ck-space-12);
  }

  .ck-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ck-space-6);
    min-height: 84px;
    padding-inline: var(--ck-space-8);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-blue);
    color: var(--ck-white);
  }

  .ck-header__nav {
    display: flex;
    align-items: center;
    gap: var(--ck-space-6);
    margin-inline-start: auto;
  }

  .ck-header__link {
    font-size: 0.9375rem;
    font-weight: var(--ck-weight-medium);
    line-height: 1;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-header__link:hover,
  .ck-header__link[aria-current='page'] {
    color: var(--ck-white);
    text-decoration: none;
  }

  .ck-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ck-space-4);
    margin-inline-start: var(--ck-space-8);
  }

  .ck-header__phone {
    font-size: 0.9375rem;
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-white);
    white-space: nowrap;
  }

  /* Корзина с счётчиком */
  .ck-header__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-glass-2);
    color: var(--ck-white);
    transition: background-color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-header__cart:hover {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-header__cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-white);
    color: var(--ck-blue);
    font-size: 10px;
    font-weight: var(--ck-weight-bold);
    line-height: 1;
  }

  /* Пульс при добавлении товара (класс ставит cart.js) */
  .ck-header__cart.is-pulse .ck-header__cart-count {
    animation: ck-cart-pulse var(--ck-dur-slow) var(--ck-ease);
  }

  @keyframes ck-cart-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); }
    100% { transform: scale(1); }
  }

  /* Бургер */
  .ck-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-glass-2);
    color: var(--ck-white);
  }

  .ck-header__burger:hover {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  /* --- Липкая шапка ------------------------------------------------------ */
  .ck-header--sticky {
    position: sticky;
    top: 0;
    padding-block: var(--ck-space-3);
    background-color: var(--ck-white);
    box-shadow: 0 1px 0 var(--ck-line);
  }

  /* Состояние «страница прокручена» (класс ставит sticky-header.js) */
  .ck-header.is-scrolled .ck-header__bar {
    box-shadow: var(--ck-shadow-card);
  }

  .ck-header.is-scrolled {
    padding-block-start: var(--ck-space-2);
  }

  /* --- Мобильная версия -------------------------------------------------- */
  @media (max-width: 1023px) {
    .ck-header {
      padding-block-start: var(--ck-space-4);
    }

    .ck-header__bar {
      gap: var(--ck-space-4);
      min-height: 64px;
      padding-inline: var(--ck-space-4);
    }

    .ck-header__nav {
      display: none;
    }

    .ck-header__nav.is-open {
      display: grid;
      gap: var(--ck-space-1);
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      padding: var(--ck-space-4);
      border-radius: var(--ck-radius-md);
      background-color: var(--ck-blue);
      box-shadow: var(--ck-shadow-lift);
    }

    .ck-header__nav.is-open .ck-header__link {
      padding: var(--ck-space-3) var(--ck-space-4);
      border-radius: var(--ck-radius-sm);
      font-size: 1rem;
    }

    .ck-header__nav.is-open .ck-header__link:hover {
      background-color: var(--ck-glass-2);
    }

    .ck-header__actions {
      margin-inline-start: auto;
      gap: var(--ck-space-2);
    }

    .ck-header__phone {
      display: none;
    }

    .ck-header__actions .ck-btn {
      display: none;
    }

    .ck-header__burger {
      display: inline-flex;
    }
  }

/* ===== assets/css/components/footer.css ===== */
/* ==========================================================================
   footer.css — подвал: серая панель с логотипом, соцсетями, реквизитами
   и юридическими ссылками (как на страницах магазина).

   Не путать с футером темы: это компонент кита, который в WordPress станет
   template-parts/footer/site-footer.php.
   ========================================================================== */

  .ck-footer {
    padding-block: var(--ck-space-10) var(--ck-space-8);
  }

  .ck-footer__panel {
    display: grid;
    gap: var(--ck-space-8);
    padding: var(--ck-space-8);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-surface);
    color: var(--ck-ink);
  }

  .ck-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ck-space-8);
  }

  .ck-footer__brand {
    display: grid;
    gap: var(--ck-space-4);
    justify-items: start;
  }

  .ck-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
  }

  .ck-footer__links {
    display: grid;
    gap: var(--ck-space-2);
    justify-items: start;
    text-align: left;
  }

  .ck-footer__link {
    font-size: var(--ck-fs-sm);
    line-height: 1.5;
    color: var(--ck-ink);
  }

  .ck-footer__link:hover {
    color: var(--ck-blue);
    text-decoration: none;
  }

  .ck-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ck-space-4);
    padding-top: var(--ck-space-6);
    border-top: var(--ck-border-width) solid var(--ck-line);
  }

  .ck-footer__legal {
    display: grid;
    gap: 2px;
    font-size: var(--ck-fs-sm);
    line-height: 1.5;
    color: var(--ck-muted);
  }

  .ck-footer__meta {
    display: grid;
    gap: var(--ck-space-2);
    font-size: var(--ck-fs-sm);
    color: var(--ck-muted);
    text-align: right;
  }

  .ck-footer__meta a {
    color: var(--ck-muted);
  }

  .ck-footer__meta a:hover {
    color: var(--ck-blue);
    text-decoration: none;
  }

  /* Логотип в подвале — синий (как на макете магазина) */
  .ck-footer .ck-logo {
    color: var(--ck-blue);
  }

  @media (max-width: 768px) {
    .ck-footer__panel {
      padding: var(--ck-space-5);
    }

    .ck-footer__bottom,
    .ck-footer__meta {
      text-align: left;
    }
  }

/* ===== assets/css/components/hero.css ===== */
/* ==========================================================================
   hero.css — hero лендинга: текстовая колонка + портрет + blob + статистика.

   Замеры по макету: контейнер 1200, текстовая колонка ≈ 690px,
   портрет 464 × 533 справа, между блоками 192px (96+96).
   Фон — синий: используйте вместе с .ck-on-blue.
   ========================================================================== */

  .ck-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--ck-space-8);
    align-items: center;
    padding-block: var(--ck-space-14) var(--ck-space-16);
    overflow: hidden;
  }

  .ck-hero__body {
    position: relative;
    z-index: 1;
    display: grid;
    /* Явный трек: без него implicit auto-колонка раздувается до max-content
       и текст уезжает за контейнер (клипается overflow: hidden у .ck-hero) */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ck-space-6);
    max-width: 700px;
  }

  .ck-hero__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-display);
    font-weight: var(--ck-weight-bold);
    line-height: var(--ck-lh-display);
    letter-spacing: var(--ck-ls-display);
    text-transform: uppercase;
    overflow-wrap: break-word;
  }

  .ck-hero__title em {
    font-style: normal;
    color: var(--ck-lime);
  }

  .ck-hero__lead {
    max-width: 46ch;
    font-size: var(--ck-fs-lead);
    line-height: 1.6;
    color: var(--ck-color-muted);
  }

  .ck-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-3);
  }

  .ck-hero__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ck-space-10);
  }

  /* --- Медиа ------------------------------------------------------------- */
  .ck-hero__media {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 464px;
  }

  .ck-hero__portrait {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 464 / 533;
    border-radius: var(--ck-radius-xl);
    background-color: var(--ck-pastel-cream);
  }

  .ck-hero__portrait > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Органический блоб за портретом (лайм, как в макете) */
  .ck-hero__blob {
    position: absolute;
    z-index: 0;
    top: -6%;
    right: 8%;
    width: 96%;
    height: 108%;
    background-color: var(--ck-lime);
    border-radius: 52% 48% 61% 39% / 47% 56% 44% 53%;
    opacity: 0.95;
    pointer-events: none;
  }

  .ck-hero__blob--blue {
    top: auto;
    right: auto;
    bottom: -18%;
    left: -24%;
    width: 70%;
    height: 70%;
    background-color: var(--ck-white);
    opacity: 0.12;
    border-radius: 62% 38% 45% 55% / 55% 45% 55% 45%;
  }

  /* --- Адаптив ----------------------------------------------------------- */
  @media (max-width: 1023px) {
    .ck-hero {
      grid-template-columns: minmax(0, 1fr);
      padding-block: var(--ck-space-8) var(--ck-space-12);
    }

    .ck-hero__media {
      justify-self: stretch;
      max-width: none;
    }

    .ck-hero__portrait {
      aspect-ratio: 16 / 10;
    }

    .ck-hero__stats {
      gap: var(--ck-space-8);
    }
  }

  @media (max-width: 640px) {
    .ck-hero__blob {
      top: -4%;
      right: 0;
      width: 100%;
    }

    /* На телефоне жёсткие переносы из макета мешают: пусть текст течёт сам */
    .ck-hero__title br {
      display: none;
    }
  }

/* ===== assets/css/components/prose.css ===== */
/* ==========================================================================
   prose.css — типографика длинного контента: статьи, описания, уроки.

   В макетах лонгрида нет, поэтому правила спроектированы по замерам
   контентной страницы кейса: колонка ≈ 640px, body 16px/20px.
   Для чтения берём чуть свободнее: 17px / 1.7 и меру 68ch.

   Применение: <div class="ck-prose"> …HTML контента… </div>
   В WordPress это класс для .entry-content.
   ========================================================================== */

  .ck-prose {
    --ck-prose-measure: 68ch;
    --ck-prose-gap: 1.15em;

    max-width: var(--ck-prose-measure);
    color: var(--ck-color-text);
    font-family: var(--ck-font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .ck-prose--wide {
    max-width: none;
  }

  /* Заголовки: секции текста, а не «плакаты» — без капса */
  .ck-prose h2,
  .ck-prose h3,
  .ck-prose h4 {
    margin-block: 1.8em 0.6em;
    font-family: var(--ck-font-display);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    scroll-margin-top: 96px;
  }

  .ck-prose h2 {
    font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  }

  .ck-prose h3 {
    font-size: 1.25rem;
  }

  .ck-prose h4 {
    font-size: 1.0625rem;
  }

  .ck-prose > :first-child {
    margin-top: 0;
  }

  .ck-prose p {
    margin-block: 0 var(--ck-prose-gap);
  }

  .ck-prose a {
    color: var(--ck-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-prose a:hover {
    color: var(--ck-blue-hover);
    text-decoration-thickness: 2px;
  }

  /* Списки: синий маркер вместо точки.
     Маркеры рисуем через ::before, а не ::marker: у нативного маркера
     нельзя задать отступ до текста, и он «прилипает» к первой букве. */
  .ck-prose ul {
    margin-block: 0 var(--ck-prose-gap);
    padding-left: 0;
    list-style: none;
  }

  .ck-prose ul > li {
    position: relative;
    padding-left: 1.5em;
  }

  .ck-prose ul > li::before {
    content: '▪';
    position: absolute;
    left: 0.15em;
    color: var(--ck-blue);
    line-height: inherit;
  }

  .ck-prose ol {
    margin-block: 0 var(--ck-prose-gap);
    padding-left: 1.35em;
  }

  .ck-prose li + li {
    margin-top: 0.45em;
  }

  .ck-prose ol > li::marker {
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-blue);
  }

  .ck-prose strong,
  .ck-prose b {
    font-weight: var(--ck-weight-bold);
  }

  /* Цитата: лаймовая полоса слева */
  .ck-prose blockquote {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 1.25em;
    border-left: 3px solid var(--ck-lime);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ck-color-text);
  }

  .ck-prose blockquote > :last-child {
    margin-bottom: 0;
  }

  .ck-prose blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-size: var(--ck-fs-sm);
    font-style: normal;
    color: var(--ck-muted);
  }

  /* Инлайн-код */
  .ck-prose code {
    padding: 0.15em 0.4em;
    border-radius: var(--ck-radius-xs);
    background-color: var(--ck-surface);
    font-family: var(--ck-font-mono);
    font-size: 0.9em;
  }
  /* Блок кода */
  .ck-prose pre {
    overflow-x: auto;
    margin: 1.4em 0;
    padding: var(--ck-space-5);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-ink);
    color: var(--ck-white);
    font-family: var(--ck-font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .ck-prose pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
  }

  /* Таблица */
  .ck-prose table {
    width: 100%;
    margin: 1.5em 0;
    border: var(--ck-border-width) solid var(--ck-line);
    border-radius: var(--ck-radius-md);
    font-size: var(--ck-fs-body-sm);
  }

  .ck-prose thead th {
    background-color: var(--ck-surface);
    font-weight: var(--ck-weight-semibold);
    text-align: left;
  }

  .ck-prose th,
  .ck-prose td {
    padding: var(--ck-space-3) var(--ck-space-4);
    border-bottom: var(--ck-border-width) solid var(--ck-line);
    vertical-align: top;
  }

  .ck-prose tbody tr:last-child td {
    border-bottom: 0;
  }

  /* Изображение с подписью */
  .ck-prose figure {
    margin: 1.6em 0;
  }

  .ck-prose figure > img,
  .ck-prose .ck-media {
    width: 100%;
    border-radius: var(--ck-radius-md);
  }

  .ck-prose figcaption {
    margin-top: var(--ck-space-2);
    font-size: var(--ck-fs-sm);
    line-height: 1.5;
    color: var(--ck-muted);
  }

  .ck-prose hr {
    height: 1px;
    margin: 2.2em 0;
    border: 0;
    background-color: var(--ck-line);
  }

  /* --- Врезка-выноска ---------------------------------------------------- */
  .ck-callout {
    --ck-callout-bg: var(--ck-surface);
    --ck-callout-accent: var(--ck-blue);

    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--ck-space-3);
    margin: 1.6em 0;
    padding: var(--ck-space-5);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-callout-bg);
    font-size: var(--ck-fs-body-sm);
    line-height: 1.6;
  }

  .ck-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--ck-radius-xs);
    background-color: var(--ck-callout-accent);
    color: var(--ck-white);
  }

  .ck-callout__title {
    display: block;
    margin-bottom: 0.35em;
    font-weight: var(--ck-weight-bold);
  }

  .ck-callout p {
    margin: 0;
  }

  .ck-callout--tip {
    --ck-callout-bg: color-mix(in srgb, var(--ck-lime) 18%, var(--ck-white));
    --ck-callout-accent: var(--ck-ink);
  }

  .ck-callout--warn {
    --ck-callout-bg: var(--ck-danger-soft);
    --ck-callout-accent: var(--ck-danger);
  }

  /* --- Оглавление статьи ------------------------------------------------- */
  .ck-toc {
    margin: 0 0 var(--ck-space-8);
    padding: var(--ck-space-5) var(--ck-space-6);
    border-left: 3px solid var(--ck-lime);
    border-radius: 0 var(--ck-radius-md) var(--ck-radius-md) 0;
    background-color: var(--ck-surface);
    font-size: var(--ck-fs-body-sm);
  }

  .ck-toc__title {
    display: block;
    margin-bottom: var(--ck-space-3);
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ck-muted);
  }

  .ck-toc ol {
    margin: 0;
    padding-left: 1.1em;
    color: var(--ck-muted);
  }

  .ck-toc a {
    color: var(--ck-ink);
    text-decoration: none;
  }

  .ck-toc a:hover {
    color: var(--ck-blue);
    text-decoration: underline;
  }

/* ===== assets/css/components/media-blocks.css ===== */
/* ==========================================================================
   media-blocks.css — медиа и учебные блоки: видео, встраиваемые фреймы,
   галерея, прогресс, шапка урока/статьи, файлы, ссылки, шаги.

   Спроектировано под контент онлайн-школы: урок с видео, материалы,
   инструкции; статьи блога; кейсы с галереей.
   ========================================================================== */

  /* --- Видео 16:9 с постером и лаймовой кнопкой play --------------------- */
  .ck-video {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-ink);
  }

  .ck-video > img,
  .ck-video > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity var(--ck-dur) var(--ck-ease);
  }

  .ck-video:hover > img {
    opacity: 0.85;
  }

  /* Готовое встраивание (YouTube/VK/iframe) */
  .ck-video > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .ck-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-lime);
    color: var(--ck-ink);
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 32px rgba(22, 22, 22, 0.28);
    transition: transform var(--ck-dur) var(--ck-ease), background-color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-video:hover .ck-video__play {
    transform: translate(-50%, -50%) scale(1.06);
    background-color: var(--ck-lime-hover);
  }

  .ck-video__duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: var(--ck-radius-pill);
    background-color: rgba(22, 22, 22, 0.72);
    color: var(--ck-white);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .ck-video-caption {
    margin-top: var(--ck-space-3);
    font-size: var(--ck-fs-sm);
    line-height: 1.5;
    color: var(--ck-muted);
  }

  /* --- Универсальный встраиваемый блок (карта, презентация) -------------- */
  .ck-embed {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-surface);
  }

  .ck-embed > iframe,
  .ck-embed > img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }

  .ck-embed--map {
    aspect-ratio: 21 / 9;
  }

  /* --- Галерея ----------------------------------------------------------- */
  .ck-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .ck-gallery > * {
    overflow: hidden;
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-surface);
  }

  .ck-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ck-dur-slow) var(--ck-ease);
  }

  .ck-gallery a:hover img {
    transform: scale(1.03);
  }

  .ck-gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Мозаика кейса: чередование широких и узких плиток */
  .ck-gallery--masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 180px;
    grid-auto-flow: dense;
  }

  .ck-gallery--masonry > * {
    min-height: 0;
  }

  .ck-gallery--masonry > :nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .ck-gallery--masonry > :nth-child(6n + 4) {
    grid-row: span 2;
  }

  @media (max-width: 768px) {
    .ck-gallery,
    .ck-gallery--2,
    .ck-gallery--masonry {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 140px;
    }

    .ck-gallery--masonry > :nth-child(6n + 1) {
      grid-column: span 2;
      grid-row: span 1;
    }
  }

  /* --- Прогресс (курс, урок) -------------------------------------------- */
  .ck-progress {
    display: grid;
    gap: var(--ck-space-2);
  }

  .ck-progress__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ck-space-3);
    font-size: var(--ck-fs-sm);
    color: var(--ck-color-muted);
  }

  .ck-progress__value {
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-color-text);
    font-variant-numeric: tabular-nums;
  }

  .ck-progress__track {
    overflow: hidden;
    height: 8px;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-surface-strong);
  }

  .ck-progress__bar {
    --ck-progress: 0%;

    width: var(--ck-progress);
    height: 100%;
    border-radius: inherit;
    background-color: var(--ck-lime);
    transition: width var(--ck-dur-slow) var(--ck-ease);
  }

  /* --- Шапка урока ------------------------------------------------------- */
  .ck-lesson-head {
    display: grid;
    gap: var(--ck-space-4);
  }

  .ck-lesson-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-3);
    font-size: var(--ck-fs-sm);
    color: var(--ck-color-muted);
  }

  .ck-lesson-head__meta > * + *::before {
    content: '·';
    margin-right: var(--ck-space-3);
    color: var(--ck-color-border);
  }

  .ck-lesson-head__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h1);
    font-weight: var(--ck-weight-bold);
    line-height: 1.05;
    text-transform: uppercase;
  }

  .ck-lesson-head__lead {
    max-width: 62ch;
    font-size: var(--ck-fs-lead);
    line-height: 1.6;
    color: var(--ck-color-muted);
  }
  /* --- Файлы для скачивания ---------------------------------------------- */
  .ck-files {
    display: grid;
    gap: var(--ck-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ck-file {
    display: flex;
    align-items: center;
    gap: var(--ck-space-4);
    padding: var(--ck-space-4) var(--ck-space-5);
    border: var(--ck-border-width) solid var(--ck-line);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-white);
    color: var(--ck-ink);
    transition:
      border-color var(--ck-dur-fast) var(--ck-ease),
      box-shadow var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-file:hover {
    border-color: var(--ck-blue);
    box-shadow: var(--ck-shadow-sm);
    text-decoration: none;
  }

  .ck-file__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-surface);
    color: var(--ck-blue);
  }

  .ck-file__body {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .ck-file__name {
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .ck-file__meta {
    font-size: var(--ck-fs-xs);
    color: var(--ck-muted);
  }

  .ck-file__arrow {
    margin-inline-start: auto;
    color: var(--ck-muted);
    transition: color var(--ck-dur-fast) var(--ck-ease), transform var(--ck-dur) var(--ck-ease);
  }

  .ck-file:hover .ck-file__arrow {
    color: var(--ck-blue);
    transform: translateY(2px);
  }

  /* --- Список ссылок ----------------------------------------------------- */
  .ck-links {
    display: grid;
    gap: var(--ck-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ck-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    padding-block: 2px;
    color: var(--ck-blue);
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-medium);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ck-blue) 35%, transparent);
    text-underline-offset: 0.2em;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-link:hover {
    color: var(--ck-blue-hover);
    text-decoration-color: currentColor;
  }

  .ck-link > .ck-icon {
    width: 1em;
    height: 1em;
  }

  /* --- Шаги / инструкция -------------------------------------------------- */
  .ck-steps {
    display: grid;
    gap: var(--ck-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ck-step;
  }

  .ck-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--ck-space-4);
    position: relative;
  }

  .ck-step::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: calc(var(--ck-space-5) * -1);
    left: 19px;
    width: 2px;
    background-color: var(--ck-line);
  }

  .ck-step:last-child::before {
    display: none;
  }

  .ck-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-lime);
    color: var(--ck-ink);
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-sm);
    font-weight: var(--ck-weight-bold);
  }

  .ck-step__body {
    display: grid;
    gap: var(--ck-space-1);
    padding-bottom: 2px;
  }

  .ck-step__title {
    font-family: var(--ck-font-body);
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-bold);
    line-height: 1.35;
  }

  .ck-step__text {
    font-size: var(--ck-fs-sm);
    line-height: 1.6;
    color: var(--ck-muted);
  }

  /* --- Шапка статьи ------------------------------------------------------ */
  .ck-article-head {
    display: grid;
    gap: var(--ck-space-4);
    max-width: 78ch;
  }

  .ck-article-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-3);
    font-size: var(--ck-fs-sm);
    color: var(--ck-muted);
  }

  .ck-article-head__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h1);
    font-weight: var(--ck-weight-bold);
    line-height: 1.05;
    text-transform: uppercase;
  }

  .ck-article-head__lead {
    font-size: var(--ck-fs-lead);
    line-height: 1.6;
    color: var(--ck-color-muted);
  }

  .ck-article-head__author {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    font-size: var(--ck-fs-sm);
    color: var(--ck-color-text);
  }

  .ck-article-head__cover {
    overflow: hidden;
    aspect-ratio: 21 / 9;
    margin-top: var(--ck-space-4);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-pastel-mint);
  }

  .ck-article-head__cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Навигация по урокам (предыдущий / следующий) --------------------- */
  .ck-lesson-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-4);
    padding-top: var(--ck-space-6);
    border-top: var(--ck-border-width) solid var(--ck-color-border);
  }

  .ck-lesson-nav__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-3);
  }

  /* --- Факты (о проекте, о себе) ---------------------------------------- */
  .ck-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ck-space-5);
    margin: 0;
    padding: 0;
  }

  .ck-facts__item {
    display: grid;
    gap: 2px;
  }

  .ck-facts__label {
    font-size: var(--ck-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ck-color-muted);
  }

  .ck-facts__value {
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.4;
    color: var(--ck-color-text);
  }

/* ===== assets/css/components/sections.css ===== */
/* ==========================================================================
   sections.css — составные блоки страниц: «обо мне», CTA, панели-обёртки.

   Собраны из атомов и молекул, но имеют собственные классы, чтобы разметку
   можно было копировать в шаблон целиком.
   ========================================================================== */

  /* --- Обо мне: текст + фото --------------------------------------------- */
  .ck-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--ck-space-12);
    align-items: center;
  }

  .ck-about__body {
    display: grid;
    gap: var(--ck-space-5);
    max-width: 620px;
  }

  .ck-about__text {
    display: grid;
    gap: var(--ck-space-4);
    font-size: var(--ck-fs-body-sm);
    line-height: var(--ck-lh-body);
    color: var(--ck-color-text);
  }

  .ck-about__text strong {
    font-weight: var(--ck-weight-bold);
  }

  .ck-about__media {
    position: relative;
    isolation: isolate;
  }

  .ck-about__photo {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 4 / 4.6;
    border-radius: var(--ck-radius-xl);
    background-color: var(--ck-pastel-cream);
  }

  .ck-about__photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Лаймовое пятно за фото — как в макете.
     Справа без отрицательного смещения: иначе на узких экранах оно
     расширяет документ и появляется горизонтальный скролл. */
  .ck-about__accent {
    position: absolute;
    z-index: 0;
    inset: auto 0 -7% 14%;
    height: 62%;
    background-color: var(--ck-lime);
    border-radius: 48% 52% 38% 62% / 58% 42% 58% 42%;
    pointer-events: none;
  }

  @media (max-width: 900px) {
    .ck-about {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ck-space-8);
    }

    .ck-about__media {
      order: -1;
    }

    .ck-about__photo {
      aspect-ratio: 16 / 10;
    }
  }

  /* --- CTA-блок ---------------------------------------------------------- */
  .ck-cta {
    display: grid;
    justify-items: start;
    gap: var(--ck-space-6);
    min-width: 0;
    max-width: 100%;
  }

  .ck-cta--center {
    justify-items: center;
    text-align: center;
  }

  .ck-cta__title {
    max-width: min(22ch, 100%);
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h1);
    font-weight: var(--ck-weight-bold);
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: break-word;
  }

  .ck-cta__lead {
    max-width: min(52ch, 100%);
    font-size: var(--ck-fs-lead);
    line-height: 1.6;
    color: var(--ck-color-muted);
  }

  .ck-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-3);
  }

  .ck-cta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2) var(--ck-space-6);
    font-size: var(--ck-fs-sm);
    color: var(--ck-color-muted);
  }

  /* Панель-обёртка для CTA */
  .ck-cta-panel {
    padding: var(--ck-space-12) var(--ck-space-8);
    border-radius: var(--ck-radius-xl);
    background-color: var(--ck-surface);
  }

  .ck-cta-panel--lime {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-cta-panel--blue {
    background-color: var(--ck-blue);
    color: var(--ck-white);
  }

  @media (max-width: 768px) {
    .ck-cta-panel {
      padding: var(--ck-space-8) var(--ck-space-5);
    }
  }

/* ===== assets/css/components/page-blocks.css ===== */
/* ==========================================================================
   page-blocks.css — блоки служебных страниц: команда, контакты,
   фильтр-бар каталога, пагинация, карточки кейса и статьи.

   Всё это нужно для «обычных» страниц сайта: о команде, контакты, каталог,
   архив кейсов, блог. В макетах таких страниц не было — спроектировано
   на тех же токенах и правилах.
   ========================================================================== */

  /* --- Команда ----------------------------------------------------------- */
  .ck-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ck-grid-gap);
  }

  .ck-member {
    display: grid;
    gap: var(--ck-space-3);
  }

  .ck-member__photo {
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-pastel-cream);
  }

  .ck-member__photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ck-dur-slow) var(--ck-ease);
  }

  .ck-member:hover .ck-member__photo > img {
    transform: scale(1.03);
  }

  .ck-member__name {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h5);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.25;
  }

  .ck-member__role {
    margin-top: -6px;
    font-size: var(--ck-fs-sm);
    line-height: 1.45;
    color: var(--ck-color-muted);
  }

  .ck-member__socials {
    display: flex;
    gap: var(--ck-space-2);
  }

  .ck-member__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ck-radius-pill);
    background-color: var(--ck-surface);
    color: var(--ck-ink);
    transition: background-color var(--ck-dur-fast) var(--ck-ease), color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-member__social:hover {
    background-color: var(--ck-blue);
    color: var(--ck-white);
  }

  /* --- Контакты ---------------------------------------------------------- */
  .ck-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ck-grid-gap);
  }

  .ck-contact-card {
    display: grid;
    gap: var(--ck-space-3);
    padding: var(--ck-space-6);
    border: var(--ck-border-width) solid var(--ck-line);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-white);
    transition: border-color var(--ck-dur-fast) var(--ck-ease), box-shadow var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-contact-card:hover {
    border-color: transparent;
    box-shadow: var(--ck-shadow-card);
  }

  .ck-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-surface);
    color: var(--ck-blue);
  }

  .ck-contact-card__label {
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ck-color-muted);
  }

  .ck-contact-card__value {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h5);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.3;
    color: var(--ck-color-text);
  }

  .ck-contact-card__value a {
    color: inherit;
    text-decoration: none;
  }

  .ck-contact-card__value a:hover {
    color: var(--ck-blue);
  }

  .ck-contact-card__note {
    font-size: var(--ck-fs-sm);
    line-height: 1.5;
    color: var(--ck-color-muted);
  }

  /* Реквизиты (юр. информация в контактах и подвале) */
  .ck-requisites {
    display: grid;
    gap: var(--ck-space-1);
    margin: 0;
    font-size: var(--ck-fs-sm);
    line-height: 1.6;
    color: var(--ck-color-muted);
  }

  .ck-requisites div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
  }

  .ck-requisites dt {
    min-width: 132px;
    color: var(--ck-color-muted);
  }

  .ck-requisites dd {
    margin: 0;
    color: var(--ck-color-text);
  }
  /* --- Форма (заявка, обратная связь) ----------------------------------- */
  .ck-form {
    display: grid;
    gap: var(--ck-space-5);
    max-width: 640px;
  }

  .ck-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-4);
  }

  .ck-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-4);
  }

  .ck-form__note {
    font-size: var(--ck-fs-xs);
    line-height: 1.5;
    color: var(--ck-color-muted);
  }

  /* Сообщение об успешной отправке (показывает form.js) */
  .ck-form__success {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--ck-space-3);
    padding: var(--ck-space-5);
    border-radius: var(--ck-radius-md);
    background-color: color-mix(in srgb, var(--ck-lime) 18%, var(--ck-white));
    font-size: var(--ck-fs-body-sm);
    line-height: 1.5;
  }

  .ck-form__success[hidden] {
    display: none;
  }

  .ck-form__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--ck-radius-xs);
    background-color: var(--ck-ink);
    color: var(--ck-lime);
  }

  /* Пустой результат фильтра */
  .ck-empty {
    padding: var(--ck-space-12) var(--ck-space-6);
    border: var(--ck-border-width) dashed var(--ck-line);
    border-radius: var(--ck-radius-lg);
    text-align: center;
    font-size: var(--ck-fs-body-sm);
    color: var(--ck-color-muted);
  }

  .ck-empty[hidden] {
    display: none;
  }

  @media (max-width: 640px) {
    .ck-form__row {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --- Hero кейса (лаймовая карточка проекта) ---------------------------- */
  .ck-case-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ck-space-8);
    align-items: center;
    padding: var(--ck-space-10);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-case-hero__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-display);
    font-weight: var(--ck-weight-bold);
    line-height: 1.02;
    letter-spacing: var(--ck-ls-display);
  }

  .ck-case-hero__facts {
    display: grid;
    gap: var(--ck-space-4);
    margin-top: var(--ck-space-6);
    font-size: var(--ck-fs-sm);
    line-height: 1.5;
  }

  .ck-case-hero__facts dt {
    font-weight: var(--ck-weight-bold);
  }

  .ck-case-hero__facts dd {
    margin: 0;
    color: rgba(22, 22, 22, 0.72);
  }

  .ck-case-hero__media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--ck-radius-md);
    background-color: rgba(255, 255, 255, 0.55);
  }

  @media (max-width: 900px) {
    .ck-case-hero {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--ck-space-6);
    }
  }

  /* --- Фильтр-бар каталога ----------------------------------------------- */
  .ck-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-4);
    padding: var(--ck-space-4);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-surface);
  }

  .ck-filter-bar__search {
    flex: 1 1 220px;
    min-width: 180px;
    margin-inline-start: auto;
  }

  .ck-filter-bar__sort {
    flex: 0 0 auto;
  }

  .ck-filter-bar__count {
    font-size: var(--ck-fs-sm);
    color: var(--ck-color-muted);
    white-space: nowrap;
  }

  @media (max-width: 640px) {
    .ck-filter-bar {
      padding: var(--ck-space-3);
    }

    .ck-filter-bar__search,
    .ck-filter-bar__sort {
      flex: 1 1 100%;
      margin-inline-start: 0;
    }
  }

  /* --- Пагинация --------------------------------------------------------- */
  .ck-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
  }

  .ck-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--ck-space-2);
    border: var(--ck-border-width) solid var(--ck-line);
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-white);
    color: var(--ck-color-text);
    font-size: var(--ck-fs-sm);
    font-weight: var(--ck-weight-semibold);
    line-height: 1;
    transition:
      border-color var(--ck-dur-fast) var(--ck-ease),
      background-color var(--ck-dur-fast) var(--ck-ease),
      color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-pagination__item:hover {
    border-color: var(--ck-blue);
    color: var(--ck-blue);
    text-decoration: none;
  }

  .ck-pagination__item.is-active,
  .ck-pagination__item[aria-current='page'] {
    border-color: var(--ck-blue);
    background-color: var(--ck-blue);
    color: var(--ck-white);
  }

  .ck-pagination__item.is-disabled,
  .ck-pagination__item[aria-disabled='true'] {
    opacity: 0.45;
    pointer-events: none;
  }

  /* --- Карточка кейса (архив портфолио) ---------------------------------- */
  .ck-case-card {
    display: grid;
    gap: var(--ck-space-4);
    color: var(--ck-color-text);
  }

  .ck-case-card__media {
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-pastel-peach);
  }

  .ck-case-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ck-dur-slow) var(--ck-ease);
  }

  .ck-case-card:hover .ck-case-card__media > img {
    transform: scale(1.03);
  }

  .ck-case-card:hover .ck-case-card__title {
    color: var(--ck-blue);
  }

  .ck-case-card__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h5);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.25;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-case-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-1) var(--ck-space-3);
    font-size: var(--ck-fs-sm);
    color: var(--ck-color-muted);
  }

  /* --- Карточка статьи (архив блога) ------------------------------------- */
  .ck-post-card {
    display: grid;
    gap: var(--ck-space-3);
    color: var(--ck-color-text);
  }

  .ck-post-card__media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-pastel-mint);
  }

  .ck-post-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ck-dur-slow) var(--ck-ease);
  }

  .ck-post-card:hover .ck-post-card__media > img {
    transform: scale(1.03);
  }

  .ck-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ck-space-2);
    font-size: var(--ck-fs-xs);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ck-color-muted);
  }

  .ck-post-card__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h5);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.25;
    transition: color var(--ck-dur-fast) var(--ck-ease);
  }

  .ck-post-card:hover .ck-post-card__title {
    color: var(--ck-blue);
  }

  .ck-post-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: var(--ck-fs-sm);
    line-height: 1.6;
    color: var(--ck-color-muted);
  }

  .ck-post-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-1);
    font-size: var(--ck-fs-sm);
    font-weight: var(--ck-weight-semibold);
    color: var(--ck-blue);
  }

  .ck-post-card__link:hover {
    text-decoration: none;
    color: var(--ck-blue-hover);
  }

  /* ======================================================================
     Карточки-ссылки архивов: гасим подчёркивание всей карточки при наведении
     ====================================================================== */
  .ck-case-card,
  .ck-case-card:hover,
  .ck-post-card,
  .ck-post-card:hover {
    text-decoration: none;
  }

/* ===== assets/css/pages/shop.css ===== */
/* ==========================================================================
   pages/shop.css — особенности страницы каталога (магазин решений).

   Hero повторяет макет: лаймовая карточка с заголовком слева (≈1.5fr)
   и тёмная карточка с преимуществами справа (≈1fr).
   ========================================================================== */

  .ck-shop-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--ck-grid-gap);
    align-items: stretch;
    padding-block: var(--ck-space-10) 0;
  }

  .ck-shop-hero__main {
    display: grid;
    align-content: center;
    gap: var(--ck-space-5);
    padding: var(--ck-space-10);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-shop-hero__title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-h1);
    font-weight: var(--ck-weight-bold);
    line-height: 1.05;
    letter-spacing: var(--ck-ls-heading);
    text-transform: uppercase;
  }

  .ck-shop-hero__text {
    max-width: 48ch;
    font-size: var(--ck-fs-body-sm);
    line-height: 1.6;
  }

  .ck-shop-hero__features {
    display: grid;
    align-content: center;
    gap: var(--ck-space-6);
    padding: var(--ck-space-8);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-ink);
    color: var(--ck-white);
  }

  @media (max-width: 900px) {
    .ck-shop-hero {
      grid-template-columns: minmax(0, 1fr);
      padding-block: var(--ck-space-6) 0;
    }

    .ck-shop-hero__main,
    .ck-shop-hero__features {
      padding: var(--ck-space-6);
    }
  }

/* ===== assets/css/pages/resume.css ===== */
/* ==========================================================================
   pages/resume.css — печатная версия резюме.

   Логика: на экране читается как документ (белый лист по центру), при печати
   убираются подложки и остаётся чистая типографика A4.
   ========================================================================== */

  /* Страница-«лист» для экрана: серая подложка, белый лист по центру */
  .ck-resume-page {
    background-color: var(--ck-surface);
    padding-block: var(--ck-space-8);
  }

  .ck-resume {
    max-width: 900px;
    margin-inline: auto;
    padding: var(--ck-space-12) var(--ck-space-10);
    background-color: var(--ck-white);
    color: var(--ck-ink);
  }

  /* --- Шапка: имя + фото/QR --------------------------------------------- */
  .ck-resume__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ck-space-6);
    align-items: start;
    padding-bottom: var(--ck-space-8);
  }

  .ck-resume__name {
    display: grid;
    gap: 0;
    font-family: var(--ck-font-display);
    font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
    font-weight: var(--ck-weight-regular);
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: break-word;
  }

  .ck-resume__name strong {
    font-weight: var(--ck-weight-black);
  }

  .ck-resume__head-side {
    display: flex;
    gap: var(--ck-space-3);
    align-items: flex-start;
  }

  .ck-resume__qr {
    width: 96px;
    height: 96px;
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-surface);
  }

  .ck-resume__photo {
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-pastel-cream);
  }

  /* --- Карточки-направления --------------------------------------------- */
  .ck-resume__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-4);
    margin-bottom: var(--ck-space-6);
  }

  .ck-resume__stat {
    position: relative;
    display: grid;
    gap: var(--ck-space-2);
    padding: var(--ck-space-5);
    overflow: hidden;
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-surface);
  }

  /* лаймовый уголок в левом верхнем углу */
  .ck-resume__stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 26px;
    border-radius: 0 0 var(--ck-radius-sm) 0;
    background-color: var(--ck-lime);
  }

  .ck-resume__stat-title {
    margin-top: var(--ck-space-4);
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-bold);
    line-height: 1.15;
    text-transform: uppercase;
  }

  .ck-resume__stat-value {
    font-family: var(--ck-font-display);
    font-size: 2rem;
    font-weight: var(--ck-weight-bold);
    line-height: 1;
    color: var(--ck-blue);
  }

  .ck-resume__stat-note {
    font-size: var(--ck-fs-xs);
    color: var(--ck-muted);
  }
  /* --- Две колонки: обо мне / навыки ------------------------------------ */
  .ck-resume__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-4);
    margin-bottom: var(--ck-space-6);
  }

  .ck-resume__block {
    padding: var(--ck-space-5);
    border-radius: var(--ck-radius-md);
    background-color: var(--ck-surface);
    font-size: var(--ck-fs-sm);
    line-height: 1.6;
  }

  .ck-resume__block p + p {
    margin-top: 0.6em;
  }

  .ck-resume__block-title {
    margin-bottom: var(--ck-space-3);
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-body-sm);
    text-transform: uppercase;
  }

  .ck-resume__list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 1.1em;
  }

  .ck-resume__list li::marker {
    color: var(--ck-blue);
  }

  /* --- Направления с вертикальным лейблом ------------------------------- */
  .ck-resume__directions {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--ck-space-5);
    margin-bottom: var(--ck-space-6);
  }

  .ck-resume__label {
    display: grid;
    place-items: center;
    padding: var(--ck-space-4) 0;
    border-radius: var(--ck-radius-sm);
    background-color: var(--ck-blue);
    color: var(--ck-white);
  }

  .ck-resume__label--lime {
    background-color: var(--ck-lime);
    color: var(--ck-ink);
  }

  .ck-resume__dir {
    display: grid;
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-5);
  }

  .ck-resume__dir-title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-bold);
  }

  .ck-resume__dir-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-left: 1.1em;
    font-size: var(--ck-fs-sm);
    line-height: 1.55;
  }

  /* --- Баннер с QR ------------------------------------------------------- */
  .ck-resume__banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-4);
    padding: var(--ck-space-6);
    border-radius: var(--ck-radius-lg);
    background-color: var(--ck-blue);
    color: var(--ck-white);
  }

  .ck-resume__banner-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--ck-space-4);
    align-items: center;
    color: inherit; /* ссылка не должна брать синий цвет базы */
  }

  .ck-resume__banner-qr {
    width: 72px;
    height: 72px;
    border-radius: var(--ck-radius-xs);
    background-color: var(--ck-lime);
  }

  .ck-resume__banner-title {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ck-lime);
  }

  .ck-resume__banner-text {
    font-family: var(--ck-font-display);
    font-size: var(--ck-fs-body-sm);
    font-weight: var(--ck-weight-semibold);
    line-height: 1.25;
    text-transform: uppercase;
  }

  @media (max-width: 768px) {
    .ck-resume {
      padding: var(--ck-space-6) var(--ck-space-4);
    }

    .ck-resume__head {
      grid-template-columns: minmax(0, 1fr);
    }

    .ck-resume__stats,
    .ck-resume__cols,
    .ck-resume__banner {
      grid-template-columns: minmax(0, 1fr);
    }

    .ck-resume__directions {
      grid-template-columns: 40px minmax(0, 1fr);
    }
  }

  /* --- Печать ------------------------------------------------------------ */
  @media print {
    .ck-resume {
      max-width: none;
      padding: 0;
    }

    .ck-resume__stat,
    .ck-resume__block,
    .ck-resume__banner {
      border: 1px solid var(--ck-line);
      background-color: var(--ck-white) !important;
    }

    .ck-resume__stat::before,
    .ck-resume__label,
    .ck-resume__banner {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }

    .ck-resume__banner {
      color: var(--ck-white);
    }

    .ck-header,
    .ck-footer,
    .ck-skip-link,
    .ck-resume__actions {
      display: none !important;
    }

    @page {
      margin: 14mm;
    }
  }

/* ===== assets/css/main.css ===== */
/* ==========================================================================
   main.css — точка входа стилей кита.

   Порядок слоёв задаёт каскад: правильно объявленный порядок защищает от
   «войн специфичности» и при переносе в WordPress/Blocksy, где свои
   глобальные стили. Более поздние слои выигрывают у ранних.

   Подключение на странице:
     <link rel="stylesheet" href="assets/css/main.css">

   В WordPress этот файл станет набором wp_enqueue_style() (см. README).
   ========================================================================== */









/* --- Атомы (этап 2) ---------------------------------------------------- */









/* --- Молекулы (этап 3) -------------------------------------------------- */







/* --- Контент и учебные блоки (этап 4) ----------------------------------- */




/* --- Секции и блоки страниц (этап 4b–4c) -------------------------------- */



/* --- Особенности страниц (этап 5) -------------------------------------- */



/* Новые page-CSS добавляются в блок «Особенности страниц» выше. */

/* Слой overrides — единственное место для точечных правок «поверх» кита
   (например, при интеграции с Blocksy). Править компоненты здесь нельзя. */