/* ──────────────────────────────────────────────────────────────
   v2 verticale productslider — [ledled_vertical_product_slider]
   Twee kolommen, tegengesteld scrollend, pure CSS-animatie.

   De items worden in PHP twee keer gerenderd; translateY(-50%) verschuift
   exact één set, waardoor de lus naadloos is. Daarom krijgen de items een
   margin-bottom (geen flex-gap) zodat beide helften identiek hoog zijn.
   ────────────────────────────────────────────────────────────── */

.v2-vslider {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 75vh;
    overflow: hidden;
}

.v2-vslider__col {
    overflow: hidden;
}

.v2-vslider__track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.v2-vslider__col--up .v2-vslider__track {
    animation: v2-vslider-up var(--v2-vslider-speed, 30s) linear infinite;
}

.v2-vslider__col--down .v2-vslider__track {
    animation: v2-vslider-down var(--v2-vslider-speed, 30s) linear infinite;
}

.v2-vslider__col:hover .v2-vslider__track {
    animation-play-state: paused;
}

@keyframes v2-vslider-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes v2-vslider-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

.v2-vslider__item {
    display: block;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.v2-vslider__img,
.v2-vslider__placeholder {
    display: block;
    width: 100%;
    height: 48vh;
    object-fit: cover;
}

.v2-vslider__placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@media (max-width: 768px) {
    .v2-vslider {
        height: 60vh;
        gap: 12px;
    }

    .v2-vslider__img,
    .v2-vslider__placeholder {
        height: 38vh;
    }

    .v2-vslider__item {
        margin-bottom: 12px;
    }
}

/* Respecteer de voorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
    .v2-vslider__col--up .v2-vslider__track,
    .v2-vslider__col--down .v2-vslider__track {
        animation: none;
    }

    .v2-vslider__col {
        overflow-y: auto;
    }
}