header.fixed{
    width: 100%;
    background: var(--white);
    position: fixed;
    z-index: 5;
    top: 0;
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
}
header{
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.header-block__first{
    padding: 20px 0;
}
.header-block__first > .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header-block__first-search{
    cursor: pointer;
    transition: .3s;
}
.header-block__first-search > img{
    width: 30px;
}
.header-block__second{
    background: var(--beige);
    padding: 10px 0;
}
.header-block__second > .container{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.header-block__second > .container  a{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--text);
    transition: all .2s ease;
}
.header-block__second > .container  a p{
    font-size: 20px;
    padding: 2px 0;
    transition: all .3s ease;
}
.header-block__second > .container  a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--krayola);
    transition: all .3s ease;
}
.header-block__second > .container  a:hover::after{
    width: 100%;
}
.header-block__second > .container  a:hover{
    transition: .2s;
}
.header-block__first-wishlist {
    width: 35px;
    height: 35px;
    position: relative;
    cursor: pointer;
}

.header-block__first-wishlist::before,
.header-block__first-wishlist::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--krayola);
    transition: opacity 0.3s ease;
}

.header-block__first-wishlist::before {
    mask-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.7901 42.3586L22.9123 41.7047C22.1223 41.1473 4.08388 27.9498 4.08388 17.2935C4.06046 14.9883 4.75826 12.7333 6.07967 10.8442C7.40108 8.95514 9.27998 7.52639 11.4535 6.75787C13.627 5.98935 15.9864 5.91952 18.2016 6.55814C20.4167 7.19677 22.3769 8.5119 23.8077 10.3195C24.8471 9.0425 26.1572 8.0123 27.6434 7.30338C29.1295 6.59446 30.7546 6.22452 32.4012 6.22029H32.4275C35.3628 6.22377 38.1769 7.39167 40.2521 9.46768C42.3272 11.5437 43.494 14.3582 43.4964 17.2935C43.4964 27.9498 25.4623 41.1473 24.7118 41.7047L23.7901 42.3586ZM15.1308 9.20036C14.0752 9.20086 13.0301 9.41083 12.0562 9.8181C11.0823 10.2254 10.1989 10.8218 9.45718 11.573C8.71545 12.3241 8.13013 13.2149 7.73515 14.1939C7.34016 15.1728 7.14335 16.2204 7.15613 17.276C7.15613 24.4211 18.4181 34.463 23.7901 38.549C29.1622 34.4586 40.4241 24.4123 40.4241 17.2935C40.4218 15.1722 39.5781 13.1385 38.0781 11.6385C36.5781 10.1386 34.5444 9.29485 32.4231 9.29253C30.9074 9.29088 29.4224 9.71932 28.1405 10.5281C26.8586 11.3368 25.8325 12.4927 25.1814 13.8614L23.7726 16.8415L22.3944 13.8482C21.7553 12.4597 20.7312 11.2837 19.4437 10.4599C18.1562 9.63604 16.6593 9.1989 15.1308 9.20036Z' fill='black'/%3E%3C/svg%3E%0A");
    opacity: 1;
}

.header-block__first-wishlist::after {
    mask-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.1533 6.23061C31.1926 6.22627 29.2711 6.77983 27.6133 7.82663C25.9554 8.87343 24.6296 10.3703 23.7906 12.1424C22.8025 9.99 21.1045 8.24273 18.9813 7.19357C16.858 6.14441 14.4386 5.85714 12.1287 6.37994C9.81877 6.90274 7.75883 8.20381 6.29426 10.065C4.82969 11.9262 4.04954 14.2343 4.08463 16.6024C4.08463 27.4169 23.7906 41.7013 23.7906 41.7013C23.7906 41.7013 43.4965 27.4169 43.4965 16.6024C43.5003 15.2417 43.2355 13.8936 42.7174 12.6355C42.1993 11.3773 41.438 10.2337 40.4772 9.27017C39.5163 8.30668 38.3748 7.54225 37.1181 7.02067C35.8613 6.49909 34.514 6.23061 33.1533 6.23061Z' fill='black'/%3E%3C/svg%3E%0A");
    opacity: 0;
}

.header-block__first-wishlist:hover::before {
    opacity: 0;
}

.header-block__first-wishlist:hover::after {
    opacity: 1;
}
.first-wishlist__count{
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%);
    border-radius: 100%;
    width: 20px;
    height: 20px;
    background: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
}
/* Выпадающее меню */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 300px;
}

.dropdown-menu a {
    display: block;
    padding: 10px 15px;
    color: var(--black);
    width: 100%;
}

/* Показ меню при наведении */
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-trigger__container{
    display: flex;
    align-items: center;
    gap: 5px;
}
.dropdown-trigger__arrow{
    width: 20px;
    height: 20px;
    background: var(--text);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.26089 6.71282C4.627 6.3467 5.22059 6.3467 5.58671 6.71282L10.5488 11.6749L15.5109 6.71282C15.877 6.3467 16.4706 6.3467 16.8367 6.71282C17.2028 7.07894 17.2028 7.67253 16.8367 8.03865L11.2117 13.6636C10.8456 14.0298 10.252 14.0298 9.88588 13.6636L4.26089 8.03865C3.89477 7.67253 3.89477 7.07894 4.26089 6.71282Z' fill='black'/%3E%3C/svg%3E%0A");
    transition: .3s;
}
.dropdown:hover .dropdown-trigger__arrow{
    background: var(--text);
    transform: rotate(-180deg);
    transition: .3s;
}
.first-left__menu{
    content: '';
    width: 30px ;
    height: 30px;
    background: var(--krayola);
    cursor: pointer;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg width='17' height='10' viewBox='0 0 17 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.7891 4.37256H0V5.62754H16.7891V4.37256Z' fill='black'/%3E%3Cpath d='M16.7891 0H0V1.25498H16.7891V0Z' fill='black'/%3E%3Cpath d='M16.7891 8.745H0V9.99998H16.7891V8.745Z' fill='black'/%3E%3C/svg%3E%0A");
    display: none;
}
.first-left__menu.active{
    background: transparent;
    mask-image: none;
}
.first-left__menu::before{
    content: '';
    width: 30px ;
    height: 30px;
    background: var(--krayola);
    cursor: pointer;
    mask-size: contain;
    mask-repeat: no-repeat;
    transition: .3s;
    display: block;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.9524 0.999859L1 21.9523L2.04762 22.9999L23 2.04748L21.9524 0.999859Z' fill='black'/%3E%3Cpath d='M2.04762 1.00023L1 2.04785L21.9524 23.0003L23 21.9526L2.04762 1.00023Z' fill='black'/%3E%3C/svg%3E%0A");
    opacity: 0;
}
.first-left__menu.active::before{
    opacity: 1;
    transition: .3s;
}
.first-left__menu:hover{
    transform: scale(1.1);
    transition: .3s;
}
.header-block__first-search:hover {
    transform: scale(1.1);
    transition: .3s;
}
.mobile-menu{
    position: fixed;
    top: 110px;
    right: -150%;
    height: calc(100vh - 110px);
    width: 50%;
    z-index: 10;
    overflow: auto;
    background: var(--white);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    transition: .3s;
}
.mobile-menu.active{
    right: 0;
    pointer-events: auto;
    transition: .3s;

}
.mobile-menu__item a{
    text-decoration: none;
    color: var(--text);
    font-size: 18px;
    font-weight: 500;
    padding: 15px 30px;
    display: block;
}
.mobile-menu__item > a{
    border-bottom: solid 1px var(--krayola);
}
.mobile-menu__item-drop{
    background: var(--beige);
}
.mobile-menu__item-drop > a{
    border-bottom: var(--krayola) solid 1px;
}
.mobile-menu__item.dropdown > a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.mobile-menu__item.dropdown > a::after{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.26089 6.71282C4.627 6.3467 5.22059 6.3467 5.58671 6.71282L10.5488 11.6749L15.5109 6.71282C15.877 6.3467 16.4706 6.3467 16.8367 6.71282C17.2028 7.07894 17.2028 7.67253 16.8367 8.03865L11.2117 13.6636C10.8456 14.0298 10.252 14.0298 9.88588 13.6636L4.26089 8.03865C3.89477 7.67253 3.89477 7.07894 4.26089 6.71282Z' fill='black'/%3E%3C/svg%3E%0A");
    background: var(--text);
    transition: .3s;
}
.mobile-menu__item.dropdown.active > a::after{
    transform: rotate(-180deg);
    transition: .3s;
}
.mobile-menu__item.dropdown > .mobile-menu__item-drop{
    max-height: 0;
    overflow: hidden;
    transition: .3s;
}
.header-block__first-logo > img{
    width: 100%;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (max-width: 1150px){
    .first-left__wishlist{
        display: none;
    }
    .header-block__second{
        display: none;
    }
    .first-left__menu{
        display: block;
    }
}
@media (max-width: 700px){
    .header-block__first {
        padding: 10px 0;
    }
    .header-block__first-search > img {
        width: 20px;
    }
    .first-left__menu.active::before{
        width: 20px;
        height: 20px;
    }
    .first-left__menu {
        width: 20px;
        height: 20px;
    }
    .header-block__first-logo > img {
        width: 200px;
    }
    .mobile-menu{
        top: 55px;
        width: 100%;
        height: calc(100vh - 55px);
    }

}