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

.site-header{

    width:100%;

    background:#111;

    position:sticky;

    top:0;

    z-index:999;

}

/* ===================================================== */
/* 🔥 TOP BAR */
/* ===================================================== */

.header-top{

    display:flex;

    align-items:center;

    gap:20px;

    padding:12px 20px;

}

/* ===================================================== */
/* 🔥 LOGO */
/* ===================================================== */

.header-logo{

    color:#fff;

    font-size:28px;

    font-weight:700;

    white-space:nowrap;

}

/* ===================================================== */
/* 🔥 SEARCH */
/* ===================================================== */

.header-search{

    flex:1;

    display:flex;

}

.header-search-input{

    flex:1;

    height:46px;

    border:none;

    outline:none;

    padding:0 15px;

    border-radius:8px 0 0 8px;

}

.header-search-btn{

    width:60px;

    border:none;

    cursor:pointer;

    background:#ff8a00;

    color:#fff;

    border-radius:0 8px 8px 0;

}

/* ===================================================== */
/* 🔥 CATEGORY BAR */
/* ===================================================== */

.header-categories{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:10px 15px;

    background:#fff;

}

.header-category-chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:#f5f5f5;

    cursor:pointer;

    white-space:nowrap;

    transition:.25s;

}

.header-category-chip:hover{

    background:#ececec;

}

/* ===================================================== */
/* 🔥 MOBILE */
/* ===================================================== */

@media(max-width:768px){

    .header-top{

        flex-direction:column;

        align-items:stretch;

    }

    .header-logo{

        text-align:center;

    }

}