/* ============================================================================
   САЙТ «СТРОЙ-ГРУПП» — НАСТРОЙКИ ТЕМЫ (единый файл)
   ----------------------------------------------------------------------------
   Это ЕДИНСТВЕННЫЙ файл, который нужно открыть, чтобы поменять цвета,
   размеры шрифтов, отступы, скругления и другие метрики по всему сайту.
   Ничего не меняйте в разметке страниц/блоков — меняйте значения тут,
   и они применятся везде, где используются переменные и классы ниже.

   Порядок подключения в WordPress (functions.php -> wp_enqueue_style):
     1. tokens/fonts.css, colors.css, typography.css, spacing.css, base.css
        (базовые токены дизайн-системы — цветовая палитра, гарнитура и т.п.)
     2. этот файл, site-theme.css (настройки конкретно этого сайта + компоненты)
     3. tailwind-собранный style.css (утилиты Tailwind поверх тех же переменных,
        см. theme/tailwind.config.js)
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------
     1. КОНТЕЙНЕР И СЕТКА СТРАНИЦЫ
     --------------------------------------------------------------------- */
  --container-max: 1280px;   /* максимальная ширина контента */
  --gutter: 40px;             /* отступы слева/справа на десктопе */
  --gutter-mobile: 20px;      /* отступы слева/справа на мобильном */
  --section-y: 96px;          /* вертикальный отступ секции (десктоп) */
  --section-y-mobile: 60px;   /* вертикальный отступ секции (мобильный) */

  /* брейкпоинты — используются в комментариях и в tailwind.config.js
     (в чистом CSS @media их подставить нельзя, только для справки) */
  --bp-tablet: 980px;
  --bp-mobile: 560px;

  /* ---------------------------------------------------------------------
     2. ЦВЕТ — фирменный цвет уже задан в tokens/colors.css (--color-brand
     и вся индиго-рампа). Тут только алиасы для конкретных мест сайта —
     поменяйте ИХ, если нужно перекрасить только шапку/футер/бейджи,
     не трогая остальной бренд.
     --------------------------------------------------------------------- */
  --site-header-bg: rgba(17, 17, 17, .86);   /* тёмная плашка навигации */
  --site-dark-bg: #111111;                    /* тёмные секции / футер */
  --site-badge-bg: var(--indigo-050);
  --site-badge-fg: var(--color-brand);

  /* secondary brand color — default violet, overridable per-theme */
  --color-secondary: #5b4f9a;
  --color-secondary-tint: #dfdef7;
  --color-secondary-dark: #4d3f8c;
  --color-secondary-hover: #4e4485;
  --color-brand-hover: #28289a;
  --color-soft-hover: #8d8ddf;

  /* ---------------------------------------------------------------------
     3. СКРУГЛЕНИЯ
     --------------------------------------------------------------------- */
  --radius-btn: 10px;      /* кнопки */
  --radius-input: 10px;    /* поля форм, select */
  --radius-chip: 10px;     /* чипы фильтров, теги-плашки */
  --radius-pill: 999px;    /* капсулы, бейджи-пилюли, аватары */
  --radius-card: 18px;     /* карточки товара/блога */
  --radius-panel: 20px;    /* крупные панели (форма, buybox, инфоблок) */
  --radius-feature: 28px;  /* большие фичер-блоки (гарантия, CTA) */

  /* ---------------------------------------------------------------------
     4. ТЕНИ
     --------------------------------------------------------------------- */
  --shadow-nav: 0 14px 40px rgba(4, 4, 41, .28);
  --shadow-card-hover: 0 18px 40px rgba(4, 4, 41, .12);
  --shadow-panel: 0 20px 44px rgba(4, 4, 41, .18);
  --shadow-cta: 0 10px 24px rgba(47, 47, 178, .24);

  /* ---------------------------------------------------------------------
     5. АНИМАЦИИ
     --------------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---------------------------------------------------------------------
     6. ТИПОГРАФИКА — единая шкала размеров для всех страниц
     (раньше на каждой странице был свой размер h1/h2 — теперь один источник)
     --------------------------------------------------------------------- */
  --fs-display: 60px;   /* большой заголовок хиро на главной */
  --fs-h1: 44px;        /* заголовок внутренней страницы / крупной секции */
  --fs-h2: 34px;        /* заголовок обычной секции */
  --fs-h3: 22px;        /* подзаголовок, заголовок карточки/блока */
  --fs-h4: 17px;        /* заголовок мелкой карточки */
  --fs-lead: 18px;      /* вводный/подводящий текст под заголовком */
  --fs-body: 15px;      /* основной текст */
  --fs-small: 14px;     /* второстепенный текст, подписи */
  --fs-caption: 13px;   /* мелкие подписи, мета-информация */
  --fs-eyebrow: 13px;   /* надглавие (uppercase-лейбл) */

  --lh-display: 1.04;
  --lh-heading: 1.1;
  --lh-body: 1.55;

  --ls-display: -.03em;
  --ls-heading: -.02em;
  --ls-eyebrow: .08em;

  /* ---------------------------------------------------------------------
     7. КНОПКИ — высота/паддинги/размер текста по размеру кнопки
     --------------------------------------------------------------------- */
  --btn-h-lg: 56px;  --btn-px-lg: 30px;  --btn-fs-lg: 16px;
  --btn-h-md: 52px;  --btn-px-md: 26px;  --btn-fs-md: 15px;
  --btn-h-sm: 46px;  --btn-px-sm: 22px;  --btn-fs-sm: 14px;

  /* ---------------------------------------------------------------------
     8. ПОЛЯ ФОРМ / ПОИСК
     --------------------------------------------------------------------- */
  --field-h: 52px;
  --field-px: 16px;

  /* ---------------------------------------------------------------------
     9. ШАПКА САЙТА (плавающая тёмная навигация)
     --------------------------------------------------------------------- */
  --nav-h: 66px;
  --nav-max: 1240px;
  --nav-radius: 999px;
  --nav-top-offset: 14px;
}

/* ============================================================================
   БАЗА СТРАНИЦЫ
   ============================================================================ */
.site {
  font-family: 'Golos Text', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-body);
  width: 100%;
  overflow-x: hidden;
}
.site *{ box-sizing: border-box; }
.site a{ text-decoration: none; }
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sec { padding: var(--section-y) 0; }
@media (max-width: 900px) {
  .wrap { padding: 0 var(--gutter-mobile); }
  .sec { padding: var(--section-y-mobile) 0; }
}

/* ============================================================================
   ТИПОГРАФИЧЕСКИЕ КЛАССЫ
   ============================================================================ */
.ey, .eyd {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.ey { color: var(--color-brand); }
.eyd { color: var(--indigo-300); } /* вариант надглавия для тёмного фона */

.h-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 700; color: var(--ink); margin: 0; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 700; color: var(--ink); margin: 0; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 700; color: var(--ink); margin: 0; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; color: var(--ink); margin: 0; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; color: var(--ink); margin: 0; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }
.on-dark.lead, .on-dark .lead { color: rgba(255,255,255,.74); }
.on-dark.h1, .on-dark.h2, .on-dark .h1, .on-dark .h2 { color: #fff; }

/* заголовок секции: надглавие + h2 + подводка — повторяющийся паттерн */
.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head .ey, .section-head .eyd { margin-bottom: 12px; display: block; }
.section-head .lead { margin-top: 14px; }

/* ============================================================================
   КНОПКИ
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h-md); padding: 0 var(--btn-px-md);
  border-radius: var(--radius-btn);
  font-size: var(--btn-fs-md); font-weight: 500; letter-spacing: .01em;
  cursor: pointer; border: none; font-family: inherit; white-space: nowrap;
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn-lg { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--btn-fs-lg); }
.btn-sm { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--btn-fs-sm); }
.btn-block { width: 100%; }
.btn:hover { opacity: 1; }

.btn.btn-primary { background: var(--color-brand); color: #fff; box-shadow: var(--shadow-cta); }
.btn.btn-primary:hover { background: var(--color-brand-hover, var(--indigo-700)); transform: translateY(-1px); }
.btn.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--border-default); }
.btn.btn-secondary:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn.btn-ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.26); }
.btn.btn-ghost-dark:hover { background: rgba(255,255,255,.08); }
.btn.btn-white { background: #fff; color: var(--ink); }
.btn.btn-white:hover { background: var(--gray-150); }
.btn.btn-pill { border-radius: var(--radius-pill); }
.btn.btn-dark { background: var(--site-dark-bg); color: #fff; }
.btn.btn-dark:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.btn.btn-soft { background: var(--indigo-200); color: var(--indigo-800); }
.btn.btn-soft:hover { background: var(--color-soft-hover, var(--indigo-300)); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brand); font-weight: 600; font-size: var(--fs-small); }
.link-arrow .ar { display: inline-block; transition: transform var(--dur-base) var(--ease); }
.link-arrow:hover .ar { transform: translateX(4px); }

/* ============================================================================
   ХЛЕБНЫЕ КРОШКИ (breadcrumbs)
   ============================================================================ */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--color-brand); }
.crumbs .sep { color: var(--border-strong); }
.crumbs .current { color: var(--text-body); font-weight: 500; }
.crumbs.on-dark, .crumbs.on-dark a { color: rgba(255,255,255,.55); }
.crumbs.on-dark a:hover { color: #fff; }

/* ============================================================================
   БЕЙДЖИ / ЧИПЫ / ТЕГИ
   ============================================================================ */
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-chip); background: var(--site-badge-bg); color: var(--site-badge-fg); font-size: var(--fs-caption); font-weight: 500; }
.badge-dark { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; padding: 5px 10px; height: auto; border-radius: 6px; }

.chip { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: var(--radius-chip); background: #fff; border: 1px solid var(--border-subtle); color: var(--text-body); font-size: var(--fs-small); font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base); }
.chip:hover { border-color: var(--color-brand); color: var(--color-brand); }
.chip.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

.tag-pill { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border-subtle); font-size: var(--fs-small); color: var(--text-body); font-weight: 500; }

/* вторичный бренд-цвет — акценты, где primary был бы избыточен */
.badge-secondary { background: var(--color-secondary-tint); color: var(--color-secondary-dark); }
.btn.btn-secondary-accent { background: var(--color-secondary); color: #fff; }
.btn.btn-secondary-accent:hover { background: var(--color-secondary-hover); }

/* ============================================================================
   ПОИСК
   ============================================================================ */
.search { position: relative; display: flex; align-items: center; }
.search input { width: 100%; height: var(--field-h); border-radius: var(--radius-input); border: 1px solid var(--border-default); background: #fff; color: var(--ink); padding: 0 var(--field-px) 0 46px; font-size: var(--fs-body); font-family: inherit; outline: none; }
.search input:focus { border-color: var(--color-brand); }
.search .icon { position: absolute; left: 16px; color: var(--text-muted); font-size: 16px; pointer-events: none; }
.search .btn { position: absolute; right: 6px; height: calc(var(--field-h) - 12px); padding: 0 20px; }

/* ============================================================================
   ФОРМЫ
   ============================================================================ */
.field-label { font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: block; }
.field { width: 100%; height: var(--field-h); border-radius: var(--radius-input); border: 1px solid var(--border-default); background: #fff; color: var(--ink); padding: 0 var(--field-px); font-size: var(--fs-body); font-family: inherit; outline: none; appearance: none; transition: border-color var(--dur-base); }
.field:focus { border-color: var(--color-brand); }
.field-area { height: auto; padding: 14px var(--field-px); resize: vertical; min-height: 110px; }
.select-wrap { position: relative; }
.select-wrap:after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 13px; }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: var(--text-body); cursor: pointer; }
.checkbox-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-default); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.checkbox-row.is-checked .checkbox-box { background: var(--color-brand); border-color: var(--color-brand); }

/* ============================================================================
   КАРТОЧКИ (товар / листинг)
   ============================================================================ */
.card { background: #fff; border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(4,4,41,.04), 0 8px 24px rgba(4,4,41,.04); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card-thumb { height: 180px; position: relative; display: flex; align-items: flex-end; padding: 16px; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.card-desc { font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border-subtle); }
.card-price { font-size: 18px; font-weight: 700; color: var(--ink); }
.card-price span { font-size: var(--fs-caption); font-weight: 500; color: var(--text-muted); }

/* карточка товара с медиа (фото / видео / слайдшоу) */
.card-gallery { position: relative; height: 200px; overflow: hidden; background: var(--gray-150); }
.card-gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.card-gallery-slide.is-active { opacity: 1; }
.card-gallery-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-chip); background: rgba(4,4,41,.55); backdrop-filter: blur(3px); color: #fff; font-size: 11.5px; font-weight: 600; }
.card-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card-gallery-play-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card-hover); }
.card-gallery-play-btn::before { content: ''; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
.card-gallery-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.card-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.card-gallery-dot.is-active { width: 16px; border-radius: 3px; background: #fff; }
.card-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 13px; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.card-gallery:hover .card-gallery-nav { opacity: 1; }
.card-gallery-nav.prev { left: 10px; }
.card-gallery-nav.next { right: 10px; }

/* карточка блога/статьи — горизонтальная строка */
.post-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--border-subtle); }
.post-title { font-size: var(--fs-h4); font-weight: 600; color: var(--ink); letter-spacing: -.005em; max-width: 680px; }

/* карточка блога — обложка + категория + заголовок + мета */
.blog-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; }
.blog-card-media { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--gray-150); }
.blog-cat { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--bg-page); color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.blog-card-title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.22; letter-spacing: -.01em; color: var(--ink); transition: color var(--dur-base) var(--ease); }
.blog-card:hover .blog-card-title { color: var(--color-brand); }
.blog-card-meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }


/* промо-карточка: бренд-тинт, изображение, круглая стрелка, CTA-пилюля */
.card-promo { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 24px; border-radius: var(--radius-feature); background: linear-gradient(158deg, var(--indigo-100) 0%, var(--indigo-200) 100%); overflow: hidden; }
.card-promo-arrow { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 18px; transition: background var(--dur-base) var(--ease); }
.card-promo-arrow:hover { background: rgba(255,255,255,.9); }
.card-promo-media { height: 240px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card-promo-title { font-size: 32px; font-weight: 600; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); }
.card-promo .btn { align-self: flex-start; }

/* метрика: значение + подпись + мини-спарклайн */
.metric-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(4,4,41,.04), 0 8px 24px rgba(4,4,41,.04); padding: 22px 24px; }
.metric-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.metric-label { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.metric-value { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.metric-sub { font-size: var(--fs-caption); color: var(--text-muted); }
.metric-spark { width: 150px; height: 60px; flex-shrink: 0; }
.metric-spark .spark-area { fill: var(--color-brand); opacity: .12; }
.metric-spark .spark-line { fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* сетки листингов */.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ============================================================================
   ФИЛЬТРЫ / КАТЕГОРИИ (сайдбар листинга)
   ============================================================================ */
.filters { width: 280px; flex-shrink: 0; }
.filters-block { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }
.filters-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filters-title { font-size: var(--fs-h4); font-weight: 500; color: var(--ink); margin-bottom: 16px; }
.filters-cats { display: flex; flex-direction: column; gap: 2px; }
.filters-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; font-size: var(--fs-body); color: var(--text-body); cursor: pointer; border-radius: 8px; transition: color var(--dur-base), background var(--dur-base); }
.filters-cat:hover { color: var(--color-brand); }
.filters-cat.is-active { color: var(--color-brand); font-weight: 500; }
.filters-cat-count { font-size: var(--fs-caption); color: var(--text-muted); }
.filters-cat.is-active .filters-cat-count { color: var(--color-brand); }
.filters-options { display: flex; flex-direction: column; gap: 12px; }
.filters-range { display: flex; align-items: center; gap: 10px; }
.filters-range input { width: 100%; height: 42px; border-radius: var(--radius-input); border: 1px solid var(--border-default); background: #fff; padding: 0 12px; font-size: var(--fs-small); font-family: inherit; outline: none; }
.filters-range input:focus { border-color: var(--color-brand); }
.filters-range-sep { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.filters-clear { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.filters-clear:hover { color: var(--color-brand); }

/* ============================================================================
   ПАГИНАЦИЯ
   ============================================================================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; }
.page-item { min-width: 44px; height: 44px; padding: 0 6px; border-radius: var(--radius-input); border: 1px solid var(--border-subtle); background: #fff; color: var(--text-body); font-size: var(--fs-small); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base); }
.page-item:hover { border-color: var(--color-brand); color: var(--color-brand); }
.page-item.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.page-item.is-disabled { opacity: .4; pointer-events: none; }

/* ============================================================================
   ВКЛАДКИ (tabs)
   ============================================================================ */
.tabs { display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--border-subtle); }
.tab { padding: 14px 0; font-size: 16px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.tab.is-active { color: var(--ink); border-color: var(--color-brand); }

/* ============================================================================
   FAQ / АККОРДЕОН
   ============================================================================ */
.faq-item { border-top: 1px solid var(--border-subtle); }
.faq-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.faq-q { padding: 24px 4px; font-size: 17px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-q::-webkit-details-marker { display: none; }
.faq-a { padding: 0 4px 24px; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); max-width: 760px; }
.faq-chev { transition: transform var(--dur-base) var(--ease); color: var(--color-brand); font-size: 18px; flex-shrink: 0; }
details[open] .faq-chev { transform: rotate(180deg); }

/* ============================================================================
   УВЕДОМЛЕНИЯ / ALERT — поверхность + цветной акцент-бар + иконка-чип
   Разметка: .alert.alert-<тип> > .alert-icon + .alert-body(.alert-title,.alert-text)
   ============================================================================ */
.alert { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 22px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(4,4,41,.05), 0 6px 16px rgba(4,4,41,.03); overflow: hidden; }
.alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--alert-accent, var(--color-brand)); }
.alert-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; background: var(--alert-chip-bg, var(--indigo-050)); color: var(--alert-accent, var(--color-brand)); }
.alert-body { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.alert-title { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.alert-text { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.alert-info    { --alert-accent: var(--color-brand);    --alert-chip-bg: var(--indigo-050); }
.alert-success { --alert-accent: var(--status-success); --alert-chip-bg: #e7f5ee; }
.alert-warning { --alert-accent: var(--status-warning); --alert-chip-bg: #fbf0dd; }
.alert-error   { --alert-accent: var(--status-error);   --alert-chip-bg: #f7e7e7; }

/* ============================================================================
   БЛОК СТАТИСТИКИ (stat)
   ============================================================================ */
.stat { padding: 26px 28px; border-left: 1px solid var(--border-subtle); }
.stat:first-child { border-left: none; }
.stat-num { font-size: 36px; font-weight: 700; color: var(--color-brand); letter-spacing: -.02em; line-height: 1; }
.stat-label { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* ============================================================================
   АВАТАРЫ
   ============================================================================ */
.avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; background: var(--color-brand); color: #fff; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-soft { background: var(--indigo-100); color: var(--color-brand); }
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-lg { width: 58px; height: 58px; font-size: 19px; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid #fff; margin-left: -12px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ============================================================================
   CALLOUT / БАННЕР-ПРИЗЫВ
   ============================================================================ */
.callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-radius: var(--radius-panel); }
.callout-solid { background: var(--color-brand); color: #fff; }
.callout-soft { background: var(--indigo-050); color: var(--ink); }
.callout-outline { background: transparent; border: 1px solid var(--border-default); color: var(--ink); }
.callout-body { display: flex; flex-direction: column; gap: 3px; }
.callout-title { font-weight: 600; font-size: 15.5px; }
.callout-text { font-size: 13.5px; opacity: .82; }

/* ============================================================================
   ПЕРЕКЛЮЧАТЕЛИ / РАДИО / ДИАПАЗОН
   ============================================================================ */
.switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 26px; border-radius: 999px; background: var(--border-default); cursor: pointer; transition: background var(--dur-base) var(--ease); flex-shrink: 0; }
.switch::after { content: ''; position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--dur-base) var(--ease); }
.switch.is-on { background: var(--color-brand); }
.switch.is-on::after { transform: translateX(18px); }
.radio-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: var(--text-body); cursor: pointer; }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-default); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.radio-row.is-checked .radio-dot { border-color: var(--color-brand); }
.radio-row.is-checked .radio-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--color-brand) 0 55%, var(--border-subtle) 55% 100%); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--color-brand); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* ============================================================================
   ПРОГРЕСС
   ============================================================================ */
.progress { height: 8px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: var(--color-brand); }
.progress-soft .progress-bar { background: var(--indigo-300); }

/* ============================================================================
   ТАРИФЫ / PLAN
   ============================================================================ */
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid transparent; border-radius: var(--radius-card); padding: 22px 24px; box-shadow: 0 1px 2px rgba(4,4,41,.04), 0 8px 24px rgba(4,4,41,.04); cursor: pointer; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.plan:hover { border-color: transparent; box-shadow: 0 2px 6px rgba(4,4,41,.06), 0 12px 30px rgba(4,4,41,.07); }
.plan.is-selected { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.plan-head { display: flex; align-items: center; gap: 12px; }
.plan-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: transparent; }
.plan.is-selected .plan-radio { border-color: var(--color-brand); background: var(--color-brand); color: #fff; }
.plan-name { font-size: var(--fs-h4); font-weight: 600; color: var(--ink); }
.plan-desc { font-size: var(--fs-small); color: var(--text-secondary); }
.plan-price { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin-top: auto; }
.plan-price span { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500; }

/* ============================================================================
   ШАПКА САЙТА (topbar + плавающая тёмная навигация)
   ============================================================================ */
.topbar { background: var(--site-dark-bg); color: rgba(255,255,255,.65); font-size: var(--fs-caption); }
.topbar a { color: rgba(255,255,255,.65); }
.topbar a:hover { color: #fff; }
.navwrap { position: sticky; top: var(--nav-top-offset); z-index: 40; padding: 0 20px; margin-bottom: calc(-1 * var(--nav-h) - 14px); }
.nav { max-width: var(--nav-max); margin: var(--nav-top-offset) auto 0; background: var(--site-header-bg); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--nav-radius); box-shadow: var(--shadow-nav); position: relative; }
.nav .wrap { padding: 0 26px; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.logo b { color: var(--indigo-300); }
.nav-link { color: rgba(255,255,255,.8); font-size: var(--fs-body); font-weight: 500; }
.nav-link:hover { color: #fff; }

/* ============================================================================
   ФУТЕР
   ============================================================================ */
.site-footer { background: var(--site-dark-bg); color: rgba(255,255,255,.55); padding: 48px 0; font-size: var(--fs-small); }
.site-footer a { color: rgba(255,255,255,.55); }
.site-footer a:hover { color: #fff; }

/* ============================================================================
   ТЁМНАЯ ТЕМА — добавьте класс .theme-dark на .site (или любой контейнер).
   Переопределяет только нейтральные токены + белые поверхности; бренд-цвета
   (--color-brand / --color-secondary) остаются из выбранной палитры.
   ============================================================================ */
.theme-dark {
  --bg-page: #0e120f;
  --surface-1: #161b16;      /* карточки, поля, поповеры */
  --surface-2: #1e241e;      /* вложенные/hover поверхности */
  --ink: #f2f5f1;
  --text-body: #d4dad2;
  --text-secondary: #a6ada3;
  --text-muted: #7e867b;
  --border-subtle: #262d25;
  --border-default: #333b31;
  --border-strong: #46503f;
  --gray-150: #1e241e;
  --site-badge-bg: rgba(255,255,255,.08);
  --site-badge-fg: var(--indigo-300);
}
.theme-dark .card,
.theme-dark .chip,
.theme-dark .tag-pill,
.theme-dark .field,
.theme-dark .search input,
.theme-dark .filters-range input,
.theme-dark .page-item,
.theme-dark .metric-card,
.theme-dark .plan,
.theme-dark .alert { background: var(--surface-1); color: var(--text-body); border-color: var(--border-default); }
.theme-dark .callout-soft { background: rgba(255,255,255,.05); color: var(--text-body); }
.theme-dark .switch { background: var(--border-strong); }
.theme-dark .blog-cat { background: rgba(255,255,255,.07); color: var(--text-secondary); }
.theme-dark .alert-title { color: var(--ink); }
.theme-dark .alert-success { --alert-chip-bg: rgba(31,138,91,.18); }
.theme-dark .alert-warning { --alert-chip-bg: rgba(217,150,42,.18); }
.theme-dark .alert-error { --alert-chip-bg: rgba(178,83,83,.18); }
.theme-dark .alert-info { --alert-chip-bg: rgba(255,255,255,.07); }
.theme-dark .btn.btn-secondary,
.theme-dark .btn.btn-white { background: var(--surface-1); color: var(--ink); border: 1px solid var(--border-default); }
.theme-dark .btn.btn-secondary:hover,
.theme-dark .btn.btn-white:hover { background: var(--surface-2); }
.theme-dark .chip:hover,
.theme-dark .tag-pill:hover,
.theme-dark .page-item:hover { border-color: var(--color-brand); }

/* ============================================================================
   ГРАДИЕНТНЫЙ РЕЖИМ — добавьте класс .use-gradient рядом с .site.
   Мягкий брендовый градиент на заливках; выключается снятием класса.
   ============================================================================ */
.use-gradient .btn.btn-primary { background-image: linear-gradient(135deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); }
.use-gradient .btn.btn-primary:hover { background-image: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-deep) 100%); }
.use-gradient .btn.btn-secondary-accent { background-image: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%); }
.use-gradient .chip.is-active,
.use-gradient .page-item.is-active,
.use-gradient .filters-cat.is-active { background-image: linear-gradient(135deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); border-color: transparent; }
.use-gradient .checkbox-row.is-checked .checkbox-box { background-image: linear-gradient(135deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); }
.use-gradient .badge { background-image: linear-gradient(135deg, var(--indigo-050) 0%, var(--indigo-100) 100%); }
.use-gradient .callout-solid,
.use-gradient .switch.is-on,
.use-gradient .progress-bar { background-image: linear-gradient(135deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); }
.use-gradient .avatar { background-image: linear-gradient(135deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); }
.use-gradient .alert-icon { background-image: linear-gradient(135deg, var(--alert-chip-bg) 0%, transparent 130%); }
.use-gradient .stat-num { background-image: linear-gradient(120deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }