.anpviz-collection-wrap {
        display: flex !important;
        width: 100% !important;
        height: 85vh !important;
        min-height: 650px;
        background: #fff;
        overflow: hidden;
        overflow-x: hidden;
        font-family: 'Poppins', sans-serif;
        padding: 0 2% !important;
    }

    .fixed-sidebar {
        width: 420px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
        border-right: 1px solid #eee;
    }

    .showcase-header h1 {
        font-size: 36px;
        font-weight: 500;
        color: #444446;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .showcase-header h1::after {
        content: "";
        width: 50px;
        height: 3px;
        background: #BF1201;
        display: block;
    }

    .sidebar-middle-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .index-display {
        font-size: 80px;
        font-weight: 200;
        color: #111;
        line-height: 1;
    }

    .category-title {
        font-size: 32px;
        font-weight: 600;
        color: #111;
        margin: 10px 0;
        transition: opacity 0.3s ease;
        will-change: opacity;
    }

    .desc {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
        max-width: 300px;
        min-height: 4.5em;
        transition: opacity 0.3s ease;
        will-change: opacity;
    }


    /* =========================
       WAREHOUSE BUTTONS
       ========================= */

    .warehouse-buttons {
        display: none;
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 15px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .warehouse-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        height: 38px;
        padding: 0 15px;
        border: 1px solid #bf1205;
        border-radius: 10px;
        background: #bf1205;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none !important;
        transition: all 0.25s ease;
        white-space: nowrap;
    }

    .warehouse-btn:hover {
        background: #fff;
        color: #bf1205;
    }


    .progress-bar-container {
        width: 140px;
        height: 1px;
        background: #f0f0f0;
        margin-top: 15px;
        position: relative;
    }

    .progress-fill {
        position: absolute;
        height: 100%;
        background: #bf1205;
        width: 16.6%;
        transition: width 0.4s ease;
    }

    .nav-controls {
        display: flex;
        gap: 15px;
        margin-top: 35px;
    }

    .nav-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1.5px solid #eee;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        color: #bf1205;
    }

    .nav-btn:hover {
        background: #bf1205;
        color: #fff;
    }

    .scroll-hint {
        font-size: 10px;
        color: #ccc;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }


    /* =========================
       HORIZONTAL SCROLL
       ========================= */

    .horizontal-scroll-wrapper {
        flex: 1;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        align-items: center;
        -webkit-overflow-scrolling: touch;
    }

    .horizontal-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

    .series-card {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    scroll-snap-align: start;
    padding: 0 40px;
    display: flex;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
}

    .img-frame {
        height: 75vh;
        aspect-ratio: 650 / 700;
        border-radius: 30px;
        overflow: hidden;
        background: #fcfcfc;
        transition: transform 0.5s ease;
    }

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

    .scroll-spacer {
    flex: 0 0 auto;
    width: 50vw;
}

    /* =========================
       MOBILE
       ========================= */

    @media (max-width: 991px) {

        .anpviz-collection-wrap {
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            padding: 20px 0 !important;
        }

        .fixed-sidebar {
            display: contents;
        }

        .sidebar-top {
            order: 1 !important;
            padding: 0 20px;
            margin-bottom: 15px;
        }

        .showcase-header h1 {
            font-size: 24px;
        }

        .horizontal-scroll-wrapper {
            order: 2 !important;
            height: 45vh;
            margin-bottom: 20px;
        }

        .series-card {
            padding: 0 10px;
            width: 85vw;
            scroll-snap-align: start !important;
        }

        .img-frame {
            height: 100%;
            width: 100%;
            border-radius: 15px;
        }

        .scroll-spacer {
            display: none;
        }



        .sidebar-middle-content {
            order: 3 !important;
            padding: 0 20px;
            display: block;
        }

        .category-title,
        .desc {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            perspective: 1000;
        }

        .title-row-mobile {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
        }

        .index-display {
            font-size: 30px;
            font-weight: 300;
        }

        .category-title {
            font-size: 22px;
            margin: 0;
        }

        .desc {
            font-size: 14px;
            min-height: 3.5em;
            margin-bottom: 10px;
            line-height: 1.4;
        }


        /* Mobile Warehouse Buttons */

        .warehouse-buttons {
            gap: 8px;
            margin-top: 8px;
            margin-bottom: 12px;
        }

        .warehouse-btn {
            min-width: 0;
            flex: 1;
            height: 40px;
            padding: 0 10px;
            font-size: 13px;
        }


        .progress-bar-container {
            margin-top: 10px;
        }

        .nav-controls {
            margin-top: 15px;
            gap: 10px;
        }

        .nav-btn {
            width: 40px;
            height: 40px;
        }

        .sidebar-bottom {
            display: none !important;
        }
    }