/* ========================================================================
ВЕСТРЕНД PRO: GLOBAL MASTER STYLESHEET (ULTIMATE VERSION)
Объединенный файл стилей для всей платформы (Дашборды, Блог, Каталог, Gutenberg)
======================================================================== */

:root {
/* 1. БАЗОВАЯ ПАЛИТРА И ТИПОГРАФИКА (B2B Dashboard & General) */
--rhl-font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--b2b-bg-page: #fcfcfc;
--b2b-surface: #ffffff;
--b2b-border: rgba(15, 23, 42, 0.08); 
--b2b-border-hover: rgba(15, 23, 42, 0.15);

--b2b-text-main: #0f172a;
--b2b-text-muted: #64748b;
--b2b-text-light: #94a3b8;
--b2b-primary: #2563eb;
--b2b-primary-hover: #1e40af;
--b2b-primary-light: #eff6ff;
--b2b-danger: #e11d48;
--b2b-success: #059669;
--b2b-warning: #f59e0b;
--b2b-accent: #e11d48;

/* Совместимость с шорткодами характеристик */
--rhl-color-title: #0f172a;
--rhl-color-text: #334155;
--rhl-color-label: #94a3b8;
--rhl-color-accent: #3b82f6;

--rhl-size-h2: 22px;
--rhl-size-h3: 16px;
--rhl-size-main: 14px;
--rhl-size-small: 12px;
--rhl-size-micro: 10px; 

--rhl-weight-bold: 700;
--rhl-weight-medium: 600;
--rhl-weight-normal: 400;

/* Радиусы и тени */
--b2b-radius-xl: 12px;
--b2b-radius-lg: 8px;
--b2b-radius-md: 6px;
--b2b-shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
    --b2b-shadow-md: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
    --b2b-shadow-lg: 0 20px 40px -8px rgba(37, 99, 235, 0.12);
--b2b-shadow-hover: 0 10px 25px -5px rgba(29, 78, 216, 0.1);
--b2b-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* 2. АЛИАСЫ ДЛЯ СТРАНИЦ АНАЛИТИКИ (Data Slice - DS) */
--ds-bg: #f4f7f9; 
--ds-surface: #ffffff; 
--ds-border: #e2e8f0;
--ds-text-main: #0f172a; 
--ds-text-muted: #64748b; 
--ds-text-light: #94a3b8;
--ds-primary: #2563eb; 
--ds-success: #10b981; 
--ds-warning: #f59e0b; 
--ds-danger: #ef4444; 
--ds-purple: #8b5cf6;
--ds-radius-xl: 20px; 
--ds-radius-lg: 16px; 
--ds-radius-md: 10px;
--ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
--ds-shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
--ds-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* 3. АЛИАСЫ ДЛЯ ИНФОРМАЦИОННЫХ СТРАНИЦ (View Page - VP, Legal, MD) */
--vp-bg: #f8fafc;
--vp-surface: #ffffff;
--vp-border: #cbd5e1;
--vp-text-main: #0f172a;
--vp-text-muted: #475569;
--vp-text-light: #64748b;
--vp-primary: #1d4ed8;
--vp-primary-light: #eff6ff;
--vp-accent: #0ea5e9;
--vp-radius: 12px;
--vp-shadow: 0 1px 3px rgba(0,0,0,0.05);


}

html { scroll-behavior: smooth; }

/* ========================================================================

ОБЩИЕ КОНТЕЙНЕРЫ И МАКЕТЫ
======================================================================== */
.b2b-mega-dash { font-family: var(--rhl-font-main); color: var(--b2b-text-main); max-width: 1440px; /* Было 1280px */
    margin: 0 auto; 
    padding: 40px 20px 80px; line-height: 1.6; box-sizing: border-box; }
.b2b-mega-dash * { box-sizing: border-box; }
.vp-container { font-family: var(--rhl-font-main); color: var(--vp-text-main); max-width: 1440px; margin: 0 auto; line-height: 1.6; }
.md-container { font-family: var(--rhl-font-main); max-width: 1440px; margin: 0 auto; padding: 20px 0; }

.ds-layout * { box-sizing: border-box; }

.b2b-section-header { text-align: center; max-width: 700px; margin: 0 auto 32px auto; }
.b2b-section-header h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--b2b-text-main); margin: 0 0 10px 0; }
.b2b-section-header p { font-size: 16px; color: var(--b2b-text-muted); margin: 0; line-height: 1.5; }
.vp-section-title { font-size: 28px; font-weight: 800; color: var(--vp-text-main); margin: 0 0 32px 0; text-align: center; }
.vp-section { margin-bottom: 60px; }
.rhl-content-section { max-width: 1200px; margin: 0 auto 60px; padding: 0 20px; scroll-margin-top: 80px; }
.rhl-section-title { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #e2e8f0; }

/* ========================================================================
2. HERO СЕКЦИИ И ПОИСК
======================================================================== */
.b2b-hero-section { background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-xl); padding: 70px 20px 60px; text-align: center; box-shadow: var(--b2b-shadow-md); position: relative; z-index: 2; margin-bottom: 24px; }
.b2b-hero-title { font-size: clamp(24px, 5vw, 42px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--b2b-text-main); line-height: 1.1; }
.b2b-hero-subtitle { font-size: 18px; color: var(--b2b-text-muted); max-width: 700px; margin: 0 auto 40px; font-weight: 400; line-height: 1.6; }

.vp-hero, .hero, .hero-text-only { text-align: center; padding: clamp(60px, 8vw, 100px) 20px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 1px solid var(--vp-border); border-radius: var(--vp-radius); margin-bottom: 40px; box-shadow: var(--vp-shadow); }
.vp-hero h1, .hero h1, .hero-text-only h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; color: var(--vp-text-main); margin: 0 0 20px 0; letter-spacing: -0.03em; line-height: 1.1; }
.vp-hero p, .hero-sub, .hero-text-only .hero-sub { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--vp-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; }
.vp-badge, .hero .badge, .hero-text-only .badge { display: inline-block; background: rgba(37, 99, 235, 0.08); color: var(--vp-primary); padding: 6px 16px; border-radius: 4px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 24px; box-shadow: none; }
.vp-hero-btn { display: inline-block; margin-top: 30px; background-color: #2563eb; color: #ffffff; padding: 14px 32px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
.vp-hero-btn:hover { background-color: #1d4ed8; transform: translateY(-2px); color: #ffffff; }

.b2b-search-container { position: relative; max-width: 720px; margin: 0 auto; text-align: left; }
.b2b-dash-search { display: flex; align-items: center; background: var(--b2b-surface); border: 2px solid var(--b2b-border); border-radius: var(--b2b-radius-lg); padding: 6px; transition: var(--b2b-transition); position: relative; z-index: 10; box-shadow: var(--b2b-shadow-sm); }
.b2b-dash-search:focus-within { border-color: var(--b2b-primary); box-shadow: 0 0 0 4px var(--b2b-primary-light); }
.b2b-dash-search.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--b2b-primary); }
.b2b-dash-search-icon { padding: 0 16px; color: var(--b2b-text-muted); display: flex; align-items: center;}
.b2b-dash-search input { flex: 1; border: none; background: transparent; padding: 14px 0; font-size: 16px; outline: none; color: var(--b2b-text-main); width: 100%; font-family: inherit; }
.b2b-dash-search input::placeholder { color: #94a3b8; font-weight: 400; }
.b2b-dash-search button { background: var(--b2b-primary); color: #fff; border: none; padding: 14px 32px; border-radius: var(--b2b-radius-md); font-weight: 600; font-size: 15px; cursor: pointer; transition: var(--b2b-transition); white-space: nowrap; text-transform: uppercase; }
.b2b-dash-search button:hover { background: var(--b2b-primary-hover); }
.b2b-search-spinner { display: none; width: 22px; height: 22px; border: 2px solid var(--b2b-border); border-top-color: var(--b2b-primary); border-radius: 50%; animation: b2b-spin 0.8s linear infinite; margin-right: 16px; }

.b2b-live-results { display: none; position: absolute; top: calc(100% - 2px); left: 0; right: 0; background: var(--b2b-surface); border: 2px solid var(--b2b-primary); border-top: 1px solid var(--b2b-border); border-radius: 0 0 var(--b2b-radius-lg) var(--b2b-radius-lg); box-shadow: var(--b2b-shadow-lg); z-index: 9; overflow: hidden; }
.b2b-search-item { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--b2b-border); text-decoration: none; transition: var(--b2b-transition); }
.b2b-search-item:last-child { border-bottom: none; }
.b2b-search-item:hover { background: var(--b2b-bg-page); padding-left: 28px; }
.b2b-search-item img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--b2b-radius-md); border: 1px solid var(--b2b-border); padding: 4px; background: #fff; }
.b2b-search-item-info { flex: 1; }
.b2b-search-item-title { font-size: 15px; font-weight: 600; color: var(--b2b-text-main); margin-bottom: 4px; }
.b2b-search-item-meta { display: flex; gap: 12px; font-size: 12px; align-items: center; }
.b2b-search-item-meta .sku { color: var(--b2b-text-main); font-family: 'Menlo', monospace; font-weight: 500; background: var(--b2b-border); padding: 3px 8px; border-radius: 4px; }
.b2b-search-item-meta .brand { color: var(--b2b-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.b2b-search-item-action { font-size: 13px; font-weight: 600; color: var(--b2b-primary); opacity: 0; transition: var(--b2b-transition); transform: translateX(-10px); }
.b2b-search-item:hover .b2b-search-item-action { opacity: 1; transform: translateX(0); }
.b2b-search-empty { padding: 30px; text-align: center; color: var(--b2b-text-muted); font-size: 15px; }

/* ========================================================================
ИСПРАВЛЕНИЕ CLS (Защита от дерганья графиков и карточек)
======================================================================== */
.b2b-insight-card,
.b2b-panel,
.dist-tile {
min-height: 250px;
contain: layout style;
}

/* Принудительно отключаем старую сетку WooCommerce и включаем GRID */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; /* Умная ширина: минимум 280px, дальше тянется */
    gap: 32px !important; /* Ровные отступы между карточками */
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние элементы старой сетки */
.woocommerce ul.products::before, 
.woocommerce ul.products::after { 
    display: none !important; 
}

/* Лечим сами карточки товаров (отключаем прилипание влево) */
.woocommerce ul.products li.product {
    width: 100% !important; /* Карточка заполняет всю свою ячейку грида */
    margin: 0 !important;
    float: none !important; /* УБИВАЕМ ПРИЛИПАНИЕ ВЛЕВО */
    display: flex;
    flex-direction: column;
}

/* Фиксируем высоту картинок, чтобы карточки не прыгали, если фото разных размеров */
.woocommerce ul.products li.product img, .sc-similar-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 20px;
    background: #ffffff;
}


/* ========================================================================
   10. ЛЕНДИНГ-КОМПОНЕНТЫ (Features, Process, Pricing, FAQ, CTA)
   ======================================================================== */


 /* Сетка преимуществ */
.vp-features { 
    display: grid; 
    /* 4 колонки на больших экранах, 2 на планшетах, 1 на мобильных */
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; 
}

/* На планшетах перестраиваем в 2 ряда, чтобы ничего не убегало */
@media (max-width: 1024px) {
    .vp-features { grid-template-columns: repeat(2, 1fr); }
}

/* На мобильных всё в один ряд */
@media (max-width: 600px) {
    .vp-features { grid-template-columns: 1fr; }
}

.vp-feature-card { background: var(--vp-surface); border: 1px solid var(--vp-border); padding: 32px 24px; border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); transition: transform 0.3s ease; }
.vp-feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.vp-feature-card h3 { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 15px; }
.vp-feature-card p { font-size: 14px; color: var(--vp-text-muted); margin: 0; }

/* Шаги работы */
.vp-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.vp-step { background: var(--vp-surface); border: 1px solid var(--vp-border); padding: 24px; border-radius: var(--vp-radius); position: relative; }
.vp-step-num { font-size: 48px; font-weight: 900; color: var(--vp-primary-light); position: absolute; top: 10px; right: 20px; line-height: 1; z-index: 1; }
.vp-step-content { position: relative; z-index: 2; }
.vp-step h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px 0; color: var(--vp-text-main); }
.vp-step p { font-size: 14px; color: var(--vp-text-muted); margin: 0; }

/* Тарифы / Форматы */
.vp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.vp-price-card { background: var(--vp-surface); border: 1px solid var(--vp-border); padding: 40px 32px; border-radius: var(--vp-radius); text-align: center; position: relative; }
.vp-price-card.best { border: 2px solid var(--vp-primary); box-shadow: 0 10px 25px -5px rgba(29, 78, 216, 0.1); }
.vp-price-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--vp-primary); color: #fff; padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.vp-price-card h4 { font-size: 24px; font-weight: 800; margin: 0 0 24px 0; }
.vp-price-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.vp-price-list li { padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 15px; color: var(--vp-text-muted); display: flex; align-items: center; gap: 10px; }
.vp-price-list li:last-child { border-bottom: none; }
.vp-price-list li::before { content: '✓'; color: #10b981; font-weight: 900; }

/* FAQ (Аккордеоны) */
.vp-faq { max-width: 800px; margin: 0 auto; }
.vp-faq details { background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.vp-faq summary { padding: 20px; font-weight: 700; font-size: 16px; cursor: pointer; outline: none; display: flex; justify-content: space-between; align-items: center; }
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after { content: '+'; color: var(--vp-primary); font-size: 20px; }
.vp-faq details[open] summary::after { content: '−'; }
.vp-faq .faq-content { padding: 0 20px 20px; font-size: 15px; color: var(--vp-text-muted); border-top: 1px solid #f1f5f9; margin-top: 10px; padding-top: 20px; }

/* CTA Форма */
.vp-cta { background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: var(--vp-radius); padding: 40px; box-shadow: var(--vp-shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.vp-cta h2 { font-size: 32px; font-weight: 800; margin: 0 0 16px 0; }

/* Кнопки */
.vp-btn { display: inline-block; width: 100%; text-align: center; padding: 14px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.2s; box-sizing: border-box; }
.vp-btn-primary { background: var(--vp-primary); color: #fff; border: 1px solid var(--vp-primary); }
.vp-btn-primary:hover { background: #1e3a8a; }
.vp-btn-outline { background: transparent; color: var(--vp-text-main); border: 1px solid var(--vp-border); }
.vp-btn-outline:hover { border-color: var(--vp-primary); color: var(--vp-primary); }
/* ========================================================================
3. НАВИГАЦИЯ (ЛИПКОЕ МЕНЮ И ХЛЕБНЫЕ КРОШКИ)
======================================================================== */
.rhl-sticky-nav-wrapper { position: sticky; top: 70px; z-index: 9999; background: #ffffff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; margin: 40px 0 20px; padding: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.rhl-sticky-nav { display: flex; list-style: none; margin: 0 auto; padding: 0 20px; max-width: 1200px; overflow-x: auto; }
.rhl-sticky-nav li { margin: 0; }
.rhl-sticky-nav a { display: block; padding: 16px 24px; font-size: 15px; font-weight: 600; color: #475569; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.rhl-sticky-nav a:hover { color: #3b82f6; border-bottom-color: #3b82f6; }

.b2b-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.b2b-breadcrumbs .bc-item a { color: #64748b; text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.2s ease; }
.b2b-breadcrumbs .bc-item a:hover { color: var(--b2b-primary); }
.b2b-breadcrumbs .bc-sep { color: #cbd5e1; font-size: 12px; margin: 0 4px; }
.b2b-breadcrumbs .bc-item:last-child a { color: #0f172a; pointer-events: none; font-weight: 600; }

.rhl-archive-header { margin-bottom: 30px; }
.rhl-archive-header .page-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--b2b-text-main); margin-top: 10px; letter-spacing: -0.02em; }
.rhl-archive-header .archive-description { color: var(--b2b-text-muted); font-size: 15px; margin-top: 12px; line-height: 1.6; max-width: 800px; }

/* ========================================================================
4. ДАШБОРД: СЕТКИ, ПАНЕЛИ, KPI И ИНФОГРАФИКА
======================================================================== */
.b2b-trust-band { display: flex; justify-content: center; align-items: center; gap: 40px; margin-bottom: 60px; padding: 0 20px; }
.b2b-trust-item { display: flex; align-items: center; gap: 10px; color: var(--b2b-text-muted); font-size: 13px; font-weight: 500; }
.b2b-trust-icon { color: var(--b2b-text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b2b-trust-icon svg { width: 16px; height: 16px; }

.b2b-modules-grid, .vp-features, .pricing-grid, .partner-grid, .values-grid, .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 30px); margin-bottom: 80px; }
.b2b-module-card, .vp-feature-card, .price-box, .partner-card, .val-card, .faq-item { background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-lg); padding: clamp(24px, 4vw, 32px); position: relative; transition: var(--b2b-transition); box-shadow: var(--b2b-shadow-sm); display: flex; flex-direction: column; height: 100%; }
.b2b-module-card:hover, .vp-feature-card:hover, .price-box:hover, .partner-card:hover, .val-card:hover, .faq-item:hover { border-color: var(--b2b-primary); box-shadow: var(--b2b-shadow-md); transform: translateY(-2px); z-index: 2; }
.b2b-module-header, .tile-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.b2b-module-dot, .tile-dot { width: 6px; height: 6px; background: var(--b2b-primary); border-radius: 50%; }
.b2b-module-title, .vp-feature-card h3, .val-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 12px 0; color: var(--b2b-text-main); }
.b2b-module-desc, .vp-feature-card p { font-size: 14px; color: var(--b2b-text-muted); margin: 0; line-height: 1.6; }
.price-box.best, .highlight-card { border: 2px solid var(--b2b-primary); box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1); }
.tag { position: absolute; top: 16px; right: 16px; background: rgba(37, 99, 235, 0.1); color: var(--b2b-primary); font-size: 0.7rem; padding: 4px 10px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.b2b-scenarios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 32px; }
.b2b-scenario-card { background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-md); padding: 24px; text-decoration: none; transition: all 0.2s; box-shadow: var(--b2b-shadow-sm); }
.b2b-scenario-card:hover { border-color: var(--b2b-primary); transform: translateY(-2px); }
.b2b-scenario-icon { color: var(--b2b-text-muted); margin-bottom: 16px; }
.b2b-scenario-card:hover .b2b-scenario-icon { color: var(--b2b-primary); }
.b2b-scenario-title { font-size: 16px; font-weight: 700; color: var(--b2b-text-main); margin-bottom: 8px; }
.b2b-scenario-desc { font-size: 13px; color: var(--b2b-text-muted); line-height: 1.4; }

.b2b-categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 80px; }
.b2b-cat-card { display: flex; align-items: center; background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-lg); padding: 20px; text-decoration: none; color: inherit; transition: var(--b2b-transition); box-shadow: var(--b2b-shadow-sm); }
.b2b-cat-card:hover { border-color: var(--b2b-primary); box-shadow: var(--b2b-shadow-md); }
.b2b-cat-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--b2b-bg-page); color: var(--b2b-text-main); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-md); margin-right: 16px; flex-shrink: 0; transition: var(--b2b-transition); }
.b2b-cat-card:hover .b2b-cat-icon { background: var(--b2b-primary-light); color: var(--b2b-primary); border-color: transparent; }
.b2b-cat-info { flex: 1; }
.b2b-cat-info h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 700; color: var(--b2b-text-main); }
.b2b-cat-info p { margin: 0; font-size: 13px; color: var(--b2b-text-muted); line-height: 1.4; }

.b2b-split-layout { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: 24px; margin-bottom: 80px; align-items: start; }
.b2b-side-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.b2b-panel { background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-xl); padding: 24px; box-shadow: var(--b2b-shadow-sm); min-width: 0; height: 100%; }
.b2b-panel-title { font-size: 18px; font-weight: 800; margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--b2b-border); padding-bottom: 12px; color: var(--b2b-text-main); }
.b2b-side-col .b2b-panel h2, .b2b-side-col .b2b-panel h3, .b2b-side-col .b2b-panel h4 { font-size: 16px !important; margin-top: 0 !important; margin-bottom: 15px !important; }

/* KPI Cards */
.b2b-mini-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.b2b-mini-kpi { background: var(--b2b-surface); padding: 20px 16px; border-radius: var(--b2b-radius-md); text-align: center; border: 1px solid var(--b2b-border); box-shadow: var(--b2b-shadow-sm); transition: var(--b2b-transition); }
.b2b-mini-kpi:hover { transform: translateY(-2px); box-shadow: var(--b2b-shadow-md); border-color: var(--b2b-border-hover); }
.rhl-kpi-value, .b2b-mini-kpi-val { font-size: 32px !important; font-weight: 800 !important; line-height: 1 !important; display: block; margin-bottom: 8px; transition: transform 0.3s ease; }
.b2b-mini-kpi:hover .rhl-kpi-value { transform: scale(1.05); }
.kpi-total_products { color: var(--b2b-primary) !important; }
.kpi-rus_percent { color: var(--b2b-success) !important; }
.kpi-total_brands { color: var(--b2b-warning) !important; }
.b2b-mini-kpi-lbl { font-size: 11px; font-weight: 700; color: var(--b2b-text-muted); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3; }

/* ========================================================================
   B2B ИНФОГРАФИКА: ГОРИЗОНТАЛЬНЫЕ БАРЫ И БУБЛИКИ
   ======================================================================== */

/* --- 1. Горизонтальные Bar Charts (Твои улучшенные стили) --- */
.b2b-chart-widget { 
    background: var(--panel-bg, #ffffff); 
    border: 1px solid var(--border-color, #e2e8f0); 
    border-radius: 16px; 
    padding: 24px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); 
    margin: 2rem 0; 
}
.b2b-chart-title { 
    margin: 0 0 24px 0; 
    color: var(--text-main, #0f172a); 
    font-size: 1.15rem; 
    font-weight: 800; 
    text-align: left; 
}
.b2b-css-bar-chart { display: flex; flex-direction: column; gap: 18px; }
.chart-row { display: flex; align-items: center; gap: 15px; }
.chart-label { width: 35%; font-size: 0.85rem; font-weight: 700; color: var(--text-sub, #475569); }
.chart-label a { color: inherit; text-decoration: none; transition: color 0.2s; }
.chart-label a:hover { color: #3b82f6; }
.chart-bar-wrap { width: 65%; display: flex; align-items: center; gap: 12px; }
.chart-bar-bg { flex-grow: 1; background: var(--border-color, #f1f5f9); height: 12px; border-radius: 50px; overflow: hidden; }
.chart-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); border-radius: 50px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
.chart-row:hover .chart-bar-fill { filter: brightness(1.05); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
.chart-count { font-size: 0.8rem; font-weight: 800; color: var(--text-main, #1e293b); min-width: 45px; text-align: right; }

/* --- 2. Круговые диаграммы (Donut Charts) --- */
.b2b-donut-wrapper { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.b2b-donut-content { display: flex; align-items: center; gap: 20px; }

/* Отрисовка самого бублика */
.b2b-donut-circle { 
    width: 90px; 
    height: 90px; 
    flex-shrink: 0; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); 
}
.b2b-donut-hole { 
    width: 54px; 
    height: 54px; 
    background: var(--panel-bg, #ffffff); /* Дырка адаптируется под темную тему */
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.b2b-donut-hole span { 
    font-size: 10px; 
    font-weight: 700; 
    color: var(--text-sub, #64748b); 
    text-align: center; 
    line-height: 1.2; 
}

/* Легенда (Лечение "улетающих" точек) */
.b2b-donut-legend { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.b2b-legend-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    font-size: 12.5px; 
    text-decoration: none; 
    padding: 4px 6px; 
    border-radius: 6px; 
    transition: background-color 0.2s, transform 0.2s; 
}

/* Жестко связываем цветную точку и текст, запрещая им разрываться */
.b2b-legend-left { display: flex; align-items: center; gap: 8px; flex-grow: 1; overflow: hidden; }
.b2b-legend-dot { display: block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.b2b-legend-name { 
    font-weight: 600; 
    color: var(--text-main, #0f172a); 
    line-height: 1.2; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.b2b-legend-percent { font-weight: 700; color: var(--text-sub, #64748b); margin-left: 12px; flex-shrink: 0; text-align: right; }

/* Ховер-эффекты */
.b2b-legend-item:hover { background-color: var(--border-color, #f8fafc); transform: translateX(4px); }
.b2b-legend-item:hover .b2b-legend-name { color: #2563eb !important; }

/* Статус обновления */
.rhl-last-update { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #64748b; font-weight: 500; padding: 6px 12px; background: #f8fafc; border-radius: 50px; border: 1px solid #e2e8f0; }
.update-dot { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; position: relative; }
.update-dot::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: #10b981; border-radius: 50%; animation: pulse-green 2s infinite; }
@keyframes pulse-green { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(2.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }

/* Топ запросов (Список) */
.b2b-top-list { display: flex; flex-direction: column; gap: 12px; }
.top-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; transition: transform 0.2s; }
.top-item:hover { transform: translateX(5px); border-color: #3b82f6; }
.top-main { display: flex; align-items: center; gap: 15px; }
.top-main .rank { font-size: 1.2rem; font-weight: 800; color: #cbd5e1; min-width: 35px; }
.top-main a { text-decoration: none; color: #1e293b; font-size: 0.95rem; line-height: 1.3; }
.top-meta { text-align: right; }
.top-meta .count { display: block; font-size: 1.1rem; font-weight: 800; color: #3b82f6; }
.top-meta .label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; }

/* SEO Текст на главной */
.b2b-info-content { font-size: 15px; color: var(--b2b-text-main); line-height: 1.7; }
.b2b-info-content h2 { font-size: 24px; font-weight: 800; margin: 0 0 16px 0; color: var(--b2b-text-main); }
.b2b-info-content h3 { font-size: 20px; font-weight: 700; margin: 32px 0 16px; color: var(--b2b-text-main); }
.b2b-info-content ul { padding-left: 20px; margin-bottom: 24px; }
.b2b-info-content li { margin-bottom: 10px; }
.b2b-disclaimer-box { background: var(--b2b-bg-page); border-left: 4px solid var(--b2b-border-hover); padding: 24px; margin-top: 40px; border-radius: 0 var(--b2b-radius-md) var(--b2b-radius-md) 0; font-size: 14px; color: var(--b2b-text-muted); line-height: 1.6; }

/* ========================================================================
5. ДАШБОРД (Data Slice) И ГРАФИКИ (SHORTCODES)
======================================================================== */
.ds-header { margin-bottom: 3.5rem; text-align: left; }
.ds-header h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 0 0 1rem 0; letter-spacing: -0.03em; line-height: 1.1; }
.ds-header p { color: var(--ds-text-muted); font-size: 1.15rem; margin: 0; max-width: 800px; line-height: 1.6; }
.ds-freshness-banner { display: inline-flex; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; color: #334155; padding: 0.6rem 1.2rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; margin-top: 1.5rem; gap: 0.6rem; box-shadow: var(--ds-shadow-sm); }
.ds-status-dot { width: 10px; height: 10px; background-color: var(--ds-success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); animation: ds-pulse-dot 2s infinite; }


.ds-kpi-card { background: var(--ds-surface); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: var(--ds-radius-lg); padding: 2rem; box-shadow: var(--ds-shadow-md); position: relative; overflow: hidden; transition: var(--ds-transition); display: flex; flex-direction: column; justify-content: center; }
.ds-kpi-card:hover { transform: translateY(-5px); }
.ds-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.ds-kpi-brand::before { background: linear-gradient(90deg, #8b5cf6, #c084fc); }
.ds-kpi-rus::before { background: linear-gradient(90deg, #10b981, #34d399); }
.ds-kpi-analog::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ds-kpi-success::before { background: linear-gradient(90deg, #0ea5e9, #2dd4bf); }
.ds-kpi-total::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.ds-kpi-title { font-size: 0.8rem; font-weight: 700; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.ds-kpi-value { font-size: 2.8rem; font-weight: 800; color: var(--ds-text-main); line-height: 1; margin-bottom: 0.5rem; letter-spacing: -0.03em; }
.ds-kpi-desc { font-size: 0.9rem; color: var(--ds-text-light); font-weight: 500; }



.ds-chart-title { font-size: 1.25rem; font-weight: 800; color: var(--ds-text-main); margin: 0 0 1.5rem 0; padding-bottom: 1rem; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px; }
.ds-chart-wrapper { width: 100%; overflow-x: auto; padding-bottom: 0.5rem; }


/* АНАЛИТИЧЕСКИЙ БЛОК НА ГЛАВНОЙ */
/* АНАЛИТИЧЕСКИЙ БЛОК НА ГЛАВНОЙ (PREMIUM LIGHT) */
.b2b-insight-section { 
    margin: 100px 0; /* Даем блоку много воздуха сверху и снизу */
    padding: 0; 
    background: transparent; /* Уничтожаем темную "заплатку" */
    border: none; 
    box-shadow: none; 
}

.b2b-insight-header { 
    text-align: center; 
    max-width: 700px; 
    margin: 0 auto 50px auto; 
}

.b2b-insight-badge { 
    display: inline-block; 
    background: rgba(37, 99, 235, 0.08); /* Очень нежный фон */
    color: #2563eb; 
    padding: 6px 16px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    margin-bottom: 20px; 
}

.b2b-insight-header h2 { 
    font-size: clamp(28px, 4vw, 36px); 
    font-weight: 800; 
    color: #0f172a; /* Возвращаем благородный темный цвет тексту */
    margin-bottom: 16px; 
    letter-spacing: -0.02em;
}

.b2b-insight-header p { 
    font-size: 18px; 
    color: #64748b; 
    line-height: 1.6; 
}

/* Умная сетка, которая сама адаптируется под размер монитора */
.b2b-insight-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 24px; 
    width: 100%; 
}

.b2b-insight-card { 
    background: #ffffff; 
    border-radius: 16px; 
    padding: 32px 24px; 
    position: relative; 
    border: 1px solid rgba(15, 23, 42, 0.06); /* Едва заметная рамка */
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05); /* Мягкая парящая тень */
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.b2b-insight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.15); /* Тень становится синеватой при наведении */
    border-color: rgba(37, 99, 235, 0.2);
}

.b2b-insight-card h4 { 
    color: #0f172a; 
    font-size: 14px;
    font-weight: 800;
    margin-top: 0; 
    padding-right: 40px; 
    position: relative; 
    z-index: 2; 
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 12px;
}

.b2b-insight-icon { 
    position: absolute; 
    top: 24px; 
    right: 24px; 
    color: #cbd5e1; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    z-index: 1; 
}

.b2b-insight-card:hover .b2b-insight-icon { 
    color: #3b82f6; 
    transform: scale(1.15) rotate(5deg);
}

.b2b-insight-icon svg { 
    width: 24px; 
    height: 24px; 
}

/* ИДЕАЛЬНЫЕ ГИСТОГРАММЫ (HISTOGRAM) */
.sc-histogram { margin: 30px 0; padding: 20px; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; }
.histogram-bars { display: flex; align-items: flex-end; height: 150px; gap: 8px; padding-bottom: 5px; border-bottom: 2px solid #f1f5f9; overflow-x: auto; scrollbar-width: none; }
.histogram-bars::-webkit-scrollbar { display: none; }
.rhl-bar-wrapper { flex: 1; position: relative; min-width: 30px; display: flex; align-items: flex-end; }
.rhl-bar-fill { width: 100%; background: #3b82f6; border-radius: 4px 4px 0 0; cursor: pointer; transition: background 0.3s ease; height: 100%; transform: scaleY(0); transform-origin: bottom; }
.rhl-bar-wrapper.is-visible .rhl-bar-fill { transform: scaleY(1); transition: transform 1s ease-out; }
.rhl-bar-wrapper:hover .rhl-bar-fill { background: #2563eb; }

/* Цифры над столбиками */
.rhl-bar-wrapper::after { content: attr(data-count); position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #334155; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.rhl-bar-wrapper:hover::after { opacity: 1; }

/* Худенькие подписи (без прыжков) */
.histogram-labels { display: flex; justify-content: space-between; margin-top: 10px; gap: 8px; width: 100%; }
.histogram-label { flex: 0 1 20%; min-width: 0; font-size: 10px; color: #64748b !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; display: block; cursor: help; }

/* Donut Chart (.sc-donut) */
.sc-donut { margin: 30px 0; padding: 25px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
.donut-title { text-align: center; margin-bottom: 20px; font-weight: 700; }
.donut-main { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 20px; }
.donut-sector { transition: transform 0.3s ease, opacity 0.2s; cursor: pointer; }
.donut-sector:hover { transform: scale(1.03); transform-origin: center; opacity: 0.9; }
.donut-total { font-size: 28px; font-weight: 800; fill: #1e293b; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.2s; }
.legend-item:hover { background: #f8fafc; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-item .name { font-weight: 600; color: #475569; }
.legend-item .perc { color: #94a3b8; font-size: 12px; }

/* Облако тегов (.sc-cloud) */
.sc-cloud { margin: 2rem 0; text-align: center; }
.cloud-title { margin-bottom: 1.5rem; font-weight: 700; }
.cloud-wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.cloud-item { text-decoration: none !important; padding: 8px 16px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 50px; color: #475569 !important; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1.2; display: inline-flex; align-items: center; }
.cloud-item:hover { background: #3b82f6; color: #ffffff !important; border-color: #3b82f6; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); }

/* Визуальное распределение атрибутов (SEO ПЛИТКИ) */
.sc-dist-container { margin: 3rem 0; width: 100%; }
.sc-dist-container h3 { text-align: center; margin-bottom: 2rem; font-weight: 700; }
.dist-bar-wrapper { height: 16px; display: flex; border-radius: 50px; overflow: hidden; background: #f1f5f9; margin-bottom: 2.5rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.dist-segment { height: 100%; cursor: pointer; transition: all 0.3s ease; border-right: 1px solid rgba(255,255,255,0.2); }
.dist-segment:hover { filter: brightness(1.15); box-shadow: inset 0 0 10px rgba(0,0,0,0.1); }
.dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.dist-tile { background: #ffffff; border: 1px solid #e2e8f0; padding: 1.25rem; border-radius: 14px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.dist-tile:hover { transform: translateY(-4px); border-color: #4f46e5; box-shadow: 0 12px 20px -5px rgba(0,0,0,0.1); }
.tile-stats { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.tile-count { font-size: 0.8rem; color: #64748b; }
.tile-percent { font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.tile-progress-bg { height: 5px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
.tile-progress-fill { height: 100%; border-radius: 10px; transition: width 1s ease-out; }

/* ========================================================================
6. МАТРИЦА АНАЛОГОВ, СЛЕПЫЕ ЗОНЫ И ТАБЛИЦЫ
======================================================================== */
.b2b-matrix-wrapper { overflow-x: auto; background: var(--b2b-surface); border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-md); box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05); margin: 3rem 0; padding: 0; }
.b2b-matrix-header { background: #f8fafc; padding: 24px 32px; border-bottom: 1px solid var(--b2b-border); }
.b2b-matrix-filters { display: flex; gap: 24px; padding: 16px 32px; background: var(--b2b-surface); border-bottom: 1px solid var(--b2b-border); align-items: center; }
.matrix-table, .b2b-matrix-table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-size: 13px; text-align: left; }
.b2b-matrix-table th { background: #f8fafc; padding: 1rem; color: #64748b; font-weight: 700; border-bottom: 2px solid #e2e8f0; text-transform: uppercase; font-size: 0.75rem; }
.b2b-matrix-table td { padding: 1.2rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #475569; font-size: 0.95rem; }
.b2b-matrix-table tr:hover td { background-color: #f8fafc; }

/* Слепые зоны */
.rhl-table-container { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.b2b-blind-spots-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left; }
.b2b-blind-spots-table th { padding: 0.75rem 1rem; background-color: #f8fafc; color: #475569; border-bottom: 2px solid #e2e8f0; text-transform: uppercase; font-size: 11px; }
.b2b-blind-spots-table td { padding: 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }

/* Производители ЕАЭС */
.b2b-vendors-wrapper { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 2rem; }
.b2b-vendors-header { background: #f8fafc; padding: 24px; border-bottom: 1px solid #e2e8f0; }
.b2b-vendors-table { width: 100%; border-collapse: collapse; text-align: left; }
.b2b-vendors-table th { background: #f9fafb; padding: 14px 20px; font-size: 0.75rem; text-transform: uppercase; color: #94a3b8; font-weight: 700; border-bottom: 1px solid #e2e8f0; }
.b2b-vendors-table td { padding: 18px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }

/* ========================================================================
7. СПРАВОЧНИК МОДЕЛЕЙ (AJAX TABS)
======================================================================== */
.md-cat-nav { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 15px; margin-bottom: 30px; scrollbar-width: thin; }
.md-cat-btn { background: var(--vp-surface); border: 1px solid var(--vp-border); color: var(--vp-text-muted); padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; text-decoration: none; }
.md-cat-btn:hover, .md-cat-btn.active { border-color: var(--vp-primary); color: var(--vp-primary); }
.md-brands-masonry { column-count: 3; column-gap: 24px; }
.md-brand-block { background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: var(--vp-radius); padding: 24px; margin-bottom: 24px; break-inside: avoid; }

/* ========================================================================
8. WOOCOMMERCE КАРТОЧКА ТОВАРА И КАТАЛОГ (B2B СТИЛЬ)
======================================================================== */
.woocommerce ul.products li.product .wd-buttons, .woocommerce ul.products li.product .wd-add-cart-btn { margin-top: auto !important; padding: 0 15px 15px 15px !important; opacity: 1 !important; visibility: visible !important; position: relative !important; transform: none !important; }
.woocommerce ul.products li.product a.button, .woocommerce ul.products li.product .add_to_cart_button, .wd-add-cart-btn a { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 10px 20px !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 14px !important; background-color: #2563eb !important; color: #ffffff !important; border: none !important; transition: all 0.3s ease !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; text-transform: none !important; }
.woocommerce ul.products li.product a.button:hover { background-color: #1d4ed8 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important; color: #ffffff !important; }

.woocommerce ul.products li.product, .wd-product.product { border-radius: 8px; overflow: hidden; background-color: #ffffff; border: 1px solid #e2e8f0 !important; box-shadow: 0 2px 4px rgba(30, 41, 59, 0.02); display: flex; flex-direction: column; height: 100%; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; }
@media (hover: hover) { .woocommerce ul.products li.product:hover { border-color: #2563eb !important; box-shadow: 0 10px 20px rgba(30, 41, 59, 0.06); } }

.woocommerce ul.products li.product .product-element-top { overflow: hidden; background-color: #f8fafc; display: flex; align-items: center; justify-content: center; }
.woocommerce ul.products li.product .onsale { background-color: #2563eb !important; color: #ffffff !important; width: 40px; height: 40px; min-width: 40px; line-height: 40px; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; top: 10px; left: 10px; }

/* ========================================================================
   ФИЛЬТРЫ WOOCOMMERCE, СОРТИРОВКА И ФИЛЬТРЫ АНАЛОГОВ
   ======================================================================== */

/* Стандартные фильтры WooCommerce (Layered Nav) в виде тегов */
.widget_layered_nav ul { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 !important; list-style: none; }
.widget_layered_nav ul li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.widget_layered_nav ul li::before { display: none !important; }
.widget_layered_nav ul li a { display: inline-flex; align-items: center; padding: 6px 14px; background: #ffffff !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.widget_layered_nav ul li a:hover { background: #f8fafc !important; border-color: #94a3b8 !important; color: #2563eb !important; transform: translateY(-1px); }
.widget_layered_nav ul li.chosen a { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.15); }
.widget_layered_nav ul li .count { font-size: 11px; color: #94a3b8 !important; margin-left: 6px; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.widget_layered_nav ul li.chosen .count { color: #2563eb !important; background: #ffffff; }

/* Кастомные B2B кнопки фильтров и сортировки */
.wc-filter-buttons, .wc-sort-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-strict-btn, .wc-sort-btn { padding: 8px 16px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; font-size: 13px; color: #475569; font-weight: 600; transition: all 0.2s; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);}
.wc-strict-btn:hover, .wc-sort-btn:hover { border-color: #94a3b8; background: #f8fafc; color: #0f172a;}
.wc-strict-btn.active, .wc-sort-btn.active { background: rgba(37, 99, 235, 0.05); color: #2563eb; border-color: #2563eb; font-weight: 600; }
.wc-strict-btn.active::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.wc-strict-group { background: #f8fafc; border: 1px solid #cbd5e1; padding: 16px; border-radius: 6px; }

/* Переключатели (Toggle Switches) для фильтров */
.wc-toggle-wrapper { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #cbd5e1; padding: 6px 12px; border-radius: 6px; height: 35px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);}
.wc-toggle-label { font-size: 13px; font-weight: 600; color: #334155; }
.wc-toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0; }
.wc-toggle-switch input { opacity: 0; width: 0; height: 0; }
.wc-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; }
.wc-toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.wc-toggle-switch input:checked + .wc-toggle-slider { background-color: #2563eb; }
.wc-toggle-switch input:checked + .wc-toggle-slider:before { transform: translateX(16px); }

/* Фильтры Матрицы Аналогов (Выпадающие списки) */
.b2b-matrix-filters { display: flex; gap: 24px; padding: 16px 32px; background: #ffffff; border-bottom: 1px solid #e2e8f0; align-items: center; flex-wrap: nowrap; }
.filter-group { display: flex; align-items: center; gap: 10px; }
.filter-group label { font-size: 0.85rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.filter-group select { min-width: 220px; padding: 8px 12px; border-radius: 6px; border: 1px solid #cbd5e1; color: #334155; font-size: 0.95rem; background-color: #f8fafc; transition: border-color 0.2s ease; }
.filter-group select:focus { outline: none; border-color: #2563eb; background-color: #ffffff; }

/* Адаптивность для фильтров */
@media (max-width: 768px) {
    .wc-analogs-filters, .b2b-matrix-filters { flex-direction: column; align-items: flex-start; gap: 12px; }
    .wc-filter-group[style], .filter-group { margin-left: 0 !important; width: 100%; }
    .filter-group select { width: 100%; }
}
/* ========================================================================
10. СТРАНИЦА ОДНОГО ТОВАРА (Табы, Спецификации, Showcase)
======================================================================== */
.woocommerce-tabs ul.tabs li a { display: inline-block !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #94a3b8 !important; text-decoration: none !important; background: transparent !important; border-radius: 6px !important; transition: all 0.2s ease !important; border: none !important; }
.woocommerce-tabs ul.tabs li a:hover { background: #f1f5f9 !important; color: #3b82f6 !important; }
.woocommerce-tabs ul.tabs li.active a { background: #eff6ff !important; color: #1d4ed8 !important; box-shadow: none !important; }

/* Showcase (Матрица и Спецификации) */
.rhl-showcase { line-height: 1.6; font-size: var(--rhl-size-main); max-width: 1000px; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 50px; }
.showcase-card { background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.03); transition: all 0.3s ease; }
.showcase-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); transform: translateY(-5px); }

/* Двухколоночный лист характеристик */
.rhl-b2b-specs-sheet { font-size: var(--rhl-size-main); line-height: 1.6; max-width: 100%; }
.rhl-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 60px; row-gap: 12px; }
.rhl-spec-row { display: flex; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px dashed #cbd5e1; }
.rhl-label { flex: 0 0 45%; color: var(--rhl-color-label); font-weight: var(--rhl-weight-normal); padding-right: 15px; }
.rhl-value { flex: 1; font-size: var(--rhl-size-main); color: var(--rhl-color-title); font-weight: var(--rhl-weight-medium); word-break: break-word; }

/* Краткие характеристики в карточке */
.bl-product-key-attrs { margin: 20px 0; background: #f8fafc; padding: 15px 20px; border-radius: 8px; border: 1px solid #e2e8f0; }
.bl-product-key-attrs .key-attr-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dotted #cbd5e1; padding-bottom: 8px; margin: 0; }

/* Сетка карточек VS (Схожесть) */
.sc-similar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.sc-similar-card { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.5rem; background: #ffffff; transition: all 0.3s ease; position: relative; }
.sc-similar-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); border-color: #3b82f6; }
.product-pair { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; position: relative; }
.vs-divider { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; align-self: center; }
.vs-divider::before { content: ''; position: absolute; width: 1px; height: 100px; background: #f1f5f9; z-index: 1; }
.vs-badge { background: #1e293b; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; border: 3px solid #fff; }

/* WC NATIVE ANALOGS (Родные аналоги) */
.wc-native-analogs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.wc-analog-card { border: 1px solid #e2e8f0; padding: 20px; border-radius: 12px; background: #fff; display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.wc-analog-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); border-color: #cbd5e1; }
.wc-analog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }

/* === БЕЙДЖИКИ СОВПАДЕНИЯ (6 уровней) === */
.wc-analog-badge { padding: 4px 10px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.wc-analog-badge.perfect { background: #059669; } /* Идеальный аналог (Темно-зеленый) */
.wc-analog-badge.exact   { background: #10b981; } /* Оптимальная замена (Зеленый) */
.wc-analog-badge.high    { background: #3b82f6; } /* Достойная альтернатива (Синий) */
.wc-analog-badge.good    { background: #6366f1; } /* Значительное сходство (Индиго) */
.wc-analog-badge.medium  { background: #f59e0b; } /* Умеренное совпадение (Оранжевый) */
.wc-analog-badge.low     { background: #64748b; } /* Смежный класс (Серый) */

.wc-analog-title { margin: 0 0 10px 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.wc-analog-title a { color: #0f172a; text-decoration: none; }
.wc-analog-title a:hover { color: #3b82f6; }
.wc-analog-price { font-size: 22px; font-weight: 800; margin-bottom: 15px; color: #0f172a; }

/* Характеристики */
.wc-matches-list { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #334155; }
.wc-matches-list li { padding: 4px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #e2e8f0; }
.wc-matches-list li:last-child { border-bottom: none; }

/* Кнопки */
.wc-analog-btn { width: 100%; text-align: center; background: #f1f5f9 !important; color: #0f172a !important; font-weight: 600 !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 10px !important; transition: all 0.2s !important; display: block; text-decoration: none;}
.wc-analog-btn:hover { background: #e2e8f0 !important; border-color: #94a3b8 !important;}

/* ========================================================================
   ДОПОЛНИТЕЛЬНЫЕ ЭЛЕМЕНТЫ: Плитки, Иконки, Цены
   ======================================================================== */

/* Плитки характеристик (Блочные) */
.wc-b2b-matrix-wrapper { max-width: 1200px; margin: 40px auto; padding: 0 20px; clear: both; }
.wc-b2b-matrix-title { font-size: 15px; font-weight: 600; color: #475569; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #e2e8f0; padding-bottom: 12px; }
.wc-b2b-matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wc-b2b-matrix-tile { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 16px; display: flex; align-items: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.wc-b2b-matrix-tile:hover { border-color: #3b82f6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.wc-b2b-tile-icon { flex-shrink: 0; width: 32px; height: 32px; color: #64748b; margin-right: 16px; display: flex; align-items: center; justify-content: center; }
.wc-b2b-tile-icon svg { width: 100%; height: 100%; }
.wc-b2b-tile-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; /* Разрешает обрезку длинного текста */ }
.wc-b2b-tile-label { font-size: 11px; color: #64748b; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-b2b-tile-value { font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4; word-break: break-word; }

/* Технические иконки SVG */
.rhl-icon { display: inline-block; width: 20px; height: 20px; background-color: var(--rhl-color-accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.rhl-icon-cpu { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PHBhdGggZD0iTTkgNHYtMk0xNSA0di0yTTkgMjB2LTJNMTE1IDIwdi0yTTIwIDloMn0yMCAxNWgyTTQgOWgtMk00IDE1aC0yTTkgOXY2aDZWOWg2eiI+PC9wYXRoPjwvc3ZnPg=='); }
.rhl-icon-display { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjIiIHk9IjMiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjgiIHkxPSIyMSIgeDI9IjE2IiB5Mj0iMjEiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSIxNyIgeDI9IjEyIiB5Mj0iMjEiPjwvbGluZT48L3N2Zz4='); }

/* Бейджи рейтинга (золото, серебро, бронза) */
.rhl-top-badge { position: absolute; top: 12px; left: 12px; z-index: 10; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.rhl-top-badge.badge-gold { background: #fef08a; color: #854d0e; border: 1px solid #fde047; }
.rhl-top-badge.badge-silver { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.rhl-top-badge.badge-bronze { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }

/* Индикативные цены и тултипы */
.rhl-price-widget { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 20px; margin: 20px 0; transition: border-color 0.3s ease; }
.rhl-price-widget:hover { border-color: #cbd5e1; }
.rhl-price-widget .price-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rhl-price-widget .price-label { font-size: 0.75rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.rhl-price-widget .price-info-icon { width: 16px; height: 16px; background: #cbd5e1; color: #fff; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: help; }
.rhl-price-widget .price-body { display: flex; align-items: baseline; gap: 6px; color: #0f172a; }
.rhl-price-widget .price-approx { font-size: 1.5rem; color: #94a3b8; font-weight: 300; }
.rhl-price-widget .price-amount { font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.rhl-price-widget .price-currency { font-size: 1.25rem; font-weight: 600; color: #475569; }
.rhl-price-widget .price-body.is-empty .price-amount { font-size: 1.5rem; color: #3b82f6; }
.rhl-price-widget .price-notice { margin-top: 12px; font-size: 0.7rem; color: #94a3b8; line-height: 1.5; border-top: 1px dashed #e2e8f0; padding-top: 10px; }

.b2b-archive-price-wrap { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.archive-price-approx { color: #94a3b8; font-weight: 500; font-size: 0.9rem; }
.archive-price-value { color: #0f172a; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.archive-price-empty { color: #3b82f6; font-weight: 700; font-size: 0.9rem; }

.b2b-tooltip-container { position: relative; display: inline-flex; align-items: center; }
.b2b-info-icon { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: #e2e8f0; color: #64748b; border-radius: 50%; font-size: 9px; font-weight: 800; cursor: help; transition: all 0.2s ease; }
.b2b-tooltip-container:hover .b2b-info-icon { background: #1e293b; color: #ffffff; }
.b2b-tooltip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%) translateY(10px); width: 200px; background: #1e293b; color: #ffffff; text-align: center; padding: 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 500; line-height: 1.4; z-index: 100; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); pointer-events: none; }
.b2b-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1e293b transparent transparent transparent; }
.b2b-tooltip-container:hover .b2b-tooltip-text { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }

/* Компактные спецификации (Архив) */
.rhl-specs-box { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.spec-line { display: flex; align-items: baseline; font-size: 11px; line-height: 1.2; color: #64748b; }
.spec-dots { flex-grow: 1; border-bottom: 1px dotted #e2e8f0; margin: 0 4px; position: relative; top: -3px; }
.spec-val { flex-shrink: 0; font-weight: 700; color: #1e293b; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================================================================
   11. БЛОГ, СТАТЬИ И ЮРИДИЧЕСКИЕ СТРАНИЦЫ
   ======================================================================== */
.vp-blog-wrapper, .vp-article-wrapper, .legal-wrapper, .vp-contact-wrapper { 
    font-family: var(--rhl-font-main); padding: 40px 20px 80px; color: var(--vp-text-muted); line-height: 1.7; max-width: 1280px; margin: 0 auto; 
}
.vp-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; margin-bottom: 40px; }

/* Стабильные карточки блога */
.vp-blog-card { 
    display: flex; flex-direction: column; background: var(--vp-surface); border: 1px solid var(--vp-border); 
    border-radius: var(--vp-radius); overflow: hidden; transition: 0.3s; box-shadow: var(--vp-shadow);
    min-height: 450px; contain: layout style;
}
.vp-blog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.vp-blog-card-img-wrap { width: 100%; aspect-ratio: 16 / 9; background: #f1f5f9; overflow: hidden; }
.vp-blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
.vp-blog-card:hover .vp-blog-card-img { transform: scale(1.05); }

/* Статья */
.vp-blog-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
/* ========================================================================
   ТИПОГРАФИКА И ОФОРМЛЕНИЕ ТЕКСТА СТАТЬИ (Изолированный блок)
   ======================================================================== */

/* Основной контейнер статьи */
.vp-article-container { 
    background: var(--vp-surface, #ffffff); 
    border: 1px solid var(--vp-border, #e2e8f0); 
    border-radius: var(--vp-radius, 12px); 
    padding: 50px 60px; /* Аккуратные внутренние поля */
    font-size: 16px; /* Базовый размер для долгого чтения */
    line-height: 1.7; /* Воздушный межстрочный интервал */
    color: var(--vp-text-muted, #475569);
}

/* ЗАГОЛОВКИ 
   Правило внутреннего/внешнего: отступ сверху всегда должен быть 
   больше отступа снизу, чтобы заголовок визуально "прилипал" к своему тексту.
*/
.vp-article-container h1,
.vp-article-container h2,
.vp-article-container h3,
.vp-article-container h4 {
    color: var(--vp-text-main, #0f172a);
    font-weight: 800;
    line-height: 1.3;
    margin-top: 2em; 
    margin-bottom: 0.8em;
}

.vp-article-container h1 { 
    font-size: 32px; 
    margin-top: 0; /* У первого заголовка убираем верхний отступ */
    letter-spacing: -0.02em; 
}

.vp-article-container h2 { 
    font-size: 26px; 
    border-bottom: 1px solid #f1f5f9; /* Легкий разделитель для структуры */
    padding-bottom: 12px; 
}

.vp-article-container h3 { 
    font-size: 20px; 
}

/* АБЗАЦЫ И ТЕКСТ */
.vp-article-container p {
    margin-top: 0;
    margin-bottom: 1.5em;
}

/* СПИСКИ */
.vp-article-container ul, 
.vp-article-container ol {
    margin-top: 0;
    margin-bottom: 1.5em;
    padding-left: 24px;
}

.vp-article-container li {
    margin-bottom: 0.6em;
}

/* Красим маркеры списков в фирменный цвет для акцента */
.vp-article-container li::marker {
    color: var(--vp-primary, #2563eb);
    font-weight: bold;
}

/* ССЫЛКИ В ТЕКСТЕ */
.vp-article-container a {
    color: var(--vp-primary, #2563eb);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
}

.vp-article-container a:hover {
    text-decoration-color: var(--vp-primary, #2563eb);
}

/* ИЗОБРАЖЕНИЯ В СТАТЬЕ */
.vp-article-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2em 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

/* ИНФО-БЛОКИ (CALLOUTS)
   Стиль для блоков "Для новичков" или "Важный пример"
*/
.vp-callout {
    padding: 24px;
    border-radius: 8px;
    margin: 2.5em 0;
    background: #f8fafc;
    border-left: 4px solid var(--vp-primary, #2563eb);
}

/* Убираем лишние отступы внутри инфо-блоков */
.vp-callout h4 { 
    margin-top: 0 !important; 
    margin-bottom: 12px !important; 
    font-size: 16px;
}
.vp-callout p:last-child { 
    margin-bottom: 0; 
}

/* ========================================================================
   АДАПТИВНОСТЬ ДЛЯ СТАТЬИ
   ======================================================================== */
@media (max-width: 768px) {
    .vp-article-container {
        padding: 24px 20px; /* Сужаем "белые поля" на мобильных экранах */
        font-size: 15px; /* Чуть уменьшаем базовый шрифт */
    }
    
    .vp-article-container h1 { font-size: 26px; }
    .vp-article-container h2 { font-size: 22px; }
    .vp-article-container h3 { font-size: 18px; }
    
    .vp-callout {
        padding: 20px 16px;
    }
}
.vp-article-table-wrapper { overflow-x: auto; margin: 32px 0; border: 1px solid var(--vp-border); border-radius: 8px; }
.vp-article-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.vp-article-table th { background: #f8fafc; padding: 16px; font-weight: 700; color: var(--vp-text-main); border-bottom: 2px solid var(--vp-border); white-space: nowrap; }
.vp-article-table td { padding: 16px; border-bottom: 1px solid #f1f5f9; color: var(--vp-text-muted); }
/* ========================================================================
   МЕТА-ИНФОРМАЦИЯ СТАТЬИ (Хлебные крошки / Категория и Дата)
   ======================================================================== */

.vp-article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Стилизуем ссылку категории как стильный бейдж */
.vp-article-meta .vp-article-category {
    background: var(--vp-primary-light, #eff6ff);
    color: var(--vp-primary, #2563eb);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none; /* Убираем стандартное подчеркивание */
    transition: all 0.2s ease;
}

/* Эффект при наведении на категорию */
.vp-article-meta .vp-article-category:hover {
    background: var(--vp-primary, #2563eb);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.15);
}

/* Дата публикации (приглушенный текст) */
.vp-article-meta .vp-article-date {
    color: var(--vp-text-light, #94a3b8);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Добавляем аккуратную точку-разделитель перед датой */
.vp-article-meta .vp-article-date::before {
    content: "•";
    color: #cbd5e1;
    margin-right: 12px;
    font-size: 18px;
    line-height: 1;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .vp-article-meta {
        margin-bottom: 20px;
    }
    .vp-article-meta .vp-article-category {
        padding: 4px 12px;
        font-size: 12px;
    }
}

/* Сайдбар */
.vp-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.vp-widget-matrix h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 800; color: #ffffff; line-height: 1.3; }
.vp-widget-matrix { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); padding: 32px; border-radius: var(--vp-radius); color: #fff; text-align: center; }
.vp-widget-toc { background: var(--vp-surface); border: 1px solid var(--vp-border); padding: 24px; border-radius: var(--vp-radius); }
.vp-widget-toc a { display: block; color: var(--vp-text-muted); padding: 8px 0; border-left: 2px solid transparent; padding-left: 12px; }
.vp-widget-toc a:hover { color: var(--vp-primary); border-left-color: var(--vp-primary); }
/* Виджет: Для вендоров */
.vp-widget-vendor { background: #f8fafc; border: 1px solid var(--vp-border); padding: 24px; border-radius: var(--vp-radius); text-align: center; }
.vp-widget-vendor h4 { font-size: 16px; font-weight: 800; color: var(--vp-text-main); margin: 0 0 8px 0; }

/* ========================================================================
   ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ ДЛЯ ФОРМЫ
======================================================================== */
:root {
    --vp-primary: #2563eb;
    --vp-primary-dark: #1d4ed8;
    --vp-surface: #ffffff;
    --vp-bg: #f8fafc;
    --vp-border: #e2e8f0;
    --vp-text: #0f172a;
    --vp-text-light: #475569;
    --vp-radius: 12px;
    --vp-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* ========================================================================
   СЕКЦИЯ С ФОРМОЙ (ОБЁРТКА)
======================================================================== */
.vp-form-section {
    background: #f8fafc;
    padding: 60px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-top: 60px;
}

.vp-form-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.vp-form-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.vp-form-header p {
    font-size: 16px;
    color: #475569;
    margin: 0;
}

.vp-form-container {
    max-width: 800px;
    margin: 0 auto;
}

/* ========================================================================
   ОСНОВНОЙ КОНТЕЙНЕР ФОРМЫ (CF7)
======================================================================== */
.b2b-form-wrapper,
.b2b-vendor-form {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--wp--preset--color--palette-color-5, #e2e8f0);
    box-shadow: var(--vp-shadow);
}

/* Сетка для двух колонок */
.b2b-form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.b2b-form-col,
.b2b-form-group {
    flex: 1;
    min-width: 250px;
}

/* Подписи к полям */
.b2b-form-wrapper label,
.b2b-vendor-form label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 6px;
}

/* Поля ввода, селекты, textarea */
.b2b-form-wrapper input[type="text"],
.b2b-form-wrapper input[type="email"],
.b2b-form-wrapper input[type="url"],
.b2b-form-wrapper select,
.b2b-form-wrapper textarea,
.b2b-vendor-form input[type="text"],
.b2b-vendor-form input[type="email"],
.b2b-vendor-form input[type="url"],
.b2b-vendor-form select,
.b2b-vendor-form textarea,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea,
.ff-el-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #f8fafc;
    font-size: 14px;
    color: #334155;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-family: inherit;
}

.b2b-form-wrapper input:focus,
.b2b-form-wrapper select:focus,
.b2b-form-wrapper textarea:focus,
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap select:focus,
.wpcf7-form-control-wrap textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
    background-color: #ffffff;
}

/* ========================================================================
   ЧЕКБОКСЫ, РАДИОКНОПКИ И БЛОКИ СОГЛАСИЯ
======================================================================== */
.b2b-form-checkbox-group,
.b2b-radio-group {
    background: #f1f5f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.b2b-form-checkbox-group .wpcf7-list-item,
.b2b-radio-group .wpcf7-list-item {
    display: block;
    margin: 0 0 12px 0;
}

.b2b-form-checkbox-group .wpcf7-list-item:last-child,
.b2b-radio-group .wpcf7-list-item:last-child {
    margin-bottom: 0;
}

.b2b-form-checkbox-group .wpcf7-list-item label,
.b2b-radio-group .wpcf7-list-item label,
.b2b-acceptance .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start;
    font-weight: 400;
    color: #334155;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.b2b-form-checkbox-group input[type="checkbox"],
.b2b-form-checkbox-group input[type="radio"],
.b2b-acceptance input[type="checkbox"],
.b2b-radio-group input[type="radio"] {
    margin: 3px 12px 0 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

/* Блок согласия (Acceptance) */
.b2b-acceptance,
.b2b-consent {
    background: transparent;
    margin-bottom: 25px;
    padding: 0;
}

.b2b-acceptance .wpcf7-list-item label {
    font-size: 13px;
    color: #64748b;
}

/* ========================================================================
   КНОПКА ОТПРАВКИ (без двойных рамок и лишних фонов)
======================================================================== */
.b2b-submit-btn {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.b2b-submit-btn input.wpcf7-submit,
.wpcf7-submit,
.ff-btn-submit {
    width: 100%;
    display: block;
    background-color: #2563eb !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1) !important;
}

.b2b-submit-btn input.wpcf7-submit:hover,
.wpcf7-submit:hover,
.ff-btn-submit:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.2) !important;
}

/* ========================================================================
   СЕТКА КОНТАКТОВ (ЕСЛИ ИСПОЛЬЗУЕТСЯ)
======================================================================== */
.vp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

.vp-contact-form-box {
    background: var(--vp-surface);
    border: 1px solid var(--vp-border);
    padding: 40px;
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow);
}

/* ========================================================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
======================================================================== */
@media (max-width: 768px) {
    .vp-form-section {
        padding: 40px 15px;
    }
    .vp-form-header h2 {
        font-size: 26px;
    }
    .b2b-form-row {
        flex-direction: column;
        gap: 0;
    }
    .vp-contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .b2b-form-wrapper,
    .b2b-vendor-form,
    .vp-contact-form-box {
        padding: 20px;
    }
}
/* ========================================================================
   СТИЛИ КНОПОК В САЙДБАРЕ (Обновлено)
   ======================================================================== */

/* Кнопка в виджете матрицы (белая) */
.vp-widget-matrix .vp-btn-white {
    display: block; 
    width: 100%; 
    box-sizing: border-box;
    background: #ffffff; 
    color: #1d4ed8; 
    padding: 14px 20px;
    border: 2px solid #ffffff; /* Добавили границу */
    border-radius: 8px; 
    font-size: 15px; 
    font-weight: 700;
    text-decoration: none; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Добавили глубину */
    text-align: center;
}
.vp-widget-matrix .vp-btn-white:hover { 
    background: #eff6ff; 
    border-color: #dbeafe; 
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Кнопка в виджете вендоров (контурная) */
.vp-widget-vendor .vp-btn-outline {
    display: block; 
    width: 100%; 
    box-sizing: border-box;
    border: 2px solid var(--vp-primary); /* Сделали границу толще */
    color: var(--vp-primary);
    padding: 12px; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 700;
    text-decoration: none; 
    transition: all 0.3s ease;
    text-align: center;
}
.vp-widget-vendor .vp-btn-outline:hover { 
    background: var(--vp-primary); 
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* ========================================================================
   14. АДАПТИВНЫЕ ТАБЛИЦЫ (MOBILE FIX)
   ======================================================================== */
@media (max-width: 768px) {
    /* Оборачиваем таблицу, чтобы она скроллилась, а не ломала экран */
    .vp-article-table-wrapper {
        width: 100%;
        overflow-x: auto;
        display: block;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
        margin-bottom: 20px;
    }
    
    .vp-article-table {
        min-width: 500px; /* Минимальная ширина, чтобы текст не схлопывался в кашу */
        font-size: 12px !important; /* Чуть уменьшаем шрифт для мобильных */
    }
    
    .vp-article-table th, .vp-article-table td {
        padding: 10px 8px !important; /* Уменьшаем отступы, чтобы влезло больше данных */
    }
}

/* Общий стиль, чтобы таблица была приятной */
.vp-article-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.vp-article-table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
}

/* ========================================================================
   14. АДАПТИВНЫЕ ТАБЛИЦЫ (MOBILE FIX)
   ======================================================================== */
@media (max-width: 768px) {
    /* Оборачиваем таблицу, чтобы она скроллилась, а не ломала экран */
    .vp-article-table-wrapper {
        width: 100%;
        overflow-x: auto;
        display: block;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
        margin-bottom: 20px;
    }
    
    .vp-article-table {
        min-width: 500px; /* Минимальная ширина, чтобы текст не схлопывался в кашу */
        font-size: 12px !important; /* Чуть уменьшаем шрифт для мобильных */
    }
    
    .vp-article-table th, .vp-article-table td {
        padding: 10px 8px !important; /* Уменьшаем отступы, чтобы влезло больше данных */
    }
}

/* Общий стиль, чтобы таблица была приятной */
.vp-article-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.vp-article-table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
}

/* ========================================================================
12. ПРЕМИУМ КНОПКИ И GUTENBERG БЛОКИ (SaaS Style)
======================================================================== */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 8px; font-weight: 500; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; line-height: 1.4; border: 1px solid transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.is-style-fill .wp-block-button__link { background-color: var(--b2b-primary); color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.is-style-fill .wp-block-button__link:hover { background-color: var(--b2b-primary-hover); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2); transform: translateY(-1px); }
.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--b2b-text-main); border: 1px solid var(--b2b-border); }
.is-style-outline .wp-block-button__link:hover { background-color: #f8fafc; border-color: #94a3b8; color: var(--b2b-primary); transform: translateY(-1px); }

.has-hover-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--b2b-radius-md); background: var(--b2b-surface); border: 1px solid var(--b2b-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); overflow: hidden; }
@media (hover: hover) { .has-hover-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06); border-color: #cbd5e1; } }

.wp-block-quote.is-style-modern-card { position: relative; background: #f8fafc; border: none; border-left: 4px solid var(--b2b-primary); padding: 24px 30px; border-radius: 0 8px 8px 0; margin: 40px 0; font-style: normal; }
.wp-block-table.is-style-modern-table { border-collapse: separate; border-spacing: 0; width: 100%; border-radius: var(--b2b-radius-md); overflow: hidden; border: 1px solid var(--b2b-border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02); margin-bottom: 2em; background: var(--b2b-surface); }

/* ========================================================================
   13. ПРЕМИУМ ФУТЕР (B2B Footer)
   ======================================================================== */

.b2b-footer-wrapper { 
    background-color: #0f172a; 
    color: #94a3b8; 
    font-family: var(--rhl-font-main); 
    position: relative; 
    font-size: 14px; 
    line-height: 1.6; 
    margin-top: 60px; 
}

/* Цветная полоска сверху */
.b2b-footer-wrapper::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; 
    height: 2px; 
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%); 
    opacity: 0.8; 
}

.b2b-footer-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 60px 20px 20px; 
}

/* Сетка верхней части */
.b2b-footer-top { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 40px; 
    margin-bottom: 40px; 
}

.b2b-footer-brand { 
    max-width: 450px; 
}

.b2b-footer-logo { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-size: 24px; 
    font-weight: 800; 
    color: #ffffff; 
    margin-bottom: 20px; 
    text-decoration: none; 
    letter-spacing: -0.02em; 
}

.b2b-footer-logo-icon { 
    width: 32px; 
    height: 32px; 
    background: linear-gradient(135deg, #3b82f6, #60a5fa); 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
}

/* Колонки меню */
.b2b-footer-col h4,
#footer [data-id="text"] h3 { 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: 700; 
    margin: 0 0 20px 0; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}

.b2b-footer-nav { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.b2b-footer-nav a { 
    color: #94a3b8; 
    text-decoration: none; 
    transition: all 0.2s ease; 
    display: inline-flex; 
    align-items: center; 
}

/* Стрелочка при наведении */
.b2b-footer-nav a::before { 
    content: '→'; 
    font-size: 12px; 
    margin-right: 8px; 
    opacity: 0; 
    transform: translateX(-10px); 
    color: #3b82f6; 
    transition: all 0.2s ease; 
}

.b2b-footer-nav a:hover { 
    color: #60a5fa; 
    transform: translateX(4px); 
}
.b2b-footer-nav a:hover::before { 
    opacity: 1; 
    transform: translateX(0); 
}

/* Нижняя часть (Дисклеймер и Копирайт) */
.b2b-footer-bottom { 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding-top: 30px; 
}

.b2b-footer-disclaimer {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.6;
    text-align: justify;
}

.b2b-footer-copyright { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 15px; 
    font-size: 13px; 
    color: #94a3b8; 
}

.b2b-footer-legal-links { 
    display: flex; 
    gap: 20px; 
}

.b2b-footer-legal-links a { 
    color: #94a3b8; 
    text-decoration: none; 
    transition: color 0.2s ease; 
}

.b2b-footer-legal-links a:hover { 
    color: #ffffff; 
}

/* ========================================================================
   АДАПТИВНОСТЬ ФУТЕРА (Mobile)
   ======================================================================== */

@media (max-width: 992px) {
    /* На планшетах 2 колонки: бренд сверху, меню внизу */
    .b2b-footer-top { grid-template-columns: 1fr 1fr; }
    .b2b-footer-brand { grid-column: 1 / -1; max-width: 100%; }
}

@media (max-width: 768px) {
    /* На телефонах все в 1 колонку */
    .b2b-footer-top { grid-template-columns: 1fr; gap: 30px; }
    
    /* Центрируем копирайт и ссылки */
    .b2b-footer-copyright { flex-direction: column; text-align: center; }
    .b2b-footer-legal-links { justify-content: center; flex-wrap: wrap; gap: 10px; }
    
    /* Выравниваем текст дисклеймера влево для удобства чтения на узких экранах */
    .b2b-footer-disclaimer { text-align: left; }
}

/* ========================================================================
14. АДАПТИВНОСТЬ (МЕДИАЗАПРОСЫ)
======================================================================== */
@media (min-width: 782px) {
.wp-block-column.is-style-sticky-column { position: sticky; top: 100px; align-self: start; z-index: 10; }
}

@media(max-width: 1024px) {
.b2b-split-layout, .vp-blog-layout { grid-template-columns: 1fr; }
.b2b-trust-band { flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 40px; }
.b2b-dash-search { flex-direction: column; padding: 16px; border-radius: var(--b2b-radius-xl); background: var(--b2b-surface); }
.b2b-dash-search-icon { display: none; }
.b2b-dash-search input { padding: 14px 16px; width: 100%; text-align: left; border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius-lg); background: var(--b2b-bg-page); margin-bottom: 12px; }
.b2b-dash-search button { width: 100%; margin-top: 0; padding: 16px; }
.md-brands-masonry { column-count: 2; }
.vp-sidebar { position: static; }
.ds-layout { padding: 1rem; border-radius: 0; }
.b2b-insight-grid, .ds-kpi-grid, .b2b-footer-top { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 992px) {
.vp-contact-grid, .split-content { grid-template-columns: 1fr; }
.b2b-footer-brand { grid-column: 1 / -1; max-width: 100%; }
.rhl-spec-grid { grid-template-columns: 1fr; column-gap: 0; }
}

@media(max-width: 768px) {
.b2b-insight-grid, .ds-kpi-grid, .ds-charts-grid, .wc-native-analogs-grid { grid-template-columns: 1fr; }
.b2b-hero-section, .vp-hero, .b2b-insight-section { padding: 40px 20px; }
.b2b-hero-title, .vp-hero h1 { font-size: 32px; }
.vp-article-container, .legal-container, .vp-about-content { padding: 32px 20px; }
.vp-article-wrapper, .vp-blog-wrapper { padding: 20px 10px; }
.md-brand-block { padding: 16px 20px; }
.vs-showcase-row { flex-direction: column; }
.vs-side.global { border-right: none; border-bottom: 1px dashed #e2e8f0; }
.vs-badge-wrapper { flex-direction: row; }
.vs-badge-circle { border: 2px solid #ffffff; }
.b2b-footer-top { grid-template-columns: 1fr; gap: 30px; }
.b2b-footer-copyright { flex-direction: column; text-align: center; }
.woocommerce ul.products li.product a.button { padding: 10px; font-size: 12px; margin: 10px !important; }
.wp-block-columns.is-style-spaced-columns { gap: 20px; }
.wp-block-table.is-style-modern-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media(max-width: 640px) {
    .chart-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .chart-label { width: 100%; padding: 0; }
    .chart-bar-wrap { width: 100%; }
    .minprom-header { flex-direction: column; text-align: center; }
    .minprom-brand { flex-direction: column; gap: 5px; }
    .minprom-stat { text-align: center; }
}

@media(max-width: 600px) {
.md-brands-masonry { column-count: 1; }
}

@media (max-width: 480px) {
.spec-line { justify-content: space-between; }
.rhl-spec-row { flex-direction: column; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; }
.rhl-label { flex: 0 0 auto; width: 100%; font-size: var(--rhl-size-small); margin-bottom: 4px; }
.wc-b2b-matrix-grid { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
.b2b-mega-dash { padding: 20px 10px !important; }
.ds-kpi-value { font-size: 2rem !important; }
}

/* Доступность (Отключение анимаций) */
@media (prefers-reduced-motion: reduce) {
.woocommerce ul.products li.product, .wd-product.product, .woocommerce ul.products li.product img, .wp-block-button__link { transition: none !important; }
.woocommerce ul.products li.product:hover, .wd-product.product:hover, .woocommerce ul.products li.product:hover img { transform: none !important; }
}

/* Адаптация списков и таблиц */
@media (max-width: 600px) {
    .rhl-table-scroll { overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
    .b2b-top-list .top-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .b2b-top-list .top-meta { text-align: left; margin-left: 0; }
}
/* ========================================================================
   СТАБИЛЬНАЯ СЕТКА АНАЛИТИКИ (DS-LAYOUT)
   ======================================================================== */
.ds-layout { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 3rem 1.5rem; 
    font-family: var(--rhl-font-main); 
    color: var(--ds-text-main); 
    background: var(--ds-bg); 
    border-radius: 20px; 
    width: 100%; 
    box-sizing: border-box;
}

.ds-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 3.5rem; }
.ds-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3.5rem; }

.ds-kpi-card, .ds-chart-panel, .ds-full-section { 
    background: var(--ds-surface); 
    border: 1px solid var(--ds-border); 
    border-radius: 20px; 
    padding: 2rem; 
    box-shadow: var(--ds-shadow-md); 
    min-height: 250px;
}

/* АДАПТИВНОСТЬ: мобильные */
@media (max-width: 1024px) {
    .ds-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .ds-charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ds-layout { padding: 1rem !important; border-radius: 12px !important; }
    .ds-kpi-grid { grid-template-columns: 1fr !important; }
    .ds-kpi-card, .ds-chart-panel, .ds-full-section { padding: 1.25rem !important; }
    .ds-header h1 { font-size: 1.8rem !important; }
}

/* ========================================================================
   11.5. БЛОК "ВАЖНО" / ДИСКЛЕЙМЕР
   ======================================================================== */
.vp-legal { 
    display: flex; 
    gap: 16px; 
    align-items: flex-start; 
    padding: 24px; 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    color: #64748b; 
    font-size: 14px; 
    line-height: 1.6; 
    margin: 40px auto; 
    max-width: 1000px; 
}
.vp-legal-icon { 
    font-size: 24px; 
    line-height: 1; 
    flex-shrink: 0; 
}
.vp-legal strong { 
    color: #0f172a; 
    display: block; 
    margin-bottom: 4px; 
}

.rhl-showcase { line-height: 1.6; font-size: var(--rhl-size-main); max-width: 1000px; }
.showcase-intro { margin-bottom: 50px; text-align: left; }
.showcase-title { font-size: var(--rhl-size-h2) !important; font-weight: var(--rhl-weight-bold); color: var(--rhl-color-title); margin-bottom: 12px; line-height: 1.1; }
.showcase-lead { font-size: var(--rhl-size-h3); color: var(--rhl-color-label); max-width: 700px; }

.showcase-accent { color: var(--rhl-color-accent); background: rgba(37, 99, 235, 0.05); padding: 2px 6px; border-radius: 4px; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 50px; }
.showcase-card { background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.03); transition: all 0.3s ease; }
.showcase-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); transform: translateY(-5px); }
.card-label { display: block; font-size: var(--rhl-size-small); color: var(--rhl-color-label); text-transform: uppercase; font-weight: var(--rhl-weight-medium); margin-bottom: 8px; letter-spacing: 0.05em; }
.card-value { display: block; font-size: var(--rhl-size-main); color: var(--rhl-color-title); font-weight: var(--rhl-weight-bold); }
.showcase-description { font-size: var(--rhl-size-main); color: var(--rhl-color-text); margin-bottom: 60px; }
.showcase-description h2 { font-size: var(--rhl-size-h2); color: var(--rhl-color-title); font-weight: var(--rhl-weight-bold); margin: 40px 0 20px; }
/* ФУТЕР КАРТОЧКИ SHOWCASE (СВЕТЛЫЙ ПРЕМИУМ) */
.showcase-footer { 
    padding: 32px; 
    background: #f8fafc; /* Мягкий, едва уловимый серый фон */
    border: 1px solid rgba(15, 23, 42, 0.06); /* Тончайшая элегантная рамка */
    border-radius: 16px; 
    display: flex; 
    align-items: center; 
    gap: 24px; 
    position: relative; 
    overflow: hidden; 
}

/* Оставляем красивое свечение, но делаем его светлым и легким */
.showcase-footer::after { 
    content: ''; 
    position: absolute; 
    top: -50%; 
    right: -10%; 
    width: 200px; 
    height: 200px; 
    background: var(--rhl-color-accent, #2563eb); 
    filter: blur(80px); 
    opacity: 0.08; /* Очень нежная прозрачность для светлой темы */
    pointer-events: none;
}

/* Иконка: теперь акцентная (синяя) на полупрозрачном фоне */
.footer-icon { 
    font-size: 24px; 
    background: rgba(37, 99, 235, 0.08); 
    color: #2563eb;
    width: 60px; 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    flex-shrink: 0; 
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); /* Легкая тень для объема */
}

.showcase-footer h4 { 
    margin: 0 0 6px 0; 
    color: #0f172a; /* Глубокий темный цвет для заголовка */
    font-size: 16px; 
    font-weight: 800; 
}

.showcase-footer p { 
    margin: 0; 
    font-size: 14px; 
    color: #475569; /* Приятный спокойный цвет для чтения */
    line-height: 1.6; 
    max-width: 600px; 
}

/* Адаптивность, чтобы на мобильных телефонах блок аккуратно складывался */
@media (max-width: 640px) {
    .showcase-footer {
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 16px;
    }
}
/* ========================================================================
   15. ФИКСЫ ДЛЯ МОБИЛЬНЫХ ЭКРАНОВ (Блог и Заголовки)
   ======================================================================== */

@media (max-width: 768px) {
    /* 1. Исправление заголовков (убираем перенос по буквам и уменьшаем размер) */
    .vp-article-container h1, 
    .vp-article-container h2, 
    .vp-article-container h3, 
    .vp-blog-wrapper h1,
    .vp-blog-wrapper h2 {
        font-size: clamp(22px, 6vw, 28px) !important; /* Динамический размер */
        word-wrap: break-word; /* Мягкий перенос длинных слов */
        word-break: normal !important; /* ЗАПРЕЩАЕМ перенос по одной букве */
        overflow-wrap: break-word;
        hyphens: auto; /* Включаем переносы по слогам, если поддерживается */
        line-height: 1.3;
        margin-bottom: 16px;
    }

    /* Исправление базового текста в статьях */
    .vp-article-container p,
    .vp-article-container li {
        font-size: 15px !important;
        line-height: 1.6;
        word-break: normal;
    }

    /* 2. Восстановление сайдбара (виджетов справа) в блоге */
    /* Твой .vp-blog-layout был настроен как 1fr 340px, а на мобилках схлопывался. */
    .vp-blog-layout {
        display: flex; /* Переходим с Grid на Flexbox для мобилок */
        flex-direction: column; /* Ставим контент друг под друга */
        gap: 32px;
    }
    
    .vp-sidebar {
        width: 100%; /* Заставляем сайдбар занимать всю ширину */
        position: static; /* Отключаем sticky, чтобы он не застревал */
        display: block; /* Убеждаемся, что он видим */
        margin-top: 20px;
    }

    /* Исправление отступов в самом контейнере статьи на мобильных */
    .vp-article-container {
        padding: 20px 15px !important; /* Сильно уменьшаем боковые отступы */
    }
    
    /* 3. Фикс для длинных ссылок (чтобы они не ломали верстку) */
    .vp-article-container a {
        word-break: break-all;
    }
}

/* Фикс для совсем маленьких экранов (например, iPhone SE) */
@media (max-width: 400px) {
    .vp-article-container h1 {
        font-size: 24px !important;
    }
}
/* ========================================================================
   БРОНЕБОЙНЫЙ ФИКС ДЛЯ НАТИВНОГО САЙДБАРА BLOCKSY НА МОБИЛЬНЫХ
   ======================================================================== */
@media (max-width: 1024px) {
    /* 1. Заставляем контейнер Blocksy выстроиться в колонку (статья сверху, виджеты снизу) */
    [data-sidebar] > .ct-container,
    .ct-container[data-layout] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Принудительно включаем сайдбар Blocksy */
    aside[data-id="sidebar"], 
    .ct-sidebar {
        display: block !important;
        width: 100% !important;
        margin-top: 40px !important; /* Делаем красивый отступ от текста статьи */
        order: 2 !important; /* Гарантируем, что виджеты будут ПОД статьей */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
}
/* ========================================================================
   APP-LIKE UX: ГОРИЗОНТАЛЬНЫЙ СВАЙП ДЛЯ СЕТОК НА МОБИЛЬНЫХ (ГЛАВНАЯ)
   ======================================================================== */
@media (max-width: 768px) {
    .b2b-categories-grid,
    .b2b-modules-grid,
    .ds-kpi-grid,
    .vp-features,
    .showcase-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        padding-bottom: 20px !important; 
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }
    
    .b2b-categories-grid::-webkit-scrollbar,
    .b2b-modules-grid::-webkit-scrollbar,
    .ds-kpi-grid::-webkit-scrollbar,
    .vp-features::-webkit-scrollbar,
    .showcase-grid::-webkit-scrollbar {
        display: none; 
    }

    .b2b-cat-card,
    .b2b-module-card,
    .ds-kpi-card,
    .vp-feature-card,
    .showcase-card {
        flex: 0 0 85% !important; 
        max-width: 85% !important;
        scroll-snap-align: center; 
        height: auto !important;
    }
}

/* ========================================================================
   ОГЛАВЛЕНИЕ СТАТЬИ (ДЕСКТОП И МОБИЛЬНЫЕ) — СТРОГИЙ СТИЛЬ
   ======================================================================== */

/* ЛОГИКА ПЕРЕКЛЮЧЕНИЯ УСТРОЙСТВ */
@media (min-width: 1025px) {
    /* На компьютерах прячем мобильное оглавление в тексте */
    .vp-toc-mobile { display: none !important; }
}

@media (max-width: 1024px) {
    /* На планшетах и телефонах прячем десктопное оглавление из сайдбара */
    .vp-toc-desktop { display: none !important; }
}

/* ОБЩИЙ СТИЛЬ БЛОКА */
.vp-dynamic-toc-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 32px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    contain: content; /* Защита от смещения контента при рендере */
}

/* Десктопное оглавление в сайдбаре делает прилипающим, если сайдбар не sticky */
.vp-toc-desktop {
    position: sticky;
    top: 100px; /* Отступ от верхнего края экрана */
    margin: 0;
}

/* ЗАГОЛОВОК С SVG-ИКОНКОЙ СТРОГОГО СПИСКА */
.vp-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.vp-toc-header::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--b2b-primary, #2563eb);
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIyMSIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMjEiIHkyPSIxMiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMTgiIHgyPSIyMSIgeTI9IjE4Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSI2IiB4Mj0iMy4wMSIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEyIiB4Mj0iMy4wMSIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxOCIgeDI9IjMuMDEiIHkyPSIxOCI+PC9saW5lPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIyMSIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMjEiIHkyPSIxMiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMTgiIHgyPSIyMSIgeTI9IjE4Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSI2IiB4Mj0iMy4wMSIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEyIiB4Mj0iMy4wMSIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxOCIgeDI9IjMuMDEiIHkyPSIxOCI+PC9saW5lPjwvc3ZnPg==');
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* ССЫЛКИ ОГЛАВЛЕНИЯ */
.vp-widget-toc-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vp-widget-toc-content a {
    display: block;
    color: #475569;
    text-decoration: none;
    padding: 6px 12px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.vp-widget-toc-content a:hover {
    color: var(--b2b-primary, #2563eb);
    background-color: #f1f5f9;
}

/* ========================================================================
   СТИЛИ НИЖНЕГО МОБИЛЬНОГО МЕНЮ
   ======================================================================== */

/* Скрываем на десктопах по умолчанию */
.b2b-mobile-app-nav {
    display: none;
}

/* Включаем только на мобильных экранах (до 768px) */
@media (max-width: 768px) {
    /* 1. Освобождаем место внизу страницы, чтобы контент не перекрывался меню */
    body {
        padding-bottom: 70px !important; 
    }

    /* 2. Сама панель */
    .b2b-mobile-app-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 -2px 15px rgba(15, 23, 42, 0.08);
        z-index: 99999;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0;
        /* Учет безопасной зоны (Safe Area) для новых iPhone с полоской внизу */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid #e2e8f0;
    }

    /* 3. Кнопки внутри меню */
    .b2b-mobile-app-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #64748b; /* Спокойный серый цвет */
        width: 25%;
        -webkit-tap-highlight-color: transparent; /* Убираем синий квадрат при тапе на iOS */
    }

    /* 4. Иконки и текст */
    .b2b-mobile-app-nav .nav-item svg {
        width: 22px;
        height: 22px;
        margin-bottom: 4px;
        transition: stroke 0.2s ease, transform 0.2s ease;
    }

    .b2b-mobile-app-nav .nav-item span {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.03em;
        transition: color 0.2s ease;
    }

    /* 5. Эффект при нажатии/активности */
    .b2b-mobile-app-nav .nav-item:active svg,
    .b2b-mobile-app-nav .nav-item:focus svg {
        stroke: #2563eb;
        transform: scale(0.9);
    }
    
    .b2b-mobile-app-nav .nav-item:active span,
    .b2b-mobile-app-nav .nav-item:focus span {
        color: #0f172a;
    }

    /* ========================================================================
       УБИВАЕМ СТАРУЮ ЧЕРНУЮ ШТОРКУ И ИКОНКУ ГАМБУРГЕРА
       ======================================================================== */
    /* Прячем стандартную кнопку меню Blocksy в мобильной шапке */
    [data-device="mobile"] .ct-header-trigger {
        display: none !important;
    }
}
/* ========================================================================
   АВТОРСКИЙ СТИЛЬ ФИЛЬТРОВ (КАСТОМНЫЕ ЧЕКБОКСЫ + ПРОКРУТКА)
   ======================================================================== */

/* 1. Воздушный контейнер (никаких рамок) */
.wc-block-product-attribute-filter,
[data-wp-interactive="woocommerce/product-filters"] {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 32px;
}

/* 2. Строгий заголовок */
[data-wp-interactive="woocommerce/product-filters"] legend:not(.screen-reader-text),
[data-wp-interactive="woocommerce/product-filters"] h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
    width: 100%;
}

/* 3. Блок со списком: включаем прокрутку для ВСЕХ фильтров */
.wc-block-product-filter-checkbox-list__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px; /* Высота, после которой появится скролл */
    overflow-y: auto;
    padding-right: 8px; /* Отступ, чтобы скроллбар не наезжал на текст */
}

/* Элегантный скроллбар для списков */
.wc-block-product-filter-checkbox-list__items::-webkit-scrollbar { width: 4px; }
.wc-block-product-filter-checkbox-list__items::-webkit-scrollbar-track { background: transparent; }
.wc-block-product-filter-checkbox-list__items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.wc-block-product-filter-checkbox-list__items::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 4. Строка параметра (кликабельна вся) */
.wc-block-product-filter-checkbox-list__label {
    display: flex !important;
    align-items: center;
    padding: 6px 8px !important;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin: 0 !important;
}

.wc-block-product-filter-checkbox-list__label:hover {
    background: #f8fafc;
}

/* ========================================================================
   МАГИЯ: КАСТОМНЫЕ ЧЕКБОКСЫ
   ======================================================================== */

/* Рисуем свой красивый квадрат вместо стандартного */
.wc-block-product-filter-checkbox-list__input-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    margin-right: 12px;
    background: #ffffff;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Жестко прячем стандартный браузерный чекбокс (но он работает при клике) */
.wc-block-product-filter-checkbox-list__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Скрываем галочку по умолчанию и готовим её к анимации */
.wc-block-product-filter-checkbox-list__mark {
    width: 12px;
    height: 12px;
    color: #ffffff; /* Цвет самой галочки */
    opacity: 0;
    transform: scale(0.5); /* Она будет увеличиваться при клике */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* АКТИВНОЕ СОСТОЯНИЕ (Параметр выбран) */
/* Заливаем квадрат синим цветом */
.wc-block-product-filter-checkbox-list__item:has(input:checked) .wc-block-product-filter-checkbox-list__input-wrapper {
    background: #2563eb;
    border-color: #2563eb;
}

/* Проявляем галочку */
.wc-block-product-filter-checkbox-list__item:has(input:checked) .wc-block-product-filter-checkbox-list__mark {
    opacity: 1;
    transform: scale(1);
}

/* Текст: делаем ярче, если параметр выбран */
.wc-block-product-filter-checkbox-list__text {
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.wc-block-product-filter-checkbox-list__item:has(input:checked) .wc-block-product-filter-checkbox-list__text {
    color: #0f172a;
    font-weight: 700;
}

/* ========================================================================
   КНОПКА "ОЧИСТИТЬ ФИЛЬТРЫ"
   ======================================================================== */
.wp-block-woocommerce-product-filter-clear-button button {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    width: 100%;
    margin-top: 12px;
    padding: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wp-block-woocommerce-product-filter-clear-button button:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
/* ========================================================================
   СИСТЕМА ОТСТУПОВ B2B-ДАШБОРДА (ИДЕАЛЬНАЯ СЕТКА)
   ======================================================================== */

/* 1. БЕЗЖАЛОСТНО УБИВАЕМ ПУСТЫЕ СТРОКИ И ПАРАЗИТНЫЕ АБЗАЦЫ WORDPRESS */
.b2b-mega-dash p:empty,
.b2b-mega-dash br {
    display: none !important;
}

/* 2. ЕДИНЫЙ РИТМ ДЛЯ ГЛАВНЫХ БЛОКОВ */
/* Задаем строгий шаг в 56px между всеми крупными секциями */
.b2b-hero-section,
.b2b-trust-band,
.b2b-modules-grid,
.b2b-categories-grid,
.b2b-insight-section,
.b2b-two-columns,
.b2b-full-section {
    margin-top: 0 !important;
    margin-bottom: 56px !important;
}

/* 3. НАСТРОЙКА ЗАГОЛОВКОВ СЕКЦИЙ (Прижимаем их к контенту) */
.b2b-section-header {
    margin-top: 0 !important;
    margin-bottom: 24px !important; /* Отступ до сетки с карточками */
}

.b2b-section-header h2 {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Расстояние от заголовка до описания */
}

.b2b-section-header p {
    margin-bottom: 0 !important;
}

/* 4. СЛУЖЕБНЫЕ КЛАССЫ ИЗ ТВОЕГО HTML (.mt-0 и панели) */
/* Если секции должны стоять вплотную */
.b2b-full-section.mt-0 {
    margin-top: -32px !important; 
}

/* Настраиваем внутренние отступы белых панелей */
.b2b-panel {
    padding: 32px;
}
.b2b-panel.no-pad { 
    padding: 0 !important; 
}

/* 5. ПОСЛЕДНИЙ ШТРИХ */
/* Убираем отступ у самого последнего элемента внутри панелей, 
   чтобы внизу не образовывалась пустая белая дыра */
.b2b-panel > *:last-child,
.b2b-mega-dash > *:last-child {
    margin-bottom: 0 !important;
}
/* ========================================================================
   СТИЛИ ТЕКСТОВОГО БЛОКА "О ПРОЕКТЕ" (.vp-section)
   ======================================================================== */

/* 1. Общий контейнер секции */
.vp-section {
    background: #ffffff;
    padding: 32px;
    border-radius: 8px;
    margin-bottom: 56px !important; /* Поддерживаем наш общий ритм отступов */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* 2. Заголовки (H3) */
.vp-about-content h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 32px !important; /* Отбивка от предыдущего абзаца */
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}

/* Убираем верхний отступ у самого первого заголовка, чтобы он не проваливался */
.vp-about-content h3:first-child {
    margin-top: 0 !important;
}

/* 3. Основной текст (Абзацы) */
.vp-about-content p {
    font-size: 15px;
    line-height: 1.6; /* Комфортный межстрочный интервал для чтения */
    color: #475569;
    margin-bottom: 16px !important;
}

/* Убираем отступ у последнего абзаца, чтобы не было дыры внизу секции */
.vp-about-content p:last-child {
    margin-bottom: 0 !important;
}

/* 4. Врезка (Highlight Box) - Пример из практики */
.vp-highlight-box {
    background: #f8fafc; /* Светло-серый, почти голубой фон */
    border-left: 4px solid #2563eb; /* Строгая синяя линия слева */
    padding: 16px 20px;
    margin: 24px 0 !important; /* Выделяем блок воздухом сверху и снизу */
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    border-radius: 0 6px 6px 0;
}

/* Выделение жирного текста внутри врезки */
.vp-highlight-box strong {
    color: #0f172a;
    font-weight: 700;
}
/* ========================================================================
   ИДЕАЛЬНАЯ СЕТКА КАРТОЧЕК (.vp-features)
   ======================================================================== */

/* Контейнер: переводим на CSS Grid и задаем 4 равные колонки */
.vp-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; /* Одинаковый зазор между всеми карточками */
    margin-bottom: 56px !important;
}

/* Стили самих карточек преимуществ */
.vp-feature-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
}

.vp-feature-card h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.vp-feature-card p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 0 !important;
}

/* ========================================================================
   ЭЛЕГАНТНАЯ СТРОГАЯ ФОРМА (.vp-form-section)
   ======================================================================== */

/* Ограничиваем ширину секции формы, чтобы она не расползалась */
.vp-form-section {
    max-width: 680px; /* Идеальная ширина для фокуса на полях ввода */
    margin-left: auto !important;
    margin-right: auto !important;
    background: #ffffff;
    padding: 40px !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* Заголовок текстового блока формы */
.vp-form-header {
    text-align: center;
    margin-bottom: 32px;
}

.vp-form-header h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 12px !important;
}

.vp-form-header p {
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
    margin-bottom: 0 !important;
}

/* Стилизация полей Contact Form 7 */
.vp-form-container form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Отступы между строками формы */
}

/* Кастомизация инпутов и текстовых зон */
.vp-form-container input[type="text"],
.vp-form-container input[type="email"],
.vp-form-container input[type="tel"],
.vp-form-container textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box;
}

/* Эффект фокуса (SaaS стиль) */
.vp-form-container input:focus,
.vp-form-container textarea:focus {
    border-color: #2563eb !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Высота для поля сообщения */
.vp-form-container textarea {
    min-height: 120px;
    resize: vertical;
}

/* Кнопка отправки формы */
.vp-form-container input[type="submit"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    width: 100% !important; /* Кнопка на всю ширину формы */
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vp-form-container input[type="submit"]:hover {
    background: #1d4ed8 !important;
}

/* Убираем паразитные отступы, которые WP автоматически добавляет к оберткам CF7 */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 0;
}

/* ========================================================================
   АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ ЭКРАНЫ
   ======================================================================== */
@media (max-width: 1024px) {
    /* На планшетах карточки перестраиваются в 2 колонки */
    .vp-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* На телефонах карточки встают в 1 колонку */
    .vp-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Уменьшаем внутренние отступы у формы, чтобы она не сжималась */
    .vp-form-section {
        padding: 24px !important;
    }
}