.batch{grid-template-columns:minmax(0,1fr);grid-template-areas:"head""bar""pile""grid""more";row-gap:24px;display:grid}@media (min-width:760px){.batch{grid-template-columns:128px minmax(0,1fr);grid-template-areas:"head head""bar bar""pile grid"".more";align-items:start;gap:28px 32px}}@media (min-width:980px){.batch{grid-template-columns:170px minmax(0,1fr);column-gap:44px}}.batch-head{grid-area:head;gap:18px;max-width:820px;display:grid}.batch-pile-wrap{grid-area:pile;grid-template-columns:auto minmax(0,1fr);place-items:center start;column-gap:28px;padding-inline:12px 0;display:grid}.batch-pile{z-index:1;aspect-ratio:3/4;width:96px;position:relative}@media (min-width:760px){.batch-pile-wrap{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:22px;padding:12px 0 0}.batch-pile{width:112px}}@media (min-width:980px){.batch-pile{width:150px}}.batch-photo{transition:transform .42s var(--ease-out), opacity .3s linear;background:#6f6456;border-radius:5px;position:absolute;inset:0;overflow:hidden;box-shadow:0 14px 28px -14px #1212128c,0 2px 6px -1px #1212124d}.batch-photo picture{display:contents}.batch-photo img{object-fit:cover;width:100%;height:100%;display:block}.batch-photo[data-p="0"]{z-index:4;transform:rotate(-3deg)}.batch-photo[data-p="1"]{z-index:3;transform:translate(11%,-3%)rotate(6deg)}.batch-photo[data-p="2"]{z-index:2;transform:translate(-12%,-1%)rotate(-10deg)}.batch-photo[data-p="3"]{z-index:1;transform:translate(16%,3%)rotate(13deg)}.batch-photo[data-p=x]{z-index:0;opacity:0;transition:none;transform:translate(16%,3%)rotate(13deg)}.batch-pile-note{color:var(--ink-3);text-align:center;text-wrap:balance;margin:0}.batch-bar{border-bottom:1px solid var(--line);grid-area:bar;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"count zip""progress progress";align-items:center;gap:14px 16px;min-width:0;padding-bottom:18px;display:grid}.batch-count{color:var(--ink);white-space:nowrap;grid-area:count;align-items:center;gap:10px;margin:0;font-weight:600;display:flex}.batch-dot{background:var(--gaffer);border-radius:50%;flex:none;width:8px;height:8px;box-shadow:0 0 0 3px #1212121f}.batch[data-run=run] .batch-dot{animation:.7s steps(2,jump-none) infinite batch-blink}@keyframes batch-blink{50%{opacity:.25}}.batch-progress{background:var(--line);border-radius:2px;grid-area:progress;width:100%;height:3px;overflow:hidden}.batch-progress i{background:var(--gaffer);transform-origin:0;height:100%;transition:transform .32s var(--ease-out);display:block}.batch-zip{white-space:nowrap;pointer-events:none;grid-area:zip;transition:opacity .3s linear}.batch-zip:not([data-ready]){opacity:.45}@media (max-width:479px){.batch-zip{--h:44px;padding:0 18px;font-size:15px}}@media (min-width:980px){.batch-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"count progress zip";column-gap:28px}}.batch-more{grid-area:more;margin:0}.batch-grid{z-index:2;grid-area:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid;position:relative}@media (min-width:760px){.batch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}@media (min-width:1100px){.batch-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}}.batch-cell{position:relative}.batch-cell[data-state=fly]{z-index:1}.batch-cell:before{content:"";border:1.5px dashed var(--line-strong);opacity:0;border-radius:4px;transition:opacity .2s linear;position:absolute;inset:0}.batch:not([data-run=done]) .batch-cell:not([data-state=done]):before{opacity:1}.batch-fly{transition:transform .62s cubic-bezier(.5,0,.2,1)}.batch-card{box-shadow:var(--shadow-print);border-radius:4px;transition:transform .62s cubic-bezier(.25,.85,.3,1),box-shadow .42s linear}.batch-cell[data-state=fly] .batch-card{box-shadow:0 30px 50px -22px #04210d8c,0 6px 14px -4px #04210d4d}.batch:not([data-run=done]) .batch-cell:not([data-state]) .batch-fly{opacity:0}.batch-card picture{display:contents}.batch-card img{position:absolute;inset:0}.batch-cover{transition:opacity .36s linear, filter .52s var(--ease-out);position:absolute;inset:0}.batch-cover .cv{transition:opacity .26s linear .2s, transform .48s var(--ease-out) .2s}.batch:not([data-run=done]) .batch-cell:not([data-state=done]) .batch-cover{opacity:0;filter:blur(10px)}.batch:not([data-run=done]) .batch-cell:not([data-state=done]) .batch-cover .cv{opacity:0;transform:translateY(-4%)}@media (prefers-reduced-motion:reduce){.batch-photo,.batch-fly,.batch-card,.batch-cover,.batch-cover .cv,.batch-progress i{transition:none}.batch[data-run=run] .batch-dot{animation:none}}
