/* ==========================================================
   HEADER
========================================================== */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:#fff;

    border-bottom:1px solid #ececec;
}

.admin-bar .site-header{
    top:32px;
}

/* ==========================================================
   CONTAINER
========================================================== */

.header-container{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;

    min-height:78px;
}

/* ==========================================================
   BRAND
========================================================== */

.site-branding{

    flex-shrink:0;

    display:flex;
    align-items:center;
}

.site-branding img{

    display:block;

    height:42px;
    width:auto;
}

.logo-text{

    font-size:1.5rem;
    font-weight:700;

    color:#111;

    text-decoration:none;
}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.main-navigation{

    flex:1;

    display:flex;
    justify-content:center;
}

.main-menu{

    margin:0;
    padding:0;

    list-style:none;

    display:flex;
    align-items:center;

    gap:36px;
}

.main-menu li{

    margin:0;
}

.main-menu a{

    display:block;

    text-decoration:none;

    font-weight:500;

    color:#222;

    transition:.25s;
}

.main-menu a:hover{

    color:var(--primary-color,#2563eb);
}

/* ==========================================================
   ACTIONS
========================================================== */

.header-actions{

    display:flex;
    align-items:center;

    gap:18px;

    flex-shrink:0;
}

.login-btn{

    text-decoration:none;

    color:#222;

    font-weight:600;
}

.buy-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:12px 24px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

    background:var(--primary-color,#2563eb);

    transition:.25s;
}

.buy-btn:hover{

    transform:translateY(-2px);
}

/* ==========================================================
   MOBILE TOGGLE
========================================================== */

.mobile-toggle{

    display:none;

    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:0;

    background:none;

    cursor:pointer;

    font-size:30px;

    line-height:1;

    color:#111;
}