/* Інструмент «Штрих-коди й цінники»: плитки по три, перегляд коду, таблиця товарів, цінники й друк.
   Розміри цінника — в міліметрах і змінних; ті самі числа стоять у FORMATS у shtrykh-kody.js (з них рахується
   висота штрихів, щоб усе вмістилося). Цінники й перегляд коду завжди білі з темним текстом — це папір. */

/* форма */
.s-tiles.bc-tiles-3{grid-template-columns:repeat(3,1fr)}
.s-form .s-tile{display:flex;margin:0;font-size:13px}
.s-tile small{display:block;font-weight:500;font-size:11px;opacity:.85}
@media(max-width:560px){.s-form .s-tile{font-size:12px}.s-tile small{display:none}}
.s-form label.bc-check{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);margin:12px 0 0;cursor:pointer}
.s-form label.bc-check input{width:auto;margin:0;flex:none}
.bc-opt{align-self:end;padding-bottom:12px}
@media(max-width:560px){.bc-opt{padding-bottom:0}}

/* результат: перегляд білий у будь-якій темі */
.s-result .s-big.mono{margin:0;font-size:clamp(20px,2.6vw,26px);letter-spacing:.04em;word-break:break-all}
.bc-prev{margin-top:14px;padding:16px;border-radius:14px;border:1px solid var(--line);background:#fff;overflow:hidden}
.bc-prev svg{display:block;max-width:100%;height:auto;margin:0 auto}
.bc-actions{margin:16px 0 0}
.bc-actions .primary{width:auto;margin-top:0;padding:12px 18px}

/* таблиця товарів */
.bc-head,.bc-item{display:grid;grid-template-columns:minmax(0,2.2fr) 96px 96px 88px minmax(112px,1.2fr) 76px 40px;gap:8px}
.bc-head{margin:10px 0 4px;padding:0 2px;font-size:12px;font-weight:600;color:var(--mute)}
.bc-items{display:grid;gap:8px}
.bc-item{align-items:end}
/* поля й список однієї висоти: рядок тексту, поля по 10 px і рамка (Safari інакше малює список нижчим) */
.bc-item input,.bc-item select{height:calc(1.5em + 23px);padding:10px 12px}
.bc-item button{height:calc(1.5em + 23px);padding:8px;min-width:0}
.bc-item.bc-bad-code [data-k="code"],.bc-item.bc-bad-price [data-k="price"],.bc-item.bc-bad-old [data-k="old"],.bc-item.bc-bad-qty [data-k="qty"]{border-color:var(--err)}
/* вужче за 860 px сім колонок не вміщуються (назві лишалося б менше 180 px) — рядок товару складається у стовпчик */
@media(max-width:860px){
  .bc-head{display:none}
  .bc-item{grid-template-columns:repeat(6,minmax(0,1fr));padding-bottom:12px;border-bottom:1px solid var(--line)}
  /* назва й кнопка видалення / ціна й стара ціна / одиниця й кількість / код */
  .bc-item>:nth-child(1){grid-column:1/6}
  .bc-item>:nth-child(7){grid-column:6;grid-row:1}
  .bc-item>:nth-child(2),.bc-item>:nth-child(3){grid-column:span 3}
  .bc-item>:nth-child(4){grid-column:1/4;grid-row:3}
  .bc-item>:nth-child(6){grid-column:4/7;grid-row:3}
  .bc-item>:nth-child(5){grid-column:1/-1;grid-row:4}
  .bc-item label.offscreen{position:static;opacity:1;margin:0 0 4px;font-size:12px;color:var(--mute)}
}
.s-form .bc-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.s-form .s-note{margin:14px 0 0}
.bc-msgs{margin:0;padding-left:18px}
.s-form .err:has(.bc-msgs){margin-top:14px}
.s-form .notice.bc-warn{display:block;margin:14px 0 0}

/* дії над аркушем */
.bc-print:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.bc-printhint{flex:1 1 260px;align-self:center;margin:0}
.bc-empty{margin:0;padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--mute);text-align:center;font-size:14px}

/* цінники: на екрані — білі етикетки, у друку — сторінки за форматом */
.bc-sheet{--bc-w:58mm;--bc-h:40mm;--bc-px:3mm;--bc-py:2mm;--bc-shop:2.1mm;--bc-shop-h:2.6mm;--bc-name:3.2mm;--bc-name-h:3.6mm;--bc-price:7.4mm;--bc-price-h:7.6mm;--bc-unit:2.4mm;--bc-sign:1.9mm;--bc-sign-h:2.6mm;--bc-zoom:1;
  --bc-band:7.6mm;--bc-band-h:9.6mm;--bc-band-gap:.6mm;--bc-bname:2.7mm;--bc-bname-h:3.2mm;--bc-big:13mm;--bc-big-h:12.4mm;--bc-bunit-h:3mm;--bc-market:13.4mm;--bc-market-h:12.4mm;--bc-market-gap:.4mm;--bc-kop:5.6mm;--bc-per:2.1mm;--bc-pill:3mm;--bc-pill-h:4.6mm;--bc-pill-gap:.8mm;--bc-promo:8mm;--bc-promo-h:8.2mm;--bc-old:3.1mm;--bc-dim:#000}
.bc-sheet.bc-f-70x37{--bc-w:70mm;--bc-h:37mm}
.bc-sheet.bc-f-a4{--bc-w:52.5mm;--bc-h:29.7mm;--bc-px:4mm;--bc-py:1.5mm;--bc-shop:1.8mm;--bc-shop-h:2.2mm;--bc-name:2.6mm;--bc-name-h:3mm;--bc-price:5.2mm;--bc-price-h:5.4mm;--bc-unit:1.9mm;--bc-sign:1.7mm;--bc-sign-h:2.2mm;
  --bc-band:5.2mm;--bc-band-h:6.6mm;--bc-band-gap:.5mm;--bc-bname:2.3mm;--bc-bname-h:2.8mm;--bc-big:9mm;--bc-big-h:8.6mm;--bc-bunit-h:2.4mm;--bc-market:9.8mm;--bc-market-h:9mm;--bc-market-gap:.3mm;--bc-kop:4.2mm;--bc-per:1.7mm;--bc-pill:2.3mm;--bc-pill-h:3.4mm;--bc-pill-gap:.6mm;--bc-promo:5.6mm;--bc-promo-h:5.8mm;--bc-old:2.4mm;--bc-dim:#444}
.bc-scroll{overflow:auto;padding:4px 4px 12px}
.bc-page{display:flex;flex-wrap:wrap;gap:10px}
/* аркуш A4: 4 × 8 клітинок 52,5 × 29,7 мм по центру висоти; зверху й знизу — по одному порожньому ряду */
.bc-f-a4 .bc-page{display:grid;grid-template-columns:repeat(4,52.5mm);grid-auto-rows:29.7mm;align-content:start;gap:0;box-sizing:border-box;width:210mm;height:297mm;padding-top:29.7mm;margin:0 auto;background:#fff;box-shadow:var(--shadow);zoom:var(--bc-zoom)}
.bc-f-a4 .bc-page+.bc-page{margin-top:16px}
.bc-label{box-sizing:border-box;display:flex;flex-direction:column;width:var(--bc-w);height:var(--bc-h);padding:var(--bc-py) var(--bc-px);overflow:hidden;background:#fff;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;text-align:center;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bc-f-58x40 .bc-label,.bc-f-70x37 .bc-label{border-radius:1.2mm;box-shadow:0 1px 3px rgba(15,23,42,.18),0 6px 16px -8px rgba(15,23,42,.3)}
/* на екрані термоетикетки більші, ніж на папері, щоб було видно написане; у друку — справжній розмір */
.bc-f-58x40 .bc-page{zoom:1.5}
.bc-f-70x37 .bc-page{zoom:1.3}
@media(max-width:560px){.bc-f-58x40 .bc-page{zoom:1.35}.bc-f-70x37 .bc-page{zoom:1.1}}
/* лінії відрізу: тонкий пунктир по краях кожної клітинки */
.bc-f-a4 .bc-label{border-right:.15mm dashed #9aa3af;border-bottom:.15mm dashed #9aa3af}
.bc-f-a4 .bc-label:nth-child(-n+4){border-top:.15mm dashed #9aa3af}
.bc-f-a4 .bc-label:nth-child(4n+1){border-left:.15mm dashed #9aa3af}
.bc-shop{flex:none;height:var(--bc-shop-h);font-size:var(--bc-shop);line-height:var(--bc-shop-h);color:var(--bc-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-name{flex:none;max-height:calc(var(--bc-name-h)*2);font-size:var(--bc-name);line-height:var(--bc-name-h);font-weight:700;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.bc-l-classic .bc-name{margin:0 -.5em;padding:0 .5em}
.bc-grow{flex:1 1 0;min-height:0}
.bc-solo{justify-content:center}
.bc-solo .bc-code{margin-top:0}
/* ціна по центру; «safe» — якщо з незвичним шрифтом рядок не вміститься, обріжеться одиниця праворуч, а не перша цифра */
.bc-price{flex:none;display:flex;align-items:baseline;justify-content:center;justify-content:safe center;gap:1.4mm;height:var(--bc-price-h);font-size:calc(var(--bc-pf,var(--bc-price))*var(--bc-z,1));line-height:var(--bc-price-h);font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.bc-price small{font-size:.55em;font-weight:700}
.bc-cur{margin-left:.14em;font-size:.68em;font-weight:700}
.bc-unit{font-size:var(--bc-unit);font-weight:400;letter-spacing:0;color:var(--bc-dim)}
/* довга ціна чи назва — меншим кеглем: крок обирає скрипт за шириною рядка (STEPS у shtrykh-kody.js) */
.bc-z1{--bc-z:.9}.bc-z2{--bc-z:.8}.bc-z3{--bc-z:.7}.bc-z4{--bc-z:.6}.bc-z5{--bc-z:.5}.bc-z6{--bc-z:.42}.bc-z7{--bc-z:.35}
.bc-code{flex:none;display:flex;justify-content:center;margin-top:.6mm}
.bc-code svg{display:block;flex:none;max-width:100%;height:auto}
.bc-sign{flex:none;display:flex;align-items:flex-end;gap:1.5mm;height:var(--bc-sign-h);font-size:var(--bc-sign);line-height:1;color:var(--bc-dim)}
.bc-line{flex:1;margin-bottom:.2mm;border-bottom:.15mm solid var(--bc-dim)}

/* стилі цінника: клас на етикетці (класика — правила вище). Висоти рядків — ті самі, що у FORMATS у скрипті */
/* плашка: текст ліворуч, ціна білим на чорній смузі від краю до краю */
.bc-l-band,.bc-l-market,.bc-l-promo{text-align:left}
.bc-l-band .bc-price{--bc-pf:var(--bc-band);justify-content:space-between;align-items:center;height:var(--bc-band-h);margin:0 calc(-1*var(--bc-px));padding:0 var(--bc-px);background:#000;color:#fff}
.bc-l-band .bc-unit{flex:none;font-size:calc(var(--bc-unit)*.95);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.bc-l-band .bc-code{margin-top:calc(.6mm + var(--bc-band-gap))}
/* велика ціна: назва в один рядок, ціна на всю ширину, одиниця окремим рядком, штрихи нижчі */
.bc-l-big .bc-name{display:block;max-height:var(--bc-bname-h);font-size:calc(var(--bc-bname)*var(--bc-z,1));line-height:var(--bc-bname-h);font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.bc-l-big .bc-price{--bc-pf:var(--bc-big);height:var(--bc-big-h);line-height:var(--bc-big-h);letter-spacing:-.035em}
.bc-per{flex:none;height:var(--bc-bunit-h);font-size:calc(var(--bc-unit)*.92);line-height:var(--bc-bunit-h);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;color:var(--bc-dim)}
/* супермаркет: гривні великим кеглем, копійки вгорі, під ними «грн / шт.»; ліворуч — магазин і дата */
.bc-mrow{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5mm;height:var(--bc-market-h);margin-top:var(--bc-market-gap)}
.bc-meta{flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(var(--bc-market)*.06);font-size:var(--bc-per);line-height:1.3;color:var(--bc-dim)}
.bc-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-l-market .bc-price{--bc-pf:var(--bc-market);align-items:flex-end;justify-content:flex-end;gap:.9mm;height:auto;line-height:.87;letter-spacing:-.04em;overflow:visible}
.bc-l-market .bc-price b{font-weight:800}
.bc-side{flex:none;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(var(--bc-market)*var(--bc-z,1)*.87);padding:calc(var(--bc-market)*var(--bc-z,1)*.04) 0 calc(var(--bc-market)*var(--bc-z,1)*.06);letter-spacing:0}
.bc-side em{font-style:normal;font-size:calc(var(--bc-kop)*var(--bc-z,1));line-height:.9;font-weight:800;letter-spacing:-.02em}
.bc-side .bc-unit{font-size:var(--bc-per);line-height:1.15;white-space:nowrap;color:#000}
/* акція (товар зі старою ціною): знижка у відсотках, нова ціна й закреслена стара */
.bc-top{flex:none;display:flex;align-items:center;gap:2mm;height:var(--bc-pill-h);margin-bottom:var(--bc-pill-gap)}
.bc-pill{flex:none;padding:0 .6em;border-radius:99mm;background:#000;color:#fff;font-size:var(--bc-pill);line-height:var(--bc-pill-h);font-weight:800;white-space:nowrap}
.bc-top .bc-shop{flex:1 1 0;min-width:0;text-align:right}
.bc-top .bc-shop:first-child{text-align:left}
.bc-l-promo .bc-price{--bc-pf:var(--bc-promo);justify-content:flex-start;height:var(--bc-promo-h);line-height:var(--bc-promo-h)}
.bc-l-promo .bc-price>span:first-child{flex:none}
.bc-l-promo s{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--bc-old);font-weight:400;letter-spacing:0;text-decoration-thickness:.25mm}
.bc-l-promo .bc-unit{flex:none;margin-left:auto}

/* друк: термоетикетка — окрема сторінка свого розміру, A4 — без полів, бо сітка займає всю ширину аркуша */
@page bc58{size:58mm 40mm;margin:0}
@page bc70{size:70mm 37mm;margin:0}
@media print{
  @page{size:A4;margin:0}
  /* сторінка в друку — звичайний блок: у колонці flex не кожен браузер розриває сторінку після етикетки,
     а min-height:100vh може додати порожні сторінки після останньої */
  body.s-body{display:block;min-height:0}
  .bc-scroll{overflow:visible;padding:0}
  .bc-page{gap:0}
  .bc-f-58x40 .bc-page,.bc-f-70x37 .bc-page{zoom:1}
  .bc-label{box-shadow:none!important;border-radius:0!important}
  .bc-f-58x40 .bc-page,.bc-f-70x37 .bc-page{display:block}
  .bc-f-58x40 .bc-label{page:bc58}
  .bc-f-70x37 .bc-label{page:bc70}
  /* на пів міліметра нижча за сторінку: заокруглення розмірів не виштовхне порожню сторінку між етикетками */
  .bc-f-58x40 .bc-label,.bc-f-70x37 .bc-label{height:calc(var(--bc-h) - .5mm);page-break-after:always;break-after:page}
  .bc-f-58x40 .bc-label:last-child,.bc-f-70x37 .bc-label:last-child{page-break-after:auto;break-after:auto}
  .bc-f-a4 .bc-page{zoom:1;height:296.5mm;margin:0;box-shadow:none;page-break-after:always;break-after:page;break-inside:avoid}
  .bc-f-a4 .bc-page+.bc-page{margin-top:0}
  .bc-f-a4 .bc-page:last-child{page-break-after:auto;break-after:auto}
}