/**
 * Product Details - Image Gallery
 * Contains: Main product image, thumbnails, sale badges, and gallery interactions
 * Part of modular product-details.css split
 */

.main-image-container {
    position: relative;
    border-radius: 0 !important;
    border: 1px solid var(--border-color);
    height: 350px;
    overflow: hidden;
    margin-bottom: 20px;
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
}

.main-image-container:hover .main-image {
    transform: scale(1.02);
}

/* Sale Badge */
.sale-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--error-color);
    color: white;
    padding: 8px 20px;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 14px;
    z-index: 10;
}

/* Thumbnails */
.thumbnail-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80px;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px;
    margin-top: 15px;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.thumbnail {
    width: 70px;
    height: 70px;
    border-radius: 0 !important;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Hide scrollbar but keep scrolling functionality */
.thumbnail-gallery::-webkit-scrollbar {
    display: none;
}

.thumbnail-gallery {
    -ms-overflow-style: none;
}