/* berezin, 2026. Оригинальные иконки Figma UI Kit, только для /newsite/.
 * Маска меняет цвет, но не переписывает SVG и не рисует похожий значок на глаз.
 * Размер холста сохраняем: 24 px для навигации, 16/20 px для малых значков. */
.wite-newsite .wite-kit-icon {
    display: inline-block;
    width: var(--wite-kit-size, 24px);
    height: var(--wite-kit-size, 24px);
    min-width: var(--wite-kit-size, 24px);
    flex: 0 0 var(--wite-kit-size, 24px);
    vertical-align: middle;
    line-height: 1;
    color: var(--wite-green, #80c754);
    background-color: var(--wite-icon-color, var(--wite-green, #80c754));
    -webkit-mask: var(--wite-kit-image) center / contain no-repeat;
    mask: var(--wite-kit-image) center / contain no-repeat;
    pointer-events: none;
}
.wite-kit-icon_user { --wite-kit-image: url('images/ui-kit/user.svg'); }
.wite-kit-icon_compare { --wite-kit-image: url('images/ui-kit/compare.svg'); }
.wite-kit-icon_favorite { --wite-kit-image: url('images/ui-kit/favorite.svg'); }
.wite-kit-icon_cart { --wite-kit-image: url('images/ui-kit/cart.svg'); }
.wite-kit-icon_home { --wite-kit-image: url('images/ui-kit/home.svg'); }
.wite-kit-icon_catalog { --wite-kit-image: url('images/ui-kit/catalog.svg'); }
.wite-kit-icon_search { --wite-kit-image: url('images/ui-kit/search.svg'); }
.wite-kit-icon_burger { --wite-kit-image: url('images/ui-kit/burger.svg'); }
.wite-kit-icon_filter { --wite-kit-image: url('images/ui-kit/filter.svg'); }
.wite-kit-icon_view-grid { --wite-kit-image: url('images/ui-kit/view-grid.svg'); }
.wite-kit-icon_view-list { --wite-kit-image: url('images/ui-kit/view-list.svg'); }
.wite-kit-icon_copy { --wite-kit-image: url('images/ui-kit/copy.svg'); }
.wite-kit-icon_share { --wite-kit-image: url('images/ui-kit/share.svg'); }
.wite-kit-icon_trash { --wite-kit-image: url('images/ui-kit/trash.svg'); }
.wite-kit-icon_cross { --wite-kit-image: url('images/ui-kit/cross.svg'); }
.wite-kit-icon_available { --wite-kit-image: url('images/ui-kit/available.svg'); }
.wite-kit-icon_check { --wite-kit-image: url('images/ui-kit/check.svg'); }
.wite-kit-icon_plus { --wite-kit-image: url('images/ui-kit/plus.svg'); }
.wite-kit-icon_arrow-down { --wite-kit-image: url('images/ui-kit/arrow-down.svg'); }
.wite-kit-icon_arrow-up { --wite-kit-image: url('images/ui-kit/arrow-up.svg'); }
.wite-kit-icon_arrow-left { --wite-kit-image: url('images/ui-kit/arrow-left.svg'); }
.wite-kit-icon_arrow-right { --wite-kit-image: url('images/ui-kit/arrow-right.svg'); }

/* Выбранное состояние не теряем: сердце и столбики заполняются исходным SVG кита. */
.wite-newsite .product-favorite_active .wite-kit-icon_favorite {
    --wite-kit-image: url('images/ui-kit/favorite-active.svg');
}
.wite-newsite .product-compare_active .wite-kit-icon_compare {
    --wite-kit-image: url('images/ui-kit/compare-active.svg');
}
.wite-newsite .fixed-bar__item_active .wite-kit-icon {
    --wite-icon-color: var(--wite-green-dark, #568f34);
    color: var(--wite-green-dark, #568f34);
}

/* На зелёной кнопке значок белый, как в макете. Зелёный по зелёному — это уже камуфляж. */
.wite-newsite .button:not(.button_style_inverse):not(.button_style_gray) .wite-kit-icon {
    --wite-icon-color: #fff;
    color: #fff;
}
.wite-newsite .button_style_inverse .wite-kit-icon,
.wite-newsite .button_style_gray .wite-kit-icon {
    --wite-icon-color: var(--wite-green, #80c754);
    color: var(--wite-green, #80c754);
}
/* У штатной кнопки «Каталог» значок собран из четырёх div, мимо svg_icon.
 * Оставляем её обработчик и размеры кнопки, меняем только рисунок на меню UI Kit. */
.wite-newsite .header-middle-bar-shop-catalog-button .burger-icon,
.wite-newsite .header-floating__dropdown-btn .burger-icon {
    width: 24px !important;
    height: 24px !important;
    background: #fff;
    -webkit-mask: url('images/ui-kit/burger.svg') center / 24px 24px no-repeat;
    mask: url('images/ui-kit/burger.svg') center / 24px 24px no-repeat;
}
.wite-newsite .header-middle-bar-shop-catalog-button .burger-icon__box,
.wite-newsite .header-floating__dropdown-btn .burger-icon__box { visibility: hidden; }
.wite-newsite .product-thumb__image-button {
    border-radius: 6px;
    background: rgba(255,255,255,.94);
}
.wite-newsite .wite-kit-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
}
.wite-newsite .wite-kit-icons > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--wite-line);
    border-radius: 8px;
}