/* Gallery Container */
.pis-product-gallery {
    max-width: 80vw; /* Max width of the entire gallery */
    margin: 0 auto;
    position: relative;
    font-family: sans-serif; /* Use a common font */
}

/* Main Image Wrapper */
.pis-main-image-wrapper {
    position: relative;
    margin-bottom: 10px;
    overflow: hidden; 
    line-height: 0; /* Prevents extra space below the image */
}

/* Main Images */
.pis-main-image {
    width: 100%;
    height: auto;
    display: none; /* Hide all by default */
    border-radius: 8px; /* --- Slightly rounded corners --- */
    object-fit: contain; /* Ensure image fits without cropping */
    max-height: 600px; /* Prevent very tall images from dominating */
    transition: opacity 0.3s ease-in-out;
}

/* Active Main Image */
.pis-main-image.pis-active {
    display: block; /* Show the active image */
}

/* Next/Previous Buttons */
.pis-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    z-index: 10;
    border-radius: 4px;
    opacity: 0.8;
    transition: opacity 0.2s, background-color 0.2s;
}

.pis-nav-button:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

.pis-prev-button {
    left: 10px;
}

.pis-next-button {
    right: 10px;
}

/* Thumbnails Wrapper (below main image) */
.pis-thumbnail-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
    overflow-x: auto; /* Allows horizontal scrolling if many thumbnails */
    padding: 5px 0;
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.pis-thumbnail-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome, Safari and Opera */
}

/* Individual Thumbnails */
.pis-thumbnail {
    width: 60px; 
    min-width: 60px; /* Fixes width even with flex */
    height: 60px;
    object-fit: cover; /* Ensures the thumbnail fills the box */
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px; /* --- Slightly rounded corners --- */
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.7;
}

/* Active Thumbnail Style */
.pis-thumbnail.pis-active-thumb {
    border-color: #0073aa; /* A standard blue to highlight active item */
    opacity: 1;
}

.pis-thumbnail:hover {
    opacity: 1;
}