/*==================================================
TRIVANA NAVBAR
==================================================*/

.navbar{

position:relative;

z-index:100;

max-width:1380px;

height:82px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 35px;

}

.header.scrolled{

background:#fff;

box-shadow:0 15px 35px rgba(0,0,0,.08);

backdrop-filter:blur(12px);

}

.header{

position:fixed;

top:0;

left:0;

width:100%;

height:82px;

background:rgba(255,255,255,.65);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

z-index:9999;

transition:.35s ease;

}

.logo{

display:flex;

align-items:center;

text-decoration:none;

}

.logo img{

height:52px;

width:auto;

transition:.35s ease;

filter:drop-shadow(0 4px 10px rgba(0,0,0,.08));

}

.logo:hover img{

    transform:scale(1.06);

}

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

.nav-menu{

    display:flex;

    gap:48px;

    list-style:none;

    align-items:center;

}

.nav-menu a{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#222;

font-size:16px;

font-weight:600;

padding:8px 2px;

transition:.3s;

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:100%;

height:2px;

background:#8B6B4A;

transform:scaleX(0);

transform-origin:center;

transition:transform .35s ease;

border-radius:10px;

}

.nav-menu a:hover::after,
.nav-menu a.active::after{

transform:scaleX(1);

}

/*======================
RIGHT
======================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:18px;

}

.profile-link{

    text-decoration:none;

    color:#333;

    font-weight:600;

    transition:.3s;

}

.profile-link:hover{

    color:#8B6B4A;

}

.cart-link{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#F6F2ED;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#333;

    transition:.35s;

    position:relative;

}

.cart-link:hover{

    background:#8B6B4A;

    color:#fff;

    transform:translateY(-3px);

}

#cartCount{

    position:absolute;

    top:-5px;

    right:-5px;

    width:19px;

    height:19px;

    border-radius:50%;

    background:#C59B5D;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:600;

}

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

.menu-toggle{

display:none;

width:46px;

height:46px;

border:none;

background:none;

cursor:pointer;

font-size:22px;

}
/*=========================================
MOBILE NAVIGATION
=========================================*/

.mobile-menu{

position:fixed;

top:90px;

left:0;

width:100%;

background:#fff;

padding:30px;

display:none;

flex-direction:column;

gap:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

z-index:999;

}

.mobile-menu.active{

display:flex;

animation:slideMenu .35s ease;

}

.mobile-menu a{

text-decoration:none;

font-size:17px;

font-weight:500;

color:#333;

padding:12px 0;

border-bottom:1px solid #f1f1f1;

transition:.3s;

}

.mobile-menu a:hover{

padding-left:10px;

color:#8B6B4A;

}

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

.header.shrink{

background:rgba(255,255,255,.82);

backdrop-filter:blur(24px);

-webkit-backdrop-filter:blur(24px);

box-shadow:0 8px 30px rgba(0,0,0,.06);

}

.header.shrink .navbar{

height:82px;

}

/*=========================================
MENU TOGGLE
=========================================*/

.menu-toggle{

display:none;

cursor:pointer;

font-size:25px;

color:#333;

background:none;

border:none;

}

.menu-toggle:hover{

color:#8B6B4A;

}

/*=========================================
ANIMATION
=========================================*/

@keyframes slideMenu{

0%{

opacity:0;

transform:translateY(-15px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:992px){

.nav-menu{

display:none;

}

.menu-toggle{

display:block;

}

.profile-link .profile-text {
    display: none !important;
}

.profile-link{

display:inline-flex !important;
width:42px;
height:42px;
border-radius:50%;
background:#F6F2ED;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#333;
padding:0 !important;
white-space:nowrap;

}

.profile-link:hover{
background:#8B6B4A;
color:#fff;
}

}

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

@media(max-width:768px){

.header{

height:46px;

}

.navbar{

height:75px;

padding:0 15px;

}

.logo img{

height:46px;

}

.cart-link{

width:44px;

height:44px;

}

.mobile-menu{

top:75px;

}

}

@media(max-width:480px){

.nav-actions{
display:flex !important;
align-items:center !important;
gap:10px !important;
}

.logo img{

height:38px !important;

}

.cart-link, .profile-link{

width:38px !important;

height:38px !important;

font-size:0.95rem !important;

}

#cartCount{

width:18px;

height:18px;

font-size:10px;

}

}

/*=========================================
MOBILE APP BOTTOM NAVIGATION BAR
=========================================*/
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border, #E8E2D9);
    z-index: 9999;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.06);
}

@media(max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    
    body {
        padding-bottom: 65px;
    }
}

.mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light, #6D6D6D);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    gap: 4px;
    transition: color 0.25s ease;
}

.mobile-bottom-nav a i {
    font-size: 1.25rem;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: var(--primary, #8B6B4A);
}