.carousel-container {
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin: 1rem 0;
    position: relative;
    touch-action: pan-y;
}

.carousel-track {
    display: flex;
    width: max-content;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-item {
    flex: 0 0 auto;
    width: 250px;
    height: 100%;
    margin-right: 1rem;
    box-sizing: border-box;
    border: 1px solid #3C2F2F;
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(0, 0, 0, 0.3);
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2rem;
    font-family: Arial, sans-serif;
    padding: 1rem;
    border: none;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-prev[data-hidden="true"], .carousel-next[data-hidden="true"] {
    display: none;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

#main {
    overflow-x: hidden;
}

@media (max-width: 600px) {
    .carousel-container {
        height: 40vh;
    }
    .carousel-item {
        width: 70vw;
        margin-right: 0.5rem;
        width: 50vw;
        margin-right: 0;
        box-sizing: border-box;
    }
    .carousel-track {
        gap: 0;
    }
    .carousel-prev,
    .carousel-next {
        display: none;
    }
   .carousel-item img {
       object-fit: contain;
   }
}

.carousel-item { position: relative; overflow: hidden; }
.carousel-container.packs { height: 262px; } .carousel-item.packtile { width: 190px; height: auto; border: 0; box-shadow: none; background: none; overflow: visible; text-align: center; text-decoration: none; } .carousel-item.packtile .packstack { height: 200px; } .carousel-item.packtile .setname { font-size: 13px; color: #444; line-height: 1.35; }
.carousel-item .cover-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: rgba(0,0,0,.75); color: #fff;
    font-size: 18px; line-height: 1.35; letter-spacing: .3px; transform: translateY(100%); transition: transform .25s ease; pointer-events: none; }
.carousel-item .cover-info b:first-child { font-size: 21px; }
.carousel-item .cover-info .complete { color: #5ed65e; font-weight: bold; }
.carousel-item:hover .cover-info { transform: none; }
.carousel-item .cover-info i { font-style: normal; font-weight: bold; }
.cover-info .diff1 { color: #ddd; } .cover-info .diff2 { color: #5ed65e; } .cover-info .diff3 { color: #6a9bff; } .cover-info .diff4 { color: #c48cff; } .cover-info .diff5 { color: #ffd84d; } .cover-info .diff6 { color: #ff6b74; } .cover-info .diff7 { color: #fff; }
.carousel-item .cover-info .locked { color: #ff6b74; font-weight: bold; }
.carousel-item .cover-info .sample { color: #ffd84d; font-weight: bold; }

.carousel-item .beta-badge { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff; box-shadow: 0 0 0 1px #ddd; font: bold 17px/26px Georgia, serif; text-align: center; }
.carousel-item .merge-badge { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #ddd; display: flex; align-items: center; justify-content: center; }
.carousel-item .beta-badge + .merge-badge { right: 40px; }
.carousel-item .draft-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 8px; border-radius: 10px; background: #D3212D; color: #fff; font: bold 11px Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.carousel-item .merge-badge svg { width: 18px; height: 18px; color: #fff; }
.carousel-item .merge-badge.kind-puzzle svg { width: 21px; height: 21px; }

.carousel-item .count-badge { position: absolute; top: 8px; right: 8px; z-index: 2; min-width: 22px; padding: 2px 7px; border-radius: 12px; background: #D3212D; color: #fff; font-size: 12px; font-weight: bold; text-align: center; }
.sortrow { margin: 4px 0 8px; font-size: 14px; color: #3C2F2F; } .sortrow a { margin-left: 10px; } .sortrow b { margin-left: 10px; }
@media (max-width: 600px) {
    .carousel-container:not(.packs) { height: auto; }
    .carousel-item:not(.packtile) { width: 42vw; height: calc(42vw * 970 / 670); margin-right: 8px; border: 0; border-radius: 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
    .carousel-item:not(.packtile) img { object-fit: cover; }
}