/* ============================================================
   MOBILE FIXED CHROME — Bottom Nav + WhatsApp
   footer_nav is MOBILE ONLY (hidden on desktop)
   ============================================================ */

/* — MOBILE (≤ 767px) — */
@media only screen and (max-width: 767px) {

    /* Solid full-width bottom nav bar, truly stuck to the bottom edge */
    body > .footer_nav {
        display:         block !important;
        position:        fixed !important;
        bottom:          0 !important;
        left:            0 !important;
        right:           0 !important;
        width:           100% !important;
        max-width:       100% !important;
        margin:          0 !important;
        transform:       none !important;
        -webkit-transform: none !important;
        translate:       none !important;
        z-index:         10000 !important;
        background:      var(--primary-color) !important;
        border-radius:   0 !important;
        /* safe-area-inset-bottom covers iPhone home-indicator */
        padding-bottom:  env(safe-area-inset-bottom, 0px) !important;
        box-shadow:      0 -2px 10px rgba(0,0,0,0.15) !important;
    }

    /* WhatsApp button sits above the nav bar */
    body > .whatsapp-btn {
        position:          fixed !important;
        right:             15px !important;
        left:              auto !important;
        top:               auto !important;
        bottom:            calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        transform:         none !important;
        -webkit-transform: none !important;
        translate:         none !important;
        z-index:           999999 !important;
    }

    /* Product-details page: extra padding so sticky bottom buy-bar clears the nav */
    body.product-details-page #main-content-wrapper {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.product-details-page .main-details-page {
        padding-bottom: 0 !important;
        margin-bottom:  0 !important;
    }

    body.product-details-page .scrolltop {
        bottom: calc(78px + var(--safe-bottom)) !important;
        right:  15px !important;
        z-index: 9998 !important;
    }
}

/* — DESKTOP (≥ 768px): show bottom nav (larger, floating, 4-corner rounded) — */
@media only screen and (min-width: 768px) {
    body > .footer_nav {
        display:         block !important;
        position:        fixed !important;
        bottom:          20px !important; /* Floating off the bottom */
        left:            50% !important;
        right:           auto !important;
        width:           45% !important; /* Larger width */
        max-width:       600px !important;
        min-width:       450px !important; /* Minimum width to prevent squeeze */
        margin:          0 !important;
        transform:       translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
        translate:       none !important;
        z-index:         10000 !important;
        background:      var(--primary-color) !important;
        border-radius:   35px !important; /* Fully rounded on all 4 sides (pill shape) */
        box-shadow:      0 8px 32px rgba(0,0,0,0.18) !important;
        border:          1px solid rgba(255, 255, 255, 0.15) !important;
    }

    body > .footer_nav ul {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        height: 70px !important; /* Larger height */
        margin: 0 !important;
        padding: 0 15px !important;
        list-style: none !important;
    }

    body > .footer_nav ul li a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none !important;
        font-size: 12px !important; /* Larger font size */
        font-weight: 600 !important;
        gap: 4px !important;
    }

    body > .footer_nav ul li a span:first-child i,
    body > .footer_nav ul li a span:first-child img {
        font-size: 22px !important; /* Larger icons */
        display: block !important;
    }

    /* Home button bubble on desktop */
    body > .footer_nav .mobile_home {
        background: #fff !important;
        width: 70px !important; /* Larger bubble */
        height: 70px !important;
        border-radius: 50% !important;
        margin-top: -35px !important;
        border: 4px solid var(--primary-color) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.15) !important;
        z-index: 10001 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    body > .footer_nav .mobile_home a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    body > .footer_nav .mobile_home i {
        color: var(--primary-color) !important;
        font-size: 30px !important; /* Larger home icon */
        margin: 0 !important;
        padding: 0 !important;
    }

    body > .footer_nav .mobile_home span:last-child {
        display: none !important;
    }

    body > .whatsapp-btn {
        position: fixed !important;
        right:    20px !important;
        bottom:   110px !important; /* Sits above the floating bottom nav (70px height + 20px bottom + gap) */
        z-index:  99999 !important;
    }
}