/* Scoped order identity: stable thumbnail, readable full detail title, no action changes. */
.order-product-thumb { display:flex; align-items:center; justify-content:center; width:64px; height:64px; flex:0 0 64px; border:1px solid var(--border,#e5e7eb); border-radius:10px; background:var(--bg,#f9fafb); overflow:hidden; font-size:26px }
.order-product-thumb img { display:block; width:100%; height:100%; object-fit:contain }
.order-product-thumb.image-missing::after { content:'📦' }
.order-product-detail { display:flex; gap:16px; align-items:flex-start; padding:12px 0 18px; border-bottom:1px solid var(--border,#e5e7eb) }
.order-product-detail .order-product-thumb { width:88px; height:88px; flex-basis:88px }
.order-product-copy { flex:1; min-width:0 }
.order-product-name { font-size:16px; font-weight:600; line-height:1.5; overflow-wrap:anywhere }
.order-product-quantity { font-size:14px; line-height:1.5; color:var(--text-secondary,#6b7280); margin-top:8px }
.order-item:has(.order-product-thumb) .order-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; overflow-wrap:anywhere }
/* Compact variants: share / admin-task rows (48px) and picking rows (28px). Same resolver, same fallback. */
.order-thumb-sm .order-product-thumb { width:48px; height:48px; flex-basis:48px; font-size:20px; border-radius:8px }
.order-thumb-xs .order-product-thumb { width:28px; height:28px; flex-basis:28px; font-size:14px; border-radius:6px; border-width:1px }
.order-thumb-sm, .order-thumb-xs { display:inline-flex; flex-shrink:0; vertical-align:middle; margin-right:4px }
@media(max-width:480px) {
  .order-item:has(.order-product-thumb) { display:grid; grid-template-columns:56px minmax(0,1fr); gap:8px 12px }
  .order-item .order-product-thumb { width:56px; height:56px; flex-basis:56px; grid-row:1 / 3 }
  .order-item:has(.order-product-thumb) .order-amount { grid-column:2; white-space:normal; overflow-wrap:anywhere }
  .order-product-detail { gap:12px }
  .order-product-detail .order-product-thumb { width:72px; height:72px; flex-basis:72px }
}
/* Confirm-receipt focus (app-order-confirm-focus.js): the product row moved to the page header, so the folded order details hide their own copy; the header's row is compact and has no divider. */
.order-info-fold .order-product-detail { display:none }
.order-confirm-head .order-product-detail { padding:0 0 4px; border-bottom:0 }
.order-confirm-head .order-product-detail .order-product-thumb { width:56px; height:56px; flex-basis:56px }