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



/* === ШАПКА === */
header#header.ct-header { background: var(--pwr-bg) !important; }
.ct-header [data-row="middle"] {
    background-color: var(--pwr-bg) !important;
    border-bottom: 1px solid var(--pwr-line);
}
.ct-header .ct-menu-link { color: var(--pwr-heading) !important; font-weight: 600; }
.ct-header .ct-menu-link:hover { color: var(--pwr-accent) !important; }

/* Тёмные панели меню: выпадающий список и мобильное меню.
   Правило выше красит ссылки шапки под светлый фон — но панель выпадающего
   меню осталась тёмно-синей (#192A3D), а мобильная почти чёрной, с прошлой,
   тёмной шапки. Тёмный текст на них не читается вовсе: контраст 1,09 и 1,03
   при норме 4,5. Селектор .ct-panel нужен отдельно — мобильная панель сама
   несёт класс .ct-header и потому попадает под общее правило.
   ⚠️ При переходе витрины на тёмную тему это место надо пересмотреть: обе
   панели станут «тёмным на тёмном», и правило из спасательного превратится
   в лишнее. Задача Фазы 3. */
.ct-header .sub-menu .ct-menu-link,
.ct-panel .ct-menu-link { color: #fff !important; }
.ct-header .sub-menu .ct-menu-link:hover,
.ct-panel .ct-menu-link:hover { color: var(--pwr-accent) !important; }
.ct-header .sub-menu svg,
.ct-panel svg { fill: #fff !important; color: #fff !important; }
.ct-header [data-row="middle"] svg {
    fill: var(--pwr-heading) !important;
    color: var(--pwr-heading) !important;
}

.site-logo-container img, img.default-logo {
    max-height: 92px !important; width: auto !important; height: auto !important;
}

/* шапка: логотип и меню по одной центральной линии */
.ct-header [data-row="middle"] > .ct-container {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; min-height: 104px;
}
.ct-header [data-row="middle"] [data-column],
.ct-header [data-row="middle"] [data-items] { display: flex !important; align-items: center !important; }
.site-branding { display: flex !important; align-items: center !important; margin: 0 !important; padding: 6px 0 !important; }
.site-logo-container { display: flex !important; align-items: center !important; margin: 0 !important; }
.site-logo-container a { display: flex !important; align-items: center !important; }
.site-logo-container img, img.default-logo { display: block !important; margin: 0 !important; }
.ct-header [data-row="middle"] nav.menu-container { display: flex !important; align-items: center !important; }
.ct-header [data-row="middle"] ul.menu { display: flex !important; align-items: center !important; margin: 0 !important; }

/* логотип и текстовое название дублируются — оставляем логотип */
.site-branding .site-title-container { display: none !important; }


/* === КОРЗИНА В ШАПКЕ === */
[data-header*="type-1"] [data-id="cart"] .ct-cart-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--pwr-radius-pill);
    background-color: var(--pwr-accent);
    --theme-icon-color: var(--pwr-on-accent);
    --theme-link-initial-color: var(--pwr-on-accent);
    --theme-link-hover-color: var(--pwr-on-accent);
    color: var(--pwr-on-accent);
    transition: background-color .2s ease;
}
[data-header*="type-1"] [data-id="cart"] .ct-cart-item:hover { background-color: var(--pwr-accent-hover); }
[data-header*="type-1"] [data-id="cart"] .ct-cart-item .ct-label,
[data-header*="type-1"] [data-id="cart"] .ct-cart-item .ct-amount,
[data-header*="type-1"] [data-id="cart"] .ct-cart-item .woocommerce-Price-amount,
[data-header*="type-1"] [data-id="cart"] .ct-cart-item bdi { color: var(--pwr-on-accent); }
@media (max-width: 999.98px) {
    [data-header*="type-1"] [data-id="cart"] .ct-cart-item { padding: 7px 12px; gap: 6px; }
}


/* === КНОПКИ === */
/* `.wp-block-button__link` добавлен 31.08: кнопка «Весь каталог» осталась синей,
   потому что это блочная кнопка ядра, и под прежний список селекторов она не
   попадала — цвет ей давала палитра темы. */
/* Список пришлось расширять дважды, и это не случайность: WooCommerce рисует
   кнопки разными классами в разных состояниях, а Blocksy красит всё, что не
   перехвачено, синим из своей палитры. Так синими оказались сначала «Весь
   каталог» (блочная кнопка ядра), потом «Просмотр корзины» — она появляется
   только ПОСЛЕ добавления товара, поэтому на статичной странице её не видно.
   `.added_to_cart` и `.wc-forward` закрывают этот класс состояний. */
.wp-block-search__button, .button, button, input[type=submit],
.wp-block-button__link, .wc-block-components-button,
.single_add_to_cart_button, a.button.add_to_cart_button,
a.added_to_cart, a.button.wc-forward, .checkout-button, .woocommerce-button {
    background-color: var(--pwr-accent) !important;
    border-color: var(--pwr-accent) !important;
    color: var(--pwr-on-accent) !important;
    border-radius: 8px !important; font-weight: 600 !important;
}
.wp-block-search__button:hover, .button:hover, .wp-block-button__link:hover,
.single_add_to_cart_button:hover, a.added_to_cart:hover, a.button.wc-forward:hover,
.checkout-button:hover { background-color: var(--pwr-accent-hover) !important; }

/* Поле поиска на баннере. Фон и цвет заданы явно: без них поле сливается с
   тёмной картинкой обложки, а плейсхолдер становится нечитаемым. */
.wp-block-search__input {
    border-radius: var(--pwr-radius-sm) !important; border: 2px solid var(--pwr-surface) !important;
    padding: 15px 18px !important; font-size: 16px !important;
    background: var(--pwr-surface) !important; color: var(--pwr-heading) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18) !important;
}
.wp-block-search__input::placeholder { color: var(--pwr-muted) !important; opacity: 1 !important; }
.wp-block-cover .wp-block-search__input { color: var(--pwr-heading) !important; }
.wp-block-search .wp-block-search__inside-wrapper { gap: 10px; }


/* === ПОДВАЛ === */
.ct-footer { background: var(--pwr-footer-bg) !important; }
.ct-footer, .ct-footer p { color: var(--pwr-footer-text) !important; }
.ct-footer h3 { color: var(--pwr-footer-heading) !important; }
.ct-footer a { color: var(--pwr-accent) !important; }
/* «Оформление разработал CreativeThemes» — реклама разработчика темы в подвале магазина */
.ct-footer [data-id="copyright"] a[href*="creativethemes"] { display: none !important; }


/* === МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ === */
/* логотип не помещался: max-height 92px при шапке 70px */
@media (max-width: 999.98px) {
    .site-logo-container img, img.default-logo { max-height: 46px !important; }
}
/* поиск на баннере: в одну колонку, иначе плейсхолдер обрезается */
@media (max-width: 689.98px) {
    .wp-block-search .wp-block-search__inside-wrapper { flex-wrap: wrap; }
    .wp-block-search__input { flex: 1 1 100% !important; }
    .wp-block-search__button { flex: 1 1 100% !important; margin-left: 0 !important; }
}

/* === ВЕРХНЯЯ УТИЛИТАРНАЯ ПОЛОСА === */
.pwr-utility {
    background: var(--pwr-surface-2);
    border-bottom: 1px solid var(--pwr-line);
    font-size: 13px;
}
.pwr-utility__inner {
    width: min(1290px, 100%); margin: 0 auto; padding: 9px 20px;
    display: flex; gap: 28px; flex-wrap: wrap;
    color: var(--pwr-text);
}
.pwr-utility__item { display: inline-flex; align-items: center; gap: 8px; }
/* Иконка красится акцентом через currentColor у svg, а текст остаётся
   спокойным: подкрашенный текст на утилитарной полосе перетягивает внимание
   с товара, ради которого человек пришёл. */
.pwr-utility__item svg {
    width: 17px; height: 17px; flex: 0 0 17px;
    color: var(--pwr-accent);
}
/* На телефоне из полосы остаётся одна строка — про бесплатную доставку.
   Решение владельца 08.09: «Официальный магазин PWR» и «Возврат 90 дней» —
   доверие, а не польза, и на узком экране они переносились в два ряда, отжимая
   первый экран вниз ради того, что человек и так прочтёт в подвале и на
   странице гарантии. На десктопе полоса широкая, все три помещаются в строку
   и остаются.
   `n+2`, а не перечисление: пунктов может стать больше, и правило по позиции
   переживёт добавление, а список из двух номеров — нет. Ссылки внизу полосы
   селектор не задевает: это `nav`, а не `.pwr-utility__item`. */
@media (max-width: 689.98px) {
    .pwr-utility__inner { gap: 14px; justify-content: center; font-size: 12px; }
    .pwr-utility__item:nth-child(n+2) { display: none; }
}

/* Вторичные разделы уезжают в верхнюю полосу, как в макете: главная строка
   освобождается под логотип, каталог, поиск и корзину.
   В самом меню пункты ОСТАЮТСЯ и только прячутся на десктопе — мобильная
   панель собирается из того же меню, и удаление лишило бы телефон четырёх
   разделов ради вида на большом экране. */
.pwr-utility__links { display: none; margin-left: auto; gap: 22px; }
.pwr-utility__links a { color: var(--pwr-text); font-weight: 500; }
.pwr-utility__links a:hover { color: var(--pwr-accent); }

@media (min-width: 1000px) {
    .pwr-utility__links { display: inline-flex; }
    /* Прячем всё, кроме первого пункта — «Каталог». Он остаётся в главной
       строке и становится кнопкой. Селектор по позиции, а не по классу:
       класса на пункте нет, и правило «всё, кроме .pwr-keep-desktop» спрятало
       бы «Каталог» тоже — поймано до выкладки. */
    .ct-header [data-row="middle"] .menu > li.menu-item:not(:first-child) { display: none; }

    /* «Каталог» — кнопка, как в макете. */
    .ct-header [data-row="middle"] .menu > li.menu-item:first-child > .ct-menu-link {
        background: var(--pwr-accent);
        color: var(--pwr-on-accent) !important;
        padding: 11px 22px;
        border-radius: var(--pwr-radius-sm);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        transition: background-color .2s ease;
    }
    .ct-header [data-row="middle"] .menu > li.menu-item:first-child > .ct-menu-link:hover {
        background: var(--pwr-accent-hover);
        color: var(--pwr-on-accent) !important;
    }
}

/* === СВОЯ ГЛАВНАЯ СТРОКА ШАПКИ === */
/* Своя, потому что в макете поиск — широкое поле, а Blocksy умеет только
   кнопку с окном и хука для вставки своего элемента в ряд не даёт.
   На мобильном остаётся шапка темы: там живут бургер, выезжающая панель и
   корзина-шторка, а поле поиска всё равно не помещается. */
.pwr-head { display: none; background: var(--pwr-bg); border-bottom: 1px solid var(--pwr-line); }
.pwr-head__inner {
    width: min(1290px, 100%); margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
}
.pwr-head__logo { display: flex; align-items: center; flex: 0 0 auto; }
.pwr-head__logo-img { display: block; height: 52px; width: auto; }

.pwr-head__catalog {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    padding: 12px 22px; border-radius: var(--pwr-radius-sm);
    background: var(--pwr-accent); color: var(--pwr-on-accent) !important;
    font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    font-size: 14px; text-decoration: none;
    transition: background-color .2s ease;
}
.pwr-head__catalog:hover { background: var(--pwr-accent-hover); }
.pwr-head__catalog svg { width: 17px; height: 17px; }

/* Поле занимает всё свободное место: это главный способ найти товар в
   каталоге на 123 позиции, и в макете оно центральное по площади. */
.pwr-head__search { position: relative; flex: 1 1 auto; min-width: 0; }
.pwr-head__search input[type="search"] {
    width: 100%; padding: 13px 46px 13px 18px;
    border: 1px solid var(--pwr-line); border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface-2); color: var(--pwr-heading);
    font-size: 15px; line-height: 1.2;
}
.pwr-head__search input[type="search"]::placeholder { color: var(--pwr-muted); }
.pwr-head__search input[type="search"]:focus {
    outline: none; border-color: var(--pwr-accent);
    box-shadow: 0 0 0 3px var(--pwr-accent-soft);
}
.pwr-head__search button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center;
    background: transparent !important; border: none !important; padding: 0 !important;
    color: var(--pwr-text) !important; cursor: pointer;
}
.pwr-head__search button:hover { color: var(--pwr-accent) !important; }
.pwr-head__search button svg { width: 19px; height: 19px; }

.pwr-head__cart {
    display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
    padding: 9px 18px 9px 14px; border-radius: var(--pwr-radius-pill);
    background: var(--pwr-surface-2); border: 1px solid var(--pwr-line);
    color: var(--pwr-heading) !important; text-decoration: none;
    transition: border-color .2s ease;
}
.pwr-head__cart:hover { border-color: var(--pwr-accent); }
.pwr-head__cart-ico { position: relative; display: grid; place-items: center; color: var(--pwr-accent); }
.pwr-head__cart-ico svg { width: 23px; height: 23px; }
.pwr-head__cart-count {
    position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px;
    display: grid; place-items: center; padding: 0 5px;
    border-radius: 9px; background: var(--pwr-accent); color: var(--pwr-on-accent);
    font-size: 11px; font-weight: 700; line-height: 1;
}
/* Атрибут hidden прячет элемент стилем браузера, а у правила с классом выше
   специфичность — поэтому display:grid его перебивал, и на пустой корзине
   висел бейдж «0». Скрытие приходится задавать явно. */
.pwr-head__cart-count[hidden] { display: none; }
.pwr-head__cart-text { display: flex; flex-direction: column; line-height: 1.2; }
.pwr-head__cart-label { font-size: 12px; color: var(--pwr-muted); }
.pwr-head__cart-sum { font-size: 15px; font-weight: 700; }
.pwr-head__cart-sum:empty::before { content: "0 ₽"; }

@media (min-width: 1000px) {
    .pwr-head { display: block; }
    /* Строка темы прячется целиком: логотип, меню, поиск и корзина в ней
       дублировали бы нашу. Мобильная версия ниже 1000px остаётся её. */
    .ct-header [data-row="middle"] { display: none !important; }
}

/* === ПОДВАЛ: БРЕНД, РАЗДЕЛЫ, КОНТАКТЫ === */
/* Встаёт перед списком категорий и соцсетями, которые печатают mu-плагины.
   Телефон и режим взяты со страницы контактов: в макете стояли «8 800» и
   «24/7», которых у нас нет. */
.pwr-foot { border-top: 1px solid var(--pwr-line); background: var(--pwr-bg); }
.pwr-foot__inner {
    width: min(1290px, 100%); margin: 0 auto; padding: 44px 25px 30px;
    display: grid; gap: 32px 40px;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.pwr-foot__brand { display: flex; flex-direction: column; gap: 16px; }
.pwr-foot__logo-img { display: block; height: 44px; width: auto; }
.pwr-foot__about { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pwr-text); max-width: 38ch; }
.pwr-foot__col { display: flex; flex-direction: column; gap: 10px; }
.pwr-foot__title {
    margin: 0 0 4px !important; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--pwr-heading);
}
.pwr-foot__col a { color: var(--pwr-text); font-size: 13.5px; text-decoration: none; }
.pwr-foot__col a:hover { color: var(--pwr-accent); }
.pwr-foot__phone { font-size: 17px !important; font-weight: 700; color: var(--pwr-heading) !important; }
.pwr-foot__phone:hover { color: var(--pwr-accent) !important; }
.pwr-foot__hours { font-size: 13px; color: var(--pwr-muted); }

@media (max-width: 980px) { .pwr-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pwr-foot__inner { grid-template-columns: 1fr; gap: 26px; } }

/* Соцсети внутри брендовой колонки подвала, а не отдельной строкой. */
.pwr-foot__social { margin-top: 4px; }
.pwr-foot__social .pwr-social__list { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pwr-foot__social .pwr-social__note { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: var(--pwr-muted); }

/* Копирайт — строка внутри колонки контактов, а не отдельный блок подвала. */
.pwr-foot__legal { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--pwr-muted); }
/* Строка копирайта самой темы скрыта: текст переехал выше, а удалять её
   нечем — значение подставляет фильтр в pwr-product-trust. */
.ct-footer [data-row="bottom"], .ct-footer-copyright { display: none !important; }

/* === КАТЕГОРИИ ВНУТРИ КОЛОНКИ ПОДВАЛА === */
/* Список стоит в колонке «Информация», а не строкой во всю ширину: так он не
   занимает экран и не читается как отдельный раздел сайта. Все 28 ссылок
   остаются в разметке — перелинковка не меняется, свёрнут только показ. */
.pwr-cats-toggle { position: absolute; opacity: 0; pointer-events: none; }
.pwr-cats-label {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--pwr-text);
}
.pwr-cats-label:hover { color: var(--pwr-accent); }
.pwr-cats-label svg { width: 14px; height: 14px; transition: transform .3s ease; }
.pwr-cats-toggle:checked ~ .pwr-cats-label svg { transform: rotate(180deg); }
.pwr-foot__cats { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.pwr-cats-toggle:checked ~ .pwr-foot__cats { max-height: 1600px; }
/* Внутри колонки список идёт одним столбцом, а не сеткой в две колонки. */
.pwr-foot__cats .pwr-footer-cats { border: none; padding: 0; }
.pwr-foot__cats .pwr-footer-cats__inner {
    max-width: none; margin: 10px 0 0; padding: 0 !important;
    display: block;
}
.pwr-foot__cats .pwr-cat-nav__title { font-size: 12px; margin: 12px 0 6px; opacity: .7; }
.pwr-foot__cats .pwr-cat-nav__list { display: flex; flex-wrap: wrap; gap: 6px; }
.pwr-foot__cats .pwr-cat-nav__list a { font-size: 12px !important; padding: 4px 9px !important; }