/* Tamvya Design, Business plan: Products (and the shell's plan gate). design/inventory/inventory.js, products.js.
   Tamvya Design's look (design.css tokens); the stock screen has its own stock.css. */

/* ---------- the rail: up to five items and the account fit a phone's bottom bar */
.dz-nav-business{color:var(--signal-deep)}
@media (max-width:760px){
  .dz-rail.dz-rail-more .dz-nav-item{padding:6px 4px;min-width:0;font-size:10.5px}
  .dz-rail.dz-rail-more .dz-nav{gap:0}
}
/* 23 Oct 2026 (Print labels): a line before Printers on Business's desktop rail; on a phone Stock, Reports (24 Oct
   2026) and Printers move under More (Create · My labels · Print labels · Products · More); 31 Oct 2026: Templates
   too, the first item under More (another plan's phone bar has room for it: Create · Templates · My labels · Business) */
.dz-nav-sep{display:block;height:1px;background:var(--line);margin:8px 12px}
/* (31 Oct 2026) the line is before Printers: with Printers hidden (the Print Agent switch off, design.js syncAgent) it goes too */
.dz-nav-sep:has(+ .dz-nav-item[data-nav=printers][hidden]){display:none!important}
.dz-nav-more-wrap{display:none;position:relative}
.dz-nav-more-menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:170px;display:grid;gap:2px;padding:6px;background:var(--label);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -16px rgba(27,39,56,.35);z-index:6}
.dz-nav-more-item{border:0;background:none;text-align:left;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;text-decoration:none} /* (24 Oct 2026: links in the editor's More) */
.dz-nav-more-item:hover{background:var(--paper)}
@media (max-width:760px){
  .dz-nav-sep{display:none!important}
  .dz-rail.dz-rail-biz .dz-nav > .dz-nav-item[data-nav=templates],.dz-rail.dz-rail-biz .dz-nav > .dz-nav-item[data-nav=stock],.dz-rail.dz-rail-biz .dz-nav > .dz-nav-item[data-nav=reports],.dz-rail.dz-rail-biz .dz-nav > .dz-nav-item[data-nav=printers]{display:none!important}
  .dz-rail.dz-rail-biz .dz-nav-more-wrap:not([hidden]){display:block}
  .dz-rail.dz-rail-biz .dz-nav-more-wrap .dz-nav-item{width:100%}
  .dz-nav-more[data-current]{color:var(--signal-deep);background:var(--signal-soft)}
}

/* ---------- the plan gate */
.dz-inv-gate{max-width:560px;margin:8vh auto 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--label);display:grid;gap:10px}
.dz-inv-gate h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em}
.dz-inv-gate p{margin:0;line-height:1.5}
.dz-inv-gate[role=status]{border:0;text-align:center}

/* ---------- the list */
.dz-prd-head-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none;margin-top:4px}
.dz-prd-toolbar{align-items:center}
.dz-prd-search{display:flex;gap:8px;flex:1 1 260px;max-width:420px;min-width:0}
.dz-prd-search input[type=search]{max-width:none;flex:1;min-width:0}
.dz-prd-select{width:auto;max-width:220px;height:36px;border-radius:999px;padding:6px 12px}
.dz-prd-count{margin:0 0 8px;font-size:13px;min-height:1.4em}
.dz-prd-head + .dz-toolbar + .dz-note{margin:0 0 10px}
.dz-prd-table-wrap{border:1px solid var(--line);border-radius:14px;overflow:auto;background:var(--label)}
.dz-prd-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dz-prd-table th,.dz-prd-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.dz-prd-table thead th{background:var(--paper);font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;position:sticky;top:0}
.dz-prd-table tbody tr:last-child > *{border-bottom:0}
.dz-prd-table tbody tr:hover{background:var(--paper)}
.dz-prd-table tbody th{font-weight:400;min-width:180px}
.dz-prd-table .dz-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dz-prd-table thead th.dz-prd-c-buy_price,.dz-prd-table thead th.dz-prd-c-sell_price,.dz-prd-table thead th.dz-prd-c-retail_price,.dz-prd-table thead th.dz-prd-c-tax_rate,.dz-prd-table thead th.dz-prd-c-stock,.dz-prd-table thead th.dz-prd-c-low_stock_level{text-align:right}
.dz-prd-c-barcode,.dz-prd-c-sku{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dz-prd-c-actions{white-space:nowrap;text-align:right!important;width:1%}
.dz-prd-c-actions .dz-quiet{padding:5px 8px;font-size:13px}
.dz-prd-name{border:0;background:none;padding:0;color:var(--ink);font-weight:500;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.dz-prd-name:hover{color:var(--signal-deep);text-decoration:underline}
.is-archived .dz-prd-name{color:var(--muted)}
.dz-prd-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--liner);color:var(--muted);font-size:11.5px;font-weight:500;vertical-align:middle}
.dz-prd-tag.warn{background:#FFF3E0;color:var(--warn)}
.dz-prd-empty{display:grid;gap:6px;justify-items:start;padding:28px 22px;border:1px dashed var(--line);border-radius:14px;background:var(--paper)}
.dz-prd-empty span{color:var(--muted)}
.dz-prd-empty button{margin-top:6px}
.dz-prd-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:13px}
.dz-prd-pager:empty{display:none}
.dz-prd-pager .dz-secondary{padding:6px 12px}
.dz-prd-pager .dz-secondary:disabled{opacity:.45;cursor:not-allowed}

/* ---------- the form and the settings (dialogs; the print dialog's frame) */
.dz-inv-dialog{max-width:min(760px,calc(100vw - 32px));overflow:auto}
.dz-prd-form{gap:14px}
.dz-prd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.dz-prd-f{display:grid;gap:4px;font-size:12.5px;font-weight:500;min-width:0;align-content:start}
.dz-prd-f[hidden]{display:none}
.dz-prd-l{font-size:12.5px;font-weight:500}
.dz-prd-req{font-weight:400;color:var(--muted)}
.dz-prd-f-name,.dz-prd-f-barcode,.dz-prd-f-manufacturer{grid-column:1 / -1}
.dz-prd-f input[aria-invalid=true],.dz-prd-f select[aria-invalid=true]{border-color:var(--bad)}
.dz-prd-err{font-weight:400;font-size:12px;min-height:0}
.dz-prd-err:empty{display:none}
.dz-prd-dup{display:block;color:var(--warn);font-size:12px}
.dz-prd-dup[hidden]{display:none}
.dz-prd-barcode-row{display:flex;align-items:center;gap:10px;min-width:0}
.dz-prd-barcode-row input{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.dz-prd-barcode-row input[readonly]{background:var(--paper);color:var(--muted)}
.dz-prd-unlock{flex:none;font-size:13px}
.dz-prd-money{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--label);min-width:0}
.dz-prd-money:focus-within{border-color:var(--signal);box-shadow:var(--ring)}
.dz-prd-money input{border:0;box-shadow:none!important;height:36px;flex:1;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.dz-prd-money input[aria-invalid=true]{border:0}
.dz-prd-money:has(input[aria-invalid=true]){border-color:var(--bad)}
.dz-prd-sym{padding:0 0 0 10px;color:var(--muted);font-weight:400}
.dz-prd-pct .dz-prd-sym{padding:0 10px 0 0}
.dz-prd-stock-part{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.dz-prd-stock-part .dz-prd-f{max-width:260px}
.dz-prd-stock-now{margin:0;font-size:13.5px}
.dz-prd-actions{justify-content:flex-end!important;flex-wrap:wrap}
.dz-prd-archive:hover{color:var(--bad)}
.dz-prd-set{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.dz-prd-set legend{font-weight:700;font-size:14.5px;padding:0;margin-bottom:6px}
.dz-prd-set .dz-hint{margin:0}
.dz-prd-order{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;gap:4px 14px}
.dz-prd-order li{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:2px 0}
.dz-prd-order li.is-off label span{color:var(--muted)}
.dz-prd-order label{display:flex;align-items:center;gap:8px;font-size:13.5px;min-width:0;cursor:pointer}
.dz-prd-order input{width:18px;height:18px;flex:none;accent-color:var(--signal)}
.dz-prd-moves{display:inline-flex;flex:none}
.dz-prd-moves .dz-quiet{padding:2px 8px;font-size:14px}
.dz-prd-moves .dz-quiet:disabled{opacity:.3;cursor:default}
.dz-prd-modes{display:grid;gap:8px}
.dz-prd-mode{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.dz-prd-mode:has(input:checked){border-color:var(--signal);background:var(--signal-soft)}
.dz-prd-mode input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--signal)}
.dz-prd-mode span{display:grid;gap:2px}
.dz-prd-mode strong{font-weight:500;font-size:13.5px}
#dzPrdCurrency{max-width:360px}

/* ---------- a phone: the list as cards, one column forms */
@media (max-width:760px){
  .dz-prd-head{flex-direction:column}
  .dz-prd-head-actions{justify-content:flex-start;margin-top:0}
  .dz-prd-search{flex-basis:100%;max-width:none}
  .dz-prd-select{flex:1 1 140px;max-width:none}
  .dz-prd-table-wrap{border:0;border-radius:0;overflow:visible;background:none}
  .dz-prd-table,.dz-prd-table tbody,.dz-prd-table tr,.dz-prd-table th,.dz-prd-table td{display:block;width:auto}
  .dz-prd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dz-prd-table tbody tr{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:10px;background:var(--label)}
  .dz-prd-table tbody tr:hover{background:var(--label)}
  .dz-prd-table th,.dz-prd-table td{border:0;padding:3px 0}
  .dz-prd-table td[data-label]{display:flex;justify-content:space-between;gap:12px;text-align:right}
  .dz-prd-table td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12.5px;text-align:left;flex:none}
  .dz-prd-table td[data-label]:empty{display:none}
  .dz-prd-table .dz-prd-c-name{font-size:14.5px;padding-bottom:6px}
  .dz-prd-c-actions{text-align:left!important;width:auto;padding-top:6px!important;border-top:1px solid var(--line)!important;margin-top:6px}
  .dz-prd-grid,.dz-prd-order{grid-template-columns:1fr}
  .dz-prd-order{grid-auto-flow:row;grid-template-rows:none!important}
  .dz-prd-stock-part .dz-prd-f{max-width:none}
}
.dz-prd-pending{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:4px 0}
.dz-prd-pending p{margin:0;flex:1 1 240px}
.dz-prd-pending .warn{color:var(--warn)}
/* plans v2 (22 Oct 2026): the Business card in the plan dialog, and the Business trial's days left on Products */
/* 31 Oct 2026 (owner approved redesign, inventory.js planCard): the Business card. The same card on the Products / Stock
   screens (in .dz-inv-gate's frame) and in the plan dialog (no frame: the dialog is the card). */
.dz-inv-plan-dialog{border:0;border-radius:16px;padding:24px 24px 20px;width:100%;max-width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--label);color:var(--ink);font-family:var(--font);box-shadow:0 18px 50px rgba(15,30,50,.28)}
.dz-inv-plan-dialog::backdrop{background:rgba(20,32,48,.45)}
.dz-inv-plan-dialog .dz-inv-gate{margin:0;padding:0;border:0;background:none;max-width:none}
.dz-inv-biz{gap:0}
.dz-inv-biz-head{display:flex;gap:14px;align-items:center;margin:0 0 12px}
.dz-inv-plan-dialog .dz-inv-biz-head{padding-right:30px}
.dz-inv-biz-icon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--signal-soft);color:#1373E6;display:grid;place-items:center}
.dz-inv-biz-icon svg,.dz-inv-biz-tick svg,.dz-inv-biz-clock svg{display:block}
.dz-inv-biz-name{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.dz-inv-biz h1,.dz-inv-biz h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.dz-inv-biz h1{font-size:21px;letter-spacing:-.02em}
.dz-inv-biz-pill{display:inline-block;font-size:12px;font-weight:500;line-height:1.5;color:var(--signal-deep);background:var(--signal-soft);border-radius:999px;padding:1px 9px}
.dz-inv-biz p.dz-inv-biz-intro{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#3B4A5C}
.dz-inv-biz p.dz-inv-biz-ended{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:14px;line-height:1.5;color:#9A6A0C}
.dz-inv-biz-ended b{font-weight:600}
.dz-inv-biz-clock{flex:none;margin-top:3px}
.dz-inv-biz-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.dz-inv-biz-list li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:#26384D}
.dz-inv-biz-tick{flex:none;margin-top:1px}
.dz-inv-biz p.dz-inv-biz-status{margin:0 0 10px;font-size:13.5px}
.dz-inv-biz p.dz-inv-biz-status:empty{display:none}
.dz-inv-biz-actions{justify-content:flex-end;gap:10px;margin:0;padding:0}
.dz-inv-biz-actions .dz-primary,.dz-inv-biz-actions .dz-secondary,.dz-inv-biz-actions .dz-quiet{padding:10px 18px;font-size:14px}
.dz-inv-biz-actions .dz-secondary{color:var(--signal-deep)}
.dz-inv-biz-actions .dz-quiet{padding:10px 12px}
.dz-inv-biz p.dz-inv-biz-note{margin:8px 0 0;font-size:12.5px;text-align:right}
.dz-inv-biz-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:400 22px/1 var(--font);cursor:pointer}
.dz-inv-biz-x:hover{background:var(--signal-soft);color:var(--ink)}
.dz-inv-biz-x:focus-visible{outline:none;box-shadow:var(--ring)}
@media (max-width:520px){
  .dz-inv-plan-dialog{padding:20px 18px 16px}
  .dz-inv-biz-actions{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .dz-inv-biz-actions .dz-primary,.dz-inv-biz-actions .dz-secondary,.dz-inv-biz-actions .dz-quiet{width:100%;min-height:44px}
  .dz-inv-biz p.dz-inv-biz-note{text-align:center}
}
/* 30 Oct 2026: only in a Business trial's last 3 days, a slim strip above the search (inventory.js paintTrialLine) */
.dz-inv-trial-strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 10px;padding:8px 14px;border:1px solid #F1D9A8;border-radius:12px;background:#FFF8EB;color:var(--warn);font-size:13px;line-height:1.45}
.dz-inv-trial-strip > span{flex:1 1 260px;min-width:0}
.dz-inv-trial-strip .dz-link{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px;flex:none}
/* 23 Oct 2026 (Print labels): tick products, then "Print labels" */
.dz-prd-c-tick{width:1%;padding-right:0!important}
.dz-prd-tick{width:18px;height:18px;accent-color:var(--signal);vertical-align:middle;cursor:pointer}
.dz-prd-table tbody tr.is-ticked{background:var(--signal-soft)}
@media (max-width:760px){
  .dz-prd-table tbody tr{position:relative}
  .dz-prd-table td.dz-prd-c-tick{position:absolute;top:10px;right:12px;padding:0!important}
  .dz-prd-table tbody tr:has(.dz-prd-c-tick) .dz-prd-c-name{padding-right:34px}
}
/* 25 Oct 2026: "Select all" (the header's tick). A computer: the box alone, as before; a phone: the header is hidden
   (cards), so its tick shows as a "Select all" line above the cards, like Print labels' (.dz-pl-all) */
.dz-prd-all{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
@media (min-width:761px){.dz-prd-all-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:760px){
  .dz-prd-table thead:has(.dz-prd-all){position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block}
  .dz-prd-table thead:has(.dz-prd-all) tr{display:block}
  .dz-prd-table thead:has(.dz-prd-all) th{display:none}
  .dz-prd-table thead th.dz-prd-c-tick{display:block;position:static;background:none;padding:0 0 8px!important;width:auto}
  .dz-prd-all{min-height:44px;padding:0 4px;font-size:13.5px;font-weight:500}
}

/* ---------- 24 Oct 2026: the old app's Products layout in Tamvya Design's look (products.js build / openEditor) */
.dz-prd-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* 30 Oct 2026 (owner approved): icon buttons (products.js iconBtn): 40 x 40 px, the action bar's pill look; a tooltip
   with the button's name on hover and keyboard focus (moved sideways to stay on screen: --tip-dx; Escape hides it) */
.dz-prd-head{align-items:center}
.dz-prd-head .dz-page-head-row h1,.dz-prd-head h1{margin-bottom:0}
.dz-prd-head-actions{align-items:center;flex-wrap:nowrap;margin-top:0}
.dz-prd-ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--label);color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap}
.dz-prd-ibtn:hover{border-color:var(--ink)}
.dz-prd-ibtn:focus-visible{outline:none;box-shadow:var(--ring)}
.dz-prd-ibtn[hidden]{display:none}
.dz-prd-ibtn-text{width:auto;padding:0 14px 0 12px}
.dz-prd-head-actions .dz-prd-act-main{height:40px;padding:0 16px 0 13px;font-size:13.5px;flex:none}
#dzPrdArchiveSel:hover{color:var(--bad);border-color:var(--bad)}
.dz-prd-tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(calc(-50% + var(--tip-dx,0px)));z-index:30;padding:5px 9px;border-radius:7px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease}
.dz-prd-ibtn:focus-visible .dz-prd-tip{opacity:1;visibility:visible}
@media (hover:hover){.dz-prd-ibtn:hover .dz-prd-tip{opacity:1;visibility:visible}}
.dz-prd-ibtn.dz-tip-off .dz-prd-tip{opacity:0;visibility:hidden}
.dz-prd-ibtn-text .dz-prd-tip{display:none}
@media (prefers-reduced-motion:reduce){.dz-prd-tip{transition:none}}
/* the empty list: the short description, "+ Add product" and "Import" */
.dz-prd-empty-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dz-prd-empty-actions .dz-prd-ico{width:16px;height:16px}
.dz-prd-empty-actions > *{margin-top:0!important;height:40px;padding:0 16px 0 13px;box-sizing:border-box}
/* a phone: only "+ Add product" keeps its words; Import is an icon too (its tooltip then) */
@media (max-width:760px){
  .dz-prd-head{align-items:stretch;gap:10px}
  .dz-prd-head-actions{gap:8px}
  .dz-prd-ibtn-text{width:40px;padding:0}
  .dz-prd-ibtn-text .dz-prd-act-text{display:none}
  .dz-prd-ibtn-text .dz-prd-tip{display:block}
  .dz-prd-head-actions .dz-prd-act-main{margin-left:auto}
}
/* the search panel: search (magnifier, clear, scan) and Sort by */
.dz-prd-searchbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--label);margin-bottom:10px}
.dz-prd-searchbar .dz-prd-search{flex:1 1 320px;max-width:none;position:relative;display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;background:var(--label);min-width:0}
.dz-prd-searchbar .dz-prd-search:focus-within{border-color:var(--signal);box-shadow:var(--ring)}
.dz-prd-search-lead{display:inline-flex;padding:0 2px 0 12px;color:var(--muted)}
.dz-prd-searchbar .dz-prd-search input[type=search]{border:0!important;box-shadow:none!important;background:none;height:38px;flex:1;min-width:0;max-width:none;padding:6px 8px;border-radius:999px;font:inherit;font-size:14px;color:var(--ink);outline:none}
.dz-prd-searchbar .dz-prd-search input[type=search]::-webkit-search-cancel-button{display:none}
.dz-prd-search-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-right:3px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.dz-prd-search-btn:hover{background:var(--paper);color:var(--ink)}
.dz-prd-search-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.dz-prd-search-btn[hidden]{display:none}
.dz-prd-sort{display:flex;align-items:center;gap:8px;font-size:13px;flex:none}
.dz-prd-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
/* the action bar: the selected product, then Add product · Edit · Archive · Print labels | Customize */
.dz-prd-actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-bottom:10px;min-height:52px}
.dz-prd-selected{display:grid;gap:1px;min-width:0;flex:0 1 auto;font-size:13px}
.dz-prd-selected[hidden]{display:none}
.dz-prd-selected strong{font-weight:600;overflow-wrap:anywhere}
.dz-prd-selected .dz-muted{font-size:12px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dz-prd-actionbar > .dz-prn-gap{flex:1 1 auto}
.dz-prd-acts{display:inline-flex;gap:6px}
.dz-prd-acts[hidden]{display:none}
.dz-prd-act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--label);color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.dz-prd-act:hover{border-color:var(--ink)}
.dz-prd-act:focus-visible{outline:none;box-shadow:var(--ring)}
.dz-prd-act[hidden]{display:none}
.dz-prd-act-main{background:var(--signal);border-color:var(--signal);color:#fff}
.dz-prd-act-main:hover{background:var(--signal-deep);border-color:var(--signal-deep)}
.dz-prd-divider{width:1px;align-self:stretch;margin:2px 4px;background:var(--line)}
/* the list: a selected row (single selection), empty cells as a dash */
.dz-prd-row{cursor:pointer}
.dz-prd-row:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.dz-prd-table tbody tr.is-selected{background:var(--signal-soft);box-shadow:inset 3px 0 0 var(--signal)}
.dz-prd-table tbody tr.is-selected:hover{background:var(--signal-soft)}
@media (min-width:761px){.dz-prd-table td[data-label]:empty::after{content:'—';color:var(--muted)}}
/* the product page (Add / Edit), in the list's place. 24 Oct 2026 (owner: "not adjusting as per the screen"): the
   screen's width like the list (.dz-view's own cap); the parts pack as cards, as many side by side as fit (Basic
   information across the top), each part's fields in their own small grid; Cancel / Save stay at the bottom */
.dz-prd-editor-page{max-width:none}
.dz-prd-editor-head{margin-bottom:14px}
.dz-prd-back{display:inline-block;margin-bottom:8px;font-size:13.5px;text-decoration:none}
.dz-prd-back:hover{text-decoration:underline}
.dz-prd-page-form{display:grid;gap:14px}
.dz-prd-parts{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.dz-prd-parts > .dz-prd-part,.dz-prd-pair > .dz-prd-part{flex:1 1 240px}
.dz-prd-parts > .dz-prd-part-basic{flex:1 1 100%}
.dz-prd-pair{display:flex;flex-wrap:wrap;gap:14px;flex:2 1 494px;min-width:0}
.dz-prd-part{border:1px solid var(--line);border-radius:14px;background:var(--label);padding:14px 16px 16px;display:grid;gap:12px;align-content:start;min-width:0;container-type:inline-size;margin:0}
.dz-prd-part-title{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.005em}
.dz-prd-part .dz-prd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.dz-prd-part .dz-prd-f-manufacturer{grid-column:1 / -1}
/* Basic information: 1, 2 or 4 columns by its own width; the name and the barcode take two */
.dz-prd-part-basic .dz-prd-grid{grid-template-columns:minmax(0,1fr)}
@container (min-width:520px){
  .dz-prd-part-basic .dz-prd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dz-prd-part-basic .dz-prd-f-name,.dz-prd-part-basic .dz-prd-f-barcode{grid-column:1 / -1}
}
@container (min-width:900px){
  .dz-prd-part-basic .dz-prd-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dz-prd-part-basic .dz-prd-f-name,.dz-prd-part-basic .dz-prd-f-barcode{grid-column:span 2}
}
.dz-prd-part .dz-prd-stock-part{border-top:0;padding-top:0}
.dz-prd-bc-scan{flex:none;padding:7px 12px}
.dz-prd-barcode-row{flex-wrap:wrap}
.dz-prd-barcode-row input{flex:1 1 180px}
/* the barcode type: "Barcode type: Automatic · Change", the picker under it when opened */
.dz-prd-bctype{display:grid;gap:6px;min-width:0}
.dz-prd-bctype[hidden],.dz-prd-bctype-panel[hidden]{display:none}
.dz-prd-bctype-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:12.5px;font-weight:400}
.dz-prd-bctype-line strong{font-weight:500}
.dz-prd-bctype-toggle{font-size:12.5px}
.dz-prd-bctype-toggle[hidden]{display:none}
.dz-prd-bctype-panel{display:grid;gap:4px;max-width:360px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.dz-prd-added{margin:0}
/* the actions: at the bottom of the screen while the form is on it */
.dz-prd-footer{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;margin:0;padding:12px 0;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 14px -14px rgba(27,39,56,.35)}
.dz-prd-footer-msg{flex:1 1 200px;min-width:0;min-height:0;font-size:13px}
/* a phone: one column, the actions still at the bottom */
@media (max-width:600px){
  .dz-prd-editor .dz-prd-part .dz-prd-grid,.dz-prd-editor .dz-prd-part-basic .dz-prd-grid{grid-template-columns:minmax(0,1fr)}
  .dz-prd-editor .dz-prd-part-basic .dz-prd-f{grid-column:auto}
  .dz-prd-parts > .dz-prd-part,.dz-prd-pair > .dz-prd-part,.dz-prd-pair{flex-basis:100%}
  .dz-prd-part{padding:12px 14px 14px}
  .dz-prd-bctype-panel{max-width:none}
  .dz-prd-footer{padding:10px 0;gap:8px}
  .dz-prd-footer-msg{flex-basis:100%;order:-1}
  .dz-prd-footer .dz-primary,.dz-prd-footer .dz-secondary{flex:1 1 auto}
}
@media (max-width:760px){
  .dz-prd-searchbar{padding:10px}
  .dz-prd-sort{flex:1 1 100%}
  .dz-prd-sort select{flex:1}
  .dz-prd-actionbar{gap:6px}
  .dz-prd-selected{flex:1 1 100%}
  .dz-prd-actionbar > .dz-prn-gap{display:none}
  .dz-prd-divider{display:none}
  .dz-prd-table tbody tr.is-selected{box-shadow:inset 0 0 0 2px var(--signal)}
}
/* the Import products page (#import), 24 Oct 2026 redesign: three steps (import-export.js importPanel, page: true) */
.dz-inv-import-head{margin-bottom:16px}
.dz-inv-import-head .dz-prd-back{margin-bottom:4px}
.dz-inv-import.dz-inv-import-page{width:auto;max-width:none;display:block}
.dz-imp{display:grid;gap:16px;min-width:0}
.dz-imp-section{display:grid;gap:16px;min-width:0}
.dz-imp-section[hidden]{display:none}
/* the steps: 1 Choose file · 2 Check rows · 3 Import */
.dz-imp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dz-imp-step{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-radius:12px;background:var(--paper);color:var(--muted);font-size:13.5px}
.dz-imp-step-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--liner);color:var(--muted);font-size:12.5px;font-weight:500}
.dz-imp-step-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-imp-step.is-on{background:var(--signal-soft);color:var(--ink);font-weight:500}
.dz-imp-step.is-on .dz-imp-step-num{background:var(--signal);color:#fff}
.dz-imp-step.is-done .dz-imp-step-num{background:var(--label);color:var(--signal-deep);box-shadow:inset 0 0 0 1.5px var(--signal)}
.dz-imp-step:not(.is-done) .dz-imp-step-done{display:none}
/* step 1: the drop zone */
.dz-imp-drop{display:grid;justify-items:center;gap:6px;text-align:center;padding:40px 24px;border:2px dashed #B9CBE3;border-radius:16px;background:#F8FBFF;cursor:pointer;transition:border-color .15s,background-color .15s}
.dz-imp-drop:hover{border-color:var(--signal)}
.dz-imp-drop.is-over{border-color:var(--signal);background:var(--signal-soft)}
.dz-imp-drop-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--signal-soft);color:var(--signal);margin-bottom:6px}
.dz-imp-ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dz-imp-drop-title{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.dz-imp-drop-title:focus,.dz-imp-title:focus{outline:none;box-shadow:none}
.dz-imp-narrow{display:none}
.dz-imp-drop-hint{margin:0 0 10px;color:var(--muted);font-size:13px}
.dz-imp-drop .dz-primary{padding:11px 22px;font-size:14px}
.dz-imp-drop-msg{margin:6px 0 0;font-size:13px;max-width:60ch}
.dz-imp-drop-msg:empty{display:none}
.dz-imp-drop-msg.bad{color:var(--bad)}
/* step 1: the two cards */
.dz-imp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.dz-imp-card{border:1px solid var(--line);border-radius:14px;background:var(--label);padding:16px 18px;min-width:0;margin:0}
.dz-imp-card-title{margin:0;padding:0;font-size:14.5px;font-weight:700;letter-spacing:-.005em;float:none}
.dz-imp-card > p{margin:2px 0 12px;font-size:13px}
.dz-imp-modes{display:block}
.dz-imp-modes > legend{float:left;width:100%}
.dz-imp-modes > p{clear:both;margin:0;padding-top:2px}
.dz-imp-modes .dz-imp-option{margin-top:8px}
.dz-imp-modes > p + .dz-imp-option{margin-top:12px}
.dz-imp-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.dz-imp-option:hover{border-color:var(--signal)}
.dz-imp-option:has(input:checked){border-color:var(--signal);background:var(--signal-soft)}
.dz-imp-option:has(input:focus-visible){box-shadow:var(--ring)}
.dz-imp-option input{margin:3px 0 0;width:16px;height:16px;flex:none;accent-color:var(--signal)}
.dz-imp-option span{display:grid;gap:1px}
.dz-imp-option strong{font-weight:500;font-size:13.5px}
.dz-imp-option .dz-muted{font-size:12px}
.dz-imp-bullets{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.7}
/* step 2 and 3: the file, the summary, the rows */
.dz-imp-check{display:grid;gap:14px}
.dz-imp-title{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.dz-imp-filebar{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);min-width:0}
.dz-imp-file-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--signal-soft);color:var(--signal)}
.dz-imp-file-icon .dz-imp-ico{width:20px;height:20px}
.dz-imp-file-text{display:grid;flex:1;min-width:0;font-size:12.5px}
.dz-imp-file-name{font-weight:500;font-size:14px;overflow-wrap:anywhere}
.dz-imp-filebar .dz-secondary{flex:none}
.dz-imp-summary .dz-report{max-height:none;overflow:visible;font-size:13px}
.dz-imp-summary .dz-report:focus{outline:none}
.dz-imp-count{font-size:17px!important;font-weight:700;margin:0 0 4px!important;letter-spacing:-.01em}
.dz-imp-count .okline{color:var(--ok)}.dz-imp-count .bad{color:var(--bad)}
.dz-imp-sep{color:var(--muted);font-weight:400}
.dz-imp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.dz-imp-tools .dz-cats[hidden]{display:none}
.dz-imp-modeline{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13px;min-width:0}
.dz-imp-modeline legend{float:left;padding:0;margin-right:2px;color:var(--muted)}
.dz-imp-modeline label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.dz-imp-modeline input{accent-color:var(--signal);margin:0}
.dz-imp-rows:empty{display:none}
.dz-imp .dz-inv-table-wrap{max-height:min(56vh,560px)}
.dz-imp .dz-inv-table{font-size:13px}
.dz-imp .dz-inv-table th,.dz-imp .dz-inv-table td{padding:8px 10px}
@media (min-width:601px){
  .dz-imp .dz-inv-table th:nth-child(2),.dz-imp .dz-inv-table td:nth-child(2){min-width:11em}
  .dz-imp .dz-inv-table th:nth-child(3),.dz-imp .dz-inv-table td:nth-child(3){min-width:7.5em}
  .dz-imp .dz-inv-table th:nth-child(4),.dz-imp .dz-inv-table td:nth-child(4){min-width:9.5em}
  .dz-imp .dz-inv-table th{white-space:nowrap}
}
.dz-imp-empty{margin:0;padding:14px;border:1px dashed var(--line);border-radius:10px;font-size:13px}
.dz-imp-empty.okline{color:var(--ok)}
.dz-imp-subtitle{margin:0;font-size:14.5px;font-weight:700}
.dz-imp-rows .dz-imp-subtitle + p{margin:2px 0 10px}
/* step 3: the progress and the result */
.dz-imp-progress{width:100%;height:8px;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--liner);overflow:hidden;accent-color:var(--signal)}
.dz-imp-progress::-webkit-progress-bar{background:var(--liner);border-radius:999px}
.dz-imp-progress::-webkit-progress-value{background:var(--signal);border-radius:999px;transition:width .2s}
.dz-imp-progress::-moz-progress-bar{background:var(--signal);border-radius:999px}
.dz-imp-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dz-imp-tile{display:grid;gap:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:13px;min-width:0}
.dz-imp-tile strong{font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.dz-imp-tile > span:nth-child(2){font-weight:500}
.dz-imp-tile.is-ok strong{color:var(--ok)}
.dz-imp-tile.is-bad{border-color:#F3C9C5;background:#FFF8F7}
.dz-imp-tile.is-bad strong{color:var(--bad)}
/* the actions under a step: the report on the left, the next step on the right */
.dz-imp-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dz-imp-actions-left,.dz-imp-actions-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dz-imp-actions-right,.dz-imp-actions > .dz-primary{margin-left:auto}
.dz-imp-actions .dz-primary{padding:11px 22px;font-size:14px}
.dz-imp-actions .dz-secondary:disabled,.dz-imp-filebar .dz-secondary:disabled{opacity:.5;cursor:not-allowed}
/* a phone: everything stacks; the drop zone is a tap to choose; the rows as cards */
@media (max-width:600px){
  .dz-imp{gap:12px}
  .dz-imp-steps{display:flex;gap:6px}
  .dz-imp-step{flex:0 0 48px;padding:8px;gap:6px;font-size:12.5px;justify-content:center}
  .dz-imp-step.is-on{flex:1 1 auto;justify-content:flex-start}
  .dz-imp-step:not(.is-on) .dz-imp-step-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dz-imp-step-num{width:22px;height:22px;font-size:11.5px}
  .dz-imp-drop{padding:26px 16px}
  .dz-imp-drop-icon{width:48px;height:48px}
  .dz-imp-wide{display:none}.dz-imp-narrow{display:inline}
  .dz-imp-drop-title{font-size:16px}
  .dz-imp-drop .dz-primary{width:100%;max-width:320px}
  .dz-imp-cards{grid-template-columns:1fr;gap:12px}
  .dz-imp-card{padding:14px}
  .dz-imp-check{border:0;border-radius:0;padding:0;background:none}
  .dz-imp-filebar{flex-wrap:wrap}
  .dz-imp-modeline legend{float:none;width:100%;margin-bottom:2px}
  .dz-imp-filebar .dz-secondary{width:100%}
  .dz-imp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dz-imp-actions{flex-direction:column-reverse;align-items:stretch}
  .dz-imp-actions-left,.dz-imp-actions-right{flex-direction:column;align-items:stretch}
  .dz-imp-actions-right{flex-direction:column-reverse}
  .dz-imp-actions-right,.dz-imp-actions > .dz-primary{margin-left:0}
  .dz-imp-actions-left:empty{display:none}
  .dz-imp-actions .dz-primary,.dz-imp-actions .dz-secondary{width:100%}
  .dz-imp .dz-inv-table-wrap{max-height:none;border:0;overflow:visible}
  .dz-imp .dz-inv-table,.dz-imp .dz-inv-table tbody,.dz-imp .dz-inv-table tr,.dz-imp .dz-inv-table td{display:block;width:auto}
  .dz-imp .dz-inv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dz-imp .dz-inv-table tbody tr{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:var(--label)}
  .dz-imp .dz-inv-table tr.is-bad{border-color:#F3C9C5}
  .dz-imp .dz-inv-table tr.is-bad td{background:none}
  .dz-imp .dz-inv-table td{border:0;padding:2px 0;min-width:0!important}
  .dz-imp .dz-inv-table td[data-label]:not(:last-child){display:flex;justify-content:space-between;gap:12px;text-align:right}
  .dz-imp .dz-inv-table td[data-label]:not(:last-child)::before{content:attr(data-label);color:var(--muted);text-align:left;flex:none}
  .dz-imp .dz-inv-table td[data-label]:empty{display:none}
  .dz-imp .dz-inv-table td:first-child{width:auto}
  .dz-imp .dz-inv-table td:last-child{padding-top:6px;margin-top:4px;border-top:1px solid var(--liner)}
}

/* ---------- 24 Oct 2026: "Archived “<name>”." with Undo (products.js undoBox), the .dz-note ok look */
.dz-prd-undo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.dz-prd-undo[hidden]{display:none}
.dz-prd-undo > span{min-width:0;overflow-wrap:anywhere}
.dz-prd-undo-btn{color:inherit;font-weight:600;font-size:inherit;font-family:inherit;text-decoration:underline;text-underline-offset:2px;padding:2px 4px;margin:-2px -4px;border-radius:6px}
.dz-prd-undo-btn:hover{text-decoration-thickness:2px}
.dz-prd-undo-btn:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.dz-prd-undo-btn:disabled{opacity:.6;cursor:default}
/* 30 Oct 2026 (owner): on a phone the selected product's name takes its own line and Edit · Archive | Customize sit on the right */
@media (max-width:760px){
  .dz-prd-actionbar > .dz-prd-selected{flex:1 1 100%}
  .dz-prd-actionbar > .dz-prn-gap{flex:1 1 0;min-width:0}
  .dz-prd-actionbar > .dz-prd-acts{margin-left:auto}
}