/* Forced Mobile Header Alignment Fix */
@media (max-width: 768px) {

    /* 1. Container: Row wrap */
    .shop-header .header-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 0 !important;
        /* Reset gap, control via margins */
    }

    /* 2. Logo: Left, Auto Width */
    .shop-header .logo-section {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin-right: auto !important;
        /* Push everything else to the right */
        display: flex !important;
        align-items: center !important;
    }

    .shop-header .logo {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .shop-header .logo-img {
        width: 32px !important;
        height: 32px !important;
    }

    .shop-header .logo-text {
        font-size: 1.4rem !important;
        display: block !important;
    }

    /* 3. Actions: Right, Auto width, Grouped */
    .shop-header .header-actions {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        margin-left: 0 !important;
    }

    /* 4. Search: New Line, Full Width */
    .shop-header .search-section {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .shop-header .search-container {
        width: 100% !important;
        height: 48px !important;
    }

    /* 5. Icons: Compact Circles */
    .login-btn,
    .cart-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(39, 85, 89, 0.1) !important;
    }

    .login-btn .login-text {
        display: none !important;
    }

    .login-btn .login-icon {
        display: block !important;
    }

    .cart-btn .cart-count {
        top: -2px !important;
        right: -2px !important;
    }

    /* 6. Navigation: Sticky below header */
    .shop-nav {
        position: sticky !important;
        z-index: 999 !important;
        background: white !important;
        width: 100% !important;
        top: 0;
        /* JS will update this value */
    }

    /* 7. Footer Optimization: Side-by-Side Links */
    .footer .footer-content {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        text-align: left !important;
    }

    .footer .footer-section {
        width: 100% !important;
        /* Default full width */
        margin-bottom: 2rem !important;
        padding: 0 0.5rem !important;
    }

    /* The parallel sections */
    .footer .footer-quick-links,
    .footer .footer-categories {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /* Ensure list items don't break weirdly */
    .footer .footer-section ul {
        padding-left: 0 !important;
    }
}