/* catalog/product_list.css */

/* СТРАНИЦА СПИСКА ТОВАРОВ-ПЕРЧАТОК */
.gloves-list-head .col {
    margin-top: 3rem;
}

.gloves-list-head h1 {
    margin: 0;
    color: var(--color-brand);
}

.gloves-list-body {
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 5rem;
}

.catalog-products-grid {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.75rem;
}

/* Широкие экраны: не растягиваем каталог на всю ширину */
@media (min-width: 1400px) {
    .gloves-list-body {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Desktop: даём воздух между фильтрами и карточками */
@media (min-width: 992px) {
    .catalog-products-col {
        padding-left: 2.5rem;
    }
}

@media (max-width: 430px) {
    .gloves-list-head .col {
        margin-top: 2rem;
    }
}

@media (max-width: 430px) {
    .gloves-list-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ЗАГОЛОВОК РЕЗУЛЬТАТОВ ПОИСКА */
.search-rez-info {
    margin-bottom: 0.625rem;
}

.search-rez-info h2 strong {
    color: var(--color-accent);
}


/* CARDS */
.glove-list-card .card-body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.glove-list-card .card {
    border: 1px solid transparent;
    box-sizing: border-box;
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.glove-list-card .card:hover {
    border-color: #dad9d9;
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.08);
}


.card-media {
    position: relative;
    width: 100%;
}

/* Стили для смены изображения карты */

/* === Каркас === */
.card-image-container {
    display: block;
    perspective: 1000px;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* защищает от вылезания углов */
}

/* flip */
.card-inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    /* квадратные карточки */
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    will-change: transform;
    transform: translateZ(0);
    /* GPU-оптимизация */
}

/* === Анимация и условия === */
.card-image-container:hover .card-inner {
    transform: rotateY(180deg);
}

/* Отмена вращения, если нет back-image */
.card-image-container:not(:has(.back-image)):hover .card-inner {
    transform: none;
}

/* Отключение эффекта на сенсорных устройствах */
@media (hover: none),
(pointer: coarse) {
    .card-image-container:hover .card-inner {
        transform: none !important;
    }
}

/* === Слои картинок === */
.front-image,
.back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.back-image {
    transform: rotateY(180deg);
}

/* === Сами картинки === */
.front-image img,
.back-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
    /* защита от шва в Firefox */
}



@media (max-width: 767.98px) and (orientation: landscape) {
    .glove-list-card {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


/* Стили для заголовка карты */
.card-title-list {
    color: #58585a;
    display: inline-block;
    transition: none;
    font-weight: 700;
    letter-spacing: 0.03125rem !important;
    text-wrap: balance;
}

.highlight-default {
    background-color: var(--color-accent);
    color: white;
}

.highlight-article {
    background-color: #06a1f5;
    color: white;
}

/* Стили для текста карты */
.card-text {
    color: #6c757d;
    text-align: left;
    text-wrap: auto;

    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}




/* PAGINATION */
.show-all {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.show-all .btn-outline-primary {
    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-bg: var(--color-brand);
    --bs-btn-active-border-color: var(--color-brand);
    --bs-btn-disabled-color: var(--color-brand);
    --bs-btn-disabled-border-color: var(--color-brand);
}

.page-item.active .page-link {
    background-color: #6c757d;
    /* Серый цвет фона */
    border-color: #6c757d;
    /* Серый цвет границы */
    color: white;
    /* Белый цвет текста */
}

.page-item .page-link {
    border-color: #6c757d;
    /* Серый цвет границы */
    color: #6c757d;
    /* Белый цвет текста */
}

/* Выделение при наведении на кнопки пагинации */
.page-item .page-link:hover {
    background-color: #6c757d;
    /* Серый фон при наведении */
    color: white;
    /* Белый цвет текста при наведении */
    border-color: #6c757d;
    /* Цвет границы при наведении */
}


/* ОБРАБОТКА ЗАПРОСОВ ФИЛЬТРАЦИИ */
.no-results {
    color: var(--color-accent);
    font-weight: 600;
}


/* PAGINATION */
.catalog-pagination-wrap {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.catalog-pagination-wrap .pagination {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.catalog-pagination-wrap .page-link {
    border-radius: 0;
    min-height: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1.2;
}

.catalog-pagination-wrap .page-item-info .page-link {
    min-width: 170px;
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    pointer-events: none;
}

.catalog-pagination-wrap .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

@media (max-width: 575.98px) {
    .catalog-pagination-wrap .pagination {
        gap: 0.375rem;
    }

    .catalog-pagination-wrap .page-link {
        padding: 0.65rem 0.85rem;
        font-size: 0.9rem;
    }

    .catalog-pagination-wrap .page-item-info {
        width: 100%;
        order: -1;
    }

    .catalog-pagination-wrap .page-item-info .page-link {
        width: 100%;
        min-width: 0;
    }
}