/* Mobile Header Styles - Same as Desktop */

@media (max-width: 768px) {
    /* Remove padding from all containers on mobile */
    .container {
        padding: 0 15px !important;
    }

    /* Fix container padding for mobile */
    .top-header .container {
        padding: 0 !important;
    }

    /* Hide Header Buttons */
    .header-buttons {
        display: none;
    }

    /* Hide Cart Button */
    .cart-btn {
        display: none;
    }

    /* Hide Navigation Menu */
    .main-nav {
        display: none;
    }

    /* Resize logos for mobile */
    .logo-img {
        max-width: 70px;
    }

    .logo-item {
        min-width: 75px;
        height: 45px;
        flex: 0 0 auto;
    }

    .logo-item.active {
        height: 45px;
        flex: 0 0 auto;
    }

    .logos-wrapper {
        margin-left: 0;
        flex: 0 0 auto;
    }

    /* Bridge - same as web but scaled down */
    .logo-item.active::before {
        display: none !important;
    }

    .logo-item.active::after {
        bottom: -9px;
        left: -5px;
        right: -5px;
        width: auto;
        height: 9px;
        background-size: 100% auto !important;
    }

    .selected-border-mask {
        display: none !important;
    }

    /* Expand search bar to full width */
    .search-bar .container {
        padding: 0 !important;
    }

    .search-wrapper {
        padding: 0 15px;
    }

    /* Mobile Bottom Navigation */
    body {
        padding-bottom: 70px;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 70px;
        z-index: 999;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: #666;
        font-size: 11px;
        font-weight: 500;
        flex: 1;
        height: 100%;
        position: relative;
        transition: color 0.3s;
    }

    .mobile-nav-item:hover {
        color: #29cadf;
    }

    .mobile-nav-item svg {
        width: 28px;
        height: 28px;
        stroke-width: 1.5;
        color: currentColor;
    }

    .mobile-nav-badge {
        position: absolute;
        top: 8px;
        right: 10px;
        background: #29cadf;
        color: white;
        font-size: 9px;
        font-weight: bold;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-cart-price {
        font-size: 12px;
        font-weight: 600;
        color: #29cadf;
    }
}

/* Desktop - hide mobile nav */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none;
    }
}