/* ===== Фирменная палитра ExtLab ===== */
:root {
    --xl-navy: #0F2B5B;
    --xl-teal: #2A8C96;
    --xl-teal-text: #1F6E78;
    --xl-orange: #FF6B35;
    --xl-violet: #6D28D9;
    --xl-bg-light: #F2F2F0;
    --xl-bg-dark: #12203A;
    --xl-teal-text-dark: #4FB3BD;
    --xl-yellow: #FFC53D;
    --xl-yellow-hover: #F0B429;
    /* Ссылки: текстовый вариант бирюзы «Lab» */
    --xl-link: #1F6E78;
    --xl-link-hover: #2A8C96;
    /* Блок-выноска rich-текстов: фон — производный #F2F2F0 + #2A8C96 */
    --xl-callout-bg: #E2EAE9;
    --xl-callout-border: #2A8C96;
    --xl-callout-text: #1C1C1C;
    /* Акцентная выноска (схемы/шаги): кремово-оранжевая */
    --xl-callout-accent-bg: #FFF4E6;
    --xl-callout-accent-brd: #FF6B35;

    /* Привязка к теме Bootstrap */
    --bs-body-bg: var(--xl-bg-light);
    --bs-body-color: #1C1C1C;
    --bs-primary: var(--xl-orange);
    --bs-link-color: var(--xl-teal-text);
    --bs-link-hover-color: #15525A;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-bs-theme="dark"] {
    --xl-navy: #FFFFFF;
    --xl-teal-text: var(--xl-teal-text-dark);
    --xl-violet: #C4B5FD;
    /* Ссылки: светлая бирюза на тёмном фоне */
    --xl-link: #4FB3BD;
    --xl-link-hover: #4FB3BD;
    /* Блок-выноска: фон — производный #12203A + #4FB3BD */
    --xl-callout-bg: #1B364E;
    --xl-callout-border: #4FB3BD;
    --xl-callout-text: #F2F2F0;
    /* Акцентная выноска: тёмно-коричневая подложка, мягкая оранжевая полоса */
    --xl-callout-accent-bg: #3A2A1C;
    --xl-callout-accent-brd: #FF8A5C;
    --bs-body-bg: var(--xl-bg-dark);
    --bs-body-color: #F2F2F0;
    --bs-link-color: var(--xl-teal-text-dark);
    --bs-link-hover-color: #7BCBD4;
}

/* ===== Шрифты ===== */
h1, h2, h3, h4, .navbar-brand, .brand-wordmark {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
}

/* Брендовый цвет заголовков: страница товара, статьи (h1 и тело),
   инструкции InstallationGuide, страница скачивания.
   Токен — тот же, что у «Ext» и «{ Частые вопросы }»; в тёмной теме
   --xl-navy переопределяется в белый автоматически. */
h1.h3,
article h1,
main:has(.articles-list) h1.mb-0,
main:has(.articles-grid) h1.mb-0,
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4,
#compat h3,
#install h3, #install h4,
.download-page h1 {
    color: var(--xl-navy);
}

/* ===== Ссылки: бирюза «Lab» =====
   Только текстовые ссылки в статьях (тело + карточки) и товарах
   (описания/инструкции + заголовки карточек). Кнопки, крошки, навбар,
   футер, пагинация и вкладки — не затрагиваются. */
.rich-content a,
.product-title a,
.article-card .article-title a {
    color: var(--xl-link);
    text-decoration: none;
    font-weight: 600;
}

.rich-content a:visited,
.product-title a:visited,
.article-card .article-title a:visited {
    color: var(--xl-link);
}

.rich-content a:hover,
.product-title a:hover,
.article-card .article-title a:hover {
    color: var(--xl-link-hover);
    text-decoration: underline;
}

/* ===== Вставленные картинки rich-контента =====
   Не шире контейнера, пропорции сохранены, центрирование по горизонтали.
   Точечный !important перебивает случайные атрибуты width/height и
   инлайн-стили прошлых вставок. Галерея товара, карточки, лайтбокс — не затрагиваются. */
.rich-content img {
    max-width: 100% !important;
    height: auto !important;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
}

/* Картинка с подписью: <figure> + <figcaption> (стиль summernote «Картинка с подписью»),
   центрирует и картинку, и подпись */
.rich-content figure {
    display: block;
    margin: 1.5rem auto;
    text-align: center;
    max-width: 100%;
}

.rich-content figure img {
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}

.rich-content figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    font-style: italic;
    text-align: center;
}

code, kbd, pre, .platform-version, .file-extension {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Цены — пропорциональным шрифтом сайта; цифры выровнены по колонкам */
.product-price {
    font-weight: 500;
    font-family: var(--bs-body-font-family);
    font-variant-numeric: tabular-nums;
}

/* ===== Знак и wordmark ===== */
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.brand-logo svg {
    display: block;
    height: 34px;
    width: auto;
}

.brand-wordmark {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.brand-ext {
    color: var(--xl-navy);
}

.brand-lab {
    color: var(--xl-teal);
}

/* ===== Кнопки: жёлтые CTA с тёмно-синим текстом ===== */
.btn-primary {
    --bs-btn-bg: var(--xl-yellow);
    --bs-btn-border-color: var(--xl-yellow);
    --bs-btn-hover-bg: var(--xl-yellow-hover);
    --bs-btn-hover-border-color: var(--xl-yellow-hover);
    --bs-btn-active-bg: #E3A824;
    --bs-btn-active-border-color: #E3A824;
    --bs-btn-disabled-bg: var(--xl-yellow);
    --bs-btn-disabled-border-color: var(--xl-yellow);
    --bs-btn-color: var(--xl-navy);
    --bs-btn-hover-color: var(--xl-navy);
    --bs-btn-active-color: var(--xl-navy);
    --bs-btn-disabled-color: var(--xl-navy);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 197, 61, 0.5);
}

/* Активная кнопка переключателя видов — жёлтая с тёмно-синим текстом
   (перебивает хардкод #0d6efd из catalog.css) */
.view-toggle .btn.active,
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--xl-yellow-hover) !important;
    border-color: var(--xl-yellow-hover) !important;
    color: #0F2B5B !important;
}

/* В тёмной теме текст кнопки — тёмный синий (на жёлтом читается идеально) */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #0F2B5B;
    --bs-btn-hover-color: #0F2B5B;
    --bs-btn-active-color: #0F2B5B;
}

/* ===== Вторичные кнопки: бирюза ===== */
.btn-teal {
    color: var(--xl-teal-text);
    border: 1px solid var(--xl-teal);
    background: transparent;
    --bs-btn-hover-color: #fff;
}

.btn-teal:hover,
.btn-teal:focus {
    background: #1F6E78;
    border-color: #1F6E78;
    color: #fff;
}

[data-bs-theme="dark"] .btn-teal {
    color: var(--xl-teal-text-dark);
    border-color: var(--xl-teal);
}

[data-bs-theme="dark"] .btn-teal:hover,
[data-bs-theme="dark"] .btn-teal:focus {
    background: var(--xl-teal-text-dark);
    border-color: var(--xl-teal-text-dark);
    color: var(--xl-bg-dark);
}

/* ===== Футер: тематический (светлый в light, тёмно-синий в dark) ===== */
.site-footer {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.site-footer h2 {
    color: var(--bs-secondary-color);
}

.site-footer .text-body,
.site-footer a {
    color: var(--bs-body-color);
}

.site-footer a:hover {
    color: var(--xl-teal-text);
}

[data-bs-theme="dark"] .site-footer {
    background: var(--xl-bg-dark);
    color: #F2F2F0;
}

[data-bs-theme="dark"] .site-footer h2 {
    color: #9FB4D6;
}

[data-bs-theme="dark"] .site-footer a {
    color: #D7DEE8;
}

[data-bs-theme="dark"] .site-footer a:hover {
    color: #FFFFFF;
}

.site-footer .footer-tagline {
    color: var(--bs-secondary-color);
    opacity: 0.8;
}

.site-footer .footer-links a {
    color: var(--xl-teal-text);
}

.site-footer .footer-links a:hover {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .site-footer .footer-links a {
    color: var(--xl-teal-text-dark);
}

[data-bs-theme="dark"] .site-footer .footer-links a:hover {
    color: #FFFFFF;
}

/* ===== Hero: девиз + паттерн { } ===== */
.home-hero {
    position: relative;
    overflow: hidden;
    padding: 2.75rem 1.25rem;
    min-height: 0;
}

.home-hero::before {
    content: "{ }";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12rem;
    line-height: 1;
    color: var(--xl-navy);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

[data-bs-theme="dark"] .home-hero::before {
    color: #FFFFFF;
}

.home-hero h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    margin-bottom: 0.75rem;
}

.home-hero .lead {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    max-width: 640px;
}

.home-hero .container {
    position: relative;
    z-index: 1;
}

.home-hero .btn {
    padding: 0.5rem 1.1rem;
}

@media (max-width: 767.98px) {
    .home-hero {
        padding: 2rem 1rem;
    }
    .home-hero h1 {
        font-size: 1.6rem;
    }
    .home-hero .btn {
        padding: 0.5rem 1rem;
    }
}

/* ===== Заголовки секций в фирменных скобках ===== */
.section-title {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--xl-navy);
}

.section-title .brace {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 500;
    color: var(--xl-teal);
    opacity: 0.8;
}

/* ===== Преимущества: иконки бренда ===== */
.text-xl-teal {
    color: var(--xl-teal-text);
}

[data-bs-theme="dark"] .text-xl-teal {
    color: var(--xl-teal-text-dark);
}

.text-xl-navy {
    color: var(--xl-navy);
}

/* ===== Шаги «Как это работает» ===== */
.step-num {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: var(--xl-teal-text);
    font-size: 1rem;
}

/* ===== Empty state: мотив { } ===== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-motif {
    display: block;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: var(--xl-teal-text);
    opacity: 0.6;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ===== Бейджи разделов: брендовые токены ===== */
.badge-cat,
.badge.badge-cat {
    border-radius: 0.5rem;
    padding: 0.35em 0.6em;
}

.badge-cat-navy,
.badge.badge-cat-navy {
    background-color: rgba(15, 43, 91, 0.12);
    color: #0F2B5B;
}

.badge-cat-teal,
.badge.badge-cat-teal {
    background-color: rgba(42, 140, 150, 0.14);
    color: #1F6E78;
}

.badge-cat-orange,
.badge.badge-cat-orange {
    background-color: rgba(255, 107, 53, 0.14);
    color: #C2410C;
}

.badge-cat-steel,
.badge.badge-cat-steel {
    background-color: rgba(91, 125, 177, 0.15);
    color: #3D5A80;
}

.badge-cat-gray,
.badge.badge-cat-gray {
    background-color: rgba(108, 117, 125, 0.14);
    color: #495057;
}

.badge-cat-violet,
.badge.badge-cat-violet {
    background-color: rgba(124, 58, 237, 0.12);
    color: var(--xl-violet);
}

[data-bs-theme="dark"] .badge-cat-navy,
[data-bs-theme="dark"] .badge.badge-cat-navy {
    background-color: rgba(157, 184, 232, 0.18);
    color: #9DB8E8;
}

[data-bs-theme="dark"] .badge-cat-teal,
[data-bs-theme="dark"] .badge.badge-cat-teal {
    background-color: rgba(79, 179, 189, 0.18);
    color: #4FB3BD;
}

[data-bs-theme="dark"] .badge-cat-orange,
[data-bs-theme="dark"] .badge.badge-cat-orange {
    background-color: rgba(255, 107, 53, 0.2);
    color: #FFB08A;
}

[data-bs-theme="dark"] .badge-cat-steel,
[data-bs-theme="dark"] .badge.badge-cat-steel {
    background-color: rgba(91, 125, 177, 0.25);
    color: #A9BFE3;
}

[data-bs-theme="dark"] .badge-cat-gray,
[data-bs-theme="dark"] .badge.badge-cat-gray {
    background-color: rgba(173, 181, 189, 0.18);
    color: #ADB5BD;
}

[data-bs-theme="dark"] .badge-cat-violet,
[data-bs-theme="dark"] .badge.badge-cat-violet {
    background-color: rgba(167, 139, 250, 0.18);
    color: var(--xl-violet);
}

/* ===== Плейсхолдеры обложек статей (цвет рубрики) ===== */
.article-ph {
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-ph i {
    font-size: 2.75rem;
}

.article-card-grid .article-ph {
    height: 180px;
}

.article-ph-navy {
    background-color: rgba(15, 43, 91, 0.08);
    color: #0F2B5B;
}

.article-ph-teal {
    background-color: rgba(42, 140, 150, 0.10);
    color: #1F6E78;
}

.article-ph-orange {
    background-color: rgba(255, 107, 53, 0.10);
    color: #C2410C;
}

.article-ph-steel {
    background-color: rgba(91, 125, 177, 0.12);
    color: #3D5A80;
}

.article-ph-gray {
    background-color: rgba(108, 117, 125, 0.10);
    color: #495057;
}

.article-ph-violet {
    background-color: rgba(124, 58, 237, 0.10);
    color: var(--xl-violet);
}

[data-bs-theme="dark"] .article-ph-navy {
    background-color: rgba(157, 184, 232, 0.10);
    color: #9DB8E8;
}

[data-bs-theme="dark"] .article-ph-teal {
    background-color: rgba(79, 179, 189, 0.12);
    color: #4FB3BD;
}

[data-bs-theme="dark"] .article-ph-orange {
    background-color: rgba(255, 107, 53, 0.12);
    color: #FFB08A;
}

[data-bs-theme="dark"] .article-ph-steel {
    background-color: rgba(91, 125, 177, 0.16);
    color: #A9BFE3;
}

[data-bs-theme="dark"] .article-ph-gray {
    background-color: rgba(173, 181, 189, 0.12);
    color: #ADB5BD;
}

[data-bs-theme="dark"] .article-ph-violet {
    background-color: rgba(167, 139, 250, 0.14);
    color: var(--xl-violet);
}

/* ===== Плейсхолдеры изображений товаров (визуал раздела) ===== */
.cat-ph {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-ph i {
    font-size: 4rem;
}

.related-products .cat-ph i {
    font-size: 3.25rem;
}

.gallery-main.cat-ph {
    min-height: 350px;
    width: 100%;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.cat-ph-navy {
    background-color: rgba(15, 43, 91, 0.08);
    color: #0F2B5B;
}

.cat-ph-teal {
    background-color: rgba(42, 140, 150, 0.10);
    color: #1F6E78;
}

.cat-ph-orange {
    background-color: rgba(255, 107, 53, 0.10);
    color: #C2410C;
}

.cat-ph-steel {
    background-color: rgba(91, 125, 177, 0.12);
    color: #3D5A80;
}

.cat-ph-gray {
    background-color: rgba(108, 117, 125, 0.10);
    color: #495057;
}

.cat-ph-violet {
    background-color: rgba(124, 58, 237, 0.10);
    color: var(--xl-violet);
}

[data-bs-theme="dark"] .cat-ph-navy {
    background-color: rgba(157, 184, 232, 0.10);
    color: #9DB8E8;
}

[data-bs-theme="dark"] .cat-ph-teal {
    background-color: rgba(79, 179, 189, 0.12);
    color: #4FB3BD;
}

[data-bs-theme="dark"] .cat-ph-orange {
    background-color: rgba(255, 107, 53, 0.12);
    color: #FFB08A;
}

[data-bs-theme="dark"] .cat-ph-steel {
    background-color: rgba(91, 125, 177, 0.16);
    color: #A9BFE3;
}

[data-bs-theme="dark"] .cat-ph-gray {
    background-color: rgba(173, 181, 189, 0.12);
    color: #ADB5BD;
}

[data-bs-theme="dark"] .cat-ph-violet {
    background-color: rgba(167, 139, 250, 0.14);
    color: var(--xl-violet);
}

@media (max-width: 575.98px) {
    .cat-ph i {
        font-size: 3rem;
    }
}

/* ===== Тонированный фон карточек товаров по цвету раздела =====
   Тон — в CSS-переменных карточки: плитка/главная/compact берут фон целиком.
   Вид «список» (desktop) — нейтральная текстовая часть + тонированная колонка изображения. */

.product-card.product-card-cat-navy {
    --xl-card-tint: rgba(15, 43, 91, 0.05);
    --xl-card-tint-hover: rgba(15, 43, 91, 0.08);
    background-color: var(--xl-card-tint);
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.product-card.product-card-cat-navy:hover {
    background-color: var(--xl-card-tint-hover);
}

[data-bs-theme="dark"] .product-card.product-card-cat-navy {
    --xl-card-tint: rgba(157, 184, 232, 0.08);
    --xl-card-tint-hover: rgba(157, 184, 232, 0.12);
    background-color: var(--xl-card-tint);
}

[data-bs-theme="dark"] .product-card.product-card-cat-navy:hover {
    background-color: var(--xl-card-tint-hover);
}

.product-card.product-card-cat-teal {
    --xl-card-tint: rgba(42, 140, 150, 0.05);
    --xl-card-tint-hover: rgba(42, 140, 150, 0.08);
    background-color: var(--xl-card-tint);
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.product-card.product-card-cat-teal:hover {
    background-color: var(--xl-card-tint-hover);
}

[data-bs-theme="dark"] .product-card.product-card-cat-teal {
    --xl-card-tint: rgba(79, 179, 189, 0.08);
    --xl-card-tint-hover: rgba(79, 179, 189, 0.12);
    background-color: var(--xl-card-tint);
}

[data-bs-theme="dark"] .product-card.product-card-cat-teal:hover {
    background-color: var(--xl-card-tint-hover);
}

.product-card.product-card-cat-orange {
    --xl-card-tint: rgba(255, 107, 53, 0.05);
    --xl-card-tint-hover: rgba(255, 107, 53, 0.08);
    background-color: var(--xl-card-tint);
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.product-card.product-card-cat-orange:hover {
    background-color: var(--xl-card-tint-hover);
}

[data-bs-theme="dark"] .product-card.product-card-cat-orange {
    --xl-card-tint: rgba(255, 176, 138, 0.08);
    --xl-card-tint-hover: rgba(255, 176, 138, 0.12);
    background-color: var(--xl-card-tint);
}

[data-bs-theme="dark"] .product-card.product-card-cat-orange:hover {
    background-color: var(--xl-card-tint-hover);
}

.product-card.product-card-cat-steel {
    --xl-card-tint: rgba(91, 125, 177, 0.05);
    --xl-card-tint-hover: rgba(91, 125, 177, 0.08);
    background-color: var(--xl-card-tint);
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.product-card.product-card-cat-steel:hover {
    background-color: var(--xl-card-tint-hover);
}

[data-bs-theme="dark"] .product-card.product-card-cat-steel {
    --xl-card-tint: rgba(169, 191, 227, 0.08);
    --xl-card-tint-hover: rgba(169, 191, 227, 0.12);
    background-color: var(--xl-card-tint);
}

[data-bs-theme="dark"] .product-card.product-card-cat-steel:hover {
    background-color: var(--xl-card-tint-hover);
}

.product-card.product-card-cat-gray {
    --xl-card-tint: rgba(108, 117, 125, 0.05);
    --xl-card-tint-hover: rgba(108, 117, 125, 0.08);
    background-color: var(--xl-card-tint);
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.product-card.product-card-cat-gray:hover {
    background-color: var(--xl-card-tint-hover);
}

[data-bs-theme="dark"] .product-card.product-card-cat-gray {
    --xl-card-tint: rgba(173, 181, 189, 0.08);
    --xl-card-tint-hover: rgba(173, 181, 189, 0.12);
    background-color: var(--xl-card-tint);
}

[data-bs-theme="dark"] .product-card.product-card-cat-gray:hover {
    background-color: var(--xl-card-tint-hover);
}

@media (min-width: 769px) {
    .view-list .product-card-cat-navy {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-navy:hover {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-navy .product-image {
        background-color: var(--xl-card-tint);
        height: auto;
        min-height: 180px;
    }

    .view-list .product-card-cat-navy:hover .product-image {
        background-color: var(--xl-card-tint-hover);
    }

    .view-list .product-card-cat-teal {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-teal:hover {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-teal .product-image {
        background-color: var(--xl-card-tint);
        height: auto;
        min-height: 180px;
    }

    .view-list .product-card-cat-teal:hover .product-image {
        background-color: var(--xl-card-tint-hover);
    }

    .view-list .product-card-cat-orange {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-orange:hover {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-orange .product-image {
        background-color: var(--xl-card-tint);
        height: auto;
        min-height: 180px;
    }

    .view-list .product-card-cat-orange:hover .product-image {
        background-color: var(--xl-card-tint-hover);
    }

    .view-list .product-card-cat-steel {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-steel:hover {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-steel .product-image {
        background-color: var(--xl-card-tint);
        height: auto;
        min-height: 180px;
    }

    .view-list .product-card-cat-steel:hover .product-image {
        background-color: var(--xl-card-tint-hover);
    }

    .view-list .product-card-cat-gray {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-gray:hover {
        background-color: var(--bs-body-bg);
    }

    .view-list .product-card-cat-gray .product-image {
        background-color: var(--xl-card-tint);
        height: auto;
        min-height: 180px;
    }

    .view-list .product-card-cat-gray:hover .product-image {
        background-color: var(--xl-card-tint-hover);
    }
}

/* ===== Поиск в навбаре ===== */
.navbar-search .form-control {
    width: 200px;
    transition: width .25s ease;
}

.navbar-search .form-control:focus {
    width: 280px;
    border-color: var(--xl-teal);
    box-shadow: 0 0 0 .2rem rgba(42, 140, 150, .15);
}

@media (max-width: 991.98px) {
    .navbar-search {
        width: 100%;
    }
    .navbar-search .form-control,
    .navbar-search .form-control:focus {
        width: 100%;
    }
}

/* ===== Проверенные релизы (паспорт совместимости) ===== */
.badge.mono {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 500;
}

.badge.release-ok {
    background: rgba(42, 140, 150, .14);
    color: #1F6E78;
}

.badge.release-bad {
    background: rgba(220, 53, 69, .12);
    color: #B02A37;
}

[data-bs-theme="dark"] .badge.release-ok {
    background: rgba(79, 179, 189, .18);
    color: #4FB3BD;
}

[data-bs-theme="dark"] .badge.release-bad {
    background: rgba(220, 53, 69, .2);
    color: #EA868F;
}

/* ===== Боковая карточка товара: sticky на всю высоту ===== */
@media (min-width: 992px) {
    .product-sidebar {
        position: sticky;
        top: 84px;   /* высота навбара + отступ */
    }
}

/* ===== Статьи: режимы плитка/список + фирменные ссылки ===== */
.articles-container.view-grid .articles-list {
    display: none;
}

.articles-container.view-list .articles-grid {
    display: none;
}

.articles-list .article-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card .article-title a {
    color: var(--xl-link);
    text-decoration: none;
}

.article-card .article-title a:hover {
    color: var(--xl-link-hover);
    text-decoration: underline;
}

[data-bs-theme="dark"] .article-card .article-title a {
    color: var(--xl-link);
}

[data-bs-theme="dark"] .article-card .article-title a:hover {
    color: var(--xl-link-hover);
    text-decoration: underline;
}

/* ===== Промо-баннеры в статьях ===== */
@media (min-width: 992px) {
    .promo-sidebar {
        position: sticky;
        top: 84px;
    }
}

.promo-banner {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.promo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xl-teal-text);
    border: 1px solid var(--xl-teal);
    border-radius: 999px;
    padding: 0.25em 0.75em;
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .promo-label {
    color: var(--xl-teal-text-dark);
}

/* ===== Бейджи в шапке товара: единая геометрия ===== */
.product-header-badges .badge,
.product-header-badges .badge-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.75em;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 600;
}

/* ===== Индивидуальный заказ: заметный блок ===== */
.custom-order-note {
    background: rgba(42, 140, 150, 0.12);
    border-left: 4px solid var(--xl-teal);
}

.custom-order-note i {
    color: var(--xl-teal);
}

[data-bs-theme="dark"] .custom-order-note {
    background: rgba(79, 179, 189, 0.16);
}

/* Honeypot-ловушки форм: скрыты от людей, видны ботам */
.custom-order-honeypot,
.article-comment-honeypot {
    display: none;
}

/* ===== Ответ администратора (комментарии к статьям, отзывы) ===== */
.admin-reply {
    background: var(--bs-tertiary-bg);
    border-left: 4px solid var(--xl-teal);
    border-radius: 8px;
    padding: 12px 16px;
}

.admin-reply .bi-person-badge {
    color: var(--xl-teal-text);
}

/* ===== Бирюзовая информационная подсказка (checkout и др.) ===== */
.alert-xl-teal {
    background: rgba(42, 140, 150, 0.12);
    border: 1px solid rgba(42, 140, 150, 0.35);
    color: inherit;
}

.alert-xl-teal i {
    color: var(--xl-teal);
}

[data-bs-theme="dark"] .alert-xl-teal {
    background: rgba(79, 179, 189, 0.16);
    border-color: rgba(79, 179, 189, 0.4);
}

/* ===== Блок-выноска rich-текстов (summernote «Блок-выноска») =====
   Селектор без .rich-content нужен для превью в iframe-редакторе,
   где у body нет обёртки .rich-content */
.rich-content .xl-callout,
.xl-callout {
    background: var(--xl-callout-bg);
    border-left: 4px solid var(--xl-callout-border);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
    color: var(--xl-callout-text);
}

/* Акцентная выноска: схемы шагов и пошаговые памятки (оранжевая полоса) */
.rich-content .xl-callout--accent,
.xl-callout--accent {
    background: var(--xl-callout-accent-bg);
    border-left-color: var(--xl-callout-accent-brd);
}

.xl-callout p:last-child {
    margin-bottom: 0;
}

/* ===== Предупреждение о совместимости (расширения) ===== */
.compat-warning {
    background: rgba(255, 107, 53, 0.12);
    border: 1px solid rgba(255, 107, 53, 0.4);
    border-left: 5px solid var(--xl-orange);
    color: var(--bs-body-color);
}

.compat-warning i {
    color: var(--xl-orange);
}

/* Иконки инфоблоков «Совместимость»: не сжимаются,
   вертикально центрированы относительно текста (в т.ч. двухстрочного) */
.compat-warning .bi,
.base-version-note .bi {
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: initial;
}

.compat-warning .bi::before,
.base-version-note .bi::before {
    vertical-align: 0;
}

[data-bs-theme="dark"] .compat-warning {
    background: rgba(255, 107, 53, 0.18);
}

/* ===== Хлебные крошки: брендовый стиль ===== */
.breadcrumb a {
    color: var(--xl-teal-text);
}

.breadcrumb a:hover {
    text-decoration: underline;
    color: var(--xl-teal);
}

[data-bs-theme="dark"] .breadcrumb a:hover {
    color: var(--xl-teal-text-dark);
}

.breadcrumb {
    --bs-breadcrumb-active-color: var(--bs-secondary-color);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
}