/* ==========================================================
   FM Collections
   Header Styles
   ========================================================== */


/* ==========================================================
   Header Layout
========================================================== */

.site-header{

    position: sticky;
    top: 0;

    z-index: 9999;

    background: #FFFFFF;

    border-bottom: 1px solid #E5E7EB;

}

.header-container{

    max-width: 1320px;

    height: 80px;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

}

/* ==========================================================
   Logo
========================================================== */

.header-logo{

    flex-shrink: 0;

}

.logo{

    display: flex;
    align-items: center;

    gap: 12px;

    text-decoration: none;

}

.logo-icon{

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2E7D32;
    color: #FFFFFF;

    border-radius: 50%;

    font-size: 18px;
    font-weight: 700;

    transition: .30s ease;

}

.logo:hover .logo-icon{

    transform: rotate(-8deg) scale(1.05);

}

.logo-text{

    color: #1F2937;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    transition: .30s ease;

}

.logo:hover .logo-text{

    color: #2E7D32;

}

/* ==========================================================
   Desktop Navigation
========================================================== */

.header-nav{

    flex: 1;

    display: flex;
    justify-content: center;

}

.header-nav ul{

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;

    margin: 0;
    padding: 0;

    list-style: none;

}

.header-nav li{

    position: relative;

}

.header-nav > ul > li > a{

    display: flex;
    align-items: center;

    height: 80px;

    color: #1F2937;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: color .30s ease;

}

.header-nav > ul > li > a:hover{

    color: #2E7D32;

}

/* Active Page */

.header-nav > ul > li > a.active{

    color: #2E7D32;

}

/* Dropdown Arrow */

.dropdown-toggle{

    gap: 6px;

    cursor: pointer;

}

/* ==========================================================
   Header Right
========================================================== */

.header-right{

    display:flex;
    align-items:center;

    gap:16px;

    flex-shrink:0;

}

/* Search */

.search-wrapper{

    position:relative;

}

.header-search{

    width:300px;
    height:46px;

    display:flex;
    align-items:center;

    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:999px;

    overflow:hidden;

}

.header-search input{

    flex:1;

    height:100%;

    border:none;
    outline:none;

    padding:0 16px;

    font-size:14px;

    background:transparent;

}

.search-btn{

    width:48px;
    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:18px;

    transition:.30s ease;

}

.search-btn:hover{

    color:#2E7D32;

}

/* Icons */

.header-icon{

    position:relative;

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #E5E7EB;
    border-radius:50%;

    background:#FFFFFF;

    font-size:18px;

    text-decoration:none;

    transition:.30s ease;

}

.header-icon:hover{

    color:#2E7D32;

    border-color:#2E7D32;

}

/* Badge */

.header-badge{

    position:absolute;

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

    min-width:18px;
    height:18px;

    padding:0 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2E7D32;
    color:#FFFFFF;

    border-radius:999px;

    font-size:11px;
    font-weight:700;

    line-height:1;

}

/* Login */

.login-btn{

    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 22px;

    background:#2E7D32;
    color:#FFFFFF;

    border-radius:999px;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:.30s ease;

}

.login-btn:hover{

    background:#256B29;

}

/* ==========================================================
   Live Search
========================================================== */

.live-search-results{

    position:absolute;

    top:56px;
    left:0;

    width:100%;

    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:16px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    overflow:hidden;

    display:none;

    z-index:1000;

}

/* Show Results */

.live-search-results.show{

    display:block;

}

/* Search Item */

.live-search-item{

    display:flex;
    align-items:center;

    gap:14px;

    padding:12px 14px;

    border-bottom:1px solid #F1F5F9;

    text-decoration:none;

    transition:.25s ease;

}

.live-search-item:last-child{

    border-bottom:none;

}

.live-search-item:hover{

    background:#F8FAFC;

}

/* Product Image */

.live-search-item img{

    width:56px;
    height:56px;

    object-fit:contain;

    background:#F8FAFC;

    border-radius:10px;

    flex-shrink:0;

}

/* Content */

.live-search-item div{

    flex:1;

}

/* Product Name */

.live-search-item strong{

    display:block;

    margin-bottom:4px;

    color:#1F2937;

    font-size:14px;
    font-weight:600;

    line-height:1.4;

}

/* Product Price */

.live-search-item span{

    color:#2E7D32;

    font-size:13px;
    font-weight:700;

}

/* ==========================================================
   Premium Mega Menu
========================================================== */

.has-dropdown{
    position:relative;
}

.dropdown{

    position:absolute;

    top:100%;
    left:0;

    width:280px;

    margin-top:0px;

    padding:10px 0;

    background:#fff;

    border:1px solid #E5E7EB;
    border-radius:14px;

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    opacity:0;
    visibility:hidden;

    transform:translateY(4px);

    transition:
        opacity .20s ease,
        transform .20s ease;

    z-index:999;

}

.has-dropdown:hover>.dropdown{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

/* Parent Categories */

.dropdown-column{

    position:relative;

}

.dropdown-title{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:11px 18px;

    font-size:15px;
    font-weight:600;

    color:#1F2937;

    text-decoration:none;

    transition:.20s;

}

.dropdown-title:hover{

    background:#F8FAFC;

    color:#2E7D32;

}

/* ==========================================================
   Amazon Flyout Menu
========================================================== */

.has-submenu{
    position:relative;
}

/* Child Menu */

.submenu{

    position:absolute;

    top:0;
    left:100%;

    width:250px;

    padding:8px 0;

    background:#fff;

    border:1px solid #E5E7EB;
    border-radius:14px;

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    opacity:0;
    visibility:hidden;

    transform:translateX(8px);

    transition:
        opacity .20s ease,
        transform .20s ease;

    z-index:1000;

}

/* Show */

.has-submenu:hover>.submenu{

    opacity:1;
    visibility:visible;

    transform:translateX(0);

}

/* Child Links */

.submenu a{

    display:block;

    padding:10px 18px;

    color:#475569;

    font-size:14px;

    text-decoration:none;

    transition:.20s;

}

.submenu a:hover{

    background:#F8FAFC;

    color:#2E7D32;

}

/* ==========================
   Hide Desktop Header on Mobile
========================== */

@media(max-width:992px){

    .site-header{
        display:none;
    }

}