.order-next-steps{padding:24px;margin:0 0 24px;border:1px solid #d2e4da;border-radius:18px;background:linear-gradient(120deg,#f0f7f3,#fff)}
.order-next-steps h2{font-size:24px;margin:0 0 18px;line-height:1.3}.order-next-steps h3{font-size:14px;margin:20px 0 8px}.order-next-steps>p{font-size:14px;line-height:1.65}
.order-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.order-next-grid>div{min-width:0;padding:14px;background:white;border:1px solid #dce5df;border-radius:12px}.order-next-grid span{display:block;color:#60736a;font-size:12px;margin-bottom:6px}.order-next-grid strong{font-size:14px;overflow-wrap:anywhere}.order-next-grid #invoice-download{margin:0}.order-next-grid #invoice-download .btn{padding:0;border:0;background:none;font-size:14px;color:#176e4c;text-align:left;white-space:normal;text-decoration:underline;min-height:40px}.order-next-steps .order-pickup-action{min-height:48px;white-space:normal;line-height:1.5}.order-next-steps .quiet{margin:10px 0 0;font-size:12px}
@media(max-width:650px){.order-next-steps{padding:18px}.order-next-grid{grid-template-columns:1fr}.order-next-grid>div{padding:12px}.order-next-steps h2{font-size:21px}.order-next-steps .order-pickup-action{width:100%;box-sizing:border-box;text-align:center}}

/* Customer order status and next action. */
#order-detail .order-progress-card{padding:24px;border-radius:20px}
#order-detail .order-progress-card>h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#60736a;margin-bottom:14px}
#order-detail .order-next-steps{padding:0 0 22px;margin:0 0 20px;border:0;border-bottom:1px solid #dce5df;border-radius:0;background:none}
#order-detail .order-next-steps h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;margin-bottom:20px}
#order-detail .order-next-grid{gap:14px}
#order-detail .order-next-grid>div{padding:16px;background:#f5f9f7;border-color:#dce8e1}
#order-detail .order-next-grid span{font-size:12px;margin-bottom:9px}
#order-detail .order-next-grid strong{display:block;font-size:15px;line-height:1.5}
#order-detail .order-next-grid #invoice-download .btn{display:inline-flex;align-items:center;min-height:32px;font-weight:600}
#order-detail .order-next-steps h3{font-size:14px;margin:22px 0 6px}
#order-detail .order-next-steps>p{margin:0 0 14px;color:#53655b}
#order-detail .order-next-steps .order-pickup-action{font-size:14px;padding:12px 18px;border-radius:11px;background:#e4f3ea;color:#176b47;border:1px solid #bcddcb;min-height:46px}
#order-detail .order-next-steps .order-pickup-action:hover{background:#d5ecdf}
#order-detail .order-next-steps .quiet{margin:10px 0 0}
#order-detail .order-progress{counter-reset:orderstep;gap:10px;margin:0;grid-template-columns:repeat(5,minmax(0,1fr))}
#order-detail .order-progress li{counter-increment:orderstep;display:flex;flex-direction:column;gap:10px;padding:13px 12px;border:1px solid #e0e7e3;border-radius:12px;background:#fafcfb;font-size:12px;line-height:1.5;color:#64746b}
#order-detail .order-progress li::before{content:counter(orderstep);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eaf0ed;color:#536a5c;font-size:12px;font-weight:650}
#order-detail .order-progress li[aria-current=step]{background:#edf7f1;border-color:#8dbda2;color:#195d3b;font-weight:650}
#order-detail .order-progress li[aria-current=step]::before{background:#207b53;color:white}
@media(max-width:700px){#order-detail .order-progress{grid-template-columns:1fr}#order-detail .order-progress li{flex-direction:row;align-items:center;padding:10px 12px}#order-detail .order-progress li::before{flex-shrink:0}#order-detail .order-progress-card{padding:18px}#order-detail .order-next-grid{grid-template-columns:1fr;gap:8px}#order-detail .order-next-grid>div{padding:12px 14px}#order-detail .order-next-grid span{margin-bottom:5px}}
/* Connected order journey: completed, current and next steps. */
#order-detail .order-progress{display:grid;gap:28px;list-style:none;padding:0;margin:8px 0 0;grid-template-columns:repeat(5,minmax(0,1fr))}
#order-detail .order-progress.is-cancelled{grid-template-columns:repeat(3,minmax(0,1fr))}
#order-detail .order-progress li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 14px;border:1px solid #dce5e1;border-radius:14px;background:#f8faf9;color:#63756b;min-width:0;font-weight:400}
#order-detail .order-progress li::before{content:none}
#order-detail .order-progress li:not(:last-child)::after{content:'→';position:absolute;right:-24px;top:27px;width:20px;text-align:center;font-size:21px;color:#82998c;line-height:1}
#order-detail .order-progress .progress-marker{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8eeeb;color:#60756a;font-size:14px;font-weight:700;flex-shrink:0}
#order-detail .order-progress li strong{display:block;font-size:14px;line-height:1.4;color:#273c31}
#order-detail .order-progress .progress-state{display:block;font-size:11px;font-weight:650;margin:5px 0 10px;color:#6d7c74}
#order-detail .order-progress li small{display:block;font-size:12px;line-height:1.5;font-weight:400}
#order-detail .order-progress li.is-done{background:#fff;border-color:#d9e8de}
#order-detail .order-progress li.is-done .progress-marker{background:#e0f2e7;color:#197c4e}
#order-detail .order-progress li.is-done .progress-state{color:#20734d}
#order-detail .order-progress li.is-current{background:#edf7f1;border:2px solid #448e67;padding:17px 13px;box-shadow:0 4px 16px #1c5e3610}
#order-detail .order-progress li.is-current .progress-marker{background:#237b51;color:#fff}
#order-detail .order-progress li.is-current .progress-state{color:#176640}
#order-detail .order-progress.is-cancelled li:nth-child(2) .progress-marker{background:#f3eae7;color:#8a5040}
@media(max-width:1050px){#order-detail .order-progress,#order-detail .order-progress.is-cancelled{grid-template-columns:1fr;gap:24px}#order-detail .order-progress li{flex-direction:row;align-items:flex-start;padding:16px;gap:14px}#order-detail .order-progress li.is-current{padding:15px}#order-detail .order-progress li:not(:last-child)::after{content:'↓';top:auto;bottom:-23px;left:22px;right:auto}#order-detail .order-progress .progress-state{margin:3px 0 6px}}

.order-heading-mobile,.order-upcoming-preview{display:none}
@media(max-width:700px){
 #order-detail .order-heading-desktop{display:none}
 #order-detail .order-heading-mobile{display:block;color:#365c78}
 #order-detail .order-next-steps{display:flex;flex-direction:column;gap:0;padding-bottom:16px;margin-bottom:16px}
 #order-detail .order-next-steps h2{margin-bottom:10px}
 #order-detail .order-next-label{margin:0 0 6px}
 #order-detail .order-next-description{padding:12px 14px;border-left:3px solid #6186a3;border-radius:0 8px 8px 0;background:#edf3f8}
 #order-detail .order-upcoming-preview{display:block;margin:0 0 12px;color:#536c7d;font-weight:600}
 #order-detail .order-next-grid{order:10;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
 #order-detail .order-next-grid>div{padding:10px}
 #order-detail .order-next-grid .order-production-cell{display:none}
 #order-detail .detail-summary .summary-row:has(#order-status),#order-detail .detail-summary .summary-row:has(#payment-status){display:none}
 #order-detail .order-progress{gap:16px}
 #order-detail .order-progress li:not(.is-current){padding:8px 10px;align-items:center;gap:10px}
 #order-detail .order-progress li:not(.is-current) .progress-marker{width:26px;height:26px}
 #order-detail .order-progress li:not(.is-current) small{display:none}
 #order-detail .order-progress li:not(.is-current) .progress-state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
 #order-detail .order-progress li:not(:last-child)::after{bottom:-16px;left:16px;font-size:16px}
 #order-detail .order-payment-action{margin:10px 0 0}
 #order-detail .order-payment-action:has(.hidden){display:none}
 #order-detail #order-payment-link:not(.hidden){display:flex;justify-content:center;align-items:center;min-height:46px;padding:12px 16px;border-radius:11px;background:#263f53;color:#fff;text-decoration:none;font-weight:600}
}