/* =============================================
   HERO
   ============================================= */
.hero {
    background: linear-gradient(135deg, var(--plum-deep) 0%, var(--plum) 50%, var(--plum-deep) 100%);
    color: var(--white);
    padding: 80px 0 72px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 70% 50%, rgba(184,80,42,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 20% 30%, rgba(212,133,90,0.12) 0%, transparent 60%);
}

.hero .container { position: relative; z-index: 1; }
.hero__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* Грид-элементы по умолчанию min-width:auto — не сжимаются меньше
   естественной ширины содержимого. При масштабе текста 300% кнопки в
   .hero__actions "требовали" себе ~700px и раздвигали всю колонку за
   пределы экрана (виден только .hero__layout был в рамках вьюпорта, а
   .hero__content внутри него — нет). min-width:0 — стандартный фикс
   этой grid-ловушки. */
.hero__content { min-width: 0; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 24px;
    padding: 6px 14px;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 20px;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #fff;
}
.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.hero__desc {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 36px;
    line-height: 1.7;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__stats {
    display: flex;
    gap: 32px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__stat-num {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    /* Тире ("42–78", "3–5 дней") — точка переноса по умолчанию, на 390px
       контейнеру не хватало буквально пары пикселей, и число рвалось на
       строку "42–" / "78". Число не должно переноситься, в отличие от
       подписи под ним (та переносится намеренно). */
    white-space: nowrap;
}
/* Контраст (WCAG 1.4.3). Фон -- .hero (linear-gradient --plum-deep #3D1B2F
   -> --plum #5B2A45 -> --plum-deep) плюс два коралловых радиальных слоя
   .hero::before. Худшая (самая светлая) точка -- середина градиента #5B2A45
   под коралловым слоем rgba(184,80,42,0.18): композит #6c3140.
     БЫЛО alpha 0.55 -> 4.14:1 -- ниже порога AA 4.5:1.
     СТАЛО alpha 0.72 -> 5.90:1.
   Даже в теоретически худшей точке, где оба радиальных слоя наложились бы
   друг на друга (композит #783a43), 0.72 даёт 5.26:1 -- предложенные
   аудитом 0.68 там дали бы только 4.88:1, поэтому взято с запасом. */
.hero__stat-label {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.72);
    margin-top: 4px;
}

.hero__visual {
    /* Анимация была вторым правилом на тот же селектор ниже по файлу,
       слито 2026-09-01. */
    animation: hero-fade-left .7s cubic-bezier(.4,0,.2,1) .2s both;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Хиро — над сгибом, поэтому появление не завязано на JS/IntersectionObserver
   (как data-animate ниже по странице), а идёт чистой CSS-анимацией: гарантированно
   выполняется силами рендер-движка, без сценария «зависло невидимым» при ошибке JS */
.hero__content > * {
    animation: hero-fade-up .7s cubic-bezier(.4,0,.2,1) both;
}
.hero__content > *:nth-child(2) { animation-delay: .1s; }
.hero__content > *:nth-child(3) { animation-delay: .2s; }
.hero__content > *:nth-child(4) { animation-delay: .3s; }
.hero__content > *:nth-child(5) { animation-delay: .4s; }
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-fade-left {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__content > *, .hero__visual { animation: none; }
}
/* =============================================
   КАТЕГОРИИ
   ============================================= */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.category-card {
    border-radius: 16px;
    padding: 28px 16px 22px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--dark);
    transition: all .25s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center -- ноль визуальной разницы для старой заливки+иконки (тот же
       content-sized height, как и раньше, лишнего места нет), но нужен
       ЯВНО: .category-card--photo ниже переопределяет на flex-end, а
       Grid Layout по умолчанию растягивает (align-items: stretch) ВСЕ
       карточки строки под высоту самой высокой (см. .category-card--photo
       aspect-ratio ниже) -- без center карточка БЕЗ фото в одном ряду с
       карточками С фото осталась бы top-aligned внутри чужой, более
       высокой рамки, вместо аккуратно отцентрированной. */
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
}
.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s;
    background: currentColor;
}
.category-card__icon {
    position: relative;
    z-index: 2;
    transition: transform .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-card__icon svg { display: block; }
.category-card span:last-child { position: relative; z-index: 2; }
.category-card:hover .category-card__icon { transform: scale(1.15) rotate(-5deg); }
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    text-decoration: none;
}

/* P2 аудит, находка №3 (category-tiles-flat-fill-no-photo) -- реальное
   фото товара из категории вместо плоской заливки+иконки
   (mp_category_preview_image(), bootstrap.php; markup — home.php секция
   2). .category-card--photo рендерится ТОЛЬКО когда для категории нашлось
   хотя бы одно фото товара -- без него разметка/CSS не меняются вовсе
   (см. правила .category-card--<slug> ниже), тот же graceful fallback,
   что был до этой правки.
   Тот же object-fit:cover приём, что и у карточек товара (.pc-slider__img,
   components.css) -- визуальная согласованность "фото на всю плитку" по
   всему сайту, тот же язык дизайна. Позиционирование/z-index самого
   <img> вынесены сюда (а не в блок .category-card--photo{...} ниже,
   ПОСЛЕ .category-card--<slug> ради каскада -- см. её докблок) --
   .category-card__photo сам по себе ни с чем по specificity не
   конфликтует, двигать его незачем. */
.category-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.category-card:hover .category-card__photo { transform: scale(1.08); }

/* Градиент-скрим снизу -- контраст подписи категории на ПРОИЗВОЛЬНОМ фото
   (разная яркость/цвет исходных снимков товара) -- тот же принцип
   затемнения под белым текстом, что уже применяет .pc-overlay__cart
   (components.css, полупрозрачный тёмный фон под текстом кнопки поверх
   фото товара), здесь -- full-bleed под всей плиткой, а не отдельной
   плашкой. z-index:1 -- строго МЕЖДУ фото (0) и текстом (2), см. выше. */
.category-card--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20,10,18,0) 40%, rgba(20,10,18,.82) 100%);
    pointer-events: none;
}

/* Цвета категорий */
/* Та же семья, что и плейсхолдеры карточек товара (product_card.php) —
   категории должны выглядеть одинаково везде на сайте. */
.category-card--platya   { background: #FBE4D6; color: #5B2A45; }
.category-card--kostyumy { background: #ECE0D2; color: #3D1B2F; }
/* P7 (2026-08-10) -- был единственным зелёным (#E4EDE3/#4D6651) среди
   плейсхолдеров/категорийных плашек сайта -- чужеродный оттенок вне
   палитры камень/коралл/слива, и не совпадал даже с уже занятым --sage
   (base.css). #FBE4D6/#A8433B -- та же пара, на которую переведён
   'Куртки' в product_card.php's $cat_colors (см. её докблок) -- держим
   все 3 копии (сюда, product_card.php, main.js's MP_CAT_LINK_STYLE) в
   одном виде, как и раньше (см. комментарий "Та же семья..." чуть выше). */
.category-card--kurtki   { background: #FBE4D6; color: #A8433B; }
.category-card--bluzy    { background: #FBE4D6; color: #9A3F1E; }
/* Контраст: #8C5A78 на #ECE0D2 давал 4.20, а на hover-фоне #E4D4BE -- 3.76,
   то есть ниже порога WCAG AA 4.5 для обычного текста. Затемнение до #7A4867
   поднимает до 5.48 и 4.90, оттенок при этом остаётся тем же сливовым --
   плитка не выпадает из палитры. Особенно важно на странице 404: там
   pages/404.php рендерит те же карточки БЕЗ фотографии, и плоская заливка --
   единственный режим отрисовки. */
.category-card--yubki    { background: #ECE0D2; color: #7A4867; }
/* muzhskoe отсутствовала до 2026-08-10 (владелец + round-3 аудит) --
   карточка "Мужское" рендерилась вообще без фона/паддинга/скругления,
   единственная из 4 текущих категорий на главной. Тот же тон, что уже
   используется для этой категории в мобильном меню (main.js's
   MP_CAT_LINK_STYLE.muzhskoe), чтобы цвет категории был одинаковым
   везде на сайте. */
/* Тот же случай: 4.02 на обычном фоне и 3.53 на hover -- оба ниже 4.5.
   #775827 даёт 5.28 и 4.64 в том же охристом тоне. */
.category-card--muzhskoe { background: #EFE6D6; color: #775827; }

.category-card--platya:hover   { border-color: #5B2A45; background: #F6D4BE; }
.category-card--kostyumy:hover { border-color: #3D1B2F; background: #E4D4BE; }
.category-card--kurtki:hover   { border-color: #A8433B; background: #F6D4BE; }
.category-card--bluzy:hover    { border-color: #9A3F1E; background: #F6D4BE; }
.category-card--yubki:hover    { border-color: #7A4867; background: #E4D4BE; }
.category-card--muzhskoe:hover { border-color: #775827; background: #E5D8BC; }

/* .category-card--photo НАМЕРЕННО объявлен ЗДЕСЬ, ПОСЛЕ всех
   .category-card--<slug>{background;color} выше (не сразу рядом с
   .category-card__photo/::after) -- обе группы правил бьют по одной и той
   же карточке одновременно (class="category-card category-card--platya
   category-card--photo", home.php) с ОДИНАКОВОЙ специфичностью (один
   класс каждое) -- при равной специфичности выигрывает правило,
   объявленное ПОЗЖЕ по файлу. Белый текст/нейтральный фон-подложка здесь
   обязаны перебить конкретный цвет категории (#5B2A45 у "Платья" и т.п.)
   независимо от того, какая именно категория показана с фото -- порядок в
   файле здесь часть контракта, а не косметика. border-color hover-правила
   категорий (сразу выше) НЕ переопределяются -- цветное кольцо на ховере
   поверх фото при наведении остаётся приятной деталью бренда, граница
   рисуется СНАРУЖИ full-bleed фото (border, не часть inset:0-области
   .category-card__photo), фото её не перекрывает. */
.category-card--photo {
    /* aspect-ratio -- та же портретная пропорция, что и у фото товара
       (.pc-slider, components.css, 3/4) -- визуальная согласованность
       "плитки категорий" и "карточки товара" по всему сайту вместо двух
       разных языков дизайна. Плоская заливка (без фото) остаётся
       content-sized, как и была -- пропорция нужна только там, где
       реально есть чем её заполнить. */
    aspect-ratio: 3 / 4;
    justify-content: flex-end;
    color: #fff;
    /* Видно долю секунды, пока <img> ещё не декодирован (loading="lazy"
       на 4 из 5 плиток, см. home.php) -- тот же нейтральный фон-подложка,
       что .pc-slider уже использует под свои фото (components.css,
       var(--stone-deep)), не белый "прыжок" при появлении картинки. */
    background: var(--stone-deep);
}
.category-card--photo .category-card__icon { display: none; }
.category-card--photo span:last-child {
    /* Подпись категории поверх ПРОИЗВОЛЬНОГО фото -- градиент-скрим выше
       уже даёт основной контраст, тень добавляет читаемость на самой
       светлой части снимка (когда фигура/фон у самого низа кадра светлые). */
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
/* =============================================
   ПРЕИМУЩЕСТВА — НОВЫЙ ДИЗАЙН
   ============================================= */
.benefits-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.benefit-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: all .25s;
}
.benefit-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity .25s;
    border-radius: 20px 20px 0 0;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); border-color: transparent; }
.benefit-card:hover::before { opacity: 1; }

/* Иконки — цветные квадраты */
.benefit-card__icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    transition: transform .25s;
}
.benefit-card:hover .benefit-card__icon { transform: scale(1.08) rotate(-3deg); }

/* Четыре плашки преимуществ — одна семья цветов Этапа 0 (коралл/золото/
   шалфей/сливовый), а не случайный разноцвет, как было раньше. */
.benefit-card__icon--orange {
    background: linear-gradient(135deg, var(--coral-tint) 0%, var(--stone) 100%);
    color: var(--primary);
    box-shadow: 0 4px 16px rgba(184,80,42,0.15);
}
.benefit-card__icon--gold {
    background: linear-gradient(135deg, #F3E4CC 0%, var(--stone) 100%);
    color: var(--gold);
    box-shadow: 0 4px 16px rgba(176,141,87,0.15);
}
.benefit-card__icon--green {
    background: linear-gradient(135deg, var(--sage-tint) 0%, var(--stone) 100%);
    color: var(--sage);
    box-shadow: 0 4px 16px rgba(110,143,114,0.15);
}
.benefit-card__icon--purple {
    background: linear-gradient(135deg, #EBDCE4 0%, var(--stone) 100%);
    color: var(--plum);
    box-shadow: 0 4px 16px rgba(91,42,69,0.15);
}

/* Цветные линии сверху */
.benefit-card:nth-child(1)::before { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.benefit-card:nth-child(2)::before { background: linear-gradient(90deg, var(--gold), #C9A876); }
.benefit-card:nth-child(3)::before { background: linear-gradient(90deg, var(--sage), #8FAE93); }
.benefit-card:nth-child(4)::before { background: linear-gradient(90deg, var(--plum), var(--plum-soft)); }

/* Число / цифровой акцент */
.benefit-card__num {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -.3px;
}

.benefit-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.benefit-card__desc {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.65;
    flex: 1;
    margin-bottom: 16px;
}

.benefit-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 20px;
    margin-top: auto;
}

@media (max-width: 1100px) {
    .benefits-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .benefits-strip { grid-template-columns: 1fr; gap: 12px; }
    .benefit-card { padding: 22px 20px; }

    /* UX-аудит 2026-08-29, находка P1-7. Класс .benefits-strip общий у ДВУХ
       секций главной -- «Как заказать» и «Преимущества», -- поэтому правило
       выше трогать нельзя: оно задело бы обе. Модификатор --steps сжимает
       только шаги оформления.

       Зачем: на мобильном одна колонка превращала четыре шага в четыре полные
       карточки подряд -- почти четыре экрана скролла (~1100px, 8% всей высоты
       главной) под блок, который человек читает один раз в жизни. Главная
       целиком занимала 14 928px, то есть около восемнадцати экранов.

       Что сделано: сетка 2×2 вместо 1×4, уменьшенные отступы и скрытый
       чип-подпись (.benefit-card__tag: «В каталоге», «1–2 минуты», «В рабочее
       время», «Без предоплаты»). Чип декоративный и на узком экране добавляет
       по строке к каждому шагу. Сам текст шагов сохранён -- смысл не режется,
       режется только его вертикальная стоимость. */
    .benefits-strip--steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .benefits-strip--steps .benefit-card { padding: 16px 14px; }
    .benefits-strip--steps .benefit-card__tag { display: none; }
    .benefits-strip--steps .benefit-card__desc { font-size: 0.8125rem; line-height: 1.4; }
}
/* =============================================
   БАННЕР CTA
   ============================================= */
/* Владелец, 2026-08-15 (макет "Массмаркет", одобрен): тёмный сливовый вместо
   коралловой заливки -- та же тёмная плашка, что уже несёт hero/footer
   (--plum-deep), а не второй акцентный (коралловый) блок подряд на одной
   странице сразу после hero. Кнопка стала outline (прозрачный фон + белая
   обводка) вместо "белая заливка/коралловый текст" -- тот же приём, что и
   у вторичной CTA hero (home.php, inline-стиль "border:2px solid
   rgba(255,255,255,.3)") для того же тёмного фона. */
.cta-banner {
    background: var(--plum-deep);
    border-radius: 20px;
    padding: 48px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.cta-banner__title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.cta-banner__desc { font-size: 0.9375rem; opacity: .85; }
.cta-banner .btn-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.35);
    flex-shrink: 0;
}
.cta-banner .btn-dark:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
/* =============================================
   БЛОК 3.2 — HERO DECO
   ============================================= */
.hero__deco {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    background: var(--accent);
    pointer-events: none;
}
.hero__deco--1 { width: 300px; height: 300px; top: -80px; right: -60px; }
.hero__deco--2 { width: 180px; height: 180px; bottom: -40px; right: 120px; }
.hero__deco--3 { width: 80px;  height: 80px;  top: 30%; left: 40%; }

/* =============================================
   БЛОК 3.3 — HERO TRUST CARD
   ============================================= */
.hero__trust-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    overflow: hidden;
    max-width: 340px;
    margin-left: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Шапка */
.hero__trust-card__head {
    background: linear-gradient(135deg, rgba(184,80,42,0.28) 0%, rgba(184,80,42,0.14) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 24px 28px 20px;
    text-align: center;
    position: relative;
}
.hero__trust-card__head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212,133,90,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hero__trust-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    opacity: 0.9;
}
.hero__trust-sizes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.hero__trust-sizes__num {
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
}
.hero__trust-dash {
    color: var(--accent);
    font-size: 2.375rem;
    margin: 0 2px;
    vertical-align: baseline;
}
/* «размеры до 78 — под заказ» -- обещание ассортимента, а не декор (P1-8). */
.hero__trust-sizes__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
}

/* Список преимуществ */
.hero__trust-list {
    padding: 6px 22px 8px;
}
.hero__trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hero__trust-item:last-child { border-bottom: none; }
.hero__trust-item div { display: flex; flex-direction: column; gap: 2px; }
.hero__trust-item strong {
    font-size: 0.8125rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}
.hero__trust-item span {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.38);
}

/* Цветные иконки-кружки */
.hero__trust-item__icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero__trust-item__icon--delivery {
    background: rgba(212,133,90,0.18);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(212,133,90,0.25);
}
.hero__trust-item__icon--cash {
    background: rgba(201,151,58,0.18);
    color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,151,58,0.25);
}
.hero__trust-item__icon--return {
    background: rgba(110,143,114,0.2);
    color: var(--sage);
    box-shadow: 0 0 0 1px rgba(110,143,114,0.3);
}

/* Подвал карточки — рейтинг */
.hero__trust-card__footer {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 16px 22px;
    background: rgba(0,0,0,0.12);
}
.hero__trust-rating {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero__trust-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    color: var(--gold);
}
.hero__trust-rating__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hero__trust-rating__text strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-display);
}
.hero__trust-rating__text span {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.38);
}

/* =============================================
   ОТЗЫВЫ — УЛУЧШЕННЫЙ ДИЗАЙН
   ============================================= */
.reviews-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.reviews-summary {
    text-align: right;
    flex-shrink: 0;
}
.reviews-summary__score {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
}
.reviews-summary__score span { font-size: 0.875rem; color: var(--text-light); font-family: var(--font-body); font-weight: 400; }
.reviews-summary__count { font-size: 0.75rem; color: var(--text-light); margin-top: 3px; }

@media (max-width: 900px) {
    .reviews-section-header { flex-direction: column; align-items: flex-start; }
    /* align-items:flex-start above makes flex children size to their
       min-width:auto content floor instead of stretching to the row width --
       the eyebrow+title wrapper (first child, no class) has no override, so
       its h2 can't shrink below that floor and overflows at narrow widths
       (found live at 320px: 6.66px overflow on RU's "покупательницей" --
       verified via Playwright MCP, chrome-devtools resize_page could not
       reach viewports under 500px in that session). min-width:0 is the
       standard flexbox fix -- it removes the floor so the h2 wraps normally
       instead of overflowing. */
    .reviews-section-header > div:first-child { min-width: 0; }
    .reviews-summary { text-align: left; }
}

/* =============================================
   АДАПТИВ (хиро / категории / преимущества / cta)
   ============================================= */
@media (max-width: 1100px) {
    .hero h1          { font-size: 2.375rem; }
    .hero__layout     { gap: 40px; }
}
@media (max-width: 900px) {
    .categories-grid  { grid-template-columns: repeat(3, 1fr); }
    .benefits-grid    { grid-template-columns: repeat(2, 1fr); }
    .hero__layout     { grid-template-columns: 1fr; }
    .hero__visual     { display: none; }
    .cta-banner       { flex-direction: column; text-align: center; padding: 32px; }
}
@media (max-width: 640px) {
    .categories-grid  { grid-template-columns: repeat(2, 1fr); }
    .benefits-grid    { grid-template-columns: 1fr 1fr; }
    .hero             { padding: 48px 0; }
    .hero h1          { font-size: 1.75rem; }
    .hero__stats      { gap: 20px; }
    .hero__actions    { flex-direction: column; }
}

/* =============================================
   МОБИЛЬНЫЕ СОСТОЯНИЯ КНОПОК (категории)
   ============================================= */
.category-card:active {
    transform: scale(0.97);
    transition: transform .1s ease;
}