/**
 * Mobile Performance & Optimization CSS
 * 
 * Purpose: Fix lag, padding inconsistencies, and poor mobile optimization
 * Target: Low-end devices (Honor 10 Lite, 3GB RAM, Mali-G51 GPU)
 * 
 * Key principles:
 * - Kill expensive CSS effects on mobile
 * - Standardize padding (12px horizontal, 32-40px vertical)
 * - Disable animations that cause jank
 * - Reduce memory pressure
 */

/* =========================================================
   MOBILE PERFORMANCE: Kill expensive effects on low-end devices
   ========================================================= */

@media (max-width: 768px) {
    /* KILL backdrop-filter (GPU killer on mobile) */
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* KILL will-change (memory pressure) */
    *, *::before, *::after {
        will-change: auto !important;
    }

    /* KILL expensive box-shadows */
    .bp-card,
    .archive-card,
    .product-card,
    .social-proof-card,
    .b2g1-orbit__node {
        box-shadow: none !important;
    }

    /* KILL text-shadow on mobile (rendering cost) */
    h1, h2, h3, h4, h5, h6 {
        text-shadow: none !important;
    }

    /* KILL infinite animations */
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    .animate-tech-scroll {
        animation-duration: 80s !important; /* Slower = less CPU */
    }

    .bp-add-btn {
        animation: none !important;
    }

    .b2g1-panel__badge::before,
    .b2g1-price-value.is-gold,
    .b2g1-panel__save-pill::before,
    .product-low-stock::before {
        animation: none !important;
    }

    /* KILL hover transforms (useless on touch devices) */
    .archive-card:hover,
    .bp-card:hover,
    .product-card:hover {
        transform: none !important;
    }

    .archive-card:hover .product-image-wrap img,
    .bp-card:hover .bp-card-image,
    .product-card:hover .image-container img {
        transform: none !important;
    }

    /* KILL expensive transitions */
    *, *::before, *::after {
        transition-duration: 0.15s !important;
    }
}

/* =========================================================
   STANDARDIZED MOBILE PADDING SYSTEM
   Horizontal: 12px (0.75rem)
   Vertical: 32-40px (2-2.5rem)
   ========================================================= */

@media (max-width: 768px) {
    /* Hero section */
    .hero-content-position {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Best products section */
    .bp-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .bp-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .bp-card-content {
        padding: 12px !important;
    }

    /* Bundle upsell section */
    .b2g1-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .b2g1-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .b2g1-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hook section */
    .hook-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    #hook-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #hook-section .px-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #hook-section .group.relative {
        padding: 20px 12px !important;
    }

    /* Social proof section */
    .social-proof-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .social-proof-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .social-proof-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 20px !important;
    }

    /* Collection grid section */
    #collection-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    #collection-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Trust marquee */
    .animate-tech-scroll {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   MOBILE FONT SIZE OPTIMIZATION
   Prevent oversized text on small screens
   ========================================================= */

@media (max-width: 768px) {
    /* Hero headline - reduce from 48px to 32px */
    .hero-content-position h1 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }

    /* Hero subtitle */
    .hero-content-position p {
        font-size: 0.875rem !important;
    }

    /* Section titles */
    .bp-title,
    .b2g1-panel__title,
    .social-proof-header h2 {
        font-size: 1.5rem !important;
    }

    /* Hook section titles */
    #hook-section h2 {
        font-size: 1.5rem !important;
    }

    #hook-section h3 {
        font-size: 1.125rem !important;
    }

    /* Collection section */
    #collection-section h2 {
        font-size: 1.5rem !important;
    }
}

/* =========================================================
   MOBILE LAYOUT FIXES
   Prevent overflow and horizontal scroll
   ========================================================= */

@media (max-width: 768px) {
    /* Prevent any overflow */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Fix section widths */
    section,
    main > .container,
    .site-main > .container,
    .bp-container {
        max-width: 100vw !important;
    }

    /* Fix orbit section (bundle upsell) */
    .b2g1-orbit {
        width: 260px !important;
        height: 260px !important;
    }

    .b2g1-orbit__center {
        width: 100px !important;
        height: 100px !important;
    }

    .b2g1-orbit__node {
        width: 68px !important;
        height: 68px !important;
    }

    .b2g1-orbit__node:nth-child(2) { top: -6px; left: 50%; transform: translateX(-50%); }
    .b2g1-orbit__node:nth-child(3) { top: 52px; right: -6px; }
    .b2g1-orbit__node:nth-child(4) { bottom: 52px; right: -6px; }
    .b2g1-orbit__node:nth-child(5) { bottom: -6px; left: 50%; transform: translateX(-50%); }
    .b2g1-orbit__node:nth-child(6) { bottom: 52px; left: -6px; }
    .b2g1-orbit__node:nth-child(7) { top: 52px; left: -6px; }
    .b2g1-orbit__node:nth-child(2):hover { transform: translateX(-50%) scale(1.05); }
    .b2g1-orbit__node:nth-child(5):hover { transform: translateX(-50%) scale(1.05); }

    .b2g1-orbit-wrap {
        min-height: 280px !important;
    }

    /* Bundle steps - stack vertically */
    .b2g1-panel__steps {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .b2g1-step {
        padding: 10px 12px !important;
    }

    /* Social proof - reduce image height */
    .social-proof-media {
        height: 200px !important;
        min-height: 200px !important;
    }

    /* Collection grid - reduce height on mobile */
    #collection-section .collection-engine {
        height: auto !important;
        min-height: 0 !important;
    }

    #collection-section .collection-panel {
        min-height: 200px !important;
    }
}

/* =========================================================
   EXTRA SMALL MOBILE (375px and below)
   Further reduce sizes for Honor 10 Lite (360px width)
   ========================================================= */

@media (max-width: 375px) {
    /* Padding */
    .bp-container,
    main > .container,
    .site-main > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Orbit even smaller */
    .b2g1-orbit {
        width: 240px !important;
        height: 240px !important;
    }

    .b2g1-orbit__center {
        width: 90px !important;
        height: 90px !important;
    }

    .b2g1-orbit__node {
        width: 60px !important;
        height: 60px !important;
    }

    .b2g1-orbit__node:nth-child(2) { top: -6px; }
    .b2g1-orbit__node:nth-child(3) { top: 46px; right: -6px; }
    .b2g1-orbit__node:nth-child(4) { bottom: 46px; right: -6px; }
    .b2g1-orbit__node:nth-child(5) { bottom: -6px; }
    .b2g1-orbit__node:nth-child(6) { bottom: 46px; left: -6px; }
    .b2g1-orbit__node:nth-child(7) { top: 46px; left: -6px; }

    /* Font sizes */
    .hero-content-position h1 {
        font-size: 1.75rem !important;
    }

    .bp-title,
    .b2g1-panel__title,
    .social-proof-header h2,
    #hook-section h2,
    #collection-section h2 {
        font-size: 1.375rem !important;
    }
}

/* =========================================================
   LOW-END DEVICE DETECTION (class added by JS)
   Nuclear option for devices with <=4 CPU cores
   ========================================================= */

.low-end-device,
.low-end-device body {
    scroll-behavior: auto !important;
}

.low-end-device *,
.low-end-device *::before,
.low-end-device *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
}

.low-end-device .bp-card,
.low-end-device .archive-card,
.low-end-device .product-card,
.low-end-device .social-proof-card,
.low-end-device .collection-panel img,
.low-end-device .hero-desktop-video {
    transform: none !important;
}

.low-end-device .animate-tech-scroll {
    animation: elveraTechScroll 80s linear infinite !important;
    transform: translateX(0);
}

.low-end-device .bp-marker,
.low-end-device .bp-title,
.low-end-device .bp-subtitle,
.low-end-device .bp-card,
.low-end-device .bp-header-reveal,
.low-end-device .bp-card-reveal,
.low-end-device .reveal,
.low-end-device .section-reveal,
.low-end-device .reveal-lines {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
}

@media (max-width: 768px) {
    .low-end-device .hero-desktop-video,
    .low-end-device .social-proof-media video {
        display: none !important;
    }
}

/* =========================================================
   FOOTER MOBILE OPTIMIZATION
   Reduce excessive padding
   ========================================================= */

@media (max-width: 768px) {
    /* Footer lead gen section */
    footer .py-20 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    footer .px-8 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Footer nav columns */
    footer .p-10 {
        padding: 20px 12px !important;
    }

    /* ELVERA signature */
    footer .py-20 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    footer .text-\[18vw\] {
        font-size: 12vw !important;
    }

    /* Copyright */
    footer .py-6 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* =========================================================
   HEADER MOBILE OPTIMIZATION
   Fix overlap and reduce height
   ========================================================= */

@media (max-width: 768px) {
    /* Announcement bar */
    #announce-bar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.055em !important;
    }

    /* Desktop header hidden on mobile, but ensure no spacing issues */
    #desktop-header-wrap {
        display: none !important;
    }

    /* Mobile header logo */
    #masthead h1 {
        font-size: 1.5rem !important;
    }
}

/* =========================================================
   BUTTON & TOUCH TARGET OPTIMIZATION
   Ensure minimum 44px touch targets
   ========================================================= */

@media (max-width: 768px) {
    /* Add to cart buttons */
    .bp-card .bp-add-btn,
    .bp-grid .bp-add-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* CTA buttons */
    a[href*="shop"],
    a[href*="bundle"],
    a[href*="vault"] {
        min-height: 44px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Form inputs */
    input, select, textarea, button {
        min-height: 44px !important;
    }
}

/* =========================================================
   IMAGE OPTIMIZATION
   Prevent oversized images on mobile
   ========================================================= */

@media (max-width: 768px) {
    /* Best products images */
    .bp-card-image {
        max-width: 100% !important;
    }

    /* Social proof images */
    .social-proof-media img {
        object-fit: contain !important;
    }

    /* Collection grid images */
    .collection-panel img {
        max-width: 100% !important;
    }

    /* Bundle orbit images */
    .b2g1-orbit__center img,
    .b2g1-orbit__node img {
        max-width: 100% !important;
    }
}

/* =========================================================
   MARQUEE OPTIMIZATION
   Reduce CPU usage on mobile
   ========================================================= */

@media (max-width: 768px) {
    .animate-tech-scroll {
        animation: elveraTechScroll 80s linear infinite !important; /* Much slower */
    }
}