#produkteList {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    scroll-snap-type: none;
    flex-grow: 1;
    padding: 2rem 3.5rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4.5rem;
    justify-items: stretch;
    align-content: start;
    max-width: 1000px;
    margin: 0 auto;
    --fade-size: 40px; /* previously 70px */
    --fade-color: #141420;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) calc(var(--fade-size) * 0.4),
            rgba(0, 0, 0, 1) var(--fade-size),
            rgba(0, 0, 0, 1) calc(100% - var(--fade-size)),
            rgba(0, 0, 0, 0.5) calc(100% - calc(var(--fade-size) * 0.4)),
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) calc(var(--fade-size) * 0.4),
            rgba(0, 0, 0, 1) var(--fade-size),
            rgba(0, 0, 0, 1) calc(100% - var(--fade-size)),
            rgba(0, 0, 0, 0.5) calc(100% - calc(var(--fade-size) * 0.4)),
            rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: relative;
}

#produkteList::-webkit-scrollbar { width: 8px; }
#produkteList::-webkit-scrollbar-thumb { background: #7f85e4; border-radius: 4px; }
#produkteList::-webkit-scrollbar-track { background: #2c2c46; }
#produkteList { scrollbar-width: thin; scrollbar-color: #7f85e4 #2c2c46; }

@supports not (mask-image: linear-gradient(black, white)) {
    #produkteList::before,
    #produkteList::after {
        content: "";
        position: sticky;
        left: 0; right: 0;
        height: var(--fade-size);
        pointer-events: none;
        z-index: 5;
    }
    #produkteList::before { top: 0; background: linear-gradient(to bottom, var(--fade-color) 0%, rgba(20,20,32,0) 90%); }
    #produkteList::after { bottom: 0; background: linear-gradient(to top, var(--fade-color) 0%, rgba(20,20,32,0) 90%); }
}

#produkteList.no-fade-top {
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) calc(100% - var(--fade-size)),
            rgba(0, 0, 0, 0.5) calc(100% - calc(var(--fade-size) * 0.4)),
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) calc(100% - var(--fade-size)),
            rgba(0, 0, 0, 0.5) calc(100% - calc(var(--fade-size) * 0.4)),
            rgba(0, 0, 0, 0) 100%);
}

#produkteList.no-fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) calc(var(--fade-size) * 0.4),
            rgba(0, 0, 0, 1) var(--fade-size),
            rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) calc(var(--fade-size) * 0.4),
            rgba(0, 0, 0, 1) var(--fade-size),
            rgba(0, 0, 0, 1) 100%);
}

#produkteList.no-fade-top.no-fade-bottom { -webkit-mask-image: none; mask-image: none; }