#purchase .step-label,#shipping .step-label { min-height:35px; border-radius:6px; padding:6px 11px; font-size:12px; }
.motion-ready .batch-demo { opacity:1!important; filter:none!important; transform:none!important; translate:none!important; }
.batch-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; padding:12px; border:1px solid #e3eaf5; border-radius:7px; background:#f8faff; color:#71839e; font-size:11px; }
.batch-bar b { font-weight:550; color:#304e79; }
.batch-action { padding:6px 10px; border-radius:5px; color:#3565e9; background:#eaf0ff; font-size:11px; font-weight:500; white-space:nowrap; transition:background .25s,color .25s; }
.batch-demo[data-batch-phase="2"] .batch-action { color:#188664; background:#e8f7ef; }
.batch-demo[data-batch-phase="2"] .batch-action:before { content:'✓'; margin-right:5px; }
.batch-routes { display:flex; flex-direction:column; gap:11px; }
.batch-route { --route-gap:10px; display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:var(--route-gap); align-items:center; }
.route-source,.warehouse-target { display:flex; align-items:center; gap:10px; min-width:0; min-height:82px; padding:12px; border:1px solid #e2eaf4; border-radius:8px; background:#fff; }
.batch-product-photo { display:block; width:42px; height:42px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.batch-product-name { display:block; color:#263f65; font-size:13px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.batch-product-meta { display:block; margin-top:3px; color:#8797ae; font-size:10px; line-height:1.5; }
.route-track { position:relative; height:1px; background:#dce6f5; }
.route-track:after { content:''; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #b5c6e1; border-right:1px solid #b5c6e1; transform:rotate(45deg); }
.route-packet { position:absolute; z-index:2; top:-3px; left:0; width:7px; height:7px; background:#3d6dff; border-radius:2px; opacity:0; }
.batch-demo[data-batch-phase="1"] .route-packet { animation:warehouse-packet 1.05s cubic-bezier(.3,.65,.25,1) both; }
.batch-route:nth-child(2) .route-packet { animation-delay:.1s; }
.batch-route:nth-child(3) .route-packet { animation-delay:.2s; }
.warehouse-target { transition:border-color .3s,background .3s; }
.warehouse-code { display:grid; place-items:center; width:29px; height:29px; border:1px solid #dce6f4; border-radius:5px; flex-shrink:0; color:#7890b4; background:#f4f7fc; font-size:12px; font-weight:550; }
.warehouse-name { display:block; color:#3c5273; font-size:13px; font-weight:500; line-height:1.5; }
.batch-status { display:inline-block; margin-top:3px; padding:2px 5px; border:1px solid #e3e9f2; border-radius:4px; background:#f6f8fb; color:#8b99ac; font-size:10px; line-height:1.5; white-space:nowrap; }
.batch-demo[data-batch-phase="1"] .warehouse-target { border-color:#b9cdfb; background:#f7faff; }
.batch-demo[data-batch-phase="1"] .batch-status { color:#4771da; border-color:#dbe6ff; background:#edf3ff; }
.batch-demo[data-batch-phase="2"] .warehouse-target { border-color:#cce7da; background:#f6fcf8; }
.batch-demo[data-batch-phase="2"] .warehouse-code { color:#218766; border-color:#d6ece1; background:#eaf7f0; }
.batch-demo[data-batch-phase="2"] .batch-status { color:#208666; border-color:#d7ece1; background:#eaf7ef; }
.batch-stages { display:flex; align-items:center; justify-content:center; gap:7px; padding-top:18px; margin-top:20px; border-top:1px solid #edf1f7; }
.batch-stages span { padding:5px 8px; border-radius:4px; background:#f5f7fb; color:#91a0b5; font-size:10px; line-height:1.5; }
.batch-stages i { font-size:10px; font-style:normal; color:#bac8dd; }
.batch-stages .is-active { background:#eaf0ff; color:#3b66dd; }
.batch-stages .is-done { color:#278767; background:#edf8f1; }
.batch-caption { min-height:18px; margin-top:12px; text-align:center; color:#8293ad; font-size:10px; line-height:1.8; }
.batch-demo[data-batch-phase="2"] .batch-caption { color:#278769; }
.batch-shipping-table { table-layout:fixed; }
.batch-shipping-table .shipment-product { width:43%; }
.batch-shipping-table .shipment-waybill { width:32%; }
.batch-shipping-table .shipment-status { width:25%; }
.batch-demo .batch-shipping-table th { padding:11px 8px; font-size:11px; }
.batch-demo .batch-shipping-table td { height:91px; padding:13px 8px; }
.shipment-product-cell { display:flex; align-items:center; gap:8px; min-width:0; }
.batch-waybill { display:inline-block; min-height:17px; color:#56749c; font-size:11px; line-height:1.5; white-space:nowrap; font-variant-numeric:tabular-nums; }
.batch-demo[data-batch-phase="1"] .batch-waybill { animation:waybill-reveal .7s steps(8,end) both; }
.batch-shipping-table tr:nth-child(2) .batch-waybill { animation-delay:.1s; }
.batch-shipping-table tr:nth-child(3) .batch-waybill { animation-delay:.2s; }
.batch-shipping-table .batch-status { margin:0; padding:4px 6px; font-size:10px; }
@keyframes warehouse-packet { 0% { left:0; opacity:0; } 12% { opacity:1; } 85% { opacity:1; } 100% { left:calc(100% + var(--route-gap)); opacity:0; } }
@keyframes waybill-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
.motion-paused .batch-demo * { animation:none!important; }
@media(max-width:600px) {
  .batch-bar { padding:10px 8px; gap:5px; font-size:10px; margin-bottom:14px; }
  .batch-action { font-size:9px; padding:5px 6px; }
  .batch-route { --route-gap:6px; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }
  .route-source,.warehouse-target { min-height:86px; padding:9px 6px; gap:6px; border-radius:6px; }
  .batch-product-photo { width:30px; height:30px; }
  .batch-product-name,.warehouse-name { font-size:11px; }
  .batch-product-meta { font-size:9px; }
  .warehouse-code { width:22px; height:24px; border-radius:4px; font-size:10px; }
  .batch-status { font-size:9px; padding:2px 4px; }
  .batch-stages { gap:4px; padding-top:14px; margin-top:16px; }
  .batch-stages span { padding:4px 5px; font-size:9px; }
  .batch-caption { font-size:9px; min-height:32px; }
  .batch-demo .batch-shipping-table th { padding:9px 5px; font-size:10px; }
  .batch-demo .batch-shipping-table td { height:91px; padding:11px 5px; }
  .shipment-product-cell { gap:5px; }
  .shipment-product-cell .batch-product-photo { width:28px; height:28px; }
  .batch-waybill { font-size:9px; }
  .batch-shipping-table .batch-status { font-size:9px; padding:3px; }
}
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion-opt-in]) .batch-demo * { animation:none!important; transition:none!important; }
}