/* gallery-scroll.css — ФИНАЛ, БЕЗ СТРЕЛОК */

.product-card-img-strip {
    display: flex;
    gap: 0;
    overflow-x: auto !important;     /* ← добавляем !important */
    overflow-y: hidden !important;   /* ← явно скрываем вертикальный */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    border-radius: 12px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    background: var(--img-bg, #f6f6f9);
    width: 100%;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-card-img-strip::-webkit-scrollbar {
    display: none;
}

.product-card-img-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 100%;
    position: relative;
}
.product-card-img-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;           /* ← убрать скругление, оно теперь на strip */
    pointer-events: none;
}

.product-card-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.product-card:hover .product-card-dots,
.product-card-dots.has-multiple {
    opacity: 1;
}
.product-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d5d5d5;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
    pointer-events: auto;
}
.product-card-dot.active {
    background: #dd1847;
    width: 18px;
    border-radius: 3px;
}

.product-card:hover .product-card-img-slide img {
    transform: none !important;
}

/* Галерея в карточке товара */
.product-gallery-strip {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    border-radius: 12px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    background: #f6f6f9;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-gallery-strip::-webkit-scrollbar {
    display: none;
}
.product-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 100%;
    aspect-ratio: 1 / 1;
}
.product-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d5d5d5;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
}
.gallery-dot.active {
    background: #a73afd;
    width: 24px;
    border-radius: 4px;
}

/* МОБИЛКА */
@media (max-width: 767px) {
    .product-card-img-strip,
    .product-gallery-strip {
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 12px;
    }
    
    .product-card-img-slide img {
        border-radius: 12px;
    }
    
    .product-card-dots {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .product-card-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    /* убираем opacity: 0 и transition — теперь точки всегда в абсолютном позиционировании */
    pointer-events: none;
    /* position, bottom, left, transform, z-index — заданы в shop.css */
}
    .product-card-dot {
        width: 5px;
        height: 5px;
    }
    .product-card-dot.active {
        width: 16px;
    }
}