/** * Copyright © Qnap Corp. All rights reserved. * * Order Status progress bar styles for both list (compact) and detail (full). * * RD control points (driven by ViewModel-rendered inline CSS variables): * On each
    : * --current : 1-indexed position of current step (0 = not started) * --total : total number of steps * On each
  1. : * --step-index : 0-indexed loop position * Plus state class: --completed | --current | --pending */ /* ============================================================ Card layout (list page) ============================================================ */ #my-orders-table { border-collapse: separate; border-spacing: 0; } #my-orders-table tbody > tr > td { background: #f3f4f6; background-clip: padding-box; border-color: transparent; /* Defensive reset: theme (Smartwave/porto) often adds per-cell vertical dividers via border-left/right on .data.table cells. Force them off so the unified card has clean inner space. !important is needed because the theme rule lives in styles-l.css (loaded later) with the same specificity. */ border-left: 0 !important; border-right: 0 !important; background-image: none !important; } /* Top corners belong to the (Magento-rendered) order data row. */ #my-orders-table tbody > tr:not(.qnap-order-progression-row) > td:first-child { border-top-left-radius: 14px; } #my-orders-table tbody > tr:not(.qnap-order-progression-row) > td:last-child { border-top-right-radius: 14px; } /* 16px gap between cards: a transparent top border on each order row that follows a progression row creates the spacer without inserting any gap between the order row and its own progression row (which share a unified card). */ #my-orders-table tbody > tr.qnap-order-progression-row + tr:not(.qnap-order-progression-row) > td { border-top: 16px solid transparent; } /* Card outline (#e5e7eb hairline) + drop-shadow halo. Tables can't draw a single border around two rows, so we layer per-td inset shadows to fake a continuous outline: - Order row: hairline on top (every td) + left (first td) + right (last td) - Progression row: hairline on left + right + bottom (single colspan td) The drop-shadow halo lives on the progression row (single colspan td) ONLY — applying it to multiple order-row tds would let adjacent cells' blurs overlap at their boundaries and produce a visible vertical band at every column gutter. The bottom-only shadow is enough to lift the card off the page; the inset hairline carries the card's visible edge. */ #my-orders-table tbody > tr:not(.qnap-order-progression-row) > td { box-shadow: inset 0 1px 0 #e5e7eb; } #my-orders-table tbody > tr:not(.qnap-order-progression-row) > td:first-child { box-shadow: inset 1px 0 0 #e5e7eb, inset 0 1px 0 #e5e7eb; } #my-orders-table tbody > tr:not(.qnap-order-progression-row) > td:last-child { box-shadow: inset -1px 0 0 #e5e7eb, inset 0 1px 0 #e5e7eb; } /* Progression row: white inner panel sitting under the order row, bottom corners + drop-shadow halo + side/bottom hairline form the unified card. Selector specificity must beat `#my-orders-table tbody > tr > td` above (which paints the grey order row). */ #my-orders-table tbody > tr.qnap-order-progression-row > td { padding: 18px 24px; background: #ffffff; border: none; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; box-shadow: inset 1px 0 0 #e5e7eb, inset -1px 0 0 #e5e7eb, inset 0 -1px 0 #e5e7eb, 0 4px 12px -2px rgba(15, 23, 42, 0.10); } .qnap-order-progression { display: flex; flex-direction: column; gap: 12px; } /* ============================================================ Delivery line (above pill) ============================================================ */ .qnap-order-progression__delivery { display: flex; align-items: baseline; gap: 12px; font-size: 14px; } .qnap-order-progression__delivery-label { color: #6b7280; } .qnap-order-progression__delivery-date { font-weight: 600; color: #111827; } /* ============================================================ Location / tracking row (below pill) ============================================================ */ .qnap-order-progression__location { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; } .qnap-order-progression__location-info { display: flex; align-items: baseline; gap: 12px; color: #374151; } .qnap-order-progression__location-label { color: #6b7280; } .qnap-order-progression__track { color: #1f6fe0; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .qnap-order-progression__track:hover { text-decoration: underline; } .qnap-order-progression__track::after { content: ""; display: inline-block; width: 14px; height: 14px; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M14 4h6v6 M20 4l-9 9 M5 5h6v0 M5 5v14h14v-6'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M14 4h6v6 M20 4l-9 9 M5 5h6v0 M5 5v14h14v-6'/%3E%3C/svg%3E") center / contain no-repeat; } /* ============================================================ Progression pill ============================================================ */ .qnap-order-progression__pill { --total: 1; --current: 0; --fill-min: 8em; --pad: 15px; --pill-radius: 9999px; --total-minus-1: max(1, calc(var(--total) - 1)); --fill-pct: calc((max(1, var(--current)) - 1) / var(--total-minus-1) * 100%); --fill-active: clamp(0, var(--current), 1); --fill-width: calc(var(--fill-active) * max(var(--fill-min), var(--fill-pct))); position: relative; list-style: none; margin: 0; padding: 0; /* Reset logical-side padding so pill always fills the row regardless of LTR/RTL or list-default insets. */ padding-inline-start: 0; padding-inline-end: 0; width: 100%; box-sizing: border-box; height: 28px; border-radius: var(--pill-radius); overflow: hidden; background: var(--progress-track); } .qnap-order-progression__pill-step { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; margin: 0; } /* Non-current steps: absolute positioned at fixed slots along the pill. */ .qnap-order-progression__pill-step:not(.qnap-order-progression__pill-step--current) { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; left: calc(var(--step-index, 0) / var(--total-minus-1) * 100%); } .qnap-order-progression__pill-step:not(.qnap-order-progression__pill-step--current):first-child { left: var(--pad); } .qnap-order-progression__pill-step:not(.qnap-order-progression__pill-step--current):last-child { left: auto; right: var(--pad); } .qnap-order-progression__pill-step:not(.qnap-order-progression__pill-step--current):not(:first-child):not(:last-child) { transform: translate(-50%, -50%); } .qnap-order-progression__pill-step--pending { color: var(--progress-pending-text); } /* Current step also doubles as the gradient fill — width tracks --current, text hugs the leading edge. */ .qnap-order-progression__pill-step--current { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fill-width); min-width: max-content; background: var(--progress-fill); border-radius: 0 var(--pill-radius) var(--pill-radius) 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--pad); font-weight: 600; animation: qnapPillFill 1s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes qnapPillFill { from { width: 0; } } @media (prefers-reduced-motion: reduce) { .qnap-order-progression__pill-step--current { animation: none; } } /* ============================================================ Theme tokens ============================================================ */ .qnap-order-progression--forward { --progress-track: #dce9f8; --progress-fill: linear-gradient(to right, #7ab0f2 0%, #1747a8 100%); --progress-pending-text: #4a73a8; } .qnap-order-progression--return, .qnap-order-progression--cancel { --progress-track: #fbe4ce; --progress-fill: linear-gradient(to right, #f0b070 0%, #b85410 100%); --progress-pending-text: #a36038; } /* ============================================================ Pill icons (CSS mask-image, colored via currentColor) Usage: Available : processing | picking | shipped | delivered | returning | returned | canceling | canceled ============================================================ */ .qnap-order-progression__pill-icon { flex-shrink: 0; display: inline-block; height: 14px; background-color: currentColor; mask: var(--icon, none) center / contain no-repeat; -webkit-mask: var(--icon, none) center / contain no-repeat; } .qnap-order-progression__pill-icon--processing { aspect-ratio: 1; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8.565 10.35L10.65 8.28L10.02 7.65L8.565 9.075L7.98 8.49L7.35 9.135L8.565 10.35ZM1.8 3.6H9V2.4H1.8V3.6ZM9 12C8.17 12 7.4626 11.7074 6.8778 11.1222C6.293 10.537 6.0004 9.8296 6 9C5.9996 8.1704 6.2922 7.463 6.8778 6.8778C7.4634 6.2926 8.1708 6 9 6C9.8292 6 10.5368 6.2926 11.1228 6.8778C11.7088 7.463 12.0012 8.1704 12 9C11.9988 9.8296 11.7062 10.5372 11.1222 11.1228C10.5382 11.7084 9.8308 12.0008 9 12ZM0 11.4V1.2C0 0.87 0.1176 0.5876 0.3528 0.3528C0.588 0.118 0.8704 0.0004 1.2 0H9.6C9.93 0 10.2126 0.1176 10.4478 0.3528C10.683 0.588 10.8004 0.8704 10.8 1.2V5.205C10.52 5.065 10.2274 4.9624 9.9222 4.8972C9.617 4.832 9.3096 4.7996 9 4.8H1.8V6H6.06C5.89 6.17 5.7326 6.355 5.5878 6.555C5.443 6.755 5.3154 6.97 5.205 7.2H1.8V8.4H4.845C4.825 8.5 4.8126 8.5976 4.8078 8.6928C4.803 8.788 4.8004 8.8904 4.8 9C4.8 9.42 4.8576 9.8226 4.9728 10.2078C5.088 10.593 5.2604 10.9604 5.49 11.31L5.4 11.4L4.5 10.5L3.6 11.4L2.7 10.5L1.8 11.4L0.9 10.5L0 11.4Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--picking { aspect-ratio: 1; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='black' d='M2.06667 10.8604C2.96133 10.8909 4.28267 10.9214 6 10.9214C7.7176 10.9214 9.03893 10.8909 9.93333 10.8604C9.96987 10.2402 10 9.3956 10 8.30266C10 6.95785 9.95413 6.0836 9.90773 5.54185C9.86533 5.0516 9.55733 4.66868 9.09493 4.58644C8.5296 4.48558 7.56693 4.38203 6 4.38203C4.43307 4.38203 3.47067 4.48558 2.90507 4.58644C2.44267 4.66868 2.1344 5.0516 2.09227 5.54185C2.0456 6.08387 2 6.95758 2 8.30293C2 9.39587 2.03013 10.2402 2.06667 10.8607M6.94933 0.203611C6.65045 0.0693634 6.32704 0 6 0C5.67296 0 5.34955 0.0693634 5.05067 0.203611C3.104 1.0784 1.63253 2.225 0.8704 2.88837C0.377067 3.31794 0.111733 3.92792 0.0789333 4.55839C0.0277797 5.54047 0.00145997 6.52371 0 7.50715C0 8.63542 0.0394667 9.7138 0.0741333 10.4422C0.0915521 10.8301 0.25239 11.1973 0.524801 11.471C0.797211 11.7447 1.16133 11.905 1.54507 11.9202C2.4272 11.956 3.92933 12 6 12C8.07067 12 9.5728 11.956 10.4549 11.9202C10.8387 11.905 11.2028 11.7447 11.4752 11.471C11.7476 11.1973 11.9084 10.8301 11.9259 10.4422C11.9605 9.71407 12 8.63542 12 7.50715C12 6.32603 11.9568 5.24738 11.9211 4.55839C11.8883 3.92819 11.6232 3.31794 11.1296 2.88837C10.3677 2.225 8.896 1.0784 6.94933 0.203611ZM4.8432 5.82958C4.85813 5.58257 5.0112 5.39893 5.2336 5.37223C5.416 5.35066 5.6848 5.33205 6.07227 5.33205C6.45973 5.33205 6.72853 5.35066 6.91093 5.3725C7.13333 5.39893 7.28667 5.58284 7.3016 5.82958C7.3104 5.97682 7.31733 6.17421 7.31733 6.43363C7.31733 6.69304 7.3104 6.89043 7.30133 7.03767C7.28667 7.28468 7.13333 7.46859 6.91093 7.49502C6.72853 7.51659 6.45973 7.5352 6.07227 7.5352C5.6848 7.5352 5.41627 7.51686 5.2336 7.49502C5.0112 7.46859 4.85813 7.28468 4.8432 7.03767C4.83193 6.83653 4.82668 6.63509 4.82747 6.43363C4.82747 6.17421 4.83413 5.97682 4.8432 5.82958ZM6.62587 8.60899C6.6408 8.36225 6.79387 8.17834 7.01653 8.15192C7.19893 8.13034 7.46773 8.11147 7.8552 8.11147C8.24267 8.11147 8.5112 8.13034 8.69387 8.15192C8.91627 8.17834 9.06933 8.36225 9.08427 8.60899C9.09333 8.7565 9.1 8.95362 9.1 9.21304C9.1 9.47245 9.09333 9.66985 9.08427 9.81708C9.06933 10.0641 8.91627 10.248 8.69387 10.2744C8.51147 10.2963 8.24267 10.3149 7.8552 10.3149C7.46773 10.3149 7.19893 10.2963 7.01653 10.2744C6.79413 10.248 6.6408 10.0641 6.62587 9.81735C6.61468 9.61621 6.60952 9.41477 6.6104 9.21331C6.6104 8.95362 6.61707 8.75623 6.62587 8.60899ZM3.45147 8.15192C3.22907 8.17834 3.076 8.36225 3.06107 8.60899C3.0497 8.81013 3.04437 9.01157 3.04507 9.21304C3.04507 9.47272 3.052 9.66985 3.06107 9.81708C3.076 10.0641 3.22907 10.248 3.45147 10.2744C3.63387 10.2963 3.90267 10.3149 4.29013 10.3149C4.6776 10.3149 4.9464 10.2963 5.1288 10.2744C5.3512 10.248 5.50453 10.0641 5.51947 9.81735C5.52827 9.66985 5.53493 9.47272 5.53493 9.21331C5.53493 8.95389 5.52827 8.7565 5.51947 8.60926C5.50453 8.36225 5.35147 8.17834 5.1288 8.15192C4.9464 8.13034 4.6776 8.11147 4.29013 8.11147C3.90267 8.11147 3.63413 8.13034 3.45147 8.15192Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--shipped { aspect-ratio: 18 / 12; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 6.99375L0.4 5.49375H4.8L4.4 6.99375H0ZM3.5 11.3438C3.03333 10.9062 2.8 10.375 2.8 9.75H0.8L1.2 8.11875H5.34L6.06 5.38125H7.74L8.74 1.63125H3.2L3.32 1.18125C3.4 0.83125 3.58347 0.547 3.8704 0.3285C4.15733 0.11 4.49387 0.0005 4.88 0H14L13.26 3H15.6L18 6L17.2 9.75H15.6C15.6 10.375 15.3667 10.9062 14.9 11.3438C14.4333 11.7812 13.8667 12 13.2 12C12.5333 12 11.9667 11.7812 11.5 11.3438C11.0333 10.9062 10.8 10.375 10.8 9.75H7.6C7.6 10.375 7.36667 10.9062 6.9 11.3438C6.43333 11.7812 5.86667 12 5.2 12C4.53333 12 3.96667 11.7812 3.5 11.3438ZM1.6 4.25625L2 2.75625H7.2L6.8 4.25625H1.6ZM5.2 10.5C5.42667 10.5 5.6168 10.428 5.7704 10.284C5.924 10.14 6.00053 9.962 6 9.75C5.99947 9.538 5.92267 9.36 5.7696 9.216C5.61653 9.072 5.42667 9 5.2 9C4.97333 9 4.78347 9.072 4.6304 9.216C4.47733 9.36 4.40053 9.538 4.4 9.75C4.39947 9.962 4.47627 10.1402 4.6304 10.2847C4.78453 10.4292 4.9744 10.501 5.2 10.5ZM13.2 10.5C13.4267 10.5 13.6168 10.428 13.7704 10.284C13.924 10.14 14.0005 9.962 14 9.75C13.9995 9.538 13.9227 9.36 13.7696 9.216C13.6165 9.072 13.4267 9 13.2 9C12.9733 9 12.7835 9.072 12.6304 9.216C12.4773 9.36 12.4005 9.538 12.4 9.75C12.3995 9.962 12.4763 10.1402 12.6304 10.2847C12.7845 10.4292 12.9744 10.501 13.2 10.5ZM12.34 6.75H16.2L16.28 6.35625L14.8 4.5H12.9L12.34 6.75Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--delivered { aspect-ratio: 10 / 12; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8.53555 8.48526L5 12L1.46445 8.48526C0.76519 7.79011 0.288992 6.90444 0.0960713 5.94025C-0.0968497 4.97606 0.00217047 3.97664 0.38061 3.0684C0.75905 2.16015 1.39991 1.38386 2.22216 0.837687C3.0444 0.291517 4.0111 0 5 0C5.9889 0 6.9556 0.291517 7.77784 0.837687C8.60009 1.38386 9.24095 2.16015 9.61939 3.0684C9.99783 3.97664 10.0969 4.97606 9.90393 5.94025C9.71101 6.90444 9.23481 7.79011 8.53555 8.48526ZM5 7.17966C5.58937 7.17966 6.1546 6.94691 6.57135 6.53262C6.9881 6.11832 7.22222 5.55642 7.22222 4.97052C7.22222 4.38462 6.9881 3.82272 6.57135 3.40842C6.1546 2.99413 5.58937 2.76138 5 2.76138C4.41063 2.76138 3.8454 2.99413 3.42865 3.40842C3.0119 3.82272 2.77778 4.38462 2.77778 4.97052C2.77778 5.55642 3.0119 6.11832 3.42865 6.53262C3.8454 6.94691 4.41063 7.17966 5 7.17966ZM5 6.07509C4.70532 6.07509 4.4227 5.95871 4.21433 5.75157C4.00595 5.54442 3.88889 5.26347 3.88889 4.97052C3.88889 4.67757 4.00595 4.39662 4.21433 4.18947C4.4227 3.98232 4.70532 3.86595 5 3.86595C5.29468 3.86595 5.5773 3.98232 5.78567 4.18947C5.99405 4.39662 6.11111 4.67757 6.11111 4.97052C6.11111 5.26347 5.99405 5.54442 5.78567 5.75157C5.5773 5.95871 5.29468 6.07509 5 6.07509Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--returning { aspect-ratio: 16 / 12; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0.534324 5.20591L2.1239 2.70497C2.24024 2.52337 2.40376 2.37311 2.5988 2.26856C2.79385 2.164 3.01391 2.10865 3.23794 2.1078H4.48594V1.93204C4.48592 1.67821 4.53876 1.42688 4.64144 1.19248C4.74412 0.95808 4.89461 0.745232 5.08426 0.566158C5.46765 0.203797 5.98675 0.0002441 6.52798 4.22331e-05H13.9572C14.3615 -0.00249644 14.7574 0.109469 15.0943 0.32161C15.4312 0.53375 15.6937 0.836413 15.8481 1.19086C15.9503 1.42584 16.002 1.67785 15.9999 1.93204V8.25531C15.9995 8.55228 15.8857 8.83906 15.6795 9.06254C15.4733 9.28602 15.1887 9.43107 14.8785 9.47083C14.8819 9.53436 14.8819 9.59766 14.8785 9.66072C14.8811 9.9601 14.82 10.2569 14.6988 10.5333C14.5775 10.8098 14.3987 11.0601 14.173 11.2694C13.9515 11.4881 13.6864 11.6628 13.393 11.7834C13.0997 11.9039 12.784 11.968 12.4643 11.9718C11.8263 11.9663 11.2159 11.724 10.7639 11.2969C10.3122 10.8705 10.0556 10.2927 10.0495 9.68824C10.0456 9.62995 10.0456 9.57148 10.0495 9.51319H5.94975C5.95356 9.57148 5.95356 9.62995 5.94975 9.68824C5.95249 9.98775 5.89142 10.2847 5.77019 10.5612C5.64896 10.8378 5.47007 11.0883 5.24426 11.2976C5.02259 11.5165 4.75723 11.6913 4.46362 11.8119C4.17002 11.9325 3.85405 11.9964 3.53413 12C2.89611 11.9945 2.28572 11.7523 1.83367 11.3252C1.3823 10.8986 1.12595 10.3208 1.12 9.71648C1.11615 9.65795 1.11615 9.59925 1.12 9.54072H0.557393C0.410602 9.53872 0.270378 9.48267 0.166363 9.3844C0.0623465 9.28614 0.00268936 9.15336 0 9.01413V6.98402C0 6.35579 0.185302 5.74026 0.534324 5.20591ZM11.1717 9.66001C11.1715 9.82137 11.2056 9.98111 11.2719 10.1297C11.3383 10.2783 11.4355 10.4126 11.5579 10.5247C11.8055 10.7479 12.134 10.8723 12.4755 10.8723C12.817 10.8723 13.1455 10.7479 13.3931 10.5247C13.5137 10.4105 13.6093 10.2747 13.6742 10.1252C13.7391 9.97562 13.772 9.81536 13.7711 9.65366C13.7746 9.48669 13.739 9.32107 13.6669 9.16872C13.5687 8.94778 13.3998 8.76142 13.1847 8.63437C12.9647 8.49646 12.7056 8.42553 12.442 8.43107C12.1905 8.43107 11.9449 8.50166 11.7365 8.63437C11.5229 8.76354 11.3548 8.94919 11.2528 9.16872C11.1799 9.32048 11.1412 9.48636 11.1419 9.65366L11.1717 9.66001ZM8.75755 6.14755H12.471C12.6676 6.14737 12.8562 6.0734 12.9955 5.9418C13.1347 5.81021 13.2135 5.63168 13.2145 5.4452C13.2147 5.3527 13.1956 5.26108 13.1583 5.1756C13.121 5.09013 13.0663 5.01249 12.9973 4.94715C12.9283 4.88181 12.8463 4.83006 12.7561 4.79487C12.6659 4.75969 12.5693 4.74177 12.4718 4.74214H8.75755C8.56095 4.74252 8.3725 4.81666 8.23334 4.94839C8.09419 5.08012 8.01564 5.25872 8.01486 5.4452C8.01476 5.53764 8.03392 5.62919 8.07123 5.71458C8.10855 5.79997 8.16329 5.87753 8.2323 5.9428C8.30132 6.00806 8.38325 6.05975 8.47339 6.09489C8.56353 6.13003 8.6601 6.14792 8.75755 6.14755ZM8.75755 3.73062H12.471C12.6676 3.73043 12.8562 3.65647 12.9955 3.52487C13.1347 3.39328 13.2135 3.21474 13.2145 3.02827C13.2146 2.93583 13.1954 2.84428 13.1581 2.75889C13.1208 2.6735 13.066 2.59594 12.997 2.53067C12.928 2.46541 12.8461 2.41372 12.7559 2.37858C12.6658 2.34344 12.5692 2.32554 12.4718 2.32592H8.75755C8.56108 2.32629 8.37274 2.40034 8.23361 2.53191C8.09447 2.66349 8.01584 2.84191 8.01486 3.02827C8.01476 3.12071 8.03392 3.21225 8.07123 3.29765C8.10855 3.38304 8.16329 3.4606 8.2323 3.52586C8.30132 3.59113 8.38325 3.64282 8.47339 3.67795C8.56353 3.71309 8.6601 3.73099 8.75755 3.73062ZM2.25785 9.66001C2.25773 9.82142 2.29194 9.98119 2.35843 10.1298C2.42492 10.2783 2.52233 10.4127 2.64483 10.5247C2.89237 10.7476 3.22069 10.8719 3.56203 10.8719C3.90338 10.8719 4.2317 10.7476 4.47924 10.5247C4.60005 10.4106 4.69575 10.2748 4.76077 10.1252C4.8258 9.9757 4.85886 9.81541 4.85803 9.65366C4.86119 9.39771 4.77482 9.14798 4.61245 8.94354C4.42938 8.71272 4.16668 8.54825 3.86975 8.47978H3.68371C3.6497 8.4721 3.61427 8.4721 3.58027 8.47978H3.43143C3.20594 8.50448 2.99087 8.58425 2.8078 8.71201C2.62399 8.83978 2.48036 9.01201 2.39181 9.21107C2.31813 9.36283 2.28018 9.52872 2.28018 9.6953L2.25785 9.66001Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--returned { aspect-ratio: 1; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M1.125 6C1.125 4.70707 1.63862 3.4671 2.55286 2.55286C3.4671 1.63862 4.70707 1.125 6 1.125C7.29293 1.125 8.53291 1.63862 9.44715 2.55286C10.3614 3.4671 10.875 4.70707 10.875 6C10.875 6.14919 10.9343 6.29226 11.0398 6.39775C11.1452 6.50324 11.2883 6.5625 11.4375 6.5625C11.5867 6.5625 11.7298 6.50324 11.8352 6.39775C11.9407 6.29226 12 6.14919 12 6C12 4.81331 11.6481 3.65328 10.9888 2.66658C10.3295 1.67989 9.39246 0.910851 8.2961 0.456725C7.19974 0.00259969 5.99335 -0.11622 4.82946 0.115291C3.66557 0.346802 2.59648 0.918247 1.75736 1.75736C0.918247 2.59648 0.346802 3.66557 0.115291 4.82946C-0.11622 5.99335 0.00259969 7.19974 0.456725 8.2961C0.910851 9.39246 1.67989 10.3295 2.66658 10.9888C3.65328 11.6481 4.81331 12 6 12C6.14919 12 6.29226 11.9407 6.39775 11.8352C6.50324 11.7298 6.5625 11.5867 6.5625 11.4375C6.5625 11.2883 6.50324 11.1452 6.39775 11.0398C6.29226 10.9343 6.14919 10.875 6 10.875C4.70707 10.875 3.4671 10.3614 2.55286 9.44715C1.63862 8.53291 1.125 7.29293 1.125 6Z'/%3E%3Cpath fill='black' d='M6.50777 9.32026L8.67976 11.4923C8.70599 11.5186 8.73943 11.5365 8.77584 11.5437C8.81226 11.551 8.85001 11.5473 8.88431 11.5331C8.91862 11.5188 8.94792 11.4948 8.96852 11.4639C8.98912 11.433 9.00008 11.3966 9.00001 11.3595V9.75001H11.4375C11.5867 9.75001 11.7298 9.69075 11.8353 9.58526C11.9408 9.47977 12 9.3367 12 9.18751C12 9.03833 11.9408 8.89526 11.8353 8.78977C11.7298 8.68428 11.5867 8.62502 11.4375 8.62502H9.00001V7.01552C9.00008 6.97838 8.98912 6.94207 8.96852 6.91117C8.94792 6.88027 8.91862 6.85619 8.88431 6.84197C8.85001 6.82775 8.81226 6.82404 8.77584 6.8313C8.73943 6.83856 8.70599 6.85648 8.67976 6.88277L6.50777 9.05476C6.4903 9.07218 6.47645 9.09287 6.467 9.11565C6.45755 9.13843 6.45268 9.16285 6.45268 9.18751C6.45268 9.21218 6.45755 9.2366 6.467 9.25938C6.47645 9.28216 6.4903 9.30285 6.50777 9.32026ZM8.46001 5.08502C8.51222 5.03282 8.55362 4.97084 8.58187 4.90264C8.61012 4.83444 8.62467 4.76134 8.62467 4.68752C8.62467 4.61369 8.61012 4.54059 8.58187 4.47239C8.55362 4.40419 8.51222 4.34222 8.46001 4.29002C8.40781 4.23782 8.34584 4.19641 8.27764 4.16816C8.20944 4.13991 8.13634 4.12537 8.06251 4.12537C7.98869 4.12537 7.91559 4.13991 7.84739 4.16816C7.77919 4.19641 7.71722 4.23782 7.66502 4.29002L5.43752 6.51677L4.33502 5.41502C4.28282 5.36282 4.22084 5.32141 4.15264 5.29316C4.08444 5.26491 4.01134 5.25037 3.93752 5.25037C3.86369 5.25037 3.79059 5.26491 3.72239 5.29316C3.65419 5.32141 3.59222 5.36282 3.54002 5.41502C3.48782 5.46722 3.44641 5.52919 3.41816 5.59739C3.38991 5.66559 3.37537 5.73869 3.37537 5.81252C3.37537 5.88634 3.38991 5.95944 3.41816 6.02764C3.44641 6.09584 3.48782 6.15781 3.54002 6.21002L5.04002 7.71002C5.14548 7.81535 5.28845 7.87452 5.43752 7.87452C5.58658 7.87452 5.72955 7.81535 5.83502 7.71002L8.46001 5.08502Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--canceling { aspect-ratio: 11 / 12; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.61188 8.40893V6.29668H7.43837V7.91092L8.78278 8.71804L8.36954 9.46219L6.61188 8.40893ZM9.09134 0.858638L8.26485 0L7.43837 0.858638L6.61188 0L5.7854 0.858638L4.95891 0L4.13243 0.858638L3.30594 0L2.47946 0.858638L1.65297 0L0.826485 0.858638L0 0V11.4485L0.826485 10.5899L1.65297 11.4485L2.47946 10.5899L3.30594 11.4485L4.1765 10.5441C4.25364 10.6528 4.3418 10.7501 4.43547 10.8475C5.15833 11.5872 6.13263 12.0013 7.14729 12C8.16196 11.9987 9.13527 11.5821 9.85636 10.8405C10.5775 10.0989 10.9882 9.09196 10.9998 8.03789C11.0113 6.98382 10.6225 5.96748 9.91782 5.20907V0L9.09134 0.858638ZM4.46302 5.15183C4.13243 5.47811 3.87346 5.86736 3.6751 6.29668H1.65297V5.15183H4.46302ZM3.34451 7.44153C3.30594 7.63043 3.30594 7.81933 3.30594 8.01396C3.30594 8.20858 3.30594 8.39748 3.34451 8.58638H1.65297V7.44153H3.34451ZM8.26485 4.00698H1.65297V2.86213H8.26485V4.00698ZM9.83517 8.01396C9.83517 8.38031 9.76905 8.74094 9.64233 9.07867C9.49907 9.41067 9.30071 9.73123 9.05277 9.97737C8.81584 10.235 8.50729 10.441 8.18771 10.5899C7.86263 10.7215 7.51551 10.7902 7.16287 10.7902C5.68622 10.7902 4.49057 9.54806 4.49057 8.01396C4.49057 7.27553 4.77157 6.58289 5.27298 6.05054C5.7854 5.52963 6.45209 5.23769 7.16287 5.23769C8.63401 5.23769 9.83517 6.47986 9.83517 8.01396Z'/%3E%3C/svg%3E"); } .qnap-order-progression__pill-icon--canceled { aspect-ratio: 11 / 12; --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5.64103 6.20488L9.02564 4.21463V6.43902C9.42051 6.43902 9.81539 6.49756 10.1538 6.67317V3.21951C10.1538 2.98537 10.041 2.80976 9.8718 2.69268L5.41539 0.117073C5.30256 0.0585366 5.18974 0 5.07692 0C4.9641 0 4.85128 0.0585366 4.73846 0.117073L0.282051 2.69268C0.112821 2.80976 0 2.98537 0 3.21951V8.4878C0 8.72195 0.112821 8.89756 0.282051 9.01463L4.73846 11.5902C4.85128 11.6488 4.9641 11.7073 5.07692 11.7073C5.18974 11.7073 5.30256 11.6488 5.41539 11.5902L5.92308 11.2976C5.75385 10.9463 5.69744 10.5366 5.64103 10.1268M5.07692 1.2878L8.46154 3.21951L7.33333 3.86341L4.00513 1.87317L5.07692 1.2878ZM4.51282 10.1268L1.12821 8.13658V4.21463L4.51282 6.20488V10.1268ZM5.07692 5.15122L1.69231 3.21951L2.82051 2.51707L6.20513 4.56585L5.07692 5.15122ZM7.84103 7.90244L9.02564 9.13171L10.2103 7.90244L11 8.72195L9.81538 9.95122L11 11.1805L10.2103 12L9.02564 10.7707L7.84103 12L7.05128 11.1805L8.2359 9.95122L7.05128 8.72195L7.84103 7.90244Z'/%3E%3C/svg%3E"); } /* ============================================================ Mobile RWD: keep only current step on the pill, stack meta lines ============================================================ */ @media (max-width: 768px) { .qnap-order-progression__pill-step:not(.qnap-order-progression__pill-step--current) { display: none; } .qnap-order-progression__pill { --fill-min: 7em; --pad: 12px; } .qnap-order-progression__pill-step { font-size: 12px; gap: 4px; } .qnap-order-progression__pill-icon { height: 12px; } .qnap-order-progression__delivery { flex-direction: column; align-items: flex-start; gap: 2px; } .qnap-order-progression__location { flex-direction: column; align-items: flex-start; gap: 8px; } .qnap-order-progression__location-info { flex-direction: column; align-items: flex-start; gap: 2px; } } /* ============================================================ Order detail page: card wrapper around the same pill markup ============================================================ `templates/order/progression-card.phtml` reuses the list-page pill markup verbatim; this card only supplies the panel chrome + heading. ============================================================ */ .qnap-order-progression-card { margin: 0 0 24px; padding: 20px 24px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); } .qnap-order-progression-card__title { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: #111827; } @media (max-width: 768px) { .qnap-order-progression-card { padding: 16px; } }