:root{
    --h1 : 4rem;
    --h2 : 3.2rem;
    --h3 : 2.4rem;
    --h4 : 2.0rem;
    --h5 : 1.8rem;
    --h6 : 1.6rem;
    --bg-color: #0B3C5D;
    --w-logo: #FF7F11;
    --text-color: #ffffff;
    --text-hover: #FF7F11;
    --blue-900: #0b1f3a;
    --blue-700: #15385f;
    --orange-500: #ff7a00;
    /* Height of the fixed bar. Exported because the bar is position:fixed and
       overlays page content: full-viewport sections need it to know how much
       room is actually visible above their own content. Overridden in the
       tablet and phone media queries below, so anything reading it must live
       in the same cascade. */
    --nav-h: 60px;
}

/* Scoping note: these rules used to be written as `main .nav-bar`, which meant
   they only applied while the bar happened to sit inside <main>. Every page
   here does nest it that way except home.html, where the bar is a sibling of
   <main> because it is site chrome rather than page content. That turned the
   whole sheet into dead CSS on the homepage - no height, no fixed position,
   no flex row, no logo sizing - which is what made the nav render oversized.
   `.nav-bar` matches in both structures, so this is a safe superset. */
.nav-bar{
    display: flex;
    width: 100%;
    height: var(--nav-h);
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: fixed;
    top: 0;
    z-index: 1200;
    /* Background and shadow animate together so the solid-on-scroll state
       fades in (and out) smoothly instead of snapping. */
    transition: background 0.45s ease, box-shadow 0.45s ease;
    background: linear-gradient(to bottom, rgba(10, 29, 55, 0.98), rgba(11, 60, 93, 0.85));
    box-shadow: 0 0 0 rgba(2, 12, 26, 0);
}

.nav-bar.colorChange{
    /* Solid-ish gradient instead of backdrop-filter — blurring the backdrop
       on every scroll frame is what caused the scroll lag on mobile. */
    background: linear-gradient(to bottom, rgba(10, 29, 55, 0.99), rgba(14, 34, 54, 0.97));
    box-shadow: 0 6px 22px rgba(2, 12, 26, 0.38);
}
[data-theme="dark"] .nav-bar.colorChange{
    /* Deeper shadow on dark surfaces so the lift stays visible. */
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}


.nav-bar .web-logo-container a{
    text-decoration: none;
}

/* Responsive site logo. Was clamp(120px, 16vw, 180px), which put a 180px
   mark inside a 60px bar and made the whole chrome read as oversized. The
   cap now matches the 40px-tall source asset plus a little breathing room. */
.nav-bar .web-logo-container a img{
    width: clamp(104px, 12vw, 148px);
    height: auto;
    max-width: 100%;
}

.nav-bar .web-logo{
    font-size: clamp(2.4rem, 5vw, 4rem);
    background: linear-gradient(45deg, #ff8a00, #e52e71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}


.nav-bar .nav-links-container nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    /* Was 3rem, which at the site-wide 68.75% root is 33px between links -
       wide enough to make five short labels sprawl across the bar. */
    gap: 2rem;
    list-style: none;
}



.nav-links-container ul a::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #ff7a00;
    transition: 0.5s ease;
    border-radius: 10px;
}

.nav-links-container ul li a{
    font-size: var(--h6);
    color: var(--text-color);
    text-decoration: none;
    transition: 0.5s ease;
    white-space: nowrap;
    position: relative;
}

.nav-links-container ul li a:hover{
    color: #ff7a00;
}

.nav-links-container ul li a:hover::after{
    width: 100%;
}

.nav-btns-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.nav-btns-container .nav-login-btn, .nav-signup-btn{
    padding: 0.8rem 1.6rem;
    font-size: var(--h6);
    font-family: poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.5s ease;
    border: none;
    white-space: nowrap;
    border-top-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.nav-btns-container .nav-login-btn{
    border: 2px solid var(--w-logo);
    background-color: var(--w-logo);
    color: var(--text-color);
}

.nav-btns-container .nav-signup-btn{
    background-color: var(--text-color);
    color: var(--bg-color);
    border: 2px solid var(--text-color);
}

.nav-btns-container .nav-login-btn:hover{
    background-color: var(--text-color);
    color: var(--w-logo);
}

.nav-btns-container .nav-signup-btn:hover{
    background-color: var(--bg-color);
    color: var(--text-color);
}

.mobile-nav-icon{
    display: none;
    cursor: pointer;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    position: relative;
    z-index: 10003;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    >svg{
        fill: var(--w-logo);
        transition: transform 0.3s ease;
    }
}

.mobile-nav-icon:hover{
    background: rgba(255, 127, 17, 0.18);
    border-color: rgba(255, 127, 17, 0.55);
    transform: translateY(-1px);
    >svg{
        transform: scale(1.08);
    }
}

.mobile-nav-icon:active{
    transform: scale(0.94);
}

.showMobileOnly{
    width: 80vw;
    max-width: 360px;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    background: radial-gradient(
    90% 120% at 10% 10%,
    #0d1b2a 0%,
    #0e2236 35%,
    #0b1a2a 100%
  );
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.4s ease,
                visibility 0s linear 0.5s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 11000;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}

.showMobileOnly.expand{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.35s ease,
                visibility 0s;
}/* Overlay behind the slide-in menu */
body.menu-open{
    overflow: hidden;
}

.mobile-nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.mobile-nav-overlay.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s;
}

.showMobileOnly.hidden{
    display: none;
}

/* Close button — circular, rotates on hover */
.mobile-nav-close{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.mobile-nav-close:hover{
    background: rgba(255, 127, 17, 0.2);
    border-color: rgba(255, 127, 17, 0.55);
    transform: rotate(90deg);
}

.mobile-nav-close svg{
    width: 26px;
    height: 26px;
    fill: var(--w-logo);
}

/* Hamburger menu links — staggered entrance */
.showMobileOnly ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 0 20px;
}

.showMobileOnly ul li{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.showMobileOnly.expand ul li{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    touch-action: manipulation;
}

.showMobileOnly.expand ul li:nth-child(1){ transition-delay: 0.06s; }
.showMobileOnly.expand ul li:nth-child(2){ transition-delay: 0.10s; }
.showMobileOnly.expand ul li:nth-child(3){ transition-delay: 0.14s; }
.showMobileOnly.expand ul li:nth-child(4){ transition-delay: 0.18s; }
.showMobileOnly.expand ul li:nth-child(5){ transition-delay: 0.22s; }
.showMobileOnly.expand ul li:nth-child(6){ transition-delay: 0.26s; }

/* Close button on menu — subtle pulse on open */
.showMobileOnly.expand .mobile-nav-close{
    animation: close-btn-in 0.4s ease 0.15s both;
}

@keyframes close-btn-in {
    from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
    to { opacity: 1; transform: rotate(0deg) scale(1); }
}

.showMobileOnly ul li a{
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    position: relative;
    transition: color 0.3s ease;
}

.showMobileOnly ul li a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange-500), #ffb15e);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.showMobileOnly ul li a:hover{
    color: var(--orange-500);
}

.showMobileOnly ul li a:hover::after{
    width: 60%;
}

/* Account icons inside the hamburger menu — styled chips */    .showMobileOnly .user-content{
        display: none;
    }

/* Language picker inside the hamburger menu */
.mobile-nav-lang{
    padding: 0 24px;
    width: 100%;
}

.mobile-nav-lang .lang-picker{
    width: 100%;
}

.mobile-nav-lang .lang-trigger{
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 1.2rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-nav-lang .lang-dropdown{
    position: static;
    width: 100%;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    backdrop-filter: none;
}

.mobile-nav-lang .lang-option{
    color: #ffffff;
    justify-content: center;
}

.mobile-nav-lang .lang-option:hover{
    background: rgba(255, 127, 17, 0.18);
}

.mobile-nav-lang .lang-option.active{
    color: var(--orange-500);
}

.mobile-nav-lang .lang-option.active::after{
    background: var(--orange-500);
}

/* Login button in hamburger menu */
.mobile-nav-login{
    padding: 0 24px;
    width: 100%;
    margin-top: 8px;
}

/* Secondary account icons (wishlist, orders, messages) inside the hamburger
   menu — laid out as a row of soft circular chips so they feel consistent
   with the top-bar icons but stay tucked away in the slide-in panel. */
.mobile-nav-login:not(:empty){
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 20px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.mobile-nav-login a,
.mobile-nav-login .notif-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin: 0 !important;
    position: relative;
    color: var(--w-logo);
    transition: transform 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

.mobile-nav-login a:hover,
.mobile-nav-login .notif-wrap:hover{
    transform: translateY(-3px);
    background: rgba(255, 127, 17, 0.22);
    border-color: rgba(255, 127, 17, 0.6);
    box-shadow: 0 8px 20px rgba(255, 127, 17, 0.35);
}

.mobile-nav-login a svg{
    width: 26px !important;
    height: 26px !important;
    max-width: none !important;
}

.mobile-nav-login .wl-nav-count,
.mobile-nav-login .msg-badge{
    top: -2px !important;
    right: -2px !important;
}

/* Guest "Log In" becomes a full-width gradient pill inside the menu. */
.mobile-nav-login a.login-btn{
    width: 100%;
    border-radius: 999px;
    border: none;
    background: linear-gradient(45deg, var(--orange-500), #ffb15e);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.4rem;
    padding: 1rem 1.4rem;
    box-shadow: 0 6px 18px rgba(255, 127, 17, 0.35);
    height: auto;
}

.mobile-nav-login a.login-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 127, 17, 0.5);
}

.showMobileOnly .user-content a,
.showMobileOnly .user-content .notif-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin: 0 !important; /* overrides the inline margin-left from the icon set */
    position: relative;
    color: var(--w-logo);
    transition: transform 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

.showMobileOnly .user-content a:hover,
.showMobileOnly .user-content .notif-wrap:hover{
    transform: translateY(-3px);
    background: rgba(255, 127, 17, 0.22);
    border-color: rgba(255, 127, 17, 0.6);
    box-shadow: 0 8px 20px rgba(255, 127, 17, 0.35);
}

.showMobileOnly .user-content a img.userIcon{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important; /* undo any desktop-nav cap that leaks here */
    object-fit: cover;
    border-radius: 50%;
    /* Undo the base .user-content .userIcon padding/background so the image
       fills its full 52px chip instead of rendering slim with a grey ring. */
    padding: 0 !important;
    background: none !important;
}

.showMobileOnly .user-content a svg,
.showMobileOnly .user-content .notif-bell svg{
    width: 26px !important;
    height: 26px !important;
    max-width: none !important;
}

.showMobileOnly .user-content .notif-bell{
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--w-logo);
}

/* Badge nudged onto the chip corner */
.showMobileOnly .user-content .wl-nav-count,
.showMobileOnly .user-content .notif-badge{
    top: -2px !important;
    right: -2px !important;
}

/* Guest "Log In" becomes a full-width gradient pill */
.showMobileOnly .user-content a.login-btn{
    width: 100%;
    border-radius: 999px;
    border: none;
    background: linear-gradient(45deg, var(--orange-500), #ffb15e);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.4rem;
    padding: 1rem 1.4rem;
    box-shadow: 0 6px 18px rgba(255, 127, 17, 0.35);
}

.showMobileOnly .user-content a.login-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 127, 17, 0.5);
}



@media (max-width: 700px) {
    :root{
        --h1 : 3.2rem;
        --h2 : max(2.4rem, 2.8rem);
        --h3 : 2.0rem;
        --h4 : 1.8rem;
        --h5 : 1.6rem;
        --h6 : 1.4rem;
        --bg-color: #0B3C5D;
        --w-logo: #FF7F11;
        --text-color: #ffffff;
        --text-hover: #FF7F11;
    }

    .nav-bar div.desk{
        display: none !important;
    }

    /* On mobile the desktop nav links hide, but the top-bar action icons stay.
       Show ONLY the compact mobile icon cluster (user + notification + staff)
       and hide the full desktop icon set so they never duplicate or overflow. */
    .nav-bar > .user-content{
        display: flex !important;
        gap: 6px;
        padding: 4px 0;
    }

    .nav-bar > .user-content > #js-uicon,
    .nav-bar > .user-content > #js-icon{
        display: none !important;
    }
    .nav-bar > .user-content .mobile-user-icons{
        display: flex !important;
        align-items: center;
        gap: 6px;
    }
    .nav-bar > .user-content .mobile-user-icons #js-micon-mobile{
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-bar .mobile-nav-icon{
        display: flex;
        width: auto;
        height: auto;
    }

    /* Phone/tabbar ordering: hamburger goes to the FRONT (left) of the logo,
       the action icons sit on the RIGHT, and the logo sits right beside the
       hamburger (no centering) so the left edge reads as one group. */
    .nav-bar > .mobile-nav-icon{
        order: 0;
    }
    .nav-bar > .web-logo-container{
        order: 1;
    }
    .nav-bar > .user-content{
        order: 2;
        margin-left: auto; /* push the icon/login cluster to the far right */
    }

    /* Compact bar so logo + icons + hamburger always fit — left-aligned so the
       burger+logo hug the left edge as a tight side-by-side pair.

       --nav-h MUST be re-declared on :root, not on .nav-bar. Custom properties
       inherit to descendants only, so a value set on the <header> never reaches
       #Hero in home-v2.css, which is a sibling of the header rather than a
       descendant of it. Declaring it here would silently leave the hero padding
       for the 60px desktop bar on every phone. */
    :root{
        --nav-h: 56px;
    }

    .nav-bar{
        justify-content: flex-start;
        gap: 6px;
        height: var(--nav-h);
        padding: 0 1rem;
    }

    /* Keep a little breathing room between the logo and the icon cluster */
    .nav-bar > .user-content{
        gap: 8px;
        padding: 6px 4px;
    }

    .user-content .userIcon{
        width: 30px;
        height: 30px;
    }
}

/* Phones: shrink everything further — no horizontal overflow */
@media (max-width: 480px) {
    /* On :root for the same reason as the 700px block above — the hero reads
       --nav-h but does not descend from the header. */
    :root{
        --nav-h: 54px;
    }

    .nav-bar{
        height: var(--nav-h);
        padding: 0 0.8rem;
    }

    .nav-bar .web-logo{
        font-size: 2.4rem;
        letter-spacing: -1px;
    }

    /* Smaller logo on phones so the brand mark never drives horizontal
       overflow or crowds the hamburger. */
    .nav-bar .web-logo-container a img{
        width: clamp(84px, 26vw, 120px);
    }

    /* Scoped with `>` so these only shrink the desktop navbar icons and never
       the hamburger menu's, which lives inside .nav-bar too. */
    .nav-bar > .user-content{
        gap: 4px;
        padding: 4px 2px;
    }

    /* Inline-styled icons are overridden here so the bar fits small screens */
    .nav-bar > .user-content a{
        margin-left: 3px !important;
    }

    .nav-bar > .user-content a svg,
    .nav-bar > .user-content a img{
        max-width: 24px !important;
        height: auto !important;
    }

    .user-content .userIcon{
        width: 26px;
        height: 26px;
    }

    #messages-link svg{
        width: 22px !important;
        height: 22px !important;
    }

    .notif-bell-icon{
        width: 20px !important;
        height: 20px !important;
    }    /* Mobile nav bar: language picker — show ONLY the globe icon (no text) */
    .nav-bar > .user-content .lang-picker{
        display: inline-flex;
        align-items: center;
    }
    .nav-bar > .user-content .lang-picker .lang-trigger{
        padding: 8px;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        justify-content: center;
        gap: 0;
    }
    .nav-bar > .user-content .lang-picker .lang-current{
        display: none;
    }
    .nav-bar > .user-content .lang-picker .lang-trigger .ic{
        width: 20px;
        height: 20px;
    }
    .nav-bar > .user-content .lang-picker .lang-dropdown{
        right: 0;
        transform: none;
        left: auto;
    }

    .login-btn{
        padding: 0.55rem 1.1rem;
        font-size: 1.2rem;
    }

    .mobile-nav-icon svg{
        width: 32px;
        height: 32px;
    }

    /* User icon in mobile bar — the desktop icon is already hidden at 700px,
       and these proportions keep the mobile cluster compact on phones. */
    .nav-bar > .user-content{
        gap: 4px;
        padding: 4px 2px;
    }

    .nav-bar > .user-content .mobile-user-icons a,
    .nav-bar > .user-content .mobile-user-icons .notif-wrap{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--w-logo);
        margin: 0;
        position: relative;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    /* Compact-but-open login button in the mobile bar (guest view): a roomy
       pill with breathing room so it reads clearly next to the icons. */
    .nav-bar > .user-content .mobile-user-icons a.login-btn{
        width: auto;
        height: 34px;
        padding: 0 1.2rem;
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(45deg, var(--orange-500), #ffb15e);
        border: none;
        box-shadow: 0 3px 10px rgba(255, 127, 17, 0.35);
        transform: none;
        white-space: nowrap;
    }

    .nav-bar > .user-content .mobile-user-icons a:hover,
    .nav-bar > .user-content .mobile-user-icons .notif-wrap:hover{
        transform: translateY(-1px);
        background: rgba(255, 127, 17, 0.2);
    }

    .nav-bar > .user-content .mobile-user-icons a img.userIcon{
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        border-radius: 50%;
        padding: 0;
        background: none;
    }

    .nav-bar > .user-content .mobile-user-icons a svg,
    .nav-bar > .user-content .mobile-user-icons .notif-bell svg,
    .nav-bar > .user-content .notif-bell-icon{
        width: 20px;
        height: 20px;
        max-width: none;
    }

    .nav-bar > .user-content .mobile-user-icons .notif-bell{
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--w-logo);
    }

    .nav-bar > .user-content .mobile-user-icons .notif-badge,
    .nav-bar > .user-content .mobile-user-icons .wl-nav-count{
        top: -3px !important;
        right: -3px !important;
        min-width: 14px;
        height: 14px;
        font-size: 9px;
        line-height: 14px;
        padding: 0 3px;
    }

    /* Hide the desktop-only user content elements on mobile */
    .nav-bar > .user-content > .desk-only{
        display: none;
    }
}

.nav-bar > .user-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    padding: 6px 0;
    width: auto;
    text-decoration: none;
    pointer-events: auto;
}

/* Language picker must always be visible in the nav bar */
.nav-bar > .user-content > #lang-picker,
.nav-bar > .user-content > #lang-picker .lang-picker,
.nav-bar > .user-content > #lang-picker .lang-trigger{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.nav-bar .user-content > * {
    pointer-events: auto;
}


.user-content .userIcon{
    background: rgba(211, 211, 211, 0.377);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 2px;
}

/* Mobile user icons container (hidden on desktop) */
.mobile-user-icons{
    display: none;
}

/* Direct children only — a descendant selector here would paint every span
   inside the injected notification dropdown (#ffffff) and make its text
   invisible in the light theme. The dropdown's own class rules (or theme.css
   dark overrides) style the nested spans instead. */
.user-content > span{
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    pointer-events: auto;
}

#js-uicon,
#js-micon,
#js-uicon *,
#js-micon *,
.notif-wrap,
.notif-bell,
.notif-bell * {
    pointer-events: auto !important;
}

.user-content a{
    pointer-events: all;
}

.login-btn{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--orange-500), #ffb15e);
    background-size: 150% 150%;
    box-shadow: 0 6px 18px rgba(255, 127, 17, 0.35);
    cursor: pointer;
    transition: all 0.35s ease;
}

.login-btn:hover{
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow: 0 10px 26px rgba(255, 127, 17, 0.5);
}

.login-btn:active{
    transform: translateY(-1px) scale(0.98);
}

.login-btn:focus-visible{
    outline: 2px solid var(--orange-500);
    outline-offset: 3px;
}

/* Messages Link Styling */
#messages-link {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    padding: 8px 0;
}

#messages-link:hover {
    opacity: 0.8;
}

#messages-link svg {
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(255, 127, 17, 0.3));
}

#messages-link:hover svg {
    filter: drop-shadow(0 2px 6px rgba(255, 127, 17, 0.6));
    transform: scale(1.1);
}

/* Responsive Messages Link */
@media (max-width: 768px) {
    #messages-link {
        gap: 4px;
    }

    #messages-link svg {
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    #messages-link {
        padding: 6px 0;
    }

    #messages-link svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ===== Notifications bell + dropdown ===== */
/* Inside the hamburger menu the dropdown can't render in the slide-in
   panel, so the bell becomes a plain shortcut to the notifications page
   (the unread badge still updates). Desktop keeps the full dropdown. */
.showMobileOnly .notif-wrap{
    display: inline-flex !important;
    margin: 0 !important;
}

.showMobileOnly .notif-dropdown{
    display: none !important;
}

.notif-wrap {
  pointer-events: auto;
  z-index: 10001;
  position: relative;
}

.notif-bell {
  color: #FF7F11;
  transition: color 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  position: relative;
  z-index: 10002;
}

.notif-bell:hover {
  color: #e56600;
  transform: translateY(-1px);
}

.notif-bell-icon {
  display: block;
}

.notif-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff2d55;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 45, 85, 0.45);
}

/* Live unread-messages badge on the Messages envelope icon (data-msg-badge) */
.msg-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff2d55;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 45, 85, 0.45);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(470px, calc(100vh - 120px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.97));
  border: 1px solid rgba(11, 60, 93, 0.12);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(2, 42, 70, 0.22);
  backdrop-filter: blur(16px);
  z-index: 10000;
  font-size: 1.4rem;
  color: #123651;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.notif-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}


.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 1.2rem 1.4rem 1rem;
  border-bottom: 1px solid rgba(11, 60, 93, 0.1);
  font-weight: 700;
  color: #0f2742;
}

.notif-dropdown-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-dropdown-caption {
  color: #4f6480;
  font-size: 1.15rem;
  font-weight: 500;
}

.notif-dropdown-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.notif-theme-switch {
  border: 1px solid rgba(255, 127, 17, 0.24);
  background: rgba(255, 127, 17, 0.08);
  color: #ff7f11;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.notif-theme-switch:hover {
  transform: translateY(-1px);
  background: rgba(255, 127, 17, 0.14);
}

.notif-mark-all {
  background: none;
  border: none;
  color: #ff7f11;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notif-mark-all:hover {
  text-decoration: underline;
}

.notif-list-wrap {
  padding: 0.8rem 0 0;
}

.notif-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4rem 0.6rem;
  color: #5b7186;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.notif-list::-webkit-scrollbar {
  width: 7px;
}

.notif-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff7f11, #2575fc);
  border-radius: 999px;
}

.notif-item + .notif-item {
  border-top: 1px solid rgba(11, 60, 93, 0.08);
}

.notif-item.unread {
  background: linear-gradient(90deg, rgba(255, 127, 17, 0.06), rgba(255, 127, 17, 0.02));
}

.notif-item a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.4rem;
  text-decoration: none;
  color: #0b3c5d;
  transition: background 0.2s ease;
}

.notif-item a:hover {
  background: rgba(255, 127, 17, 0.08);
}

.notif-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  display: inline-flex;
  color: #FF7F11;
}
.notif-icon svg {
  width: 22px;
  height: 22px;
}

.notif-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.notif-title {
  font-weight: 600;
}

.notif-body {
  color: #5b7186;
  font-size: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-time {
  color: #9aa9b8;
  font-size: 1.15rem;
}

.notif-empty {
  padding: 2rem 1.4rem;
  text-align: center;
  color: #7d8ea0;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.notif-view-all {
  display: block;
  text-align: center;
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid rgba(11, 60, 93, 0.1);
  color: #ff7f11;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 127, 17, 0.03);
}

.notif-view-all:hover {
  background: rgba(255, 127, 17, 0.08);
}

/* Active page highlight — works on every page (shared navbar styles) */
.nav-bar .nav-links.current a {
  color: #ffb463;
  font-weight: 600;
  position: relative;
  text-shadow: 0 0 14px rgba(255, 138, 43, 0.55);
}

.nav-bar .nav-links.current a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff8a2b, #ffd166);
  box-shadow: 0 0 12px rgba(255, 138, 43, 0.95), 0 0 26px rgba(255, 138, 43, 0.45);
}

/* Active page inside the slide-in mobile menu: the underline sits
   below the link and looks misplaced, so swap it for a soft pill. */
.nav-bar .nav-links-container:not(.desk) .nav-links.current a::after {
  display: none;
}

.nav-bar .nav-links-container:not(.desk) .nav-links.current a {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.32), rgba(255, 209, 102, 0.18));
  border: 1px solid rgba(255, 138, 43, 0.5);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 0 14px rgba(255, 138, 43, 0.35);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Marketplace nav accent — the shop gets an orange underline glow */
.nav-bar .nav-links.nav-market a {
  color: #ffb463;
  font-weight: 700;
  position: relative;
}

.nav-bar .nav-links.nav-market a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff8a2b, #ffd166);
  box-shadow: 0 0 8px rgba(255, 138, 43, 0.8);
}

/* ============================================================
   Language Picker
   ============================================================ */
.lang-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--w-logo);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.lang-trigger:hover {
  background: rgba(255, 127, 17, 0.18);
  border-color: rgba(255, 127, 17, 0.5);
  transform: translateY(-1px);
}

.lang-trigger .ic {
  flex-shrink: 0;
}

.lang-trigger .lang-current {
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.97));
  border: 1px solid rgba(11, 60, 93, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(2, 42, 70, 0.22);
  backdrop-filter: blur(16px);
  z-index: 10010;
  padding: 6px;
  overflow: hidden;
}

.lang-dropdown[hidden] {
  display: none;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #0b3c5d;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-option:hover {
  background: rgba(255, 138, 43, 0.1);
}

.lang-option.active {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.15), rgba(255, 209, 102, 0.12));
  color: #ff7a00;
  font-weight: 700;
}

.lang-option.active::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a00;
  flex-shrink: 0;
}

/* Mobile: compact language trigger */
@media (max-width: 700px) {
  .lang-trigger {
    padding: 5px 8px;
    font-size: 1rem;
    gap: 4px;
  }
  .lang-trigger .lang-current {
    font-size: 0.95rem;
  }
  .lang-trigger .ic {
    width: 16px;
    height: 16px;
  }
  .lang-dropdown {
    right: -4px;
    min-width: 150px;
    max-width: 200px;
  }
  .lang-option {
    font-size: 1.05rem;
    padding: 8px 12px;
  }
}

/* Small phones: icon-only trigger, dropdown centers on it */
@media (max-width: 480px) {
  .lang-trigger {
    padding: 6px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    justify-content: center;
    gap: 0;
  }
  .lang-trigger .lang-current {
    display: none;
  }
  .lang-trigger .ic {
    width: 18px;
    height: 18px;
  }
  .lang-dropdown {
    right: 50%;
    transform: translateX(50%);
    min-width: 160px;
    max-width: 220px;
  }
}

/* Extra small (320px): dropdown sticks to screen edge */
@media (max-width: 360px) {
  .lang-dropdown {
    right: auto;
    left: 0;
    transform: none;
    max-width: calc(100vw - 24px);
  }
}

/* ── Mobile: shrink notification dropdown ── */
@media (max-width: 480px) {
  .notif-dropdown {
    width: min(300px, calc(100vw - 32px));
    max-height: min(360px, calc(100vh - 100px));
    border-radius: 14px;
    right: -12px;
    font-size: 1.25rem;
  }
  .notif-dropdown-head {
    padding: 0.9rem 1rem 0.8rem;
  }
  .notif-item a {
    padding: 0.7rem 1rem;
    gap: 0.7rem;
  }
  .notif-icon svg {
    width: 18px;
    height: 18px;
  }
  .notif-body {
    font-size: 1.1rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .notif-list {
    max-height: 240px;
  }
  .notif-view-all {
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
  }
}

/* ── Notification Dropdown Dark Mode ── */
[data-theme="dark"] .notif-dropdown {
  background: linear-gradient(180deg, rgba(18, 26, 43, 0.98), rgba(14, 21, 36, 0.97));
  border-color: rgba(38, 52, 73, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: #c5d0dc;
}
[data-theme="dark"] .notif-dropdown-head {
  border-bottom-color: rgba(38, 52, 73, 0.5);
  color: #eef4fb;
}
[data-theme="dark"] .notif-dropdown-caption { color: #71849c; }
[data-theme="dark"] .notif-mark-all { color: #ffb463; }
[data-theme="dark"] .notif-item a { color: #c5d0dc; }
[data-theme="dark"] .notif-item a:hover { background: rgba(255, 127, 17, 0.08); }
[data-theme="dark"] .notif-item.unread { background: linear-gradient(90deg, rgba(255, 127, 17, 0.1), rgba(255, 127, 17, 0.03)); }
[data-theme="dark"] .notif-item + .notif-item { border-top-color: rgba(38, 52, 73, 0.4); }
[data-theme="dark"] .notif-body { color: #8ea0b8; }
[data-theme="dark"] .notif-time { color: #5a7291; }
[data-theme="dark"] .notif-empty { color: #5a7291; }
[data-theme="dark"] .notif-view-all { border-top-color: rgba(38, 52, 73, 0.5); background: rgba(255, 127, 17, 0.04); }
[data-theme="dark"] .notif-view-all:hover { background: rgba(255, 127, 17, 0.1); }
[data-theme="dark"] .notif-section-head { color: #5a7291; }
[data-theme="dark"] .notif-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff7f11, #2575fc); }