/* Categories menu */
.top-bar-categories-wrap {
    margin-top: 20px;
    margin-bottom: 100px;
}

.top-bar-categories {
    padding-left: 3px;
    padding-right: 3px;
}

.top-bar-categories button,
.top-bar-categories a {
    position: relative;
    margin-right: 40px;
    margin-right: 40.5px;
    font-family: 'Neue Haas', sans-serif;
    font-weight: 900;
    cursor: pointer;
    transition: all .2s;
}

.top-bar-categories button::before,
.top-bar-categories a::before {
    position: absolute;
    top: 100%;
    right: 40px;
    width: calc( 100% + 50px );
    height: 10px;
    margin-top: 21px;
    background: #000;
    content: '';
    opacity: 0;
    transition: all .2s;
}

.top-bar-categories button path { transition: all .2s; }

.top-bar-categories button:last-child,
.top-bar-categories a:last-child { margin-right: 0; }

.top-bar-categories button svg,
.top-bar-categories a img { display: block; }

.top-bar-categories button svg { margin-right: 17px; }
.top-bar-categories a img { margin-right: 14px; }

.top-bar-categories button:hover,
.top-bar-categories a:hover,
.top-bar-categories button.is-active,
.top-bar-categories a.is-active { color: #000; }

.top-bar-categories a.is-current,
.top-bar-categories a.is-current:hover {
    color: #ff5330;
}

.top-bar-categories button.is-active svg path { fill: #ff5330; }

.top-bar-categories button.is-active::before,
.top-bar-categories a.is-active::before {
    right: 0;
    opacity: 1;
}

/* Categories menu */
.categories-menus {
    position: absolute;
    top: 100%;
    left: calc( 0px - ( 100vw - 1340px ) / 2 );
    right: calc( 0px - ( 100vw - 1340px ) / 2 );
    z-index: 2;
    display: none;
    margin-top: 30px;
    padding: 40px;
    background: #e8e8e8;
    overflow: hidden;
}
.categories-menus.is-active { display: block; }

.categories-menus__inner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}


.cat-menu:not(.is-active) { display: none; }

.cat-menu__main {
    position: relative;
    width: 360px;
    margin: -40px 0 -40px 0;
    padding: 40px;
    background: #F5F5F5;
}

.cat-menu__main::before {
    position: absolute;
    top: 0;
    right: 100%;
    width: 9999px;
    height: 100%;
    background: inherit;
    content: '';
}

.cat-menu__main li:not(:last-child) { margin-bottom: 14px; }

.cat-menu__item {
    position: relative;
    display: block;
    padding-right: 30px;
    font-size: 18px;
    line-height: 27px;
    color: #000;
}

.cat-menu__item.has-icon { padding-left: 28px; }

.cat-menu__item-icon {
    position: absolute;
    top: 3px;
    left: 0;
    width: 21px;
    height: 21px;
}

.cat-menu__item-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cat-menu__item-caret {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

.cat-menu__item-title,
.cat-menu__item-caret {
    opacity: .5;
    transition: all .2s;
}

.cat-menu__item:hover { color: #000; }

.cat-menu__item:hover .cat-menu__item-title,
.cat-menu__item:hover .cat-menu__item-caret,
.cat-menu__item.is-active .cat-menu__item-title,
.cat-menu__item.is-active .cat-menu__item-caret { opacity: 1; }



.cat-menu--specific { min-height: 308px; }

.cat-menu__sub {
    position: relative;
    padding-left: 40px;
}
.cat-menu--specific .cat-menu__sub { max-width: 1062px; }

.cat-menu__sub-item { min-height: 100%; }
.cat-menu__sub-item:not(.is-active) { display: none; }
.cat-menu__sub-item.is-forced-active { display: block; }

.cat-menu__image-wrap {
    position: absolute;
    bottom: -40px;
    right: calc( 0px - ( 100vw - 1440px ) / 2 );
    width: 378px;
    height: calc( 100% + 80px );
}

.cat-menu__image { padding-bottom: 100%; }

.cat-menu__image-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 100%;
    mix-blend-mode: multiply;
}

.cat-menu__sub-item-decor {
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    width: 100%;
    max-width: 640px;
    font-weight: 900;
    font-size: 100px;
    line-height: 100px;
    color: #000;
    opacity: .1;
    pointer-events: none;
}

.sub-cat-menu {
    margin-right: -40px;
    align-items: flex-start;
}

.sub-cat-menu__item {
    width: 33.33%;
    max-width: 360px;
    padding-bottom: 14px;
}

.sub-cat-menu a:hover { color: #ff5330; }

.sub-cat-menu__item ul { margin-top: 14px; }

.sub-cat-menu__item ul li:not(:last-child) { margin-bottom: 14px; }

@media ( max-width: 1099px ) {
    .top-bar-categories-wrap { display: none !important; }
}