.storefront-order-page {
    background: #f4f6f7;
    color: #171b21;
}
.storefront-order-page .status-panel {
    position: relative;
    max-width: 1100px;
    min-height: 0;
    padding-top: clamp(64px, 8vw, 110px);
    padding-bottom: clamp(72px, 9vw, 124px);
}
.storefront-order-page .status-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 120px -5% auto;
    height: 490px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .62), transparent 68%);
    pointer-events: none;
}
.order-confirmation-head { display: grid; justify-items: center; text-align: center; }
.storefront-order-page .order-success-icon {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 0 0 30px;
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(216, 244, 228, .68));
    box-shadow: 0 20px 52px rgba(48, 98, 74, .13), inset 0 1px 0 #fff, inset 0 -8px 18px rgba(88, 175, 122, .08);
    transform: rotate(-7deg);
}
.storefront-order-page .order-success-icon svg { width: 38px; height: 38px; fill: none; stroke: #20864a; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(7deg); }
.order-confirmation-head .eyebrow { margin: 0 0 14px; color: #65717b; font-size: 11px; letter-spacing: .2em; }
.order-confirmation-head .eyebrow span { margin: 0 7px; color: #9aa3aa; }
.storefront-order-page .status-panel h1 { max-width: 100%; margin: 0; font-size: clamp(44px, 6vw, 72px); font-weight: 750; line-height: 1.02; letter-spacing: -.065em; overflow-wrap: anywhere; }
.storefront-order-page .status-panel h1 span { display: inline-block; margin-left: .16em; color: #363e49; }
.order-confirmation-lead { margin: 18px 0 0; color: #5e6872; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.6; }
.order-status-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 25px 0 0; }
.order-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
    box-shadow: 0 8px 24px rgba(52, 71, 83, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
    color: #46505a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.order-status-chip.is-paid { color: #207145; }
.order-status-chip.is-pending { color: #8a642d; }
.order-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(33, 129, 77, .09); }

.storefront-order-page .order-progress,
.storefront-order-page .order-receipt {
    position: relative;
    overflow: hidden;
    max-width: none;
    border: 1px solid rgba(255, 255, 255, .86);
    background: linear-gradient(155deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .59));
    box-shadow: 0 30px 76px rgba(45, 61, 74, .1), 0 3px 14px rgba(57, 76, 92, .04), inset 0 1px 0 rgba(255, 255, 255, .98);
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
    text-align: left;
}
.storefront-order-page .order-progress {
    margin: 48px 0 0;
    padding: clamp(27px, 4vw, 42px);
    border-radius: 30px;
}
.storefront-order-page .order-progress::before,
.storefront-order-page .order-receipt::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    background: linear-gradient(155deg, rgba(255, 255, 255, .65), transparent 70%);
    pointer-events: none;
}
.storefront-order-page .order-progress > *,
.storefront-order-page .order-receipt > * { position: relative; }
.order-progress-topline { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.storefront-order-page .order-progress-kicker { margin: 0; color: #66727e; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.order-progress-topline > span { color: #63707c; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.storefront-order-page .order-progress h2 { margin: 13px 0 0; color: #161b21; font-size: clamp(27px, 3.2vw, 38px); font-weight: 750; line-height: 1.1; letter-spacing: -.045em; }
.storefront-order-page .order-progress > p { margin: 11px 0 0; color: #59646f; font-size: 14px; line-height: 1.65; }
.storefront-order-page .order-progress-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    position: relative;
    margin: 39px 0 0;
    padding: 0;
    list-style: none;
}
.storefront-order-page .order-progress-steps::before,
.storefront-order-page .order-progress-steps::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 8.333%;
    height: 2px;
    border-radius: 999px;
}
.storefront-order-page .order-progress-steps::before { width: 83.333%; background: rgba(121, 137, 149, .22); }
.storefront-order-page .order-progress-steps::after { width: var(--progress-fill); background: linear-gradient(90deg, #75c89b, #3b9b6e); }
.storefront-order-page .order-progress-steps li {
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 12px;
    min-width: 0;
    color: #75808a;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
}
.storefront-order-page .order-progress-marker {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(148, 161, 169, .38);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 4px 12px rgba(43, 61, 74, .04), inset 0 1px 0 #fff;
    color: #69747e;
    font-size: 13px;
    font-weight: 800;
}
.storefront-order-page .order-progress-steps .is-complete { color: #2c7550; }
.storefront-order-page .order-progress-steps .is-complete .order-progress-marker { border-color: rgba(111, 198, 149, .37); background: linear-gradient(145deg, #f3fff7, #daf1e3); color: #2a8053; }
.storefront-order-page .order-progress-steps .is-current { color: #14191e; font-weight: 800; }
.storefront-order-page .order-progress-steps .is-current .order-progress-marker { border-color: #202830; background: linear-gradient(145deg, #414d58, #151b22); box-shadow: 0 10px 22px rgba(22, 33, 43, .22), inset 0 1px 0 rgba(255, 255, 255, .23); color: #fff; }

.storefront-order-page .order-receipt { margin: 18px 0 0; padding: clamp(24px, 3.5vw, 36px); border-radius: 26px; }
.order-receipt-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-bottom: 19px; border-bottom: 1px solid rgba(118, 135, 146, .17); }
.order-receipt-heading h2 { margin: 6px 0 0; color: #252c33; font-size: 21px; line-height: 1.15; letter-spacing: -.03em; }
.order-receipt-heading > span { color: #68737d; font-size: 12px; }
.order-receipt-lines { padding: 7px 0; }
.order-receipt-line { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; color: #2d353d; font-size: 14px; line-height: 1.5; }
.order-receipt-line + .order-receipt-line { border-top: 1px solid rgba(118, 135, 146, .13); }
.order-receipt-line span { min-width: 0; }
.order-receipt-line small { display: block; margin-top: 3px; color: #77818b; font-size: 12px; }
.order-receipt-line strong { flex: 0 0 auto; font-size: 14px; }
.order-receipt-total { display: flex; justify-content: space-between; gap: 20px; margin-top: 4px; padding: 22px 0 0; border-top: 1px solid rgba(118, 135, 146, .23); color: #303941; font-size: 13px; font-weight: 700; }
.order-receipt-total strong { color: #151b20; font-size: 24px; line-height: 1; letter-spacing: -.045em; }
.order-confirmation-footer { max-width: 750px; margin: 36px auto 0; text-align: center; }
.order-confirmation-footer > p { margin: 0; color: #65717c; font-size: 12px; line-height: 1.65; }
.order-next-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 25px 0 0; }
.order-next-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.order-next-actions a:hover { transform: translateY(-2px); }
.order-primary-action { border: 1px solid #202a33; background: linear-gradient(145deg, #303b45, #111920); box-shadow: 0 12px 28px rgba(28, 39, 49, .18), inset 0 1px 0 rgba(255, 255, 255, .18); color: #fff; }
.order-primary-action span { font-size: 17px; font-weight: 500; }
.order-secondary-action { border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .56); box-shadow: 0 8px 24px rgba(52, 71, 83, .07), inset 0 1px 0 #fff; color: #252f38; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.order-confirmation-footer .order-activation-note { margin-top: 17px; }

.account-order-stage { color:#111!important; font-weight:750; }
.account-order-progress { display:block; width:120px; height:5px; margin-left:auto; border:0; border-radius:999px; accent-color:#252525; }
.account-order-progress::-webkit-progress-bar { background:#e7e7e4; border-radius:999px; }
.account-order-progress::-webkit-progress-value { background:#252525; border-radius:999px; }
.account-order-progress::-moz-progress-bar { background:#252525; border-radius:999px; }

@media(max-width:700px) {
    .storefront-order-page .status-panel { padding-top: 60px; }
    .storefront-order-page .order-progress { margin-top: 35px; }
    .storefront-order-page .order-progress-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
    .storefront-order-page .order-progress-steps::before, .storefront-order-page .order-progress-steps::after { display: none; }
}
@media(max-width:480px) {
    .storefront-order-page .status-panel { padding-inline: 18px; }
    .storefront-order-page .order-success-icon { width: 72px; height: 72px; border-radius: 24px; }
    .order-confirmation-head .eyebrow { font-size: 9px; letter-spacing: .13em; }
    .storefront-order-page .status-panel h1 { font-size: clamp(38px, 9vw, 48px); line-height: 1.06; }
    .storefront-order-page .status-panel h1 span { display: block; margin: 3px 0 0; font-size: clamp(42px, 11vw, 50px); }
    .storefront-order-page .order-progress { padding: 24px 20px; border-radius: 24px; }
    .storefront-order-page .order-progress-marker { width: 40px; height: 40px; border-radius: 14px; }
    .storefront-order-page .order-progress-steps li { font-size: 10px; }
    .storefront-order-page .order-receipt { padding: 24px 20px; border-radius: 22px; }
    .order-receipt-total strong { font-size: 21px; }
    .order-next-actions { display: grid; }
    .order-next-actions a { width: 100%; }
    .account-order-progress { width:90px; }
}
@media(prefers-reduced-motion:reduce) {
    .order-next-actions a { transition: none; }
}