/* --- Product Gallery Styling --- */
.product-gallery {
    flex: 1;
    min-width: 300px;
    text-align: center;
    display: flex; /* Menggunakan flexbox untuk mengatur gambar utama dan thumbnail */
    flex-direction: column; /* Gambar utama di atas, thumbnail di bawah */
    align-items: center; /* Pusatkan elemen */
}

.main-product-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px; /* Jarak antara gambar utama dan thumbnail */
}

.product-thumbnails {
    display: flex;
    justify-content: center;
    gap: 15px; /* Jarak antar thumbnail */
    flex-wrap: wrap; /* Agar thumbnail bisa wrap jika terlalu banyak */
    max-width: 100%; /* Pastikan tidak melebihi lebar induk */
}

.thumbnail-image {
    width: 90px; /* Ukuran thumbnail lebih besar */
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid #eee; /* Border default */
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
}

.thumbnail-image:hover, .thumbnail-image.active {
    border-color: #007bff; /* Warna border saat hover/aktif */
    transform: translateY(-3px); /* Efek sedikit mengangkat */
    box-shadow: 0 5px 10px rgba(0,123,255,0.2);
}

/* Sesuaikan media query jika perlu */
@media (max-width: 768px) {
    .product-gallery {
        margin-bottom: 20px; /* Jarak di mobile jika dipecah */
    }
    .main-product-image {
        margin-bottom: 15px;
    }
    .thumbnail-image {
        width: 70px; /* Ukuran thumbnail lebih kecil di mobile */
        height: 70px;
        border-width: 2px;
    }
    .product-thumbnails {
        gap: 10px;
    }
}