@layer components {

    .order {
        display: grid;
        gap: var(--s-6);
        margin-top: var(--s-4);
    }

    .order__head {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: var(--s-4);
        padding-bottom: var(--s-5);
        border-bottom: 1px solid var(--c-line-strong);
    }

    .order__n {
        font-size: var(--t-2xl);
        font-variant-numeric: lining-nums;
    }

    .order__meta,
    .order__carrier,
    .order__eta,
    .order__tax {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .order__eta:empty,
    .order__tax:empty {
        display: none;
    }

    .order__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--s-7) clamp(32px, 6vw, 96px);
        align-items: start;
    }

    .order__side {
        display: grid;
        gap: var(--s-5);
    }

    .order__h {
        margin-bottom: var(--s-2);
        font-size: var(--t-xs);
        font-weight: 500;
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-muted);
    }

    .order__items {
        display: grid;
        gap: var(--s-4);
    }

    .order__exchange {
        margin-top: var(--s-4);
        padding: var(--s-3) var(--s-4);
        border-left: 2px solid var(--c-line-strong);
        background: var(--c-surface);
        font-size: var(--t-sm);
    }

    .order__exchange[hidden] {
        display: none;
    }

    .order__item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-4);
        font-size: var(--t-sm);
    }

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

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

    .order__item-name {
        display: grid;
        font-weight: 500;
    }

    .order__item-name a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .order__item-meta {
        font-weight: 400;
        color: var(--c-muted);
    }

    .order__item-price {
        font-variant-numeric: tabular-nums;
    }

    .order__facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-5);
        font-size: var(--t-sm);
    }

    .order__address {
        font-style: normal;
        white-space: pre-line;
    }

    .order__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2);
    }

    .order--portal {
        gap: var(--s-4);
        margin-top: 0;
    }

    .order--portal .order__n {
        font-size: var(--t-xl);
    }

    @media (max-width: 899px) {
        .order__layout {
            grid-template-columns: minmax(0, 1fr);
        }
    }

}

@layer components {

    .timeline {
        display: grid;
        margin-top: var(--s-4);
    }

    .timeline__step {
        position: relative;
        display: grid;
        gap: 1px;
        padding: 0 0 var(--s-5) var(--s-6);
        font-size: var(--t-sm);
    }

    .timeline__step::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 9px;
        height: 9px;
        border: 1px solid var(--c-line-strong);
        border-radius: 50%;
        background: var(--c-page);
    }

    .timeline__step::after {
        content: '';
        position: absolute;
        left: 4px;
        top: 18px;
        bottom: -1px;
        width: 1px;
        background: var(--c-line-strong);
    }

    .timeline__step:first-child::before {
        border-color: var(--c-accent);
        background: var(--c-accent);
    }

    .timeline__step:last-child {
        padding-bottom: 0;
    }

    .timeline__step:last-child::after {
        display: none;
    }

    .timeline__when,
    .timeline__where {
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .timeline__text {
        font-weight: 500;
    }

}

@layer components {

    .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-self: start;
        padding: 4px 10px;
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-pill);
        font-size: var(--t-xs);
        font-weight: 500;
        white-space: nowrap;
    }

    .status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-muted);
    }

    .status[data-state="delivered"]::before,
    .status[data-state="active"]::before,
    .status[data-state="ready_for_pickup"]::before {
        background: var(--c-accent);
    }

    .status[data-state="in_transit"],
    .status[data-state="processing"],
    .status[data-state="ready_for_pickup"] {
        border-color: var(--c-ink);
    }

    .status[data-state="in_transit"]::before,
    .status[data-state="processing"]::before {
        background: var(--c-warn);
    }

    .status[data-state="paused"] {
        color: var(--c-muted);
    }

}