.product-gallery {
    width: 500px;
}

.col-7 {
    display: flex;
    flex-direction: column; /* Zorg ervoor dat de elementen verticaal gestapeld zijn */
    position: relative;
}

        /* Grote weergave */
.large-display {
    width: 100%;
    height: 375px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.large-display img, 
.large-display video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.large-display img:hover{
    cursor: zoom-in;
}

/* Thumbnail wrapper met overflow */
.thumbnails-wrapper {
    overflow: hidden; /* Verbergt de scroll buiten het zichtbare gebied */
    white-space: nowrap;
    position: relative;
    display: flex;
    transition: transform 0.3s ease; /* Smooth animatie voor scroll */
}

/* Thumbnail containers */
.thumbnail-container {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-right: 10px; /* Ruimte tussen thumbnails */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Nodig voor het plaatsen van het icoon */
    border: 1px solid #e6e6e8;
    cursor: pointer;
    transition: border 0.3s ease;
}

.thumbnail-container:hover {
    border: 2px solid #3baa34;
}

.thumbnail-container.active {
    border: 2px solid #3baa34;
}

.thumbnail-container img, 
.thumbnail-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Stijl voor de Play-pijl in de thumbnail */
.thumbnail-container i {
    position: absolute;
    font-size: 30px; /* Grootte van het play-icoon */
    color: #3baa34; /* Witte kleur voor het icoon */
    background-color: white; /* Zwarte achtergrond voor de cirkel */
    border-radius: 50%; /* Maak het cirkelvormig */
    width: 40px; /* Cirkelgrootte */
    height: 40px; /* Cirkelgrootte */
    display: flex;
    align-items: center;
    justify-content: center; /* Icoon in het midden van de cirkel */
    z-index: 5; /* Zorg ervoor dat het icoon boven de afbeelding komt */
}

/* Knoppen */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Verticaal centreren */
    background-color: rgba(255, 255, 255, 1);
    color: #3baa34;
    border: solid 1px #e6e6e8;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

/* Linker knop (pijltje naar links) */
.carousel-btn.left {
    left: -10px;
}

/* Rechter knop (pijltje naar rechts) */
.carousel-btn.right {
    right: -10px;
}

.carousel-btn:hover {
    border: solid 2px #3baa34;
}

.carousel-btn:active {
    background-color:#3baa34;
    color: white;
}

.carousel-btn span {
    display: inline-block;
    font-size: 30px; /* Grootte van het pijltje */
    line-height: 0;
}

/* Lightbox-overlay stijl */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
    padding: 20px; /* Ruimte rondom */
    box-sizing: border-box; /* Padding blijft binnen de viewport */
}

/* Lightbox-content */
.lightbox-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 3; /* Houd de 4:3-verhouding */
    max-width: calc(100% - 40px); /* Houd marge aan beide kanten */
    max-height: calc(100% - 40px); /* Houd marge aan beide kanten */
    width: auto; /* Proportioneel aanpassen aan de beschikbare ruimte */
    height: auto; /* Proportioneel aanpassen aan de beschikbare ruimte */
}

/* De afbeelding zelf */
.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto; /* Houd 4:3-verhouding */
    height: auto; /* Houd 4:3-verhouding */
    object-fit: contain; /* Zorg dat de afbeelding altijd binnen de container past */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
}

/* Sluitkruisje */
.lightbox-close {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.8);
    color: #3baa34;
    border: solid 1px #e6e6e8;
    font-size: 20px;
    cursor: pointer;
    z-index: 1001; /* Zorg dat het boven de afbeelding staat */
}

.lightbox-close:hover {
    border: solid 2px #3baa34;
}

/* Voorkomt scrollen op de achtergrond */
.no-scroll {
    overflow: hidden;
}

/* Media queries voor kleine schermen */
@media (max-width: 991px) {
    .lightbox-content {
        max-width: calc(100% - 20px); /* Kleinere marge op kleine schermen */
        max-height: calc(100% - 20px);
    }

    .lightbox-close {
        bottom: 10px;
        right: 10px; /* Verbeterde positie op kleinere schermen */
        font-size: 12px; /* Iets kleinere tekstgrootte */
        width: 30px;
        height: 30px;
    }
}

/* Verberg knoppen op mobiel */
@media (max-width: 991px) {
    .product-gallery {
        width: 100%!important;
    }

    .large-display {
        height: 280px;
    }

    .carousel-btn {
        display: none!important; /* Verbergt de knoppen op schermen kleiner dan 768px */
    }
    
    /* Schakel horizontaal scrollen in op mobiel zonder scrollbar */
    .thumbnails-wrapper {
        overflow-x: auto!important; /* Maak horizontale scroll mogelijk */
        -webkit-overflow-scrolling: touch; /* Zorgt voor een vloeiende scroll op iOS */
        scrollbar-width: none; /* Verbergt de scrollbar in Firefox */
    }

    /* Verbergt de scrollbar in Webkit-gebaseerde browsers (zoals Chrome, Safari) */
    .thumbnails-wrapper::-webkit-scrollbar {
        display: none;
    }
}

/* Standaard stijl voor de productbeschrijving met een beperkte hoogte */
.productbeschrijving {
    max-height: 250px; /* Pas deze waarde aan om te bepalen hoeveel tekst je in eerste instantie wilt tonen */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    position: relative;
}

/* Vervagende gradient voor de tekst */
.gradient-overlay::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Pas deze hoogte aan afhankelijk van hoeveel tekst je wilt vervagen */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none; /* Zorg ervoor dat het geen invloed heeft op interacties */
}

/* Knopstijl voor de "Toon meer" knop */
.toggle-btn {
    background-color: white;
    color: #3baa34;
    padding: 10px 15px;
    border: 1px solid #3baa34;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 0px;
}

.toggle-btn:hover {
    border: 2px solid #3baa34
}

.toggle-btn:active {
    background-color: #3baa34;
    color: white;
}