[hidden] { display: none !important; }
/* ==========================================================================
   Digi design system — tokens and components shared by storefront and admin
   ========================================================================== */

:root {
  --red: #d6001c;
  --red-hover: #b90018;
  --red-50: #fdedee;
  --red-100: #fbd6da;
  --ink: #16171c;
  --ink-2: #26282f;
  --ink-3: #3a3d46;
  --text: #16171c;
  --muted: #5d616c;
  --muted-2: #8b8f99;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --line: #e4e5ea;
  --line-2: #eef0f3;

  --green: #0d7a37;
  --green-50: #e5f5eb;
  --blue: #1a5fd0;
  --blue-50: #e9f1fe;
  --sky: #1b6db3;
  --sky-50: #e4f1fb;
  --purple: #6a3fd4;
  --purple-50: #f0ecfb;
  --amber: #a15800;
  --amber-dot: #d98a00;
  --amber-50: #fff4e0;
  --gray-50: #eef0f2;
  --gray-text: #4c505a;
  --mpesa: #178a2c;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Figtree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(22, 23, 28, .05);
  --shadow: 0 8px 24px rgba(22, 23, 28, .10);
  --focus: 0 0 0 3px rgba(214, 0, 28, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 14px; height: 14px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }

.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }
.link { color: var(--blue); font-weight: 600; }
.link:hover { text-decoration: underline; }
.strike { text-decoration: line-through; color: var(--muted-2); }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r);
  font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap;
  background: var(--surface); color: var(--text);
  transition: background .15s, border-color .15s, color .15s;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--red-hover); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: var(--ink-3); }
.btn-outline { border-color: var(--line); background: var(--surface); }
.btn-outline:hover:not(:disabled) { border-color: #c9cbd2; background: var(--surface-2); }
.btn-danger-outline { border-color: var(--red-100); color: var(--red); background: var(--surface); }
.btn-danger-outline:hover:not(:disabled) { background: var(--red-50); }
.btn-ghost { background: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--bg); }
.btn-dashed { border: 1px dashed #b9bcc5; background: var(--surface); font-weight: 600; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* ─── Forms ────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 13px; font-weight: 700; }
.label .opt { font-weight: 400; color: var(--muted); }
.label .req { color: var(--red); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--red); box-shadow: var(--focus); }
.input:disabled, .select:disabled { background: var(--bg); color: var(--muted); }
.textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2316171c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input-group { display: flex; }
.input-group .addon {
  display: flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r);
  background: var(--surface-2); color: var(--muted); font-size: 14px; white-space: nowrap;
}
.input-group .input { border-radius: 0 var(--r) var(--r) 0; }
.help { font-size: 12px; color: var(--muted); }
.field-error { font-size: 12px; color: var(--red); }
.has-error .input, .has-error .select, .has-error .textarea, .input.is-invalid { border-color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--red); cursor: pointer; }
.errorlist { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--red); }

/* Toggle switch */
.switch { position: relative; display: inline-flex; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #d5d7dd; transition: background .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: var(--focus); }

/* Option cards — radio choices that look like cards */
.option {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.option:hover { border-color: #c9cbd2; }
.option input[type="radio"], .option input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--red); flex: none; }
.option.selected, .option:has(input:checked) { border: 2px solid var(--red); padding: 11px 13px; background: #fff8f8; }
.option .option-title { font-weight: 700; }
.option .option-sub { font-size: 12px; color: var(--muted); }

/* ─── Cards ────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.card-head h2, .card-head h3 { font-size: 16px; }
.card-body { padding: 16px 20px 20px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.divider { height: 1px; background: var(--line); border: 0; margin: 14px 0; }
.section-title { display: flex; align-items: baseline; gap: 10px; }
.section-title .count { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* ─── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--gray-50); color: var(--gray-text);
}
.badge-green { background: var(--green-50); color: var(--green); }
.badge-blue { background: var(--blue-50); color: var(--blue); }
.badge-sky { background: var(--sky-50); color: var(--sky); }
.badge-purple { background: var(--purple-50); color: var(--purple); }
.badge-amber { background: var(--amber-50); color: var(--amber); }
.badge-red { background: var(--red-50); color: var(--red); }
.badge-gray { background: var(--gray-50); color: var(--gray-text); }
.badge-solid-red { background: var(--red); color: #fff; }
.badge-dark { background: var(--ink); color: #fff; }
.badge-lg { height: 24px; padding: 0 10px; font-size: 12px; }
.discount-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--gray-50); color: var(--gray-text); font-size: 11px; font-weight: 700; }
.count-pill.red { background: var(--red); color: #fff; }

.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock-in { color: var(--green); }
.stock-low { color: var(--amber); }
.stock-low::before { background: var(--amber-dot); }
.stock-out { color: var(--muted); }

/* Payment method marks */
.pay-mark {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px;
  border-radius: 4px; border: 1px solid var(--line); background: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; color: var(--ink);
}
.pay-mpesa { background: var(--mpesa); border-color: var(--mpesa); color: #fff; }
.pay-airtel { background: var(--red); border-color: var(--red); color: #fff; }
.pay-visa { color: #1a1f71; font-style: italic; }
.pay-card { background: #eef3fd; border-color: #eef3fd; color: #3c5ea8; }
.pay-cash { background: var(--gray-50); border-color: var(--gray-50); color: var(--gray-text); }

/* ─── Avatars ──────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: 15px; }
.avatar-c1 { background: #1f5fd6; } .avatar-c2 { background: #6a3fd4; } .avatar-c3 { background: #0d7a37; }
.avatar-c4 { background: #a15800; } .avatar-c5 { background: #16171c; } .avatar-c6 { background: #b3261e; }

/* ─── Tables ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  padding: 10px 16px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table tbody tr.is-selected { background: #fff8f8; box-shadow: inset 3px 0 0 var(--red); }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--surface-2); }
.kv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-table th { width: 38%; padding: 11px 20px; text-align: left; font-weight: 500; color: var(--muted); }
.kv-table td { padding: 11px 20px; }
.kv-table tr:nth-child(odd) { background: var(--surface-2); }

/* ─── Tabs ─────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 0;
  font-weight: 700; white-space: nowrap; color: var(--ink);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab .count { font-size: 12px; font-weight: 500; color: var(--muted); }
.tab.active { color: var(--red); border-bottom-color: var(--red); }

.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.segmented a, .segmented button { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; }
.segmented .active { background: var(--ink); color: #fff; }

/* ─── Breadcrumbs, pagination ──────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .i { width: 12px; height: 12px; }
.crumbs .current { color: var(--ink); font-weight: 600; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: var(--r); font-weight: 700; font-size: 13px;
}
.pagination a:hover { background: var(--surface); }
.pagination .current { background: var(--ink); color: #fff; }

/* ─── Progress tracker ─────────────────────────────────────────────────── */
.tracker { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.tracker-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.tracker-step::before {
  content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--line);
}
.tracker-step:first-child::before { display: none; }
.tracker-step.done::before, .tracker-step.current::before { background: var(--red); }
.tracker-dot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--line-2); color: var(--muted);
  font-size: 11px; font-weight: 700; border: 2px solid transparent;
}
.tracker-step.done .tracker-dot { background: var(--red); color: #fff; }
.tracker-step.current .tracker-dot { background: #fff; border-color: var(--red); color: var(--red); }
.tracker-step.cancelled .tracker-dot { background: var(--gray-50); }
.tracker-label { margin-top: 4px; font-weight: 700; font-size: 13px; }
.tracker-step.todo .tracker-label { font-weight: 500; color: var(--muted); }
.tracker-time { font-size: 11px; color: var(--muted); }

/* ─── Quantity stepper ─────────────────────────────────────────────────── */
.qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.qty button { width: 36px; height: 100%; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.qty button:disabled { color: var(--muted-2); cursor: not-allowed; }
.qty input { width: 36px; border: 0; text-align: center; font-weight: 700; background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty input:focus { outline: none; }

/* ─── Empty / error / locked states ────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 20px; }
.empty-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--bg); color: var(--ink-3); }
.empty-icon.red { background: var(--red-50); color: var(--red); }
.empty h2, .empty h3 { font-size: 18px; }
.empty p { color: var(--muted); max-width: 440px; }
.empty .actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

.skeleton { background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 50%, #eef0f3 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ─── Alerts & toasts ──────────────────────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r); font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.alert-error { background: var(--red-50); border-color: var(--red-100); color: #8a0012; }
.alert-success { background: var(--green-50); border-color: #c4e8d1; color: #075c28; }
.alert-warning { background: var(--amber-50); border-color: #f5dfb6; color: #7a4300; }
.alert-info { background: var(--bg); border-color: var(--line); color: var(--ink-3); }

#toasts { position: fixed; z-index: 1000; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 12px 14px;
  border-radius: var(--r); background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: 13px;
  pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: none; }
.toast a { margin-left: auto; font-weight: 700; color: #fff; text-decoration: underline; }
.toast .i { color: #4ade80; }
.toast.error .i { color: #ff8a95; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; }
.dot-red { background: var(--red); } .dot-amber { background: var(--amber-dot); } .dot-green { background: var(--green); } .dot-blue { background: var(--blue); }

.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--bg); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.thumb-lg { width: 72px; height: 72px; }

/* One Save per section (forms split into cards) */
.section-save { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.section-save .state { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--amber); font-weight: 600; margin-right: auto; }
.section-save .state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
form.is-dirty > .card, form.is-dirty.card { box-shadow: 0 0 0 2px var(--amber-dot, #f5a524); }
.section-save .locked-note { display: none; font-size: 12px; color: var(--muted); margin-right: auto; }
fieldset.locked-card { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.locked-card > .card { opacity: .6; }
fieldset.locked-card .locked-note { display: inline; }
fieldset.locked-card .section-save .state { display: none; }

/* In-app notification inbox (store, admin and seller centre) */
.inbox { padding: 0; overflow: hidden; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.inbox-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item:hover { background: var(--surface-2); }
.inbox-item .dot { margin-top: 6px; }
.inbox-item .dot:not(.dot-blue) { visibility: hidden; }
.inbox-text b { display: block; font-size: 14px; font-weight: 600; }
.inbox-item.unread .inbox-text b { font-weight: 800; }
.inbox-text span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.inbox-item time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.inbox-empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.inbox-empty p { margin-top: 8px; }
.bell-count { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.header-bell { position: relative; display: inline-flex; align-items: center; padding: 6px; color: inherit; }

/* Rows of on/off switches (settings cards, notification preferences) */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--line-2); }
.toggle-row b { font-size: 12px; display: block; }
.toggle-row small { font-size: 11px; color: var(--muted); }
.notify-switches { display: flex; align-items: center; gap: 22px; flex: none; }
.notify-switches > * { width: 40px; display: flex; justify-content: center; }
.notify-head { border-top: 0; padding-top: 0; }
.notify-head .notify-switches span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.switch-none { color: var(--muted); }