/* BEST SELLERS SECTION - MINIMALISTIC & ELEGANT */
.best-sellers-section {
    margin: 32px 0;
    background: linear-gradient(135deg, #fffaf2, #fffef8);
    border-radius: 12px;
    padding: 24px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Background elements for best sellers section */
.best-sellers-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.best-sellers-bg-element {
    position: absolute;
    font-size: 1.3rem;
    opacity: 0.05;
    pointer-events: none;
    animation: bestSellersFloat 11s ease-in-out infinite;
}

.best-sellers-bg-element.trophy { color: #ffd700; }
.best-sellers-bg-element.star { color: #ff6b4a; }
.best-sellers-bg-element.crown { color: #ffa500; }
.best-sellers-bg-element.medal { color: #c0c0c0; }
.best-sellers-bg-element.heart { color: #ff69b4; }
.best-sellers-bg-element.ribbon { color: #ff1493; }

@keyframes bestSellersFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-5px) rotate(2deg) scale(1.03); }
    50% { transform: translateY(-10px) rotate(3deg) scale(0.97); }
    75% { transform: translateY(-5px) rotate(1deg) scale(1.01); }
}

/* Container for horizontal scrolling */
.best-sellers-container {
    position: relative;
    width: 100%;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 2;
}

/* Track for product cards */
.best-sellers-track {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    align-items: flex-start;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.best-sellers-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Loading skeletons */
.best-sellers-loading {
    display: flex;
    gap: 16px;
    animation: fadeOut 0.5s ease-out 2s forwards;
}

.best-seller-card-skeleton {
    min-width: 260px;
    width: 260px;
    height: 450px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

/* Shimmer: a band swept across with transform, so it runs on the compositor
   (an animated background-position restyles and repaints every frame on the
   main thread). Two sweeps cover the 2.5s before the skeletons fade out;
   an infinite one kept running, invisible, for as long as they stayed. */
.best-seller-card-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
    transform: translateX(-100%);
    animation: best-seller-skeleton-sweep 1.5s ease-in-out 2;
}

@keyframes best-seller-skeleton-sweep {
    to { transform: translateX(100%); }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

/* Product card in Best Sellers - Reuse New Arrivals styles */
.best-sellers-track .product-card {
    min-width: 260px;
    width: 260px;
    min-height: 450px;
    background: #ffffff;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    scroll-snap-align: start;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.best-sellers-track .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation delays */
.best-sellers-track .product-card:nth-child(1) { animation-delay: 0.1s; }
.best-sellers-track .product-card:nth-child(2) { animation-delay: 0.2s; }
.best-sellers-track .product-card:nth-child(3) { animation-delay: 0.3s; }
.best-sellers-track .product-card:nth-child(4) { animation-delay: 0.4s; }
.best-sellers-track .product-card:nth-child(5) { animation-delay: 0.5s; }
.best-sellers-track .product-card:nth-child(6) { animation-delay: 0.6s; }
.best-sellers-track .product-card:nth-child(7) { animation-delay: 0.7s; }
.best-sellers-track .product-card:nth-child(8) { animation-delay: 0.8s; }
.best-sellers-track .product-card:nth-child(9) { animation-delay: 0.9s; }
.best-sellers-track .product-card:nth-child(10) { animation-delay: 1s; }

/* Product image container */
.best-sellers-track .product-image-container {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #f9f9f9;
    border-radius: 12px 12px 0 0;
}

/* Image slider container */
.best-sellers-track .product-images-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Individual image slides */
.best-sellers-track .product-image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.best-sellers-track .product-image-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.best-sellers-track .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.best-sellers-track .product-card:hover .product-image {
    transform: scale(1.08);
}

/* Product info section */
.best-sellers-track .product-info {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
}

.best-sellers-track .product-brand {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    line-height: 1.2;
}

.best-sellers-track .product-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: auto;
    max-height: 2.8em;
}

/* Variant availability indicator */
.best-sellers-track .variant-info {
    font-size: 0.8rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 4px 0;
}

.best-sellers-track .variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f0f0f0;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #555;
    white-space: nowrap;
}

.best-sellers-track .variant-badge.in-stock {
    background: #e8f5e9;
    color: #2e7d32;
}

.best-sellers-track .variant-badge.low-stock {
    background: #fff3e0;
    color: #ef6c00;
}

.best-sellers-track .variant-badge.out-of-stock {
    background: #ffebee;
    color: #c62828;
}

/* Actual size chips on the card, with strikethrough for out-of-stock sizes */
.best-sellers-track .size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 2px;
}

.best-sellers-track .size-chip {
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    font-size: 0.68rem;
    line-height: 1.2;
    color: #444;
    white-space: nowrap;
}

.best-sellers-track .size-chip.out-of-stock {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Price section */
.best-sellers-track .product-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
}

.best-sellers-track .current-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1b7b89;
    line-height: 1.2;
}

.best-sellers-track .original-price {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    line-height: 1.2;
}

.best-sellers-track .discount-percentage {
    font-size: 0.75rem;
    color: #ff6b4a;
    font-weight: 600;
    background: #ffe5e0;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Navigation buttons */
.best-sellers-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.best-sellers-nav:hover:not(:disabled) {
    background: #ff6b4a;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 18px rgba(255, 107, 74, 0.4);
}

.best-sellers-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.best-sellers-prev {
    left: 8px;
}

.best-sellers-next {
    right: 8px;
}

/* Progress indicators - Hidden */
.best-sellers-progress {
    display: none;
}

/* Product labels - Hidden */
.best-sellers-track .product-labels {
    display: none;
}

.best-sellers-track .label {
    display: none;
}

/* Wishlist button - Hidden */
.best-sellers-track .product-actions {
    display: none;
}

.best-sellers-track .wishlist-btn {
    display: none;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .best-sellers-section {
        margin: 24px 0;
        padding: 16px 0;
    }
    
    .best-sellers-container {
        height: 420px;
    }
    
    .best-sellers-track {
        gap: 12px;
        padding: 0 12px;
    }
    
    .best-sellers-track .product-card {
        min-width: 240px;
        width: 240px;
        min-height: 400px;
    }
    
    .best-sellers-track .product-image-container {
        height: 220px;
    }
    
    .best-sellers-track .product-info {
        padding: 12px;
        min-height: 160px;
    }
    
    .best-sellers-nav {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .best-sellers-container {
        height: 450px;
    }
    
    .best-sellers-track .product-card {
        min-width: 280px;
        width: 280px;
        min-height: 430px;
    }
    
    .best-sellers-track .product-image-container {
        height: 260px;
    }
    
    .best-sellers-track .product-info {
        padding: 16px;
        min-height: 170px;
    }
}

@media (min-width: 992px) {
    .best-sellers-container {
        height: 480px;
    }
    
    .best-sellers-track {
        gap: 20px;
        padding: 0 20px;
    }
    
    .best-sellers-track .product-card {
        min-width: 300px;
        width: 300px;
        min-height: 450px;
    }
    
    .best-sellers-track .product-image-container {
        height: 260px;
    }
    
    .best-sellers-track .product-info {
        padding: 18px;
        min-height: 180px;
        gap: 10px;
    }
    
    .best-sellers-track .product-name {
        font-size: 1rem;
    }
    
    .best-sellers-track .current-price {
        font-size: 1.25rem;
    }
}

/* Accessibility - reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .best-sellers-track .product-card,
    .best-sellers-bg-element,
    .best-sellers-nav,
    .best-seller-card-skeleton::after {
        animation: none !important;
        transition: none !important;
    }
    
    .best-sellers-track {
        scroll-behavior: auto;
    }
}

/* EQUAL-HEIGHT CARDS: each card used to keep its own height (cards aligned
   to the top of a fixed-height track), so a product with more sizes or a
   longer name stood taller than its neighbours. The container now sizes to
   the tallest card and every card stretches to match (the price is already
   pinned to the bottom). The vertical padding keeps the hover lift and the
   card shadow from being clipped. */
.best-sellers-container {
    height: auto;
}

.best-sellers-track {
    height: auto;
    align-items: stretch;
    padding-top: 10px;
    padding-bottom: 16px;
}