/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/* Add spacing between vertical slides manually if spaceBetween is 0 */
.category-activation-vertical .swiper-slide {
    padding-bottom: 15px;
    display: flex;
    align-items: center;
}

.category-activation-vertical .card {
    width: 100%;
    border-radius: 12px; /* Matches the rounded look in your image */
    transition: transform 0.3s ease;
}

/* Optional: Slight lift effect on hover */
.category-activation-vertical .card:hover {
    transform: translateY(-2px);
}

/* 1. Ensure the transition is linear for the marquee look */
.category-activation-vertical .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* 2. FORCE instant pause on hover */
.category-activation-vertical:hover .swiper-wrapper {
    transition-duration: 0ms !important;
    transform: translate3d(0, var(--swiper-wrapper-transform), 0); /* Stops it in place */
    /* Alternative simpler method for some versions: */
    pointer-events: auto;
}

/* 3. Adjust height for 4 slides (approx 100px height + 20px gap) */
.category-activation-vertical {
    height: 460px; 
    overflow: hidden;
}