/* Fix for product thumbnail slider cutting off images */

/* Make thumbnail container scrollable for many images */
.detail-page-slider-nav-1.slick-vertical .slick-list {
    height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 0 !important; /* Remove padding */
}

/* Custom scrollbar styling */
.detail-page-slider-nav-1.slick-vertical .slick-list::-webkit-scrollbar {
    width: 6px;
}

.detail-page-slider-nav-1.slick-vertical .slick-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.detail-page-slider-nav-1.slick-vertical .slick-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.detail-page-slider-nav-1.slick-vertical .slick-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.detail-page-slider-nav-1.slick-vertical .slick-track {
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    height: auto !important; /* Allow track to expand to show all items */
}

/* Remove center padding that causes top margin */
.detail-page-slider-nav-1.slick-vertical {
    padding: 0 !important;
}

.detail-page-slider-nav-1.slick-vertical .slick-list:before,
.detail-page-slider-nav-1.slick-vertical .slick-list:after {
    display: none !important;
}

.detail-page-slider-nav-1 .slide-item {
    margin-bottom: 10px;
    height: auto !important;
}

.detail-page-slider-nav-1 .slide-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 90px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.detail-page-slider-nav-1 .slide-item img:hover {
    opacity: 0.8;
}

/* Active thumbnail highlight */
.detail-page-slider-nav-1 .slick-current .slide-item img {
    border: 2px solid #c4a747;
}

/* Ensure thumbnails are properly positioned */
.detail-page-slider-nav-1.slick-initialized .slick-slide {
    margin-bottom: 10px;
    height: auto !important;
    min-height: 0 !important;
}

/* Override Slick's height calculation to show all items */
.detail-page-slider-nav-1.slick-vertical .slick-slide {
    height: auto !important;
    min-height: 0 !important;
}

/* Make sure all slides are visible */
.detail-page-slider-nav-1 .slick-slide {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .detail-page-slider-nav-1 .slick-list {
        height: auto !important;
    }
    
    .detail-page-slider-nav-1 .slick-track {
        display: flex !important;
        align-items: center;
    }
    
    .detail-page-slider-nav-1 .slide-item img {
        max-height: 70px;
    }
}