/*
Theme Name: Astra Child
Description: Дочерняя тема для проекта корпоративного сайта на базе Astra. Здесь живут все кастомные стили, шаблоны и код.
Author: НПП «Динамика»
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/*
 * ДИЗАЙН-СИСТЕМА НПП «ДИНАМИКА» — ИТЕРАЦИЯ 5б
 * ─────────────────────────────────────────────
 * 1.  TOKENS      — CSS-переменные: цвет, типографика, отступы, радиусы, z-index, переходы
 * 2.  RESET       — Сброс браузерных умолчаний и базовые стили
 * 3.  TYPOGRAPHY  — Заголовки, параграфы, утилитарные классы текста
 * 4.  LAYOUT      — Контейнер, секции
 * 5.  BUTTONS     — .btn, варианты типа/размера, группы, иконки
 * 6.  LINKS       — .link, .link--muted, .link--cta
 * 7.  FORMS       — .form__group, поля, select, textarea, checkbox, radio
 * 8.  CARDS       — .card, модификаторы, сетки
 * 9.  BADGES      — .badge, .spec-badge, модификаторы
 * 10. TOP-BAR     — тонкая верхняя полоса, скрыта на мобильном
 * 11. HEADER      — шапка с логотипом, иконками, CTA
 * 12. MAIN NAV    — горизонтальное меню, скрыто на планшете
 * 13. BREADCRUMBS — хлебные крошки
 * 14. FOOTER      — многоколоночный тёмный футер
 * 15. DROPDOWN    — выпадающее меню десктоп (CSS hover)
 * 16. MOBILE MENU — off-canvas панель + бургер-кнопка
 * 17. ASTRA OVR   — сброс отступов Astra-контейнеров
 * 18. TABS        — .tabs, вариант pills
 * 19. ACCORDION   — .accordion, анимированный аккордеон
 * 20. PAGINATION  — .pagination, постраничная навигация
 * 21. HERO        — hero-блок: base, --compact, --with-image; .btn--ghost-light → секция 5
 * 22. WIDGETS     — .widget, .widget--accent, .widget--empty, .widgets-grid
 * 23. MODALS      — .modal, 3 размера, backdrop, анимация
 * 24. TOAST       — .toast-container, .toast, 4 типа, анимации
 * 25. HOME PAGE   — .section__header, .cta-block, .geography, .card--service, homepage-specific
 * 26. PAGE TMPL   — .page, .single, .archive, .container--narrow, breadcrumbs__sep
 */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {

    /* ── Цвета бренда ──────────────────────────────────────── */
    --color-brand-red:       #C2202F;   /* основной красный из логотипа */
    --color-brand-red-dark:  #9A1825;   /* hover-состояние кнопок */
    --color-brand-red-light: #FEF2F2;   /* фон бейджей, подсветка активных строк */

    /* ── Текст ─────────────────────────────────────────────── */
    --color-text-primary:   #1A1A1A;   /* заголовки и основной текст */
    --color-text-secondary: #6B6B6B;   /* подписи, мета, второстепенный текст */
    --color-text-muted:     #9CA3AF;   /* отключённые элементы, плейсхолдеры */

    /* ── Фон ───────────────────────────────────────────────── */
    --color-bg-primary:    #FFFFFF;   /* основной фон страницы */
    --color-bg-alt:        #F7F8FA;   /* фон карточек, alt-секций */
    --color-graphite-dark: #1A1A1A;   /* тёмные секции, инверсный фон */

    /* ── Границы ───────────────────────────────────────────── */
    --color-border: #E5E7EB;   /* тонкие разделители, рамки карточек */

    /* ── Статусы ───────────────────────────────────────────── */
    --color-success: #22C55E;   /* «в наличии», успех */
    --color-warning: #F59E0B;   /* предупреждение */
    --color-error:   #C2202F;   /* ошибка (совпадает с брендом) */

    /* ── Тени (сохранены для совместимости) ────────────────── */
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-overlay: 0 10px 40px rgba(0, 0, 0, 0.15); /* модалки, тосты */

    /* ── Типографика: семейство ────────────────────────────── */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Типографика: размеры ──────────────────────────────── */
    --font-size-base: 16px;
    --font-size-xs:   12px;
    --font-size-sm:   14px;
    --font-size-md:   16px;
    --font-size-lg:   18px;
    --font-size-xl:   20px;
    --font-size-2xl:  24px;
    --font-size-3xl:  32px;
    --font-size-4xl:  40px;
    --font-size-5xl:  56px;

    /* ── Типографика: насыщенность ─────────────────────────── */
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    /* ── Типографика: межстрочный интервал ─────────────────── */
    --line-height-tight:   1.2;
    --line-height-snug:    1.35;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.65;

    /* ── Типографика: трекинг ──────────────────────────────── */
    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.08em;

    /* ── Отступы (8-точечная сетка) ────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ── Радиусы ───────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    /* ── Контейнеры ────────────────────────────────────────── */
    --container-max:             1280px;
    --container-padding-mobile:  16px;
    --container-padding-desktop: 32px;

    /* ── Z-индексы ─────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    1000;

    /* ── Переходы ──────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* ============================================================
   2. RESET
   ============================================================ */

/* Защита от горизонтального скролла.
   overflow-x: clip (а не hidden) — hidden на html/body продвигает
   overflow-y в auto (CSS quirk), что ломает position:sticky у потомков. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* Все секции и hero — гарантированно 100% ширины */
.hero,
.section,
.top-bar,
.header,
.footer {
    width: 100%;
    box-sizing: border-box;
}

/* На мобиле .alignfull не должен вылезать */
@media (max-width: 768px) {
    .alignfull {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

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

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

html body a {
    color: var(--color-brand-red);
    text-decoration: none;
    transition: var(--transition-fast);
}

html body a:hover {
    color: var(--color-brand-red-dark);
    text-decoration: underline;
}

button {
    font-family: inherit;
}

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    color: var(--color-text-primary);
}

h1, .h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-6);
}

h2, .h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-5);
}

h3, .h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-4);
}

h4, .h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-3);
}

h5, .h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-3);
}

h6, .h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-2);
}

p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.text-lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.text-small    { font-size: var(--font-size-sm); }
.text-xs       { font-size: var(--font-size-xs); }
.text-muted    { color: var(--color-text-secondary); }
.text-faint    { color: var(--color-text-muted); }
.text-center   { text-align: center; }

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

@media (max-width: 768px) {
    h1, .h1 { font-size: 32px; }
    h2, .h2 { font-size: 28px; }
    h3, .h3 { font-size: 24px; }
    h4, .h4 { font-size: 20px; }
}

/* ============================================================
   4. LAYOUT
   ============================================================ */

.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
}

@media (max-width: 768px) {
    .container {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }
}

.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

@media (max-width: 768px) {
    .section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }
}

.section--dark {
    background-color: var(--color-graphite-dark);
    color: #FFFFFF;
}

.section--dark h1, .section--dark .h1,
.section--dark h2, .section--dark .h2,
.section--dark h3, .section--dark .h3,
.section--dark h4, .section--dark .h4,
.section--dark h5, .section--dark .h5,
.section--dark h6, .section--dark .h6,
.section--dark p {
    color: #FFFFFF;
}

.section--alt {
    background-color: var(--color-bg-alt);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    line-height: 1;
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-brand-red);
    outline-offset: 2px;
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Types ─────────────────────────────────────────────────── */

.btn--primary {
    background-color: var(--color-brand-red);
    color: #FFFFFF;
    border-color: var(--color-brand-red);
}

.btn--primary:hover {
    background-color: var(--color-brand-red-dark);
    border-color: var(--color-brand-red-dark);
}

.btn--primary:active {
    background-color: var(--color-brand-red-dark);
    border-color: var(--color-brand-red-dark);
    transform: translateY(1px);
}

.btn--secondary {
    background-color: #FFFFFF;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn--secondary:hover {
    background-color: var(--color-bg-alt);
    border-color: #D1D5DB;
}

.btn--secondary:active {
    background-color: #EEF0F3;
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: transparent;
}

.btn--ghost:hover {
    color: var(--color-brand-red);
    background-color: transparent;
}

.btn--ghost:active {
    color: var(--color-brand-red-dark);
}

/* ── Sizes ─────────────────────────────────────────────────── */

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

/* ── Width ─────────────────────────────────────────────────── */

.btn--block {
    width: 100%;
}

/* ── Icon element ──────────────────────────────────────────── */

.btn__icon {
    display: inline-flex;
    align-items: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* ── Icon-only (square) ────────────────────────────────────── */

.btn--icon-only         { padding: var(--space-3); }
.btn--icon-only.btn--sm { padding: var(--space-2); }
.btn--icon-only.btn--lg { padding: var(--space-4); }

/* ── Button group ──────────────────────────────────────────── */

.btn-group {
    display: inline-flex;
    gap: var(--space-3);
}

.btn-group--tight {
    gap: var(--space-2);
}

.btn-group--block {
    display: flex;
    width: 100%;
}

.btn-group--block .btn {
    flex: 1;
}

/* ── Ghost-light: for CTAs on dark backgrounds (Hero) ──────── */

.btn--ghost-light {
    background-color: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* ============================================================
   6. LINKS
   ============================================================ */

.link {
    color: var(--color-brand-red);
    text-decoration: none;
    transition: var(--transition-fast);
}

.link:hover {
    color: var(--color-brand-red-dark);
    text-decoration: underline;
}

.link--muted {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.link--muted:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.link--cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand-red);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: var(--transition-fast);
}

.link--cta:hover {
    color: var(--color-brand-red-dark);
    gap: var(--space-3);
    text-decoration: none;
}

.link--cta::after {
    content: '→';
    transition: var(--transition-fast);
}

/* ============================================================
   7. FORMS
   ============================================================ */

/* ── Form wrapper ──────────────────────────────────────────── */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Field group ───────────────────────────────────────────── */

.form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Label ─────────────────────────────────────────────────── */

.form__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.form__required {
    color: var(--color-brand-red);
    margin-left: 2px;
}

/* ── Input / Textarea / Select — shared ────────────────────── */

.form__input,
.form__textarea,
.form__select {
    width: 100%;
    padding: var(--space-3) 14px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    line-height: 1.4;
}

.form__input:hover,
.form__textarea:hover,
.form__select:hover {
    border-color: #D1D5DB;
}

.form__input:focus,
.form__input:focus-visible,
.form__textarea:focus,
.form__textarea:focus-visible,
.form__select:focus,
.form__select:focus-visible {
    border-color: var(--color-brand-red);
    outline: 2px solid rgba(194, 32, 47, 0.15);
    outline-offset: 0;
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: var(--color-text-muted);
}

.form__input:disabled,
.form__textarea:disabled,
.form__select:disabled {
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* ── Textarea ──────────────────────────────────────────────── */

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

/* ── Select ────────────────────────────────────────────────── */

.form__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-10);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%236B6B6B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* ── Size modifiers ────────────────────────────────────────── */

.form__input--sm,
.form__select--sm,
.form__textarea--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.form__select--sm {
    padding-right: var(--space-10);
}

.form__input--lg,
.form__select--lg {
    padding: var(--space-4) 18px;
    font-size: var(--font-size-lg);
}

.form__select--lg {
    padding-right: var(--space-10);
}

/* ── Error state ───────────────────────────────────────────── */

.form__group--error .form__input,
.form__group--error .form__textarea,
.form__group--error .form__select {
    border-color: var(--color-brand-red);
}

.form__group--error .form__input:focus,
.form__group--error .form__input:focus-visible,
.form__group--error .form__textarea:focus,
.form__group--error .form__textarea:focus-visible,
.form__group--error .form__select:focus,
.form__group--error .form__select:focus-visible {
    outline-color: rgba(194, 32, 47, 0.2);
}

.form__error {
    font-size: var(--font-size-sm);
    color: var(--color-brand-red);
    margin-top: calc(var(--space-2) * -0.5);
}

/* ── Helper text ───────────────────────────────────────────── */

.form__helper {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ── Input with icon ───────────────────────────────────────── */

.form__input-wrapper {
    position: relative;
}

.form__input-wrapper .form__input {
    padding-left: var(--space-10);
}

.form__input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.form__input-icon--right {
    left: auto;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
}

/* ── Checkbox ──────────────────────────────────────────────── */

.form__checkbox,
.form__radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    user-select: none;
}

.form__checkbox input,
.form__radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form__checkbox-mark,
.form__radio-mark {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    transition: var(--transition-fast);
    margin-top: 1px;
}

.form__checkbox-mark {
    border-radius: var(--radius-sm);
}

.form__radio-mark {
    border-radius: 50%;
}

.form__checkbox:hover .form__checkbox-mark,
.form__radio:hover .form__radio-mark {
    border-color: #D1D5DB;
}

/* Checked */

.form__checkbox input:checked + .form__checkbox-mark {
    background-color: var(--color-brand-red);
    border-color: var(--color-brand-red);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.form__radio input:checked + .form__radio-mark {
    border-color: var(--color-brand-red);
    background-image: radial-gradient(circle, var(--color-brand-red) 40%, transparent 45%);
}

/* Focus */

.form__checkbox input:focus-visible + .form__checkbox-mark,
.form__radio input:focus-visible + .form__radio-mark {
    outline: 2px solid rgba(194, 32, 47, 0.2);
    outline-offset: 2px;
}

/* Disabled */

.form__checkbox input:disabled ~ *,
.form__radio input:disabled ~ * {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Choice groups ─────────────────────────────────────────── */

.form__choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form__choices--inline {
    flex-direction: row;
    gap: var(--space-4);
}

/* ============================================================
   8. CARDS
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */

.card {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-fast);
}

/* ── Media ─────────────────────────────────────────────────── */

.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg-alt);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Body ──────────────────────────────────────────────────── */

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

/* ── Elements ──────────────────────────────────────────────── */

.card__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
    margin: 0;
}

.card__description {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: auto;
}

.card__footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

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

/* ── Modifiers ─────────────────────────────────────────────── */

.card--link {
    cursor: pointer;
}

.card--link:hover {
    border-color: #D1D5DB;
}

.card--link:hover .card__title {
    color: var(--color-brand-red);
}

.card--compact .card__body {
    padding: var(--space-4);
}

.card--borderless {
    border: none;
    background-color: transparent;
}

.card--horizontal {
    flex-direction: row;
}

.card--horizontal .card__media {
    aspect-ratio: 1 / 1;
    width: 200px;
    flex-shrink: 0;
}



/* ── Stat card ─────────────────────────────────────────────── */

.card--stat {
    background-color: transparent;
    border: none;
    align-items: flex-start;
}

.card--stat .card__number {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: var(--letter-spacing-tight);
}

.card--stat .card__label {
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--space-3);
}

/* ── Grids ─────────────────────────────────────────────────── */

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

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

@media (max-width: 1024px) {
    .cards-grid--3,
    .cards-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cards-grid--2,
    .cards-grid--3,
    .cards-grid--4 {
        grid-template-columns: 1fr;
    }

    .card--horizontal {
        flex-direction: column;
    }

    .card--horizontal .card__media {
        width: 100%;
    }
}

/* ── Device card (ЛК) ──────────────────────────────────────── */

.device-card__section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
}

.device-card__files {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.device-card__file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    gap: var(--space-4);
}

.device-card__file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.device-card__file-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-card__file-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.device-card__actions {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 480px) {
    .device-card__file {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   9. BADGES
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ── Color modifiers ───────────────────────────────────────── */

.badge--primary {
    background-color: var(--color-brand-red-light);
    color: var(--color-brand-red);
}

.badge--neutral {
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
}

.badge--success {
    background-color: #DCFCE7;
    color: #15803D;
}

.badge--warning {
    background-color: #FEF3C7;
    color: #B45309;
}

.badge--danger {
    background-color: #FEE2E2;
    color: #B91C1C;
}

.badge--outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

/* ── Size ──────────────────────────────────────────────────── */

.badge--sm {
    padding: 2px 8px;
    font-size: 11px;
}

/* ── Dot indicator ─────────────────────────────────────────── */

.badge--dot {
    gap: var(--space-2);
}

.badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ── Counter ───────────────────────────────────────────────── */

.badge--counter {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    justify-content: center;
}

/* ── Spec badge ────────────────────────────────────────────── */

.spec-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-width: 120px;
}

.spec-badge__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.spec-badge__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   10. TOP-BAR
   ============================================================ */

.top-bar {
    background-color: var(--color-graphite-dark);
    color: #FFFFFF;
    padding: 0;
    line-height: 1.4;
}

.top-bar__inner,
.top-bar__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 8px var(--container-padding-desktop);
    font-size: 13px;
}

.top-bar__left,
.top-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.top-bar__city {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #FFFFFF;
}

.top-bar__city::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--color-brand-red);
    border-radius: 50%;
}

.top-bar__phone {
    color: #FFFFFF;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.top-bar__hours {
    color: rgba(255, 255, 255, 0.6);
}

.top-bar__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: var(--transition-fast);
}

.top-bar__link:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.top-bar__divider {
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

/* Specificity overrides — Astra baseline reset */
.top-bar .top-bar__link,
.top-bar .top-bar__phone,
.top-bar__link.top-bar__link {
    text-decoration: none;
}

.top-bar .top-bar__link:hover {
    text-decoration: none;
    color: #FFFFFF;
}

/* !important overrides — beats Astra high-specificity rules */
.top-bar a,
.top-bar__link,
.top-bar__phone {
    text-decoration: none !important;
}

.top-bar a:hover,
.top-bar__link:hover {
    text-decoration: none !important;
}

/* Full-width breakout — override Astra container constraint */
.top-bar {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================================
   11. HEADER
   ============================================================ */

.header {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) 0;
}

.header__inner,
.header__container {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}

/* ── Logo ──────────────────────────────────────────────────── */

.header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    text-decoration: none;
    color: var(--color-text-primary);
}

.header__logo img {
    height: 40px;
    width: auto;
    display: block;
}

.header__logo-mark {
    width: 40px;
    height: 40px;
    background-color: var(--color-brand-red);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.header__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.header__logo-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.header__logo-tagline {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-top: 2px;
}

/* ── Nav wrapper ───────────────────────────────────────────── */

.header__nav-wrapper {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* ── Actions ───────────────────────────────────────────────── */

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

.header__icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.header__icon-btn:hover {
    border-color: #D1D5DB;
    color: var(--color-brand-red);
}

/* ── CTA button ────────────────────────────────────────────── */

.header__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Pill-форма + плотные внутренние отступы — выглядит как «бейдж пользователя» */
    padding: 10px 18px 10px 14px !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px -6px rgba(194, 32, 47, 0.45);
    transition: background-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.header__cta:hover {
    background-color: var(--color-brand-red-dark) !important;
    box-shadow: 0 8px 20px -6px rgba(194, 32, 47, 0.55);
    transform: translateY(-1px);
}
.header__cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px -6px rgba(194, 32, 47, 0.5);
}
.header__cta svg {
    flex-shrink: 0;
    /* Иконка в кружке для контраста */
    width: 22px;
    height: 22px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .header__nav-wrapper {
        display: none;
    }
}

@media (max-width: 768px) {
    .header__icon-btn--desktop-only {
        display: none;
    }

    .header__inner,
    .header__container {
        padding: 0 var(--container-padding-mobile);
    }
}

/* Specificity overrides — Astra baseline reset */
.header .header__logo,
.header .header__logo:hover {
    text-decoration: none;
}

.header .header__icon-btn {
    text-decoration: none;
}

/* !important overrides — beats Astra high-specificity rules */
.header a,
.header__logo,
.header__icon-btn {
    text-decoration: none !important;
}

.header__icon-btn:hover {
    text-decoration: none !important;
}

/* Full-width breakout — override Astra container constraint */
.header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================================
   12. MAIN NAV
   ============================================================ */

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition-fast);
    line-height: 1.4;
}

.nav__link:hover {
    color: var(--color-brand-red);
    text-decoration: none;
}

.nav__link--active {
    color: var(--color-brand-red);
}

.nav__link--has-children::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: var(--space-2);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: var(--transition-fast);
}

@media (max-width: 1024px) {
    .nav {
        display: none;
    }
}

/* Specificity overrides — Astra baseline reset */
.header .nav,
.nav.nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header .nav__link,
.nav__link.nav__link {
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) 0;
    color: var(--color-text-primary);
}

.header .nav__link:hover,
.nav__link.nav__link:hover {
    color: var(--color-brand-red);
    text-decoration: none;
}

.header .nav__link.nav__link--active {
    color: var(--color-brand-red);
}

/* !important overrides — beats Astra high-specificity rules */
.nav a,
.nav__link,
.nav__link.nav__link {
    text-decoration: none !important;
    white-space: nowrap;
}

.nav__link:hover,
.nav a:hover {
    text-decoration: none !important;
}

.nav__link {
    white-space: nowrap !important;
}

/* ============================================================
   13. BREADCRUMBS
   ============================================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    list-style: none;
    padding: 0;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumbs__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.breadcrumbs__link:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.breadcrumbs__item--current .breadcrumbs__link,
.breadcrumbs__item--current span {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.breadcrumbs__separator {
    color: var(--color-text-muted);
    user-select: none;
}

/* Specificity overrides — Astra baseline reset */
.breadcrumbs .breadcrumbs__link,
.breadcrumbs__link.breadcrumbs__link {
    text-decoration: none;
    color: var(--color-text-secondary);
}

.breadcrumbs .breadcrumbs__link:hover {
    text-decoration: none;
    color: var(--color-text-primary);
}

/* !important overrides — beats Astra high-specificity rules */
.breadcrumbs a,
.breadcrumbs__link {
    text-decoration: none !important;
}

.breadcrumbs a:hover {
    text-decoration: none !important;
}

/* ============================================================
   14. FOOTER
   ============================================================ */

.footer {
    background-color: #1A1A1A;
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-16) 0 var(--space-6);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}

.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer__brand-text {
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--line-height-relaxed);
}

.footer__column-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 var(--space-2) 0;
}

.footer__link {
    display: inline-block;
    /* Увеличили непрозрачность с 0.6 до 0.85 для прохождения WCAG AA (4.5:1) */
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 2px 0;
    transition: var(--transition-fast);
}

.footer__link:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.footer__contact-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer__contact-label {
    font-size: var(--font-size-xs);
    /* Подняли с 0.5 до 0.78 для прохождения contrast-теста */
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.footer__contact-value {
    color: #FFFFFF;
    font-weight: var(--font-weight-medium);
}

.footer__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: var(--space-10) 0 var(--space-6);
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    /* Подняли с 0.4 до 0.7 для контраста */
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-xs);
}

.footer__legal-links {
    display: flex;
    gap: var(--space-6);
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .footer__top {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 768px) {
    .footer__top {
        grid-template-columns: 1fr;
    }

    .footer__inner {
        padding: 0 var(--container-padding-mobile);
    }
}

/* Specificity overrides — Astra baseline reset */
.footer .footer__link,
.footer__link.footer__link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
}

.footer .footer__link:hover {
    text-decoration: none;
    color: #FFFFFF;
}

/* !important overrides — beats Astra high-specificity rules */
.footer a,
.footer__link {
    text-decoration: none !important;
}

.footer a:hover,
.footer__link:hover {
    text-decoration: none !important;
}

/* Full-width breakout — override Astra container constraint */
.footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================================
   15. DROPDOWN
   ============================================================ */

.nav__item--has-dropdown {
    position: relative;
}

.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-top: var(--space-2);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--space-2)));
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
/* Невидимый «мост» — перекрывает margin-top gap чтобы при движении
   мыши с пункта меню на выпадашку hover не терялся. */
.nav__dropdown::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--space-2) - 4px);
    left: 0;
    right: 0;
    height: calc(var(--space-2) + 4px);
    /* прозрачная зона — нужна только для удержания hover */
    z-index: var(--z-dropdown);
}

.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__dropdown-item {
    list-style: none;
}

.nav__dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.nav__dropdown-link:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-brand-red);
    text-decoration: none;
}

.nav__dropdown-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.nav__dropdown-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-2) 0;
}

.nav__dropdown--wide {
    min-width: 480px;
}

@media (max-width: 1024px) {
    .nav__dropdown {
        display: none;
    }
}

/* Specificity overrides — Astra baseline reset */
.nav__dropdown .nav__dropdown-link,
.nav__dropdown-link.nav__dropdown-link {
    text-decoration: none;
}

/* !important overrides — beats Astra high-specificity rules */
.nav__dropdown a,
.nav__dropdown-link {
    text-decoration: none !important;
}

/* ── Second-level submenu ───────────────────────────────────── */

.nav__dropdown-item--has-children {
    position: relative;
}

.nav__dropdown-item--has-children > .nav__dropdown-link {
    padding-right: var(--space-3);
}

.nav__dropdown-item--has-children > .nav__dropdown-link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--space-2);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.nav__dropdown--sub {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: var(--space-2);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

.nav__dropdown-item--has-children:hover > .nav__dropdown--sub,
.nav__dropdown-item--has-children:focus-within > .nav__dropdown--sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.nav__dropdown-item--has-children:hover > .nav__dropdown-link {
    background-color: var(--color-bg-alt);
    color: var(--color-brand-red);
}

/* ── Catalog dropdown (two-column: categories + products) ──── */

.dropdown--catalog {
    display: flex;
    gap: 0;
    padding: 0;
    min-width: 600px;
}

.dropdown__categories {
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
    min-width: 220px;
    border-right: 1px solid var(--color-border);
    flex-shrink: 0;
}

.dropdown__category > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: 0;
    transition: var(--transition-fast);
}

.dropdown__category.is-active > a,
.dropdown__category:hover > a {
    background-color: var(--color-bg-alt);
    color: var(--color-brand-red);
}

.dropdown__products {
    flex: 1;
    padding: var(--space-3);
    min-width: 0;
}

.dropdown__products-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown__products-list.is-active {
    display: block;
}

.dropdown__products-list li a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.dropdown__products-list li a:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-brand-red);
    text-decoration: none;
}

/* ============================================================
   КАТАЛОГ-МЕГАМЕНЮ
   ============================================================ */

.nav__item--catalog {
    position: relative;
}

.catalog-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    min-width: 720px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    margin-top: 4px;
    overflow: visible;  /* нужно для ::before bridge */
}
/* Невидимый мост для удержания hover при движении мыши на мегаменю */
.catalog-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav__item--catalog:hover .catalog-menu,
.nav__item--catalog:focus-within .catalog-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* Левая колонка — категории */
.catalog-menu__categories {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 400px;
    background: var(--color-bg-alt);
    border-right: 1px solid var(--color-border);
}

.catalog-menu__category {
    margin: 0;
}

.catalog-menu__category > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

.catalog-menu__category > a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
    margin-left: 12px;
    flex-shrink: 0;
}

.catalog-menu__category:hover > a,
.catalog-menu__category.is-active > a {
    background: #fff;
    color: var(--color-brand-red);
}

.catalog-menu__category--archive {
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    padding-top: 8px;
}

/* Правая колонка — приборы */
.catalog-menu__products {
    flex: 1;
    padding: 8px 0;
    min-width: 280px;
}

.catalog-menu__products-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-menu__products-list.is-active {
    display: block;
}

.catalog-menu__products-list li {
    margin: 0;
}

.catalog-menu__products-list li a {
    display: block;
    padding: 10px 24px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}

.catalog-menu__products-list li a:hover {
    background: var(--color-bg-alt);
    color: var(--color-brand-red);
}

@media (max-width: 1024px) {
    .catalog-menu {
        display: none !important;
    }
}

/* ============================================================
   16. MOBILE MENU
   ============================================================ */

/* ── Burger ─────────────────────────────────────────────────── */

.header__burger {
    display: none;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.header__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: var(--transition-fast);
}

.header__burger.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.header__burger.is-open span:nth-child(2) {
    opacity: 0;
}

.header__burger.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
    .header__burger {
        display: inline-flex;
    }
}

/* ── Off-canvas panel ──────────────────────────────────────── */

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 100vw);
    background-color: #FFFFFF;
    z-index: var(--z-modal);
    padding: var(--space-6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 300ms ease;
    visibility: hidden;
}

.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* ── Overlay ────────────────────────────────────────────────── */

.mobile-menu__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.mobile-menu__overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ── Close button ──────────────────────────────────────────── */

.mobile-menu__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}

.mobile-menu__close:hover {
    color: var(--color-brand-red);
}

/* ── Header inside panel ────────────────────────────────────── */

.mobile-menu__header {
    margin-bottom: var(--space-6);
    padding-right: 56px;
}

/* ── Nav list ───────────────────────────────────────────────── */

.mobile-menu__nav {
    list-style: none;
    margin: 0 0 var(--space-6) 0;
    padding: 0;
}

.mobile-menu__item {
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition-fast);
}

.mobile-menu__link:hover {
    color: var(--color-brand-red);
    text-decoration: none;
}

/* Accordion arrow for parent items */

.mobile-menu__item--has-children > .mobile-menu__link::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.mobile-menu__item.is-open > .mobile-menu__link::after {
    transform: rotate(-135deg);
}

/* ── Submenu (accordion) ────────────────────────────────────── */

.mobile-menu__submenu {
    list-style: none;
    padding: 0 0 var(--space-4) var(--space-4);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.mobile-menu__item.is-open > .mobile-menu__submenu {
    max-height: 1000px;
}

.mobile-menu__sublink {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    text-decoration: none;
    transition: var(--transition-fast);
}

.mobile-menu__sublink:hover {
    color: var(--color-brand-red);
}

/* ── Contacts block ─────────────────────────────────────────── */

.mobile-menu__contacts {
    margin-bottom: var(--space-6);
}

.mobile-menu__phone {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.mobile-menu__hours {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ── Body scroll lock ───────────────────────────────────────── */

body.menu-open {
    overflow: hidden;
}

/* Specificity overrides — Astra baseline reset */
.mobile-menu .mobile-menu__link,
.mobile-menu .mobile-menu__sublink,
.mobile-menu .mobile-menu__phone {
    text-decoration: none;
}

/* !important overrides — beats Astra high-specificity rules */
.mobile-menu a,
.mobile-menu__link,
.mobile-menu__sublink,
.mobile-menu__phone {
    text-decoration: none !important;
}

/* ============================================================
   17. ОВЕРРАЙДЫ ASTRA-КОНТЕЙНЕРОВ
   Когда мы выводим собственный header/footer внутри контента страницы,
   стандартные верхние/нижние отступы Astra-контейнера лишние.
   На реальных шаблонах сайта (single-product, archive и т.д.) это тоже понадобится,
   потому что мы сами управляем отступами своих секций.
   ============================================================ */

.ast-plain-container.ast-no-sidebar #primary,
.ast-page-builder-template.ast-no-sidebar #primary {
    margin-top: 0;
    margin-bottom: 0;
}

.entry-content[data-ast-blocks-layout] > .top-bar.alignfull:first-child {
    margin-top: 0;
}

/* ============================================================
   18. TABS
   ============================================================ */

.tabs {
    display: block;
    margin: var(--space-8) 0;
}

/* ── Tab list ───────────────────────────────────────────────── */

.tabs__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
    display: none;
}

/* ── Tab button ─────────────────────────────────────────────── */

.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.tabs__tab:hover {
    color: var(--color-text-primary);
}

/* Сбрасываем стили <button> из Astra parent (брендовая заливка)
   и браузерные :focus/:active фоны — у нас минималистичный underline-вариант. */
.tabs__tab,
.tabs__tab:hover,
.tabs__tab:focus,
.tabs__tab:focus-visible,
.tabs__tab:active,
.tabs__tab.is-active {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.tabs__tab.is-active {
    color: var(--color-brand-red);
    border-bottom-color: var(--color-brand-red);
    font-weight: var(--font-weight-semibold);
}

/* Focus-индикатор для доступности (вместо нативного outline браузера) */
.tabs__tab:focus-visible {
    outline: 2px solid var(--color-brand-red);
    outline-offset: -2px;
}

.tabs__tab-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

/* ── Panels ─────────────────────────────────────────────────── */

.tabs__panel {
    display: none;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    width: 0;
    height: 0;
}

.tabs__panel.is-active {
    display: block;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
    position: static;
    width: auto;
    height: auto;
    animation: tabsFadeIn 200ms ease;
}

@keyframes tabsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Pills variant ──────────────────────────────────────────── */

.tabs--pills .tabs__list {
    border-bottom: none;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.tabs--pills .tabs__tab {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    margin-bottom: 0;
}

.tabs--pills .tabs__tab.is-active {
    background-color: var(--color-brand-red);
    color: #FFFFFF;
    border-color: var(--color-brand-red);
}

/* ============================================================
   19. ACCORDION
   ============================================================ */

.accordion {
    display: flex;
    flex-direction: column;
}

/* ── Item ───────────────────────────────────────────────────── */

.accordion__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: #FFFFFF;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

/* ── Trigger ────────────────────────────────────────────────── */

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background-color: transparent;
    border: none;
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.accordion__trigger:hover {
    background-color: var(--color-bg-alt);
}

.accordion__item.is-open .accordion__trigger {
    background-color: var(--color-bg-alt);
}

/* ── Title ──────────────────────────────────────────────────── */

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

.accordion__subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

/* ── Icon (+ / ×) ───────────────────────────────────────────── */

.accordion__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    transition: transform 200ms ease;
}

.accordion__icon::before,
.accordion__icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-text-primary);
    transition: transform 200ms ease, opacity 200ms ease;
}

.accordion__icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    margin-top: -1px;
}

.accordion__icon::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
}

.accordion__item.is-open .accordion__icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* ── Content ────────────────────────────────────────────────── */

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease;
}

.accordion__item.is-open .accordion__content {
    max-height: 5000px;
}

.accordion__inner {
    padding: var(--space-2) var(--space-6) var(--space-6);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* ============================================================
   20. PAGINATION
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-8) 0;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-fast);
}

.pagination__item:hover {
    border-color: #D1D5DB;
    color: var(--color-brand-red);
    text-decoration: none;
}

.pagination__item.is-active {
    background-color: var(--color-brand-red);
    color: #FFFFFF;
    border-color: var(--color-brand-red);
    cursor: default;
    pointer-events: none;
}

.pagination__item--prev,
.pagination__item--next {
    font-size: var(--font-size-lg);
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    user-select: none;
}

/* ============================================================
   21. HERO
   ============================================================ */

.hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #1a0300;
}

.hero--compact {
    min-height: 320px;
}

.hero--with-image {
    background-size: cover;
    background-position: center;
}

/* ── Container ──────────────────────────────────────────────── */

.hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-16) var(--container-padding-desktop);
}

/* ── Content ────────────────────────────────────────────────── */

.hero__content {
    max-width: 720px;
}

.hero__eyebrow {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.hero__title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: var(--space-6);
}

.hero__subtitle {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-10);
    max-width: 600px;
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hero__container {
        padding: var(--space-12) var(--container-padding-mobile);
    }

    .hero__subtitle {
        font-size: var(--font-size-md);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Hero buttons ───────────────────────────────────────────── */

.btn--hero-dark {
    background: #111;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.btn--hero-dark:hover,
.btn--hero-dark:focus {
    border-color: rgba(255, 255, 255, 0.9);
    background: #111;
    color: #fff;
}

.btn--hero-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn--hero-outline:hover,
.btn--hero-outline:focus {
    border-color: rgba(255, 255, 255, 0.9);
    background: transparent;
    color: #fff;
}

/* ============================================================
   22. WIDGETS
   ============================================================ */

/* ── Grid ───────────────────────────────────────────────────── */

.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

/* ── Base widget ────────────────────────────────────────────── */

.widget {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.widget__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.widget__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 var(--space-2);
    background-color: var(--color-bg-alt);
    color: var(--color-text-primary);
    border-radius: var(--radius-xl);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

/* ── List ───────────────────────────────────────────────────── */

.widget__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget__list-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.widget__list-item:last-child {
    border-bottom: none;
}

.widget__list-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-decoration: none;
}

.widget__list-link:hover .widget__list-title {
    color: var(--color-brand-red);
}

.widget__list-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.widget__list-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ── Footer ─────────────────────────────────────────────────── */

.widget__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.widget__link {
    font-size: var(--font-size-sm);
    color: var(--color-brand-red);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition-fast);
}

.widget__link:hover {
    color: var(--color-brand-red-dark);
    text-decoration: none;
}

/* ── Accent modifier ────────────────────────────────────────── */

.widget--accent {
    border-color: var(--color-brand-red);
}

.widget--accent .widget__header {
    background-color: var(--color-brand-red-light);
    padding: var(--space-4) var(--space-6);
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4) calc(-1 * var(--space-6));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.widget--accent .widget__title {
    color: var(--color-brand-red);
}

.widget--accent .widget__count {
    background-color: var(--color-brand-red);
    color: #FFFFFF;
}

/* ── Empty state ────────────────────────────────────────────── */

.widget__empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.widget__empty-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    color: var(--color-text-muted);
}

.widget__empty-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ============================================================
   23. MODALS
   ============================================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    display: none;
}

.modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Overlay ────────────────────────────────────────────────── */

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(2px);
}

/* ── Container ──────────────────────────────────────────────── */

.modal__container {
    position: relative;
    background-color: #FFFFFF;
    border-radius: var(--radius-xl);
    max-width: 560px;
    width: calc(100% - var(--space-8));
    max-height: calc(100vh - var(--space-16));
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-overlay);
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── Size modifiers ─────────────────────────────────────────── */

.modal--sm .modal__container { max-width: 400px; }
.modal--lg .modal__container { max-width: 800px; }

/* ── Header ─────────────────────────────────────────────────── */

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.modal__close:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-text-primary);
}

/* ── Body ───────────────────────────────────────────────────── */

.modal__body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
}

.modal__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* ── Footer ─────────────────────────────────────────────────── */

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .modal__container {
        width: calc(100% - var(--space-4));
    }

    .modal__header,
    .modal__body,
    .modal__footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* ============================================================
   24. TOAST
   ============================================================ */

/* ── Container ──────────────────────────────────────────────── */

.toast-container {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: calc(var(--z-modal) + 100);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

/* ── Toast ──────────────────────────────────────────────────── */

.toast {
    pointer-events: auto;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-left: 4px solid currentColor;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    min-width: 320px;
    max-width: 420px;
    animation: toastSlideIn 0.3s ease-out;
}

/* ── Color modifiers ────────────────────────────────────────── */

.toast--success { color: var(--color-success); }
.toast--info    { color: var(--color-text-secondary); }
.toast--warning { color: var(--color-warning); }
.toast--error   { color: var(--color-brand-red); }

/* ── Elements ───────────────────────────────────────────────── */

.toast__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast__content {
    flex: 1;
    color: var(--color-text-primary);
}

.toast__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-1) 0;
}

.toast__text {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.toast__close {
    flex-shrink: 0;
    background-color: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.toast__close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-alt);
}

/* ── Animations ─────────────────────────────────────────────── */

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0);    }
    to   { opacity: 0; transform: translateX(20px); }
}

.toast.is-hiding {
    animation: toastSlideOut 0.2s ease-in forwards;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .toast-container {
        top: var(--space-4);
        left: var(--space-4);
        right: var(--space-4);
        align-items: stretch;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ============================================================
   25. HOME PAGE — секции и компоненты главной страницы
   ============================================================ */

/* ── Section header ─────────────────────────────────────────── */

.section__header {
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: var(--line-height-tight);
}

.section__subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-normal);
}

.section__footer {
    text-align: center;
    margin-top: var(--space-8);
}

.section__empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    padding: var(--space-12) 0;
}

/* Dark section overrides (heading classes, not elements) */
.section--dark .section__title {
    color: #FFFFFF;
}

.section--dark .section__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Section CTA variant ────────────────────────────────────── */

.section--cta {
    background-color: var(--color-bg-alt);
}

/* ── Card service ───────────────────────────────────────────── */

.card--service .card__link {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-red);
}

.card--service:hover .card__link {
    color: var(--color-brand-red-dark);
}

/* ── Post card (publications) ───────────────────────────────── */

.card--post .card__media {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    margin-bottom: 0;
}

.card--post .card__media .card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
}

.card--post .card__media-placeholder {
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ── Card media helpers ─────────────────────────────────────── */

.card__media-placeholder {
    width: 100%;
    height: 200px;
    background-color: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* ── Geography block ────────────────────────────────────────── */

.geography__map {
    margin: var(--space-8) 0 var(--space-12) 0;
}

.geography__map-placeholder {
    height: 320px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--font-size-sm);
}

.geography__stats {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* ── CTA block ──────────────────────────────────────────────── */

.cta-block {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-8);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.cta-block__title {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: var(--line-height-tight);
}

.cta-block__text {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-8) 0;
    line-height: var(--line-height-normal);
}

.cta-block__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .section__title {
        font-size: var(--font-size-2xl);
    }

    .section__header {
        margin-bottom: var(--space-8);
    }

    .cta-block {
        padding: var(--space-8) var(--space-5);
    }

    .cta-block__title {
        font-size: var(--font-size-2xl);
    }
}

/* ============================================================
   26. PAGE TEMPLATES — .page, .single, .archive
   ============================================================ */

/* ── Narrow container ───────────────────────────────────────── */

.container--narrow {
    max-width: 800px;
}

/* ── Main wrappers ──────────────────────────────────────────── */

main.page,
main.archive,
main.single,
main.single-course,
main.single-product {
    padding-top: var(--space-10);
    padding-bottom: var(--space-20);
}

@media (max-width: 768px) {
    main.page,
    main.archive,
    main.single,
    main.single-product {
        padding-top: var(--space-6);
        padding-bottom: var(--space-12);
    }
}

/* ── Page ───────────────────────────────────────────────────── */

.page__header {
    margin-bottom: var(--space-8);
}

.page__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.page__content {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .page__title {
        font-size: var(--font-size-3xl);
    }
}

/* ── Archive ────────────────────────────────────────────────── */



.archive__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--line-height-tight);
}

.archive__subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);

}

.archive__tabs {
    display: flex;
    gap: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-10);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.archive__tabs::-webkit-scrollbar {
    display: none;
}

.archive__tab {
    padding: var(--space-3) 0;
    font-size: 15px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.archive__tab:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.archive__tab.is-active {
    color: var(--color-brand-red);
    border-bottom-color: var(--color-brand-red);
    font-weight: var(--font-weight-medium);
}

.archive__empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

@media (max-width: 768px) {
    .archive__title {
        font-size: var(--font-size-3xl);
    }
}

/* ── Single ─────────────────────────────────────────────────── */

/* .breadcrumbs already defined in section 13; add __sep alias */
.breadcrumbs__sep {
    color: var(--color-text-muted);
    user-select: none;
}

.single__header {
    margin-bottom: var(--space-6);
}

.single__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.single__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.single__title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.single__cover {
    margin: var(--space-8) calc(-1 * var(--container-padding-desktop));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.single__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.single__content {
    font-size: 17px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

.single__content h2 {
    margin-top: var(--space-10);
}

.single__content p {
    margin-bottom: 1.2em;
}

@media (max-width: 768px) {
    .single__title {
        font-size: var(--font-size-3xl);
    }

    .single__cover {
        margin-left: calc(-1 * var(--container-padding-mobile));
        margin-right: calc(-1 * var(--container-padding-mobile));
        border-radius: 0;
    }
}

/* ── Simple dropdown (single-level, e.g. «Публикации») ──────── */

.nav__dropdown--simple {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    list-style: none;
    margin: 4px 0 0 0;
    padding: 8px 0;
    min-width: 220px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    z-index: var(--z-dropdown);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.nav__item--has-dropdown:hover > .nav__dropdown--simple,
.nav__item--has-dropdown:focus-within > .nav__dropdown--simple {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.nav__dropdown--simple .nav__dropdown-link {
    display: block;
    padding: 10px 20px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav__dropdown--simple .nav__dropdown-link:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-brand-red);
    text-decoration: none;
}

/* ── Archive JS filter empty state ─────────────────────────── */

.archive__filtered-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-secondary);
    font-size: 15px;
}

/* ── Product card (catalog) ─────────────────────────────────── */

.card--product {
    display: flex;
    flex-direction: column;
}

.card--product .card__body {
    flex: 1;
}

.card--product .card__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.card--product .card__footer {
    padding: 0 var(--space-6) var(--space-5) var(--space-6);
    margin-top: auto;
}

.card--product .card__link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-red);
    transition: gap var(--transition-fast);
}

.card--product:hover .card__link-arrow {
    gap: var(--space-2);
}

.catalog-category .breadcrumbs {
    margin-bottom: var(--space-4);
}

/* ============================================================
   КАРТОЧКА МОДЕЛИ (single-product.php)
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */

.product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin: var(--space-6) 0 var(--space-16) 0;
    align-items: start;
}

.product-hero__media {
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-hero__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-hero__placeholder {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ── Галерея с миниатюрами (product-gallery.js) ───────────────── */

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
}

.product-gallery__main {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    flex: 1;
}

.product-gallery__main-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.product-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Иконка зума — плавающая, в углу, появляется по hover */
.product-gallery__main-btn::after {
    content: '';
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-primary);
    box-shadow: var(--shadow-md);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.product-gallery__main-btn:hover::after {
    opacity: 1;
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.product-gallery__thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    transition: var(--transition-fast);
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-gallery__thumb:hover {
    opacity: 0.85;
}

.product-gallery__thumb.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--color-brand-red);
}

@media (max-width: 900px) {
    .product-gallery__thumb {
        width: 52px;
        height: 52px;
    }
}

.product-hero__info {
    padding-top: var(--space-2);
}

.product-hero__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

.product-hero__title {
    font-size: 44px;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.product-hero__description {
    font-size: 17px;
    line-height: var(--line-height-snug);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.product-hero__specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.product-hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .product-hero {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .product-hero__title {
        font-size: var(--font-size-3xl);
    }
}

/* ── Tabs ───────────────────────────────────────────────────── */

.product-tabs {
    margin-bottom: var(--space-16);
}

.tabs__empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

/* ── Rich content ───────────────────────────────────────────── */

.rich-content {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* Параграфы — чуть больше воздуха, ровный нижний отступ */
.rich-content p {
    margin: 0 0 16px 0;
}

/* Заголовки.
   H2 — «секция» с тонкой подложкой-подчёркиванием.
   H3 — акцент брендовым красным, без подчёркивания.
   H4 — пиктово, тонкий заглавный «лейбл». */
.rich-content h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
    margin: 40px 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.rich-content h2:first-child {
    margin-top: 0;
}

.rich-content h3 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-brand-red);
    letter-spacing: -0.005em;
    margin: 28px 0 10px 0;
}

.rich-content h4 {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 20px 0 6px 0;
}

/* Списки.
   Маркер — небольшой красный кружок (вместо браузерного диска),
   нумерованные — обычные цифры, но крупнее и тёмнее. */
.rich-content ul {
    list-style: none;
    padding-left: 6px;
    margin: 0 0 16px 0;
}

.rich-content ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.rich-content ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-red);
}

.rich-content ol {
    padding-left: 22px;
    margin: 0 0 16px 0;
}

.rich-content ol li {
    padding-left: 6px;
    margin-bottom: 8px;
}

.rich-content ol li::marker {
    color: var(--color-brand-red);
    font-weight: 800;
}

/* Вложенные списки */
.rich-content ul ul,
.rich-content ul ol,
.rich-content ol ul,
.rich-content ol ol {
    margin: 8px 0 0 0;
}

/* Таблицы. Современный «карточный» вид:
   - скруглённые углы и тонкая внешняя рамка
   - шапка — светло-серый фон, жирный
   - чередование строк
   - без хирургически точных бордюров между ячейками
   - лёгкая тень, чтобы таблица «приподнималась» над фоном */
.rich-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.rich-content table th,
.rich-content table td {
    padding: 13px 18px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.rich-content table th {
    background: var(--color-bg-alt);
    font-weight: 800;
    color: var(--color-text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
}

/* Зебра — чередование строк */
.rich-content table tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.015);
}

.rich-content table tbody tr:last-child td {
    border-bottom: none;
}

.rich-content table tbody tr:hover td {
    background: rgba(225, 27, 34, 0.025);
}

/* Если у таблицы нет <thead>, первая строка может содержать th внутри tbody — поправим радиус */
.rich-content table tr:first-child th:first-child { border-top-left-radius: 11px; }
.rich-content table tr:first-child th:last-child  { border-top-right-radius: 11px; }

/* Legacy-классы из HTML старого сайта (паспорта приборов).
   Позволяют вставлять старую разметку verbatim без переверстки. */
.rich-content .otstup {
    display: inline-block;
    padding-left: var(--space-4);
}

.rich-content .comment {
    margin: calc(var(--space-1) * -1) 0 var(--space-5) 0;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: var(--font-size-sm);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-border);
}

/* .dots на старом сайте создавал "leader-dots" эффект. В новом дизайне
   рамки таблицы уже разделяют ячейки, эффект не нужен — оставляем
   контейнер прозрачным, чтобы вложенный текст просто рендерился. */
.rich-content .dots {
    display: inline;
}

/* table-params — у старого сайта это была своя сетка с фиксированной шириной 960px.
   Нам она не нужна — наш .rich-content table уже задаёт width: 100%. */
.rich-content table.table-params {
    table-layout: auto;
}

/* ── WordPress caption (shortcode [caption]) ─────────────────
   По умолчанию WP рендерит каждый [caption] как display:block,
   из-за чего они выстраиваются вертикально.
   Здесь выводим их в строку с переносом, как галерею. */

.rich-content .wp-caption {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0 var(--space-3) var(--space-5) 0;
    max-width: 220px;
}

.rich-content .wp-caption img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.rich-content .wp-caption-text {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ── Легаси-разметка с MODX-сайта в .rich-content ───────────
   После миграции в HTML описаний/характеристик приходят:
   - Bootstrap-3 сетка (.row > .col-md-3.productionItem) с картинками-карточками
   - MODX-аккордеон (h2.nextshow + div.nextnone) — раскрывался по клику
   - Параграфы с text-indent: 1cm (отступ как в типографском макете)
   - Битые ссылки на картинки /userfiles/... (медиа ещё не перенесли)
   Этот блок приводит всё к читабельному виду без перезаписи контента в БД. */

/* Сетка карточек аксессуаров — восстанавливаем через CSS Grid */
.rich-content .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.rich-content .productionItem {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-height: 110px;
    justify-content: center;
}

.rich-content .productionItem img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.rich-content .productionItem p,
.rich-content .productionItem p.desc {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: center;
}

/* Параграфы с text-indent: 1cm — обнуляем (выглядит вырвиглазно в вебе) */
.rich-content p[style*="text-indent"] {
    text-indent: 0 !important;
}

/* Аккордеон MODX — заголовок остаётся заголовком, тело всегда раскрыто.
   Курсор default, потому что без JS на клик ничего не реагирует. */
.rich-content .nextshow {
    cursor: default;
}

.rich-content .nextnone {
    display: block;
}

/* Битые/потерянные картинки — чтобы alt-текст и иконка «нет файла»
   не разъезжались по странице, ограничиваем максимальные размеры. */
.rich-content img {
    max-width: 100%;
    height: auto;
}

/* ── Related products ───────────────────────────────────────── */

.product-related {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border);
}

.product-related__title {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8) 0;
}

/* ============================================================
   СТРАНИЦА КОНТАКТЫ
   ============================================================ */

.page__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 720px;
    margin: 0 0 40px 0;
}

.contacts-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 64px;
}

@media (max-width: 900px) {
    .contacts-layout {
        grid-template-columns: 1fr;
    }
}

.contacts-layout__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contacts-layout__map {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 480px;
}

.contacts-layout__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .contacts-layout__map {
        min-height: 360px;
    }
}

/* ── Блок контактов ─────────────────────────────────────────── */

.contact-block {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.contact-block__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
}

/* ── Список контактных строк ────────────────────────────────── */

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-list__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-list__label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.contact-list__value {
    font-size: 15px;
    color: var(--color-text-primary);
    text-decoration: none;
    line-height: 1.4;
}

a.contact-list__value:hover {
    color: var(--color-brand-red);
}

/* ============================================================
   БЛОК ТЕХПОДДЕРЖКИ НА КОНТАКТАХ
   ============================================================ */

.contact-block--highlight {
    border: 2px solid var(--color-brand-red);
    background: var(--color-bg);
}

.contact-block__intro {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.5;
}

.support-channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.support-channel {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.support-channel:hover {
    background: white;
    border-color: var(--color-brand-red);
}

.support-channel--primary {
    background: var(--color-brand-red);
    border-color: var(--color-brand-red);
    color: white;
}

.support-channel--primary:hover {
    background: var(--color-brand-red-dark);
    border-color: var(--color-brand-red-dark);
}

.support-channel__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-channel:not(.support-channel--primary) .support-channel__icon {
    background: var(--color-bg);
    color: var(--color-brand-red);
}

.support-channel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.support-channel__name {
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}

.support-channel--primary .support-channel__name {
    color: white;
}

.support-channel:not(.support-channel--primary) .support-channel__name {
    color: var(--color-text-primary);
}

.support-channel__desc {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.85;
    color: inherit;
}

.support-channel--primary .support-channel__desc {
    color: rgba(255, 255, 255, 0.9);
}

.support-channel:not(.support-channel--primary) .support-channel__desc {
    color: var(--color-text-secondary);
}

/* ── Соцсети сеткой ─────────────────────────────────────────── */

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.social-link:hover {
    background: white;
    border-color: var(--color-brand-red);
    color: var(--color-brand-red);
}

/* ── CTA-блок страницы контактов ────────────────────────────── */

.contacts-cta {
    margin-top: 48px;
}

/* ============================================================
   СТРАНИЦА «О КОМПАНИИ»
   ============================================================ */

.about-content {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
    max-width: 800px;
}

.about-content p {
    margin: 0 0 var(--space-4) 0;
}

.about-motto {
    margin: var(--space-12) 0;
    padding: var(--space-8);
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-brand-red);
    border-radius: var(--radius-md);
}

.about-motto__text {
    font-size: 19px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.about-motto__author {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.about-clients {
    margin: var(--space-16) 0;
}

.about-clients__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
}

.about-clients__intro {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.about-clients__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-clients__list li {
    padding: var(--space-4) var(--space-5);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .about-clients__list {
        grid-template-columns: 1fr;
    }
}

/* Блок «География» внутри страницы (не на главной) */
main.page .geography {
    margin: var(--space-12) 0;
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-lg);
}

/* ============================================================
   СТРАНИЦА ОБУЧЕНИЕ
   ============================================================ */

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.section-subtitle {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

.training-programs {
    margin: var(--space-10) 0 var(--space-16) 0;
}

.training-schedule {
    margin: var(--space-16) 0;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.schedule-item {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.schedule-item:hover {
    border-color: var(--color-brand-red);
}

.schedule-item__date {
    display: flex;
    flex-direction: column;
    padding-right: var(--space-6);
    border-right: 1px solid var(--color-border);
}

.schedule-item__day {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-brand-red);
    line-height: 1.1;
}

.schedule-item__month {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-transform: lowercase;
}

.schedule-item__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.4;
}

.schedule-item__meta {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .schedule-item {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .schedule-item__date {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: var(--space-3);
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-3);
    }
}

.training-contacts {
    margin: var(--space-12) 0 var(--space-8) 0;
    max-width: 720px;
}

/* ============================================================
   20. ЛИЧНЫЙ КАБИНЕТ
   ============================================================ */

main.account {
    padding: 40px 0 80px 0;
    background: var(--color-bg-alt);
    min-height: 60vh;
}

@media (max-width: 768px) {
    main.account {
        padding: 24px 0 48px 0;
    }
}

.account__header {
    margin: 16px 0 24px 0;
}

.account__title {
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .account__title {
        font-size: 24px;
    }
}

.account__greeting {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-secondary);
}

/* ── Горизонтальные табы ────────────────────────────────────── */

.account__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.account__tab {
    display: inline-block;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.account__tab:hover {
    color: var(--color-text-primary);
}

.account__tab.is-active {
    color: var(--color-brand-red);
    border-bottom-color: var(--color-brand-red);
}

/* ── Двухколоночный layout ──────────────────────────────────── */

.account__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .account__layout {
        grid-template-columns: 1fr;
    }
}

.account__main {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px;
    min-height: 300px;
}

@media (max-width: 768px) {
    .account__main {
        padding: 20px;
    }
}

/* ── Sidebar ────────────────────────────────────────────────── */

.account__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account__widget {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.account__widget-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.account__widget-text {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.account__widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.account__widget-list li {
    padding: 2px 0;
}

.account__widget-list a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.account__widget-list a:hover {
    color: var(--color-brand-red);
}

.account__widget-label {
    color: var(--color-text-secondary);
    margin-right: 4px;
}

.account__widget--contacts {
    background: var(--color-bg-alt);
}

/* ── Заглушка для подэтапов ─────────────────────────────────── */

.account__placeholder {
    color: var(--color-text-secondary);
}

.account__placeholder h2 {
    margin: 0 0 12px 0;
    font-size: 22px;
    color: var(--color-text-primary);
}

.account__placeholder p {
    margin: 0 0 8px 0;
    line-height: 1.6;
}

/* ============================================================
   21. ВХОД / РЕГИСТРАЦИЯ / ВОССТАНОВЛЕНИЕ
   ============================================================ */

main.auth {
    padding: 80px 0;
    background: var(--color-bg-alt);
    min-height: 70vh;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    main.auth {
        padding: 40px 0;
    }
}

.auth__card {
    max-width: 440px;
    margin: 0 auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

@media (max-width: 480px) {
    .auth__card {
        padding: 24px 20px;
    }
}

/* ── Вкладки в карточке ─────────────────────────────────────── */

.auth__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin: -32px -32px 24px -32px;
    padding: 0 32px;
}

@media (max-width: 480px) {
    .auth__tabs {
        margin: -24px -20px 20px -20px;
        padding: 0 20px;
    }
}

.auth__tab {
    flex: 1;
    background: none;
    border: none;
    padding: 16px 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.auth__tab:hover {
    color: var(--color-text-primary);
}

.auth__tab.is-active {
    color: var(--color-brand-red);
    border-bottom-color: var(--color-brand-red);
}

/* ── Заголовок (для страницы восстановления) ────────────────── */

.auth__title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.auth__subtitle {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ── Формы ──────────────────────────────────────────────────── */

.auth__form {
    display: none;
}

.auth__form.is-active {
    display: block;
}

.auth__field {
    margin-bottom: 16px;
}

.auth__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.auth__field input[type="email"],
.auth__field input[type="password"],
.auth__field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--color-text-primary);
    background: var(--color-bg);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.auth__field input:focus {
    outline: none;
    border-color: var(--color-brand-red);
}

.auth__field--inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.auth__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.auth__checkbox input[type="checkbox"] {
    margin: 0;
}

.auth__hint {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.auth__submit {
    width: 100%;
    margin-top: 8px;
}

.auth__link {
    color: var(--color-brand-red);
    text-decoration: none;
    font-size: 13px;
}

.auth__link:hover {
    text-decoration: underline;
}

.auth__legal {
    margin: 16px 0 0 0;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.5;
}

.auth__back {
    margin: 20px 0 0 0;
    text-align: center;
    font-size: 13px;
}

/* ── Сообщения ──────────────────────────────────────────────── */

.auth__error {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: #B91C1C;
    font-size: 13px;
    line-height: 1.4;
}

.auth__success {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--radius-sm);
    color: #166534;
    font-size: 13px;
    line-height: 1.4;
}

/* ── Виджет выхода в sidebar ЛК ────────────────────────────── */

.account__widget--logout {
    background: var(--color-bg-alt);
}

/* ── Убираем скроллбар на табах ЛК на десктопе ─────────────── */

@media (min-width: 769px) {
    .account__tabs {
        overflow-x: visible;
    }
}

/* ============================================================
   22. ФОРМА ПРОФИЛЯ
   ============================================================ */

.profile-form__section {
    border: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.profile-form__section + .profile-form__section {
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.profile-form__legend {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    padding: 0;
}

.profile-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

@media (max-width: 640px) {
    .profile-form__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Общие поля формы ───────────────────────────────────────── */

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--color-text-primary);
    background: var(--color-bg);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-brand-red);
}

.form-field__hint {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.profile-form__actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 8px;
}

/* ── Сообщения ──────────────────────────────────────────────── */

.profile-form__success {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--radius-sm);
    color: #166534;
    font-size: 14px;
}

.profile-form__error {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: #B91C1C;
    font-size: 14px;
}

/* ── Фикс: верхний таб на странице входа не обрезается ─────── */

.auth__card {
    overflow: hidden;
}

/* ============================================================
   23. ОБОРУДОВАНИЕ В ЛК
   ============================================================ */

.devices-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.devices-toolbar__hint {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    flex: 1;
}

@media (max-width: 640px) {
    .devices-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Пустое состояние ───────────────────────────────────────── */

.devices-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.devices-empty__title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.devices-empty__text {
    margin: 0 auto 20px auto;
    max-width: 480px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ── Список приборов ────────────────────────────────────────── */

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Карточка прибора (details/summary) ─────────────────────── */

.device-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.device-card[open] {
    border-color: var(--color-text-muted, #9CA3AF);
}

.device-card__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease;
}

.device-card__summary::-webkit-details-marker { display: none; }
.device-card__summary::marker { content: ''; }

.device-card__summary:hover {
    background: var(--color-bg-alt);
}

.device-card__title-block {
    flex: 1;
    min-width: 0;
}

.device-card__title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.device-card__serial {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.device-card__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.device-card__status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.device-card__status--active {
    background: #DCFCE7;
    color: #166534;
}

.device-card__status--pending {
    background: #FEF3C7;
    color: #92400E;
}

.device-card__status--inactive {
    background: #FEE2E2;
    color: #B91C1C;
}

/* ── Шеврон ─────────────────────────────────────────────────── */

.device-card__chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-text-secondary);
    border-bottom: 2px solid var(--color-text-secondary);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.device-card[open] .device-card__chevron {
    transform: rotate(-135deg);
}

/* ── Тело карточки ──────────────────────────────────────────── */

.device-card__body {
    padding: 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.device-card__notice {
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.device-card__section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.device-card__count {
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* ── Список файлов ──────────────────────────────────────────── */

.files-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.files-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.files-list__badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 0.5px;
}

.files-list__info {
    flex: 1;
    min-width: 0;
}

.files-list__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
    word-break: break-word;
}

.files-list__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.files-list__meta > span:not(:last-child)::after {
    content: '·';
    margin-left: 10px;
    color: var(--color-text-muted, #9CA3AF);
}

.files-list__download {
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .files-list__item {
        flex-wrap: wrap;
    }

    .files-list__download {
        margin-left: 56px;
    }
}

/* ============ 24. ДОБАВЛЕНИЕ ПРИБОРА ============ */

.add-device {
    max-width: 600px;
}

.add-device__intro {
    margin: 0 0 24px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.add-device__error {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: #B91C1C;
    font-size: 14px;
    line-height: 1.5;
}

.add-device__notice {
    padding: 16px 20px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.add-device__form .form-field {
    margin-bottom: 20px;
}

.form-field__required {
    color: var(--color-brand-red);
    margin-left: 2px;
}

.add-device__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* Баннер на /account/devices/ после успешной заявки */
.devices-success {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--radius-sm);
    color: #166534;
    font-size: 14px;
    line-height: 1.5;
}

.devices-error {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: #B91C1C;
    font-size: 14px;
    line-height: 1.5;
}

/* Подвал карточки прибора — кнопка удаления */
.device-card__footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

.device-card__delete {
    color: var(--color-text-secondary);
}

.device-card__delete:hover {
    color: var(--color-brand-red);
    border-color: var(--color-brand-red);
}

/* ============ 25. СООБЩЕНИЯ / ТИКЕТЫ ============ */

.messages-error {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: #B91C1C;
    font-size: 14px;
}

.messages-intro {
    margin: 0 0 24px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.messages-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.messages-toolbar__hint {
    margin: 0;
    flex: 1;
    font-size: 14px;
    color: var(--color-text-secondary);
}
@media (max-width: 640px) {
    .messages-toolbar { flex-direction: column; align-items: stretch; }
}

/* Поиск / сортировка / фильтр по статусу над списком обращений */
.messages-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.messages-filters__search {
    flex: 1 1 220px;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-primary, #fff);
}

.messages-filters__select {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-primary, #fff);
}

@media (max-width: 640px) {
    .messages-filters { flex-direction: column; align-items: stretch; }
}

.messages-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.messages-empty__title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.messages-empty__text {
    margin: 0 auto 20px auto;
    max-width: 480px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Список тикетов */
.ticket-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ticket-list__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease;
}
.ticket-list__item:hover {
    border-color: var(--color-text-secondary);
}
.ticket-list__link {
    display: block;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
}
.ticket-list__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 6px;
}
.ticket-list__subject {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.ticket-list__date {
    font-size: 12px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.ticket-list__preview {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.ticket-list__meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-brand-red);
    font-weight: 500;
}

/* Форма создания тикета */
.ticket-form .form-field {
    margin-bottom: 20px;
}
.ticket-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--color-text-primary);
    background: var(--color-bg);
    resize: vertical;
    min-height: 120px;
}
.ticket-form textarea:focus {
    outline: none;
    border-color: var(--color-brand-red);
}
.ticket-form__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Просмотр тикета */
.ticket-view__head {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.ticket-view__back {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
}
.ticket-view__back:hover {
    color: var(--color-brand-red);
}
.ticket-view__subject {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.ticket-view__date {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Чат */
.chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.chat__message {
    display: flex;
    max-width: 80%;
}
.chat__message--user {
    align-self: flex-end;
    justify-content: flex-end;
}
.chat__message--support {
    align-self: flex-start;
    justify-content: flex-start;
}
.chat__bubble {
    padding: 12px 16px;
    border-radius: var(--radius-md);
}
.chat__message--user .chat__bubble,
.chat__message--user .chat__bubble .chat__text,
.chat__message--user .chat__bubble .chat__text p,
.chat__message--user .chat__bubble .chat__text * {
    background: transparent;
    color: #fff;
}
.chat__message--user .chat__bubble {
    background: var(--color-brand-red);
}
.chat__message--user .chat__author,
.chat__message--user .chat__time {
    color: rgba(255, 255, 255, 0.85);
}
.chat__message--support .chat__bubble {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.chat__author {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text-secondary);
}
.chat__text {
    font-size: 14px;
    line-height: 1.5;
}
.chat__text p {
    margin: 0 0 8px 0;
}
.chat__text p:last-child {
    margin-bottom: 0;
}
.chat__time {
    margin-top: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

@media (max-width: 540px) {
    .chat__message { max-width: 95%; }
}

/* Форма ответа */
.ticket-reply {
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.ticket-reply .form-field {
    margin-bottom: 12px;
}
.ticket-reply textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    background: var(--color-bg);
    resize: vertical;
    min-height: 80px;
}
.ticket-reply textarea:focus {
    outline: none;
    border-color: var(--color-brand-red);
}

.ticket-reply-error {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: #B91C1C;
    font-size: 13px;
}

/* ============ 26. ДАШБОРД ЛК ============ */

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard__widget {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.dashboard__widget--admin {
    border-color: var(--color-brand-red);
}

.dashboard__widget-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    flex-wrap: wrap;
}

.dashboard__widget--admin .dashboard__widget-head {
    background: #FEF2F2;
    border-bottom-color: #FECACA;
}

.dashboard__widget-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard__count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-brand-red);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.dashboard__widget-link {
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard__widget-link:hover {
    color: var(--color-brand-red);
}

.dashboard__widget-body {
    padding: 0;
}

.dashboard__widget-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.dashboard__widget-empty p {
    margin: 0 0 12px 0;
}

/* Список элементов виджета */
.dashboard__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dashboard__item + .dashboard__item .dashboard__item-link {
    border-top: 1px solid var(--color-border);
}

.dashboard__item-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.dashboard__item-link:hover {
    background: var(--color-bg-alt);
}

.dashboard__item-main {
    flex: 1;
    min-width: 0;
}

.dashboard__item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.dashboard__item-sub {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.dashboard__item-meta {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Бейджи */
.dashboard__badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.dashboard__badge--new {
    background: var(--color-brand-red);
    color: #fff;
}

.dashboard__badge--active {
    background: #DCFCE7;
    color: #166534;
}

.dashboard__badge--pending {
    background: #FEF3C7;
    color: #92400E;
}

@media (max-width: 540px) {
    .dashboard__item-link {
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard__badge {
        align-self: flex-start;
    }
}

/* ============================================================
   27. КУРСЫ И ОБУЧЕНИЕ (этап 7.5)
   ============================================================ */

/* ── Страница обучения: Hero ──────────────────────────────── */

.training-hero {
    padding: 48px 0;
}

.training-hero h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0 0 20px 0;
}

.training-hero__lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 800px;
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ── Секция обучения ──────────────────────────────────────── */

.training-section {
    padding-bottom: 60px;
}

.training-section h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
}

.training-section__intro {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    max-width: 700px;
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ── Список курсов ────────────────────────────────────────── */

.courses-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.course-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-primary);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.course-row:hover {
    border-color: var(--color-brand-red);
}

.course-row__date {
    min-width: 120px;
    flex-shrink: 0;
}

.course-row__date-main {
    display: block;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-red);
    line-height: 1;
}

.course-row__date-sub {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.course-row__body {
    flex: 1;
    min-width: 0;
}

.course-row__title {
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 6px 0;
}

.course-row__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.course-row__action {
    flex-shrink: 0;
}

/* ── Пустой список ────────────────────────────────────────── */

.courses-empty {
    padding: 32px;
    background: var(--color-bg-alt);
    border-radius: 8px;
    text-align: center;
    color: var(--color-text-secondary);
    margin-top: 32px;
}

/* ── Секция онлайн-консультаций ───────────────────────────── */

.training-online {
    background: var(--color-bg-alt);
    padding: 48px;
    border-radius: 12px;
}

.training-online h2 {
    margin-top: 0;
}

/* ── Блок «Учебный отдел» ─────────────────────────────────── */

.training-contact-block {
    border: 1px solid var(--color-brand-red);
    border-radius: 12px;
    padding: 32px;
    max-width: 720px;
    margin: 60px auto;
}

.training-contact-block h2,
.training-contact-block h3 {
    margin-top: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.training-contact-block--sidebar {
    max-width: none;
    margin: 0;
}

.training-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.training-contact-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-brand-red-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-red);
    flex-shrink: 0;
}

.training-contact-row__label {
    text-transform: uppercase;
    font-size: 11px;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.training-contact-row__value {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.training-contact-row__value a {
    color: inherit;
    text-decoration: none;
}

.training-contact-row__value a:hover {
    color: var(--color-brand-red);
}

/* ── Бейдж категории курса ────────────────────────────────── */

.course-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-brand-red-light);
    color: var(--color-brand-red);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

/* ── Блок дат на странице курса ───────────────────────────── */

.course-dates {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-red);
    margin: 24px 0;
    line-height: 1;
}

.course-dates__sub {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    margin-left: 12px;
}

/* ── Лейаут single-course ─────────────────────────────────── */

.single-course__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
    padding-bottom: 80px;
}

.single-course__hero {
    margin-bottom: 40px;
}

.single-course__hero h1 {
    margin: 0 0 8px 0;
}

.single-course__content {
    margin-bottom: 48px;
}

.single-course__register h2 {
    margin-bottom: 24px;
}

/* ── Форма записи на курс ─────────────────────────────────── */

.course-form {
    max-width: 720px;
    margin-top: 24px;
}

.course-form__row {
    margin-bottom: 16px;
}

.course-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.course-form .required {
    color: var(--color-brand-red);
    margin-left: 2px;
}

.course-form input,
.course-form textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.course-form input:focus,
.course-form textarea:focus {
    outline: none;
    border-color: var(--color-brand-red);
}

.course-form textarea {
    min-height: 100px;
    resize: vertical;
}

.course-form__submit {
    margin-top: 8px;
}

.course-form__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 12px;
    line-height: var(--line-height-normal);
}

/* ── Flash-уведомления ────────────────────────────────────── */

.course-flash {
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

.course-flash--success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.course-flash--error {
    background: var(--color-brand-red-light);
    color: var(--color-brand-red-dark);
    border: 1px solid #FECACA;
}

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

@media (max-width: 1024px) {
    .single-course__layout {
        grid-template-columns: 1fr;
    }

    .single-course__sidebar {
        order: -1;
    }

    .training-contact-block--sidebar {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .training-hero h1 {
        font-size: var(--font-size-4xl);
    }

    .course-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .course-row__action {
        width: 100%;
        text-align: center;
    }

    .course-dates {
        font-size: var(--font-size-2xl);
    }

    .course-dates__sub {
        font-size: var(--font-size-lg);
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    .training-contact-block {
        padding: 24px;
    }

    .training-online {
        padding: 32px 24px;
    }
}


/* — Модалка записи на курс — */

.modal__container--large {
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
}

.course-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form__row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.form__textarea {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    resize: vertical;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.form__textarea:focus {
    outline: none;
    border-color: var(--color-brand-red);
}

.course-modal__participants {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.course-modal__participant-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-alt);
    border-radius: 8px;
}

.course-modal__participant-toggle {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.course-modal__toggle-btn {
    background: none;
    border: none;
    color: var(--color-brand-red);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-base);
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease;
}

.course-modal__toggle-btn:hover {
    color: var(--color-brand-red-dark);
}

.course-modal__toggle-btn--remove {
    color: var(--color-text-secondary);
}

.course-modal__toggle-btn--remove:hover {
    color: var(--color-text-primary);
}

.course-modal__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.course-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 8px;
}

.course-modal__flash {
    margin-bottom: 16px;
}

.course-modal__flash:empty {
    display: none;
}

/* — CTA на странице курса — */

.course-hero__action {
    margin-top: 24px;
}

.course-bottom-cta {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-bg-alt);
    border-radius: 12px;
    margin: 40px 0;
}

.course-bottom-cta h3 {
    font-size: var(--font-size-2xl);
    margin: 0 0 16px 0;
}

.course-bottom-cta .btn {
    display: inline-block;
}

.btn--lg {
    padding: 14px 28px;
    font-size: var(--font-size-md);
}

/* — Адаптив модалки — */

@media (max-width: 768px) {
    .form__row,
    .form__row--3,
    .course-modal__participant-row {
        grid-template-columns: 1fr;
    }

    .course-modal__actions {
        flex-direction: column;
    }

    .course-modal__actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* — Уточнения модалки записи на курс — */

.modal__container--large {
    background: white;
    border-radius: 12px;
    padding: 32px;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal__header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    color: var(--color-brand-red);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.course-modal__form .form__input,
.course-modal__form .form__textarea {
    padding: 12px 14px;
    font-size: 15px;
}

.course-modal__form .form__input:focus,
.course-modal__form .form__textarea:focus {
    border-color: var(--color-brand-red);
    box-shadow: 0 0 0 3px rgba(194, 32, 47, 0.1);
    outline: none;
}

.course-modal__hint {
    background: var(--color-bg-alt);
    padding: 14px 18px;
    border-left: 3px solid var(--color-brand-red);
    border-radius: 4px;
    margin-top: 8px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.course-modal__actions {
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
}
/* — Страница онлайн-консультации — */

.consultation-page {
    padding: 60px 0;
}

.consultation-hero {
    margin-bottom: 40px;
}

.consultation-hero__title {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 20px 0;
}

.consultation-hero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0;
}

.consultation-form-wrapper {
    max-width: 720px;
}

.consultation-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.form__checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form__checkbox-row:hover {
    border-color: var(--color-brand-red);
    background: var(--color-bg-alt);
}

.form__checkbox-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.form__checkbox-row span {
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.consultation-form__submit {
    margin-top: 16px;
}

.training-online__actions {
    margin-top: 24px;
}

.consultation-flash {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

.consultation-flash--success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.consultation-flash--error {
    background: var(--color-brand-red-light);
    color: var(--color-brand-red-dark);
    border: 1px solid #FECACA;
}

/* ============================================================
   28. Карта заказов (C.1)
   ============================================================ */

.price-page {
    padding: 60px 0;
}

.price-hero {
    margin-bottom: 32px;
}

.price-hero__title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.price-hero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0;
}

.price-form-wrapper {
    max-width: 900px;
}

.price-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.price-section {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 32px;
}

.price-section__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.price-section__hint {
    color: var(--color-text-secondary);
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Прямые дочерние строки/группы полей секции — без этого они идут впритык,
   т.к. .price-section не flex-контейнер с gap (в отличие от .price-form). */
.price-section > .form__row,
.price-section > .form__group {
    margin-bottom: 20px;
}

.price-section > .form__row:last-child,
.price-section > .form__group:last-child {
    margin-bottom: 0;
}

.price-category {
    margin-bottom: 28px;
}

.price-category:last-child {
    margin-bottom: 0;
}

.price-category__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding-left: 12px;
    border-left: 3px solid var(--color-brand-red);
}

.price-subgroup {
    margin-bottom: 16px;
}

.price-subgroup:last-child {
    margin-bottom: 0;
}

.price-subgroup__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
}

.price-equipment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.price-equipment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.price-equipment-item:hover {
    border-color: var(--color-brand-red);
    background: var(--color-bg-alt);
}

.price-equipment-item__check {
    flex-shrink: 0;
}

.price-equipment-item__name {
    flex: 1;
    font-size: 15px;
}

.price-equipment-item__qty {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.form__input--qty {
    width: 80px;
    padding: 6px 10px;
    font-size: 14px;
}

.price-equipment-item__qty-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.form__file {
    padding: 8px 12px;
}

.form__checkboxes--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.price-form__submit {
    margin-top: 8px;
}

.price-flash {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 15px;
}

.price-flash--success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.price-flash--error {
    background: var(--color-brand-red-light);
    color: var(--color-brand-red-dark);
    border: 1px solid #FECACA;
}

@media (max-width: 768px) {
    .price-equipment-item {
        flex-wrap: wrap;
    }

    .price-equipment-item__qty {
        margin-left: auto;
    }

    .price-section {
        padding: 20px;
    }
}

/* — Каталог: изображения категорий (B.2) — */

.card--category {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.card--category .card__image {
    /* Соотношение 2:1 через padding-top hack — надёжнее aspect-ratio,
       потому что не конфликтует с inline-атрибутами width/height,
       которые WordPress подставляет в <img>. */
    width: 100%;
    height: 0;
    padding-top: 50%;
    position: relative;
    background: var(--color-bg-alt);
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    flex-shrink: 0;
}

.card--category .card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain — фото видно целиком, без обрезки.
       По бокам/снизу остаётся лёгкий серый фон контейнера. */
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.card--category:hover .card__image img {
    transform: scale(1.04);
}

.card--category .card__body {
    padding: 20px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card--category .card__title {
    margin: 0;
    line-height: 1.35;
}

.card--category .card__count {
    margin-top: auto;
}

/* — Карточки моделей в категории — */

/* Соотношение 2:1 через padding-top hack — гарантированно работает поверх
   inline-атрибутов width/height, которые WordPress подставляет в <img>.
   Тот же подход применён к .card--category для единого поведения. */
.card--product .card__media {
    width: 100% !important;
    height: 0 !important;
    padding-top: 50% !important;
    position: relative !important;
    overflow: hidden;
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}

.card--product .card__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: var(--space-4);
    box-sizing: border-box;
}

/* — Карточки публикаций — */

.card--post .card__media {
    width: 100%;
    height: 0 !important;
    padding-top: 50%;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.card--post .card__media .card__image,
.card--post .card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
}

.card--post .card__media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.card--post .card__meta {
    margin-top: 0;
}

.card--post .card__body {
    padding-top: 0;
}

/* — Страница статьи — */

.single__cover {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.single__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.single__content img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
}

/* — Layout статьи с сайдбаром — */

.single__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
    align-items: start;
}

@media (max-width: 1024px) {
    .single__layout {
        grid-template-columns: 1fr;
    }
    .single__aside {
        order: -1;
    }
}

.single__aside-widget {
    position: sticky;
    top: var(--space-8);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.single__aside-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.single__aside-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.single__aside-item + .single__aside-item {
    border-top: 1px solid var(--color-border);
}

.single__aside-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    text-decoration: none;
    transition: var(--transition-fast);
}

.single__aside-link:hover .single__aside-name {
    color: var(--color-brand-red);
}

.single__aside-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.single__aside-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
    transition: var(--transition-fast);
}

.single__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0 var(--space-8) 0;
}

.single__related {
    margin-top: var(--space-16);
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.single__related-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8) 0;
}

/* — Фиксы отступов — */

.card--post .card__body {
    padding-top: var(--space-6);
}


.single__article {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.card--product .card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--space-4) var(--space-6);
    margin-top: auto;
    background-color: var(--color-brand-red);
    border-top: none;
    transition: background-color var(--transition-fast);
}

.card--product:hover .card__footer {
    background-color: var(--color-brand-red-dark);
}

.card--product .card__link-arrow {
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

/* ── Галерея Gutenberg внутри статьи ─────────────────────── */
.entry-content .wp-block-gallery,
.entry-content .blocks-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.entry-content .wp-block-gallery.columns-2,
.entry-content .wp-block-gallery[class*="columns-2"] .blocks-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
}

.entry-content .wp-block-gallery.columns-4,
.entry-content .wp-block-gallery[class*="columns-4"] .blocks-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
}

.entry-content .wp-block-gallery figure,
.entry-content .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    padding: 0;
    background: var(--color-bg-alt);
    border-radius: 14px;
    overflow: hidden;
    height: 200px;
}

.entry-content .wp-block-gallery figure img,
.entry-content .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.entry-content .wp-block-gallery figcaption {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
}

/* Сброс стилей Astra/Gutenberg которые ломают сетку */
.entry-content .wp-block-gallery .blocks-gallery-grid {
    display: contents;
}

.entry-content figure.wp-block-image {
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 640px) {
    .entry-content .wp-block-gallery,
    .entry-content .blocks-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.single__content p img {
    height: 220px !important;
    width: auto !important;
    border-radius: var(--radius-md) !important;
    cursor: zoom-in !important;
    margin: var(--space-2) !important;
}

/* ── Сертификаты продукта ── */

.product-certificates img {
    max-width: 220px;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: zoom-in;
    transition: box-shadow .15s;
}

.product-certificates img:hover {
    box-shadow: var(--shadow-md);
}

.product-certificates .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.product-certificates figure {
    margin: 0;
}

/* ── Стрелки навигации галереи прибора ───────────────────── */
.gallery-arrow {
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.gallery-stage:hover .gallery-arrow {
    opacity: 1;
}

@media (max-width: 900px) {
    .product-hero {
        grid-template-columns: 1fr !important;
    }
    .product-tabs__nav {
        gap: 16px !important;
        overflow-x: auto;
    }
}

@media (max-width: 540px) {
    .product-info h1 {
        font-size: 36px !important;
    }
    .single-product .product-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── Сертификаты карточки модели ─────────────────────────── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.cert-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-primary);
    transition: box-shadow var(--transition-base);
}

.cert-card:hover {
    box-shadow: var(--shadow-md);
}

.cert-card__preview {
    display: block;
    position: relative;
    overflow: hidden;
    height: 200px;
    background: var(--color-bg-alt);
}

.cert-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform var(--transition-base);
}

.cert-card:hover .cert-card__img {
    transform: scale(1.03);
}

.cert-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
}

.cert-card:hover .cert-card__overlay {
    background: rgba(0, 0, 0, 0.25);
}

.cert-card__zoom {
    font-size: 28px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.cert-card:hover .cert-card__zoom {
    opacity: 1;
}

.cert-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    gap: 8px;
}

.cert-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-card__download {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-brand-red);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.cert-card__download:hover {
    text-decoration: underline;
}

/* ── Таблица сравнения моделей (карточка прибора + /compare/) ── */
.compare-table__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.compare-group__scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.compare-table thead tr {
    background: var(--color-graphite-dark);
}

.compare-table__corner {
    background: var(--color-graphite-dark);
    min-width: 160px;
}

.compare-table__model {
    background: var(--color-graphite-dark);
    color: #fff;
    padding: var(--space-4);
    vertical-align: top;
    text-align: center;
    min-width: 160px;
}

.compare-table__model--current {
    background: var(--color-brand-red);
}

.compare-table__model-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.compare-table__model-photo {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.compare-table__model-photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compare-table__model-photo--empty {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.4);
}

.compare-table__model-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.compare-table__model-title--missing {
    color: rgba(255, 255, 255, 0.5);
    font-weight: var(--font-weight-medium);
}

.compare-table__model-cta {
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
    opacity: 0.85;
}

.compare-table__model-meta {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-1);
}

.compare-table__param {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    background: var(--color-bg-primary);
}

.compare-table tbody tr:nth-child(even) .compare-table__param,
.compare-table tbody tr:nth-child(even) .compare-table__value {
    background: var(--color-bg-alt);
}

.compare-table__value {
    text-align: center;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    border-left: 1px solid var(--color-border);
}

.compare-table__value--current {
    background: var(--color-brand-red-light) !important;
    color: var(--color-brand-red);
    font-weight: var(--font-weight-bold);
}

.compare-table__value--missing {
    color: var(--color-text-muted);
}

.compare-table__value--empty {
    color: var(--color-text-muted);
}

.compare-table__footer {
    margin-top: var(--space-5);
    text-align: center;
}

/* ── Сброс стилей Astra для контентных страниц ──────────── */

/* Сброс для статей */
.single .single__content,
.single .entry-content {
  all: unset;
  display: block;
  font-family: var(--font-family-base);
  font-size: 17px;
  line-height: 1.72;
  color: var(--color-text-primary);
}

/* Сброс для карточки прибора */
.single-product .product-tabs .rich-content,
.single-product .tabs__panel {
  all: unset;
  display: block;
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

/* Восстанавливаем типографику внутри контента статьи */
.single .single__content p,
.single .entry-content p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.72;
}

.single .single__content p:first-of-type,
.single .entry-content p:first-of-type {
  font-size: 19.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.single .single__content h2,
.single .entry-content h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 36px 0 14px;
  color: var(--color-text-primary);
}

.single .single__content h3,
.single .entry-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 28px 0 10px;
  color: var(--color-text-primary);
}

.single .single__content a,
.single .entry-content a {
  color: var(--color-brand-red);
  text-decoration: none;
}

.single .single__content a:hover,
.single .entry-content a:hover {
  text-decoration: underline;
}

.single .single__content ul,
.single .entry-content ul,
.single .single__content ol,
.single .entry-content ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

.single .single__content li,
.single .entry-content li {
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.6;
}

.single .single__content img,
.single .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.single .single__content strong,
.single .entry-content strong {
  font-weight: 700;
}

/* Галерея Gutenberg — полный сброс и своя сетка */
.single .single__content .wp-block-gallery,
.single .entry-content .wp-block-gallery {
  all: unset;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
  width: 100%;
}

.single .single__content .wp-block-gallery .wp-block-image,
.single .entry-content .wp-block-gallery .wp-block-image,
.single .single__content .wp-block-gallery figure,
.single .entry-content .wp-block-gallery figure {
  all: unset;
  display: block;
  background: var(--color-bg-alt);
  border-radius: 14px;
  overflow: hidden;
  height: 200px;
  cursor: zoom-in;
}

.single .single__content .wp-block-gallery img,
.single .entry-content .wp-block-gallery img {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.single .single__content .wp-block-gallery figcaption,
.single .entry-content .wp-block-gallery figcaption {
  all: unset;
  display: block;
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 8px;
  font-family: var(--font-family-base);
}

/* Восстанавливаем rich-content для табов прибора */
.single-product .rich-content p  { margin: 0 0 1em; }
.single-product .rich-content h2 { font-size: 22px; font-weight: 700; margin: 28px 0 12px; }
.single-product .rich-content h3 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; }
.single-product .rich-content ul,
.single-product .rich-content ol { padding-left: 20px; margin-bottom: 1em; }
.single-product .rich-content li { margin-bottom: 4px; }
.single-product .rich-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.single-product .rich-content table th,
.single-product .rich-content table td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}
.single-product .rich-content table th {
  background: var(--color-bg-alt);
  font-weight: 700;
}
.single-product .rich-content table tr:nth-child(even) td {
  background: var(--color-bg-alt);
}

@media (min-width: 1200px) {
  .ast-separate-container .ast-article-single {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/* ═══════════════════════════════════════════════════════════════
   ЛК — Подтверждение приборов (админ-вкладка) + hover-анимации
   ═══════════════════════════════════════════════════════════════ */

/* — Бейдж со счётчиком на табе «Подтверждение» — */
.account__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: var(--color-brand-red);
    border-radius: 9px;
    vertical-align: middle;
}

/* — Hover на табах — мягкая подсветка — */
.account__tab {
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}
.account__tab:hover:not(.is-active) {
    background-color: rgba(194, 32, 47, 0.06);
    color: var(--color-brand-red);
}

/* — Hover на боковых виджетах ЛК: полная заливка красным +
   белый текст, как у промо «Личный кабинет» — */
.account__widget {
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.account__widget:hover {
    background-color: var(--color-brand-red);
    border-color: var(--color-brand-red);
    box-shadow: 0 10px 24px -12px rgba(194, 32, 47, 0.45);
    transform: translateY(-2px);
}
.account__widget:hover .account__widget-title,
.account__widget:hover .account__widget-text,
.account__widget:hover .account__widget-label,
.account__widget:hover .account__widget-list,
.account__widget:hover .account__widget-list li,
.account__widget:hover .account__widget-list a {
    color: #fff;
}
/* Кнопки внутри подсвеченного виджета — инверсия для контраста */
.account__widget:hover .btn--secondary {
    background: #fff;
    color: var(--color-brand-red);
    border-color: #fff;
}
.account__widget:hover .btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.account__widget:hover .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* «Завершение работы» — оставляем приглушённый hover, не CTA */
.account__widget--logout:hover {
    background-color: transparent;
    border-color: var(--color-text-muted);
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.15);
}
.account__widget--logout:hover .account__widget-title,
.account__widget--logout:hover .account__widget-text {
    color: inherit;
}
.account__widget--logout:hover .btn--ghost {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

/* — Ссылки в виджете «Свежие сообщения» на dashboard — */
.account__widget a,
.account__widget-list a {
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}
.account__widget a:hover {
    color: var(--color-brand-red);
}

/* — Hover на карточках приборов в /account/devices/ — */
.device-card {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.device-card:hover {
    border-color: var(--color-brand-red);
    box-shadow: 0 8px 20px -10px rgba(194, 32, 47, 0.18);
}
.device-card:hover .device-card__title {
    color: var(--color-brand-red);
}
.device-card__title {
    transition: color var(--transition-fast);
}

/* — Hover на карточках тикетов в /account/messages/ — полная заливка красным — */
.ticket-list__item {
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.ticket-list__item:hover {
    background-color: var(--color-brand-red);
    border-color: var(--color-brand-red);
    box-shadow: 0 10px 24px -12px rgba(194, 32, 47, 0.45);
    transform: translateY(-2px);
}
.ticket-list__item:hover,
.ticket-list__item:hover .ticket-list__subject,
.ticket-list__item:hover .ticket-list__author,
.ticket-list__item:hover .ticket-list__date,
.ticket-list__item:hover .ticket-list__preview,
.ticket-list__item:hover .ticket-list__meta,
.ticket-list__item:hover .ticket-list__link,
.ticket-list__item:hover a {
    color: #fff !important;
    text-decoration: none !important;
    background-image: none !important;
}

/* — Hover на файловых строках внутри карточек приборов — */
.files-list__item {
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.files-list__item:hover {
    background-color: var(--color-brand-red);
    border-color: var(--color-brand-red);
    box-shadow: 0 8px 20px -10px rgba(194, 32, 47, 0.4);
    transform: translateY(-1px);
}
.files-list__item:hover .files-list__name,
.files-list__item:hover .files-list__type,
.files-list__item:hover .files-list__version,
.files-list__item:hover .files-list__size,
.files-list__item:hover .files-list__meta {
    color: #fff !important;
}
/* PDF-бейдж и кнопка «Скачать» — инверсия для контраста */
.files-list__item:hover .files-list__badge {
    background: #fff;
    color: var(--color-brand-red);
}
.files-list__item:hover .files-list__download {
    background: #fff !important;
    color: var(--color-brand-red) !important;
    border-color: #fff !important;
}

/* — Страница /account/pending/ — */
.pending-flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}
.pending-flash--success {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.pending-flash--error {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pending-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.pending-filters__search {
    flex: 1 1 280px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: #fff;
}
.pending-filters__search:focus {
    outline: none;
    border-color: var(--color-brand-red);
    box-shadow: 0 0 0 3px rgba(194, 32, 47, 0.12);
}
.pending-filters__order {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}
.pending-filters__reset {
    color: var(--color-text-muted);
    font-size: 13px;
    text-decoration: none;
}
.pending-filters__reset:hover {
    color: var(--color-brand-red);
}

.pending-count {
    color: var(--color-text-secondary);
    font-size: 13.5px;
    margin: 0 0 18px;
}

.pending-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.pending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pending-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pending-card:hover {
    border-color: var(--color-brand-red);
    box-shadow: 0 8px 20px -10px rgba(194, 32, 47, 0.18);
}

.pending-card__title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.pending-card__serial {
    margin-left: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 14px;
}

.pending-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px 18px;
    margin: 0;
    font-size: 13px;
}
.pending-card__meta div {
    display: flex;
    gap: 6px;
}
.pending-card__meta dt {
    margin: 0;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.pending-card__meta dd {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 600;
}

.pending-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 180px;
}
.pending-card__form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pending-card__edit {
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: none;
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}
.pending-card__edit:hover {
    color: var(--color-brand-red);
}

@media (max-width: 720px) {
    .pending-card {
        grid-template-columns: 1fr;
    }
    .pending-card__actions {
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Изображения в описании товара — 200x200 thumbnail-сетка
   ═══════════════════════════════════════════════════════════════ */

/* Все img внутри текста описания товара (post_content на single-product)
   сжимаются до thumbnail-размера. Реальные селекторы в шаблоне:
   id="tab-desc" + .rich-content. Inline-стили атрибуты width/height
   в исходном <img> перебиваем !important. */
#tab-desc img,
.rich-content img,
#tab-desc .rich-content img,
.product-description img {
    max-width: 200px !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 12px 12px 0;
    vertical-align: top;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
#tab-desc img:hover,
.rich-content img:hover,
.product-description img:hover {
    border-color: var(--color-brand-red);
    transform: scale(1.03);
    cursor: zoom-in;
}

/* Если несколько img подряд внутри <p> или сразу под секцией —
   они автоматически встают в сетку благодаря inline-block + margin. */

/* ═══════════════════════════════════════════════════════════════
   Комплект аксессуаров — ACF Repeater accessories на CPT product
   ═══════════════════════════════════════════════════════════════ */

.accessory-section {
    margin-top: 32px;
}
.accessory-section__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.accessory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.accessory-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.accessory-card:hover {
    border-color: var(--color-brand-red);
    transform: translateY(-2px);
}
.accessory-card__media {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Без margin — картинка касается всех краёв карточки */
}
/* Поднимаем специфичность через #tab-desc + класс — иначе универсальное
   правило `#tab-desc img` побеждает и навешивает рамку/паддинг/max-height,
   из-за чего фото вылезает за края карточки. */
#tab-desc .accessory-card__media img,
.rich-content .accessory-card__media img,
.accessory-card__media img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
#tab-desc .accessory-card__media img:hover,
.accessory-card__media img:hover {
    /* В карточке аксессуаров — без зума и рамки на hover (это сама карточка делает) */
    transform: none !important;
    border-color: transparent !important;
    cursor: default;
}
.accessory-card__caption {
    margin: 0;
    padding: 12px 14px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

@media (max-width: 900px) {
    .accessory-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .accessory-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Календарь обучения: timeline по годам + grouped программы
   ═══════════════════════════════════════════════════════════════ */

.training-calendar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 18px 0 32px;
}
.training-calendar__year-label {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}
.training-calendar__months {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    padding-top: 14px;
}
.training-calendar__line {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
    z-index: 0;
}
.training-calendar__month {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    z-index: 1;
}
.training-calendar__dot {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: var(--color-brand-red);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-brand-red);
}
.training-calendar__month-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: lowercase;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 720px) {
    .training-calendar__months {
        grid-template-columns: repeat(6, 1fr);
    }
    .training-calendar__month:nth-child(n+7) {
        margin-top: 24px;
    }
}

/* — Карточки программ — */
.training-programs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.training-program {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 22px 24px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.training-program:hover {
    border-color: var(--color-brand-red);
    box-shadow: 0 6px 20px -12px rgba(194, 32, 47, 0.2);
}
.training-program__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 16px;
    color: var(--color-text-primary);
}
.training-program__nearest {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.training-program__nearest-date {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-brand-red);
    text-decoration: none;
}
.training-program__nearest-date:hover {
    text-decoration: underline;
}
.training-program__toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.training-program__toggle:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-text-primary);
}
.training-program__caret {
    display: inline-block;
    transition: transform 0.2s ease;
    margin-left: 2px;
}
.training-program__toggle.is-open .training-program__caret {
    transform: rotate(180deg);
}
.training-program__rest {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.training-program__rest li a {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 4px 0;
    display: block;
    transition: color var(--transition-fast);
}
.training-program__rest li a:hover {
    color: var(--color-brand-red);
}

/* — Якорные табы под Hero на странице /training/ — */
.training-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 36px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.training-tabs__link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--color-bg-alt);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.training-tabs__link:hover {
    background: var(--color-brand-red);
    color: #fff;
    transform: translateY(-1px);
}

/* — Подсветка при hover точки/даты — связь timeline ↔ карточки — */

/* Точка увеличивается и получает glow */
.training-calendar__dot {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.training-calendar__dot:hover,
.training-calendar__dot.is-month-highlight {
    transform: translateX(-50%) scale(1.4);
    box-shadow: 0 0 0 1px var(--color-brand-red),
                0 0 12px 4px rgba(194, 32, 47, 0.45);
}

/* Ближайшая дата — пилюля красным фоном при подсветке */
.training-program__nearest-date {
    padding: 4px 10px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.training-program__nearest-date.is-month-highlight {
    background: var(--color-brand-red);
    color: #fff !important;
    transform: scale(1.04);
}

/* Строка из «все даты» — подсветка bg-alt и красный текст */
.training-program__rest li {
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.training-program__rest li.is-month-highlight {
    background: rgba(194, 32, 47, 0.10);
}
.training-program__rest li.is-month-highlight a {
    color: var(--color-brand-red) !important;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   Шапка — улучшения: sticky, активный пункт, иконки, анимации
   ═══════════════════════════════════════════════════════════════ */

/* — Sticky header + лёгкая тень при скролле — */
.header.alignfull {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
body.is-scrolled .header.alignfull {
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* — Иконки внутри top-bar: inline-flex + цвет — */
.top-bar__city,
.top-bar__phone,
.top-bar__hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.top-bar__city svg,
.top-bar__phone svg,
.top-bar__hours svg {
    flex-shrink: 0;
    color: var(--color-brand-red);
    opacity: 0.85;
}

/* — Активный пункт меню — красная подчёркивающая черта — */
.nav__link {
    position: relative;
    transition: color var(--transition-fast);
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-brand-red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}
.nav__item:hover > .nav__link::after,
.nav__link.nav__link--active::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(0.6);
}
.nav__link.nav__link--active,
.nav__link[aria-current="page"] {
    color: var(--color-brand-red);
}

/* — Плавное появление dropdown — */
.nav__dropdown,
.catalog-menu {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.nav__item--has-dropdown:hover > .nav__dropdown,
.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__item--catalog:hover > .catalog-menu,
.nav__item--catalog:focus-within > .catalog-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}