/* Final storefront overrides; appended to mobile-performance.css in the delivered ZIP. */
.site-statbox-wrap {
    padding: clamp(28px, 5vw, 58px) 0 !important;
    background: transparent !important;
}
.site-statbox-container {
    display: grid !important;
    gap: clamp(14px, 2vw, 22px) !important;
    width: min(calc(100% - 32px), 940px) !important;
    padding: clamp(22px, 5.2vw, 56px) !important;
    border: 0 !important;
    border-radius: clamp(26px, 4vw, 46px) !important;
    background: var(--surface) !important;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--font) 10%, transparent) !important;
}
.site-statbox-head { display: none !important; }
.site-statbox-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(10px, 1.5vw, 16px) !important;
}
.site-stat-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    min-width: 0 !important;
    min-height: clamp(150px, 20.5vw, 220px) !important;
    padding: clamp(20px, 4vw, 34px) clamp(24px, 5vw, 48px) !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--font) 18%, var(--border)) !important;
    border-radius: clamp(18px, 2.4vw, 25px) !important;
    background: var(--background) !important;
    box-shadow: none !important;
    cursor: default !important;
    transition: none !important;
    transform: none !important;
}
.site-stat-card:hover,
.site-stat-card:active {
    background: var(--background) !important;
    border-color: color-mix(in srgb, var(--font) 18%, var(--border)) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}
.site-stat-card::before,
.site-stat-card::after { display: none !important; }
.site-stat-card .site-stat-icon,
.site-stat-card--sales .site-stat-icon,
.site-stat-card--topup .site-stat-icon,
.site-stat-card--users .site-stat-icon,
.site-stat-card--stock .site-stat-icon {
    position: absolute !important;
    z-index: 0 !important;
    right: clamp(-12px, 1vw, 12px) !important;
    bottom: clamp(-22px, -1vw, -8px) !important;
    display: grid !important;
    place-items: center !important;
    width: clamp(100px, 19vw, 206px) !important;
    height: clamp(100px, 19vw, 206px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--main) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .62 !important;
    transform: none !important;
    transition: none !important;
}
.site-stat-card .site-stat-icon .sf-icon {
    width: 100% !important;
    height: 100% !important;
    stroke-width: 1.55 !important;
}
.site-stat-card:hover .site-stat-icon,
.site-stat-card:focus-within .site-stat-icon {
    color: var(--main) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.site-stat-copy {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    max-width: min(72%, 560px) !important;
}
.site-stat-copy small {
    color: var(--font) !important;
    font-size: clamp(16px, 2.3vw, 28px) !important;
    line-height: 1.35 !important;
}
.site-stat-copy strong {
    color: var(--main) !important;
    font-size: clamp(34px, 5.4vw, 62px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
}
.site-stat-copy em {
    color: var(--muted) !important;
    font-size: clamp(13px, 1.8vw, 21px) !important;
    font-style: normal !important;
    line-height: 1.4 !important;
}

/* Keep category cards and their contents still. Only their images animate. */
.sf-storefront .sf-category-card--configured,
.sf-storefront .sf-category-card--configured:hover,
.sf-storefront .sf-category-card--configured:focus-visible,
.sf-storefront .sf-category-card--configured:active {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--background) 24%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--font) 4%, transparent) !important;
    border-color: color-mix(in srgb, var(--border) 82%, var(--main) 18%) !important;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--surface) 96%, var(--main) 4%),
        color-mix(in srgb, var(--surface) 98%, var(--background) 2%)) !important;
}
.sf-storefront .sf-category-card--configured .sf-category-media::before,
.sf-storefront .sf-category-card--configured .sf-category-media::after,
.sf-storefront .sf-category-card--configured .sf-category-media-glow,
.sf-storefront .sf-category-card--configured .sf-category-count-badge,
.sf-storefront .sf-category-card--configured .sf-category-title,
.sf-storefront .sf-category-card--configured .sf-category-action,
.sf-storefront .sf-category-card--configured .sf-category-action::before,
.sf-storefront .sf-category-card--configured .sf-category-action-icon {
    transition: none !important;
    animation: none !important;
}
.sf-storefront .sf-category-card--configured .sf-category-media::before,
.sf-storefront .sf-category-card--configured .sf-category-media::after,
.sf-storefront .sf-category-card--configured .sf-category-media-glow {
    display: none !important;
    opacity: 0 !important;
}
.sf-storefront .sf-category-card--configured:hover .sf-category-media::before,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-media::before,
.sf-storefront .sf-category-card--configured:hover .sf-category-media::after,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-media::after,
.sf-storefront .sf-category-card--configured:hover .sf-category-media-glow,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-media-glow {
    opacity: 0 !important;
    transform: none !important;
}
.sf-storefront .sf-category-card--configured:hover .sf-category-count-badge,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-count-badge,
.sf-storefront .sf-category-card--configured:hover .sf-category-title,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-title,
.sf-storefront .sf-category-card--configured:hover .sf-category-action,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-action,
.sf-storefront .sf-category-card--configured:hover .sf-category-action-icon,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-action-icon {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}
.sf-storefront .sf-category-card--configured:hover .sf-category-action,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-action,
.sf-storefront .sf-category-card--configured:active .sf-category-action {
    background: linear-gradient(135deg, var(--main), var(--sub)) !important;
    color: var(--on-primary) !important;
    border-color: color-mix(in srgb, var(--main) 70%, var(--sub) 30%) !important;
}
.sf-storefront .sf-category-card--configured .sf-category-photo {
    transition: transform .52s cubic-bezier(.22, .61, .36, 1), filter .52s ease !important;
    transform: scale(1) !important;
    filter: none !important;
    will-change: transform;
}
.sf-storefront .sf-category-card--configured:hover .sf-category-photo,
.sf-storefront .sf-category-card--configured:focus-visible .sf-category-photo {
    transform: scale(1.065) !important;
    filter: saturate(1.04) !important;
}
.sf-storefront .sf-category-card--configured:active .sf-category-photo { transform: scale(1.03) !important; }

/* Roomier horizontal StatBox on desktop. */
@media (min-width: 761px) {
    .site-statbox-container {
        width: min(calc(100% - 36px), 1120px) !important;
        padding: clamp(20px, 2.7vw, 32px) !important;
        gap: 14px !important;
    }
    .site-statbox-grid { gap: clamp(10px, 1.2vw, 16px) !important; }
    .site-statbox-grid.site-statbox-count-1 { grid-template-columns: minmax(0, 1fr) !important; }
    .site-statbox-grid.site-statbox-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .site-statbox-grid.site-statbox-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .site-statbox-grid.site-statbox-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .site-stat-card {
        min-height: 132px !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }
    .site-stat-card .site-stat-icon,
    .site-stat-card--sales .site-stat-icon,
    .site-stat-card--topup .site-stat-icon,
    .site-stat-card--users .site-stat-icon,
    .site-stat-card--stock .site-stat-icon {
        right: -3px !important;
        bottom: -8px !important;
        width: clamp(48px, 5.2vw, 64px) !important;
        height: clamp(48px, 5.2vw, 64px) !important;
        opacity: .5 !important;
    }
    .site-stat-copy { max-width: 82% !important; }
    .site-stat-copy small { font-size: clamp(13px, 1.25vw, 16px) !important; }
    .site-stat-copy strong { font-size: clamp(25px, 2.5vw, 34px) !important; }
    .site-stat-copy em { font-size: clamp(10px, .95vw, 12px) !important; }
}

@media (max-width: 560px) {
    .site-statbox-container {
        width: min(calc(100% - 24px), 940px) !important;
        padding: 14px !important;
    }
    .site-stat-card { min-height: 112px !important; padding: 15px 16px !important; border-radius: 17px !important; }
    .site-stat-card .site-stat-icon,
    .site-stat-card--sales .site-stat-icon,
    .site-stat-card--topup .site-stat-icon,
    .site-stat-card--users .site-stat-icon,
    .site-stat-card--stock .site-stat-icon {
        right: -9px !important;
        bottom: -13px !important;
        width: 82px !important;
        height: 82px !important;
    }
    .site-stat-copy { max-width: 78% !important; }
    .site-stat-copy small { font-size: 15px !important; }
    .site-stat-copy strong { font-size: 30px !important; }
    .site-stat-copy em { font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-storefront .sf-category-card--configured .sf-category-photo { transition: none !important; }
}