/* css/marketplace.css
   MARKETPLACE REDESIGN — design tokens + components (Progress Report
   Section 12)
   ─────────────────────────────────────────────────────────────────────────
   Deliberately kept OUT of portal.css, same isolation discipline as the
   rest of this project's feature-specific CSS. Every selector here is
   scoped to a `.v2-*` class, so it can't accidentally match anything in
   portal.css — but as of 2026-07-02 (confirmed: this local project has no
   live deployment yet) these classes are applied directly onto the real
   screens (#screen-dashboard, the order-flow panels, etc.), not a
   separate gated preview. See Progress Report.md, Section 12's Step 1
   revision note for why the original ?v2=1 gate approach was dropped.

   Visual language pulled from T-DRAFT v1/cart.html (the "Molla" Bootstrap
   eCommerce template Ben provided as a reference) and iterated live across
   several mockups before this file was written: Poppins font, a caramel
   accent (#cc9966), uppercase letter-spaced buttons, thin hairline borders
   instead of portal.css's rounded shadowed cards.

   Step 2 (Dashboard redesign) styles go below this comment block; Steps
   3-5 (Marketplace / Distributor Catalog / Cart) will each add their own
   section after that.
════════════════════════════════════════════════════════════════════════ */

:root {
  --v2-font: 'Poppins', sans-serif;

  --v2-accent: #cc9966;
  --v2-accent-dark: #b3814f;
  --v2-accent-light: #faf3ec;

  --v2-ink: #333333;
  --v2-muted: #999999;
  --v2-muted-light: #cccccc;

  --v2-border: #e1e1e1;
  --v2-border-light: #f1f1f1;

  --v2-bg: #ffffff;
  --v2-bg-soft: #fafafa;

  /* Status colors — kept distinct from --v2-accent so order/stock status
     stays readable as status, not just "the brand color everywhere". */
  --v2-status-pending: #d68910;
  --v2-status-transit: #5b7c99;
  --v2-status-delivered: #5a8f3c;
  --v2-status-danger: #c0392b;
}

/* ── SHELL ─────────────────────────────────────────────────────────────
   Applied to any v2 content root so font/color inherit down without
   touching anything outside it. No sizing here on purpose — it's reused
   on panels of very different shapes (full-page and in-flow alike), so
   height/min-height stays the caller's decision, not this class's. */
.v2-shell {
  font-family: var(--v2-font);
  color: var(--v2-ink);
  box-sizing: border-box;
}
.v2-shell * { box-sizing: border-box; }

/* ── BUTTONS ───────────────────────────────────────────────────────────
   Uppercase, letter-spaced, flat — matches the Molla reference and every
   mockup reviewed for Section 12. */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--v2-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: none;
}
.v2-btn-primary { background: var(--v2-accent); color: #fff; }
.v2-btn-primary:hover { background: var(--v2-accent-dark); }
.v2-btn-outline { border-color: var(--v2-ink); color: var(--v2-ink); }
.v2-btn-outline:hover { background: var(--v2-ink); color: #fff; }
.v2-btn-outline-accent { border-color: var(--v2-accent); color: var(--v2-accent); }
.v2-btn-outline-accent:hover { background: var(--v2-accent); color: #fff; }

/* ── TYPE HELPERS ──────────────────────────────────────────────────────
   Small generic helpers reused across every v2 screen. */
.v2-h1 { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.v2-muted { font-size: 13px; color: var(--v2-muted); line-height: 1.6; }
.v2-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--v2-muted);
}
.v2-card {
  background: var(--v2-bg);
  border: 1px solid var(--v2-border-light);
  padding: 18px;
}

/* ════════════════════════════════════════════════════════════════════
   STEP 2 — DASHBOARD (#screen-dashboard, built directly in place)
   ─────────────────────────────────────────────────────────────────────
   #shopApp's structure (unchanged from classic): .dash-header, then
   several .panel siblings (only one .active shown via portal.css's
   `.panel{display:none} .panel.active{display:block}`), then
   #bottomNav — all now wrapped as [.v2-main (header+panels)] +
   [.bottom-nav.v2-nav] so #shopApp can lay them out side-by-side at
   desktop widths with zero JS/routing changes. ════════════════════ */

/* portal.css caps .app at 480px for every screen (registration, login,
   admin uses its own .admin-mode override at 1400px). #shopApp needs
   its own wider cap once the nav becomes a sidebar — ID selector beats
   .app's class selector regardless of file load order, so this is a
   clean, safe override. */
@media (min-width: 1024px) {
  #shopApp.app {
    max-width: 1100px;
    display: flex;
    align-items: stretch;
  }
  #shopApp .v2-main { flex: 1; min-width: 0; }
  #shopApp .bottom-nav.v2-nav { order: -1; }
}

.v2-dash-header {
  font-family: var(--v2-font);
  background: var(--v2-bg);
  border-bottom: 1px solid var(--v2-border-light);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.v2-dash-header .dash-greeting { font-size: 10px; margin-bottom: 2px; }
/* Header simplified to 2 lines to match the dashboard mockup (Progress
   Report Section 12, Step 2 fix): "Karibu," + shop name. The personal
   name (dashUserName) is still populated by loadDashboard() in app.js —
   hidden here rather than removed from the DOM, so no JS edit needed. */
.v2-dash-header .dash-name { display: none; }
.v2-dash-header .dash-shop {
  font-size: 17px;
  font-weight: 600;
  color: var(--v2-ink);
}
.v2-dash-header .dash-shop .badge-verified { display: none; }
.v2-dash-new-order { white-space: nowrap; }

/* ── NAV — bottom bar on mobile, left sidebar column at desktop. Ids
   (nav-home/nav-order/nav-track/nav-profile) and the .nav-item/.active
   classes are unchanged from the classic markup, so app.js's
   showPanel() nav-highlight logic works with zero edits — this block
   is presentation only. */
.bottom-nav.v2-nav {
  font-family: var(--v2-font);
  background: var(--v2-bg);
  border-top: 1px solid var(--v2-border-light);
  box-shadow: none;
}
.nav-item.v2-nav-item { color: var(--v2-muted); }
.nav-item.v2-nav-item.active { color: var(--v2-accent); }
.nav-item.v2-nav-item .nav-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Brand block + Sign out row — sidebar-only (desktop). On mobile the
   bottom-nav stays icon+label only (Sign out is still reachable from the
   Profile panel there), so both are hidden below the 1024px breakpoint. */
.v2-nav-brand { display: none; }
.nav-item.v2-nav-item.v2-nav-signout { display: none; }

@media (min-width: 1024px) {
  .bottom-nav.v2-nav {
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    transform: none;
    width: 190px;
    max-width: 190px;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-top: none;
    border-right: 1px solid var(--v2-border-light);
    padding: 20px 14px;
    gap: 2px;
    z-index: 1;
  }
  .v2-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 0 4px;
  }
  .v2-nav-brand-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: var(--v2-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .v2-nav-brand-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-ink);
  }
  .nav-item.v2-nav-item {
    /* portal.css sets .nav-item{flex:1} for the mobile bottom bar (so the
       4 buttons split it evenly); in this column layout that stretched
       each item to fill the sidebar's full height ("justified" look).
       flex:none stacks them tightly at the top instead. */
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-left: 2px solid transparent;
  }
  .nav-item.v2-nav-item.active {
    background: var(--v2-accent-light);
    border-left-color: var(--v2-accent);
  }
  .nav-item.v2-nav-item .nav-label { font-size: 11px; }

  /* Sign out — pinned to the bottom of the sidebar, visually separated,
     muted (not an active nav destination). flex:1 on the button just
     above it in DOM order isn't available, so this uses margin-top:auto
     on the sign-out button itself to push it down within the flex
     column. */
  .nav-item.v2-nav-item.v2-nav-signout {
    display: flex;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--v2-border-light);
    border-left: none;
    color: var(--v2-muted);
  }
  .nav-item.v2-nav-item.v2-nav-signout .nav-label { font-size: 10px; }
  .nav-item.v2-nav-item.v2-nav-signout:hover { color: var(--v2-ink); }
}

/* ── STATS ─────────────────────────────────────────────────────────── */
.v2-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 18px 20px 0;
}
@media (min-width: 640px) {
  .v2-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.v2-stat-card {
  border: 1px solid var(--v2-border-light);
  padding: 14px 16px;
}
.v2-stat-val { font-size: 22px; font-weight: 700; color: var(--v2-accent); }
.v2-stat-val.v2-stat-pending { color: var(--v2-status-pending); }
.v2-stat-val.v2-stat-transit { color: var(--v2-status-transit); }
.v2-stat-val.v2-stat-delivered { color: var(--v2-status-delivered); }

/* ── RECENT ORDERS + REFERRAL — one column mobile, two columns desktop */
.v2-dash-columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
@media (min-width: 900px) {
  .v2-dash-columns { flex-direction: row; align-items: flex-start; }
  .v2-dash-main { flex: 1; min-width: 0; }
  .v2-dash-side { width: 280px; flex-shrink: 0; }
}

.v2-referral-code {
  border: 1px dashed var(--v2-border);
  text-align: center;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v2-ink);
}

/* ── RECENT ORDERS ROWS — app.js's renderOrderHistory() generates plain
   .order-item/.o-ref/.o-date/.o-total/.o-items markup (portal.css
   classes, reused all over the admin panel too) inside #orderList.
   Scoping every override to #orderList keeps this from touching
   anything else that happens to use the same class names elsewhere. */
#orderList .order-item {
  font-family: var(--v2-font);
  background: var(--v2-bg);
  border: 1px solid var(--v2-border-light);
  border-radius: 0;
  padding: 14px 0;
  border-left: none; border-right: none; border-top: none;
}
#orderList .order-item + .order-item { margin-top: 0; }
#orderList .o-ref { color: var(--v2-ink); font-weight: 600; }
#orderList .o-date { color: var(--v2-muted); }
#orderList .o-total { color: var(--v2-accent); }
#orderList .o-items { color: var(--v2-muted); }
#orderList .badge {
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#orderList .btn.btn-xs {
  font-family: var(--v2-font);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--v2-accent);
  border-color: var(--v2-accent);
}

/* ── "View all orders" link — below the recent-orders list, per mockup */
.v2-view-all-wrap { text-align: center; margin-top: 16px; }
.v2-view-all-link {
  font-family: var(--v2-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--v2-accent);
  text-decoration: none;
}
.v2-view-all-link:hover { color: var(--v2-accent-dark); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   STEP 3 — MARKETPLACE (#panel-marketplace)
   ─────────────────────────────────────────────────────────────────────
   Sidebar filters + product grid, built from the "no nav column" mockup
   (nav lives in the Dashboard's sidebar, not here — see Step 2 above).
   Same binary breakpoint as the rest of #shopApp: stacked/mobile below
   1024px (chip row for filters), sidebar+grid two-column at ≥1024px —
   kept in lockstep with the outer #shopApp breakpoint since that's the
   point .v2-main actually gets extra width to give the sidebar room. */

.v2-mkt-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--v2-border-light);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-mkt-crumb { font-size: 10px; color: var(--v2-muted); margin-bottom: 2px; }
.v2-mkt-crumb-sep { margin: 0 4px; }
.v2-mkt-crumb-current { color: var(--v2-accent); }

.v2-mkt-header-actions { display: flex; flex-direction: column; gap: 10px; }
.v2-mkt-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--v2-border);
  border-radius: 2px;
  height: 38px;
  padding: 0 12px;
  gap: 8px;
}
.v2-mkt-search-icon { color: var(--v2-muted); display: flex; }
.v2-mkt-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--v2-font);
  font-size: 13px;
  background: none;
  min-width: 0;
}
.v2-mkt-cart-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--v2-accent);
  color: var(--v2-accent);
  background: none;
  padding: 9px 14px;
  font-family: var(--v2-font);
  font-size: 11px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.v2-mkt-cart-chip:hover { background: var(--v2-accent-light); }

@media (min-width: 1024px) {
  .v2-mkt-header { flex-direction: row; align-items: center; justify-content: space-between; }
  .v2-mkt-header-actions { flex-direction: row; align-items: center; }
  .v2-mkt-search { width: 300px; }
}

/* Mobile quick-filter chips — hidden once the sidebar takes over */
.v2-mkt-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 20px;
  border-bottom: 1px solid var(--v2-border-light);
}
.v2-mkt-chip {
  flex-shrink: 0;
  font-family: var(--v2-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-ink);
  background: var(--v2-bg-soft);
  border: 1px solid var(--v2-border);
  border-radius: 20px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.v2-mkt-chip.active { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }

.v2-mkt-body { display: flex; flex-direction: column; }
.v2-mkt-sidebar { display: none; } /* mobile: filters live in the chip row above */

.v2-mkt-main { padding: 16px 20px 20px; min-width: 0; }
.v2-mkt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--v2-border-light);
}
.v2-mkt-count { font-size: 11px; color: var(--v2-muted); }
.v2-mkt-sort { display: flex; align-items: center; gap: 8px; }
.v2-mkt-sort select {
  font-family: var(--v2-font);
  font-size: 11px;
  border: 1px solid var(--v2-border);
  border-radius: 2px;
  padding: 6px 8px;
  color: var(--v2-ink);
  background: var(--v2-bg);
}

.v2-mkt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 1024px) {
  .v2-mkt-body { flex-direction: row; }
  .v2-mkt-chip-row { display: none; } /* sidebar takes over at desktop */
  .v2-mkt-sidebar {
    display: block;
    width: 220px;
    flex-shrink: 0;
    padding: 20px 20px 20px 20px;
    border-right: 1px solid var(--v2-border-light);
    box-sizing: border-box;
  }
  .v2-mkt-main { flex: 1; padding: 20px 24px; }
  .v2-mkt-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.v2-mkt-filter-group { margin-bottom: 20px; }
.v2-mkt-filter-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-ink);
  margin-bottom: 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--v2-border-light);
}
.v2-mkt-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
  cursor: pointer;
}
.v2-mkt-check:last-child { margin-bottom: 0; }
.v2-mkt-check input { accent-color: var(--v2-accent); }
.v2-mkt-check em {
  font-style: normal;
  font-size: 10px;
  color: var(--v2-muted);
}

.v2-mkt-card { cursor: pointer; }
.v2-mkt-card-media {
  position: relative;
  background: var(--v2-bg-soft);
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.v2-mkt-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v2-mkt-card-noimg { font-size: 10px; color: var(--v2-muted-light); }
.v2-mkt-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--v2-status-danger);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
}
.v2-mkt-card-dist {
  font-size: 9px;
  color: var(--v2-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.v2-mkt-card-name { font-size: 12px; font-weight: 500; margin-bottom: 4px; color: var(--v2-ink); }
.v2-mkt-card-price { font-size: 13px; font-weight: 700; color: var(--v2-accent); }

/* Vendor tag on Marketplace cards — added 2026-07-02 follow-up (Ben: "not
   sure where we lost Vendors"). Distributors and Vendors were always
   listed together here (both come from DISTRIBUTOR_CATALOGS), just with
   no visual marker distinguishing the two — this adds one, deliberately
   muted/neutral rather than the accent color so it doesn't compete with
   the distributor/vendor name itself. */
.v2-mkt-card-vendor-tag {
  display: inline-block;
  background: var(--v2-muted-light);
  color: var(--v2-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 3px;
  vertical-align: middle;
}

/* Dashboard header gets a cart chip too (same .v2-mkt-cart-chip class as
   Marketplace's) — grouped with "+ New order" so both live-action buttons
   sit together on the header's right side. */
.v2-dash-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   STEP 5 — CART (#panel-order-s3, restyled in place)
   ─────────────────────────────────────────────────────────────────────
   Item table + summary aside, borrowed from T-DRAFT v1/cart.html
   (Molla) — table-cart's product/price/qty/total columns become a
   simpler read-only review table (quantities are edited back on the
   distributor's catalog page, not here — see "← Edit Order"), and
   Molla's shipping-options block is dropped for the payment section
   this app actually has (M-Pesa paybill instructions, transaction code,
   confirm + submit) — same "keep the structure, adapt the facets to
   real data" pattern used for the Marketplace filter sidebar. Every
   dynamic-content id inside is unchanged from the classic markup — see
   the file-level comment above #panel-order-s3 in karibu.html. */

.v2-cart-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--v2-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v2-cart-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.v2-cart-main { min-width: 0; }
.v2-cart-summary { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 1024px) {
  .v2-cart-body { flex-direction: row; align-items: flex-start; }
  .v2-cart-main { flex: 1; }
  .v2-cart-summary { width: 300px; flex-shrink: 0; }
}

/* ── Item table — borrowed from Molla's table-cart column rhythm. The
   rows themselves are generated by populateReview() in app.js (plain
   <tr><td> markup, no classes to hook), so this is scoped to the table
   shell + its cells directly rather than per-row classes. */
.v2-cart-table-wrap { margin-top: 4px; }
.v2-cart-table { width: 100%; border-collapse: collapse; font-family: var(--v2-font); }
.v2-cart-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--v2-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v2-border-light);
}
.v2-cart-table tbody td {
  padding: 14px 6px;
  border-bottom: 1px solid var(--v2-border-light);
  font-size: 13px;
  color: var(--v2-ink);
  vertical-align: top;
}
.v2-cart-table tbody td:first-child { padding-left: 0; }
.v2-cart-table tbody td:last-child { padding-right: 0; }
.v2-cart-table .item-meta { font-size: 11px; color: var(--v2-muted); margin-top: 3px; }

/* ── Summary card — Molla's "summary summary-cart" aside */
.v2-cart-summary-title {
  font-family: var(--v2-font);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--v2-ink);
}
.v2-cart-summary .grand-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--v2-font);
  padding: 8px 0;
}
.v2-cart-summary .gt-label { font-size: 12px; }
.v2-cart-summary .gt-amount { font-size: 13px; font-weight: 700; }
.v2-cart-total-row {
  border-top: 1px solid var(--v2-border);
  margin-top: 4px;
  padding-top: 14px !important;
}
.v2-cart-total-row .gt-label { font-size: 13px; font-weight: 600; color: var(--v2-ink); }
.v2-cart-total-row .gt-amount { font-size: 17px; color: var(--v2-accent); }

.v2-cart-continue-shopping { width: 100%; }

/* Payment section — moved into the main column from the sidebar (2026-07-02
   "chaotic" fix, see the comment above #panel-order-s3 in karibu.html).
   Just needs a clear visual break from the item table above it; the
   font/color/radius treatment itself comes from the shared selector
   group further down this file (same one .review-card uses). */
.v2-cart-payment {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-border-light);
}

/* ════════════════════════════════════════════════════════════════════
   STEP 4 — DISTRIBUTOR / VENDOR CATALOG (#panel-order-s2, restyled in place)
   ─────────────────────────────────────────────────────────────────────
   Ben's ask: after choosing a distributor/vendor, the item-picking
   screen should already feel like part of the new Cart experience, not
   a jump back to the old design. buildCard()/renderProducts()/
   _buildDistCard()/showDistributorListing() in app.js already render
   almost exactly the Cart mockup's row anatomy (thumbnail, name, SKU,
   price, qty stepper, subtotal) — this is a CSS-only restyle of those
   existing classes, scoped to #panel-order-s2 so it can't leak into the
   Admin panel (which doesn't reuse these class names, confirmed via
   grep, but scoping is free insurance). Zero JS changes — every
   id/class stays exactly as buildCard()/changeQty()/setQty() expect. */

#panel-order-s2 { font-family: var(--v2-font); color: var(--v2-ink); }
#panel-order-s2 .page-heading { font-family: var(--v2-font); font-weight: 600; }
#panel-order-s2 .page-sub { font-family: var(--v2-font); color: var(--v2-muted); }

/* ── Distributor / Vendor listing cards ── */
#panel-order-s2 .dist-card {
  font-family: var(--v2-font);
  border: 1px solid var(--v2-border-light);
  border-radius: 2px;
  background: var(--v2-bg);
}
#panel-order-s2 .dist-card:hover { border-color: var(--v2-accent); }
#panel-order-s2 .dist-card.selected {
  border-color: var(--v2-accent);
  background: var(--v2-accent-light);
}
#panel-order-s2 .dist-card-name { font-family: var(--v2-font); color: var(--v2-ink); font-weight: 600; }
#panel-order-s2 .dist-card-meta span {
  font-family: var(--v2-font) !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#panel-order-s2 .dist-card-items {
  font-family: var(--v2-font);
  border-radius: 2px !important;
  font-weight: 700;
}
#panel-order-s2 .dist-card-check { background: var(--v2-accent) !important; }

/* ── Catalog header (title, badge, back button) ── */
#panel-order-s2 .dist-catalog-header { border-radius: 2px; }
#panel-order-s2 .dist-back-btn { font-family: var(--v2-font); }
#panel-order-s2 .dist-catalog-title { font-family: var(--v2-font); font-weight: 600; }
#panel-order-s2 .dist-catalog-badge {
  font-family: var(--v2-font);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Item rows — the actual "land into the new cart design" ask. Same
   row anatomy as the Cart's item table: thumbnail, name+SKU, price, qty
   stepper, subtotal. Cards stack on mobile (existing behavior,
   unchanged) — this only changes color/font/radius, not layout. */
#panel-order-s2 .product-card {
  font-family: var(--v2-font);
  border: 1px solid var(--v2-border-light);
  border-radius: 2px;
  background: var(--v2-bg);
}
#panel-order-s2 .product-card.has-qty {
  border-color: var(--v2-accent);
  background: var(--v2-accent-light);
}
#panel-order-s2 .product-card.custom-item { border-color: var(--v2-muted); }
#panel-order-s2 .product-card.custom-item.has-qty { border-color: var(--v2-accent); background: var(--v2-accent-light); }
#panel-order-s2 .product-name { font-family: var(--v2-font); font-weight: 500; color: var(--v2-ink); font-size: 13px; }
#panel-order-s2 .product-price { color: var(--v2-accent); font-family: var(--v2-font); }
#panel-order-s2 .custom-item .product-price { color: var(--v2-accent); }
#panel-order-s2 .product-thumb { border-radius: 4px; width: 56px; }
#panel-order-s2 .product-thumb-placeholder {
  border-radius: 4px;
  background: var(--v2-bg-soft);
  color: var(--v2-muted-light);
  font-size: 10px;
}
#panel-order-s2 .product-sku, #panel-order-s2 .product-wholesale { font-family: var(--v2-font); color: var(--v2-muted); }
#panel-order-s2 .stock-badge {
  border-radius: 2px;
  font-family: var(--v2-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#panel-order-s2 .stock-badge.low { background: #fef2f2; color: var(--v2-status-danger); }
#panel-order-s2 .stock-badge.available { background: var(--v2-accent-light); color: var(--v2-accent-dark); }

#panel-order-s2 .stepper-btn {
  border-radius: 2px;
  font-family: var(--v2-font);
  border-color: var(--v2-border);
  color: var(--v2-muted);
}
/* Plus button — matches the minus button exactly now (no filled/
   accent-colored highlight), per Ben's request. portal.css's base
   .stepper-btn.plus rule fills it solid blue by default, so this has
   to explicitly neutralize background/border/color, not just omit an
   override. */
#panel-order-s2 .stepper-btn.plus {
  background: none !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-muted) !important;
}
#panel-order-s2 .stepper-btn.plus:active { background: var(--v2-border-light) !important; }
#panel-order-s2 .stepper-input { font-family: var(--v2-font); border-radius: 2px; border-color: var(--v2-border); }
#panel-order-s2 .stepper-input:focus { border-color: var(--v2-accent); }
#panel-order-s2 .product-subtotal { font-family: var(--v2-font); color: var(--v2-accent); }
#panel-order-s2 .product-subtotal.zero { color: var(--v2-muted-light); }

#panel-order-s2 .add-item-box, #panel-order-s2 .box-title { font-family: var(--v2-font); }

/* ── PRODUCT / PRICE / QUANTITY / TOTAL table — borrowed from
   T-DRAFT v1/cart.html's table-cart. Markup comes from buildCard()'s
   override in marketplace.js (.v2-cat-col-product/-price/-qty/-total);
   this is the layout half of that change. Mobile: each row shows its
   own small Price/Quantity/Total labels, stacked. Desktop (≥1024px,
   same breakpoint as the rest of #shopApp): a shared header row above
   the list replaces the per-row labels, and rows become true aligned
   columns — same "table collapses to labeled cards on narrow screens"
   pattern Molla's own table-mobile class uses. */
#panel-order-s2 .v2-cat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
#panel-order-s2 .v2-cat-col-product {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
#panel-order-s2 .v2-cat-product-info { min-width: 0; flex: 1; }
#panel-order-s2 .v2-cat-col-price,
#panel-order-s2 .v2-cat-col-qty,
#panel-order-s2 .v2-cat-col-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
#panel-order-s2 .v2-cat-col-price { font-size: 13px; font-weight: 600; color: var(--v2-ink); }
#panel-order-s2 .v2-cat-col-qty { flex: 1.4; }
#panel-order-s2 .v2-cat-col-total { align-items: flex-end; text-align: right; }
#panel-order-s2 .v2-cat-col-total .product-subtotal { font-weight: 700; }
#panel-order-s2 .v2-cat-col-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--v2-muted);
}
/* Remove column — its own slot after Total (matches T-DRAFT v1/cart.html's
   empty final <th></th> + .btn-remove column), not squeezed inside the
   Total cell. Works for every row now, not just custom items:
   buildCard() wires catalog rows to setQty(id,0) (zeroes the quantity,
   the item stays in the distributor's catalog) and custom rows to
   removeCustomItem(id) (actually deletes it, since it was one-off). */
#panel-order-s2 .v2-cat-col-remove { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
#panel-order-s2 .v2-cat-remove-btn {
  border: none;
  background: none;
  color: var(--v2-muted-light);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
#panel-order-s2 .v2-cat-remove-btn:hover { color: var(--v2-status-danger); }

#panel-order-s2 .v2-cat-table-header { display: none; }

@media (min-width: 1024px) {
  #panel-order-s2 .v2-cat-table-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 14px 10px;
    border-bottom: 2px solid var(--v2-border-light);
    margin-bottom: 6px;
  }
  #panel-order-s2 .v2-cat-table-header span {
    font-family: var(--v2-font);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v2-muted);
  }
  /* Product absorbs the leftover row width; Price/Quantity/Total/Remove
     get fixed slot widths right next to it instead of each being
     flex:1 — flex:1 on every column let them balloon out to fill the
     full row width, stranding big empty gaps between them. Header
     cells use the same fixed widths so they line up with the rows.
     Spacing between columns is now per-pair via margin-left (not a
     uniform `gap`), so Product↔Price can sit tight while Price↔Quantity
     gets extra breathing room, per Ben's request. */
  #panel-order-s2 .v2-cat-th-product { flex: 1; min-width: 0; }
  #panel-order-s2 .v2-cat-th-price { flex: 0 0 90px; margin-left: 6px; }
  #panel-order-s2 .v2-cat-th-qty { flex: 0 0 120px; margin-left: 40px; text-align: center; }
  #panel-order-s2 .v2-cat-th-total { flex: 0 0 90px; margin-left: 16px; text-align: right; }
  #panel-order-s2 .v2-cat-th-remove { flex: 0 0 28px; margin-left: 16px; }

  #panel-order-s2 .v2-cat-row { flex-wrap: nowrap; gap: 0; }
  #panel-order-s2 .v2-cat-col-product { width: auto; flex: 1; min-width: 0; }
  #panel-order-s2 .v2-cat-col-price { flex: 0 0 90px; margin-left: 6px; }
  #panel-order-s2 .v2-cat-col-qty { flex: 0 0 120px; margin-left: 40px; align-items: center; }
  #panel-order-s2 .v2-cat-col-qty .stepper { justify-content: center; }
  #panel-order-s2 .v2-cat-col-total { flex: 0 0 90px; margin-left: 16px; }
  #panel-order-s2 .v2-cat-col-remove { flex: 0 0 28px; margin-left: 16px; }
  #panel-order-s2 .v2-cat-col-label { display: none; } /* header row replaces these */
}

/* ── Sticky bar — lives outside #panel-order-s2 in the DOM (toggled via
   JS regardless of which panel is active), so restyled directly. */
.sticky-bar { font-family: var(--v2-font); border-radius: 2px 2px 0 0; }
.sticky-count { font-family: var(--v2-font); }
.sticky-total { font-family: var(--v2-font); color: var(--v2-accent); }

/* Step indicator dots (panel-order-s1's o-dot1..4, panel-order-s2's
   odot1b..4b) — the "current step" dot uses the brand accent instead of
   plain dark ink, matching every other "active" indicator in the app
   (nav items, filter chips, etc). */
#panel-order-s1 .step-dot.active,
#panel-order-s2 .step-dot.active {
  background: var(--v2-accent) !important;
  border-color: var(--v2-accent) !important;
}

/* ════════════════════════════════════════════════════════════════════
   REMAINING CLASSIC PANELS — Address form, Order Success, Track,
   Profile, + the Cart's customer-details review card
   ─────────────────────────────────────────────────────────────────────
   These panels lean entirely on portal.css's original CSS custom
   properties (--font, --blue, --gray-*, --radius) — including inside
   dynamically-rendered content (renderTrackingView(), loadProfile(),
   the order-success summary in app.js), since those functions build
   HTML with inline `style="color:var(--gray-900)"`-style attributes.
   Custom properties resolve through the normal CSS cascade even when
   referenced via var() inside an inline style attribute, so redefining
   them scoped to each panel restyles EVERYTHING inside — every existing
   class (.field, .btn, .card, .alert, .review-row, .success-*,
   .track-*) AND every JS-generated inline style — with zero JS edits
   and zero risk of missing an element one at a time.

   #panel-track is deliberately EXCLUDED from the --blue remap: it's the
   one panel that renders real order-status badges (statusBadge() →
   .badge-processing/.badge-transit, built on --blue/--blue-light with
   hardcoded text colors) and the tracking pipeline's "active" step dot
   also sets background:var(--blue) inline. Remapping --blue there would
   collide with those badges (background shifts to caramel, text stays
   literally blue) and blur the meaningful "in-progress" blue against
   the brand accent — same "status colors stay distinct from the accent"
   rule Step 2's order badges and the Marketplace's stock badge already
   follow. Neutral tokens (font/gray/radius) are still remapped there —
   only the semantic blue is spared. */

#panel-order-s1,
#panel-order-success,
#panel-profile,
#panel-order-s3 .review-card,
#panel-order-s3 .v2-cart-payment,
/* Professional Buyer login/register/forgot-password — added 2026-07-02,
   Progress Report Section 13. #screen-login (Shop Owner) is deliberately
   NOT in this list — Ben asked for it to stay exactly as it is; only the
   buyer-facing auth screens get the v2 treatment. Structurally these
   reuse .login-wrap/.login-box/.field/.btn/.alert, the exact same classes
   #screen-login itself uses, so this remap is the ONLY change needed to
   make them look like native parts of the redesigned app. */
#screen-login-buyer,
#screen-register-buyer,
#screen-forgot-password-buyer {
  /* Plain inheritance handles most text (headings, labels, review rows)
     — .page-heading etc don't declare font-family:var(--font)
     themselves, they just inherit whatever's already resolved, so this
     needs to be a real font-family declaration here, not only the
     --font custom-property redefinition below (that part only reaches
     the handful of elements — input/select/textarea/button, .btn —
     that explicitly write font-family:var(--font) themselves). */
  font-family: var(--v2-font);
  --font: var(--v2-font);
  --blue: var(--v2-accent);
  --blue-light: var(--v2-accent-light);
  --blue-dark: var(--v2-accent-dark);
  --gray-900: var(--v2-ink);
  --gray-700: var(--v2-ink);
  --gray-600: var(--v2-muted);
  --gray-400: var(--v2-muted);
  --gray-300: var(--v2-muted-light);
  --gray-200: var(--v2-border);
  --gray-100: var(--v2-border-light);
  --gray-50: var(--v2-bg-soft);
  --radius: 2px;
  --radius-sm: 2px;
}
#panel-track {
  font-family: var(--v2-font);
  --font: var(--v2-font);
  --gray-900: var(--v2-ink);
  --gray-700: var(--v2-ink);
  --gray-600: var(--v2-muted);
  --gray-400: var(--v2-muted);
  --gray-300: var(--v2-muted-light);
  --gray-200: var(--v2-border);
  --gray-100: var(--v2-border-light);
  --gray-50: var(--v2-bg-soft);
  --radius: 2px;
  --radius-sm: 2px;
}

/* .alert-info/.alert-success/.alert-warn/.alert-danger hardcode their
   text/border color as literal hex (only the background follows a
   variable) — without this, the --blue-light remap above would leave
   .alert-info with a caramel background but leftover blue text/border. */
#panel-order-s1 .alert-info,
#panel-order-success .alert-info,
#panel-profile .alert-info,
#screen-register-buyer .alert-info,
#screen-forgot-password-buyer .alert-info {
  color: var(--v2-accent-dark);
  border-color: var(--v2-accent);
}

/* Buttons: uppercase/letter-spaced to match .v2-btn used everywhere else
   in the app — portal.css's plain .btn doesn't do this on its own. */
#panel-order-s1 .btn,
#panel-order-success .btn,
#panel-profile .btn,
#screen-login-buyer .btn,
#screen-register-buyer .btn,
#screen-forgot-password-buyer .btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}