Shop

Shop

Why Us

Contact

My account

Checkout

Cart

Login

Sign Up

Logged out

#sa-custom-header{
–sa-navy:#111827;
–sa-blue:#2563eb;
–sa-blue-dark:#1d4ed8;
–sa-border:#e5e7eb;
–sa-text:#111827;
width:100%;
background:#fff;
border-bottom:1px solid var(–sa-border);
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
position:relative;
z-index:99999;
}
#sa-custom-header *{
box-sizing:border-box;
}
#sa-custom-header .sa-header-inner{
width:100%;
max-width:1400px;
margin:0 auto;
padding:12px 28px;
display:flex;
align-items:center;
gap:24px;
}
#sa-custom-header .sa-header-logo{
flex:0 0 auto;
color:var(–sa-navy);
text-decoration:none;
font-size:25px;
font-weight:800;
letter-spacing:-1px;
white-space:nowrap;
}
#sa-custom-header .sa-header-logo span{
color:var(–sa-blue);
}
/* =========================================================
SEARCH
========================================================= */
#sa-custom-header .sa-header-search-wrap{
position:relative;
flex:1;
max-width:600px;
min-width:240px;
}
#sa-custom-header .sa-header-search-box{
width:100%;
height:48px;
display:flex;
align-items:center;
border:1px solid #cbd5e1;
background:#f8fafc;
border-radius:10px;
overflow:hidden;
transition:
border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}
#sa-custom-header .sa-header-search-box:focus-within{
background:#fff;
border-color:var(–sa-blue);
box-shadow:
0 0 0 3px rgba(37,99,235,.12);
}
#sa-custom-header .sa-header-search-icon{
width:19px;
height:19px;
margin-left:15px;
flex:0 0 auto;
color:#64748b;
pointer-events:none;
}
#sa-custom-header .sa-header-search-input{
flex:1;
min-width:0;
width:100%;
height:100%;
border:0 !important;
outline:0 !important;
background:transparent !important;
box-shadow:none !important;
padding:
0 8px 0 11px !important;
margin:0 !important;
color:var(–sa-text);
font-size:14px;
line-height:1;
}
#sa-custom-header
.sa-header-search-input::placeholder{
color:#94a3b8;
opacity:1;
}
#sa-custom-header .sa-header-search-clear{
width:40px;
height:100%;
display:none;
align-items:center;
justify-content:center;
flex:0 0 auto;
border:0;
background:transparent;
color:#64748b;
cursor:pointer;
font-size:22px;
padding:0;
}
#sa-custom-header .sa-header-search-clear:hover{
color:#111827;
}
/* =========================================================
SUGGESTIONS
========================================================= */
#sa-custom-header .sa-header-suggestions{
position:absolute;
top:56px;
left:0;
right:0;
display:none;
background:#fff;
border:1px solid var(–sa-border);
border-radius:12px;
overflow:hidden;
box-shadow:
0 18px 45px rgba(15,23,42,.15);
z-index:100000;
}
#sa-custom-header
.sa-header-suggestions.show{
display:block;
}
#sa-custom-header .sa-header-suggestion-title{
padding:11px 14px 8px;
color:#94a3b8;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.55px;
}
#sa-custom-header .sa-header-suggestion{
width:100%;
display:flex;
align-items:center;
gap:12px;
padding:10px 14px;
margin:0;
border:0;
border-top:1px solid #f1f5f9;
background:#fff;
color:var(–sa-text);
cursor:pointer;
text-align:left;
font-family:inherit;
}
#sa-custom-header
.sa-header-suggestion:hover,
#sa-custom-header
.sa-header-suggestion.active{
background:#f8fafc;
}
#sa-custom-header .sa-header-suggestion-image{
width:46px;
height:46px;
flex:0 0 46px;
object-fit:cover;
border-radius:7px;
background:#f3f4f6;
}
#sa-custom-header .sa-header-suggestion-info{
flex:1;
min-width:0;
}
#sa-custom-header .sa-header-suggestion-name{
font-size:13px;
font-weight:750;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#sa-custom-header .sa-header-suggestion-meta{
margin-top:3px;
color:#94a3b8;
font-size:11px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#sa-custom-header .sa-header-suggestion-price{
flex:0 0 auto;
color:var(–sa-navy);
font-size:13px;
font-weight:800;
}
#sa-custom-header .sa-header-search-status{
padding:16px;
color:#64748b;
font-size:13px;
text-align:center;
}
#sa-custom-header .sa-header-search-footer{
width:100%;
padding:13px 14px;
border:0;
border-top:1px solid var(–sa-border);
background:#fff;
color:var(–sa-blue);
font-family:inherit;
font-size:12px;
font-weight:800;
cursor:pointer;
text-align:center;
}
#sa-custom-header
.sa-header-search-footer:hover{
background:#f8fafc;
}
/* =========================================================
NAVIGATION
========================================================= */
#sa-custom-header .sa-header-nav{
display:flex;
align-items:center;
justify-content:center;
gap:24px;
flex:0 0 auto;
}
#sa-custom-header .sa-header-nav a{
color:var(–sa-text);
text-decoration:none;
font-size:14px;
font-weight:650;
white-space:nowrap;
}
#sa-custom-header .sa-header-nav a:hover{
color:var(–sa-blue);
}
/* =========================================================
ACCOUNT
========================================================= */
#sa-custom-header .sa-header-auth{
flex:0 0 auto;
}
#sa-custom-header .sa-header-auth-inner{
display:flex;
align-items:center;
gap:10px;
}
#sa-custom-header .sa-login{
color:var(–sa-text);
text-decoration:none;
font-size:14px;
font-weight:750;
padding:9px 10px;
border-radius:8px;
}
#sa-custom-header .sa-login:hover{
color:var(–sa-blue);
background:#f8fafc;
}
#sa-custom-header .sa-signup{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 17px;
border-radius:8px;
background:var(–sa-blue);
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:800;
}
#sa-custom-header .sa-signup:hover{
background:var(–sa-blue-dark);
color:#fff;
}
#sa-custom-header .sa-logout{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 15px;
border:1px solid var(–sa-border);
border-radius:8px;
background:#fff;
color:var(–sa-text);
text-decoration:none;
font-size:13px;
font-weight:750;
}
#sa-custom-header .sa-logout:hover{
border-color:var(–sa-blue);
color:var(–sa-blue);
}
/* =========================================================
MOBILE MENU
========================================================= */
#sa-custom-header .sa-mobile-menu-button{
display:none;
width:44px;
height:44px;
flex:0 0 44px;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
padding:0;
margin:0;
border:1px solid var(–sa-border);
border-radius:9px;
background:#fff;
cursor:pointer;
}
#sa-custom-header .sa-mobile-menu-button span{
display:block;
width:19px;
height:2px;
border-radius:2px;
background:var(–sa-navy);
transition:transform .2s ease, opacity .2s ease;
}
#sa-custom-header .sa-mobile-menu-button.open span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
#sa-custom-header .sa-mobile-menu-button.open span:nth-child(2){
opacity:0;
}
#sa-custom-header .sa-mobile-menu-button.open span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
#sa-custom-header .sa-mobile-menu{
display:none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1100px){
#sa-custom-header .sa-header-inner{
gap:16px;
padding-left:18px;
padding-right:18px;
}
#sa-custom-header .sa-header-nav{
gap:16px;
}
#sa-custom-header .sa-header-nav a{
font-size:13px;
}
#sa-custom-header .sa-header-search-wrap{
max-width:420px;
}
}
@media(max-width:800px){
#sa-custom-header .sa-header-inner{
flex-wrap:wrap;
padding:13px 16px;
gap:12px;
}
#sa-custom-header .sa-header-logo{
order:1;
}
#sa-custom-header .sa-header-auth{
order:2;
margin-left:auto;
}
#sa-custom-header .sa-mobile-menu-button{
display:flex;
order:3;
}
#sa-custom-header .sa-header-search-wrap{
order:4;
flex-basis:100%;
max-width:none;
}
#sa-custom-header .sa-header-nav{
display:none;
}
#sa-custom-header .sa-mobile-menu{
position:absolute;
top:100%;
left:0;
right:0;
display:none;
background:#fff;
border-top:1px solid var(–sa-border);
border-bottom:1px solid var(–sa-border);
box-shadow:0 14px 28px rgba(15,23,42,.10);
z-index:100001;
}
#sa-custom-header .sa-mobile-menu.open{
display:block;
}
#sa-custom-header .sa-mobile-menu-inner{
display:flex;
flex-direction:column;
padding:8px 16px 14px;
}
#sa-custom-header .sa-mobile-menu-inner a{
display:block;
padding:13px 8px;
color:var(–sa-text);
text-decoration:none;
font-size:15px;
font-weight:700;
border-bottom:1px solid #f1f5f9;
}
#sa-custom-header .sa-mobile-menu-inner a:last-child{
border-bottom:0;
}
#sa-custom-header .sa-mobile-menu-inner a:hover{
color:var(–sa-blue);
background:#f8fafc;
}
}
@media(max-width:520px){
#sa-custom-header .sa-header-logo{
font-size:21px;
}
#sa-custom-header .sa-mobile-menu-button{
width:42px;
height:42px;
flex-basis:42px;
}
}