.nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 8px;
    cursor: pointer
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px 0;
    background: currentColor;
    transition: transform .3s, opacity .3s
}

.floating-tools {
    gap: 7px !important
}

.floating-tools .tool-item {
    position: relative
}

.floating-tools .tool-trigger,
.floating-tools .tool-top {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: var(--gold);
    display: grid;
    place-items: center;
    cursor: pointer
}

.floating-tools .tool-item>img,
.floating-tools .tool-trigger img,
.floating-tools .tool-top img {
    width: 25px;
    height: 25px;
    filter: brightness(0) invert(1)
}

.floating-tools .tool-label {
    position: absolute;
    right: 59px;
    top: 50%;
    padding: 6px 11px;
    transform: translateY(-50%) translateX(8px);
    background: #fff;
    color: #555;
    border: 1px solid var(--line);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s
}

.floating-tools .tool-item:hover .tool-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%)
}

.floating-tools .tool-popover {
    position: absolute;
    right: 59px;
    top: 50%;
    width: 156px;
    padding: 13px 15px;
    background: #fff;
    color: #4a4039;
    border: 1px solid #e5ded8;
    box-shadow: 0 10px 24px #24150e22;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(10px);
    transition: opacity .25s, transform .25s
}

.floating-tools .tool-item:hover .tool-popover,
.floating-tools .tool-item.is-open .tool-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%)
}

.floating-tools .tool-popover b,
.floating-tools .tool-popover a {
    display: block
}

.floating-tools .tool-popover a {
    margin-top: 3px;
    color: var(--gold);
    font-size: 15px;
    font-weight: 700
}

.floating-tools .tool-qr-image {
    width: 86px !important;
    height: 86px !important;
    margin: 0 auto 7px;
    filter: none !important;
    background: #2b211b;
    padding: 8px
}

.floating-tools .tool-popover b {
    font-size: 12px;
    line-height: 1.4
}

.faq-item {
    height: auto !important;
    min-height: 93px;
    overflow: hidden;
    transition: background .3s, box-shadow .3s
}

.faq-q {
    height: 112px !important;
    cursor: pointer !important
}

.faq-q:before {
    transition: transform .35s, color .3s
}

.faq-answer {
    max-height: 0;
    padding: 0 76px;
    overflow: hidden;
    color: #666;
    line-height: 2;
    background: #fff;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .45s ease, padding .45s ease, opacity .3s ease, transform .35s ease
}

.faq-item.open {
    background: #fff;
    box-shadow: 0 12px 30px #27180d12
}

.faq-item.open .faq-q:before {
    color: var(--gold);
    transform: rotate(45deg)
}

.faq-item.open .faq-answer {
    max-height: 220px;
    padding: 0 76px 28px;
    opacity: 1;
    transform: none
}

@media(max-width:900px) {
    .site-header {
        z-index: 50
    }

    .header-inner {
        align-items: center !important;
        padding-top: 0 !important
    }

    .nav-toggle {
        position: absolute;
        right: 0;
        top: 19px;
        z-index: 3;
        display: block;
        color: #fff
    }

    .contact-banner .nav-toggle {
        color: #555
    }

    .nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }

    .nav-open .nav-toggle span:nth-child(2) {
        opacity: 0
    }

    .nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }

    .main-nav {
        top: 78px !important;
        left: -20px !important;
        right: -20px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 8px 20px 18px !important;
        overflow: hidden !important;
        background: #17120ff2;
        box-shadow: 0 15px 30px #0004;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-14px);
        transition: opacity .3s, transform .3s, visibility .3s
    }

    .main-nav a {
        height: 45px !important;
        padding: 10px 6px !important;
        color: #fff !important;
        border-bottom: 1px solid #ffffff1f
    }

    .main-nav a:after {
        display: none
    }

    .nav-open .main-nav {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .home.nav-open .site-header {
        height: auto
    }

    .faq-q {
        height: auto !important;
        min-height: 84px;
        padding: 18px 16px !important;
        align-items: center !important
        
    }

    .faq-q:before {
        margin-right: 14px !important
    }

    .faq-q time {
        margin-left: 12px
    }

    .faq-answer,
    .faq-item.open .faq-answer {
        padding-left: 55px;
        padding-right: 20px
    }

    .faq-item.open .faq-answer {
        padding-bottom: 22px
    }

    .floating-tools {
        right: 10px !important;
        top: auto !important;
        bottom: 18px !important;
        gap: 5px !important
    }

    .floating-tools .tool-trigger,
    .floating-tools .tool-top,
    .floating-tools .tool-item>a {
        width: 42px;
        height: 42px
    }

    .floating-tools .tool-item>img,
    .floating-tools .tool-trigger img,
    .floating-tools .tool-top img {
        width: 22px;
        height: 22px
    }

    .floating-tools .tool-label {
        display: none
    }

    .floating-tools .tool-popover {
        right: 51px;
        width: 154px;
        transform: translateY(-50%) translateX(8px)
    }

    .floating-tools .tool-item:hover .tool-popover {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) translateX(8px)
    }

    .floating-tools .tool-item.is-open .tool-popover {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%)
    }
}

.product-banner {
    background-image: url(../images/product-wallet.jpg)
}

.news-banner {
    background-image: url(../images/product-bags-v3.jpg)
}

.long-step:nth-child(2) .step-photo {
    background-image: url(../images/product-handbag.jpg)
}

.long-step:nth-child(4) .step-photo {
    background-image: url(../images/product-bags-v3.jpg)
}

.long-step:nth-child(5) .step-photo {
    background-image: url(../images/hero-workshop.jpg)
}

.site-footer {
    background-image: linear-gradient(#14110ff0, #14110ff0), url(../images/product-wallet.jpg)
}