/* убираем тени */
.t-catalog__pagination__item {
    box-shadow: none !important;
}

/* фон под цифрами и стрелками — оранжевый */
.t-catalog__pagination__item {
    background-color: #FF6301 !important;
}

/* стенки (рамки) — белые */
.t-catalog__pagination__item {
    border: 2px solid #ffffff !important;
    border-radius: 30px !important;
}

/* цифры — чёрные */
.js-pagination-item .t-descr {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    filter: none !important;
}

/* стрелки — БЕЛЫЕ (было #000, теперь #ffffff) */
.t-catalog__pagination__arrow path {
    fill: #ffffff !important;
    stroke: none !important;
}


/* ==========================================================================
   НАСТРОЙКИ ДЛЯ ПК И ПЛАНШЕТОВ (Основной код)
   ========================================================================== */

/* 1. Задаем градиент и скругление для ВСЕЙ карточки товара */
.t-catalog__card {
    background: linear-gradient(135deg, #FF4D00 0%, #FF8600 100%) !important;
    border-radius: 24px !important; /* Скругляем углы самой карточки */
    overflow: hidden !important; /* Чтобы картинка сверху не вылезала за скругление */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Чтобы все карточки в ряду были одной высоты */
}

/* 2. Добавляем аккуратные внутренние отступы для блока с текстом, чтобы он не прилипал к краям */
.t-catalog__card__wrap_txt-and-btns {
    padding: 20px !important; /* Отступы внутри цветной карточки */
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
}

/* 3. Меняем цвет текста на белый для идеальной читаемости на оранжевом фоне */
.t-catalog__card__title, 
.t-catalog__card__descr {
    color: #ffffff !important;
}

/* 4. Убираем лишние внешние отступы у текста, которые могут сломать верстку */
.t-catalog__card__textwrapper {
    margin: 0 !important;
}

/* Белая обводка 1px и скругление углов для картинок товаров */
img.t-catalog__card__img {
    border-radius: 12px !important; /* Радиус скругления */
    outline: 1px solid #ffffff !important; /* Белая обводка в 1 пиксель */
    outline-offset: -1px !important; /* Смещаем внутрь, чтобы обводка была ровно по контуру */
}

/* Контейнер картинки на ПК (отступы по 10px) */
.t-catalog__card__imgwrapper {
    margin: 10px 10px 0 10px !important; /* Отступы: верх, правый, низ, левый */
    width: calc(100% - 20px) !important; /* Уменьшаем ширину контейнера с учетом левого и правого отступов */
    border-radius: 12px !important; /* Скругление контейнера картинки */
    overflow: hidden !important;
}


/* ==========================================================================
   НАСТРОЙКИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (Экраны менее 640px)
   ========================================================================== */
@media screen and (max-width: 640px) {
    
    /* Уменьшаем скругление самой карточки до 20px */
    .t-catalog__card {
        border-radius: 20px !important;
    }

    /* Меняем отступы контейнера картинки: по 4px сверху и с боков */
    .t-catalog__card__imgwrapper {
        margin: 4px 4px 0 4px !important; /* 4px сверху, справа, 0 снизу, 4px слева */
        width: calc(100% - 8px) !important; /* Корректируем ширину (100% минус 4px слева и 4px справа) */
        border-radius: 15px !important; /* Уменьшаем скругление контейнера под мобильные */
    }

    /* Уменьшаем скругление самой картинки внутри до 10px */
    img.t-catalog__card__img {
        border-radius: 10px !important;
    }
    
    /* Немного уменьшаем отступы текста, чтобы на смартфонах карточка выглядела аккуратнее */
    .t-catalog__card__wrap_txt-and-btns {
        padding: 16px !important;
    }
}