/*
|--------------------------------------------------------------------------
| ZOVALY DESKTOP HEADER
|--------------------------------------------------------------------------
*/

:root {
    --zv-primary:
        #ff587d;

    --zv-primary-hover:
        #e9476c;

    --zv-primary-dark:
        #d83a60;

    --zv-primary-soft:
        #fff1f5;

    --zv-primary-soft-2:
        #fff7f9;

    --zv-text:
        #071927;

    --zv-muted:
        #667085;

    --zv-border:
        #e6e8ec;

    --zv-search-bg:
        #f7f7f8;

    --zv-white:
        #ffffff;

    --zv-main-header-height:
        86px;

    --zv-category-height:
        52px;
}


/*
|--------------------------------------------------------------------------
| DESKTOP HEADER ROOT
|--------------------------------------------------------------------------
*/

.desktop-mainbar {
    width: 100%;

    display: block;

    position: relative;

    z-index: 1000;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| MAIN WHITE HEADER
|--------------------------------------------------------------------------
*/

.fv-desktop-main-row {
    width: 100%;

    height:
        var(
            --zv-main-header-height
        );

    position: relative;

    background:
        #ffffff;

    border-top:
        1px solid
        #cecece;

    border-bottom:
        1px solid
        #f1f2f3;
}


/*
|--------------------------------------------------------------------------
| HEADER CONTAINER
|--------------------------------------------------------------------------
*/

.fv-desktop-header-container {
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(
            180px,
            220px
        )
        minmax(
            400px,
            560px
        )
        auto;

    align-items: center;

    justify-content:
        space-between;

    gap: 34px;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.fv-desktop-brand {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content:
        flex-start;

    text-decoration:
        none;
}


.fv-desktop-brand
.facevaly-logo {
    display: block;

    width: auto;

    height: auto;

    max-width:
        150px;

    max-height:
        56px;

    object-fit:
        contain;

    object-position:
        left center;
}


/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

.fv-desktop-search-wrapper {
    width: 100%;

    max-width:
        560px;

    min-width: 0;

    justify-self:
        center;

    position: relative;

    /*
    |--------------------------------------------------------------------------
    | Search dropdown portal এখন body-তে যায়।
    | তাই এখানে giant z-index দরকার নেই।
    |--------------------------------------------------------------------------
    */

    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| RIGHT SIDE ACTIONS
|--------------------------------------------------------------------------
*/

.fv-desktop-actions {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content:
        flex-end;

    gap: 24px;

    white-space:
        nowrap;
}


/*
|--------------------------------------------------------------------------
| INDIVIDUAL ACTION
|--------------------------------------------------------------------------
*/

.fv-desktop-action {
    min-width:
        48px;

    min-height:
        54px;

    padding:
        3px 0;

    position:
        relative;

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap: 4px;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        var(
            --zv-text
        );

    text-decoration:
        none;

    font-family:
        inherit;

    cursor: pointer;

    transition:
        color
            0.16s ease,
        transform
            0.16s ease;
}


.fv-desktop-action:hover,
.fv-desktop-action.is-open {
    color:
        var(
            --zv-primary
        );
}


/*
|--------------------------------------------------------------------------
| ACTION ICON
|--------------------------------------------------------------------------
*/

.fv-desktop-action-icon {
    width: 32px;

    height: 28px;

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        22px;

    line-height: 1;
}


.fv-desktop-action-icon i {
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| ACTION LABEL
|--------------------------------------------------------------------------
*/

.fv-desktop-action-label {
    display: block;

    color: inherit;

    font-size:
        13px;

    line-height:
        16px;

    font-weight:
        400;
}


/*
|--------------------------------------------------------------------------
| CART
|--------------------------------------------------------------------------
*/

.fv-cart-action {
    position:
        relative;
}


.fv-header-cart-count {
    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    position:
        absolute;

    top:
        -7px;

    right:
        -9px;

    z-index: 5;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        #ffffff;

    border-radius:
        999px;

    background:
        var(
            --zv-primary
        );

    color:
        #ffffff;

    font-size:
        9px;

    line-height: 1;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| MORE BUTTON
|--------------------------------------------------------------------------
*/

.fv-more-button {
    appearance: none;

    -webkit-appearance:
        none;

    min-width:
        48px;
}


.fv-more-button.is-open {
    color:
        var(
            --zv-primary
        );
}


/*
|--------------------------------------------------------------------------
| DESKTOP MORE PORTAL
|--------------------------------------------------------------------------
|
| IMPORTANT:
|
| Dropdown DesktopMainHeader-এর child না।
|
| React createPortal() দিয়ে document.body-তে render হয়।
|
| তাই:
|
| Category Bar
| Hero
| Banner
| Products
| Search
|
| কোনো stacking context এটাকে নিচে পাঠাতে পারবে না।
|
|--------------------------------------------------------------------------
*/

.fv-desktop-more-portal {
    position:
        fixed;

    z-index:
        2147483000
        !important;

    padding:
        8px;

    overflow:
        hidden;

    isolation:
        isolate;

    border:
        1px solid
        #e7e9ed;

    border-radius:
        11px;

    background:
        #ffffff;

    box-shadow:
        0 18px 45px
        rgba(
            15,
            23,
            42,
            0.18
        );

    animation:
        fvDesktopMoreOpen
        0.12s ease-out;
}


/*
|--------------------------------------------------------------------------
| MORE OPEN ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes fvDesktopMoreOpen {

    from {
        opacity: 0;

        transform:
            translateY(
                -5px
            );
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/*
|--------------------------------------------------------------------------
| MORE PORTAL LINKS
|--------------------------------------------------------------------------
*/

.fv-desktop-more-portal
a {
    width: 100%;

    min-height:
        44px;

    padding:
        0 12px;

    display: flex;

    align-items:
        center;

    gap: 11px;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #26364f;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        400;

    transition:
        color
            0.15s ease,
        background-color
            0.15s ease;
}


/*
|--------------------------------------------------------------------------
| MORE ICON
|--------------------------------------------------------------------------
*/

.fv-more-portal-icon {
    width:
        24px;

    height:
        24px;

    flex:
        0 0 24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        6px;

    color:
        #677386;

    font-size:
        14px;

    transition:
        background-color
            0.15s ease,
        color
            0.15s ease;
}


/*
|--------------------------------------------------------------------------
| MORE LINK HOVER
|--------------------------------------------------------------------------
*/

.fv-desktop-more-portal
a:hover {
    background:
        var(
            --zv-primary-soft
        );

    color:
        var(
            --zv-primary
        );
}


.fv-desktop-more-portal
a:hover
.fv-more-portal-icon {
    background:
        rgba(
            255,
            88,
            125,
            0.10
        );

    color:
        var(
            --zv-primary
        );
}


/*
|--------------------------------------------------------------------------
| CATEGORY STICKY ZONE
|--------------------------------------------------------------------------
|
| Main white header fixed নয়।
|
| শুধু category bar sticky।
|
|--------------------------------------------------------------------------
*/

.fv-category-sticky-zone {
    width: 100%;

    height:
        var(
            --zv-category-height
        );

    position:
        sticky;

    top: 0;

    z-index:
        9000;

    background:
        var(
            --zv-primary
        );

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


/*
|--------------------------------------------------------------------------
| CATEGORY NAV
|--------------------------------------------------------------------------
*/

.fv-desktop-category-nav {
    width: 100%;

    height:
        var(
            --zv-category-height
        );

    background:
        var(
            --zv-primary
        );
}


/*
|--------------------------------------------------------------------------
| CATEGORY NAV INNER
|--------------------------------------------------------------------------
*/

.fv-category-nav-inner {
    height: 100%;

    display: flex;

    align-items:
        stretch;

    justify-content:
        center;

    overflow:
        visible;
}


/*
|--------------------------------------------------------------------------
| CATEGORY ITEM
|--------------------------------------------------------------------------
*/

.fv-category-menu-item {
    height: 100%;

    position:
        relative;

    flex:
        0 0 auto;
}


/*
|--------------------------------------------------------------------------
| CATEGORY LINKS
|--------------------------------------------------------------------------
*/

.fv-category-main-link,
.fv-category-all-link {
    height: 100%;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 7px;

    background:
        transparent;

    color:
        #ffffff;

    text-decoration:
        none;

    white-space:
        nowrap;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        600;

    transition:
        background-color
            0.16s ease,
        color
            0.16s ease;
}


/*
|--------------------------------------------------------------------------
| CATEGORY ARROW
|--------------------------------------------------------------------------
*/

.fv-category-main-link
i {
    font-size:
        9px;

    transition:
        transform
            0.16s ease;
}


/*
|--------------------------------------------------------------------------
| CATEGORY HOVER
|--------------------------------------------------------------------------
*/

.fv-category-menu-item:hover
.fv-category-main-link,
.fv-category-main-link:hover,
.fv-category-all-link:hover {
    background:
        var(
            --zv-primary-hover
        );

    color:
        #ffffff;
}


.fv-category-menu-item:hover
.fv-category-main-link
i {
    transform:
        rotate(
            180deg
        );
}


/*
|--------------------------------------------------------------------------
| CATEGORY DROPDOWN
|--------------------------------------------------------------------------
*/

.fv-category-dropdown {
    min-width:
        250px;

    max-width:
        330px;

    padding:
        8px 0;

    position:
        absolute;

    top: 100%;

    left: 0;

    z-index:
        9500;

    overflow:
        hidden;

    border:
        1px solid
        #eceef1;

    border-top:
        0;

    border-radius:
        0 0 9px 9px;

    background:
        #ffffff;

    box-shadow:
        0 15px 34px
        rgba(
            15,
            23,
            42,
            0.15
        );

    opacity: 0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(
            5px
        );

    transition:
        opacity
            0.15s ease,
        visibility
            0.15s ease,
        transform
            0.15s ease;
}


/*
|--------------------------------------------------------------------------
| CATEGORY DROPDOWN OPEN
|--------------------------------------------------------------------------
*/

.fv-category-menu-item:hover
.fv-category-dropdown,
.fv-category-menu-item:focus-within
.fv-category-dropdown {
    opacity: 1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}


/*
|--------------------------------------------------------------------------
| CATEGORY DROPDOWN LINK
|--------------------------------------------------------------------------
*/

.fv-category-dropdown
a {
    min-height:
        39px;

    padding:
        8px 18px;

    display:
        flex;

    align-items:
        center;

    background:
        #ffffff;

    color:
        #596273;

    text-decoration:
        none;

    font-size:
        13px;

    transition:
        color
            0.15s ease,
        background
            0.15s ease,
        padding-left
            0.15s ease;
}


.fv-category-dropdown
a:hover {
    padding-left:
        22px;

    color:
        var(
            --zv-primary
        );

    background:
        var(
            --zv-primary-soft
        );
}


/*
|--------------------------------------------------------------------------
| SCROLLED HEADER
|--------------------------------------------------------------------------
|
| Intentionally not fixed.
|
|--------------------------------------------------------------------------
*/

.desktop-mainbar.is-scrolled {
    position:
        relative;
}


/*
|--------------------------------------------------------------------------
| 1400px
|--------------------------------------------------------------------------
*/

@media (
    max-width:
        1399px
) {

    .fv-desktop-header-container {
        grid-template-columns:
            175px
            minmax(
                330px,
                500px
            )
            auto;

        gap:
            24px;
    }


    .fv-desktop-actions {
        gap:
            17px;
    }


    .fv-category-main-link,
    .fv-category-all-link {
        padding:
            0 12px;

        font-size:
            12px;
    }

}


/*
|--------------------------------------------------------------------------
| 1200px
|--------------------------------------------------------------------------
*/

@media (
    max-width:
        1199px
) {

    .fv-desktop-header-container {
        grid-template-columns:
            145px
            minmax(
                260px,
                1fr
            )
            auto;

        gap:
            14px;
    }


    .fv-desktop-brand
    .facevaly-logo {
        max-width:
            130px;

        max-height:
            48px;
    }


    .fv-desktop-actions {
        gap:
            10px;
    }


    .fv-desktop-action {
        min-width:
            42px;
    }


    .fv-desktop-action-icon {
        font-size:
            19px;
    }


    .fv-desktop-action-label {
        font-size:
            10.5px;
    }


    .fv-category-nav-inner {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        /*
        | Dropdown vertical clipping না করার জন্য।
        */

        overflow-y:
            visible;

        scrollbar-width:
            none;
    }


    .fv-category-nav-inner::-webkit-scrollbar {
        display:
            none;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
|
| Desktop header সম্পূর্ণ hide।
| আপনার existing mobile design অপরিবর্তিত থাকবে।
|
|--------------------------------------------------------------------------
*/

@media (
    max-width:
        991.98px
) {

    .desktop-mainbar,
    .fv-category-sticky-zone {
        display:
            none
            !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Desktop portal accidentally open থাকলেও mobile-এ hide
    |--------------------------------------------------------------------------
    */

    .fv-desktop-more-portal {
        display:
            none
            !important;
    }

}