ul.menu {
    list-style: none;
    padding: 0;
}

/* Mega Menu
--------------------------------------------------------------*/
header.site-header,
.top-header {
    position: relative;
    z-index: 10;
}
.primary-menu ul.menu {
    list-style: none;
    padding: 0;
    align-self: center;
    display: flex;
    transition: all 0.3s linear;
    align-items: center;
}
.primary-menu > ul.menu > li {
    --menu-item-horizontal-padding: 15px;
    --menu-item-vertical-padding: 30px;
    text-align: center;
    padding: var(--menu-item-vertical-padding) var(--menu-item-horizontal-padding);
}
.primary-menu ul.menu li a {
    color: #181818;
    font-size: 18px;
    text-decoration: none;
    font-weight: 600;
}
.primary-menu ul.menu > li > a {
    position: relative;
}
.primary-menu ul.menu ul li a {
    padding: 5px 0;
    display: block;
    opacity: 0.8;
    font-size: 17px;
}
.primary-menu ul.menu li.level-0.menu-item-has-children > a > span:after {
    content: '';
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none"><path d="M7.39614 0.75L4.26 2.9828L1.12388 0.75L0.76001 1.01075L4.26 3.50261L7.76001 1.01075L7.39614 0.75Z" fill="%230C0A09"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    width: 7px;
    display: inline-block;
    height: 7px;
    position: relative;
    left: 5px;
    transform: translate(0px, -2px);
}
.primary-menu ul.menu ul {
    list-style: none;
    padding: 0;
}
#site-navigation .secondary-menu-wrapper,
#close-site-navigation {
    display: none;
}
.primary-menu ul.menu .mobile-title {
    display: none;
}

.primary-menu .drop-menu .side-image {
    display: flex;
    flex-grow: 0;
    position: relative;
}
.primary-menu .drop-menu .side-image span.title {
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 19px;
}
.rtl .primary-menu ul.menu li.menu-item-has-children > a > span:after {
    left: auto;
    right: 5px;
}

.primary-menu ul.menu li.multi-column li.menu-item-has-children .sub-menu > li.all-items > a {
    opacity: 0.7;
}

/* side image */

@media (min-width: 1025px) {
    .menu-is-open .primary-menu ul.menu > li:not(:hover) > a {
        opacity: 0.5;
    }
    .primary-menu ul.menu > li > a:after,
    .primary-menu ul.menu > li > a:before {
        content: '';
        height: 2px;
        background-color: #000;
        position: absolute;
        bottom: -5px;
        width: 0;
        transition: width 0.2s ease-in-out;
    }

    .primary-menu ul.menu > li:hover > a:after,
    .primary-menu ul.menu > li:hover > a:before {
        content: '';
        height: 3px;
        background-color: #000;
        position: absolute;
        bottom: -5px;
        width: 50%;
    }
    .primary-menu ul.menu > li:hover > a:before,
    .primary-menu ul.menu > li > a:before {
        right: 50%;
    }
    .rtl .primary-menu ul.menu > li:hover > a:before,
    .rtl .primary-menu ul.menu > li > a:before {
        right: auto;
        left: 50%;
    }
    .primary-menu ul.menu > li:hover > a:after,
    .primary-menu ul.menu > li > a:after {
        left: 50%;
    }
    .rtl .primary-menu ul.menu > li:hover > a:after,
    .rtl .primary-menu ul.menu > li > a:after {
        left: auto;
        right: 50%;
    }

    .header3 .primary-menu ul.menu > li > a:after,
    .header3 .primary-menu ul.menu > li > a:before {
        bottom: -11px;
        z-index: 2;
    }

    .header3 .primary-menu ul.menu > li {
        --menu-item-vertical-padding: 15px;
    }
    body:not(.rtl) .header3 .primary-menu ul.menu > li:first-child {
        padding-left: 0;
    }
    body.rtl .header3 .primary-menu ul.menu > li:first-child {
        padding-right: 0;
    }
    .primary-menu ul.menu li li a:hover {
        opacity: 0.6;
    }

    .primary-menu ul.menu li .drop-menu {
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        background: #fff;

        transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);

        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        box-shadow: 0 2px 13px -5px #0003;
    }
    .rtl .primary-menu ul.menu .drop-menu .sub-menu li {
        text-align: right;
    }

    .primary-menu ul.menu.init li .drop-menu {
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    }

    body:not(.menu-is-open) .primary-menu ul.menu li .drop-menu {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    .primary-menu ul.menu li .drop-menu .drop-menu-inner {
        display: flex;
        justify-content: space-between;
        gap: 60px;
    }

    .primary-menu ul.menu .drop-menu .sub-menu li {
        text-align: left;
    }

    /* simple drop menu */
    .primary-menu ul.menu li:not(.full-width) {
        position: relative;
    }
    .primary-menu ul.menu li:not(.mega-menu) .drop-menu {
        left: -10px;
        min-width: 160px;
    }
    .rtl .primary-menu ul.menu li:not(.mega-menu) .drop-menu {
        left: auto;
        right: -10px;
    }
    .primary-menu li:not(.mega-menu) .drop-menu-inner {
        padding: 10px 0;
    }

    /* mega menu - full width */
    .primary-menu ul.menu li.full-width .drop-menu {
        left: 0;
        right: 0;
        padding: 32px 0 33px;
        max-width: 100%;
        box-shadow: inset 0 6px 15px -6px #0003;
    }

    /* mega menu - not full width */
    .primary-menu li:not(.full-width).mega-menu .drop-menu-inner {
        padding: 14px 0 22px;
    }

    .primary-menu ul.menu li:not(.full-width).mega-menu .drop-menu {
        width: 480px;
        left: -15px;
        margin-top: -2px;
    }
    .rtl .primary-menu ul.menu li:not(.full-width).mega-menu .drop-menu {
        left: auto;
        right: -15px;
    }

    /* mega menu - multi col */
    .primary-menu ul.menu li.multi-column .drop-menu .drop-menu-inner > .sub-menu {
        display: flex;
        gap: 50px;
        justify-content: flex-start;
    }
    .primary-menu ul.menu li.multi-column li.menu-item-has-children .sub-menu > li > a {
        font-size: 16px;
        color: #383838;
    }
    .primary-menu ul.menu li.multi-column li.menu-item-has-children > a {
        font-size: 18px;
        margin-bottom: 5px;
    }

    body .primary-menu ul.menu li:hover .drop-menu,
    body .primary-menu ul.menu li.active .drop-menu {
        visibility: visible;
        opacity: 1;
        top: 99%;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
    }
    body .primary-menu ul.menu li:not(.full-width) .drop-menu {
        border-radius: 12px;
    }
    body .header1 .primary-menu ul.menu li:not(.full-width):hover .drop-menu,
    body .header2 .primary-menu ul.menu li:not(.full-width):hover .drop-menu {
        top: 90%;
    }
    .primary-menu ul.menu li.multi-column li.menu-item-has-children .sub-menu > li.all-items > a {
        font-size: 16px;
        margin-top: 16px;
    }

    body .primary-menu ul.menu li.multi-column .drop-menu .sub-menu li.level-1,
    body .primary-menu ul.menu li.multi-column .drop-menu .sub-menu li.level-1.menu-item-has-children > a {
        opacity: 0;
        transform: translateY(20px);

        transition-duration: 0;
        transition-delay: 0;
        transition-property: none;
    }
    body .primary-menu ul.menu li.multi-column .drop-menu .sub-menu li.level-2 {
        opacity: 0;
        transform: translateY(5px);
        transition: none;
    }
    body .primary-menu ul.menu li.multi-column:hover .drop-menu .sub-menu li.level-1,
    body .primary-menu ul.menu li.multi-column:hover .drop-menu .sub-menu li.level-1.menu-item-has-children > a {
        opacity: 1;
        transform: translate(0);

        transition-delay: calc(0.05s + var(--g-globalnav-item-number) * 60ms);
        transition-duration: 0.6s, 0.3s;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1);
    }
    body .primary-menu ul.menu li.multi-column:hover .drop-menu .sub-menu li.level-2 {
        opacity: 1;
        transform: translateY(0);
        transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-delay: calc(0.53s + var(--g-globalnav-item-number) * 40ms);
    }
}

@media (max-width: 1024px) {
    body.menu-is-open {
        position: fixed;
        inset: 0px;
    }

    body.menu-is-open header.site-header {
        position: static;
    }
    .site-header .container.header3 .site-navigation-wrapper,
    .site-navigation-wrapper {
        width: 360px;
        border-top: none;
    }
    .site-navigation-wrapper {
        background-color: white;
        position: absolute;
        overflow-x: hidden;
        top: 0px;
        height: 100vh;
        height: 100dvh;
        max-width: 90%;
        opacity: 1;
        z-index: 3;
        padding-top: 12px;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1000000;
        display: none;
        flex-direction: column;
    }
    .site-navigation-wrapper.is-open {
        display: flex;
        left: 0;
        visibility: visible;
        transform: translateX(-360px);
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .rtl .site-navigation-wrapper.is-open {
        left: auto;
        right: 0;
        transform: translateX(360px);
    }
    .site-navigation-wrapper.is-open.finished {
        transform: translateX(0px);
        opacity: 1;
    }
    #close-site-navigation {
        display: block;
        position: absolute;
        right: 25px;
        top: 30px;
        z-index: 3;
    }
    .rtl #close-site-navigation {
        left: 25px;
        right: auto;
    }
    #navigation-overlay {
        background-color: rgba(0, 0, 0, 0.4);
        bottom: 0;
        display: block;
        opacity: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        -webkit-transition: opacity 250ms, visibility 0s linear 250ms;
        transition: opacity 650ms, visibility 0.2s linear 250ms;
        visibility: hidden;
        z-index: 99999;
    }
    #navigation-overlay.is-open {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 800ms ease, visibility 0s;
        transition: opacity 800ms ease, visibility 0s;
    }

    nav.main-navigation {
        width: 100%;
    }
    nav.main-navigation.wrapper {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }
    #close-site-navigation + nav.main-navigation {
        padding-top: 61px;
    }

    .primary-menu ul.menu {
        flex-direction: column;
        align-items: flex-start;
    }
    .primary-menu > ul.menu > li,
    .secondary-menu > ul.menu > li {
        width: 100%;
        text-align: inherit;
        padding: 8px 17px 8px 25px;
    }
    .rtl .primary-menu > ul.menu > li,
    .rtl .secondary-menu > ul.menu > li {
        padding-right: 25px;
        padding-left: 17px;
    }
    .secondary-menu > ul.menu > li {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .primary-menu ul.menu li a {
        font-size: 21px;
        display: block;
        line-height: 1.4;
    }
    .secondary-menu ul.menu li.has-icon > a::before {
        content: '';
        display: inline-block;
        width: 17px;
        height: 17px;
        position: relative;
        top: 2px;
        left: 0px;
        margin-right: 15px;
    }
    .rtl .secondary-menu ul.menu li.has-icon > a::before {
        left: auto;
        right: 0;
        margin-right: 0px;
        margin-left: 15px;
    }
    .secondary-menu ul.menu li.favorite > a::before {
        background: var(--icon-favorite) no-repeat center / contain;
    }
    .rtl .secondary-menu ul.menu li.favorite > a::before {
        right: auto;
        left: 0;
    }
    .secondary-menu ul.menu li.shopping-bag > a::before {
        background: var(--icon-cart) no-repeat center / contain;
    }
    .secondary-menu ul.menu li.orders > a::before {
        background: var(--icon-shipping-box) no-repeat center / contain;
    }
    .secondary-menu ul.menu li.about > a::before {
        background: var(--icon-company) no-repeat center / contain;
    }
    .secondary-menu ul.menu li.shipping > a::before {
        background: var(--icon-shipping-truck) no-repeat center / contain;
    }
    .secondary-menu ul.menu li.help > a::before {
        background: var(--icon-help) no-repeat center / contain;
    }
    .primary-menu ul.menu li.level-0.menu-item-has-children > a:after {
        content: ' ';
        position: absolute;
        right: 0px;
        top: 0px;
        background-image: url('data:image/svg+xml,<svg height="20" viewBox="0 0 6.3499999 6.3500002" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(0 -290.65)"><path id="path9429" d="m2.2580394 291.96502a.26460982.26460982 0 0 0 -.1741496.46871l1.6190225 1.38699-1.6190225 1.38648a.26460982.26460982 0 1 0 .3436483.40049l1.8536335-1.58595a.26460982.26460982 0 0 0 0-.40256l-1.8536335-1.5875a.26460982.26460982 0 0 0 -.1694987-.0667z" font-variant-ligatures="normal" font-variant-position="normal" font-variant-caps="normal" font-variant-numeric="normal" font-variant-alternates="normal" font-feature-settings="normal" text-indent="0" text-align="start" text-decoration-line="none" text-decoration-style="solid" text-decoration-color="rgb(0,0,0)" text-transform="none" text-orientation="mixed" white-space="normal" shape-padding="0" isolation="auto" mix-blend-mode="normal" solid-color="rgb(0,0,0)" solid-opacity="1" vector-effect="none"></path></g></svg>');
        display: block;
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
    }
    .rtl .primary-menu ul.menu li.level-0.menu-item-has-children > a:after {
        right: auto;
        left: 0px;

        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: 'FlipH';
    }

    .primary-menu ul.menu li .drop-menu {
        display: none;
        background-color: white;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        left: -100%;
        top: -40px;
        width: 100%;
        padding-top: 0;
        display: none;
    }
    .rtl .primary-menu ul.menu li .drop-menu {
        left: auto;
        right: -100%;
    }
    .primary-menu ul.menu li.is-open .drop-menu {
        visibility: visible;
        display: block;
        top: 0;
        width: 100% !important;
        height: 100vh;
        height: 100dvh;
        padding-top: 0;
        opacity: 0.9;
        z-index: 2;
    }
    .rtl .primary-menu ul.menu li.is-open.finished .drop-menu {
        right: 0;
        left: auto;
    }
    .primary-menu ul.menu li.is-open.finished .drop-menu {
        opacity: 1;
        left: 0;
        right: auto;
    }

    #site-navigation .secondary-menu-wrapper {
        display: flex;
        margin-top: 60px;
    }
    #site-navigation .secondary-menu-wrapper .secondary-menu {
        width: 100%;
        transition-delay: 0.5s;
        opacity: 0;
        transform: translateY(-8px);
        transition-duration: 0.24s;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), step-start;
    }
    #site-navigation.level-0-open.is-open.finished .secondary-menu-wrapper .secondary-menu {
        opacity: 1;
    }
    .secondary-menu > ul.menu > li a {
        font-size: 17px;
        color: #565656;
        text-decoration: none;
        font-weight: 500;
    }

    .primary-menu ul.menu .mobile-title {
        display: block;
        padding: 24px 15px 12px;
    }
    .primary-menu ul.menu ul li a {
        padding: 8px 0;
        font-size: 19px;
    }
    .primary-menu ul.menu li a.go-back {
        display: inline-block;
        position: relative;
        padding-left: 3px;
        right: -4px;
        opacity: 0.5;
        transition: all 0.2s 0.14s ease-in;
    }
    .rtl .primary-menu ul.menu li a.go-back {
        padding-right: 6px;
        right: auto;
        left: -4px;
    }
    .bs:not(.rtl) .primary-menu ul.menu li.is-open.finished a.go-back {
        opacity: 1;
        right: 0px;
    }
    .rtl .primary-menu ul.menu li.is-open.finished a.go-back {
        opacity: 1;
        left: 0px;
    }
    .primary-menu ul.menu .mobile-title a.go-back:before {
        content: '';
        background: var(--icon-back);
        background-position: 4px 3px;
        background-size: 11px;
        background-repeat: no-repeat;
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        top: 1px;
        left: -6px;
        margin-right: 1px;
    }
    .rtl .primary-menu ul.menu .mobile-title a.go-back:before {
        left: auto;
        right: -6px;
        margin-left: 1px;
        margin-right: 0;

        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: 'FlipH';
    }
    .primary-menu ul.menu li .drop-menu-inner {
        position: relative;
        left: -15px;
        opacity: 0.5;
        transition: all 0.2s 0.14s ease-in;
    }
    .rtl .primary-menu ul.menu li .drop-menu-inner {
        left: auto;
        right: -15px;
    }
    .primary-menu ul.menu li.is-open.finished .drop-menu-inner {
        left: 0px;
        opacity: 1;
    }
    .rtl .primary-menu ul.menu li.is-open.finished .drop-menu-inner {
        right: 0;
        left: auto;
    }
    .primary-menu ul.menu .drop-menu .wrapper {
        padding-left: 37px;
    }
    .rtl .primary-menu ul.menu .drop-menu .wrapper {
        padding-left: 0;
        padding-right: 37px;
    }
    .primary-menu .drop-menu .side-image {
        display: none;
    }

    .primary-menu .drop-menu ul.sub-menu .side-image {
        display: block;
        margin-left: -24px;
    }
    .rtl .primary-menu .drop-menu ul.sub-menu .side-image {
        margin-left: -0px;
        margin-right: -24px;
    }
    .primary-menu .drop-menu .side-image span.title {
        margin-top: 5px;
        margin-bottom: 15px;
    }
    /* nav level 0 transition is */
    .primary-menu ul.menu li.level-0 > a {
        opacity: 0;
        transform: translateY(-8px);
        transition-delay: calc(0.2s + var(--g-globalnav-item-number) * 20ms);
        transition-duration: 0.24s;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), step-start;
    }
    #site-navigation.level-0-open.is-open.finished .primary-menu ul.menu li.level-0 > a {
        opacity: 1;
        transform: translate(0);
    }

    .primary-menu ul.menu li.menu-item-has-children > a > span:after {
        display: none !important;
    }
    .primary-menu ul.menu li.multi-column .drop-menu .drop-menu-inner > .sub-menu {
        padding-bottom: 40px;
    }
}