/* ==========================================================================
   CubePass - smoother scrolling on phones (2026-10-06)
   Phones redraw every "glass" (backdrop-filter blur) element on every scroll frame, and the page
   had ~100 of them plus ~45 never-ending animations. Here the blur is removed from page content
   (it looked the same: the background behind the cards is plain), the fixed bars get a solid
   colour instead, and decorative endless animations stop. Desktop is not affected.
   To undo: run undo_perf.bat (or empty this file).
   ========================================================================== */

/* the loading shimmer keeps animating under every product photo after it has loaded */
.product-image.loaded + .shimmer-placeholder {
    display: none !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    /* glass blur on content (cards, sections, footer) */
    .product-card,
    .card-overlay,
    .desktop-countdown,
    .blog-card,
    .quick-access-card,
    .slider-glass-background,
    .trust-features-bar,
    .brand-intro-card,
    .main-footer,
    .footer-bottom,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators,
    .store-slider .carousel-control-prev,
    .store-slider .carousel-control-next,
    .store-slider .carousel-indicators,
    .store-page-header,
    .store-toolbar-bar,
    .cart-item, .cart-summary, .checkout-step, .checkout-summary, .product-details-card, .info-card,
    .reviews-section, .auth-card, .auth-box, .ticket-list-item, .ticket-messages-wrapper, .message.user,
    .message.admin, .blog-sidebar, .faq-item, .contact-card, .contact-form-wrapper, .status-card,
    .profile-content, .profile-sidebar, .dashboard-card, .profile-header-card, .ticket-card,
    .wishlist-item, .order-card, .ticket-header-card,
    :root[data-theme="light"] .product-card,
    :root[data-theme="light"] .cart-item, :root[data-theme="light"] .cart-summary,
    :root[data-theme="light"] .checkout-step, :root[data-theme="light"] .checkout-summary,
    :root[data-theme="light"] .product-details-card, :root[data-theme="light"] .info-card,
    :root[data-theme="light"] .reviews-section, :root[data-theme="light"] .auth-card,
    :root[data-theme="light"] .auth-box, :root[data-theme="light"] .ticket-list-item,
    :root[data-theme="light"] .ticket-messages-wrapper, :root[data-theme="light"] .message.user,
    :root[data-theme="light"] .message.admin, :root[data-theme="light"] .blog-card,
    :root[data-theme="light"] .blog-sidebar, :root[data-theme="light"] .faq-item,
    :root[data-theme="light"] .contact-card, :root[data-theme="light"] .contact-form-wrapper,
    :root[data-theme="light"] .status-card, :root[data-theme="light"] .profile-content,
    :root[data-theme="light"] .profile-sidebar, :root[data-theme="light"] .dashboard-card,
    :root[data-theme="light"] .profile-header-card, :root[data-theme="light"] .ticket-card,
    :root[data-theme="light"] .wishlist-item, :root[data-theme="light"] .order-card,
    :root[data-theme="light"] .ticket-header-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* the fixed top bar and bottom menu: solid colour instead of a blur redrawn while scrolling */
    .site-header,
    .site-header.scrolled {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(10, 10, 15, 0.97) !important;
        transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.25s ease, top 0.3s ease;
    }

    :root[data-theme="light"] .site-header,
    :root[data-theme="light"] .site-header.scrolled {
        background-color: rgba(255, 255, 255, 0.97) !important;
    }

    .mobile-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    :root[data-theme="light"] .mobile-nav {
        background-color: rgba(255, 255, 255, 0.98) !important;
    }

    /* fewer GPU layers: will-change on every card and photo uses a lot of phone memory */
    .product-card,
    .product-image.lazy-load,
    .shimmer-placeholder::after,
    .cursor-glow-frame,
    .reveal.visible,
    .cube-site-preloader.loaded {
        will-change: auto !important;
    }

    /* endless decorative animations (the loading placeholder stays a plain grey box instead of sweeping) */
    .discount-badge,
    .shimmer-placeholder::after {
        animation: none !important;
    }

    /* sections fade in while scrolling: shorter, so fewer frames are spent animating big areas */
    .reveal {
        transition-duration: 0.45s;
    }

    /* hover effects do nothing on touch screens but still animate on tap */
    .product-card,
    .blog-card,
    .quick-access-card {
        transition: none !important;
    }

    .product-card:hover,
    .blog-card:hover,
    .quick-access-card:hover {
        transform: none !important;
    }

    .product-card:hover .product-image,
    .blog-card:hover img {
        transform: none !important;
    }
}

/* Slider dots: 24x24 px tap area (Google "touch targets" check); the dot itself looks the same */
.store-slider .carousel-indicators {
    gap: 0 !important;
    padding: 0 6px !important;
}

.store-slider .carousel-indicators button,
.store-slider .carousel-indicators button.active {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    text-indent: 0 !important;
    transition: none !important;
}

.store-slider .carousel-indicators button.active {
    width: 32px !important;
}

.store-slider .carousel-indicators button::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    opacity: 0.65;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.store-slider .carousel-indicators button.active::after {
    width: 22px;
    border-radius: 8px;
    background-color: var(--primary-blue, #3e69fe);
    opacity: 1;
    box-shadow: 0 0 12px var(--primary-blue, #3e69fe);
}

@media (max-width: 768px) {
    .store-slider .carousel-indicators {
        padding: 0 4px !important;
    }

    .store-slider .carousel-indicators button.active {
        width: 26px !important;
    }

    .store-slider .carousel-indicators button::after {
        width: 6px;
        height: 6px;
    }

    .store-slider .carousel-indicators button.active::after {
        width: 14px;
        border-radius: 6px;
    }
}