/* =========================================
ANNOUNCEMENT BAR
========================================= */

.announcement-bar{

    height:42px;

    background:
    linear-gradient(
        135deg,
        #7D907C,
        #92A091
    );

    display:flex;

    align-items:center;

    color:white;

    font-size:13px;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.announcement-bar .container{

    display:flex;

    justify-content:center;

}

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

.site-header{

    position:sticky;

    top:0;

    z-index:9999;

    background:
    rgba(253,251,248,.92);

    backdrop-filter:blur(20px);

    border-bottom:
    1px solid rgba(143,164,142,.10);

    transition:.35s ease;

}

.header-flex{

    height:92px;

    display:grid;

    grid-template-columns:
    220px
    1fr
    220px;

    align-items:center;

    gap:40px;

}

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

.logo{

    font-family:'Playfair Display',serif;

    font-size:44px;

    font-weight:700;

    color:#728271;

    letter-spacing:-1px;

    transition:.3s ease;

}

.logo:hover{

    opacity:.85;

}

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

.main-menu{

    display:flex;

    justify-content:center;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-menu li{

    position:relative;

}

.nav-menu a{

    position:relative;

    font-size:13px;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#2A2A2A;

    padding-bottom:8px;

}

.nav-menu a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:0;

    height:2px;

    background:#8FA48E;

    transition:.35s ease;

}

.nav-menu a:hover::after{

    width:100%;

}

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

.header-actions{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:14px;

}

.header-action{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:
    rgba(143,164,142,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    cursor:pointer;

    transition:.35s ease;

    font-size:18px;

}

.header-action:hover{

    background:#8FA48E;

    color:white;

    transform:translateY(-2px);

}

/* =========================================
CART COUNT
========================================= */

.cart-count{

    position:absolute;

    top:-4px;
    right:-4px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#728271;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    font-weight:700;

}

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

.mobile-toggle{

    display:none;

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:
    rgba(143,164,142,.08);

    position:relative;

    cursor:pointer;

}

.mobile-toggle span{

    position:absolute;

    left:50%;

    width:20px;
    height:2px;

    background:#2A2A2A;

    transform:translateX(-50%);

}

.mobile-toggle span:nth-child(1){

    top:16px;

}

.mobile-toggle span:nth-child(2){

    top:23px;

}

.mobile-toggle span:nth-child(3){

    top:30px;

}

/* =========================================
SCROLL EFFECT
========================================= */

.site-header.scrolled{

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

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

}

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

@media(max-width:992px){

.header-flex{

    grid-template-columns:
    1fr auto;

}

.main-menu{

    position:fixed;

    top:134px;
    left:-100%;

    width:100%;

    height:calc(100vh - 134px);

    background:white;

    transition:.4s ease;

    padding:50px 35px;

    justify-content:flex-start;

}

.main-menu.active{

    left:0;

}

.nav-menu{

    flex-direction:column;

    align-items:flex-start;

    gap:28px;

}

.mobile-toggle{

    display:flex;

}

.logo{

    font-size:34px;

}

}

@media(max-width:768px){

.announcement-bar{

    font-size:11px;

    text-align:center;

    padding:0 14px;

}

.header-flex{

    height:82px;

}

.logo{

    font-size:28px;

}

}