/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.8 — Страница «Избранное» (/wishlist/) по дизайну Nick.
 *
 * Рендер из child theme/page-wishlist.php (через WP template hierarchy —
 * page-{slug}.php перебивает дефолтный Elementor-widget wd_wishlist).
 *
 * Структура:
 *   .kp-wl-page
 *     .kp-cat-crumbs               — крошки (стиль наследует от каталога)
 *     .kp-wl-head                  — kicker + H1 + плашка-счётчик + интро
 *       .kp-wl-kicker              — «Личный список»
 *       .kp-wl-title-row
 *         .kp-wl-title (H1)        — «ИЗБРАННОЕ»
 *         .kp-wl-count             — жёлтая плашка-счётчик «N товаров в списке»
 *       .kp-wl-intro               — текст про cookies + действия
 *     .kp-wl-actions               — «В корзину всё (N)» + «Очистить»
 *     .kp-wl-grid-sec > .kp-cat-grid.kp-wl-grid  — сетка наших карточек
 *     .kp-wl-empty                 — пустое состояние (сердце в круге + текст + кнопка)
 *
 * Скоупинг: всё под body.kp-body / .kp-wl-page. Никаких голых .kp-* без обёртки.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── 1. Контейнер страницы ───────── */

body.kp-body .kp-wl-page {
    padding-bottom: 80px;
}


/* ───────── 1a. Перебивка [hidden] для display:flex/grid элементов ─────────
 *
 * Причина: UA-стайл `[hidden] { display: none }` имеет специфичность 0,0,1,0.
 * У нас .kp-wl-count (плашка-счётчик) задана `display: inline-flex` (0,0,2,1),
 * у .kp-wl-empty-icon — `display: grid` и т.д. Наши display-правила
 * перебивают UA `[hidden]`, и атрибут html `hidden` визуально игнорируется.
 *
 * Проявление багов:
 *   BAG 2 — при count>0 пустое состояние и грид рендерятся одновременно
 *           (хотя <section class="kp-wl-empty" hidden> в HTML корректный);
 *   BAG 3 — после «Очистить» JS ставит plate.setAttribute('hidden',''),
 *           но плашка остаётся видна (display:inline-flex побеждает).
 *
 * Фикс: явное правило с теми же скоупами, но 100% перебивает любой наш display.
 * !important здесь оправдан — это override НАШИХ собственных более ранних
 * display-правил, не Woodmart'овых. */

body.kp-body .kp-wl-page [hidden],
body.kp-body .kp-wl-page[hidden] {
    display: none !important;
}


/* ───────── 2. Шапка: kicker + H1 + плашка-счётчик ───────── */

body.kp-body .kp-wl-head {
    padding-top: 24px;
    padding-bottom: 12px;
}

body.kp-body .kp-wl-kicker {
    font-size: 13px;
    letter-spacing:normal;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-3);
    margin-bottom: 14px;
}

body.kp-body .kp-wl-title-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

body.kp-body .kp-wl-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    font-weight: 800;
    letter-spacing:normal;
    color: var(--ink);
    margin: 0;
    flex: 0 0 auto;
}

/* Плашка-счётчик «N товаров в списке» — повторяет паттерн .kp-cat-head-count,
 * но в жёлтом (var(--yellow)) — это акцент дизайна для главной CTA-зоны. */
body.kp-body .kp-wl-count {
    background: var(--yellow);
    color: var(--ink);
    border-radius: 12px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

body.kp-body .kp-wl-count-num {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

body.kp-body .kp-wl-count-lbl {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing:normal;
}

body.kp-body .kp-wl-intro {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
}


/* ───────── 3. Действия ───────── */

body.kp-body .kp-wl-actions {
    padding: 8px 0 20px;
}

body.kp-body .kp-wl-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.kp-body .kp-wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    letter-spacing:normal;
    text-decoration: none;
    transition: all .15s;
}

body.kp-body .kp-wl-btn-primary {
    background: var(--ink);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
}

body.kp-body .kp-wl-btn-primary:hover {
    background: var(--yellow);
    color: var(--ink);
}

body.kp-body .kp-wl-btn-primary svg {
    flex: 0 0 auto;
}

body.kp-body .kp-wl-btn-ghost {
    background: transparent;
    color: var(--ink-2);
    padding: 14px 8px;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.kp-body .kp-wl-btn-ghost:hover {
    color: var(--hot);
}

body.kp-body .kp-wl-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}


/* ───────── 4. Сетка — наследует от каталога (.kp-cat-grid из patch-5.1) ───────── */

body.kp-body .kp-wl-grid-sec {
    padding: 12px 0 0;
}

/* На странице избранного нет фильтров/панели сверху — карточки прямо в грид. */
body.kp-body .kp-wl-grid {
    /* Используем те же 4 колонки, что в архиве категории (patch-5.1). */
    /* В patch-5.1 уже задано body.kp-body .kp-cat-page .kp-cat-grid — у нас
     * .kp-wl-page (не .kp-cat-page), поэтому базовая 5-кол. из main.css
     * сработает не так. Дублируем явно. */
    grid-template-columns: repeat(4, 1fr);
}


/* ───────── 5. Пустое состояние ───────── */

body.kp-body .kp-wl-empty {
    padding: 40px 0;
}

body.kp-body .kp-wl-empty-box {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 24px;
}

body.kp-body .kp-wl-empty-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    background: var(--yellow);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
}

body.kp-body .kp-wl-empty-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing:normal;
}

body.kp-body .kp-wl-empty-text {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 28px;
}


/* ───────── 6. Мини-тост (используется и из main.js, и из kp-wishlist.js) ─────────
 * Если стили уже есть в main.css — этот блок их продублирует через :where(),
 * но безопаснее задать здесь — main.js может не быть на странице, а тост
 * нужен.
 *
 * Скоупинг: фикс позицию, обычный стиль тоста. Без !important. */

body.kp-body .kp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    font-weight: 600;
    animation: kp-toast-in .2s ease-out;
}

body.kp-body .kp-toast-t {
    line-height: 1.3;
}

@keyframes kp-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ───────── 7. Адаптив ───────── */

@media (max-width: 980px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    body.kp-body .kp-wl-title-row {
        gap: 16px;
    }
    body.kp-body .kp-wl-title {
        font-size: clamp(28px, 7vw, 40px);
    }
}

@media (max-width: 760px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.kp-body .kp-wl-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
    body.kp-body .kp-wl-btn-primary {
        justify-content: center;
    }
    body.kp-body .kp-wl-btn-ghost {
        text-align: center;
    }
}

@media (max-width: 480px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: 1fr;
    }
    body.kp-body .kp-wl-count {
        padding: 8px 12px;
    }
    body.kp-body .kp-wl-count-num {
        font-size: 24px;
    }
}