//requires hedaer-2 and header-4
.ks-header-8 {
    @media (min-width: 991px) {
        background: $dark-color !important;
    }
    margin-top: 0;

    #top_menu {
        @media (min-width: 991px) {
             background: $dark-color !important;

             > li > a:not(.dropdown-item) {
                color: $white;
            }
        }

        > .nav-item {
            > .nav-link {
                padding: 8px 24px;
            }
        }
    }

    &-topmost {
        #my_wish {
            margin: 0 40px 0 20px;
            .badge {
               top: -6px;
            }
        }

        .col-xl-4.col-lg-3.col-6.order-xl-2 {
            display: flex;

            @media (max-width: 990px) {
                margin-top: 5px;
            }
        }

        #my_wish {
            > .nav-link {
                margin-top: -3px;
            }
        }

        @media (max-width: 990px) {
            z-index: 1;
            border-bottom: 1px solid #ccc;

            .col-lg-12.col-sm-10.col-11.align-items-center {
                padding: 0;
            }

            .ks-search-container-2 {
                position: absolute;
                right: 20px;
                bottom: -12px;
                z-index: auto;

               &:before {
                    background: transparent;
               }
            }

            .ks-header-2-menu-icon {
               max-width: calc(100% - 70px);
               background: transparent !important;
               padding: 12px 0 3px;
            }

            .container-lg {
                padding-bottom: 5px;
            }
        }

        @media (max-width: 575px) {
           .ks-header-2-menu-icon {
              max-width: calc(100% - 50px);
              margin-top: 10px;

              > .col-lg-12 {
                  padding: 0;
                  justify-content: space-around;
               }
           }
        }

        @media (max-width: 330px) {
            .ks-search-container-2 {
                right: 0;
            }
        }
    }

    @media (max-width: 990px) {

        background: transparent !important;

        > .container {
            margin-top: -94px;

            .navbar-toggler {
                margin-right: 15px;
                color: $black;
            }

            .navbar-collapse {
                margin-top: 14px;
                border-bottom: 1px solid #eee;
                box-shadow: 0px 7px 8px 0px rgba(0, 0, 0, 0.4);
            }
        }

        &-topmost {
            .ks-header-2-menu-icon {
                .col-lg-12 {
                    a:not(.dropdown-item),
                    span,
                    i {
                        color: $black;
                    }
                }

                 .badge-primary {
                    background: $primary;
                    color: $theme-text-color;
                }
            }
        }
    }

    @media (max-width: 575px) {
        > .container {

            .navbar-toggler {
                margin-right: 20px;
            }

            .navbar-collapse {
                margin-top: 15px;
            }
        }
    }

    @media (max-width: 330px) {
        > .container {
            .navbar-toggler {
                margin-right: 5px;
            }
        }
    }
}

.affixed {
   .ks-header-8 {
        @media (max-width: 990px) {
            .container {
                margin-top: -4px !important;
                background: white;
                box-shadow: -1px 3px 5px 3px rgba(0, 0, 0, 0.28);
           }
        }

   }
}

.js-change-indexes-h8 {
    .ks-header-8-topmost .ks-search-container-2 {
        z-index: 10 !important;
    }
}

@media (max-width: 990px) {
    .affixed .ks-header-8 {
        .container {
            width: 100%;
            max-width: 100%;
        }
    }
}

@media (max-width: 575px) {
    .ks-header-8-topmost {
      .container-lg {
        width: 100%;
      }
    }

    .ks-header-8 {
        .container {
            max-width: 100%;
        }
    }
}

@media (max-width: 990px) {
    .affixed .ks-header-8 {
        .container {
            width: 100%;
            max-width: 100%;
        }
    }
}

@media (max-width: 575px) {
    .ks-header-8-topmost {
      .container-lg {
        width: 100%;
      }
    }

    .ks-header-8 {
        .container {
            max-width: 100%;
        }
    }
}

@media (max-width: 575px) {
    .ks-header-8-topmost {
        .easy-autocomplete-container {
            max-height: 60vh;
        }
        ~ main {
            .shop_main_container {
                position: relative;
                z-index: 0;
            }
        }
    }
}

body.o_connected_user{
    &.js-no-scroll{
        @media(max-width: 991px){
            main{
                z-index: 10000;
            }
            .o_affix_disabled,
            .o_affix_enabled{
                z-index: 10 !important;
            }
        }
    }
     @media(max-width: 991px){
        #products_grid_before.ks-show-filter{
            margin-top: 40px;
            height: calc(100% - 40px);
        }
    }
}