/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.5 — Сердце в карточке товара: рабочая кнопка + новый стиль.
 *
 * Контекст:
 *   До 7.5 в шаблонах карточки рендерилась мёртвая <button class="kp-prod-fav">
 *   без data-атрибутов — Woodmart-JS на неё не цеплялся. В 7.5 хелпер
 *   kp_wishlist_btn() (inc/helpers.php) рендерит разметку под контракт
 *   wishlist.js:37 — <div class="kp-prod-fav wd-wishlist-btn ..."><a data-product-id
 *   data-key data-added-text> — и Woodmart сам обрабатывает клик
 *   (cookie для гостей / AJAX для авторизованных).
 *
 *   Demo-плитки на главной идут с тем же контейнером .kp-prod-fav, но без
 *   wd-wishlist-* / data-* — это .kp-prod-fav-demo, чисто визуальный.
 *
 * Что делает патч:
 *   1) Перебивает старое правило main.css:362-365 (.kp-prod-fav — серый круг,
 *      hover только меняет цвет иконки) под новый эталон Image 4/5:
 *      белый круг 34×34 + border 1px line, иконка-контур var(--ink-3),
 *      hover → красная заливка var(--hot), иконка белая.
 *   2) Состояние .added (a.added внутри .kp-prod-fav) — постоянная красная
 *      заливка + залитое сердце. Wishlist.js навешивает .added на <a>
 *      при добавлении и на загрузке (updateWishlistButtonState).
 *   3) Сбрасывает родные Woodmart-стили .wd-wishlist-btn / .wd-action-btn,
 *      которые могут перебивать наш позиционирующий absolute (background,
 *      padding, position relative и т.д.).
 *   4) Прячет .wd-action-text (Woodmart-текст, который JS заменит на
 *      data-added-text после добавления — нам он не нужен визуально,
 *      но удалять его нельзя: wishlist.js:377 ищет именно его, иначе
 *      fallback на $button.text() сотрёт наш SVG).
 *
 * Скоуп:
 *   body.kp-body .kp-prod-imgwrap .kp-prod-fav — высокая специфичность,
 *   перебивает и main.css, и parent woodmart CSS без !important (где можно).
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── 1. База: круглая кнопка ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
    /* absolute top:8/right:8 уже заданы в patch-3.3 (GROUP D, с !important) */
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: none;          /* убираем мягкую тень из main.css:362 */
    color: var(--ink-3);       /* цвет SVG-контура */
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

/* Кнопка-обёртка для реального товара — это <div>, внутри <a>. Растягиваем <a> */
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 50%;
    /* Сброс родных .wd-action-btn padding/background — Woodmart рисует свою
       подложку, нам она не нужна. */
    padding: 0;
    background: transparent;
}

/* Прячем родные Woodmart-элементы: .wd-added-icon (их check-иконка) и
   .wd-action-text (текст, который JS подменит после добавления). Текст
   оставляем в DOM ради корректности wishlist.js:377-381 — там logic
   "if .wd-action-text exists → replace its text, else replace whole button". */
body.kp-body .kp-prod-imgwrap .kp-prod-fav .wd-added-icon {
    display: none;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav .wd-action-text,
body.kp-body .kp-prod-imgwrap .kp-prod-fav .kp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Иконка-сердце */
body.kp-body .kp-prod-imgwrap .kp-prod-fav .kp-prod-fav-svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: fill .15s;
}


/* ───────── 2. Hover: красная заливка, иконка белая ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover {
    background: var(--hot);
    border-color: var(--hot);
    color: #fff;
}


/* ───────── 3. Состояние .added (товар уже в избранном) ─────────
 * wishlist.js навешивает .added на <a> при успешном добавлении и
 * восстанавливает её на загрузке для товаров из cookie.
 * Контейнер при этом остаётся обычным — селектор идёт через :has() для
 * современных браузеров и через дублирующее правило с .added на <a>. */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:has(a.added) {
    background: var(--hot);
    border-color: var(--hot);
    color: #fff;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav a.added .kp-prod-fav-svg {
    fill: currentColor;        /* заливает контур сердца */
}


/* ───────── 4. Сбросы для Woodmart-классов на нашем контейнере ─────────
 * .wd-action-btn / .wd-wishlist-btn могут принести из parent CSS
 * собственный position, background, before-псевдо. Сбрасываем то, что
 * мешает нашему круглому виду. */

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn {
    /* перебивает woodmart .wd-action-btn default sizing */
    line-height: 0;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn::before,
body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn > a::before {
    display: none !important;  /* Woodmart рисует свою иконку через ::before */
}


/* ───────── 5. Доступность: фокус-обводка ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:focus-visible,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 2px;
}