/* Product Sections on Home Page */

.product-section {
    position: relative;
    margin: 80px 0
}

/* Переопределяем grid стили для секций на главной */
.product-section .product-section-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
}

/* ============================================
   Стили для карточек товаров (независимо от catalog.css)
   ============================================ */

.product-section-track .product-card {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* 4 карточки: (100% - 3px gap) / 4 = 25% - 0.75px для каждой карточки */
    width: calc((100% - 3px) / 4) !important;
    min-width: calc((100% - 3px) / 4) !important;
    max-width: calc((100% - 3px) / 4) !important;
    /* Убираем grid стили */
    grid-column: unset !important;
    grid-row: unset !important;
    /* Принудительный GPU acceleration для Safari */
    will-change: transform;
    transform: translateZ(0);
}

/* Для секций на главной странице полностью отключаем fade по opacity,
   чтобы избежать мерцания в Safari при горизонтальной прокрутке */
.product-section .product-image-main {
    opacity: 1 !important;
    transition: none !important;
}

.product-section .product-image-main.loaded {
    opacity: 1 !important;
}

.product-image-low {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.product-image-low.fade-out {
    opacity: 0;
}

/* Скрываем стрелки на крайних карточках даже при hover */
.product-card:hover .image-nav-btn.hidden-on-edge {
    display: none !important;
}

/* На крайних карточках, когда достигнут конец (нет класса hidden-on-edge), показываем стрелки при hover */
.product-card:hover .image-nav-btn:not(.hidden-on-edge) {
    display: flex !important;
}

/* На мобильных и планшетах показываем стрелки на крайних карточках */
@media (max-width: 1024px) {
    .product-card:hover .image-nav-btn.hidden-on-edge {
        display: flex !important;
    }
}

.product-section:last-child {
    margin-bottom: 0;
}

.product-section-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    text-align: left;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.product-section-title a {
    color: inherit;
    text-decoration: none;
}

.product-section-title a:hover {
    text-decoration: underline;
}

.product-section-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.product-section-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1px;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    /* Убеждаемся, что это не grid */
    grid-template-columns: none !important;
    /* НЕ используем overflow на track - он должен выходить за пределы контейнера */
    /* overflow-x: hidden должен быть только на .product-section-container */
    width: auto;
    min-width: 100%;
}

/* На мобильных используем нативный scroll */
@media (max-width: 1024px) {
    .product-section-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        transition: none;
    }

    .product-section-track .product-card {
        scroll-snap-align: start;
    }

    /* Скрываем scrollbar */
    .product-section-track::-webkit-scrollbar {
        display: none;
    }

    .product-section-track {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}


/* Стрелки для секций товаров */
.product-section>.mm-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    cursor: pointer;
    box-shadow: none;
    border: none;
    background: none;
    display: flex !important;
    /* Changed from block */
    align-items: center;
    /* Added */
    justify-content: center;
    /* Added */
    width: 40px;
    /* Added */
    height: 40px;
    /* Added */
    padding: 0;
    /* Changed from 0 20px */
    visibility: visible !important;
    opacity: 1 !important;
}

.product-section>.mm-arrow-prev {
    left: 10px;
    /* Changed from 0 */
}

.product-section>.mm-arrow-next {
    right: 10px;
    /* Changed from 0 */
}

.product-section .mm-arrow-icon {
    width: 20px;
    height: 35px !important;
    /* Добавляем !important, чтобы переопределить mm-slider.css */
    display: block !important;
    object-fit: contain;
    /* Белые стрелки: делаем черное белым */
    filter: brightness(0) invert(1);
    opacity: 1 !important;
    visibility: visible !important;
}

.product-section .mm-arrow-prev .mm-arrow-icon {
    transform: scaleX(-1);
}

.product-section>.mm-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Скрываем стрелку, когда она скрыта через JavaScript */
.product-section>.mm-arrow[style*="display: none"] {
    display: none !important;
}

.product-section>.mm-arrow:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
    .product-section-track .product-card {
        /* 3 карточки: (100% - 2px gap) / 3 */
        width: calc((100% - 2px) / 3) !important;
        min-width: calc((100% - 2px) / 3) !important;
        max-width: calc((100% - 2px) / 3) !important;
    }

    /* Скрываем стрелки на планшетах */
    .product-section>.mm-arrow {
        display: none !important;
    }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .product-section {
        margin-bottom: 60px;
    }

    .product-section-title {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .product-section-track .product-card {
        /* 2 карточки: (100% - 1px gap) / 2 */
        width: calc((100% - 1px) / 2) !important;
        min-width: calc((100% - 1px) / 2) !important;
        max-width: calc((100% - 1px) / 2) !important;
    }

    /* Скрываем стрелки на мобильных */
    .product-section>.mm-arrow {
        display: none !important;
    }

}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .product-section-track .product-card {
        /* 2 карточки: (100% - 1px gap) / 2 */
        width: calc((100% - 1px) / 2) !important;
        min-width: calc((100% - 1px) / 2) !important;
        max-width: calc((100% - 1px) / 2) !important;
    }

    /* Стрелки уже скрыты через @media (max-width: 768px) */
}

/* Скрытие крайних стрелок навигации на видимых карточках */
.product-card .image-nav-prev.hidden,
.product-card .image-nav-next.hidden {
    display: none !important;
}

/* Гарантируем, что они останутся скрытыми даже при наведении */
.product-card:hover .image-nav-prev.hidden,
.product-card:hover .image-nav-next.hidden {
    display: none !important;
}