/**
 * Deepak Sales Stats Section
 * Premium luxury styling with CSS-only staggered animations,
 * responsive grid, and infinite hardware-accelerated marquee.
 */

.ds-stats {
    position: relative;
    background-color: var(--ds-oxblood);
    color: var(--ds-paper);
    padding: 2rem 0 var(--ds-space-xs); /* bottom padding added: tighter gap after the marquee, into Categories */
    margin-top: 0; /* ✅ Fix 1: Removed negative margin */
    overflow: hidden;
    z-index: 1;
}

.ds-stats__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.ds-stats__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
}

.ds-stats__inner {
    position: relative;
    z-index: 2;
}

/* Rewritten mobile-first (was desktop-first with raw px max-width
   overrides, the only file in the theme still doing that) so the 4-column
   breakpoint aligns with the theme's formal 62em (992px) desktop tier
   instead of the previous 1024px, and 640px becomes 40em to match the
   same 2-up tablet convention used in categories.css/shop-archive.css. */
.ds-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    border-top: 1px solid rgba(212,175,55,.05); /* Adjusted to match new subtle divider */
    border-bottom: 1px solid rgba(212,175,55,.05);
}

@media (min-width: 40em) {
    .ds-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62em) {
    .ds-stats__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Compact trust-strip sizing (reduced from a taller "second hero" style):
   vertical padding trimmed to --ds-space-md/--ds-space-sm (was a flat
   2.8rem/2rem), same tokens used for spacing elsewhere in the theme. */
.ds-stats__item {
    background: var(--ds-paper); /* ✅ Fix 2: Using design token */
    border: 1px solid rgba(212, 175, 55, 0.05); /* ✅ Fix 6: Subtler gold divider */
    border-radius: 0;
    padding: var(--ds-space-md) 1.5rem;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    /* ✅ Fix 8: Smoother, premium transitions */
    transition: transform .55s cubic-bezier(.22,1,.36,1),
                box-shadow .55s,
                background .4s,
                border-color .4s;
    opacity: 0;
    /* ✅ Fix 7: Slower, more luxurious fade up */
    animation: ds-stats-fade-up 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Inverted from the old desktop-first version: no right border by default
   (correct for the 1-2 column mobile/tablet layouts), only added once the
   grid is actually 4 across at the 62em tier. */
@media (min-width: 62em) {
    .ds-stats__item:not(:last-child) {
        border-right: 1px solid rgba(212,175,55,.05); /* Subtler gold divider */
    }
}

/* Mobile spacing adjustment */
@media (max-width: 48em) {
    .ds-stats__item {
        padding: var(--ds-space-sm) 1rem;
    }
}

.ds-stats__item:hover {
    /* ✅ Fix 4: Subtle elevation, no scaling */
    transform: translateY(-10px);
    background: #fffaf4; 
    border-color: rgba(212, 175, 55, 0.4);
    /* ✅ Fix 5: Softer, layered luxury shadow */
    box-shadow: 0 20px 45px rgba(0,0,0,.08),
                0 8px 20px rgba(91,15,26,.08);
}

.ds-stats__item:nth-child(1) { animation-delay: .1s; }
.ds-stats__item:nth-child(2) { animation-delay: .2s; }
.ds-stats__item:nth-child(3) { animation-delay: .3s; }
.ds-stats__item:nth-child(4) { animation-delay: .4s; }

.ds-stats__value {
    display: block;
    font-family: var(--ds-font-display);
    /* ~33% smaller than before (was clamp(3rem, 5vw, 4.2rem)) — a compact
       trust-strip figure, not a second hero number. */
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: var(--ds-oxblood);
    line-height: 1.1;
    margin-bottom: var(--ds-space-2xs); /* tighter gap to the label, was --ds-space-xs */
}

.ds-stats__label {
    display: block;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-small); /* was --ds-fs-body, one tier down */
    line-height: var(--ds-lh-snug); /* was unset (inherited the airier 1.65 body line-height) */
    color: var(--ds-oxblood);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* was 0.08em */
    opacity: 0.75;
}

/* margin-top trimmed from --ds-space-3xl (96px) to --ds-space-md (16px) —
   the stats cards → marquee gap is now tight, not a second section break.
   padding-block also trimmed (see below) to shrink the bar itself. */
.ds-stats__ticker {
    margin-top: var(--ds-space-md);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    background: rgba(0, 0, 0, 0.15);
    padding: var(--ds-space-xs) 0;
}

.ds-stats__ticker-viewport {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
}

.ds-stats__track {
    display: flex;
    width: fit-content;
    /* ✅ Fix 10: Slower, premium ticker speed */
    animation: ds-marquee 45s linear infinite; 
    will-change: transform;
}

.ds-stats__track:hover {
    animation-play-state: paused;
}

.ds-stats__ticker-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.ds-stats__tick {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ds-space-xl);
}

.ds-stats__tick-dot {
    display: inline-block;
    width: 4px; /* was 6px, scaled down with the rest of the marquee */
    height: 4px;
    border-radius: 50%;
    background-color: var(--ds-gold);
    margin-right: var(--ds-space-md);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}

/* font-size scaled to 90% of --ds-fs-h3 via calc() (a ~10% reduction)
   rather than touching the shared --ds-fs-h3 token itself, which is used
   sitewide (tabs, wholesale-info title, etc.). line-height was previously
   unset and inherited the much airier 1.65 body value — that alone made
   the marquee bar far taller than the text needed. */
.ds-stats__tick-title {
    font-family: var(--ds-font-display);
    font-size: calc(var(--ds-fs-h3) * 0.9);
    line-height: var(--ds-lh-snug);
    font-weight: 600;
    color: var(--ds-paper);
    margin-right: var(--ds-space-xs);
}

.ds-stats__tick-note {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-small);
    line-height: var(--ds-lh-snug); /* was unset/inherited 1.65, same fix as the title */
    font-style: italic;
    color: var(--ds-gold);
    opacity: 0.8;
}

@keyframes ds-stats-fade-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-stats__item {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .ds-stats__item:hover {
        transform: none;
    }
    
    .ds-stats__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    
    .ds-stats__ticker-viewport {
        overflow: visible;
        white-space: normal;
    }
    
    .ds-stats__ticker-list:nth-child(2) {
        display: none;
    }
    
    .ds-stats__ticker-list {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--ds-space-md);
    }
}