.tracklist_x9D2a {
    width: 100%;
    margin: var(--margin-tb) 0;
    /* padding: 0 var(--padding-lr); */
    position: relative;
    z-index: 1;
    padding-top:0rem;
}
.tracklist_x9D2a .swiper-slide-active .item_inner{
   transform: translateY(-2rem);
   
}
.track_item:hover .item_inner{
   transform: translateY(-2rem);
   
}
.tracklist_x9D2a .track_wrapper {
    background-color: var(--track-bg-color);
    /* Reduced padding to allow hover effect to exceed track */
    border-radius: 0;
    position: relative;
    /* Ensure items can pop out */
    overflow: visible; 
}

.tracklist_x9D2a .track_list {
    /* Swiper container default is hidden, we need visible for popout */
    overflow: visible;
    position: relative;
    z-index: 2;
    padding: 0 1rem; /* Add some padding for arrows space if needed */
}

.tracklist_x9D2a .track_list .swiper-wrapper {
    will-change: transform;
}

.tracklist_x9D2a .swiper-slide {
    /* Default Swiper Slide Styles */
    height: auto; /* Allow flex stretch */
    /* Make swiper slide transparent wrapper */
    background: transparent;
    display: flex; /* Enable flex for child height stretch if needed */
    /* Add padding to slide to create gap instead of using spaceBetween */
    /* padding: 0 10px;  Moved to JS or CSS gap handling */
    
    /* Important: Allow content to overflow slide boundary for popout */
    overflow: visible;
}

.tracklist_x9D2a .track_item {
    background-color: var(--item-bg-color);
    width: 100%; /* Fill the slide */
    padding: var(--item-padding) var(--item-padding) 0 var(--item-padding);
    border-radius: var(--item-border-radius);
    
    /* Use margin for expansion instead of transform scale to preserve layout flow if needed? */
    /* Actually, to keep gap, we should use negative margins on hover or absolute positioning? */
    /* But user wants to NOT cover other items. */
    /* If we just want to pop out vertically, we can use margin-top/bottom transition */
    
    
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    /* Initial state */
    z-index: 1;
    box-sizing: border-box; 
    height: 100%; /* Fill slide height */
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* Hover Effects - Expansion Strategy */
@media (min-width: 768px) {
    /* When hovered, we expand the item vertically */
.tracklist_x9D2a .track_item {
    position: relative;
}
.tracklist_x9D2a .item_inner {
    position: relative;
    z-index: 2;
    width: 100%;
    transition: transform .3s ease;
}
.tracklist_x9D2a .track_item:hover {
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 100%;
    background-color: var(--theme-color);
    /* transition: background-color .3s ease, box-shadow .3s ease; */
}
    
    /* Active slide keeps the same expanded effect */
.tracklist_x9D2a .swiper-slide-active .track_item {
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 100%;
    background-color: var(--theme-color);
    transition: background-color .3s ease, box-shadow .3s ease;
}
    
    /* Show CTA for active slide */
    .tracklist_x9D2a .swiper-slide-active .item_actions {
       
        opacity: 1;
        pointer-events: auto;
    }
    .tracklist_x9D2a .swiper-slide-active .item_cta {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        width: 80%;
    }
    
    /* Disable the sibling scale down effect since we are not scaling anymore */
    .tracklist_x9D2a .track_list:hover .track_item {
        transform: none;
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .tracklist_x9D2a .track_item::before,
    .tracklist_x9D2a .track_item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        background: var(--item-bg-color);
        border-top-left-radius: var(--item-border-radius);
        border-top-right-radius: var(--item-border-radius);
        transition: top .3s ease, bottom .3s ease, height .3s ease, background-color .3s ease;
        pointer-events: none;
        z-index: 1;
    }
    .tracklist_x9D2a .track_item::before {
        height: 0;
        top: 0;
    }
    .tracklist_x9D2a .track_item::after {
        height: 0;
        bottom: 0;
        border-bottom-left-radius: var(--item-border-radius);
        border-bottom-right-radius: var(--item-border-radius);
    }
    .tracklist_x9D2a .track_item:hover::before,
    .tracklist_x9D2a .swiper-slide-active .track_item::before {
        height: var(--extend-top, 3rem);
        top: calc(-1 * var(--extend-top, 3rem));
        background: var(--theme-color);
    }
    .tracklist_x9D2a .track_item:hover::after,
    .tracklist_x9D2a .swiper-slide-active .track_item::after {
        height: var(--extend-bottom, 3rem);
        bottom: calc(-1 * var(--extend-bottom, 3rem));
        background: var(--theme-color);
    }
}

/* Mobile behavior - no expansion */
@media (max-width: 767px) {
    .tracklist_x9D2a .track_item:hover {
        /* Mobile just subtle lift */
        transform: translateY(-5px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
}

.tracklist_x9D2a .custom_image_wrapper {
    width: 100%;
    aspect-ratio: var(--image_ratio, 1 / 1);
    border-radius: var(--image_shape, 0%);
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
}

.tracklist_x9D2a .custom_image {
    width: 100%;
    height: 100%;
    object-fit: var(--image_fit, cover);
    display: block;
    transition: opacity 0.5s ease;
}

.tracklist_x9D2a .custom_image_secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--image_fit, cover);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

/* Hover effect for secondary image */
.tracklist_x9D2a .track_item:hover .custom_image_secondary {
    opacity: var(--show-secondary-image, 1);
}

.tracklist_x9D2a .track_item:hover .custom_image_wrapper:has(.custom_image_secondary) .custom_image {
    opacity: calc(1 - var(--show-secondary-image, 1));
}

.tracklist_x9D2a .item_question {
    font-size: var(--title-size);
    color:var(--question-color);
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tracklist_x9D2a .item_answer {
    font-size: var(--description-size);
    color: var(--answer-color);
    line-height: 1.6;
    min-height: calc(var(--description-size) * 1.6 * 2);
    /* Multi-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tracklist_x9D2a .track_item:hover .item_actions{
   visibility: visible;
   opacity: 1;
}
    
/* CTA button area (hidden by default, show on hover) */
.tracklist_x9D2a .item_actions {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    
    opacity: 1;
    
    pointer-events: none;
    visibility: visible;
    
}

.tracklist_x9D2a .item_cta {
    font-size: var(--button-size, 1.4rem);
    color: var(--item-button-text-color, #fff);
   
    border: 1px solid var(--item-button-border-color, transparent);
    padding: 1rem 2.5rem;
    border-radius: var(--item_button_radius);
    text-decoration: none;
    
   width: 80%;
    visibility: hidden;
    pointer-events: none;
}

.tracklist_x9D2a .track_item:hover .item_cta {
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
   visibility: visible;
  
}
.tracklist_x9D2a .item_cta:hover {
    border-color: transparent;
}

.tracklist_x9D2a .swiper-slide-active .item_cta{
    visibility: visible;
}

/* 悬停时展示按钮容器，占位并自然顶上内容 */
.tracklist_x9D2a .track_item:hover .item_actions {
    
    opacity: 1;
    pointer-events: auto;
}

.tracklist_x9D2a .item_cta:hover {
    background-color: var(--item-button-hover-bg-color, #10d048);
}

/* Navigation Buttons */
.tracklist_x9D2a .swiper-button-prev,
.tracklist_x9D2a .swiper-button-next {
    width: 4rem;
    height: 4rem;
    background: var(--button-bg-color, rgba(255,255,255,0.9));
    border-radius: 50%;
    color: var(--button-text-color, #333);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20; /* Higher than track items hover z-index which is 10 */
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    margin-top: calc(var(--button-size, 4rem) / -2);
}
.tracklist_x9D2a .swiper-button-prev:hover,
.tracklist_x9D2a .swiper-button-next:hover {
    background-color: var(--theme-color) !important;
    color: #fff;
}

/* Remove default Swiper arrows */
.tracklist_x9D2a .swiper-button-prev::after,
.tracklist_x9D2a .swiper-button-next::after {
    display: none;
}

.tracklist_x9D2a .swiper-button-prev:hover,
.tracklist_x9D2a .swiper-button-next:hover {
    background: var(--button-hover-bg-color, #ffffff);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.tracklist_x9D2a .swiper-button-prev {
    left: 2rem; 
}

.tracklist_x9D2a .swiper-button-next {
    right: 2rem; 
}

.tracklist_x9D2a .swiper-button-prev .yiyingbaoicon,
.tracklist_x9D2a .swiper-button-next .yiyingbaoicon {
    font-size: 2rem;
}


/* Pad styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .tracklist_x9D2a .item_question {
        font-size: calc(var(--title-size) * 0.97);
    }
    .tracklist_x9D2a .item_answer {
        font-size: calc(var(--description-size) * 0.97);
        min-height: calc(calc(var(--description-size) * 0.97) * 1.6 * 2);
    }
    .tracklist_x9D2a .item_cta {
        font-size: calc(var(--button-size, 1.4rem) * 0.97);
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .tracklist_x9D2a .item_question {
        font-size: calc(var(--title-size) * 0.9);
    }
    .tracklist_x9D2a .item_answer {
        font-size: calc(var(--description-size) * 0.9);
        min-height: calc(calc(var(--description-size) * 0.9) * 1.6 * 2);
    }
    
    /* Mobile Swiper behavior is handled by JS/Swiper, but we ensure styling is okay */
    .tracklist_x9D2a .track_item {
        width: 100%;
    }
    .tracklist_x9D2a .item_cta {
        font-size: calc(var(--button-size, 1.4rem) * 0.9);
    }
    
    .tracklist_x9D2a .track_item{
        padding: 0rem !important;
    }
    .track_item:hover .item_inner{
        /*  */
        transform: translateY(0) !important;
    }
    .tracklist_x9D2a .track_item:hover{
        transform: translateY(0) !important;
        box-shadow:none !important;
    }
    .tracklist_x9D2a .track_list{
        padding: 0 !important;
    }
    .tracklist_x9D2a .swiper-slide-active .item_inner{
        transform: translateY(0) !important;
    }
    .tracklist_x9D2a .item_actions{
        visibility: visible !important;
    }
    .tracklist_x9D2a .swiper-slide{
        padding: 2rem !important;
        box-sizing: border-box;
    }
}