/* Desktop */

.customer-account {
    display: flex;
    flex-direction: column;
    gap: var(--space-x3);
    max-width: var(--theme-max-container);
    margin-top: var(--space-x3);
}

.customer-account__row {
    row-gap: var(--space-x3);
}

@media (min-width: 700px) {
    .customer-account__row {
        flex-wrap: nowrap;
    }
}

.customer-account__content-container {
    display: flex;
    gap: var(--space-x8);
}

.customer-account__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.customer-account__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-x3);
}

.customer-account__orders {
    display: flex;
    flex-direction: column;
    gap: var(--space-x3);
    margin-top: var(--space-x4);
}

.customer-account__orders__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.customer-account__orders__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.customer-account__orders__content .form-choice__options {
    gap: var(--space-x2);
    user-select: none;
}

.customer-account__orders__empty {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
    align-items: center;
    justify-content: center;
}

.order-card {
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

.order-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half);
    align-items: center;
    font: var(--theme-paragraph-10-medium);
    letter-spacing: var(--theme-paragraph-10-letter-spacing);
}

/* Small Mobile */
@media (max-width: 380px) {
    .order-card__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.order-card__item-list {
    display: flex;
    gap: var(--space);
    align-items: center;
    justify-content: space-between;
}

.order-card__data-point {
    color: var(--theme-text-20);
}

.order-card__data-point:not(:first-of-type)::before {
    margin-right: var(--space-half);
    content: '\2022';
}

.order-card__item-list__text {
    display: -webkit-box;
    overflow: hidden;
    font: var(--theme-paragraph-20-medium);
    color: var(--theme-text-10);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.customer-account--orders__card-list__order-actions {
    display: flex;
    gap: var(--space);
}

/* Mobile */
@media (max-width: 699px) {
    .customer-account__content-container {
        flex-direction: column;
    }

    .customer-account__content {
        width: 100%;
    }

    .customer-account__sidebar {
        width: 100%;
    }

    .order-card__item-list {
        flex-direction: column;
        align-items: flex-start;
        margin-top: var(--space);
    }

    .customer-account--orders__card-list__order-actions {
        align-self: flex-end;
    }
}

.mobile-orders {
    display: flex;
    gap: var(--space-x2);
    overflow-x: auto;
}

.mobile-orders::-webkit-scrollbar {
    display: none;
}

.mobile-orders__card {
    width: 100%;
    min-width: fit-content;
}

.mobile-orders__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-x2);
}

.mobile-orders__order__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-x2);
}


.mobile-orders__order__items {
    display: flex;
    gap: var(--space);
}

.mobile-orders__order__image {
    width: 40px;
    height: 40px;
    border-radius: calc(var(--theme-border-radius-image) / 2);
}

.customer-account--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mobile-orders__order__placeholder {
    position: relative;
}

.mobile-orders__order__overlay {
    background-color: var(--theme-fill-20);
    border-radius: calc(var(--theme-border-radius-image) / 2);
}

.mobile-orders__items__overlay__text {
    color: var(--theme-body-text-color-contrast);
}

/** Items you love tab **/

.customer-account__past-orders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-x2);
    margin-top: var(--space-x4);
}

.customer-account__past-orders--empty {
    margin-top: var(--space-x4);
}

@media (max-width: 992px) {
    .customer-account__past-orders {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1600px) {
    .customer-account__past-orders {
        grid-template-columns: repeat(4, 1fr);
    }
}

.customer-account__past-orders__loader {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-x4);
}

.customer-account__past-orders .order-again-card {
    padding: 0;
}

/** Discounts **/

.discounts__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.discounts__cards-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.discounts__card {
    display: flex;
    flex-direction: row;
    gap: var(--space-x2);
    align-content: center;
    align-items: center;
    cursor: pointer;
}

.discounts__icon {
    color: var(--theme-emphasis-fill);
}

@media (max-width: 699px) {
    .discounts__card {
        width: 300px;
        min-width: 300px;
    }

    .discounts__cards-list {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        gap: var(--space-x2);
        width: 100vw;
        padding: 0 var(--theme-container-padding);
        margin-left: calc(var(--theme-container-padding)* -1);
        overflow-x: auto;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

    .discounts__cards-list::-webkit-scrollbar {
        display: none;
    }
}

.discounts__card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
    font: var(--theme-paragraph-20-medium);
    color: var(--theme-text-10);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.account__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.customer-account__divider {
    border-top: 1px solid var(--theme-divider-20);
}

@media (max-width: 699px) {
    .customer-account__divider {
        width: 100vw;
        margin-left: calc(-1* var(--theme-container-padding));
    }
}