/* ===================================================
SENARA PREMIUM HEADER
=================================================== */

:root{
--primary:#111;
--secondary:#b88a65;
--text:#666;
--border:#ececec;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
overflow-x:hidden;
}

body{
font-family:'Manrope',sans-serif;
font-size:15px;
line-height:1.7;
font-weight:400;
color:var(--primary);
background:#fff;
overflow-x:hidden;
padding-top:134px;
}

/* ===================================================
GLOBAL
=================================================== */

.container{
width:100%;
max-width:1320px;
margin:auto;
padding-left:20px;
padding-right:20px;
}

img{
max-width:100%;
display:block;
height:auto;
}

a{
text-decoration:none;
color:inherit;
transition:.3s ease;
}

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

.main-header{
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
z-index:99999;
box-shadow:0 4px 25px rgba(0,0,0,.05);
}

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

.offer-bar{
height:42px;
background:#111;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:0 25px;
overflow:hidden;
}

.offer-text{
width:100%;
text-align:center;
color:#fff;
font-size:13px;
font-weight:500;
letter-spacing:.4px;
}

.social-icons{
position:absolute;
right:25px;
display:flex;
align-items:center;
gap:15px;
}

.social-icons a{
color:#fff;
font-size:13px;
}

.social-icons a:hover{
opacity:.8;
transform:translateY(-2px);
}

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

.header-row{
height:92px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 35px;
gap:25px;
}

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

.logo{
width:180px;
object-fit:contain;
}

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

.desktop-nav{
display:flex;
align-items:center;
gap:32px;
flex:1;
margin-left:40px;
}

.desktop-nav a,
.shop-toggle{
font-size:14px;
font-weight:600;
letter-spacing:.4px;
text-transform:uppercase;
color:#111;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
}

.desktop-nav a:hover,
.shop-toggle:hover{
color:var(--secondary);
}

/* ===================================================
SHOP MENU
=================================================== */

.shop-menu{
position:relative;
}

.dropdown-box{
position:absolute;
top:130%;
left:0;
width:280px;
background:#fff;
border-radius:18px;
padding:20px;
opacity:0;
visibility:hidden;
transform:translateY(15px);
transition:.35s;
box-shadow:0 20px 60px rgba(0,0,0,.10);
border:1px solid #f3f3f3;
}

.shop-menu:hover .dropdown-box{
opacity:1;
visibility:visible;
transform:none;
}

.category-item{
padding:12px 0;
border-bottom:1px solid #f3f3f3;
}

.category-item:last-child{
border:none;
}

.category-item a{
display:block;
font-size:14px;
font-weight:500;
}

.category-item a:hover{
padding-left:8px;
color:var(--secondary);
}

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

.header-icons{
display:flex;
align-items:center;
gap:12px;
}

.header-icons a{
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fafafa;
border:1px solid #ededed;
font-size:16px;
position:relative;
}

.header-icons a:hover{
background:#111;
color:#fff;
transform:translateY(-2px);
}

.cart-count{
position:absolute;
top:-4px;
right:-4px;
width:18px;
height:18px;
border-radius:50%;
background:var(--secondary);
color:#fff;
font-size:10px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}

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

.mobile-toggle{
display:none;
width:42px;
height:42px;
border:none;
border-radius:50%;
background:#fafafa;
border:1px solid #eee;
font-size:18px;
cursor:pointer;
}

/* ===================================================
MOBILE MENU
=================================================== */

.mobile-menu{
position:fixed;
top:0;
left:-100%;
width:320px;
max-width:85%;
height:100vh;
background:#fff;
z-index:999999;
padding:25px;
overflow-y:auto;
transition:.4s;
box-shadow:0 0 40px rgba(0,0,0,.12);
}

.mobile-menu.active{
left:0;
}

.mobile-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:25px;
}

.mobile-logo{
width:150px;
}

.close-mobile{
font-size:24px;
cursor:pointer;
}

.mobile-links{
display:flex;
flex-direction:column;
}

.mobile-links a{
padding:15px 0;
font-size:14px;
font-weight:600;
border-bottom:1px solid #f2f2f2;
}

.mobile-shop-btn{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 0;
font-size:14px;
font-weight:600;
cursor:pointer;
}


.mobile-dropdown{
display:none;
padding-bottom:10px;
}

.mobile-dropdown.active{
display:block;
}

.mobile-dropdown a{
display:block;
padding:10px 0 10px 15px;
font-size:13px;
color:#666;
border:none;
}

/* ===================================================
SEARCH PANEL
=================================================== */

.search-panel{
position:fixed;
top:0;
right:-100%;
width:500px;
max-width:100%;
height:100vh;
background:#fff;
z-index:999999;
padding:30px;
transition:.4s;
overflow-y:auto;
box-shadow:-10px 0 35px rgba(0,0,0,.08);
}

.search-panel.active{
right:0;
}

.search-top{
display:flex;
align-items:center;
gap:12px;
margin-bottom:20px;
}

.search-input{
width:100%;
height:55px;
border:none;
border-bottom:2px solid #ddd;
outline:none;
font-size:15px;
background:transparent;
}

.search-input:focus{
border-color:var(--secondary);
}

.close-search{
font-size:24px;
cursor:pointer;
}

/* ===================================================
OVERLAY
=================================================== */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:999998;
}

.overlay.active{
opacity:1;
visibility:visible;
}

/* ===================================================
TABLET
=================================================== */

@media(max-width:991px){

.desktop-nav{
display:none;
}

.mobile-toggle{
display:flex;
align-items:center;
justify-content:center;
}

.social-icons{
display:none;
}

.header-row{
height:82px;
padding:0 20px;
}

.logo{
width:160px;
}

body{
padding-top:124px;
}

}

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

@media(max-width:576px){

.offer-bar{
height:34px;
}

.offer-text{
font-size:10px;
}

.header-row{
height:72px;
padding:0 15px;
}

.logo{
width:135px;
}

.header-icons{
gap:8px;
}

.header-icons a{
width:38px;
height:38px;
font-size:14px;
}

.mobile-toggle{
width:38px;
height:38px;
font-size:16px;
}

.mobile-menu{
width:290px;
padding:20px;
}

.search-panel{
width:100%;
padding:20px;
}

body{
padding-top:106px;
}

}



/* ===================================================
MINI MOBILE
=================================================== */

@media(max-width:360px){

.logo{
width:115px;
}

.offer-text{
font-size:9px;
}

.header-icons a{
width:34px;
height:34px;
font-size:13px;
}

.mobile-toggle{
width:34px;
height:34px;
font-size:14px;
}

body{
padding-top:102px;
}

}