@layer components {

    .account {
        max-width: 1180px;
        margin-inline: auto;
        padding: var(--s-8) var(--gutter) 0;
    }

    .account__guest {
        display: grid;
        justify-items: start;
        gap: var(--s-4);
        max-width: 560px;
    }

    .account__head {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: var(--s-5) var(--s-7);
    }

    .account__title {
        margin-block: var(--s-2);
        font-size: var(--t-2xl);
    }

    .account__lede {
        color: var(--c-muted);
    }

    .account__status {
        display: grid;
        justify-items: end;
        gap: 2px;
        font-size: var(--t-sm);
    }

    .account__points-n {
        font-size: var(--t-xl);
    }

    .account__tier {
        color: var(--c-muted);
    }

    .account__out {
        margin-top: var(--s-2);
    }

    .account__panel {
        padding-top: var(--s-6);
    }

    .account__h {
        margin-block: var(--s-7) var(--s-3);
        font-size: var(--t-xs);
        font-weight: 500;
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-muted);
    }

    .account__hint {
        margin-top: var(--s-4);
        color: var(--c-muted);
    }

    @media (max-width: 767px) {
        .account__status {
            justify-items: start;
        }
    }

}

@layer components {

    .tabs {
        display: flex;
        gap: var(--s-6);
        margin-top: var(--s-7);
        border-bottom: 1px solid var(--c-line-strong);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabs__tab {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 48px;
        font-size: var(--t-sm);
        font-weight: 500;
        letter-spacing: .04em;
        white-space: nowrap;
        color: var(--c-muted);
        transition: color var(--dur-1) var(--ease);
    }

    .tabs__tab:hover,
    .tabs__tab[aria-current="page"] {
        color: var(--c-ink);
    }

    .tabs__tab[aria-current="page"]::after {
        content: '';
        position: absolute;
        inset: auto 0 -1px;
        height: 2px;
        background: var(--c-ink);
    }

}

@layer components {

    .order-row {
        border-bottom: 1px solid var(--c-line);
    }

    .order-row__link {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr) auto 90px auto;
        align-items: center;
        gap: var(--s-5);
        padding-block: var(--s-4);
        transition: background-color var(--dur-1) var(--ease);
    }

    .order-row__link:hover .order-row__n {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .order-row__link:hover .icon--arrow {
        transform: translateX(4px);
    }

    .order-row__thumbs {
        display: flex;
        gap: var(--s-1);
    }

    .order-row__thumb {
        width: 56px;
        height: 56px;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .order-row__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .order-row__main {
        display: grid;
    }

    .order-row__n {
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }

    .order-row__meta {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .order-row__total {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    @media (max-width: 767px) {
        .order-row__link {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: var(--s-2) var(--s-4);
        }

        .order-row__thumbs {
            grid-column: 1 / -1;
        }

        .order-row__total {
            text-align: left;
        }

        .order-row__link > .icon {
            display: none;
        }
    }

}