/* «Збірка» — дошка збірки (public/assembly.js) і «Продажі → Погодження» (public/approve.js); макети — docs/plans/zbirka-doshka-maket.jpg, zbirka-pogodzhennia-maket.jpg (12.11.2026).
   Лише класи .zb-, лише під html.v8. Дошки — спільні .sm-kan і .sm-col (стовпчики на висоту найдовшого): на телефоні стовпчики один під одним,
   з 900 px — п'ять поруч у збірці й три в «Погодженні» (.sm-kan.k3 з public/app.css і v8.css, своїх правил розкладки немає).
   Старий Safari (iPad на iPadOS 14, старі iPhone): без gap у flex — відступи полями; inset — чотирма сторонами;
   sticky — з -webkit-sticky перед собою; пропорції фото — через padding-top, не aspect-ratio. Кнопки — варіант 1: головна — заливка, на картці — м'який голубий, корал — лише стани. */
html.v8 .zb { --sm-ink: #1E2A4A; --sm-ink2: #586B82; --sm-mute: #8A9BB3; --sm-well: #E4E8EE; --sm-blue: #1B6FD6; --sm-coral: #F26B52; --sm-shadow: 0 8px 24px rgba(30, 42, 74, .08); display: block; min-width: 0; color: var(--ink); }
html.v8 .zb > * + * { margin-top: 12px; }
html.v8 .zb > .zb-flash-slot:empty { display: none; }
html.v8 .zb.zb-picking { padding-bottom: 96px; }
html.v8 .zb.zb-screen { max-width: 860px; }
html.v8 .zb-i { flex: none; display: block; }

/* ---------- заголовок: «Виробництво · Збірка» і підсумок дня ---------- */
html.v8 .zb-head { display: block; }
html.v8 .zb-eyebrow { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
html.v8 .zb-hrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
html.v8 .zb-hrow > .zb-h { display: flex; align-items: center; margin: 0 12px 0 0; }
html.v8 .zb-sum { margin: 6px 0; padding: 8px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); font-size: 13px; line-height: 1.4; color: var(--ink-2); }
html.v8 .zb-sum b { font-weight: 700; color: var(--ink); }
html.v8 .zb-lead { margin: 6px 0 0; max-width: 640px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
html.v8 .zb-test { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--v8-well); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
html.v8 .zb-status { margin: 0; padding: 12px 4px; font-size: 13px; color: var(--ink-2); }
html.v8 .zb-flash { margin: 0; padding: 10px 14px; border-radius: 14px; background: #D9F5EB; color: #0A6B4A; font-size: 13px; line-height: 1.45; }
html.v8 .zb-errbox p { margin: 0 0 8px; }
html.v8 .zb-cap { font-size: 12px; line-height: 1.45; color: var(--ink-2); }
html.v8 p.zb-cap { margin: 0; }
html.v8 .zb-bad { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--bad); }
html.v8 .zb-link { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html.v8 .zb-link[disabled] { opacity: .5; cursor: default; }
html.v8 .zb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- дошка: на телефоні — стовпчики один під одним; з 900 px — п'ять поруч, на висоту найдовшого (проміжок — gap з .sm-kan) ---------- */
html.v8 .sm-kan.zb-board { display: block; margin: 0; }
html.v8 .sm-kan.zb-board > .zb-col { margin: 0; }
html.v8 .sm-kan.zb-board > .zb-col + .zb-col { margin-top: 12px; }
html.v8 .zb-col { transition: box-shadow .12s; }
html.v8 .zb-col.over { box-shadow: inset 0 0 0 2px var(--accent); }
html.v8 .zb-col > .zb-foot { margin: auto 0 0; }
html.v8 .zb-foot { padding: 8px 4px 2px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
html.v8 p.zb-foot { margin: 0; }
html.v8 .zb-shiphead { display: flex; flex-wrap: wrap; align-items: center; }
html.v8 .zb-shiphead > .zb-cap { margin-left: 8px; color: var(--ink-3); }

/* ---------- картка ---------- */
html.v8 .zb-card { position: relative; }
html.v8 .zb-card.can { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
html.v8 .zb-card.dim { opacity: .55; }
html.v8 .zb-card.zb-src { opacity: .35; }
html.v8 .zb-card.zb-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; box-shadow: 0 14px 34px rgba(30, 42, 74, .28); will-change: transform; }
html.v8 body.zb-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
html.v8 .zb-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; min-width: 0; }
html.v8 .zb-open { flex: 0 1 auto; min-width: 0; margin: 0 8px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-card.can .zb-open { cursor: grab; }
html.v8 .zb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
html.v8 .zb-due { flex: none; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
html.v8 .zb-due.late, html.v8 .zb-late { color: var(--v8-coral-ink); font-weight: 600; }
html.v8 .zb-what { font-size: 13.5px; line-height: 1.35; overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-tone { display: flex; align-items: flex-start; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
html.v8 .zb-tone > span:last-child { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
/* кружечок тону: справжній шматочок зразка (public/img/tones/), поки вантажиться — колір із бібліотеки; без тону — пунктир */
html.v8 .zb-dot { position: relative; display: inline-block; flex: none; box-sizing: border-box; width: 14px; height: 14px; margin: 1px 6px 0 0; border-radius: 50%; overflow: hidden; background: #E4E8EE; border: 1px solid rgba(30, 42, 74, .16); }
html.v8 .zb-dot img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.v8 .zb-dot.none { background: #fff; border: 1.5px dashed rgba(30, 42, 74, .3); }
html.v8 .zb-meta { font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-meta.zb-note { color: var(--ink-3); }
html.v8 .sm-note.zb-change { overflow-wrap: break-word; word-wrap: break-word; }
/* позначки: прострочено, експрес, доплата — стани, тож корал і червоний тут доречні; разом із… — сіра */
html.v8 .zb-pills { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; }
html.v8 .sm-pill.zb-pill { flex: 0 1 auto; max-width: 100%; height: auto; min-height: 20px; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 10px; background: var(--v8-well); color: var(--ink-2); font-size: 10.5px; line-height: 1.25; white-space: normal; }
html.v8 .sm-pill.zb-pill.red { background: #FBDAD3; color: #C8392A; }
html.v8 .sm-pill.zb-pill.coral { background: var(--v8-coral); color: #fff; }
html.v8 .sm-pill.zb-pill.blue { background: #DCEBFC; color: #1B6FD6; }
html.v8 .sm-pill.zb-pill.yellow { background: #FFF1B3; color: #7A5E00; }
html.v8 .zb-who { display: flex; align-items: center; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
html.v8 .zb-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 10px; background: var(--accent-wash); color: var(--accent-strong); font-size: 10.5px; font-weight: 700; }
html.v8 .sm-btn.zb-shoot { width: 100%; }
html.v8 .zb-cnt { font-size: 12px; line-height: 1.35; color: var(--ink-3); text-align: center; }
/* «Збираємо»: фото просто на картці — мініатюри по три в ряд (квадрати через padding-top), «+N», «Готово — на погодження» на всю ширину */
html.v8 .zb-mini { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; }
html.v8 .zb-mini-t { position: relative; display: block; flex: 0 0 auto; width: calc(33.333% - 4px); margin: 0 4px 4px 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--v8-well); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-mini-t::before { content: ""; display: block; padding-top: 100%; }
html.v8 .zb-mini-t img, html.v8 .zb-mini-t .zb-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
html.v8 .zb-mini-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* мініатюра з «×» (Микола, 11.11.2026): обгортка тримає місце мініатюри, хрестик — у куті; «прибрати?» — на всю ширину мініатюри */
html.v8 .zb-mini-w { position: relative; display: block; flex: 0 0 auto; width: calc(33.333% - 4px); margin: 0 4px 4px 0; }
html.v8 .zb-mini-w > .zb-mini-t { width: 100%; margin: 0; }
html.v8 .zb-mini-x { position: absolute; top: 3px; right: 3px; z-index: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 24px; height: 24px; margin: 0; padding: 0 5px; border: 0; border-radius: 12px; background: rgba(30, 42, 74, .62); color: #fff; font: inherit; font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-mini-x.sure { left: 3px; background: #fff; color: var(--v8-danger); box-shadow: inset 0 0 0 1.5px var(--v8-danger); }
html.v8 .zb-mini-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html.v8 .zb-mini-more { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 28, 48, .5); color: #fff; font-size: 13px; font-weight: 700; }
html.v8 .zb-card .zb-gal { min-height: 26px; font-size: 12.5px; }
html.v8 .sm-btn.zb-readyc { width: 100%; }
html.v8 .sm-btn.zb-step { align-self: flex-start; }
/* «Погодження» — фото згори на всю ширину картки; «До відправки» — мініатюра ліворуч */
html.v8 .zb-cover { position: relative; display: block; height: 0; padding-top: 56%; margin: -12px -14px 2px; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--v8-well); }
html.v8 .zb-cover img, html.v8 .zb-cover .zb-noimg, html.v8 .zb-thumb img, html.v8 .zb-thumb .zb-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
html.v8 .zb-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
html.v8 img.zb-broken { visibility: hidden; }
html.v8 .zb-card.has-thumb { padding-left: 68px; min-height: 68px; }
html.v8 .zb-card > .zb-thumb { position: absolute; top: 12px; left: 12px; display: block; width: 44px; height: 44px; margin: 0; border-radius: 10px; overflow: hidden; background: var(--v8-well); }
/* «Відправили…»: картки обирають дотиком — галочка праворуч */
html.v8 .zb-card.zb-pickable { cursor: pointer; padding-right: 44px; }
html.v8 .zb-card > .zb-chk { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; margin: 0; border-radius: 12px; border: 2px solid #C5CEDA; background: #fff; color: transparent; }
html.v8 .zb-card.on { box-shadow: inset 0 0 0 2px var(--accent-strong), var(--shadow); }
html.v8 .zb-card.on > .zb-chk { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }
/* «До відправки» — групи за способом */
html.v8 .zb-grpbox { display: block; }
html.v8 .zb-grpbox > * + * { margin-top: 8px; }
html.v8 .zb-grp { display: flex; align-items: center; min-height: 24px; padding: 2px 4px 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
html.v8 .zb-grp-n { margin-left: 6px; color: var(--ink-3); }
html.v8 .zb-grp-all { margin-left: auto; min-height: 24px; font-size: 12px; }
html.v8 .sm-btn.zb-more { width: 100%; }

/* ---------- «Відправили · N»: над панеллю знизу (телефон, планшет), на ПК — липкий унизу робочої частини ---------- */
html.v8 .zb-bar-slot { position: fixed; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 45; max-width: 720px; margin: 0 auto; }
html.v8 body.v8-focus .zb-bar-slot { bottom: calc(16px + env(safe-area-inset-bottom)); }
html.v8 .zb-bar { display: flex; align-items: center; box-sizing: border-box; min-height: 64px; padding: 10px 10px 10px 16px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(30, 42, 74, .22); }
html.v8 .zb-bar-t { flex: 1 1 auto; min-width: 0; }
html.v8 .zb-bar-t b { display: block; font-size: 15px; font-weight: 700; }
html.v8 .zb-bar-t span { display: block; margin-top: 1px; overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
html.v8 .zb-clr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 8px; padding: 0; border: 0; border-radius: 18px; background: var(--v8-well); color: var(--ink-2); cursor: pointer; }
html.v8 .zb-clr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.v8 .sm-btn.zb-send { flex: none; height: 46px; padding: 0 18px; border-radius: 14px; font-size: 15px; }

/* ---------- картка відкрита: фото, кроки, відправка ---------- */
html.v8 .zb-dh { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
html.v8 .zb-back { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 0 -8px; padding: 0 8px 0 2px; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
html.v8 .zb-back .zb-i { margin-right: 2px; }
html.v8 .zb-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
html.v8 .zb-colpill { padding: 3px 10px; border-radius: 12px; background: var(--accent-wash); color: var(--accent-strong); font-size: 12px; font-weight: 600; }
html.v8 .zb-dhead > * + * { margin-top: 4px; }
html.v8 .zb-dtitle { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-dsub { display: flex; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
html.v8 .zb-dsub .zb-dot { width: 18px; height: 18px; margin: 1px 8px 0 0; }
html.v8 .zb-dmeta { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
html.v8 .zb-money { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
html.v8 .zb-sec { display: block; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
html.v8 .zb-sec > * + * { margin-top: 10px; }
html.v8 .zb-sec h3 { margin: 0; font-size: 15px; font-weight: 700; }
html.v8 .zb-sech { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
html.v8 .zb-sech > .zb-cap { margin-left: 8px; color: var(--ink-3); }
/* фото: квадратні плитки, «×» — праворуч угорі; перший дотик питає «Прибрати?» (червоний контур), другий прибирає */
html.v8 .zb-photos { display: flex; flex-wrap: wrap; margin: 0 -8px -8px 0; }
html.v8 .zb-ph { flex: 0 0 auto; width: calc(50% - 8px); margin: 0 8px 8px 0; }
html.v8 .zb-ar { position: relative; height: 0; padding-top: 100%; border-radius: 14px; overflow: hidden; background: var(--v8-well); }
html.v8 .zb-ph-b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-ph-b img, html.v8 .zb-ph-b .zb-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
html.v8 .zb-ph-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.v8 .zb-x { position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 30px; height: 30px; margin: 0; padding: 0 8px; border: 0; border-radius: 15px; background: rgba(30, 42, 74, .55); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
html.v8 .zb-x.sure { background: #fff; color: var(--v8-danger); box-shadow: inset 0 0 0 1.5px var(--v8-danger); }
html.v8 .zb-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html.v8 .zb-up { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent-strong); }
html.v8 .sm-btn.zb-wide { display: flex; width: 100%; height: auto; min-height: 48px; padding: 8px 16px; border-radius: 14px; font-size: 15px; white-space: normal; line-height: 1.25; }
html.v8 .zb-gal { display: flex; justify-content: center; width: 100%; }
html.v8 .zb-acts > * + * { margin-top: 10px; }
html.v8 .zb-kv { display: block; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
html.v8 .zb-kv-r { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; line-height: 1.4; }
html.v8 .zb-kv-r + .zb-kv-r { border-top: 1px solid var(--line); }
html.v8 .zb-kv-r > span { flex: none; margin-right: 12px; color: var(--ink-2); }
html.v8 .zb-kv-r > b { min-width: 0; font-weight: 600; text-align: right; }

/* ---------- фото на весь екран ---------- */
html.v8 .zb-view { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; background: rgba(10, 14, 24, .95); color: #fff; }
html.v8 .zb-v-stage { position: absolute; top: 56px; right: 0; bottom: 24px; left: 0; display: flex; align-items: center; justify-content: center; }
html.v8 .zb-v-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
html.v8 .zb-v-top { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 18px; }
html.v8 .zb-v-n { font-size: 14px; font-weight: 600; }
html.v8 .zb-v-x, html.v8 .zb-v-nav { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
html.v8 .zb-v-x { width: 40px; height: 40px; border-radius: 20px; }
html.v8 .zb-v-nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 22px; }
html.v8 .zb-v-nav.zb-prev { left: 10px; }
html.v8 .zb-v-nav.zb-next { right: 10px; }
html.v8 .zb-v-x:focus-visible, html.v8 .zb-v-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- значки способу доставки (public/shipmarks.js; Микола, 12.11.2026): на картках «очікує упаковки» й «запаковане» — у правому верхньому куті,
   біля назви групи — маленький; у «Погодженні» — позначка «[значок] Нова Пошта» кольором способу. Це позначки, не кнопки ---------- */
html.v8 .zb-card.has-mark { padding-right: 50px; }
html.v8 .zb-card > .zb-mark { position: absolute; top: 10px; right: 10px; display: block; width: 30px; height: 30px; margin: 0; }
html.v8 .zb-mark > svg, html.v8 .zb-grp-i > svg { display: block; width: 100%; height: 100%; }
html.v8 .zb-grp-i { flex: none; display: block; width: 18px; height: 18px; margin-right: 7px; }
html.v8 .zb-mk { display: inline-flex; align-items: center; height: 22px; padding: 0 8px 0 3px; border-radius: 11px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
html.v8 .zb-mk > svg { flex: none; display: block; width: 16px; height: 16px; margin-right: 5px; }
html.v8 .zb-mk-np { background: #FCE3E0; color: #DA291C; }
html.v8 .zb-mk-carrier { background: #DCEBFC; color: #1B6FD6; }
html.v8 .zb-mk-pickup { background: #F6E7D8; color: #A0612A; }

/* ---------- «Погодження» менеджерки: дошка з трьох стовпчиків (12.11.2026) — спільні .sm-kan.k3 і .sm-col; картка — фото ліворуч, текст праворуч (макет) ---------- */
html.v8 .zb-apcol > .zb-foot { margin: auto 0 0; }
html.v8 .zb-ap { position: relative; display: flex; align-items: flex-start; box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-ap-cov { position: relative; display: block; flex: 0 0 92px; width: 92px; height: 104px; margin-right: 10px; border-radius: 10px; overflow: hidden; background: var(--v8-well); }
html.v8 .zb-ap-cov img, html.v8 .zb-ap-cov .zb-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
html.v8 .zb-ap-n { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 8px; background: rgba(30, 42, 74, .66); color: #fff; font-size: 10px; font-weight: 600; line-height: 1.5; }
html.v8 .zb-ap-t { flex: 1 1 auto; min-width: 0; display: block; padding-top: 1px; }
html.v8 .zb-ap-t > * + * { margin-top: 4px; }
html.v8 .zb-ap-top { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; margin-bottom: -4px; }
html.v8 .zb-ap-top > * { margin: 0 6px 4px 0; }
html.v8 .zb-ap-h { flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .zb-ap-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
html.v8 .zb-ap-w { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-ap-t > .zb-ap-s { display: flex; align-items: flex-start; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
html.v8 .zb-ap-s > span:last-child { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-ap-m { font-size: 12px; line-height: 1.35; color: var(--ink-2); overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-ap-m b, html.v8 .zb-ap-sent b { font-weight: 600; color: var(--ink); }
/* «скинула Тетяна · 13:40» — блакитний рядок з кружечком-ініціалом */
html.v8 .zb-ap-sent { display: flex; align-items: center; padding: 4px 7px; border-radius: 9px; background: #F1F6FE; font-size: 12px; line-height: 1.3; color: var(--ink); }
html.v8 .zb-ap-sent > .zb-av { width: 18px; height: 18px; font-size: 9.5px; }
html.v8 .zb-ap-sent > span:last-child { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
html.v8 .zb-ap-sent.zb-dsent { display: inline-flex; font-size: 13px; }
html.v8 .zb-nw { white-space: nowrap; }
html.v8 .zb-ap-pills { display: flex; flex-wrap: wrap; margin-right: -4px; margin-bottom: -4px; }
html.v8 .sm-pill.zb-pill.zb-done { background: #DDF3E4; color: #1F7A3E; }
html.v8 .sm-btn.zb-aplink { margin-top: 6px; }
html.v8 .zb-ap > .zb-ap-t > .zb-bad { font-size: 12px; }

/* ---------- «Погодження»: замовлення — фото (перше велике, ще два праворуч), посилання, спосіб відправки ---------- */
html.v8 .zb-col2 { position: relative; height: 0; padding-top: 62%; }
html.v8 .zb-col2.zb-n1 { padding-top: 75%; }
html.v8 .zb-cl { position: absolute; display: block; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--v8-well); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-cl img, html.v8 .zb-cl .zb-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
html.v8 .zb-cl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.v8 .zb-cl-big { top: 0; bottom: 0; left: 0; width: 61%; }
html.v8 .zb-n1 .zb-cl-big { width: 100%; }
html.v8 .zb-cl-a { top: 0; right: 0; width: calc(39% - 8px); height: calc(50% - 4px); }
html.v8 .zb-n2 .zb-cl-a { height: 100%; }
html.v8 .zb-cl-b { right: 0; bottom: 0; width: calc(39% - 8px); height: calc(50% - 4px); }
html.v8 .zb-cl-more { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 28, 48, .5); color: #fff; font-size: 20px; font-weight: 700; }
html.v8 .zb-url { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; -webkit-user-select: all; user-select: all; }
html.v8 .zb-tmp { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; }
html.v8 .zb-urlrow { display: flex; align-items: center; justify-content: space-between; }
html.v8 .zb-urlrow > .zb-cap { flex: 1 1 0%; min-width: 0; margin-right: 10px; color: var(--ink-3); }
html.v8 .zb-copy { flex: none; min-height: 40px; margin: 0; padding: 0 14px; border: 0; border-radius: 12px; background: var(--accent-wash); color: var(--accent-strong); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
html.v8 .zb-copy.is-done { background: var(--good); color: #fff; }
html.v8 .zb-in { display: block; width: 100%; }
html.v8 .zb-methods { display: flex; margin-right: -8px; }
html.v8 .sm-btn.zb-method { flex: 1 1 0%; min-width: 0; height: auto; min-height: 48px; margin: 0 8px 0 0; padding: 6px 8px; border-radius: 14px; font-size: 14px; line-height: 1.2; white-space: normal; }
html.v8 .zb-btns { display: flex; flex-wrap: wrap; }
html.v8 .zb-btns > * + * { margin-left: 8px; }
html.v8 .zb-wantchange { display: flex; justify-content: center; width: 100%; min-height: 40px; font-size: 14px; }
/* «Скинула клієнту» — тиха кнопка під посиланням; «Як погоджено» — рядки без власної картки */
html.v8 .zb-sentsec { display: flex; flex-wrap: wrap; align-items: center; }
html.v8 .zb-sentsec > .zb-cap { margin-left: 8px; color: var(--ink-3); }
html.v8 .zb-oksec > .zb-kv-r + .zb-kv-r { margin-top: 0; }
html.v8 .zb-kv-mk { display: inline-flex; align-items: center; }
html.v8 .zb-kv-mk > svg { flex: none; display: block; margin-right: 6px; }
html.v8 .zb-flash.zb-flash-bad { background: var(--v8-danger-soft); color: #C8392A; font-weight: 600; }

/* ---------- «Прибрати з дошки» (дошка збірки й «Погодження»): тихе червоне посилання → три причини, коментар, кнопка з червоним контуром ---------- */
html.v8 .zb-link.zb-rm { display: flex; justify-content: center; width: 100%; min-height: 40px; color: var(--v8-danger); font-size: 13px; }
html.v8 .zb-link.zb-rmno { display: flex; justify-content: center; width: 100%; color: var(--ink-2); }
html.v8 .zb-opts > .zb-opt + .zb-opt { margin-top: 8px; }
html.v8 .zb-opt { display: flex; align-items: flex-start; box-sizing: border-box; width: 100%; margin: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.v8 .zb-opt.on { border-color: var(--accent-strong); background: #F4F8FE; }
html.v8 .zb-opt[disabled] { opacity: .6; cursor: default; }
html.v8 .zb-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.v8 .zb-rad { flex: none; box-sizing: border-box; width: 18px; height: 18px; margin: 1px 10px 0 0; border-radius: 9px; border: 2px solid #9AA9BE; background: #fff; }
html.v8 .zb-opt.on .zb-rad { border: 5px solid var(--accent-strong); }
html.v8 .zb-opt-t { flex: 1 1 auto; min-width: 0; }
html.v8 .zb-opt-t > b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
html.v8 .zb-opt-c { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
html.v8 .sm-btn.zb-danger { background: #fff; color: var(--v8-danger); box-shadow: inset 0 0 0 1.5px var(--v8-danger); }

/* ---------- наведення — лише там, де є миша (на телефоні «залипає» після дотику) ---------- */
@media (hover: hover) {
  html.v8 .zb-ap:hover { box-shadow: 0 10px 28px rgba(30, 42, 74, .14); }
  html.v8 .zb-copy:not(.is-done):hover { background: var(--v8-act-soft-hover); }
  html.v8 .zb-link:not([disabled]):hover, html.v8 .zb-back:hover { text-decoration: underline; }
  html.v8 .zb-v-x:hover, html.v8 .zb-v-nav:hover { background: rgba(255, 255, 255, .26); }
  html.v8 .zb-clr:hover { background: #DADFE6; }
  html.v8 .sm-btn.zb-danger:not([disabled]):hover { background: var(--v8-danger-soft); }
  html.v8 .zb-opt:not([disabled]):not(.on):hover { border-color: rgba(30, 42, 74, .26); }
}

/* ---------- ширше: планшет і ПК ---------- */
@media (min-width: 600px) {
  html.v8 .zb-ph { width: calc(33.333% - 8px); }
}
@media (min-width: 768px) {
  html.v8 .zb-v-nav { width: 52px; height: 52px; margin-top: -26px; border-radius: 26px; }
  html.v8 .zb-v-nav.zb-prev { left: 20px; }
  html.v8 .zb-v-nav.zb-next { right: 20px; }
}
@media (min-width: 900px) {
  html.v8 .sm-kan.zb-board { display: flex; align-items: stretch; }
  html.v8 .sm-kan.zb-board > .zb-col { flex: 1 1 0%; min-width: 0; }
  html.v8 .sm-kan.zb-board > .zb-col + .zb-col { margin-top: 0; }
  /* п'ять стовпчиків поруч — вужчі поля, щоб у картці вміщався текст (iPad 1180 px із лівим меню — стовпчик близько 166 px) */
  html.v8 .sm-col.zb-col { min-height: 120px; padding: 10px 8px; }
  html.v8 .sm-col.zb-col > h3 { font-size: 14px; line-height: 1.25; }      /* «Погоджено, очікує упаковки» — у вузькому стовпчику не на три рядки */
  html.v8 .sm-card.zb-card { padding: 10px 11px; }
  html.v8 .zb-card > .zb-cover { padding-top: 66%; margin: -10px -11px 2px; }
  html.v8 .zb-open { font-size: 15px; }
  html.v8 .zb-card.has-thumb { padding-left: 55px; min-height: 58px; }
  html.v8 .zb-card > .zb-thumb { top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 8px; }
  html.v8 .zb-card.zb-pickable { padding-right: 38px; }
  html.v8 .zb-card > .zb-chk { top: 10px; right: 9px; }
  /* значок способу у вузькому стовпчику — трохи менший, текст картки його не заходить */
  html.v8 .sm-card.zb-card.has-mark { padding-right: 44px; }
  html.v8 .zb-card > .zb-mark { top: 9px; right: 9px; width: 28px; height: 28px; }
  /* на планшеті картку тягнуть — кнопки кроку лишаються всередині відкритої картки */
  html.v8 .sm-btn.zb-step { display: none; }
  html.v8 .zb-ph { width: calc(25% - 8px); }
  html.v8 .zb-dtitle { font-size: 26px; }
  html.v8 .zb-col2 { padding-top: 46%; }
  html.v8 .zb-col2.zb-n1 { padding-top: 56%; }
}
/* вузькі стовпчики (до ~200 px: планшет до 1100 px, ПК з лівим меню до 1350 px) — у «До відправки» без мініатюри, інакше слова рвуться посередині */
@media (min-width: 900px) and (max-width: 1099px) {
  html.v8 .sm-card.zb-card.has-thumb { padding-left: 11px; min-height: 0; }
  html.v8 .zb-card > .zb-thumb { display: none; }
}
@media (min-width: 1180px) and (max-width: 1349px) {
  html.v8 body:not(.v8-focus) .sm-card.zb-card.has-thumb { padding-left: 11px; min-height: 0; }
  html.v8 body:not(.v8-focus) .zb-card > .zb-thumb { display: none; }
}
@media (min-width: 1180px) {
  /* ПК: панелі знизу немає — рядок «Відправили» липне до низу робочої частини */
  html.v8 .zb.zb-picking { padding-bottom: 0; }
  html.v8 .zb-bar-slot { position: -webkit-sticky; position: sticky; left: auto; right: auto; bottom: 16px; max-width: none; margin: 16px 0 0; }
  html.v8 .zb-bar { max-width: 760px; margin: 0 auto; }
}
/* телефон: поля від 16 px — інакше iPhone збільшує сторінку, щойно торкнулись поля */
@media (max-width: 767px) {
  html.v8 .zb input.zb-in:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html.v8 .zb textarea.zb-in { font-size: 16px; }
  html.v8 .sm-btn.zb-method { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html.v8 .zb-col { transition: none; }
}