/* ================================================================
   ZimLink — mobile navbar (phones, max 768px)
   Loaded AFTER each page's own CSS so it overrides the older
   hamburger-menu rules. Desktop is untouched.

   Row 1:  [logo + Zimlink] [search] [bell] [cart] [profile pic]
   Row 2:  page links, one horizontal swipeable strip
   Focus:  the search bar grows left and covers the word "Zimlink"
   ================================================================ */
@media (max-width: 768px) {

    /* ---------- Row 1 ---------- */
    .main .sec {
        position: relative;          /* anchor for the search dropdown */
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
    }

    .main .nav-logo-link {
        position: relative;
        z-index: 1;                  /* sits UNDER the search bar */
        gap: 5px;
    }
    .main .nav-logo-link img { height: 32px; width: 32px; border-radius: 8px; }
    .main .nav-logo-link h1 {
        font-size: 15px;
        transition: opacity .25s ease;
    }

    /* Search bar: always visible, grows over the logo text on focus */
    .main .nav-search-wrap {
        display: flex !important;
        position: static !important;  /* dropdown anchors to .sec instead */
        z-index: 3;                   /* above the logo */
        flex: 1 1 0;
        min-width: 0;
        height: 38px;
        background: #fff;
        margin-left: 0;
        transition: margin-left .35s cubic-bezier(.22, 1, .36, 1);
    }
    .main .nav-search-wrap:focus-within {
        margin-left: calc(-1 * (var(--zl-logo-text-w, 56px) + 6px));
    }
    /* fade the word out as the bar slides over it */
    .main .sec:has(.nav-search-wrap:focus-within) .nav-logo-link h1 { opacity: 0; }

    .main .nav-search-input {
        flex: 1 1 auto;
        width: 1px;
        min-width: 0;
        height: 38px;
        padding: 0 10px;
        font-size: 16px;              /* stops iOS zooming in on focus */
        border-radius: 19px 0 0 19px;
    }
    .main .nav-search-btn,
    .main .tony {
        width: 40px;
        min-width: 40px;
        height: 38px;
        padding: 0;
        font-size: 0;                 /* hide the word "Search", show an icon */
        border-radius: 0 19px 19px 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
    }

    /* Dropdown spans the full phone width, independent of the bar's width */
    .main .nav-search-wrap .nav-search-dropdown {
        position: absolute;
        top: calc(100% - 2px);
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 60vh;
    }

    /* Bell + cart + profile: compact round buttons */
    .main .plane { display: none !important; }
    .main .nav-bell-wrap { position: static; right: 0; }
    .main .nav-bell-icon,
    .main .nav-cart-icon {
        display: flex !important;     /* cart was hidden on mobile before */
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
    .main .nav-bell-icon svg { width: 18px; height: 18px; }
    .main .nav-cart-icon svg { width: 19px; height: 19px; }

    /* Profile: picture only */
    .main .nav-user-area { flex-shrink: 0; }
    .main .nav-user-btn {
        padding: 0;
        border: none;
        background: transparent;
        gap: 0;
        border-radius: 50%;
    }
    .main .nav-user-btn #navUsername,
    .main .nav-user-btn .nav-chev { display: none; }
    .main .nav-avatar {
        width: 34px;
        height: 34px;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--green);
    }
    .main .nav-user-menu { right: -4px; }

    /* Logged out: "Get Started" becomes a round person button */
    /* navbar.js adds .nav-hidden once the user is logged in, so only the
       profile picture shows (no duplicate person icon) */
    .main .nav-auth-btns:not(.nav-hidden) { display: flex !important; }
    .main .nav-auth-btns .juni {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
    }
    .main .nav-auth-btns .btn003 {
        font-size: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    }

    /* No more hamburger */
    .main .nav-hamburger { display: none !important; }

    /* ---------- Row 2: horizontal scrolling links ---------- */
    .main .secheader {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 6px;
        border-top: 1px solid var(--border, #e5e5e5);
    }
    .main .secheader::-webkit-scrollbar { display: none; }
    .main .secheader .Tadi,
    .main .secheader .sandy {
        flex: 0 0 auto;
        width: auto;
        padding: 11px 13px;
        border-bottom: none;
        font-size: 14px;
        justify-content: center;
    }
    /* cart now lives in the top row; old injected search/auth blocks are gone */
    .main .secheader .nav-cart-link,
    .main .nav-mobile-search,
    .main .nav-mobile-auth { display: none !important; }

    /* Notification panel sits right under the shorter header */
    .notif-panel { top: 92px; }
}

/* Very small phones */
@media (max-width: 360px) {
    .main .sec { gap: 4px; padding: 8px 8px; }
    .main .nav-logo-link h1 { font-size: 14px; }
    .main .nav-bell-icon,
    .main .nav-cart-icon { width: 34px; height: 34px; }
}