/* ==========================================================================
   BLOCK: BHT EXPERT HERO
   ========================================================================== */

/* Железная адаптивность контейнера */
.bht-expert-hero {
    margin: 3rem auto 5rem;
    width: 100%;
    max-width: var(--content-width-wide, 1200px);
    padding: 0 1.25rem;
    box-sizing: border-box; /* Это починит съезд экрана на мобилке */
}

.bht-expert-hero__inner {
    display: grid; 
    grid-template-columns: 1fr 1.3fr; 
    gap: 4rem; 
    align-items: start;
}

/* --- ЛЕВАЯ КОЛОНКА --- */
.bht-expert-hero__left { display: flex; flex-direction: column; gap: 2rem; }

.bht-expert-hero__image-wrap {
    background: var(--bg-surface-alt); 
    border: 1px solid var(--border);
    border-radius: var(--r-xl, 16px); 
    padding: 10px;
}
.bht-expert-hero__image-wrap img { width: 100%; border-radius: var(--r-lg, 12px); display: block; }
.bht-expert-hero__placeholder { padding: 4rem; text-align: center; color: var(--text-hint); }

.bht-expert-hero__expert-score { display: flex; align-items: center; gap: 15px; }
.bht-expert-hero__score-circle {
    width: 60px; height: 60px; border-radius: 50%;
    border: 3px solid var(--primary); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 900; color: var(--text-main);
}
.bht-expert-hero__score-info strong { display: block; font-size: 1.125rem; color: var(--text-main); line-height: 1.2; }
.bht-expert-hero__score-info span { font-size: 0.875rem; color: var(--text-muted); }

/* --- ПРАВАЯ КОЛОНКА --- */
.bht-expert-hero__badges { display: flex; gap: 10px; margin-bottom: 1rem; }
.bht-badge-primary { 
    background: var(--primary); color: var(--bg-surface); 
    font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-sm, 6px); letter-spacing: 0.05em; text-transform: uppercase;
}
.bht-badge-outline { 
    border: 1px solid var(--border-strong); color: var(--text-muted); 
    font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-sm, 6px); letter-spacing: 0.05em; text-transform: uppercase;
}

.bht-expert-hero__rating { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem; }
.bht-stars { color: var(--primary); letter-spacing: 2px; margin-right: 5px; }

.bht-expert-hero__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 900; color: var(--text-main); margin: 0 0 1.5rem; line-height: 1.1; }

/* --- QUICK VERDICT --- */
.bht-expert-hero__verdict { margin-bottom: 2rem; }
.bht-verdict-label { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.bht-verdict-text { font-size: 1.0625rem; color: var(--text-main); line-height: 1.6; }
.bht-verdict-text p { margin-bottom: 1rem; }
.bht-verdict-text p:last-child { margin-bottom: 0; }
.bht-verdict-stat { 
    border: 1px solid var(--border-strong); padding: 10px 15px; border-radius: var(--r-md, 8px); 
    font-size: 0.9375rem; color: var(--text-main); margin-top: 1.5rem; display: inline-block; 
}

.bht-verdict-collapse {
    max-height: 95px; 
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}
.bht-verdict-collapse::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--bg-surface));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.bht-verdict-collapse.is-expanded { max-height: 1500px; }
.bht-verdict-collapse.is-expanded::after { opacity: 0; }

.bht-verdict-toggle {
    background: transparent; border: none; color: var(--primary); 
    font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; 
    padding: 10px 0 0 0; cursor: pointer; display: inline-block;
}
.bht-verdict-toggle:hover { text-decoration: underline; }

/* --- BUY BOX --- */
.bht-expert-hero__buybox {
    background: var(--bg-surface-alt); border: 1px solid var(--border-strong);
    padding: 1.5rem; border-radius: var(--r-xl, 16px); margin-bottom: 1.5rem;
}
.bht-price-row { display: flex; align-items: baseline; gap: 15px; margin-bottom: 1rem; flex-wrap: wrap; }
.bht-price-new { font-size: 2.5rem; font-weight: 900; color: var(--text-main); line-height: 1; }
.bht-price-old { font-size: 1.25rem; color: var(--text-hint); text-decoration: line-through; font-weight: 600; }
.bht-price-save { 
    border: 1px solid var(--primary); color: var(--primary); 
    font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-sm, 6px); 
}
.bht-promo-bar { color: var(--text-main); font-size: 0.8125rem; font-weight: 700; display: inline-block; }

/* --- ACTIONS --- */
.bht-expert-hero__actions { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* --- TRUST CHECKMARKS --- */
.bht-expert-hero__trust { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: 2.5rem; }
.bht-expert-hero__trust span { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); font-weight: 600; }
.bht-expert-hero__trust svg { color: var(--primary); }

/* --- FEATURES GRID (НОВЫЙ D2C ДИЗАЙН КАК У NOURISH GREENS) --- */
.bht-expert-hero__features { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem 1rem; 
    padding-top: 2rem;
    border-top: 1px solid var(--border); /* Отделяем линией от траст-иконок */
}

.bht-feat-item {
    display: flex; 
    flex-direction: column; /* Выстраиваем сверху вниз */
    align-items: center;    /* Центрируем */
    text-align: center;
    gap: 12px; 
    background: transparent; /* Убрали рамки и фон */
    border: none; 
    padding: 0; 
}

/* Кружок для иконки */
.bht-feat-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-surface-alt); /* Цвет кружка берем из темы */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary); /* Сама иконка красится в главный цвет */
}

.bht-feat-icon-circle svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.5px;
}

.bht-feat-text strong { 
    display: block; 
    font-size: 0.9375rem; 
    color: var(--text-main); 
    margin-bottom: 4px; 
}
.bht-feat-text span { 
    font-size: 0.8125rem; 
    color: var(--text-muted); 
    display: block;
}

/* --- АДАПТИВ --- */
@media (max-width: 900px) {
    .bht-expert-hero {
        padding: 0 1rem; /* Жесткий отступ для телефона */
    }
    .bht-expert-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    
    /* На телефоне картинка будет крупнее, без лишней рамки */
    .bht-expert-hero__image-wrap {
        padding: 0;
        background: transparent;
        border: none;
    }
    .bht-expert-hero__image-wrap img {
        border-radius: var(--r-xl, 16px);
        border: 1px solid var(--border);
    }
    
    /* Оставляем 2 в ряд на телефоне, это выглядит идеально для круглых иконок */
    .bht-expert-hero__features { 
        grid-template-columns: repeat(2, 1fr); 
    }
}