/* ============================================
   EK Navigation — глобальные кнопки навигации.
   Loaded by easybuy_ek_home_assets() на всех EK-страницах.
   Логика — assets/js/ek-nav.js.
   ============================================ */

/* ─── Кнопка «Назад» (inline над крошками) ───────────────── */
.ek-page .ek-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;   /* PR VISUAL-FIX-1: 40 → 32 (40px тяжелил рядом с 13px крошками) */
    height: 32px;
    flex: 0 0 auto;
    background: var(--ek-bg-secondary);
    border: 0.5px solid var(--ek-border);
    border-radius: 980px;
    color: var(--ek-text);
    text-decoration: none;
    margin: 0 0 16px 0; /* standalone (404/search/cart-empty); в .ek-crumbs-row обнуляется */
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.16s ease-out;
}
.ek-page .ek-back-button:hover {
    background: var(--ek-text);
    color: #FFFFFF;
}
.ek-page .ek-back-button:active {
    transform: scale(0.94); /* emil: press-feedback */
}
.ek-page .ek-back-button:focus-visible {
    outline: 2px solid var(--ek-text);
    outline-offset: 2px;
}
.ek-page .ek-back-button svg {
    display: block;
    width: 16px;   /* PR VISUAL-FIX-1: пропорционально 18 → 16 */
    height: 16px;
}

/* ─── Ряд «Назад + крошки» (PR VISUAL-FIX-1) ──────────────────
   Стрелка слева, крошки справа, по центру по вертикали. Вертикальный
   ритм (24px над / 16px под) перенесён с крошек на обёртку. */
.ek-page .ek-crumbs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0 16px;
}
.ek-page .ek-crumbs-row .ek-back-button {
    margin: 0;
}
.ek-page .ek-crumbs-row .ek-breadcrumbs,
.ek-page .ek-crumbs-row .woocommerce-breadcrumb {
    padding: 0;
    margin: 0;
}

/* ─── Tooltip на иконках карточки (PR VISUAL-FIX-1) ───────────
   Чистый CSS через существующий aria-label (без плагинов). Появляется
   ПОД иконкой: иконки стоят у верхнего края карточки, а в каруселях
   (popular-now) .owl-stage-outer{overflow:hidden} обрезал бы tooltip сверху. */
.ek-page .ek-pcard-iconbtn {
    position: relative;
}
/* Пузырь растёт ВЛЕВО от правого края кнопки (правка 2026-09-02).
   Было left:50% + translateX(-50%) — рост в обе стороны от центра кнопки.
   Блок иконок прижат к правому краю карточки: у правой кнопки (сравнение)
   до края остаётся 12px + половина кнопки = 34px, а половина пузыря
   «Добавить к сравнению» — 79px. Отсюда стабильный вылет на 44,6px за
   карточку на КАЖДОЙ карточке, а у правой колонки — ещё и за сетку
   (на 390 — за экран, где его срезал html{overflow-x:hidden}).
   Центрирование шириной не спасти: чтобы вписаться на карточке 194px,
   пузырь должен быть уже 57px, а это не вмещает ни одну из подписей.
   Справа места нет по определению, слева — вся ширина карточки,
   поэтому привязываемся к правому краю кнопки и растём влево.

   max-width — страховка на будущее: сегодня «Добавить к сравнению»
   это 158,1px и умещается в строку, но переименование подписи или
   локализация иначе сломали бы вёрстку молча (ровно этим уже отмечен
   тултип шапки, :229). С ограничением подпись перенесётся на вторую
   строку вместо выезда за карточку — для этого и white-space: normal. */
.ek-page .ek-pcard-iconbtn::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    transform: translateY(-4px) scale(0.97);
    transform-origin: top right;
    background: var(--ek-bg-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    padding: 6px 10px;
    border-radius: var(--ek-radius-sm);
    white-space: normal;
    width: max-content;
    max-width: 160px;
    text-align: right;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Показ только там, где есть настоящее наведение (правка 2026-09-02).
   :focus-visible раньше лежал СНАРУЖИ этого медиазапроса, поэтому на
   телефоне подсказка всплывала по тапу: тап ставит фокус на кнопку.
   Теперь оба состояния закрыты одним гейтом. Доступность не страдает:
   на десктопе обход с клавиатуры по-прежнему показывает подпись,
   а на тач-устройстве её роль выполняет сам aria-label. */
@media (hover: hover) {
    .ek-page .ek-pcard-iconbtn:hover::after,
    .ek-page .ek-pcard-iconbtn:focus-visible::after {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Одновременно показываем только одну подпись. Иначе при обходе
       с клавиатуры (фокус на одной кнопке) и наведении мышью на соседнюю
       видны сразу два пузыря, и они перекрывают друг друга: обе подписи
       прибиты к правому краю своей кнопки, а кнопки стоят в 50px.
       Пока курсор над блоком иконок, подпись ненаведённой кнопки гасим. */
    .ek-page .ek-pcard-actions:hover .ek-pcard-iconbtn:not(:hover)::after {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ek-page .ek-back-button {
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .ek-page .ek-back-button:active {
        transform: none;
    }
    /* Сдвиг translateX(-50%) убран вместе с центрированием: пузырь
       теперь прибит правым краем к кнопке (:67), двигать его не нужно. */
    .ek-page .ek-pcard-iconbtn::after {
        transition: opacity 0.12s ease;
        transform: none;
    }
    .ek-page .ek-pcard-iconbtn:hover::after,
    .ek-page .ek-pcard-iconbtn:focus-visible::after {
        transform: none;
    }
}

/* ─── Кнопка «Наверх» (floating bottom-right) ────────────── */
.ek-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ek-text);
    color: #FFFFFF;
    border: 0;
    border-radius: 980px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
    z-index: 100;
}
.ek-scroll-top svg {
    display: block;
}
.ek-scroll-top:hover {
    background: #000000;
}
.ek-scroll-top:focus-visible {
    outline: 2px solid var(--ek-text);
    outline-offset: 2px;
}
body.ek-scroll-top-visible .ek-scroll-top {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .ek-scroll-top {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ek-scroll-top {
        transition: opacity 0.15s ease;
        transform: none !important;
    }
}

/* ───── Кнопка «Каталог» и выпадающая панель разделов (десктоп) ─────
 * Заменила постоянную полосу .ek-hcats (ТЗ 2026-09). Панель открывается
 * кликом (ek-nav.js), скрыта ≤1024px — там каталог живёт в бургер-меню.
 * Только существующие токены, новых цветов нет.
 */
.ek-page .ek-catalog { flex-shrink: 0; }
.ek-page .ek-catalog-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ek-radius-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.ek-page .ek-catalog-trigger:hover { background: rgba(255, 255, 255, 0.16); }
.ek-page .ek-catalog-trigger-ico { flex: none; opacity: 0.9; }
.ek-page .ek-catalog-trigger-chev { flex: none; opacity: 0.8; transition: transform .18s ease; }
.ek-page .ek-catalog[data-open="true"] .ek-catalog-trigger-chev { transform: rotate(180deg); }

/* Панель: полноширинный дроп под шапкой. Абсолют относительно .ek-header
   (у неё position:sticky), поэтому top:100% = нижняя граница шапки. */
.ek-page .ek-catalog-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    background: var(--ek-bg);
    border-top: 0.5px solid var(--ek-border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
    max-height: calc(100vh - var(--ek-header-total));
    overflow-y: auto;
}
.ek-page .ek-catalog-panel[hidden] { display: none; }
.ek-page .ek-catalog-panel-inner { padding: 20px 0 28px; }
.ek-page .ek-catalog-panel-head { margin-bottom: 14px; }
.ek-page .ek-catalog-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ek-text);
    text-decoration: none;
}
.ek-page .ek-catalog-all .ek-chev { transition: transform .18s ease; display: inline-block; }
.ek-page .ek-catalog-all:hover .ek-chev { transform: translateX(3px); }

.ek-page .ek-catalog-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px 28px;
}
.ek-page .ek-catalog-col { min-width: 0; }
.ek-page .ek-catalog-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 0.5px solid var(--ek-border);
    color: var(--ek-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.ek-page .ek-catalog-col-head:hover .ek-catalog-col-name { color: var(--ek-text-muted); }
.ek-page .ek-catalog-col-ico {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ek-bg-secondary);
    border-radius: var(--ek-radius-sm);
    color: var(--ek-text-muted);
    overflow: hidden;
}
.ek-page .ek-catalog-col-img { width: 28px; height: 28px; object-fit: contain; }
.ek-page .ek-catalog-col-name { min-width: 0; }
.ek-page .ek-catalog-col-sub { list-style: none; margin: 0; padding: 0; }
.ek-page .ek-catalog-col-sub a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    color: var(--ek-text-muted);
    text-decoration: none;
    transition: color .12s ease;
}
.ek-page .ek-catalog-col-sub a:hover { color: var(--ek-text); }
.ek-page .ek-catalog-col-all a { color: var(--ek-text); font-weight: 500; }

.ek-page .ek-catalog-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.ek-page .ek-catalog-panel a:focus-visible {
    outline: 2px solid var(--ek-text);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    /* На телефоне/планшете каталог живёт в бургер-меню — кнопку прячем. */
    .ek-page .ek-catalog { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ek-page .ek-catalog-trigger-chev,
    .ek-page .ek-catalog-all .ek-chev { transition: none; }
}

/* ─── Tooltip на иконках шапки (правка владельца, сентябрь 2026) ───
   Профиль, Сравнение, Избранное, Корзина: наведение ничего не показывало,
   значение иконки приходилось угадывать. Механика та же, что у карточки
   товара выше — attr(aria-label), без плагинов; aria-label уже проставлены.

   🔴 ПУЗЫРЬ ТЁМНЫЙ, А НЕ СВЕТЛЫЙ, ХОТЯ ШАПКА ТЁМНАЯ.
   Тултип появляется ПОД иконкой (замер на 1280 даёт y 56…80, шапка
   заканчивается на 64) — то есть над светлым контентом страницы. Светлый
   пузырь был бы белым на белом; тёмный читается на любом фоне и заодно
   единообразен с тултипами карточек товара. (Раньше здесь была белая полоса
   разделов .ek-hcats — её убрали, но вывод тот же.)

   Обрезки нет: ни у одного предка .ek-icon-btn нет overflow:hidden
   (проверено по всей цепочке до body). Запас у крайней правой иконки
   на 1280 — 14,6px, и он держится только потому, что самая короткая
   подпись «Корзина» оказалась крайней. ⚠️ Переименование подписи или
   локализация сломают это молча.

   Только с 1025px: на узких окнах кнопка корзины сама обрезана краем
   экрана (известный дефект, ek-home.css:1496-1507), и тултип уехал бы
   вслед за ней. На тач-устройствах не показывается — (hover: hover). */
@media (min-width: 1025px) {
    .ek-page .ek-icon-btn::after {
        content: attr(aria-label);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(-4px) scale(0.97);
        transform-origin: top center;
        background: var(--ek-bg-dark);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        padding: 6px 10px;
        border-radius: var(--ek-radius-sm);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        /* Выше шапки (50) и выше бейджа — иначе счётчик перекрыл бы подпись. */
        z-index: 60;
        transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
                    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
    }

    @media (hover: hover) {
        .ek-page .ek-icon-btn:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
    }

    .ek-page .ek-icon-btn:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    .ek-page .ek-icon-btn::after {
        transition: opacity 0.12s ease;
        transform: translateX(-50%);
    }
    .ek-page .ek-icon-btn:hover::after,
    .ek-page .ek-icon-btn:focus-visible::after {
        transform: translateX(-50%);
    }
}