.carousel-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 700px;
}

.carousel-container {
    display: flex;
    overflow-x: scroll;
    
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-container {
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch;
}

.carousel-item {
    flex-shrink: 0;
    width: 100%; 
    scroll-snap-align: start;
}

.product-image {
    display: block;
    width: 100%;
    height: auto;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
    background-color: var(--primary);
    transform: scale(1.1);
}