/* ================= HEADER ================= */
header{
    background: linear-gradient(135deg,#0d6efd,#084298);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    gap:15px;
    flex-wrap:wrap;
}

/* ================= LOGO ================= */
.logo{
    display:flex;
    flex-direction:column;
    max-width:480px;
}

.logo tulis_logo,
.logo .logo-title{
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.logo tulis_tag_line,
.logo .logo-tagline{
    font-size:12px;
    opacity:.9;
    margin-top:2px;
}

/* ================= NAV ================= */
.nav{
    width:100%;
}

.nav-horizontal{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
}

.nav-horizontal::-webkit-scrollbar{
    display:none;
}

.nav-horizontal a{
    padding:7px 16px;
    background:rgba(255,255,255,.15);
    border-radius:6px;
    font-size:14px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
    transition:.2s;
}

.nav-horizontal a:hover{
    background:rgba(255,255,255,.3);
}

/* ================= CART BADGE ================= */
.nav-cart{
    position:relative;
}

.cart-badge{
    position:absolute;
    top:-6px;
    right:-10px;
    background:red;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:50%;
}

/* ================= DESKTOP ================= */
@media(min-width:769px){
    header{
        flex-wrap:nowrap;
    }

    .nav{
        width:auto;
    }
}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .logo{
        max-width:100%;
    }

    .nav-horizontal a{
        font-size:13px;
        padding:6px 14px;
    }
}