/* ==========================================================================
   BLOCK: BHT COMPARISON TABLE (Ultra-Fresh Premium Redesign)
   ========================================================================== */
.bht-comp {
    margin: 4rem auto 5rem;
    width: 100%;
    max-width: var(--content-width-wide, 1100px);
    padding: 0 1.25rem;
    box-sizing: border-box;
}

.bht-comp__header { text-align: center; margin-bottom: 2.5rem; }
.bht-comp__title { font-size: clamp(2rem, 3.5vw, 2.5rem); font-weight: 900; color: var(--text-main); margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.bht-comp__subtitle { font-size: 1.125rem; color: var(--text-muted); margin: 0; }

/* Обертка таблицы */
.bht-comp__table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Идеально плавный скролл на iPhone */
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl, 16px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.03); /* Мягкая премиум-тень */
}

/* Сама таблица */
.bht-comp-table {
    width: 100%;
    min-width: 760px; /* Уменьшили, чтобы на мобилках скролл не был бесконечным */
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

/* --- ГОРИЗОНТАЛЬНЫЕ ЛИНИИ (Без вертикального мусора) --- */
.bht-comp-table th, 
.bht-comp-table td {
    padding: 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.bht-comp-table th { 
    vertical-align: bottom; 
    border-bottom: 2px solid var(--border); 
}
.bht-comp-table tr:last-child td { border-bottom: none; }

/* --- ЛИПКАЯ ЛЕВАЯ КОЛОНКА (Feature) --- */
.bht-ct-feature-head, 
.bht-ct-feature-name {
    width: 160px;
    min-width: 160px;
    font-size: 0.8125rem; 
    font-weight: 800; 
    color: var(--text-hint); 
    text-transform: uppercase; 
    letter-spacing: 0.1em;
    position: sticky;
    left: 0;
    background: var(--bg-surface); /* Обязательно фон, чтобы текст не просвечивал */
    z-index: 10;
    border-right: 1px solid var(--border); /* Отделяем от контента */
}

.bht-ct-feature-name {
    font-size: 0.9375rem; 
    color: var(--text-main); 
    letter-spacing: normal;
    text-transform: none;
}

/* Тень от липкой колонки (показывает, что можно скроллить) */
.bht-ct-feature-head::after, 
.bht-ct-feature-name::after {
    content: ''; 
    position: absolute; 
    top: 0; bottom: 0; right: -12px; width: 12px;
    background: linear-gradient(to right, rgba(0,0,0,0.03), transparent);
    pointer-events: none;
}

/* --- ОСТАЛЬНЫЕ ШАПКИ --- */
.bht-ct-col-head { width: 28%; }

.bht-ct-badge {
    display: inline-block;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem; 
}

.bht-ct-name { font-size: 1.25rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; line-height: 1.2; text-transform: uppercase; }
.bht-ct-sub { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); line-height: 1.3; }

/* --- ЯЧЕЙКИ С ДАННЫМИ --- */
.bht-ct-cell-inner { display: flex; align-items: flex-start; gap: 12px; }
.bht-ct-text-wrap { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.bht-ct-main-text { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); line-height: 1.3; }
.bht-ct-sub-text { font-size: 0.8125rem; font-weight: 400; color: var(--text-hint); line-height: 1.3; }

/* Иконки */
.bht-ct-cell-inner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.bht-icon-good { color: var(--primary); }
.bht-icon-bad { color: var(--text-hint); stroke-width: 2.5; }
.bht-icon-neutral { color: var(--text-hint); }

/* ==========================================================================
   ВЫДЕЛЕНИЕ ПОБЕДИТЕЛЯ (Новый элегантный дизайн)
   ========================================================================== */
/* Мягкий фон для всей колонки (без боковых рамок) */
.bht-comp-table th.is-main,
.bht-comp-table td.is-main {
    background: var(--bg-surface-alt); 
    position: relative;
}

/* Мощный акцент сверху */
.bht-comp-table th.is-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--primary);
}

/* Акценты внутри */
.bht-ct-col-head.is-main .bht-ct-badge {
    background: var(--primary); 
    color: var(--bg-surface); 
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Бейдж парит */
}
.bht-ct-col-head.is-main .bht-ct-name { color: var(--primary); }
.bht-ct-cell.is-main.type-good .bht-ct-main-text { color: var(--primary); font-weight: 800; }

/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (Магия здесь)
   ========================================================================== */
@media (max-width: 800px) {
    .bht-comp__header { text-align: left; }
    
    .bht-comp-table { min-width: 620px; } /* Делаем таблицу компактнее */
    
    .bht-comp-table th, 
    .bht-comp-table td {
        padding: 1rem 0.75rem; /* Уменьшаем "воздух" для мобилок */
    }

    /* ЖЕСТКО сжимаем левую колонку, чтобы отдать место продуктам */
    .bht-ct-feature-head, 
    .bht-ct-feature-name {
        width: 95px !important;
        min-width: 95px !important;
        font-size: 0.75rem;
        white-space: normal; /* Разрешаем перенос текста по словам */
        word-break: break-word;
    }
    
    .bht-ct-feature-name { font-size: 0.8125rem; }

    /* Уменьшаем шрифты внутри ячеек */
    .bht-ct-name { font-size: 1.125rem; }
    .bht-ct-badge { font-size: 0.6rem; padding: 3px 8px; margin-bottom: 0.5rem; }
    
    .bht-ct-cell-inner { gap: 8px; }
    .bht-ct-cell-inner svg { width: 16px; height: 16px; margin-top: 1px; }
    .bht-ct-main-text { font-size: 0.875rem; }
    .bht-ct-sub-text { font-size: 0.75rem; }
}