.caxtube-trending {
    min-width: 0;
}

.caxtube-trending-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.caxtube-trending-heading .home-body__item {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.caxtube-trending-controls {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.caxtube-trending-controls[hidden] {
    display: none;
}

.caxtube-trending-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--caxtube-border);
    border-radius: 50%;
    background: var(--caxtube-panel, #1e1e1e);
    color: var(--caxtube-text, #f1f1f1);
    font-size: 12px;
}

.caxtube-trending-controls button:hover {
    background: var(--caxtube-red);
    border-color: var(--caxtube-red);
}

.caxtube-trending :focus-visible {
    outline: 2px solid var(--caxtube-red);
    outline-offset: -2px;
}

.caxtube-trending-track {
    --trending-columns: 3;
    --trending-gap: 24px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--trending-columns) - 1) * var(--trending-gap)) / var(--trending-columns));
    gap: var(--trending-gap);
    align-items: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}

.caxtube-trending.is-slider-ready .caxtube-trending-track {
    scrollbar-width: none;
}

.caxtube-trending.is-slider-ready .caxtube-trending-track::-webkit-scrollbar {
    display: none;
}

.caxtube-trending-track > .video-item {
    width: 100%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media (max-width: 991px) {
    .caxtube-trending-track {
        --trending-columns: 2;
    }
}

@media (max-width: 575px) {
    .caxtube-trending-track {
        --trending-columns: 1;
    }
}