/* Simple Product Gallery Styles */

/* 1. Main Gallery Container */
.simple-gallery-wrapper {
    display: block;
    width: 100%;
    margin-bottom: 30px;
}

/* 2. Main Image Area */
.simple-main-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Strict border/shadow removal as requested */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.simple-main-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain !important;
    /* Ensure no cropping */
    max-height: 500px;
    /* Reasonable limit for desktop */
}

/* 3. Thumbnails Grid */
.simple-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    /* Center thumbnails */
}

/* 4. Individual Thumbnail */
.simple-thumb-item {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid transparent;
    /* Placeholder to prevent layout jump */
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    /* White background for transparent images */
    transition: all 0.2s ease;
}

.simple-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    /* Ensure no cropping */
    display: block;
}

/* Hover & Active States */
.simple-thumb-item:hover {
    border-color: #ddd;
    opacity: 0.9;
}

.simple-thumb-item.active {
    border-color: #000 !important;
    /* Visual indicator for selected */
    box-shadow: 0 0 0 1px #000 inset;
}

/* 5. Mobile Responsiveness */
@media (max-width: 767px) {
    .simple-main-image img {
        max-height: 400px;
        /* Slightly smaller limit for mobile */
    }

    .simple-thumb-item {
        width: 60px;
        height: 60px;
    }

    .shop-template .container,
    .shop-template .col-lg-6 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}