/* Track an order: the lookup form, the result card with its four steps, and the side notes, on top of /help/help.css. */
.sl-main.to-main{max-width:none}
.to-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--vt-space-6);align-items:start;margin-top:var(--vt-space-2)}
.to-column{display:grid;gap:var(--vt-stack);min-width:0}
.to-form{margin:0;padding:var(--vt-card-pad);background:#fff;border:1px solid var(--vt-line);border-radius:var(--vt-radius-lg)}
.to-form input{text-transform:none}
#track-reference{text-transform:uppercase;letter-spacing:.04em}
#track-reference::placeholder{letter-spacing:0;color:#637484}
.to-form .sl-fine{margin:-6px 0 0}
.to-form .sl-status.is-error{color:#9b3434!important}
.to-aside{padding:var(--vt-card-pad);background:linear-gradient(130deg,#e2f1fc,#ddf7ed);border-radius:var(--vt-radius-lg)}
.to-aside h2{margin:0 0 10px;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.to-aside ul{margin:0 0 14px;padding-left:20px}
.to-aside li,.to-aside p{color:#3f566b;font-size:14px}
.to-aside li+li{margin-top:8px}
.to-aside p{margin:10px 0 0}
.to-noscript{padding:14px 16px;border:1px solid var(--vt-amber-line);border-radius:var(--vt-radius-md);background:var(--vt-amber-soft);color:var(--vt-amber);font-size:14px}

.to-result{scroll-margin-top:96px;padding:var(--vt-card-pad);background:#fff;border:1px solid var(--vt-line);border-radius:var(--vt-radius-lg);outline:none}
.to-result[hidden]{display:none}
.to-result-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px}
.to-result-head h2{margin:0;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.03em;overflow-wrap:anywhere}
.to-result-head p{margin:4px 0 0;color:#53687b;font-size:13px}
.to-pill{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:99px;background:#e5f0f5;color:#102044;font-size:12px;font-weight:600;white-space:nowrap}
.to-pill[data-status=paid],.to-pill[data-status=shipped]{background:#dcecf9;color:#0b3e75}
.to-pill[data-status=delivered]{background:#dcf3e8;color:#1d5c45}
.to-pill[data-status=cancelled]{background:#f6e6e3;color:#8a3a2c}
.to-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 6px;padding:0;list-style:none;counter-reset:step}
.to-steps li{position:relative;display:grid;justify-items:center;gap:8px;color:#56697d;font-size:12px;font-weight:600;text-align:center;counter-increment:step}
.to-steps li::before{content:counter(step);position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border:2px solid #c9d6df;border-radius:50%;background:#fff;color:#56697d;font-size:12px;line-height:1}
.to-steps li::after{content:'';position:absolute;top:14px;left:calc(-50% + 15px);right:calc(50% + 15px);height:2px;background:#c9d6df}
.to-steps li:first-child::after{display:none}
.to-steps li.is-done{color:#102044}
.to-steps li.is-done::before{content:'✓';border-color:#102044;background:#102044;color:#fff}
.to-steps li.is-done::after{background:#102044}
.to-steps li.is-current::before{box-shadow:0 0 0 4px #cfe3f3}
.to-message{margin:18px 0 0;padding:14px 16px;border:1px solid var(--vt-sky-line);border-radius:var(--vt-radius-md);background:var(--vt-sky-soft);color:var(--vt-navy)!important;font-size:14px}
.to-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:20px 0 0}
.to-details div{min-width:0}
.to-details dt{color:#56697d;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.to-details dd{margin:3px 0 0;color:#102044;font-size:14px;overflow-wrap:anywhere}
.to-details a{color:#0b3e75;font-weight:600;text-underline-offset:3px}
.to-items{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid #e0e9ef}
.to-items li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #e0e9ef;color:#102044;font-size:14px}
.to-items span{color:#53687b;white-space:nowrap}
.to-items-title{margin:22px 0 0;font-size:15px;font-weight:600}
.to-result-foot{margin:16px 0 0;color:#53687b!important;font-size:13px}
.to-result-foot a{color:inherit}

@media(max-width:900px){.to-layout{grid-template-columns:1fr}}
@media(max-width:700px){
.to-result-head h2{font-size:21px}
.to-steps li{font-size:12px;letter-spacing:-.01em}
.to-details{grid-template-columns:1fr;gap:12px}
}