/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-b8onmfd5y6] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-b8onmfd5y6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vs6t9xv72t],
.components-reconnect-repeated-attempt-visible[b-vs6t9xv72t],
.components-reconnect-failed-visible[b-vs6t9xv72t],
.components-pause-visible[b-vs6t9xv72t],
.components-resume-failed-visible[b-vs6t9xv72t],
.components-rejoining-animation[b-vs6t9xv72t] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-retrying[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-failed[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vs6t9xv72t] {
    display: block;
}


#components-reconnect-modal[b-vs6t9xv72t] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vs6t9xv72t 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vs6t9xv72t 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vs6t9xv72t 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vs6t9xv72t]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vs6t9xv72t 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vs6t9xv72t {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vs6t9xv72t {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vs6t9xv72t {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vs6t9xv72t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vs6t9xv72t] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vs6t9xv72t] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vs6t9xv72t] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vs6t9xv72t] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vs6t9xv72t] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vs6t9xv72t] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vs6t9xv72t 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vs6t9xv72t] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vs6t9xv72t {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/OrderProgress.razor.rz.scp.css */
/* Progress strip -------------------------------------------------------- */

.progress[b-hhul9dftzt] {
    margin-top: 1rem;
}

.sr-only[b-hhul9dftzt] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* News cards ------------------------------------------------------------ */

/* Delay, free gift and cancellation break into the strip after the first step; each keeps its
   own colour so it is not mistaken for one of the seven. */
.step.news.canceled[b-hhul9dftzt] { --step: #B4232C; --step-soft: #FBE7E8; }
.step.news.delayed[b-hhul9dftzt]  { --step: #C57A00; --step-soft: #FBF0DC; }
.step.news.gift[b-hhul9dftzt]     { --step: #A82FA6; --step-soft: #FBE7FB; }

.step.news .text h3[b-hhul9dftzt] {
    color: var(--step);
}

/* Steps ----------------------------------------------------------------- */

.steps[b-hhul9dftzt] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each step owns the colour of its card in the printed guide, so the strip reads as the same
   seven pictures customers already know. */
.step[data-step="1"][b-hhul9dftzt] { --step: #F185F0; --step-soft: #FCEBF9; }
.step[data-step="2"][b-hhul9dftzt] { --step: #EDB114; --step-soft: #FBF3DA; }
.step[data-step="3"][b-hhul9dftzt] { --step: #B98AF4; --step-soft: #F2E9FD; }
.step[data-step="4"][b-hhul9dftzt] { --step: #4C9CF5; --step-soft: #E6F0FD; }
.step[data-step="5"][b-hhul9dftzt] { --step: #3FA173; --step-soft: #E5F3EC; }
.step[data-step="6"][b-hhul9dftzt] { --step: #F0863A; --step-soft: #FCEDE1; }
.step[data-step="7"][b-hhul9dftzt] { --step: #55AEEC; --step-soft: #E7F3FD; }
.step[data-step="8"][b-hhul9dftzt] { --step: #3FA173; --step-soft: #E6F3EA; }

/* The strip fills in from the top, one step after another, so the journey is drawn rather than
   dumped. The first delay clears the cards above, which are still rising. */
@keyframes step-in-b-hhul9dftzt {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.step[b-hhul9dftzt] {
    animation: step-in-b-hhul9dftzt 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.step:nth-child(1)[b-hhul9dftzt] { animation-delay: 0.30s; }
.step:nth-child(2)[b-hhul9dftzt] { animation-delay: 0.36s; }
.step:nth-child(3)[b-hhul9dftzt] { animation-delay: 0.42s; }
.step:nth-child(4)[b-hhul9dftzt] { animation-delay: 0.48s; }
.step:nth-child(5)[b-hhul9dftzt] { animation-delay: 0.54s; }
.step:nth-child(6)[b-hhul9dftzt] { animation-delay: 0.60s; }
.step:nth-child(7)[b-hhul9dftzt] { animation-delay: 0.66s; }
.step:nth-child(8)[b-hhul9dftzt] { animation-delay: 0.72s; }
.step:nth-child(n+9)[b-hhul9dftzt] { animation-delay: 0.78s; }

@media (prefers-reduced-motion: reduce) {
    .step[b-hhul9dftzt] {
        animation: none;
    }
}

.step[b-hhul9dftzt] {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 3.25rem 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0;
}

/* The line joining the markers. It stops at the last step so nothing dangles below it. */
.step[b-hhul9dftzt]::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--surface-line);
}

.step:first-child[b-hhul9dftzt]::before {
    top: 50%;
}

.step:last-child[b-hhul9dftzt]::before {
    bottom: 50%;
}

.step.done[b-hhul9dftzt]::before,
.step.current[b-hhul9dftzt]::before {
    background: color-mix(in srgb, var(--step) 45%, var(--surface-line));
}

.step:first-child.current[b-hhul9dftzt]::before,
.step:first-child.done[b-hhul9dftzt]::before {
    background: var(--surface-line);
}

/* Marker ---------------------------------------------------------------- */

.marker[b-hhul9dftzt] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--surface-line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.step.done .marker[b-hhul9dftzt] {
    background: var(--step);
    border-color: var(--step);
    color: #FFFFFF;
}

.step.current .marker[b-hhul9dftzt] {
    background: var(--step);
    border-color: var(--step);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step) 22%, transparent);
}

.marker svg[b-hhul9dftzt] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Artwork --------------------------------------------------------------- */

.art[b-hhul9dftzt] {
    margin: 0;
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--step-soft);
    line-height: 0;
}

.art img[b-hhul9dftzt] {
    width: 100%;
    height: auto;
    display: block;
}

.step.upcoming .art[b-hhul9dftzt] {
    filter: grayscale(1);
    opacity: 0.45;
}

.step.done .art[b-hhul9dftzt] {
    opacity: 0.75;
}

/* Text ------------------------------------------------------------------ */

.text h3[b-hhul9dftzt] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.text p[b-hhul9dftzt] {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.step.upcoming .text h3[b-hhul9dftzt] {
    color: var(--muted);
    font-weight: 500;
}

/* Only the step the order is actually on gets the full picture and the full sentence; the rest
   stay small so all seven fit on one phone screen. */
.step.current[b-hhul9dftzt] {
    grid-template-columns: 2rem 1fr;
    grid-template-areas:
        "marker art"
        ". text";
    row-gap: 0.7rem;
    padding: 1rem 0 1.2rem;
}

.step.current .marker[b-hhul9dftzt] {
    grid-area: marker;
    align-self: start;
    margin-top: 0.4rem;
}

.step.current .art[b-hhul9dftzt] {
    grid-area: art;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.step.current .text[b-hhul9dftzt] {
    grid-area: text;
}

.step.current .text h3[b-hhul9dftzt] {
    font-size: 1.15rem;
    font-weight: 700;
}

.step.current .text p[b-hhul9dftzt] {
    font-size: 0.92rem;
    color: var(--ink);
}

.step-note[b-hhul9dftzt] {
    margin-top: 0.35rem !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    color: var(--accent-deep) !important;
}

/* Wider screens have room for the picture beside the text on every step. */
@media (min-width: 34rem) {
    .step[b-hhul9dftzt] {
        grid-template-columns: 2rem 4.5rem 1fr;
    }

    .step.current[b-hhul9dftzt] {
        grid-template-columns: 2rem 10rem 1fr;
        grid-template-areas: "marker art text";
        align-items: center;
        column-gap: 1.1rem;
    }

    .step.current .marker[b-hhul9dftzt] {
        align-self: center;
        margin-top: 0;
    }
}
/* /Components/Pages/Track.razor.rz.scp.css */
.track-page[b-ke5y1n70s4] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 5rem;
}

.page-head[b-ke5y1n70s4] {
    margin-bottom: 1.75rem;
}

/* The artwork is shown whole, with no frame and no shadow. Height is capped and
   the width follows, so the tall portrait does not push the form off screen. */
.hero[b-ke5y1n70s4] {
    display: flex;
    justify-content: center;
    margin: 0 0 1.25rem;
}

.hero img[b-ke5y1n70s4] {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(8rem, 26vh, 13rem);
    object-fit: contain;
}

.eyebrow[b-ke5y1n70s4] {
    margin: 0 0 0.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
}

.page-head h1[b-ke5y1n70s4] {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
}

.sr-only[b-ke5y1n70s4] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Search card ---------------------------------------------------------- */

.search-card[b-ke5y1n70s4] {
    display: grid;
    gap: 0.6rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.field[b-ke5y1n70s4] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.field-icon[b-ke5y1n70s4] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* InputText renders inside a child component, so the scope has to be pierced. */
.field[b-ke5y1n70s4]  input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 0;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
}

.field[b-ke5y1n70s4]  input::placeholder {
    color: #9095A3;
}

.field[b-ke5y1n70s4]  input:focus {
    outline: none;
}

.field:focus-within[b-ke5y1n70s4] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.go[b-ke5y1n70s4] {
    justify-self: end;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-top: 0.15rem;
    color: #fff;
    background: var(--accent-deep);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-float);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.go:hover:not(:disabled)[b-ke5y1n70s4] {
    transform: translateY(-1px);
}

.go:disabled[b-ke5y1n70s4] {
    background: #C79BC6;
    cursor: progress;
}

.go svg[b-ke5y1n70s4] {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spinner[b-ke5y1n70s4] {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-ke5y1n70s4 0.7s linear infinite;
}

@keyframes spin-b-ke5y1n70s4 {
    to { transform: rotate(360deg); }
}

/* Validation popup ------------------------------------------------------ */

.toast[b-ke5y1n70s4] {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: max-content;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 26px 50px -20px rgba(28, 32, 48, 0.45);
    /* The overshoot in the keyframes is what gives it the pop. */
    animation: plop-b-ke5y1n70s4 0.42s cubic-bezier(0.24, 1.1, 0.32, 1) both;
}

.toast.closing[b-ke5y1n70s4] {
    animation: plop-out-b-ke5y1n70s4 0.16s ease-in both;
}

@keyframes plop-b-ke5y1n70s4 {
    0% {
        opacity: 0;
        transform: translate(-50%, -0.75rem) scale(0.72);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1.06);
    }
    78% {
        transform: translate(-50%, 0) scale(0.975);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes plop-out-b-ke5y1n70s4 {
    from {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -0.4rem) scale(0.9);
    }
}

.toast-icon[b-ke5y1n70s4] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--accent-soft);
}

.toast-icon svg[b-ke5y1n70s4] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--accent-deep);
    stroke-width: 1.9;
    stroke-linecap: round;
}

.toast-body[b-ke5y1n70s4] {
    flex: 1 1 auto;
}

.toast-title[b-ke5y1n70s4] {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.toast-body ul[b-ke5y1n70s4] {
    margin: 0;
    padding-left: 1.05rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.toast-body li + li[b-ke5y1n70s4] {
    margin-top: 0.15rem;
}

.toast-close[b-ke5y1n70s4] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: -0.15rem -0.25rem 0 0;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.toast-close:hover[b-ke5y1n70s4] {
    background: var(--surface-sunken);
    color: var(--ink);
}

.toast-close svg[b-ke5y1n70s4] {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-ke5y1n70s4],
    .toast.closing[b-ke5y1n70s4] {
        animation-duration: 0.01ms;
    }
}

/* Messages ------------------------------------------------------------- */

.track-message[b-ke5y1n70s4] {
    margin: 1.5rem 0 0;
    padding: 0.95rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

.track-message.info[b-ke5y1n70s4] {
    background: var(--accent-soft);
    color: #5B2E5A;
}

.track-message.error[b-ke5y1n70s4] {
    background: var(--danger-soft);
    color: var(--danger);
}

/* The result, arriving ---------------------------------------------------- */

/* The order does not simply appear where the form was: each block rises into place a beat after
   the one above it, so the eye is walked down the page from the order number to the parcel. */
@keyframes rise-b-ke5y1n70s4 {
    from {
        opacity: 0;
        transform: translateY(1.1rem) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.result > *[b-ke5y1n70s4] {
    animation: rise-b-ke5y1n70s4 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result > *:nth-child(1)[b-ke5y1n70s4] { animation-delay: 0.02s; }
.result > *:nth-child(2)[b-ke5y1n70s4] { animation-delay: 0.10s; }
.result > *:nth-child(3)[b-ke5y1n70s4] { animation-delay: 0.18s; }
.result > *:nth-child(4)[b-ke5y1n70s4] { animation-delay: 0.26s; }
.result > *:nth-child(5)[b-ke5y1n70s4] { animation-delay: 0.34s; }
.result > *:nth-child(n+6)[b-ke5y1n70s4] { animation-delay: 0.4s; }

/* The way back to the form, in place of the hero once an order is on screen. */
.back[b-ke5y1n70s4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.9rem 0.5rem 0.6rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    animation: rise-b-ke5y1n70s4 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.back:hover[b-ke5y1n70s4] {
    color: var(--ink);
}

.back svg[b-ke5y1n70s4] {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .result > *[b-ke5y1n70s4],
    .back[b-ke5y1n70s4] {
        animation: none;
    }
}

/* Cards ---------------------------------------------------------------- */

.card[b-ke5y1n70s4] {
    margin-top: 1.25rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.order-summary h2[b-ke5y1n70s4] {
    margin: 0 0 0.85rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.order-summary dl[b-ke5y1n70s4] {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
}

.order-summary dl > div[b-ke5y1n70s4] {
    display: flex;
    gap: 0.75rem;
}

.order-summary dt[b-ke5y1n70s4] {
    min-width: 8.5rem;
    color: var(--muted);
}

.order-summary dd[b-ke5y1n70s4] {
    margin: 0;
    font-weight: 500;
}

/* Shipment ------------------------------------------------------------- */

.shipment header[b-ke5y1n70s4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.badge[b-ke5y1n70s4] {
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #5B2E5A;
    background: var(--accent-soft);
}

.badge.moving[b-ke5y1n70s4] { background: var(--accent-soft); color: #5B2E5A; }
.badge.close[b-ke5y1n70s4] { background: var(--warn-soft); color: var(--warn); }
.badge.delivered[b-ke5y1n70s4] { background: var(--ok-soft); color: var(--ok); }
.badge.problem[b-ke5y1n70s4] { background: var(--danger-soft); color: var(--danger); }
.badge.unknown[b-ke5y1n70s4] { background: var(--surface-sunken); color: var(--muted); }

.carrier[b-ke5y1n70s4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.tracking-number[b-ke5y1n70s4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

/* Copying the number is the most common thing done with it, so it gets a button rather than
   leaving the customer to select twelve digits by hand. */
.copy[b-ke5y1n70s4] {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--surface-line);
    border-radius: 0.6rem;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.copy:hover[b-ke5y1n70s4] {
    color: var(--accent-deep);
    border-color: var(--accent);
}

.copy svg[b-ke5y1n70s4] {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Headline date ---------------------------------------------------------- */

/* The one line most visits are about, so it sits above the details and outweighs them. */
.headline-date[b-ke5y1n70s4] {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.headline-date.delivered[b-ke5y1n70s4] {
    color: var(--ok);
}

.order-summary address[b-ke5y1n70s4] {
    display: grid;
    font-style: normal;
    line-height: 1.45;
}

/* Order contents --------------------------------------------------------- */

.items h3[b-ke5y1n70s4] {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.items ul[b-ke5y1n70s4] {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.items li[b-ke5y1n70s4] {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.items figure[b-ke5y1n70s4] {
    margin: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--surface-sunken);
}

.items img[b-ke5y1n70s4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-title[b-ke5y1n70s4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.item-variant[b-ke5y1n70s4] {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.item-qty[b-ke5y1n70s4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.status-text[b-ke5y1n70s4] {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.eta[b-ke5y1n70s4] {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.shipment-error[b-ke5y1n70s4] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--danger);
}

/* Timeline ------------------------------------------------------------- */

.timeline[b-ke5y1n70s4] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 0 1.35rem;
    border-left: 2px solid var(--surface-line);
}

.timeline li[b-ke5y1n70s4] {
    position: relative;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0;
}

.timeline li[b-ke5y1n70s4]::before {
    content: "";
    position: absolute;
    left: -1.79rem;
    top: 0.95rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--surface-line);
}

/* The newest event is the one the customer came to read. */
.timeline li:first-child[b-ke5y1n70s4]::before {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline time[b-ke5y1n70s4] {
    font-size: 0.78rem;
    color: var(--muted);
}

.timeline .description[b-ke5y1n70s4] {
    font-size: 0.95rem;
}

.timeline .location[b-ke5y1n70s4] {
    font-size: 0.85rem;
    color: var(--muted);
}

.carrier-link[b-ke5y1n70s4] {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.carrier-link:hover[b-ke5y1n70s4] {
    text-decoration: underline;
}

@media (max-width: 30rem) {
    .track-page[b-ke5y1n70s4] {
        padding-top: 2rem;
    }

    .page-head h1[b-ke5y1n70s4] {
        font-size: 1.7rem;
    }

    .order-summary dl > div[b-ke5y1n70s4] {
        flex-direction: column;
        gap: 0;
    }

    .order-summary dt[b-ke5y1n70s4] {
        min-width: 0;
    }
}