/*
 * Кнопка «В корзину» в каталоге на сенсорных устройствах.
 *
 * В плиточном виде тема прячет кнопку под нижний край картинки
 * (transform: translateY(calc(100% + 7px))) и выдвигает её только при
 * наведении курсора. На телефонах и планшетах наведения не бывает, поэтому
 * кнопка оставалась недоступной — показываем её сразу.
 *
 * Условие по типу указателя, а не по ширине экрана: так на ноутбуке с мышью
 * поведение остаётся прежним даже в узком окне, а на сенсорном планшете
 * кнопка появляется независимо от его размера.
 */
@media (hover: none), (pointer: coarse) {
    .product-item:not(.product-item--list) .product-item__add-to-cart {
        transform: translateY(0);
    }

    /* Убираем «выезжание»: на касании анимация не нужна и только мешает
       при быстром пролистывании каталога. */
    .product-item:not(.product-item--list) .product-item__add-to-cart.button {
        transition: background-color .15s, color .15s;
    }

    /*
     * Кнопка видна постоянно, поэтому под неё нужно место: делаем подложку
     * товара выше (было 126% ширины) — снизу появляется свободная полоса.
     */
    .product-item:not(.product-item--list) .product-item__images:before {
        padding-top: 150%;
    }

    /*
     * И поднимаем само фото ровно на половину высоты кнопки (47px), чтобы оно
     * осталось по центру свободной части подложки и кнопка его не перекрывала.
     * Через calc, а не проценты: работает одинаково при любой ширине карточки.
     */
    .product-item:not(.product-item--list) .product-item__image,
    .product-item:not(.product-item--list) .product-item__image-hover {
        top: calc(50% - 24px);
    }
}