/* Mobile performance pass: preserve the visual hierarchy while avoiding expensive blur, filter and hover work. */
@media (max-width: 760px), (pointer: coarse) {
    .site-header,
    body.storefront-page .site-header {
        background: var(--background) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.storefront-page .site-navigation {
        contain: layout paint;
        box-shadow: -10px 0 30px color-mix(in srgb, var(--background) 25%, transparent) !important;
    }

    body.storefront-page .site-navigation > a {
        transition: transform .2s ease, opacity .2s ease, background .16s ease, border-color .16s ease !important;
        transition-delay: 0ms !important;
    }

    body.storefront-page .sf-hero--configured .sf-hero-slide::before,
    .sf-storefront .sf-category-card--configured::before,
    .sf-storefront .sf-category-media-glow {
        display: none !important;
    }

    .sf-storefront .sf-category-card--configured {
        contain: layout paint;
        transform: none !important;
        transition: none !important;
        box-shadow: 0 5px 16px color-mix(in srgb, var(--background) 15%, transparent) !important;
    }

    .sf-storefront .sf-category-card--configured .sf-category-photo,
    .sf-storefront .sf-category-card--configured .sf-category-title,
    .sf-storefront .sf-category-card--configured .sf-category-action,
    .sf-storefront .sf-category-count-badge {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .sf-storefront .sf-category-count-badge,
    .sf-storefront .sf-category-card--configured > .sf-category-media > .sf-image-placeholder {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sf-storefront .sf-category-media::before,
    .sf-storefront .sf-category-action::before {
        display: none !important;
        content: none !important;
    }

    .sf-storefront .sf-product-slide {
        transition-duration: .35s !important;
    }

    .sf-storefront .sf-product-card {
        contain: layout paint;
        content-visibility: auto;
        contain-intrinsic-size: 320px 280px;
        transition: border-color .2s ease !important;
        box-shadow: none !important;
    }

    .sf-storefront .sf-product-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .sf-storefront .sf-stock-badge {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sf-storefront .sf-quick-card {
        transition: border-color .2s ease, background-color .2s ease !important;
        box-shadow: none !important;
    }

    body.storefront-page.has-site-background,
    body.storefront-page[style*="--site-bg-image"] {
        background-attachment: local !important;
    }
}

@media (max-width: 760px), (pointer: coarse) {
    .sf-storefront .sf-purchase-marquee {
        touch-action: pan-y;
    }

    .sf-storefront .sf-purchase-track {
        animation-duration: 42s;
    }

    .sf-storefront .sf-purchase-marquee.is-user-paused .sf-purchase-track {
        animation-play-state: paused;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .site-navigation {
        will-change: transform !important;
    }

    .site-navigation > a,
    .navigation-toggle {
        will-change: auto !important;
    }
}

/* Mobile smooth motion: restore lightweight touch feedback without bringing
   back expensive blur, filter, or large hover layers. */
@media (max-width: 760px) {
    body.storefront-page .site-navigation {
        transition-timing-function: cubic-bezier(.22,.75,.25,1) !important;
        will-change: transform !important;
    }

    body.storefront-page .site-navigation > a {
        transform: translate3d(12px, 0, 0) !important;
        opacity: 0 !important;
        transition: transform .28s cubic-bezier(.22,.75,.25,1), opacity .22s ease, background-color .18s ease, border-color .18s ease !important;
        transition-delay: 0ms !important;
    }

    body.storefront-page .site-navigation.is-open > a,
    body.storefront-page.navigation-open .site-navigation > a {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    body.storefront-page .site-navigation.is-open > a:nth-child(2),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(2) { transition-delay: .03s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(3),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(3) { transition-delay: .06s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(4),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(4) { transition-delay: .09s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(5),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(5) { transition-delay: .12s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(6),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(6) { transition-delay: .15s !important; }

    .navigation-toggle {
        transform: translateZ(0);
        transition: transform .22s cubic-bezier(.22,.75,.25,1), background-color .18s ease, border-color .18s ease !important;
    }
    .navigation-toggle:active { transform: scale(.92) !important; }

    .sf-storefront .sf-category-card--configured {
        transform: translateZ(0) !important;
        transition: transform .28s cubic-bezier(.22,.75,.25,1), border-color .22s ease, box-shadow .22s ease !important;
        box-shadow: 0 8px 22px color-mix(in srgb, var(--background) 18%, transparent) !important;
    }
    .sf-storefront .sf-category-card--configured:active {
        transform: translate3d(0, -2px, 0) scale(.992) !important;
        border-color: color-mix(in srgb, var(--main) 58%, var(--border)) !important;
        box-shadow: 0 12px 27px color-mix(in srgb, var(--background) 24%, transparent) !important;
    }
    .sf-storefront .sf-category-card--configured .sf-category-photo {
        transform: translateZ(0);
        transition: transform .36s cubic-bezier(.22,.75,.25,1) !important;
    }
    .sf-storefront .sf-category-card--configured:active .sf-category-photo {
        transform: scale(1.018) !important;
    }
    .sf-storefront .sf-category-card--configured .sf-category-title,
    .sf-storefront .sf-category-card--configured .sf-category-action,
    .sf-storefront .sf-category-count-badge {
        transform: translateZ(0) !important;
        transition: transform .24s cubic-bezier(.22,.75,.25,1), opacity .2s ease, color .18s ease !important;
    }

    .sf-storefront .sf-product-card {
        transition: transform .24s cubic-bezier(.22,.75,.25,1), border-color .2s ease, box-shadow .2s ease !important;
        box-shadow: 0 7px 18px color-mix(in srgb, var(--background) 16%, transparent) !important;
    }
    .sf-storefront .sf-product-card:active,
    .sf-storefront .sf-product-card:focus-within {
        transform: translate3d(0, -2px, 0) scale(.995) !important;
        border-color: color-mix(in srgb, var(--main) 55%, var(--border)) !important;
        box-shadow: 0 11px 24px color-mix(in srgb, var(--background) 22%, transparent) !important;
    }

    .sf-storefront .sf-quick-card,
    .sf-storefront .sf-quick-card--configured {
        transform: translateZ(0);
        transition: transform .24s cubic-bezier(.22,.75,.25,1), border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
        box-shadow: 0 7px 18px color-mix(in srgb, var(--background) 14%, transparent) !important;
    }
    .sf-storefront .sf-quick-card:active,
    .sf-storefront .sf-quick-card--configured:active {
        transform: scale(.986) !important;
        border-color: color-mix(in srgb, var(--main) 55%, var(--border)) !important;
    }

    .sf-storefront .sf-button,
    .sf-storefront .sf-product-button,
    .sf-storefront .sf-category-action {
        transition: transform .2s cubic-bezier(.22,.75,.25,1), background-color .18s ease, border-color .18s ease, color .18s ease !important;
        touch-action: manipulation;
    }
    .sf-storefront .sf-button:active,
    .sf-storefront .sf-product-button:active,
    .sf-storefront .sf-category-action:active {
        transform: scale(.97) !important;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .motion-ready-mobile [data-reveal].is-visible {
        animation-duration: .42s;
    }
}

/* Second mobile pass: remove the remaining paint-heavy layers from the
   StatBox/review area and make its cards feel like display-only surfaces. */
@media (max-width: 760px) {
    .site-statbox-wrap {
        background: color-mix(in srgb, var(--surface) 9%, transparent) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .site-stat-card,
    .site-stat-card * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .site-stat-card {
        cursor: default !important;
        touch-action: manipulation;
        background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, transparent), var(--surface)) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--background) 17%, transparent) !important;
        transition: transform .18s cubic-bezier(.22,.75,.25,1), border-color .18s ease, box-shadow .18s ease !important;
    }
    .site-stat-card::before,
    .site-stat-card::after {
        display: none !important;
        content: none !important;
    }
    .site-stat-card:hover {
        transform: none !important;
        filter: none !important;
        border-color: color-mix(in srgb, var(--font) 9%, transparent) !important;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--background) 17%, transparent) !important;
    }
    .site-stat-card:active {
        transform: scale(.992) !important;
        border-color: color-mix(in srgb, var(--font) 9%, transparent) !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--background) 22%, transparent) !important;
    }
    .site-stat-card:hover .site-stat-icon,
    .site-stat-card:focus-within .site-stat-icon {
        transform: none !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--main) 11%, transparent) !important;
    }
    .site-stat-icon {
        box-shadow: 0 8px 18px color-mix(in srgb, var(--main) 11%, transparent) !important;
        transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .site-review-marquee {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        contain: paint;
    }
    .site-review-track {
        animation-duration: 52s !important;
        will-change: transform;
    }
    .site-review-card {
        background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 5px 14px color-mix(in srgb, var(--background) 14%, transparent) !important;
        transition: none !important;
    }

    .sf-storefront .sf-category-card--configured {
        box-shadow: 0 6px 15px color-mix(in srgb, var(--background) 16%, transparent) !important;
    }
    .sf-storefront .sf-category-card--configured:active {
        box-shadow: 0 9px 19px color-mix(in srgb, var(--background) 20%, transparent) !important;
    }
    .sf-storefront .sf-product-card {
        box-shadow: 0 4px 12px color-mix(in srgb, var(--background) 14%, transparent) !important;
    }
    .sf-storefront .sf-product-card:active,
    .sf-storefront .sf-product-card:focus-within {
        box-shadow: 0 7px 16px color-mix(in srgb, var(--background) 19%, transparent) !important;
    }
    .sf-storefront .sf-quick-card,
    .sf-storefront .sf-quick-card--configured {
        box-shadow: 0 4px 12px color-mix(in srgb, var(--background) 12%, transparent) !important;
    }

    /* Touch browsers may keep :hover alive after a tap. Never start the
       decorative shine loop there; it is visual-only and costs a repaint. */
    .sf-storefront .sf-product-card:hover::after,
    .sf-storefront .sf-product-button:hover::before {
        animation: none !important;
        opacity: 0 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Mobile boost v2 (2026-09-28)
   Goal: keep every animation, but make each one cheap for phones.
   Rules of thumb used here:
   - animate only transform/opacity (compositor-only), never filter/blur/shadow
   - promote a layer only while it is actually moving
   - pause endless loops when they are scrolled out of view
   - skip layout/paint work for sections far below the fold
   ========================================================================== */

/* Loops that scrolled out of view stop ticking (class toggled by app.js). */
.is-offscreen,
.is-offscreen *,
.is-offscreen::before,
.is-offscreen::after { animation-play-state: paused !important; }

@media (max-width: 960px), (pointer: coarse) {
    /* Faster taps, no double-tap-zoom delay. */
    a, button, summary, label, input, select, textarea { touch-action: manipulation; }

    /* Below-the-fold sections are laid out and painted only when near the screen. */
    .sf-storefront .sf-section + .sf-section,
    .sf-storefront .sf-section--activity ~ .sf-section,
    .site-statbox-wrap,
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 560px;
    }

    /* Menu overlay: solid tint instead of a full-screen blur. */
    body.navigation-open::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Hero carousel: only the two slides that are moving get their own layer. */
    .sf-storefront .sf-hero--configured .sf-hero-slide { will-change: auto; }
    .sf-storefront .sf-hero--configured .sf-hero-slide.is-active,
    .sf-storefront .sf-hero--configured .sf-hero-slide.is-leaving { will-change: opacity, transform; }
    .sf-storefront .sf-hero--configured .sf-hero-slide > img { backface-visibility: hidden; }

    /* Marquees: one composited layer, transform-only movement. */
    .sf-storefront .sf-purchase-track,
    .site-review-track { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
    .sf-storefront .sf-purchase-marquee { contain: paint; }

    /* Falling particles: each flake is its own light layer, the layer itself is fixed. */
    .christmas-particle-layer { transform: translateZ(0); }
    .christmas-particle { will-change: transform; backface-visibility: hidden; }

    /* Footer logo bounce keeps bouncing, but without leaving a layer behind. */
    .footer-logo-bounce { backface-visibility: hidden; }

    /* Loading screen: same look, cheaper glow. */
    .site-loading-glow { filter: none; }
    .site-loading-progress i { box-shadow: 0 0 8px color-mix(in srgb, var(--main) 60%, transparent); will-change: transform; }

    /* ---- Landing / welcome page: identical motion, no per-frame filters ---- */
    .landing-gateway__bg { animation-name: landing-bg-breathe-lite; will-change: transform; }
    .landing-gateway__art img,
    .landing-gateway__art span {
        animation-name: landing-logo-float-lite;
        will-change: transform;
        filter: drop-shadow(0 22px 34px rgba(0,0,0,.24));
    }
    .landing-gateway__art::before {
        box-shadow: inset 0 0 40px rgba(255,255,255,.05), 0 0 56px color-mix(in srgb, var(--main) 20%, transparent);
        will-change: transform;
    }
    .landing-gateway__art::after {
        filter: none;
        mix-blend-mode: normal;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
    }
    .landing-gateway__orb--one,
    .landing-gateway__orb--two { will-change: transform; }
    .landing-gateway__spark { box-shadow: 0 0 14px rgba(255,255,255,.45); }
    .landing-gateway__button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

    /* Admin on phones: sticky bars use a solid surface instead of blur. */
    .admin-page .admin-topbar,
    .admin-topbar,
    .admin-context-tabs,
    .admin-page .admin-context-tabs,
    .admin-page .modal-footer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@keyframes landing-bg-breathe-lite { from { transform: scale(1.03); } to { transform: scale(1.07); } }
@keyframes landing-logo-float-lite {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
    50%      { transform: translate3d(0, -14px, 0) rotate(-4deg) scale(1.02); }
}

/* Older / low-memory phones (class set by app.js): trim only the purely decorative loops. */
.perf-lite .landing-gateway__spark,
.perf-lite .landing-gateway__orb--two,
.perf-lite .landing-gateway__art::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .landing-gateway__bg,
    .landing-gateway__art img,
    .landing-gateway__art span,
    .landing-gateway__art::before { animation: none !important; }
}

/* Background images are painted once on the document. Older rules created a
   fixed image layer in addition to the body image, which was especially costly
   while scrolling on phones and could leave a cropped/stacked mobile result. */
body.storefront-page.has-site-background,
body.storefront-page[style*="--site-bg-image"] {
    background-image: none !important;
    background-attachment: scroll !important;
}
body.storefront-page.has-site-background > .site-background-layer,
body.storefront-page[style*="--site-bg-image"] > .site-background-layer,
body.storefront-page .sf-home-background {
    display: block !important;
}
body.storefront-page.has-site-background > .site-background-layer,
body.storefront-page[style*="--site-bg-image"] > .site-background-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: var(--background) !important;
    background-image: var(--site-bg-image) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    will-change: auto !important;
}
@media (max-width: 760px) {
    body.storefront-page.has-site-background > .site-background-layer,
    body.storefront-page[style*="--site-bg-image"] > .site-background-layer {
        background-size: auto !important;
        background-position: center center !important;
    }
    html,
    body.storefront-page,
    body.landing-page {
        touch-action: pan-x pan-y;
    }
}
body.storefront-page .sf-home-background { display: none !important; }
body.storefront-page.has-site-background .sf-hero,
body.storefront-page.has-site-background .sf-announcement,
body.storefront-page.has-site-background .sf-purchase-card,
body.storefront-page.has-site-background .sf-product-card,
body.storefront-page.has-site-background .sf-help-banner,
body.storefront-page[style*="--site-bg-image"] .sf-hero,
body.storefront-page[style*="--site-bg-image"] .sf-announcement,
body.storefront-page[style*="--site-bg-image"] .sf-purchase-card,
body.storefront-page[style*="--site-bg-image"] .sf-product-card,
body.storefront-page[style*="--site-bg-image"] .sf-help-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep the storefront navbar attached to the viewport on phones. */
@media (max-width: 1180px) {
    body.storefront-page > .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99990 !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
    }
    body.storefront-page {
        padding-top: var(--mobile-header-offset, 70px) !important;
    }
}
/* 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; }
}

/* Large, centered StatBox artwork with a restrained flip and accent edge. */
.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 {
    top: 50% !important;
    right: clamp(-8px, .8vw, 12px) !important;
    bottom: auto !important;
    width: clamp(82px, 9vw, 112px) !important;
    height: clamp(82px, 9vw, 112px) !important;
    opacity: .68 !important;
    transform: translateY(-50%) !important;
    transition: opacity .28s ease !important;
}
.site-stat-card .site-stat-icon .sf-icon {
    transform: perspective(500px) rotateY(0deg);
    transform-origin: center;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.site-stat-card {
    border-color: color-mix(in srgb, var(--border) 82%, var(--main) 18%) !important;
    transition: border-color .32s ease, box-shadow .32s ease !important;
}
.site-stat-card:hover,
.site-stat-card:focus-within {
    border-color: var(--main) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--main) 30%, transparent),
        0 8px 24px color-mix(in srgb, var(--main) 12%, transparent) !important;
}
.site-stat-card:hover .site-stat-icon,
.site-stat-card:focus-within .site-stat-icon,
.site-stat-card:active .site-stat-icon,
.site-stat-card--sales:hover .site-stat-icon,
.site-stat-card--topup:hover .site-stat-icon,
.site-stat-card--users:hover .site-stat-icon,
.site-stat-card--stock:hover .site-stat-icon {
    transform: translateY(-50%) !important;
    opacity: .92 !important;
}
@media (hover: hover) and (pointer: fine) {
    .site-stat-card:hover .site-stat-icon .sf-icon,
    .site-stat-card--sales:hover .site-stat-icon .sf-icon,
    .site-stat-card--topup:hover .site-stat-icon .sf-icon,
    .site-stat-card--users:hover .site-stat-icon .sf-icon,
    .site-stat-card--stock:hover .site-stat-icon .sf-icon {
        transform: perspective(500px) rotateY(180deg);
    }
}

/* Touch devices show the accent edge on tap without flipping the icon. */
@media (hover: none), (pointer: coarse) {
    .site-stat-card:active,
    .site-stat-card:hover {
        border-color: var(--main) !important;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--main) 30%, transparent),
            0 8px 24px color-mix(in srgb, var(--main) 12%, transparent) !important;
    }
    .site-stat-card:active .site-stat-icon .sf-icon,
    .site-stat-card:hover .site-stat-icon .sf-icon {
        transform: perspective(500px) rotateY(0deg) !important;
    }
}

/* Clear the pale glass panel and all backdrop blur around StatBox/reviews. */
.site-statbox-wrap,
.site-statbox-container,
.site-stat-card,
.site-review-strip,
.site-review-marquee,
.site-review-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.site-statbox-container {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.site-stat-card { background: var(--background) !important; }
.site-review-card { background: var(--surface) !important; }
@media (min-width: 761px) {
    .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 {
        width: clamp(82px, 7.2vw, 100px) !important;
        height: clamp(82px, 7.2vw, 100px) !important;
    }
}
@media (max-width: 560px) {
    .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: -5px !important;
        width: 102px !important;
        height: 102px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-stat-card .site-stat-icon .sf-icon { transition: none !important; }
}