/* Admin B: products, product form, inventory, coupons, settings. Prefix .ab-  (tokens only, light + dark) */

.ab-host { display: contents; }
.ab-page { width: 100%; }
.ab-form-page { max-width: 1180px; }
.ab-settings { max-width: 980px; }

/* ---------- tabs with counts ---------- */
.ab-tabs-bar { margin-bottom: 14px; }
.ab-tabs button, .ab-set-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.ab-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--surface-2); color: var(--ink-3); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tabs button.active .ab-count { background: var(--brand-soft); color: var(--brand-strong); }
.ab-count.is-warn { background: var(--warn-soft); color: var(--warn); }
.ab-count.is-bad { background: var(--bad-soft); color: var(--bad); }
.ab-set-tabs { margin-bottom: 18px; }

/* ---------- toolbar + bulk bar ---------- */
.ab-toolbar .select { min-width: 170px; }
.ab-lowonly { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ab-bulk {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: var(--r);
  background: var(--brand-soft); color: var(--brand-strong); animation: abIn .18s ease both;
}
.ab-bulk b { margin-right: 4px; }
.ab-bulk .btn-ghost { background: var(--surface); color: var(--ink); }
.ab-bulk .btn-danger-ghost { background: var(--surface); color: var(--bad); }
.ab-bulk-clear { margin-left: auto; background: transparent; color: var(--brand-strong); }
@keyframes abIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- tables ---------- */
.ab-table th, .ab-table td { padding-left: 12px; padding-right: 12px; }
.ab-table .cell-prod { min-width: 230px; }
.ab-inl { display: none; white-space: nowrap; }
.ab-sku { white-space: nowrap; }
@media (max-width: 1399px) {
  .ab-table .ab-c-cat { display: none; }
  .ab-inl-cat { display: inline; }
}
@media (max-width: 1239px) {
  .ab-table .ab-c-sku { display: none; }
  .ab-inl-sku { display: inline; font-size: 12px; }
  .ab-table .cell-prod { min-width: 200px; }
}
/* the actions stay pinned on the right when a table has to scroll sideways */
.ab-table th.ab-c-acts, .ab-table td.ab-c-acts { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -10px 0 12px -12px rgba(0, 0, 0, .25); }
.ab-table th.ab-c-acts { background: var(--surface-2); }
.ab-table tbody tr:hover td.ab-c-acts { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.ab-table tr.is-sel td.ab-c-acts { background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface)); }
.ab-thumb { position: relative; display: block; width: 52px; height: 52px; flex: none; border-radius: 10px; background: var(--media-bg); overflow: hidden; }
.ab-thumb .pimg-art, .ab-thumb .pimg-photo { position: absolute; inset: 0; padding: 4px; }
.ab-pname { min-width: 0; }
.ab-pname b { display: block; font-weight: 600; line-height: 1.3; }
.ab-pname small { color: var(--ink-3); }
.ab-draft-tag {
  display: inline-block; height: 18px; line-height: 18px; margin-left: 4px; padding: 0 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--ink-2); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.ab-table .ab-c-chk { width: 44px; padding-right: 0; }
.ab-sku { font-size: 12.5px; color: var(--ink-2); }
.ab-c-price b { font-variant-numeric: tabular-nums; }
.ab-was { display: flex; gap: 6px; justify-content: flex-end; align-items: baseline; margin-top: 1px; color: var(--ink-3); font-size: var(--fs-xs); }
.ab-was s { color: var(--ink-3); }
.ab-off { color: var(--accent); font-weight: 700; }
.ab-table tr.is-draft .ab-pname b a { color: var(--ink-2); }
.ab-table tr.is-draft .ab-thumb { opacity: .7; }
.ab-table tr.is-sel td { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
.ab-table tr.is-dim td { color: var(--ink-3); }
.ab-table tr.is-dim .ab-gives { color: inherit; }
.ab-selall-m { display: none; }
.ab-showing { margin-top: 12px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
.ab-table .ab-c-acts { width: 1%; white-space: nowrap; }

.ab-stock { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ab-stock-in { width: 72px; min-height: 36px; padding: 0 6px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ab-stock-in::-webkit-outer-spin-button, .ab-stock-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ab-stock.is-low .ab-stock-in { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.ab-stock.is-out .ab-stock-in { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.ab-stock-tag { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ab-stock.is-low .ab-stock-tag { color: var(--warn); }
.ab-stock.is-out .ab-stock-tag { color: var(--bad); }
.ab-stock-tag:empty { display: none; }

.ab-acts { display: flex; gap: 2px; justify-content: flex-end; }
.ab-acts .icon-btn { width: 34px; height: 34px; }
.ab-acts .icon-btn:hover { background: var(--surface-3); }
.ab-danger:hover, .ab-acts .ab-danger:hover { background: var(--bad-soft); color: var(--bad); }

/* ---------- product form ---------- */
.ab-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--ink-3); font-weight: 600; font-size: var(--fs-sm); }
.ab-back:hover { color: var(--brand); }
.ab-head-status { align-items: center; }
.ab-dirty { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 700; }
.ab-dirty i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.ab-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1240px) { .ab-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; } }
.ab-main { display: grid; gap: 18px; min-width: 0; }
.ab-aside { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1240px) { .ab-aside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-bottom: 4px; scrollbar-width: thin; } }

.ab-sec { padding: 22px; scroll-margin-top: 84px; }
.ab-sec .field, .ab-set .field { align-content: start; }
.ab-sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ab-sec-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); }
.ab-sec-head h2 { font-size: var(--fs-lg); font-weight: 700; }
.ab-sec-head p { margin-top: 2px; color: var(--ink-3); font-size: var(--fs-sm); }
.ab-req { color: var(--bad); }
.field .hint a { color: var(--brand); font-weight: 600; }
.field .hint a:hover { text-decoration: underline; }
.input-group.is-bad .input, .input-group.is-bad .pre { border-color: var(--bad); }
.qty.is-bad { border-color: var(--bad); }
.ab-upper { text-transform: uppercase; }
.ab-upper::placeholder { text-transform: none; }
.ab-cp-form .field, .ab-rs-form .field, #ab-rs-form .field { align-content: start; }
.ab-note { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-xs); }
.field[data-field="condition"] .ab-seg { width: 100%; }
.field[data-field="condition"] .ab-seg label { flex: 1; }

/* segmented control */
.ab-seg { display: inline-flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; border-radius: 12px; background: var(--surface-2); }
.ab-seg label { position: relative; cursor: pointer; }
.ab-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ab-seg span { display: grid; place-items: center; min-height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.ab-seg input:checked + span { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow-1); }
.ab-seg input:focus-visible + span { box-shadow: var(--ring); }
.ab-seg label:hover input:not(:checked) + span { color: var(--ink); }

/* suggestion chips */
.ab-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ab-chips:empty { display: none; }
.field > .ab-chips { margin-top: 2px; }
.ab-chips-l { color: var(--ink-3); font-size: 12px; margin-right: 2px; }
.ab-chip { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.ab-chip:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-soft); }

/* price + stock helpers */
.ab-pricesum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); font-size: var(--fs-sm); }
.ab-pay { display: grid; gap: 1px; }
.ab-pay small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ab-pay b, .ab-pay s { font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ab-pay s { color: var(--ink-3); font-weight: 600; }
.ab-off-big { color: var(--accent); }
.ab-warn-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--warn); font-weight: 600; }
.ab-qty { width: fit-content; }
.ab-qty input { width: 84px; }
.ab-qty.qty-sm input { width: 58px; }
.ab-stocknote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-2); font-size: var(--fs-sm); }
.ab-stocknote a { color: var(--brand); font-weight: 600; }
.ab-stocknote a:hover { text-decoration: underline; }

/* photos */
.ab-drop {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 18px; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--r-l); background: var(--surface-2);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ab-drop:hover, .ab-drop.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.ab-drop:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.ab-drop.is-full { opacity: .55; }
.ab-drop.is-full .ab-file { cursor: not-allowed; }
.ab-drop b { color: var(--brand); }
.ab-drop small { color: var(--ink-3); }
.ab-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ab-drop-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); }
.ab-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.ab-photo { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ab-photo.is-primary { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ab-photo-media { position: relative; aspect-ratio: 4 / 3; background: var(--media-bg); }
.ab-photo-media .pimg-photo { padding: 6px; }
.ab-photo-flag { position: absolute; left: 8px; top: 8px; z-index: 1; }
.ab-photo-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 6px 6px 6px 10px; font-size: var(--fs-sm); }
.ab-photo-bar .icon-btn { width: 34px; height: 34px; }
.ab-spin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: abSpin .8s linear infinite; }
@keyframes abSpin { to { transform: rotate(360deg); } }
.ab-illus { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.ab-illus-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--media-bg); overflow: hidden; }
.ab-illus-body { display: grid; gap: 12px; min-width: 0; }
.ab-illus-body p { color: var(--ink-2); }
.ab-illus-ctl { display: grid; gap: 6px; }
.ab-illus-ctl .select { max-width: 260px; }
.ab-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-swatch { position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .12s; }
.ab-swatch::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--sw2); box-shadow: 0 0 0 1.5px var(--surface); }
.ab-swatch:hover { transform: scale(1.08); }
.ab-swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }

/* highlights, specs, tags */
.ab-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-specs { display: grid; gap: 8px; }
.ab-spec-head, .ab-spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 40px; gap: 10px; align-items: center; }
.ab-spec-head { margin-bottom: -2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ab-spec .icon-btn { width: 40px; height: 40px; }
.ab-spec .icon-btn:hover { background: var(--bad-soft); color: var(--bad); }
.ab-empty-note { padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--r); text-align: center; color: var(--ink-3); }
.ab-spec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ab-spec-actions .ab-note { margin: 0 0 0 auto; }
.ab-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: text; transition: border-color .15s, box-shadow .15s; }
.ab-tags:hover { border-color: var(--ink-3); }
.ab-tags:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.ab-tag-list { display: contents; }
.ab-tags .chip { background: var(--brand-soft); color: var(--brand-strong); }
.ab-tags .chip button { color: var(--brand-strong); }
.ab-tags .chip button:hover { background: var(--surface); }
.ab-tag-in { flex: 1; min-width: 150px; min-height: 30px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; }
.ab-tag-in::placeholder { color: var(--ink-3); }
.ab-tag-sug { margin-top: 10px; }

/* visibility cards */
.ab-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-opt { position: relative; cursor: pointer; }
.ab-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ab-opt-box { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); transition: border-color .15s, background .15s, box-shadow .15s; }
.ab-opt:hover .ab-opt-box { border-color: var(--ink-3); }
.ab-opt-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); }
.ab-opt-box b { display: block; }
.ab-opt-box small { display: block; color: var(--ink-3); }
.ab-opt input:checked + .ab-opt-box { border-color: var(--brand); background: var(--brand-soft); }
.ab-opt input:checked + .ab-opt-box .ab-opt-ico { background: var(--brand); color: var(--brand-ink); }
.ab-opt input:focus-visible + .ab-opt-box { box-shadow: var(--ring); }

/* aside: preview, checklist, actions */
.ab-aside-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ab-aside-h h3 { font-size: var(--fs-lg); }
.ab-prev-card { pointer-events: none; user-select: none; }
.ab-prev-card .pcard { max-width: 250px; margin-inline: auto; }
.ab-prev-card .pcard:hover { transform: none; box-shadow: none; border-color: var(--line); }
.ab-prev-card .pcard:hover .pcard-media .pimg-art { transform: none; }
.ab-prev .ab-note { text-align: center; }
.ab-pct { font-family: var(--font-display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ab-check-sub { margin: 10px 0 12px; color: var(--ink-3); font-size: var(--fs-sm); }
.ab-check-sub.is-ok { color: var(--ok); font-weight: 600; }
.ab-checklist { display: grid; gap: 0; }
.ab-checklist li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--ink-3); font-size: var(--fs-sm); }
.ab-checklist li > span:not(.ab-tick) { flex: 1; }
.ab-tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.ab-checklist .is-done .ab-tick { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.ab-jump { flex: 1; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.ab-jump:hover { color: var(--brand); text-decoration-color: var(--brand); }
.ab-reqtag { padding: 2px 7px; border-radius: 5px; background: var(--bad-soft); color: var(--bad); font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ab-actions { display: grid; gap: 10px; }
.ab-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-actions-row .btn { flex: 1; }
.ab-actions [aria-disabled="true"] { opacity: .55; }
.ab-actions .ab-note { margin-top: 0; text-align: center; }
.ab-mobilebar { display: none; }
@media (max-width: 1239px) {
  .ab-actions { order: 3; }
  .ab-actions > .btn { display: none; }
  .ab-mobilebar { position: sticky; bottom: 0; z-index: 40; display: flex; gap: 10px; margin: 16px -14px 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
  .ab-mobilebar .btn { flex: 1; }
  .ab-mobilebar .btn-primary { flex: 1.4; }
}

/* ---------- KPI tiles ---------- */
.ab-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.ab-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-kpi { gap: 4px; align-content: start; }
.ab-kpi .kpi-value { font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem); overflow-wrap: anywhere; }
.ab-kpi-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-strong); }
.ab-kpi.is-warn .ab-kpi-ico { background: var(--warn-soft); color: var(--warn); }
.ab-kpi.is-bad .ab-kpi-ico { background: var(--bad-soft); color: var(--bad); }
.ab-kpi.is-warn .kpi-value { color: var(--warn); }
.ab-kpi.is-bad .kpi-value { color: var(--bad); }
.ab-kpi-sub { color: var(--ink-3); font-size: var(--fs-sm); }

/* ---------- inventory ---------- */
.ab-level { display: grid; gap: 7px; min-width: 210px; }
.ab-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.ab-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .3s, background .2s; }
.ab-level.is-low .ab-bar i { background: var(--warn); }
.ab-level.is-out .ab-bar i { background: var(--bad); }
.ab-level-txt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.ab-n { font-size: var(--fs); font-variant-numeric: tabular-nums; }
.ab-state { margin-left: auto; }
.ab-adjust { display: flex; align-items: center; gap: 8px; }
.ab-adjust .qty button { width: 32px; height: 36px; }
.ab-adjust .qty input { height: 36px; }
.ab-val { font-weight: 700; }
.ab-moves { margin-top: 24px; }
.ab-mv-list { display: grid; }
.ab-mv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 92px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ab-mv:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-mv-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.ab-mv-ico.is-in { background: var(--ok-soft); color: var(--ok); }
.ab-mv-ico.is-out { background: var(--bad-soft); color: var(--bad); }
.ab-mv-body { min-width: 0; }
.ab-mv-body b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ab-mv-body small { color: var(--ink-3); }
.ab-delta { padding: 2px 10px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-delta.is-in { background: var(--ok-soft); color: var(--ok); }
.ab-delta.is-out { background: var(--bad-soft); color: var(--bad); }
.ab-mv-time { color: var(--ink-3); font-size: var(--fs-sm); text-align: right; white-space: nowrap; }
.ab-mv-empty { padding: 20px 0; text-align: center; color: var(--ink-3); }
.ab-rs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ab-quick { display: flex; gap: 6px; }
.ab-rs-new { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); }
.ab-rs-new b { font-variant-numeric: tabular-nums; }
.ab-arrow { display: inline-block; margin: 0 2px; color: var(--ink-3); vertical-align: middle; }

/* ---------- coupons ---------- */
.ab-code { display: flex; align-items: center; gap: 4px; }
.ab-code .icon-btn { width: 30px; height: 30px; color: var(--ink-3); }
.ab-code-chip { padding: 5px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.ab-note-s, .ab-sub-s { display: block; margin-top: 3px; color: var(--ink-3); font-size: var(--fs-xs); }
.ab-gives { font-weight: 700; }
.ab-usage { display: grid; gap: 5px; min-width: 140px; font-size: var(--fs-sm); }
.ab-usage small { color: var(--ink-3); }
.ab-usage small b { color: var(--ink); }
.ab-prog { height: 6px; }
.ab-prog.is-high > i { background: var(--warn); }
.ab-prog.is-full > i { background: var(--bad); }
.ab-cp-sum { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.ab-cp-sum .ico { flex: none; }
.ab-code-row { display: flex; gap: 8px; }
.ab-code-row .input { flex: 1; }
.ab-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-type { position: relative; cursor: pointer; }
.ab-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ab-type-box { display: grid; align-content: start; justify-items: start; gap: 2px; height: 100%; padding: 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r); color: var(--ink-3); transition: border-color .15s, background .15s, box-shadow .15s; }
.ab-type-box b { margin-top: 4px; color: var(--ink); }
.ab-type-box small { font-size: 12px; line-height: 1.35; }
.ab-type:hover .ab-type-box { border-color: var(--ink-3); }
.ab-type input:checked + .ab-type-box { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.ab-type input:focus-visible + .ab-type-box { box-shadow: var(--ring); }
.ab-cp-active { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.ab-cp-active small { display: block; color: var(--ink-3); }

/* ---------- settings ---------- */
.ab-set { padding: 26px; }
.ab-set-head { margin-bottom: 22px; }
.ab-set-head h2 { font-size: var(--fs-xl); }
.ab-set-head p { margin-top: 4px; color: var(--ink-3); }
.ab-set-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 28px -26px -26px; padding: 16px 26px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); background: var(--surface-2); }
.ab-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: var(--fs-sm); font-weight: 600; }
.ab-saved:empty { display: none; }
.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.ab-fprev-h { margin-bottom: 10px; color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ab-fprev-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.ab-fprev-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-display); font-size: 1.15rem; }
.ab-fprev-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); font-weight: 800; }
.ab-fprev-card ul { display: grid; gap: 10px; color: var(--ink-2); font-size: var(--fs-sm); }
.ab-fprev-card li { display: flex; gap: 10px; align-items: flex-start; }
.ab-fprev-card li .ico { margin-top: 2px; color: var(--brand); }
.ab-fprev-card li span { min-width: 0; overflow-wrap: anywhere; }
.ab-zones .input { min-height: 40px; }
.ab-zones .input-group { max-width: 210px; }
.ab-zones td { vertical-align: top; }
.ab-c-zone small { display: block; color: var(--ink-3); }
.ab-free { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.ab-free-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-strong); }
.ab-free-t { flex: 1; min-width: 220px; }
.ab-free-t b, .ab-free-t small { display: block; }
.ab-free-t small { color: var(--ink-3); }
.ab-free .field { width: 230px; max-width: 100%; }
.ab-block { margin-bottom: 26px; }
.ab-block:last-of-type { margin-bottom: 0; }
.ab-block-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.ab-block-h h3 { font-size: var(--fs-lg); }
.ab-block-h .muted { font-size: var(--fs-sm); }
.ab-keyrow { display: flex; gap: 8px; }
.ab-keyrow .input { flex: 1; min-width: 0; }
.ab-swlist { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); }
.ab-swrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.ab-swrow:last-child { border-bottom: 0; }
.ab-swrow:hover { background: var(--surface-2); }
.ab-swrow-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); }
.ab-swrow-t { display: grid; flex: 1; min-width: 0; }
.ab-swrow-t small { color: var(--ink-3); }
.input-group .input + .pre.ab-post { border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r) var(--r) 0; }
.input-group .input:has(+ .ab-post) { border-radius: var(--r) 0 0 var(--r); }
.ab-set-extra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ab-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ab-count-card { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); }
.ab-count-card .ab-kpi-ico { margin-bottom: 6px; }
.ab-count-card b { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ab-count-card small { color: var(--ink-3); }
.ab-storage-t { margin-top: 10px; color: var(--ink-2); }
[data-slot="storage"] .progress { height: 8px; }
.ab-danger-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding: 18px; border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); border-radius: var(--r-l); background: color-mix(in srgb, var(--bad-soft) 50%, transparent); }
.ab-danger-zone > div { flex: 1; min-width: 240px; }
.ab-danger-zone b, .ab-danger-zone small { display: block; }
.ab-danger-zone small { margin-top: 2px; color: var(--ink-2); }
.ab-json { min-height: 260px; font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .ab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* tables turn into stacked cards on phones */
  .ab-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .ab-selall-m { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 8px; font-weight: 600; color: var(--ink-2); }
  .ab-inl { display: inline !important; }
  .ab-inl-sku { font-size: 12px; }
  .ab-stack, .ab-stack tbody { display: block; }
  .ab-stack thead { display: none; }
  .ab-stack tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
  .ab-stack tbody tr:last-child td, .ab-stack td { padding: 0; border: 0; }
  .ab-stack td { display: block; min-width: 0; }
  .ab-stack tbody tr:hover td { background: none; }
  .ab-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .ab-stack td.num { text-align: left; }
  .ab-stack .ab-was { justify-content: flex-start; }
  .ab-stack .ab-c-prod, .ab-stack .ab-c-acts, .ab-stack .ab-c-usage, .ab-stack .ab-c-code, .ab-stack .ab-c-zone, .ab-stack .ab-c-level { grid-column: 1 / -1; }
  .ab-stack .cell-prod { min-width: 0; padding-right: 30px; }
  .ab-stack .ab-c-chk { position: absolute; top: 14px; right: 14px; width: auto; }
  .ab-stack td.ab-c-acts, .ab-stack tr:hover td.ab-c-acts, .ab-stack tr.is-sel td.ab-c-acts { position: static; width: auto; padding-top: 10px; border-top: 1px solid var(--line); background: none; box-shadow: none; }
  .ab-stack .ab-acts { justify-content: space-between; }
  .ab-stack .ab-acts .icon-btn { width: 44px; height: 40px; border-radius: 10px; }
  .ab-stack .ab-c-acts > .btn { width: 100%; min-height: 40px; }
  .ab-table tr.is-sel { border-color: var(--brand); background: var(--brand-soft); }
  .ab-table tr.is-sel td { background: none; }
  .ab-table .ab-c-acts { white-space: normal; }
  .ab-level { min-width: 0; }
  .ab-zones .input-group { max-width: none; }
  .ab-cp .ab-c-on { position: absolute; top: 14px; right: 14px; }
  .ab-stack.ab-cp td.ab-c-on::before { display: none; }
  .ab-cp .ab-c-code { padding-right: 56px; }
  .ab-inv .ab-c-adj, .ab-inv .ab-c-val { grid-column: 1 / -1; }
  .ab-inv .ab-adjust { justify-content: space-between; }
  .ab-inv .ab-c-adj .ab-adjust .qty { flex: 1; max-width: 220px; }
  .ab-inv .ab-c-adj .ab-adjust .qty input { flex: 1; width: auto; min-width: 0; }
  .ab-inv .ab-c-val { display: flex; align-items: baseline; gap: 10px; }
  .ab-stack.ab-inv td.ab-c-val::before { margin: 0; min-width: 96px; }
  .ab-inv .ab-c-val .ab-was { display: inline; margin: 0 0 0 auto; }
  .ab-code-chip { font-size: 14px; }
}
@media (max-width: 640px) {
  .ab-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-set { padding: 18px; }
  .ab-set-foot { margin: 22px -18px -18px; padding: 14px 18px; }
  .ab-set-foot .btn { flex: 1; }
  .ab-hl { grid-template-columns: 1fr; }
  .ab-opts { grid-template-columns: 1fr; }
  .ab-illus { grid-template-columns: 1fr; }
  .ab-illus-media { max-width: 260px; }
  .ab-swatches { gap: 6px; }
  .ab-swatch { width: 30px; height: 30px; }
  .ab-sec { padding: 18px 16px; }
  .ab-toolbar .select { flex: 1; min-width: 0; }
  .ab-toolbar .grow { flex-basis: 100%; }
  .ab-keyrow .btn span { display: none; }
}
@media (max-width: 560px) {
  .ab-kpis { gap: 10px; }
  .ab-kpi { padding: 14px; }
  .ab-kpi .kpi-value { font-size: 1.2rem; }
  .ab-kpis-3 .ab-kpi:last-child { grid-column: 1 / -1; }
  .ab-types { grid-template-columns: 1fr; }
  .ab-spec-head { display: none; }
  .ab-spec { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "k x" "v x"; }
  .ab-spec > input[data-spec="k"] { grid-area: k; }
  .ab-spec > input[data-spec="v"] { grid-area: v; }
  .ab-spec > .icon-btn { grid-area: x; align-self: center; }
  .ab-spec-actions .ab-note { margin: 4px 0 0; width: 100%; }
  .ab-mv { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 2px; }
  .ab-mv-time { grid-column: 2 / -1; text-align: left; font-size: var(--fs-xs); }
  .ab-code-row { flex-wrap: wrap; }
  .ab-bulk-clear { margin-left: 0; }
  .ab-free .field { width: 100%; }
  .ab-pricesum { gap: 12px 22px; }
  .ab-field-note { display: none; }
}
@media (pointer: coarse) {
  .ab-acts .icon-btn, .ab-photo-bar .icon-btn { width: 40px; height: 40px; }
  .ab-chip { min-height: 40px; padding: 0 14px; }
  .ab-stock-in, .ab-adjust .qty button, .ab-adjust .qty input { min-height: 40px; height: 40px; }
  .ab-code .icon-btn { width: 40px; height: 40px; }
  .ab-checklist li { padding: 10px 0; }
  .ab-tag-in { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ab-spin { animation: none; } }

.ab-zones .ab-c-zone { padding-top: 22px; }
.ab-c-on .switch input:disabled + span { opacity: .45; }
.ab-c-on .switch input:disabled { cursor: not-allowed; }
@media (max-width: 760px) { .ab-zones .ab-c-zone { padding-top: 0; } }

/* ---------- editor and settings: open sections, help text only while you are on a field ---------- */
.shell-admin .ab-sec, .shell-admin .ab-set { padding-inline: 0; }
.shell-admin .ab-sec-ico { display: none; }
.shell-admin .ab-sec-head h2 { font-size: var(--fs-xl); }
.shell-admin .ab-sec { padding-block: 26px; }
.shell-admin .ab-seg { background: none; padding: 0; gap: 22px; border-radius: 0; }
.shell-admin .ab-seg span { min-height: 0; padding: 8px 0; border-radius: 0; border-bottom: 2px solid transparent; }
.shell-admin .ab-seg input:checked + span { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--ink); }
.shell-admin .field[data-field="condition"] .ab-seg { width: auto; }
.shell-admin .field[data-field="condition"] .ab-seg label { flex: 0 0 auto; }
@media (hover: hover) {
  .shell-admin .ab-sec .field:not(:focus-within):not(:hover) :is(.hint, .ab-chips, .ab-chips-l, .ab-note-s),
  .shell-admin .ab-set .field:not(:focus-within):not(:hover) :is(.hint, .ab-chips, .ab-chips-l, .ab-note-s) { opacity: 0; }
  .shell-admin .ab-sec .field :is(.hint, .ab-chips), .shell-admin .ab-set .field :is(.hint, .ab-chips) { transition: opacity .12s; }
}
.shell-admin .ab-actions .btn-ghost, .shell-admin .ab-actions .btn-soft { border: 0; background: none; box-shadow: none; color: var(--ink-2); }
.shell-admin .ab-actions .btn-ghost:hover, .shell-admin .ab-actions .btn-soft:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.shell-admin .ab-prev-card .pcard:hover { border-color: transparent; }
.shell-admin .ab-set-tabs button svg { display: none; }
.shell-admin .ab-swlist { border: 0; border-radius: 0; border-top: 1px solid var(--line); overflow: visible; }
.shell-admin .ab-swrow { padding-inline: 0; }
.shell-admin .ab-swrow:hover { background: none; }
.shell-admin .ab-swrow-ico { display: none; }
.shell-admin .ab-opt-box { border-width: 1px; }
.shell-admin .ab-opt-ico { background: none; width: 24px; }