.customer-order-detail { min-width: 0; }
.order-detail-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 12px 0 4px; color: #666; font-size: 13px; text-decoration: none; }
.order-detail-back .icon { width: 16px; height: 16px; }
.order-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 24px; }
.order-detail-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.6px; }
.order-detail-heading p { margin: 7px 0 0; color: #666; font-size: 13px; }
.order-detail-refresh { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dedede; border-radius: 9px; background: #fff; }
.order-detail-card { min-width: 0; padding: 24px; border: 1px solid #e4e4e4; border-radius: 12px; background: #fff; }
.order-detail-card h3 { margin: 0; color: #222; font-size: 16px; font-weight: 600; }
.order-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; margin-top: 20px; }
.order-detail-aside { display: grid; gap: 20px; }
.order-progress-title { display: flex; gap: 16px; justify-content: space-between; }
.order-progress-title > span { color: #777; font-size: 12px; }
.order-progress ol { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; padding: 0; margin: 24px 0 0; gap: 8px; }
.order-progress li { display: grid; gap: 9px; color: #888; font-size: 12px; line-height: 1.5; }
.order-progress li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 50%; background: #f5f5f5; }
.order-progress .is-complete, .order-progress .is-current { color: #222; }
.order-progress .is-complete > span, .order-progress .is-current > span { color: #fff; background: #222; border-color: #222; }
.order-progress .is-current { font-weight: 600; }
.order-items-scroll { overflow-x: auto; margin: 16px -24px 0; }
.order-items table { width: 100%; border-collapse: collapse; font-size: 13px; }
.order-items th, .order-items td { padding: 14px 10px; border-bottom: 1px solid #eee; text-align: right; vertical-align: top; }
.order-items th { font-size: 11px; color: #777; font-weight: 500; }
.order-items th:first-child, .order-items td:first-child { width: 48%; padding-left: 24px; text-align: left; overflow-wrap: anywhere; }
.order-items th:last-child, .order-items td:last-child { padding-right: 24px; }
.order-items td strong { font-size: 13px; font-weight: 500; }
.order-items td small { display: block; margin-top: 4px; color: #777; font-size: 11px; }
.order-item-voided { color: #888; }
.order-detail-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 14px; }
.order-detail-total strong { font-size: 20px; font-weight: 600; }
.order-detail-note { margin: 12px 0 0; color: #777; font-size: 12px; line-height: 1.55; }
.order-detail-card dl { display: grid; gap: 16px; margin: 20px 0 0; }
.order-detail-card dt { margin-bottom: 5px; color: #777; font-size: 12px; }
.order-detail-card dd { margin: 0; color: #333; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.order-shipping-address { white-space: pre-line; }
.order-detail-contact, .order-document-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: #333; text-align: left; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 13px; cursor: pointer; }
.order-detail-contact { margin-top: 12px; }
.order-document-link span { color: #777; font-size: 11px; text-decoration: none; }
.order-documents h3 { margin-bottom: 12px; }
.order-history-detail-link { display: inline-flex; align-items: center; min-height: 44px; margin-right: 20px; color: #333; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.customer-order-detail :focus-visible, .order-history-detail-link:focus-visible { outline: 2px solid #006aff; outline-offset: 3px; }
@media(max-width: 900px) { .order-detail-layout { grid-template-columns: minmax(0, 1fr); } .order-detail-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 560px) {
  .order-detail-back, .order-detail-heading { padding-left: 12px; padding-right: 12px; }
  .order-detail-card { padding: 18px 14px; border-radius: 10px; }
  .order-detail-layout, .order-detail-aside { gap: 14px; grid-template-columns: minmax(0, 1fr); }
  .order-progress ol { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .order-progress li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .order-items-scroll { margin-left: -14px; margin-right: -14px; }
  .order-items th, .order-items td { padding: 12px 5px; font-size: 12px; }
  .order-items th { font-size: 10px; }
  .order-items th:first-child, .order-items td:first-child { padding-left: 14px; width: 40%; }
  .order-items th:last-child, .order-items td:last-child { padding-right: 14px; }
}
@media print {
  body:has(.customer-order-detail) { background: #fff; overflow: visible !important; position: static !important; top: auto !important; left: auto !important; width: auto !important; }
  body:has(.customer-order-detail) .chat-widget, body:has(.customer-order-detail) dialog, body:has(.customer-order-detail) [data-portal-overlays] { display: none !important; }
  body:has(.customer-order-detail) dialog::backdrop { display: none !important; }
  body:has(.customer-order-detail) .workspace-header, body:has(.customer-order-detail) .skip-link, body:has(.customer-order-detail) #toast, body:has(.customer-order-detail) [data-chat-launcher], body:has(.customer-order-detail) #order-updates-host, .customer-order-detail .account-tabs, .customer-order-detail .simple-account-heading, .customer-order-detail .order-detail-back, .customer-order-detail button { display: none !important; }
  .customer-order-detail .order-detail-layout, .customer-order-detail .order-detail-aside { display: block; }
  .customer-order-detail .order-detail-card { margin-bottom: 16px; box-shadow: none; break-inside: avoid; }
  .customer-order-detail .order-items { break-inside: auto; }
  .customer-order-detail .order-items-scroll { overflow: visible; }
  .customer-order-detail tr { break-inside: avoid; }
}