/* Styles pour la galerie d'images */

/* --- Desktop Layout (Default) --- */
.product-left-column {
    display: flex;
    flex-direction: column; /* Image top, Thumbnails bottom */
    gap: 20px;
    flex: 1;
    min-width: 400px;
}

.product-gallery-wrapper {
    display: flex;
    flex-direction: row; /* Horizontal thumbnails */
    gap: 10px;
    width: 100%; /* Full width */
}

.product-gallery-wrapper .product-thumbnails {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.product-main-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.main-image-wrapper {
    width: 100%;
}

.thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.thumbnail:hover {
    border-color: var(--ilo-light-grey);
}

.thumbnail.active {
    border-color: var(--ilo-blue);
}

/* Hide Mobile Gallery on Desktop */
.product-mobile-gallery {
    display: none;
}

/* --- Mobile Layout --- */
@media (max-width: 768px) {
    .product-content {
        flex-direction: column;
    }

    .product-left-column {
        flex-direction: column;
        min-width: 100%;
    }

    /* Hide Desktop Gallery Wrapper on Mobile */
    .product-gallery-wrapper {
        display: none;
    }

    /* Show Mobile Gallery Section */
    .product-mobile-gallery {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    .mobile-gallery-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }

    .product-mobile-gallery .product-thumbnails {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
    }
}