/* Главная: первый экран, преимущества, витринные блоки.
 *
 * Зона Фазы 5.
 *
 * Файл выделен 31.08.2026 из общего brand.css, чтобы над редизайном можно было
 * работать в несколько сессий одновременно. Пока зоны жили в одном файле,
 * параллельная работа означала гонку: на сервере побеждал тот, кто выложил
 * последним, а в гите каждая правка давала конфликт. Теперь у каждой фазы свой
 * файл, и пересечение возможно только там, где оно и должно быть — в токенах.
 *
 * ПРАВИЛО: цвета только через var(--pwr-*), см. assets/tokens.css.
 */

/* === КАРТОЧКИ ПРЕИМУЩЕСТВ === */
.pwr-feature {
    background: var(--pwr-surface); border: 1px solid var(--pwr-line);
    border-radius: 16px; padding: 26px 22px;
    box-shadow: var(--pwr-shadow-1); transition: .2s;
}
.pwr-feature:hover { box-shadow: var(--pwr-shadow-2); transform: translateY(-2px); }
.pwr-ico { display: flex; justify-content: center; margin-bottom: 14px; }
.pwr-ico svg { width: 46px; height: 46px; stroke-linecap: round; stroke-linejoin: round; }
.pwr-feature h3 { margin: 0 0 8px !important; }
.pwr-feature p { color: var(--pwr-text); margin: 0; font-size: 15px; }


/* === ГЛАВНАЯ: баннер прижат к шапке === */
.home .hero-section, .home .page-title, .home .entry-header,
.home [data-type="type-1"].hero-section { display: none !important; }
.home .site-main, .home .content-area, .home main#main { padding-top: 0 !important; margin-top: 0 !important; }
.home .site-main > *:first-child { margin-top: 0 !important; }
.home article.post, .home .entry-content { margin-top: 0 !important; padding-top: 0 !important; }
.home .ct-container-full[data-vertical-spacing] {
    padding-top: 0 !important; --content-vertical-spacing: 0px !important;
}
.home article > .hero-section,
.home .woocommerce-notices-wrapper:empty { display: none !important; margin: 0 !important; }
.home .entry-content > .wp-block-group.alignfull:first-child { margin-top: 0 !important; }

/* === ПЕРВЫЙ ЭКРАН === */
/* Кадр подставляется фоном, а не тегом <img>: на десктопе и мобильном это
   РАЗНЫЕ снимки, а не один обрезанный. На широком кадре текст ложится в левую
   треть, на вертикальном — сверху, и обрезкой одного из другого это не
   получить. Медиазапрос переключает их без дублирования разметки.

   Формат WebP, а не PNG: те же кадры в PNG весили 1,5 МБ каждый — для первого
   экрана это неприемлемо, он грузится раньше всего остального. В WebP при
   качестве 86 они стали 84 и 94 КБ, разницы на глаз нет.

   Дата в имени файла — не украшение: кадр меняется, а nginx отдаёт uploads без
   Cache-Control, и браузер с прошлым визитом показал бы старый снимок сколь
   угодно долго. Новое имя обновляет всех разом; CSS версионируется filemtime,
   поэтому и он доедет. Кадры от 08.09.2026, прошлые лежат рядом без даты. */
.pwr-hero {
    position: relative;
    background-color: var(--pwr-bg);
    background-image: url('/wp-content/uploads/2026/08/hero-desktop-20260908.webp');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: clamp(420px, 43vw, 620px);
    display: flex;
    align-items: center;
}
/* Слева кадр уходит в чистый чёрный, справа — светлее. Градиент добирает
   контраст под текстом на промежуточных ширинах, где кадр сдвигается. */
.pwr-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        var(--pwr-bg) 0%, rgba(11, 11, 13, .85) 34%, rgba(11, 11, 13, 0) 62%);
    pointer-events: none;
}
.pwr-hero__inner {
    position: relative;
    width: min(1290px, 100%);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) 20px;
}
.pwr-hero__slogan {
    margin: 0 0 14px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-size: clamp(30px, 4.4vw, 58px);
    color: var(--pwr-heading);
    text-transform: uppercase;
    max-width: 15ch;
}
.pwr-hero__slogan span { color: var(--pwr-accent); }
/* Заголовок визуально спокойнее слогана, но остаётся H1: слоган —
   брендовая строка без поискового спроса, а категория живёт здесь. */
.pwr-hero__title {
    margin: 0 0 10px !important;
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 600;
    color: var(--pwr-text-strong);
    max-width: 26ch;
}
.pwr-hero__sub {
    margin: 0 0 26px;
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.5;
    color: var(--pwr-text);
    max-width: 34ch;
}

/* Четыре свойства с иконками над кнопкой — из макета.
   Иконки инлайновым SVG с currentColor: наследуют цвет и меняются вместе с
   палитрой, не требуют ни файла, ни запроса. */
.pwr-hero__props {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    max-width: 560px;
}
/* Иконка и подпись выровнены по одной оси: в макете подпись стоит ПОД значком
   и по его центру. При выравнивании по левому краю ряд читается как список,
   а не как четыре равных свойства. */
.pwr-hero__prop {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    font-size: 13px; line-height: 1.3; color: var(--pwr-text-strong);
}
.pwr-hero__prop svg {
    width: 30px; height: 30px; color: var(--pwr-accent);
    flex: 0 0 30px;
}

.pwr-hero__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px;
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-accent);
    color: var(--pwr-on-accent) !important;
    font-weight: 700; font-size: 16px; text-decoration: none;
    transition: background-color .2s ease;
}
.pwr-hero__cta:hover { background: var(--pwr-accent-hover); }

/* На десктопе кадр остаётся фоном секции, и этот блок не нужен. Он существует
   ради мобильного, где снимок обязан занимать собственную высоту. */
.pwr-hero__media { display: none; }

/* На мобильном кадр перестаёт быть фоном и встаёт в поток отдельным блоком.
   Фоном он держался только на широком экране: высоту секции задаёт текст, и
   на телефоне всё содержимое ложилось поверх снимка — иконки свойств вставали
   девушке на лицо, кнопка резала пакет протеина. Порядок из макета владельца
   (текст → кадр → четыре свойства → кнопка) существует только тогда, когда у
   кадра есть собственная высота. */
@media (max-width: 781px) {
    .pwr-hero {
        background-image: none;
        display: block;
        min-height: 0;
    }
    .pwr-hero::before { content: none; }
    .pwr-hero__slogan { max-width: 100%; }
    .pwr-hero__title, .pwr-hero__sub { max-width: 100%; }

    /* Кадр во всю ширину — отрицательные поля гасят отступы колонки.
       Пропорция короче исходной 1073×1466: верхняя треть снимка — пустая
       чернота, она была подложкой под текст, а теперь текст стоит выше и она
       только гнала бы пустоту. Обрезка идёт сверху (`bottom`), поэтому в кадре
       остаются и девушка, и все четыре банки, а по горизонтали не срезается
       ничего — пакет протеина у левого края больше не режется, как это делал
       `cover` на узком экране. */
    .pwr-hero__media {
        display: block;
        margin: 6px -20px clamp(20px, 5vw, 28px);
        /* Высотой, а не `aspect-ratio`: при пропорции с потолком высоты браузер
           переносит ограничение и на ширину — блок съезжал в 489 px посреди
           768-пиксельного планшета. `94vw` — та же пропорция 1073×1010 для
           телефона, дальше вступает потолок по высоте экрана: брейкпойнт
           кончается на 781 px, и без него кадр забирал бы на планшете 720 px,
           уводя свойства и кнопку за пределы экрана. Потолок именно 68vh, а не
           меньше: обрезка идёт сверху, и на более низком кадре планшет срезал
           девушке голову, оставляя один торс. */
        height: min(94vw, 68vh);
        /* Градиент поверх кадра гасит обе кромки: собственная чернота снимка
           чуть теплее полотна `--pwr-bg`, и без растушёвки верх и низ блока
           читаются горизонтальными линиями поперёк экрана. */
        background:
            linear-gradient(180deg,
                var(--pwr-bg) 0%, rgba(11, 11, 13, 0) 14%,
                rgba(11, 11, 13, 0) 92%, var(--pwr-bg) 100%),
            url('/wp-content/uploads/2026/08/hero-mobile-20260908.webp')
            center bottom / cover no-repeat;
    }

    /* Четыре в ряд, как в макете. Сетка 2×2 забирала лишние ~70 px высоты и
       уводила кнопку за нижний край экрана. */
    .pwr-hero__props {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 100%;
    }
    .pwr-hero__prop { font-size: 11px; gap: 8px; }
    .pwr-hero__prop svg { width: 26px; height: 26px; flex: 0 0 26px; }

    /* Кнопка во всю ширину: на телефоне это главное действие экрана, и в
       макете она тоже растянута. */
    .pwr-hero__cta { display: flex; justify-content: center; }
}

/* === ВЫБЕРИ СВОЮ ЦЕЛЬ === */
/* Витринный слой поверх существующего дерева из 28 категорий, а не новая
   таксономия: плитки — просто ссылки на шесть уже живущих страниц. Их адреса
   и SEO не трогаются, план категорий остаётся закрытым. */
.pwr-goals {
    width: min(1290px, 100%);
    margin: clamp(40px, 6vw, 72px) auto;
    padding: 0 20px;
}
.pwr-goals__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; margin-bottom: clamp(18px, 2.4vw, 28px);
}
.pwr-goals__title {
    margin: 0 !important;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
    color: var(--pwr-heading);
}
.pwr-goals__all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; white-space: nowrap;
    color: var(--pwr-accent);
}
.pwr-goals__grid {
    display: grid; gap: clamp(12px, 1.4vw, 18px);
    grid-template-columns: repeat(3, 1fr);
}
.pwr-goal {
    display: flex; flex-direction: column;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pwr-goal:hover {
    border-color: var(--pwr-accent);
    transform: translateY(-2px);
    box-shadow: var(--pwr-shadow-2);
}
/* Пропорция задана контейнером, а не файлом: плитки вырезаны из общего листа
   и пришли разными (494x329 и 742x494). Пока не приедут отдельные рендеры,
   единый вид держит сетка, а не исходники. */
.pwr-goal__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.pwr-goal__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.pwr-goal__body {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px 18px;
}
.pwr-goal__name {
    font-size: clamp(16px, 1.5vw, 19px); font-weight: 700;
    color: var(--pwr-heading);
}
.pwr-goal__sub { font-size: 14px; color: var(--pwr-text); line-height: 1.4; }
.pwr-goal__count { font-size: 13px; color: var(--pwr-muted); margin-top: 2px; }

@media (max-width: 999px) { .pwr-goals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .pwr-goals__grid { grid-template-columns: 1fr; }
    .pwr-goals__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* === ХИТЫ ПРОДАЖ === */
/* Порядок задаёт не редактор, а фактические продажи на Wildberries:
   pwr-catalog-order.php пишет их в menu_order, и шорткод просто читает его.
   Ручной список пришлось бы поддерживать вручную и он бы устарел за месяц. */
.pwr-hits {
    width: min(1290px, 100%);
    margin: clamp(40px, 6vw, 72px) auto clamp(14px, 2vw, 24px);
    padding: 0 20px;
}
.pwr-hits__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}
.pwr-hits__title {
    margin: 0 !important;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
    color: var(--pwr-heading);
}
.pwr-hits__all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--pwr-accent);
}

/* === ПОЛОСА ЦИФР === */
/* Все четыре числа проверяемы и подписаны источником. «339 позиций» и
   «8 000 заказов в день», стоявшие в первом варианте, сняты: первое — число
   карточек в кабинете при 123 товарах на витрине, второе — упаковки, а не
   заказы, и округление вверх от 7 900. За рекламное утверждение отвечает
   рекламодатель, поэтому на витрине только то, что мы можем пересчитать. */
.pwr-numbers {
    width: min(1290px, 100%);
    margin: clamp(44px, 6vw, 80px) auto;
    padding: clamp(24px, 3vw, 36px) 20px;
    border-top: 1px solid var(--pwr-line);
    border-bottom: 1px solid var(--pwr-line);
}
.pwr-numbers__grid {
    display: grid; gap: clamp(20px, 3vw, 40px);
    grid-template-columns: repeat(4, 1fr);
}
.pwr-number { display: flex; flex-direction: column; gap: 6px; }
.pwr-number__value {
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1;
    color: var(--pwr-accent); letter-spacing: -.02em;
}
.pwr-number__label {
    font-size: 14px; line-height: 1.45; color: var(--pwr-text);
}

@media (max-width: 900px) { .pwr-numbers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pwr-numbers__grid { grid-template-columns: 1fr; } }

/* === ПОЛОСА ПРЕИМУЩЕСТВ === */
/* Одна плашка с разделителями, а не четыре карточки. Причина не в макете как
   таковом: строкой выше уже стоят шесть отдельных плиток категорий, и второй
   ряд обособленных карточек читается как продолжение той же сетки — страница
   рассыпается на равнозначные кубики. Единая полоса даёт ей опору.
   «Поддержка 24/7» из макета заменена реальным режимом со страницы контактов:
   пн–пт 10:00–19:00. */
.pwr-advantages {
    list-style: none; margin: clamp(34px, 4vw, 52px) auto; padding: 0;
    width: min(1290px, 100%);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--pwr-line); border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
    overflow: hidden;
}
/* Разделители — границей ячейки, а не отдельным элементом: так они исчезают
   сами при переносе на две колонки и не оставляют висящей линии с краю. */
.pwr-adv + .pwr-adv { border-left: 1px solid var(--pwr-line); }
.pwr-adv {
    display: flex; align-items: center; gap: 16px;
    padding: 22px clamp(16px, 1.6vw, 24px);
}
/* Иконка выровнена по центру ВСЕГО текстового блока, а не по первой строке:
   при двух строках подписи она иначе висит у заголовка и тянет взгляд вверх. */
.pwr-adv__ico { flex: 0 0 38px; color: var(--pwr-accent); display: grid; place-items: center; }
.pwr-adv__ico svg { width: 38px; height: 38px; display: block; }
.pwr-adv__body { display: flex; flex-direction: column; gap: 4px; }
.pwr-adv__title { font-size: 15.5px; font-weight: 700; color: var(--pwr-heading); line-height: 1.25; }
.pwr-adv__text { font-size: 13px; line-height: 1.4; color: var(--pwr-text); }

@media (max-width: 980px) {
    .pwr-advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pwr-adv + .pwr-adv { border-left: none; }
    .pwr-adv:nth-child(even) { border-left: 1px solid var(--pwr-line); }
    .pwr-adv:nth-child(n + 3) { border-top: 1px solid var(--pwr-line); }
}
@media (max-width: 560px) {
    .pwr-advantages { grid-template-columns: 1fr; }
    .pwr-adv:nth-child(even) { border-left: none; }
    .pwr-adv + .pwr-adv { border-top: 1px solid var(--pwr-line); }
}


/* === ХИТЫ: МОЛНИЯ И ВКЛАДКИ === */
.pwr-hits__title { display: inline-flex; align-items: center; gap: 10px; }
.pwr-hits__bolt { width: 26px; height: 26px; color: var(--pwr-accent); flex: 0 0 26px; }
.pwr-hits__tabs { display: inline-flex; gap: 8px; margin-left: auto; margin-right: 20px; }
.pwr-hits__tab {
    padding: 8px 16px; border-radius: var(--pwr-radius-pill);
    border: 1px solid var(--pwr-line); background: var(--pwr-surface-2);
    font-size: 14px; font-weight: 600; color: var(--pwr-text); text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.pwr-hits__tab:hover { border-color: var(--pwr-accent); color: var(--pwr-accent); }
.pwr-hits__tab.is-active {
    background: var(--pwr-accent); border-color: var(--pwr-accent);
    color: var(--pwr-on-accent);
}
@media (max-width: 700px) {
    .pwr-hits__head { flex-wrap: wrap; }
    .pwr-hits__tabs { margin: 10px 0 0; width: 100%; }
}


/* === КАТЕГОРИИ === */
/* Банка настоящая — тот самый пакшот, что стоит в каталоге, с вырезанным фоном
   и запечённым контровым светом. Рекламные плитки из общего листа отсюда
   убраны: они были вчетверо мельче нужного, тянули за собой чужую композицию
   и не совпадали с тем, что человек увидит, перейдя по ссылке.
   Банка справа и вровень со стрелкой, текст сверху слева — как в референсе. */
.pwr-goals { width: min(1290px, 100%); margin: clamp(34px, 5vw, 60px) auto; padding: 0 20px; }
.pwr-goals__grid {
    display: grid; gap: clamp(10px, 1.2vw, 16px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pwr-goal {
    position: relative; display: flex; flex-direction: column;
    min-height: 250px; padding: 18px 16px 16px;
    border: 1px solid var(--pwr-line); border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
    text-decoration: none; overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pwr-goal:hover { border-color: var(--pwr-accent); transform: translateY(-3px); box-shadow: var(--pwr-shadow-2); }

.pwr-goal__text { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 2; }
.pwr-goal__name { font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; line-height: 1.2; color: var(--pwr-heading); }
.pwr-goal__sub { font-size: 12.5px; line-height: 1.35; color: var(--pwr-text); }

/* Банка видна ЦЕЛИКОМ и работает притушенным фоном плитки, а не картинкой в
   рамке и не обрезком. Обрезанная банка читалась как ошибка вёрстки: глаз
   достраивает предмет и спотыкается о срез.
   Размер задан высотой, а не шириной: пакшот лежит в квадратном холсте, и при
   задании по ширине высокая бутылка хлорофилла и низкая банка креатина
   выглядели бы разными по массе. */
.pwr-goal__jar {
    position: absolute; right: 10px; top: 12px; bottom: 12px;
    height: calc(100% - 24px); width: auto; max-width: 88%;
    object-fit: contain; object-position: right center;
    pointer-events: none; opacity: .72;
    transition: transform .3s ease, opacity .3s ease;
}
.pwr-goal:hover .pwr-goal__jar { opacity: .9; }
/* Вуаль поверх банки: она затемняет кадр целиком, а слева уплотняется под
   текст. Одним градиентом, а не двумя слоями — меньше кода и нечему разъехаться. */
.pwr-goal::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        var(--pwr-surface) 0%, rgba(20, 20, 23, .72) 38%, rgba(20, 20, 23, .12) 100%);
    z-index: 1; pointer-events: none;
}
.pwr-goal:hover .pwr-goal__jar { transform: scale(1.05); }

.pwr-goal__foot { display: flex; align-items: center; gap: 9px; margin-top: auto; position: relative; z-index: 2; }
.pwr-goal__arrow {
    display: grid; place-items: center; flex: 0 0 36px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--pwr-accent); color: var(--pwr-on-accent);
    transition: transform .2s ease, background-color .2s ease;
}
.pwr-goal__arrow svg { width: 18px; height: 18px; }
.pwr-goal:hover .pwr-goal__arrow { background: var(--pwr-accent-hover); transform: translateX(3px); }
.pwr-goal__count { font-size: 12.5px; color: var(--pwr-muted); }

@media (max-width: 1180px) { .pwr-goals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* На телефоне вуаль разворачивается сверху вниз. Приём с банкой-фоном держится
   на ширине: в шестиколоночной сетке пакшот стоит справа, подпись слева, и
   наклонная вуаль их разводит. В двух колонках плитка — 170 px, банка занимает
   её целиком, и «Ежедневная поддержка организма» ложилась прямо на этикетку.
   Вертикальный градиент даёт тексту плотный верх, банке — низ плитки; порядок
   получается тот же, что в макете (название, подпись, снимок, счётчик).
   Вынуть банку из-под текста отдельным блоком уже пробовали — не годится:
   пакшоты тёмные и на прозрачном фоне, вне вуали банка на тёмной плитке просто
   не читается. */
@media (max-width: 700px) {
    .pwr-goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pwr-goal::before {
        background: linear-gradient(180deg,
            var(--pwr-surface) 0%, rgba(20, 20, 23, .94) 30%,
            rgba(20, 20, 23, .55) 62%, rgba(20, 20, 23, .3) 100%);
    }
    .pwr-goal__jar { top: auto; bottom: 10px; height: 60%; max-width: 80%; opacity: .85; }
}

/* === ЦИФРЫ === */
/* Иконка слева от текста, а не над ним: сверху она растягивала полосу в высоту
   и превращала четыре факта в четыре плитки. Значок посажен в залитый кружок —
   тонкий контур на пустом фоне выглядел незаконченным. */
.pwr-number { flex-direction: row; align-items: center; gap: 14px; }
.pwr-number__ico {
    flex: 0 0 46px; width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--pwr-accent-wash);
    color: var(--pwr-accent);
}
.pwr-number__ico svg { width: 24px; height: 24px; display: block; }
.pwr-number__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pwr-number__value { font-size: clamp(21px, 2.1vw, 27px); }
.pwr-number__label { font-size: 13px; }