@charset "UTF-8";
.favorites-info {
    width: 100%;
    background-color: #f9f9fa;
}
.favorites-nav button { cursor: pointer; }
.favorites-nav--registration {
    color: #0AB6C9;
    border: 0.1rem solid #0AB6C9;
    background-color: transparent;
}
.favorites-nav--registration:hover {border-color: #010101; }
.favorites-nav--login {
    color: #010101;
    border: 0.1rem solid #E3E3E8;
    background-color: #E3E3E8;
    transition: all 0.3s ease-in-out;
}
.favorites-nav--login:hover {
    color: #F4F4F6;
    border-color: #808080;
    background-color: #808080;
}
.favorites-nav--login:after {
    display: block;
    content: '';
    background-image: url("../img/svg/black/profile.svg");
    background-position: center;
    transition: all 0.3s ease-in-out;
}
.favorites-nav--login:hover:after { background-image: url("../img/svg/white/profile.svg"); }
.favorites-nav--login:hover:after { background-image: url("../img/svg/white/profile.svg"); }
.favorites-products { margin-top: 0.8rem; }
/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) {
    .favorites .wrapper {
        margin-top: 6.4rem;
        gap: 5.4rem;
    }
    .favorites-info { padding: 3.5rem 3.2rem; }
    .favorites-info span { max-width: 72rem; }
    .favorites-products { gap: 2rem; }
}

/* Desktop (All screens) */
@media (min-width: 1025px) {
    .favorites-info { border-radius: 1.6rem; }
    .favorites-nav { gap: 1.6rem; }
    .favorites-nav button {
        padding: 1.2rem 3.2rem;
        border-radius: 0.7rem;
        height: 4.8rem;
    }
    .favorites-nav--login { gap: 0.8rem; }
    .favorites-nav--login:after {
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
    .favorites .wrapper {
        margin-top: 4.8rem;
        gap: 3.2rem;
    }
    .favorites-info { padding: 2.7rem 2.4rem; }
    .favorites-info span { max-width: 70rem; }
    .favorites-products { gap: 1.6rem; }
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
    .favorites .wrapper { margin-top: 3.2rem; }
    .favorites-info {
        padding: 2.4rem;
        border-radius: 1.6rem;
    }
    .favorites-info span { max-width: 52rem; }
    .favorites-products { gap: 0.8rem; }
}

/* Tablet + Mobile */
@media (max-width: 1289px) {
    .favorites .wrapper { gap: 2.4rem; }
    .favorites-info {
        flex-direction: column;
        align-content: start;
        align-items: start;
        gap: 2.4rem;
    }
    .favorites-nav { gap: 0.8rem; }
    .favorites-nav button {
        padding: 1.1rem 2.4rem;
        border-radius: 0.6rem;
        height: 4.8rem;
    }
    .favorites-nav--login { gap: 0.8rem; }
    .favorites-nav--login:after {
        width: 2rem;
        height: 2rem;
    }
}

/* Mobile Only */
@media (max-width: 599px) {
    .favorites .wrapper { margin-top: 1.6rem; }
    .favorites-info {
        padding: 1.6rem;
        border-radius: 1.2rem;
    }
    .favorites-info span { max-width: 31.1rem; }
    .favorites-nav {
        flex-direction: column;
        align-content: start;
        align-items: start;
        gap: 0.8rem;
    }
    .favorites-nav button { width: 31.1rem; }
}