/**
 * EK_Listrak - styles for the vanilla-JS carousel (see js/carousel.js).
 * Kept deliberately small: it only lays out the prev/next controls, the
 * page-dot indicators, and the scrollable viewport. Item sizing is handled
 * inline by carousel.js so it can honor each template's per-breakpoint item
 * counts.
 */
.ltk-vc-wrap {
    position: relative;
}

.ltk-vc-outer {
    position: relative;
    padding: 0 44px;
}

.ltk-vc-viewport {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.ltk-vc-viewport::-webkit-scrollbar {
    display: none;
}

.ltk-vc-track.owl-loaded {
    display: flex;
}

.ltk-vc-track .item {
    scroll-snap-align: start;
}

/* Prev/next arrows - only ever shown once a block has more than one page
   of items (see .ltk-vc-wrap.ltk-vc-no-overflow below). */
.ltk-vc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
    padding-top: 0;
}

.ltk-vc-nav:hover:not(:disabled) {
    background: #869791;
    color: #fff;
}

.ltk-vc-nav:disabled {
    opacity: .35;
    cursor: default;
}

.ltk-vc-nav.ltk-vc-prev {
    left: 0;
}

.ltk-vc-nav.ltk-vc-next {
    right: 0;
}

/* Page-dot pagination, shown below the carousel - same idea as
   OwlCarousel's .owl-dots, one dot per page of items. */
.ltk-vc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.ltk-vc-dot {
    padding: 6px;
    border: none;
    background: none;
    cursor: pointer;
}

.ltk-vc-dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d6d6d6;
    transition: background-color .2s ease;
}

.ltk-vc-dot:hover span,
.ltk-vc-dot.active span {
    background: #869791;
}

/* Nothing to slide to when everything fits on one page - hide both the
   arrows and the dots entirely instead of showing inert/disabled controls. */
.ltk-vc-wrap.ltk-vc-no-overflow .ltk-vc-nav,
.ltk-vc-wrap.ltk-vc-no-overflow .ltk-vc-dots {
    display: none;
}