.overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: var(--body-grey);
    opacity: 0;
    transition: opacity .5s ease;
    z-index: -1
}

.overlay.active,
.overlay.megamenu-open {
    left: 0;
    opacity: .8;
    z-index: 2
}

section.closed.slideout-menu {
    left: -90vw
}

.slideout-menu {
    position: fixed;
    height: var(--mobile-height);
    width: 90vw;
    top: 0;
    left: 0;
    z-index: 3;
    transition: left .5s ease;
    height: calc(var(--mobile-height) - var(--header-size) + 1px);
    top: calc(var(--header-size) - 1px);
    background: #fff;
    padding: var(--spacing-y-major) var(--spacing-x-minor)
}

section.slideout-menu li {
    text-decoration: none;
    list-style: none
}

section.slideout-menu li.nav-item-primary {
    border-top: 1px solid var(--slideout-grey);
    padding: var(--spacing-y-tiny) 0 calc(var(--spacing-y-tiny) * 1.25);
    position: relative
}

section.slideout-menu li a {
    text-decoration: none;
    color: var(--body-grey);
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh)
}

section.slideout-menu li li a {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh)
}

section.slideout-menu .sub-menu.shown {
    max-height: none
}

.info-tag {
    font-size: var(--footer-copy);
    color: #fff;
    padding: 6px 9px;
    border-radius: 10px;
    margin: 0 0 0 var(--spacing-x-tiny)
}

li.nav-item-secondary {
    margin: calc(var(--spacing-y-tiny)) 0
}

section.slideout-menu svg.arrowhead {
    position: absolute;
    right: 0;
    width: calc(var(--body-mid-copy) - 5px);
    top: var(--spacing-y-minor);
    transform: translateY(50%)
}

section.slideout-menu svg.arrowhead * {
    stroke: var(--slideout-grey)
}

section.slideout-menu svg.arrowhead line {
    transition: transform .5s ease, stroke-width .5s ease;
    stroke-width: 1px;
    transform: none;
    stroke: var(--slideout-grey)
}

section.slideout-menu svg.arrowhead.flipped line.st1 {
    transform: scale(1.5) translate(4%, 2%);
    stroke-width: .75px
}

section.slideout-menu svg.arrowhead.flipped line.st0 {
    transform: scale(1.5) translate(-43%, 2%);
    stroke-width: .75px
}

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

    body.fix-mobile,
    body.fix-desktop {
        overflow: hidden
    }
}

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

    body.fix-desktop,
    body.fix-mobile {
        overflow: hidden;
        padding-right: 10px
    }

    .info-tag {
        border-radius: 5px
    }
}

/*# sourceMappingURL=/cdn/shop/t/222/assets/slideout-menu.css.map?v=78615329301027171121749552606 */