.account-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 6rem;
    padding-top: 12rem;
}

.account-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 30rem;
    position: sticky;
    top: 10rem;
    gap: .6rem;
}
.account-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0 2.4rem;
    height: 6rem;
    border-radius: .6rem;
    position: relative;
}
.account-nav .nav-link:before {
    content: '';
    left: 0;
    top: 50%;
    margin-top: -.3rem;
    height: .6rem;
    background-color: #DACDBD;
    width: .6rem;
    position: absolute;
    border-radius: 1rem;
}
.account-nav .nav-link.is-active {
    background-color: #DACDBD;
}
.account-nav .nav-link__icon-wrap {
    display: none;
}
.account-nav .nav-link__icon {

}
.account-nav .nav-link__label {
    font-size: 1.4rem;
    font-weight: 400;
}










.account-content {
    width: 100%;
}

















.orders-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    max-width: 50rem;
}
.orders-list .order-item {
    background-color: rgba(0, 0, 0,.07);
    border-radius: 2rem;
    padding: 3.6rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 3rem;
}



.order-item .order-header {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
}
.order-header__row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.order-item .order-header .order-number {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    opacity: .4;
}
.order-item .order-header .order-status {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
}
.order-item.cancelled .order-header .order-status {
    color: #C50015;
}
.order-item.completed .order-header .order-status {
    color: #C76A05;
}
.order-item .order-header .order-total {
    display: block;
    font-weight: 700;
}
.order-item .order-header .order-date {
    display: block;
}




.order-item .order-info {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    display: none;
}
.order-item .order-info.on {
    display: flex;
}
.order-item .order-info .order-details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2rem;
}
.order-item .order-info .order-details .order-details__title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.order-item .order-info .order-details .products-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .6rem;
}
.order-item .order-info .order-details .products-list .product-item {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.order-item .order-info .order-details .products-list .product-item .product__title {
    line-height: 1.3;
    font-size: 1.4rem;
}
.order-item .order-info .order-details .products-list .product-item .product__total {
    line-height: 1.3;
    font-size: 1.4rem;
    text-align: right;
}
.order-item .order-info .order-details .order-totals {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .6rem;
}
.order-item .order-info .order-details .order-totals .total-item {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.order-item .order-info .order-details .order-totals .total__label {
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.3;
}
.order-item .order-info .order-details .order-totals .total__value {
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: right;
}



.order-item .order-footer {
    border-top: .2rem dotted rgba(0, 0, 0, .2);
    padding-top: 2rem;
}
.order-item .order-footer .order-actions {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: .6rem;
}
.order-item .order-footer .order-actions .action-button {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    height: 4rem;
    padding: 0 2.4rem;
    border-radius: 20rem;
    background-color: #fff;
    cursor: pointer;
}
.order-item .order-footer .order-actions .action-button.view {
    display: none;
}





















.auth {
    overflow: hidden;
    width: 50rem;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, .07);
    position: relative;
}
.auth .swiper-auth {

}
.auth .swiper-auth .swiper-wrapper {

}
.auth .swiper-slide {

}
.auth .account-auth {
    padding: 6rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 3.6rem;
}
.auth .account-auth .account-auth__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.auth .account-auth .account-auth__title {
    font-size: 2.4rem;
    font-weight: 700;
    opacity: .3;
}
.auth .account-auth .account-auth__register-link,
.auth .account-auth .account-auth__login-link {
    display: flex;
    font-size: 1.4rem;
    color: #9d5248;
    cursor: pointer;
    font-weight: 700;
}
.auth .account-auth .auth-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.auth .account-auth .auth-form .form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .8rem;
}
.auth .account-auth .auth-form .form-row--login-type {
    display: flex;
    align-items: stretch;
    gap: .2rem;
    flex-direction: row;
}
.auth .account-auth .auth-form .form-row--login-type .login-type__button {
    display: flex;
    width: 100%;
    height: 5rem;
    /* border-radius: 1.2rem; */
    align-items: center;
    font-size: 1.6rem;
    font-weight: 400;
    justify-content: center;
    text-align: center;
    padding: 0 2rem;
    background-color: rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: .3s;
}
.auth .account-auth .auth-form .form-row--login-type .login-type__button.on {
    background-color: #9d5248;
    color: #fff;
}
.auth .account-auth .auth-form .form-row--phone,
.auth .account-auth .auth-form .form-row--email {
    display: none;
    margin-top: 1.2rem;
}
.auth .account-auth .auth-form .form-row--phone.on,
.auth .account-auth .auth-form .form-row--email.on {
    display: flex;
}
.auth .account-auth .auth-form .form-row--login {
    display: none;
}
.auth .account-auth .auth-form .form-row--password {
    margin-top: 1.2rem;
}
.auth .account-auth .auth-form .form-row--rememberme {
    display: none;
}
.auth .account-auth .auth-form .form-row--submit {
    margin-top: 2.4rem;
}
.auth .account-auth .auth-form .form-row--submit .form--button {
    display: flex;
    align-items: center;
    height: 6rem;
    /* border-radius: 2rem; */
    padding: 0 3.6rem;
    font-size: 1.6rem;
    font-weight: 400;
    background-color: #9d5248;
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    align-self: stretch;
}
.auth .account-auth .auth-form .form-row--lost-password {
    margin-top: 1.2rem;
}
.auth .account-auth .auth-form .form-row--lost-password .lost-password-link {
    font-size: 1.2rem;
    font-weight: 700;
    color: #9d5248;
}
.auth .account-auth .auth-form .form-row .form-label {
    display: block;
    font-weight: 700;
    font-size: 1.2rem;
}
.auth .account-auth .auth-form .form-row .form-input {
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    border-radius: 1.2rem;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: inherit;
    height: 5rem;
    background-color: #fff;
}