/* ======================================================
   HEADER 2.1
   Flowers Theme
====================================================== */


.site-header{

    background:#fff;

    border-bottom:1px solid #ece8f3;

    z-index:900;

}

.header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:86px;

}

/* =========================================
   BRAND
========================================= */

.site-brand{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    flex-shrink:0;

}

.site-brand__logo{

    width:34px;

    height:34px;

    display:block;

    transition:transform .25s ease;

}

.site-brand:hover .site-brand__logo{

    transform:translateY(-2px);

}

.site-brand__text{

    font-family:"Cormorant Garamond",serif;

    font-size:36px;

    font-weight:600;

    color:var(--color-text);

    line-height:1;

}

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

.site-nav{

    display:flex;

    align-items:center;

    gap:38px;

    margin-left:auto;

    margin-right:32px;

}

.site-nav a{

    text-decoration:none;

    color:var(--color-text);

    font-weight:500;

    transition:color .2s;

}

.site-nav a:hover{

    color:var(--color-primary);

}

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

.site-actions{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;

}

.header-cart{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:50%;

    background:#f5f1fa;

    font-size:22px;

    transition:.25s;

}

.header-cart:hover{

    background:#ece4f8;

}

/* =========================================
   BURGER
========================================= */

.menu-toggle{

    display:none;

    width:42px;

    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    font-size:28px;

    padding:0;

}

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

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

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

@media (max-width:992px){

    .header-inner{

        min-height:74px;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        order:1;

        z-index:1001;

    }

    .site-brand{

        order:2;

        flex:1;

        justify-content:center;

    }

    .site-brand__logo{

        width:30px;

        height:30px;

    }

    .site-brand__text{

        font-size:28px;

    }

    .site-actions{

        order:3;

    }

    .site-nav{

        position:fixed;

        top:0;

        left:-300px;

        width:280px;

        height:100vh;

        background:#ffffff;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:28px;

        padding:90px 28px;

        margin:0;

        transition:left .30s ease;

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

        z-index:999;

    }

    .site-nav.active{

        left:0;

    }

}

@media (max-width:576px){

    .site-brand__text{

        font-size:22px;

    }

}

/* =========================================
   CART ITEMS BADGE
========================================= */

.header-cart {
    position: relative;
}

.header-cart__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 999px;
    background: #ef4b3e;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #fff;
    pointer-events: none;
}