.image-switcher {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.main-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main-image-wrapper {
    position: relative;
}

.main-image {
    width: 100%;
    display: none;
}

.main-image.active {
    display: block;
}

.product-thumbnail {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product-thumbnail img {
    transition: width 0.3s ease, height 0.3s ease;
}

.thumbnail-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.thumbnail-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.poster-size-1{
    width: 170PX   !important;
    top:   13%    !important;

}
.poster-size-2{
    width: 160PX !important;
    top: 24% !important;
}
.poster-size-3{
    width: 170PX !important;
    top: 28% !important;
}
.poster-size-4{
    width: 300px !important ;
    top:  10% !important;
}
.poster-size-1-1{
    width: 195px !important ;
    top:  7% !important;
}
.poster-size-2-2{
    width: 200px !important ;
    top: 17% !important;
}
.poster-size-3-3{
    width: 220px !important ;
    top: 20% !important;
}
.poster-size-4-4{
    width: 400px !important ;
    top:  10% !important;
}
/*lanscape sizes*/
.poster-size-1-landscape{
    width: 238PX   !important;
    top:   13%    !important;

}
.poster-size-2-landscape{
    width: 224PX !important;
    top: 24% !important;
}
.poster-size-3-landscape{
    width: 238PX !important;
    top: 28% !important;
}
.poster-size-1-1-landscape{
    width: 273px !important ;
    top:  7% !important;
}
.poster-size-2-2-landscape{
    width: 280px !important ;
    top: 17% !important;
}
.poster-size-3-3-landscape{
    width: 308px !important ;
    top: 20% !important;
}

.background-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.background-button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}

.background-thumbnail {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.background-button:hover .background-thumbnail,
.background-button:focus .background-thumbnail {
    border-color: #0073aa;  /* Highlight border color */
    transform: scale(1.05);  /* Slight zoom effect */
}
.mockup-container {
    text-align: center;
    margin: 20px 0;
}

.mockup-frame {
    position: relative;
    width: 100%; /* Make the width responsive */
    max-width: 1750px; /* Set a maximum width */
    height: auto; /* Make the height adjust automatically */
    aspect-ratio: 1.66 / 1; /* Maintain a square aspect ratio (width equals height) */
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    transition: background-image 0.2s ease-in-out, box-shadow 0.2s ease;  /* Smooth background transition */
}

/* Optional: Adjust the size for smaller screens */
@media (max-width: 768px) {
    .mockup-frame {
        max-width: 90%; /* Reduce the maximum width on smaller screens */
        scale: 1.4;
        top: 24px;
    }
    .background-selector{
        margin-top: 75px;
    }
    .poster-size-1{
        width: 70PX   !important;
        top:  9%     !important;
    }
    .poster-size-2{
        width: 72PX !important;
        top: 10% !important;
    }
    .poster-size-3{
        width: 90PX !important;
        top: 13% !important;
    }
    .poster-size-4{
        width: 130px !important ;
        top:  7% !important;
    }
    .poster-size-1-1{
        width: 110px !important ;
        top: 10% !important;
    }
    .poster-size-1-1{
        width: 100px !important ;
        top:  10% !important;
    }
    .poster-size-2-2{
        width: 100px !important ;
        top: 4% !important;
    }
    .poster-size-3-3{
        width: 160px !important ;
        top: 10% !important;
    }
}

@media (max-width: 480px) {
    .mockup-frame {
        max-width: 100%; /* Allow it to take full width on very small screens */
    }
}

#productImage {
    position: absolute;
    top: 20%;   
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    border-radius: 1px;
    box-shadow: 1px 2px 5px rgba(36, 36, 36, 0.404);
    transition: all 0.5s ease;
}


/**/

.bg-single-image { 
    background-color: black;
    width: 100%; /* Make the width responsive */
    max-width: 1750px; /* Set a maximum width */
    height: auto; /* Make the height adjust automatically */
    aspect-ratio: 1.66 / 1;
}

.single-image {
    width: 100px !important ;
    position: absolute;
    transform: translateX(-50%);
    object-fit: contain;
    border-radius: 1px;
    box-shadow: 1px 2px 5px rgba(36, 36, 36, 0.404);
    transition: all 0.5s ease;
}