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

*{
    box-sizing:border-box;
}

body{
    display:block !important;
}

main,
.container-page,
.content,
.wrapper{
    display:block !important;
    width:100%;
}

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:#ffffff;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

.header{

    width:100%;

    background:#ffffff;

    border-bottom:
        1px solid rgba(71,130,61,0.08);

    position:relative;

    z-index:100;
    isolation:isolate;

}

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

.header-top{

    display:flex;

    align-items:center;

    gap:18px;
    position:relative;

    padding:
        10px clamp(10px,1.5vw,22px);

}

/* =========================================================
   LEFT
========================================================= */

.header-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex-wrap:nowrap;
}

/* =========================================================
   LOCATION MODULE FIX
========================================================= */

.location-selector{

    display:flex;

    align-items:center;

    gap:6px;
    padding:4px 6px;

    cursor:pointer;

    flex-shrink:0;

}

.location-selector img{

    width:24px !important;
    height:24px !important;

    object-fit:contain;

    display:block;

}

.textLocation{

    font-size:13px;

    font-weight:700;

    color:#47823D;

    line-height:1.2;

}

.textLocation1{

    font-size:11px;

    color:#5f6b5f;

    line-height:1.2;

}

/* =========================================================
   LANGUAGE + CURRENCY FIX
========================================================= */

.language-converter,
.currency-converter{

    flex-shrink:0;

}

/* =========================================================
   CENTER
========================================================= */

.header-center{
    flex:1;
    min-width:180px;
    max-width:680px;
}

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

.header-right{

    display:flex;

    align-items:center;

    gap:clamp(6px,0.8vw,12px);

    flex-shrink:0;
    flex-wrap:nowrap;

}

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

.logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.site-logo {

    width: 60px;
    height: 60px;

    aspect-ratio: 1 / 1;

    object-fit: contain;
    object-position: center;

    display: block;

    border-radius: 50%;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.logo-link:hover .site-logo {
    transform: scale(1.03);
}

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

.mobile-utility-toggle{

    display:none;

    width:46px;
    height:46px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(248,252,248,0.94)
        );

    color:#47823D;

    cursor:pointer;

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

    flex-shrink:0;

    box-shadow:
        0 4px 14px rgba(71,130,61,0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.mobile-utility-toggle:hover{

    transform:translateY(-1px);

}

.mobile-utility-toggle.active i{

    transform:rotate(180deg);

}

.mobile-utility-toggle i{

    transition:transform 0.25s ease;

}

/* =========================================================
   MOBILE UTILITY CARD
========================================================= */

.mobile-utility-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:84px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(248,252,248,0.94)
        );

    border:
        1px solid rgba(71,130,61,0.10);

    box-shadow:
        0 6px 18px rgba(71,130,61,0.06);

    cursor:pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

    padding:10px;

}

.mobile-utility-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(71,130,61,0.10);

}

.mobile-utility-icon{

    width:38px;
    height:38px;

    border-radius:12px;

    background:
        rgba(71,130,61,0.08);

    color:#47823D;

    display:flex;

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

    font-size:18px;

}

.mobile-utility-icon img{

    width:22px;
    height:22px;

    object-fit:contain;

}

.mobile-utility-card span{

    font-size:12px;

    font-weight:600;

    color:#2f3b2f;

    text-align:center;

    line-height:1.2;

}

/* =========================================================
   DESKTOP UTILITY ICONS
========================================================= */

.wish,
.cart{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    color:#334233;

    transition:
        transform 0.2s ease,
        color 0.2s ease;

}

.wish:hover,
.cart:hover{

    transform:translateY(-1px);

    color:#47823D;

}

#wishIcon,
#myCart{

    font-size:26px;

}

.wishListText,
.carttext{

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    color:inherit;

    text-decoration:none;

}

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

@media (max-width: 1200px){

    .header-top{

        gap:14px;

    }

}

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

@media (max-width: 900px){

.mobile-utility-tray{

    padding:10px 14px;

    gap:12px;
}

.mobile-utility-tray
.location-selector,

.mobile-utility-tray
.language-converter,

.mobile-utility-tray
.currency-converter{

    padding:8px 10px;

    min-height:44px;

    border-radius:14px;
}

.mobile-utility-tray
.location-country,

.mobile-utility-tray
.SelectedLanguage,

.mobile-utility-tray
.selected-currency-code{

    font-size:13px;
}

.mobile-utility-tray
.location-subtext{

    font-size:10px;
}

.mobile-utility-tray
.location-icon{

    width:30px;
    height:30px;
}

.mobile-utility-tray
.language-converter img,

.mobile-utility-tray
.currency-converter img{

    width:24px;
    height:24px;
}
}

@media (max-width: 900px) {

    .header-top{

        display:grid;

        grid-template-columns:
            auto 1fr auto;

        align-items:center;

        gap:12px;

        padding:
            12px 14px;

    }

    /* LEFT */

    .header-left{

        gap:0;

    }

    /* HIDE DESKTOP UTILITIES */

    .header-left .location-selector,
    .header-left .language-converter,
    .header-left .currency-converter,
    .header-right{

        display:none !important;

    }

    /* SEARCH */

    .header-center{

        width:100%;

        max-width:none;

    }

    /* MOBILE TOGGLE */

    .mobile-utility-toggle{

        display:flex;

    }

    /* LOGO */

    .site-logo {
        width: 56px;
        height: 56px;
    }

    .header-right .account-label,
    .header-right .wishListText,
    .header-right .cart-label{

        display:none;
    }
}

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

@media (max-width: 480px) {

    .site-logo {
        width: 52px;
        height: 52px;
    }

    .mobile-utility-tray{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

    }

}

/* =========================================================
   SEARCH CONTAINER FIX
========================================================= */

.search-container{

    width:100%;

    max-width:100%;

}

.search-form{

    width:100%;

}

.search-box-wrapper{

    width:100%;

}

.safe-console-box{
    width:100%;
    max-width:100%;
    display:block;
    position:relative;
    z-index:2;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
}

.page-main{
    width:100%;
    display:block;
}

/* =========================================================
   WISHLIST DRAWER
========================================================= */

.wishlist-drawer-overlay{

    position:fixed;
    inset:0;

    background:
        rgba(15,23,42,0.45);

    backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    transition:all 0.25s ease;

    z-index:3000;
}

.wishlist-drawer-overlay.active{

    opacity:1;
    visibility:visible;
}

/* ========================================================= */

.wishlist-drawer{

    position:fixed;

    top:0;
    right:0;

    width:420px;
    max-width:100%;

    height:100vh;

    background:#ffffff;

    z-index:3001;

    transform:
        translateX(100%);

    transition:transform 0.28s ease;

    display:flex;
    flex-direction:column;

    box-shadow:
        -10px 0 40px rgba(15,23,42,0.14);
}

.wishlist-drawer.active{

    transform:
        translateX(0);
}

/* ========================================================= */

.wishlist-drawer-header{

    height:72px;

    padding:
        0 20px;

    border-bottom:
        1px solid rgba(226,232,240,0.9);

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

.wishlist-drawer-header h3{

    margin:0;

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

    color:#0f172a;
}

.wishlist-drawer-header button{

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:#f8fafc;

    cursor:pointer;

    color:#64748b;
}

/* ========================================================= */

.wishlist-drawer-body{

    flex:1;

    overflow-y:auto;

    padding:18px;
}

/* ========================================================= */

.wishlist-empty{

    height:100%;

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

    text-align:center;

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

    color:#64748b;
}

/* =========================================================
   WISHLIST ITEMS
========================================================= */

.wishlist-items{

    display:flex;
    flex-direction:column;

    gap:14px;
}

/* ========================================================= */

.wishlist-item{

    display:flex;

    gap:14px;

    padding:12px;

    border-radius:18px;

    border:
        1px solid rgba(226,232,240,0.9);

    background:#ffffff;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wishlist-item:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(15,23,42,0.08);
}

/* ========================================================= */

.wishlist-item-image{

    width:84px;
    height:84px;

    flex-shrink:0;

    border-radius:14px;

    overflow:hidden;

    background:#f8fafc;
}

.wishlist-item-image img{

    width:100%;
    height:100%;

    object-fit:contain;
}

/* ========================================================= */

.wishlist-item-content{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:8px;
}

/* ========================================================= */

.wishlist-item-name{

    font-size:14px;

    font-weight:700;

    line-height:1.4;

    color:#0f172a;

    text-decoration:none;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    line-clamp:2;

    overflow:hidden;
}

/* ========================================================= */

.wishlist-item-price{

    font-size:15px;

    font-weight:800;

    color:#47823D;
}

/* ========================================================= */

.wishlist-item-actions{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;
}

/* ========================================================= */

.wishlist-remove{

    border:none;

    background:#fef2f2;

    color:#ef4444;

    width:36px;
    height:36px;

    border-radius:12px;

    cursor:pointer;

    transition:all 0.2s ease;
}

.wishlist-remove:hover{

    background:#ef4444;

    color:#ffffff;
}

/* ========================================================= */

.wishlist-empty-state{

    height:100%;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    gap:14px;

    color:#64748b;
}

.wishlist-empty-state i{

    font-size:48px;

    opacity:0.5;
}

/* =========================================================
   ADD TO CART
========================================================= */

.wishlist-add-cart{

    height:38px;

    padding:
        0 14px;

    border:none;

    border-radius:12px;

    background:#47823D;

    color:#ffffff;

    display:flex;

    align-items:center;
    gap:8px;

    cursor:pointer;

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

    transition:all 0.2s ease;
}

.wishlist-add-cart:hover{

    background:#35652e;

    transform:translateY(-1px);
}

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

@media(max-width:1100px){

    .header-main{

        gap:12px;
    }

    .header-search{

        min-width:220px;
    }

    .delivery-location-button{

        max-width:170px;
    }

    .header-signin-text,
    .wishListText{

        display:none;
    }
}

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

@media(max-width:900px){

    .mobile-utility-tray{

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        gap:24px;

        padding:18px 20px;

        align-items:start;

        justify-items:center;

        width:100%;
    }    

    .delivery-location-button{

        display:flex;
    }

    .header-search{

        min-width:0;

        width:100%;
    }

    .header-signin-text,
    .wishListText{

        display:none;
    }

    .wish,
    .header-cart,
    .header-account{

        display:flex;

        align-items:center;

        justify-content:center;
    }

    .wishlist-icon-wrapper,
    .cart-icon-wrapper{

        position:relative;
    }

    #wishlistCountMobile,
    #cartCountMobile{

        position:absolute;

        top:-6px;
        right:-6px;

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

        border-radius:50%;

        display:flex;

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

        font-size:10px;

        font-weight:700;
    }

    #wishlistDrawerTriggerMobile{

        width:46px;
        height:46px;

        border-radius:50%;

        display:flex;

        align-items:center;
        justify-content:center;
    }

    #wishlistDrawerTriggerMobile
    .wishlist-icon-wrapper{

        width:52px;
        height:52px;

        border-radius:50%;

        background:rgba(71,130,61,0.10);

        display:flex;

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

        position:relative;

        color:#47823D;

        font-size:22px;

        margin:0 auto;
    }

    .header-account,
    .wish,
    .header-cart{

        width:100%;

        display:flex;

        align-items:center;

        justify-content:center;
    }

    .header-account-btn,
    #wishlistDrawerTriggerMobile,
    #cartTriggerMobile{

        margin:0 auto;
    }

}




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

@keyframes mobileHeaderSlide{

    from{

        opacity:0;

        transform:
            translateY(-8px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   RESPONSIVE HEADER FIX
========================================================= */

@media(max-width:1100px){

    .header-top{

        gap:10px;

        flex-wrap:nowrap;
    }

    .header-center{

        min-width:160px;
    }

    .header-right{

        gap:8px;
    }

    .wishListText,
    .cart-label,
    .account-label{

        display:none;
    }

    .location-selector{

        max-width:180px;
    }
}

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

@keyframes mobileTrayAnimation{

    from{

        opacity:0;

        transform:
            translateY(-8px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   MOBILE DROPDOWN FINAL FIX
========================================================= */

.mobile-utility-tray{
    display:none;
}

/* =========================================================
   CLEAN TABLET HEADER FIX
========================================================= 

@media (min-width:768px) and (max-width:900px){

    .header-top{

        display:flex;

        align-items:center;

        gap:12px;

        padding:12px 16px;
    }

    /* LOGO /

    .site-logo{

        width:58px;
        height:58px;
    }

    /* LOCATION /

    .location-selector{

        max-width:150px;

        overflow:hidden;
    }

    /* SEARCH /

    .header-center{

        flex:1;

        min-width:120px;

        max-width:none;
    }

    .search-box-wrapper{
        min-width:0;
    }

    .search-container,
    .search-form,
    .search-box-wrapper{

        width:100%;
    }

    /* CURRENCY /


    /* RIGHT /

    .header-right{

        display:flex;

        align-items:center;

        gap:10px;
    }

    /* HIDE TEXT /

    .wishListText,
    .carttext,
    .account-label{

        display:none;
    }

    /* ICON SIZE 

    #wishIcon,
    #myCart{

        font-size:24px;
    }

    /* REMOVE MOBILE DROPDOWN 

    .mobile-utility-toggle,
    .mobile-utility-tray{

        display:none !important;
    }
}*/

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

@media only screen and (max-width:900px){

    .header-top{

        display:grid;

        grid-template-columns:auto 1fr auto;

        align-items:center;

        gap:10px;

        padding:12px 14px;
    }

    /* HIDE DESKTOP ITEMS */

    .header-left .location-selector,
    .header-left .language-converter,
    .header-left .currency-converter,
    .header-right{

        display:none !important;
    }

    /* SEARCH */

    .header-center{

        width:100%;

        min-width:0;
    }

    .search-container,
    .search-form,
    .search-box-wrapper{

        width:100%;
    }

    /* TOGGLE BUTTON */

    .mobile-utility-toggle{

        display:flex !important;

        width:48px;
        height:48px;

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

        flex-shrink:0;
    }

    /* DROPDOWN */

    .mobile-utility-tray{

        display:none;

        width:100%;

        padding:14px;

        grid-template-columns:repeat(3,1fr);

        gap:18px;

        border-top:
            1px solid rgba(226,232,240,0.9);
    }

    .mobile-utility-tray.active{

        display:grid;
    }

    /* LOGO */

    .site-logo{

        width:54px;
        height:54px;
    }

    /* INPUT */

    .search-input{

        font-size:14px;
    }

    .mobile-utility-tray{

        align-items:start;
    }

    .mobile-utility-tray > *{

        display:flex;

        flex-direction:column;

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

        min-height:72px;
    }

    /* ACCOUNT */

    #accountTriggerMobile{

        width:46px;
        height:46px;

        padding:0;

        border-radius:50%;

        display:flex;

        align-items:center;
        justify-content:center;
    }

    /* WISHLIST */

    #wishlistDrawerTriggerMobile{

        width:46px;
        height:46px;

        display:flex;

        align-items:center;
        justify-content:center;
    }

    #wishlistDrawerTriggerMobile .wishlist-icon-wrapper{

        width:46px;
        height:46px;

        border-radius:50%;

        display:flex;

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

        background:rgba(71,130,61,0.10);
    }

    /* CART */

    #cartTriggerMobile{

        width:46px;
        height:46px;

        display:flex;

        align-items:center;
        justify-content:center;
    }

    #cartTriggerMobile .cart-icon-wrapper{

        width:46px;
        height:46px;

        border-radius:50%;

        display:flex;

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

        background:rgba(71,130,61,0.10);
    }

    /* ICONS */

    #wishlistDrawerTriggerMobile i,
    #cartTriggerMobile i,
    #accountTriggerMobile i{

        font-size:20px;

        color:#47823D;
    }

}

@media only screen and (min-width:901px){

    .header-right{

        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}