/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */

@media screen and (max-width: 1220px) {
    .header__inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .header__logo {
        order: 1;
    }

    .header__favs {
        order: 2;
    }

    .header__theme {
        order: 3;
    }

    .header__login {
        order: 4;
    }

    .header__mobile-btn {
        order: 5;
    }

    .header__search {
        flex: 1 1 100%;
        max-width: 100%;
        order: 10;
    }
}

@media screen and (max-width: 1024px) {
    .header__mobile-btn {
        display: flex;
    }

    .header__nav {
        display: none;
    }


    .book-header__wrapper {
        grid-template-columns: 150px 1fr;
    }

    .book-header__right {
        display: none;
    }

    .book-header__cover {
        margin: 0 auto;
    }
}

@media screen and (max-width: 950px) {
    .header__inner {
        gap: 20px;
    }

    .header__search {
        max-width: 300px;
    }

    .nav-list {
        gap: 15px;
    }

    .nav-list__link {
        font-size: 14px;
    }
}

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


    .book img {
        max-width: 180px;
    }

    .book-card__wrapper {
        margin: 10px auto 20px;
    }


    .books-grid3 {
        grid-template-columns: 1fr;
    }


    .categorymenu-grid3 {
        grid-template-columns: 1fr;
    }


    .us__one {
        padding: 20px;
        padding-left: 20px;
        padding-top: 140px;
        text-align: center;
    }

    .us__one .us__img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
        width: 100px;
        height: 100px;
    }

    .us__two {
        flex-direction: column;
        align-items: flex-start;
    }

    .us__btn {
        width: 100%;
    }

    .us__btn a {
        flex: 1;
    }

    .us__list li {
        flex-direction: column;
        gap: 5px;
    }

    .us__list li span {
        min-width: auto;
    }
}

@media screen and (max-width: 760px) {
    .header__inner {
        flex-wrap: wrap;
        gap: 15px;
    }

    .header__logo {
        order: 1;
        margin-right: auto;
    }

    .header__favs {
        order: 2;
    }

    .header__theme {
        order: 3;
    }

    .header__login {
        order: 4;
    }

    .header__mobile-btn {
        display: flex;
        order: 5;
    }

    .header__search {
        order: 10;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .header__nav {
        display: none;
    }

    .auth-user__name {
        display: none;
    }

    a.speedbar__back {
        display: none;
    }


    .book-header__wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .book-header__left {
        order: 1;
        position: static;
        display: block;
        text-align: center;
    }

    .book-header__center {
        order: 2;
        padding: 0;
        text-align: center;
    }

    .book-header__right {
        display: none;
    }


    .footer__inner {
        flex-direction: column;
        gap: 20px;
    }

    .footer__age-restriction {
        width: 100%;
    }

    .footer__links {
        max-width: 100%;
        width: 100%;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .footer__counter {
        text-align: left;
    }
}

@media screen and (max-width: 590px) {
    .header__inner {
        padding: 12px 0;
    }

    .logo {
        font-size: 20px;
    }

    .search-form__input {
        height: 36px;
        font-size: 13px;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
    }

    .auth-login__link span {
        display: none;
    }

    .auth-login__link {
        padding: 8px;
        width: 36px;
        height: 36px;
        justify-content: center;
    }


    .book-header__title {
        font-size: 24px;
    }

    a.speedbar__back {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .header__favs {
        display: none;
    }
}

@media screen and (max-width: 470px) {
    .header__inner {
        gap: 10px;
    }

    .logo {
        font-size: 18px;
    }
}