/* =====================================================
   SELLAFRRIK HEADER
   UNIFIED RESPONSIVE HEADER
   MATCHES: NEW saf-header-* HTML STRUCTURE
===================================================== */

.saf-header{
    line-height:1;
    font-family:Arial,sans-serif;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    height:70px;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.1);
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    overflow:visible;
}

.saf-header *{
    box-sizing:border-box;
}


/* =====================================================
   HEADER LEFT SECTION
===================================================== */

.saf-header-left{
    display:flex;
    align-items:center;
    gap:10px;
}


/* =====================================================
   HEADER CATEGORY MENU TOGGLE
===================================================== */

.saf-header-menu-toggle{
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    height:40px;
    line-height:1;
}

.saf-header-hamburger-icon{
    width:24px;
    height:24px;
}


/* =====================================================
   HEADER CATEGORY MENU
===================================================== */

.saf-header-menu{
    display:none;
    position:absolute;
    top:70px;
    left:0;
    background:#fff;
    width:max-content;
    min-width:180px;
    max-width:90vw;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    flex-direction:column;
    padding:8px 0;
    border-radius:4px;
    max-height:70vh;
    overflow-y:auto;
    line-height:1;
}

.saf-header-menu.active{
    display:flex;
}

.saf-header-category-menu{
    display:flex;
    flex-direction:column;
}

.saf-header-category-menu a{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    color:#333;
    text-decoration:none;
    font-size:13px;
    line-height:1.2;
}

.saf-header-category-menu a:hover{
    background:#f5f5f5;
}

.saf-header-category-menu a img{
    width:18px;
    height:18px;
    flex-shrink:0;
}

.saf-header-category-menu a span{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


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

.saf-header-logo{
    display:flex;
    align-items:center;
}

.saf-header-logo img{
    height:50px;
    width:auto;
    display:block;
}


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

.saf-header-search{
    flex:1;
    min-width:350px;
    max-width:800px;
    margin-left:50px;
    margin-right:40px;
    display:flex;
    align-items:center;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
}

.saf-header-search input{
    flex:1;
    height:48px;
    padding:0 15px;
    border:none;
    border-radius:25px 0 0 25px;
    box-shadow:none;
    font-size:16px;
    outline:none;
    line-height:1;
}

.saf-header-search input:focus{
    box-shadow:none;
}

/* =====================================================
   DESKTOP SEARCH ICON BUTTON
===================================================== */

.saf-header-search button{
    width:55px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
    padding:0;
    border:none;
    background:transparent;
    border-radius:0 25px 25px 0;
    cursor:pointer;
}


.saf-header-search button img{
    width:50px;
    height:50px;
    max-width:none;
    display:block;
}


/* =====================================================
   HEADER NAVIGATION LINKS
===================================================== */

.saf-header-links{
    display:flex;
    align-items:center;
    gap:20px;
    margin-left:auto;
    flex:0 0 auto!important;
    white-space:nowrap!important;
}


.saf-header-links a,
.saf-header-toggle{
    text-decoration:none;
    color:#333;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
}


.saf-header-links img{
    width:30px;
    height:30px;
}


.saf-header-left{
    flex:0 0 auto!important;
    white-space:nowrap!important;
}

/* =====================================================
   HEADER CART LINK
===================================================== */

.saf-header-cart{
    margin-right:20px;
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:#333;
}

.saf-header-cart-icon{
    display:flex;
    align-items:center;
}


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

.saf-header-dropdown{
    position:relative;
}

.saf-header-dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
    flex-direction:column;
    min-width:180px;
    z-index:1000;
}

.saf-header-dropdown:hover .saf-header-dropdown-menu{
    display:flex;
}

.saf-header-dropdown-menu a{
    padding:8px 12px;
    color:#333;
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    line-height:1;
}

.saf-header-dropdown-menu a:hover{
    background:#f5f5f5;
}

.saf-header-dropdown-menu a img{
    width:18px;
    height:18px;
}


/* =====================================================
   MOBILE RESPONSIVE MODE
===================================================== */

@media(max-width:768px){

.saf-header{
    height:auto;
    min-height:60px;
    padding:0 12px;
    flex-wrap:wrap;
}

.saf-header-left{
    gap:5px;
}

.saf-header-menu-toggle{
    display:flex;
}

.saf-header-logo img{
    height:40px;
}

.saf-header-search{
    order:3;
    flex:0 0 100%;
    max-width:none;
    min-width:0;
    margin:10px 0;
}

.saf-header-search input{
    height:42px;
    border-radius:25px;
}

.saf-header-search button{
    display:none;
}

.saf-header-links{
    gap:10px;
}

.saf-header-links .saf-header-dropdown{
    display:none;
}

.saf-header-links img{
    width:26px;
    height:26px;
}

.saf-header-cart span:last-child{
    display:none;
}

.saf-header-menu{
    top:60px;
    width:100%;
}

}


/* =====================================================
   SMALL DESKTOP MODE
===================================================== */

@media(min-width:769px) and (max-width:1024px){

.saf-header-search{
    margin-left:20px;
    margin-right:20px;
}

.saf-header-links{
    gap:12px;
}

.saf-header-cart span:last-child{
    display:none;
}

}



/* =====================================================
   DESKTOP SIDEBAR
   SHOW CATEGORIES ONLY
===================================================== */

@media(min-width:769px){

.saf-header-menu-inner>.saf-header-dropdown{
    display:none;
}

}

/* =====================================================
   SAF HEADER DESKTOP PROTECTION LAYER
===================================================== */

.saf-header,
.saf-header *{
    box-sizing:border-box!important;
}

.saf-header{
    line-height:1!important;
    font-family:Arial,sans-serif!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:99999!important;
}

.saf-header form,
.saf-header input,
.saf-header button{
    margin:0!important;
    line-height:1!important;
}

.saf-header img{
    display:block!important;
    max-width:none!important;
}

.saf-header-search{
    display:flex!important;
    align-items:center!important;
}

.saf-header-search input,
.saf-header-search button{
    vertical-align:middle!important;
}

.saf-header-search button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.saf-header-search button img{
    display:block!important;
}



/* =====================================================
   SAF HEADER DESKTOP FIXED GRID SPACING
===================================================== */

@media(min-width:769px){

.saf-header{
    padding-left:20px!important;
    padding-right:20px!important;
    justify-content:flex-start!important;
}


/* LEFT GROUP */

.saf-header-left{
    display:flex!important;
    align-items:center!important;
    gap:20px!important;
    flex:0 0 auto!important;
}


/* LOGO TO SEARCH */

.saf-header-logo{
    margin-right:50px!important;
}


/* SEARCH FLEX AREA */

.saf-header-search{
    flex:1 1 auto!important;
    margin-left:0!important;
    margin-right:0!important;
    min-width:200px!important;
    max-width:800px!important;
}


/* RIGHT GROUP */

.saf-header-links{
    display:flex!important;
    align-items:center!important;
    gap:20px!important;
    margin-left:20px!important;
    flex:0 0 auto!important;
}

/* DROPDOWNS */

.saf-header-links .saf-header-dropdown{
    display:flex!important;
    align-items:center!important;
}


/* CART */

.saf-header-cart{
    margin:0!important;
    display:flex!important;
    align-items:center!important;
}


/* LOCK CHILD BEHAVIOUR */

.saf-header-left,
.saf-header-search,
.saf-header-links,
.saf-header-cart{
    position:relative!important;
}

}



/* =====================================================
   DESKTOP HEADER STINGER TOP LAYER FIX
===================================================== */

@media(min-width:769px){

.saf-header{
    z-index:2147483647!important;
}

.saf-header-menu,
.saf-header-dropdown-menu,
.saf-header-stinger{
    z-index:2147483647!important;
}

}


body{
    padding-top:65px;
}