/* Global mobile responsiveness overrides */
@media (max-width: 768px) {
    /* Global Layout Overrides */
    .w_half, .w_third, .w_quarter {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .flex {
        flex-direction: column !important;
    }
    
    /* However, some flex items should remain row if they are small UI components. 
       Revert common UI components to row layout if broken by global override */
    header nav.flex,
    header .menuItem a,
    .secondary_btn,
    .information_mobile, 
    .options.flex, 
    .stepper-btn,
    .product-weight-stepper,
    .contact_info .icon,
    .spliter,
    .product-price,
    .newsletter_member,
    .socials .flex,
    .product-equivalent,
    .product-card .add-to-cart-btn {
        flex-direction: row !important;
    }
    
    /* Ensure the mobile menu sidebar stays hidden by default */
    header .menuItem {
        right: -320px !important;
        transform: none !important;
        transition: right 0.4s ease !important;
    }
    header .menuToggle input:checked ~ .menuItem {
        right: 0 !important;
        transform: none !important;
    }

    /* Tables */
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
    }

    /* Product Detail */
    .product_info {
        flex-direction: column !important;
        width: 100% !important;
        margin: 1rem 0 !important;
        padding: 1rem !important;
    }
    
    .product_info .box_image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 1rem auto !important;
        text-align: center;
    }
    
    .product_info .info {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .desc {
        flex-direction: column !important;
    }

    .tables {
        flex-direction: column !important;
    }
    .tables .tcol {
        width: 100% !important;
    }

    /* Gallery */
    .grid-gallery {
        flex-direction: column !important;
        align-items: center !important;
    }
    .grid-gallery .gallery-item,
    .grid-gallery .gallery_images > div {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
        margin-bottom: 1rem;
    }

    /* Account / Auth Pages */
    .signup .boxShadow {
        width: 95% !important;
        max-width: 100% !important;
        padding: 1rem !important;
    }
    .input {
        width: 100% !important;
    }
    
    /* Blogs and News */
    .blogs {
        flex-direction: column !important;
    }
    .blogs > a, .blogs > div {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Header Nav */
    .desktop_menu {
        display: none !important;
    }
    .mobile_nav {
        display: block !important;
    }

    /* Footer Fixes */
    footer .items > div,
    footer .copyRight {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    footer .newsletter_member {
        margin: 0 auto 2rem auto !important;
    }
}