/* ===== GlobeTrader Dashboard Stylesheet ===== */

:root {
  --blue: #0e29a8;
  --blue-600: #1d3ce6;
  --blue-700: #1530b8;
  --blue-bg: #0f2dc9;
  --sidebar: #052B52;
  --sidebar-2: #0e29a8;
  --sidebar-active: #1f47ff;
  --ink: #0e1726;
  --ink-2: #1f2a44;
  --muted: #6b7280;
  --muted-2: #9aa3b2;
  --line: #e6e8ee;
  --line-2: #eef0f4;
  --bg: #f5f7fb;
  --card: #ffffff;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --orange: #c2410c;
  --orange-bg: #ffedd5;
  --purple: #6d28d9;
  --purple-bg: #ede9fe;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0a1f8a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased
}

body {
  min-height: 100vh
}

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh
}

.sidebar {
  background: var(--sidebar);
  color: #cdd5ff;
  padding: 20px 0;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  z-index: 50
}

.main {
  background: var(--bg);
  min-height: 100vh;
  border-top-left-radius: 0
}

/* ===== Sidebar ===== */
.brand {
  display: flex;
  align-items: center;
  padding: 0 20px 22px
}

.brand-logo {
  width: 180px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto
}

.brand a,
.site-footer-brand a {
  display: inline-flex;
  text-decoration: none;
  line-height: 0
}

.nav-section {
  padding: 14px 20px 6px;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #7d8bd4;
  font-weight: 700
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #cdd5ff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500
}

.nav a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff
}

.nav a.active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08)
}

.nav a .ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor
}

.nav .badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1
}

.nav .badge.is-empty {
  display: none
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px 0
}

.welcome {
  min-width: 0;
  flex: 1 1 auto
}

.welcome h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--ink)
}

.welcome p {
  margin: 2px 0 0;
  color: #6b7280;
  font-size: 13px;
  overflow-wrap: break-word
}

.topbar .grow {
  flex: 1
}

.search {
  position: relative;
  width: 320px
}

.search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  color: var(--ink);
  outline: none
}

.search input::placeholder {
  color: #9aa3b2
}

.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b2
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none
}

.btn:hover {
  background: var(--blue-600)
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  color: #374151
}

.icon-btn .dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06)
}

/* ===== Content ===== */
.content {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.card {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03)
}

.card-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 10px
}

.card-h h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink)
}

.card-h p {
  margin: 2px 0 0;
  color: #6b7280;
  font-size: 12px
}

.link {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none
}

.link:hover {
  text-decoration: underline
}

/* ===== KPI cards ===== */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.kpi {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.kpi .top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.kpi .label {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #9aa3b2;
  font-weight: 700
}

.kpi .iconwrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.kpi .title {
  font-size: 13px;
  color: #374151;
  font-weight: 500
}

.kpi .value {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  line-height: 1
}

.kpi .value .currency {
  color: var(--ink)
}

.kpi .sub {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px
}

.sub.green {
  color: #16a34a
}

.sub.amber {
  color: #b45309
}

.sub.muted {
  color: #6b7280
}

/* ===== Tables ===== */
table {
  width: 100%;
  border-collapse: collapse
}

th {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #9aa3b2;
  font-weight: 700;
  text-align: left;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line-2);
  background: #fafbfc
}

td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-2)
}

tr:last-child td {
  border-bottom: 0
}

td .id {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px
}

td.amount {
  font-weight: 700;
  color: var(--ink)
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: .3px
}

.pill.green {
  background: var(--green-bg);
  color: #15803d
}

.pill.red {
  background: var(--red-bg);
  color: #b91c1c
}

.pill.amber {
  background: var(--amber-bg);
  color: #92400e
}

.pill.blue {
  background: #dbeafe;
  color: #1e40af
}

.pill.violet {
  background: #ede9fe;
  color: #6d28d9
}

.pill.orange {
  background: var(--orange-bg);
  color: #9a3412
}

.pill.purple {
  background: var(--purple-bg);
  color: #5b21b6
}

.more {
  color: #9aa3b2;
  cursor: pointer;
  font-weight: 700
}

/* ===== Two-col grids ===== */
.grid-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px
}

.grid-2-alt {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px
}

/* ===== Messages list ===== */
.msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-2)
}

.msg-row:last-child {
  border-bottom: 0
}

.msg-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px
}

.msg-av.golf {
  background: linear-gradient(135deg, #fb923c, #f97316)
}

.msg-av.yard {
  background: #1f2937
}

.msg-av.airfort {
  background: #e0e7ff;
  color: #1e3a8a
}

.msg-body {
  flex: 1;
  min-width: 0
}

.msg-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.msg-text {
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.msg-time {
  font-size: 11px;
  color: #9aa3b2;
  white-space: nowrap;
  margin-left: 8px
}

/* ===== Active RFQs ===== */
.rfq-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1.2fr;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2)
}

.rfq-row:last-child {
  border-bottom: 0
}

.rfq-prod {
  display: flex;
  align-items: center;
  gap: 12px
}

.thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-2)
}

.rfq-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

/* ===== Stores follow ===== */
.store-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-2)
}

.store-row:last-child {
  border-bottom: 0
}

.store-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px
}

.store-logo.byrd {
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  letter-spacing: .5px
}

.store-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

.browse-btn {
  margin: 14px 20px 18px;
  display: flex;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer
}

.browse-btn:hover {
  background: var(--blue-600)
}

/* ===== Top categories ===== */
.bar-row {
  padding: 12px 20px
}

.bar-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 6px
}

.bar-top .pct {
  font-weight: 700;
  color: var(--ink)
}

.bar {
  height: 6px;
  border-radius: 99px;
  background: #eef2f7;
  overflow: hidden
}

.bar>span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 99px
}

/* ===== Wishlist ===== */
.wish-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-2)
}

.wish-row:last-child {
  border-bottom: 0
}

.wish-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

.wish-price {
  font-size: 11px;
  color: #6b7280
}

.browse-more {
  margin: 14px 20px 18px;
  display: flex;
  justify-content: center;
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  background: #fff
}

/* ===== Product grids ===== */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 6px 20px 20px
}

.prod {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column
}

.prod .img {
  aspect-ratio: 1.35/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px
}

.ribbon.amber {
  background: #f59e0b;
  color: #1a1300
}

.ribbon.purple {
  background: #7c3aed
}

.prod-body {
  padding: 12px
}

.sku {
  font-size: 10px;
  color: #9aa3b2;
  letter-spacing: .5px;
  font-weight: 600
}

.prod-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 6px;
  line-height: 1.3
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.price {
  font-size: 15px;
  font-weight: 800;
  color: var(--blue)
}

.price small {
  font-size: 11px;
  color: #9aa3b2;
  font-weight: 500
}

.cart-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer
}

/* ===== Most ordered ===== */
.most-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff
}

.most-img {
  aspect-ratio: 1.35/1;
  border-radius: 8px;
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #eef2ff;
  color: var(--blue);
  border: 0;
  border-radius: 8px;
  padding: 9px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit
}

.reorder-btn:hover {
  background: #e0e7ff
}

/* ===== Sourcing CTA banner ===== */
.cta {
  background: var(--blue);
  border-radius: 14px;
  color: #fff;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px
}

.cta .ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.cta .txt {
  flex: 1
}

.cta h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700
}

.cta p {
  margin: 2px 0 0;
  color: #cfd6ff;
  font-size: 13px
}

.cta .btn-w {
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  font-family: inherit
}

/* svg helpers */
.ic {
  width: 16px;
  height: 16px
}

/* ===== Store Page ===== */

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px
}

/* Horizontal scroll container */
.store-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch
}

.store-scroll::-webkit-scrollbar {
  height: 6px
}

.store-scroll::-webkit-scrollbar-track {
  background: var(--line-2);
  border-radius: 99px
}

.store-scroll::-webkit-scrollbar-thumb {
  background: #c4cad4;
  border-radius: 99px
}

.store-scroll::-webkit-scrollbar-thumb:hover {
  background: #9aa3b2
}

/* Store card base */
.store-card {
  min-width: 320px;
  max-width: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: box-shadow .2s ease
}

.store-card:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08)
}

/* Featured store cards (Stores You Follow) — blue left border */
.store-card--featured {
  border-left: 3px solid var(--blue)
}

.store-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px
}

.store-card__logo {
  width: 80px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center
}

.store-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.store-card__badge {
  border-radius: 6px;
  font-size: 10px;
  padding: 3px 8px
}

.store-card__category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase
}

.store-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2
}

.store-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px
}

.store-card__score {
  font-weight: 700;
  color: var(--ink)
}

.store-card__reviews {
  color: var(--muted);
  font-size: 12px
}

.store-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 8px;
  flex: 1
}

.store-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease
}

.store-card__btn:hover {
  background: var(--blue);
  color: #fff
}

/* ===== Sidebar user footer ===== */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: var(--sidebar)
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cdd5ff;
  flex-shrink: 0
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff
}

.sidebar-user-role {
  font-size: 11px;
  color: #7d8bd4
}

/* ===== Seller sidebar: sky-blue theme (distinguishes seller from buyer) ===== */
.sidebar[data-sidebar="seller"] {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  color: #f0f9ff
}

.sidebar[data-sidebar="seller"] .nav-section {
  color: rgba(255, 255, 255, .72)
}

.sidebar[data-sidebar="seller"] .nav a {
  color: #f0f9ff
}

.sidebar[data-sidebar="seller"] .nav a:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff
}

.sidebar[data-sidebar="seller"] .nav a.active {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28)
}

.sidebar[data-sidebar="seller"] .sidebar-user {
  background: rgba(3, 105, 161, .55);
  border-top-color: rgba(255, 255, 255, .2)
}

.sidebar[data-sidebar="seller"] .sidebar-user-avatar {
  background: rgba(255, 255, 255, .2);
  color: #fff
}

.sidebar[data-sidebar="seller"] .sidebar-user-role {
  color: rgba(255, 255, 255, .82)
}

/* ===== Filter tabs (My RFQs) ===== */
.filter-tabs {
  display: flex;
  gap: 6px;
  padding: 4px 20px 14px;
  border-bottom: 1px solid var(--line-2);
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%
}

.filter-tab { flex-shrink: 0 }

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease
}

.filter-tab:hover {
  background: #f5f7fb
}

.filter-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.filter-count {
  background: rgba(0, 0, 0, .06);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  line-height: 1.5
}

.filter-tab.active .filter-count {
  background: rgba(255, 255, 255, .2);
  color: #fff
}

/* ===== Quote rows (My RFQs) ===== */
.quote-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2)
}

.quote-row:last-child {
  border-bottom: 0
}

.quote-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.quote-body {
  flex: 1;
  min-width: 0
}

.quote-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline
}

.quote-supplier {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.quote-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue)
}

.quote-product {
  font-size: 12px;
  color: #374151;
  margin-top: 2px
}

.quote-meta {
  font-size: 11px;
  color: #9aa3b2;
  margin-top: 2px
}

.quote-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto
}

.quote-accept,
.quote-decline {
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s ease
}

.quote-accept {
  background: var(--green);
  color: #fff
}

.quote-decline {
  background: #fff;
  border: 1px solid var(--line);
  color: #6b7280
}

.quote-accept:hover,
.quote-decline:hover {
  filter: brightness(.95)
}

/* ===== Activity timeline ===== */
.timeline {
  padding: 8px 20px 18px;
  position: relative
}

.timeline-item {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  position: relative
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: -10px;
  width: 2px;
  background: var(--line-2)
}

.timeline-item:last-child::before {
  display: none
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 6px;
  box-shadow: 0 0 0 3px #fff;
  z-index: 1
}

.timeline-content {
  flex: 1;
  min-width: 0
}

.timeline-title {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4
}

.timeline-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.timeline-time {
  font-size: 11px;
  color: #9aa3b2;
  margin-top: 4px
}

/* ===== Needs Your Attention panel ===== */
.attention-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2)
}

.attention-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  transition: background .15s ease
}

.attention-row:last-child {
  border-bottom: 0
}

.attention-row:hover {
  background: #fafbfc
}

.attention-row--urgent {
  background: #fef9f9
}

.attention-row--urgent:hover {
  background: #fef0f0
}

.attention-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.attention-content {
  flex: 1;
  min-width: 0
}

.attention-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3
}

.attention-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.attention-action {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
  flex: 0 0 auto
}

.attention-action:hover {
  background: var(--blue);
  color: #fff
}

@media (max-width: 600px) {
  .attention-row {
    padding: 12px 16px;
    gap: 10px;
    flex-wrap: wrap
  }

  .attention-content {
    flex: 1 1 calc(100% - 60px)
  }

  .attention-action {
    margin-left: 50px
  }
}

/* =============================================================
   DETAIL PAGES (Order / RFQ / SR / Product)
   ============================================================= */

/* Generic detail hero — used on RFQ/Order/SR pages */
.detail-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap
}

.detail-hero__main {
  flex: 1;
  min-width: 240px
}

.detail-hero__id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px
}

.detail-hero__id {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px
}

.detail-hero__id-row .pill {
  border-radius: 99px;
  padding: 4px 10px
}

.detail-hero__sub {
  font-size: 13px;
  color: #6b7280
}

.detail-hero__sub a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600
}

.detail-hero__sub a:hover {
  text-decoration: underline
}

.detail-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  flex: 0 1 auto;
  min-width: 380px
}

.detail-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--line-2);
  padding-left: 18px
}

.detail-hero__stat:first-child {
  border-left: 0;
  padding-left: 0
}

.detail-hero__stat-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #9aa3b2
}

.detail-hero__stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.2px
}

.detail-hero__stat-value.blue {
  color: var(--blue)
}

/* Detail layout (2-col with sticky aside) */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start
}

.detail-layout > * {
  min-width: 0
}

.detail-aside {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

/* Supplier mini card (reusable across detail pages) */
.detail-supplier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px
}

.detail-supplier__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.detail-supplier__logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f5f7fb;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px
}

.detail-supplier__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px
}

.detail-supplier__name .pill {
  border-radius: 99px;
  padding: 2px 7px;
  font-size: 9px
}

.detail-supplier__meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.detail-supplier__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px
}

.detail-supplier__stat {
  background: #f5f7fb;
  border-radius: 8px;
  padding: 8px;
  text-align: center
}

.detail-supplier__stat-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink)
}

.detail-supplier__stat-label {
  font-size: 9px;
  letter-spacing: .8px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  margin-top: 2px
}

.detail-supplier__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px
}

.detail-supplier__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid var(--blue);
  transition: background .15s ease, color .15s ease
}

.detail-supplier__btn--primary {
  background: var(--blue);
  color: #fff
}

.detail-supplier__btn--primary:hover {
  background: var(--blue-600)
}

.detail-supplier__btn--secondary {
  background: #fff;
  color: var(--blue)
}

.detail-supplier__btn--secondary:hover {
  background: #eef2ff
}

/* Status stepper — reused from order-confirmed but exposed for any detail */
.detail-stepper {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  margin-bottom: 18px
}

.detail-stepper h3 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

/* SR Response comparison table */
.sr-comparison {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.sr-comparison table {
  width: 100%;
  border-collapse: collapse
}

.sr-comparison thead th {
  background: #fafbfc;
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: #9aa3b2;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2)
}

.sr-comparison tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-2);
  vertical-align: middle
}

.sr-comparison tbody tr:last-child td {
  border-bottom: 0
}

.sr-comparison tbody tr.shortlisted {
  background: rgba(14, 41, 168, .03)
}

.sr-comparison tbody tr.awarded {
  background: rgba(22, 163, 74, .04)
}

.sr-supplier-cell {
  display: flex;
  align-items: center;
  gap: 10px
}

.sr-supplier-cell__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  flex: 0 0 auto
}

.sr-supplier-cell__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.sr-supplier-cell__rating {
  font-size: 10px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 3px
}

.sr-supplier-cell__rating .star {
  color: #fbbf24
}

.sr-cert-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.sr-cert-cell .cert {
  background: #f5f7fb;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #374151;
  letter-spacing: .3px
}

.sr-action-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-end
}

.sr-action-btn {
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease, background .15s ease
}

.sr-action-btn:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.sr-action-btn.shortlist.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

.sr-action-btn.award {
  background: var(--green);
  color: #fff;
  border-color: var(--green)
}

.sr-action-btn.award:hover {
  background: #15803d;
  color: #fff;
  border-color: #15803d
}

.sr-action-btn.award.is-awarded {
  background: var(--green);
  color: #fff;
  cursor: default
}

/* Product detail layout */
.product-detail-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 22px
}

.product-detail-layout > * {
  min-width: 0
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.product-gallery__main {
  aspect-ratio: 1/1;
  border-radius: 14px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.product-gallery__main svg {
  width: 120px;
  height: 120px;
  color: rgba(15, 23, 42, .35)
}

.product-gallery__main-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--blue);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px
}

.product-gallery__thumb {
  aspect-ratio: 1/1;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: border-color .15s ease
}

.product-gallery__thumb.active {
  border-color: var(--blue)
}

.product-gallery__thumb svg {
  width: 30px;
  height: 30px;
  color: rgba(15, 23, 42, .35)
}

.product-info__brand {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 6px
}

.product-info__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  margin: 0 0 10px;
  line-height: 1.1
}

.product-info__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px
}

.product-info__rating .stars {
  color: #fbbf24;
  letter-spacing: 1px;
  font-size: 14px
}

.product-info__rating .reviews-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600
}

.product-info__price-tiers {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px
}

.product-tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  align-items: center
}

.product-tier:last-child {
  border-bottom: 0
}

.product-tier__qty {
  color: #6b7280;
  font-weight: 500
}

.product-tier__price {
  color: var(--ink);
  font-weight: 800
}

.product-tier__save {
  background: var(--green-bg);
  color: #15803d;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 800;
  letter-spacing: .3px
}

.product-tier:first-child {
  background: #fafbfc
}

.product-variant-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px
}

.product-variant-row__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink)
}

.product-variant-row__label small {
  color: #6b7280;
  font-weight: 500;
  margin-left: 6px
}

.product-variants {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.product-variant {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease
}

.product-variant:hover {
  border-color: var(--blue)
}

.product-variant.active {
  border-color: var(--blue);
  background: rgba(14, 41, 168, .06);
  color: var(--blue)
}

.product-variant--swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  background-clip: padding-box;
  position: relative
}

.product-variant--swatch.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--blue);
  border-radius: 50%
}

.product-cta-row {
  display: flex;
  gap: 8px;
  margin-top: 18px
}

.product-cta-row__qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  height: 44px;
  flex: 0 0 auto
}

.product-cta-row__qty button {
  width: 36px;
  background: #fff;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit
}

.product-cta-row__qty button:hover {
  background: #f5f7fb
}

.product-cta-row__qty input {
  width: 60px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  outline: none
}

.product-cta-row__add {
  flex: 1;
  background: var(--blue);
  color: #fff;
  border: 0;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.product-cta-row__add:hover {
  background: var(--blue-600)
}

.product-cta-row__rfq {
  background: #fff;
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap
}

.product-cta-row__rfq:hover {
  background: #eef2ff
}

.product-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px
}

.product-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f5f7fb;
  border-radius: 10px;
  font-size: 11px;
  color: #374151;
  font-weight: 600
}

.product-trust__item svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
  flex: 0 0 auto
}

/* Product description tabs */
.product-tabs-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 22px
}

.product-tabs-head {
  display: flex;
  border-bottom: 1px solid var(--line-2);
  overflow-x: auto
}

.product-tab-btn {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  white-space: nowrap
}

.product-tab-btn:hover {
  color: var(--ink)
}

.product-tab-btn.active {
  color: var(--blue)
}

.product-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 18px;
  right: 18px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px 2px 0 0
}

.product-tab-panel {
  display: none;
  padding: 22px
}

.product-tab-panel.active {
  display: block
}

.product-tab-panel h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.product-tab-panel p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #374151;
  line-height: 1.6
}

.product-tab-panel ul {
  margin: 0 0 14px 18px;
  padding: 0;
  font-size: 13px;
  color: #374151;
  line-height: 1.7
}

.product-spec-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed
}

.product-spec-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  word-wrap: break-word;
  overflow-wrap: anywhere
}

.product-spec-table td:first-child {
  color: #6b7280;
  width: 40%
}

.product-spec-table td:last-child {
  color: var(--ink);
  font-weight: 600
}

.product-spec-table tr:last-child td {
  border-bottom: 0
}

/* Reviews summary */
.reviews-summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  margin-bottom: 18px
}

.reviews-summary__big {
  text-align: center
}

.reviews-summary__big .num {
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px
}

.reviews-summary__big .stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 14px
}

.reviews-summary__big .total {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px
}

.reviews-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.reviews-bar {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: #6b7280
}

.reviews-bar__fill {
  background: #f1f5f9;
  border-radius: 99px;
  height: 6px;
  overflow: hidden
}

.reviews-bar__fill > span {
  display: block;
  height: 100%;
  background: #fbbf24;
  border-radius: 99px
}

/* Responsive */
@media (max-width: 1024px) {
  .detail-layout,
  .product-detail-layout {
    grid-template-columns: 1fr
  }

  .detail-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap
  }

  .detail-aside > * {
    flex: 1 1 280px
  }

  .detail-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    min-width: 0;
    width: 100%
  }

  .detail-hero__stat {
    border-left: 0;
    padding-left: 0
  }

  .reviews-summary {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .detail-hero {
    padding: 18px
  }

  .detail-hero__id {
    font-size: 18px
  }

  .sr-comparison {
    overflow-x: auto
  }

  .sr-comparison table {
    min-width: 720px
  }

  .product-cta-row {
    flex-wrap: wrap
  }

  .product-cta-row__qty {
    order: 1
  }

  .product-cta-row__add {
    flex: 1 1 100%;
    height: 44px;
    order: 3
  }

  .product-cta-row__rfq {
    height: 44px;
    order: 2
  }

  .detail-aside {
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .product-gallery__thumbs {
    grid-template-columns: repeat(4, 1fr)
  }

  .product-trust {
    grid-template-columns: 1fr
  }
}

/* =============================================================
   GLOBAL SEARCH RESULTS PAGE
   ============================================================= */

.search-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0 18px;
  flex-wrap: wrap
}

.search-summary__main {
  flex: 1;
  min-width: 0
}

.search-summary__query {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px;
  margin: 0 0 4px
}

.search-summary__query em {
  color: var(--blue);
  font-style: normal
}

.search-summary__count {
  font-size: 13px;
  color: #6b7280
}

.search-summary__sort {
  display: flex;
  align-items: center;
  gap: 8px
}

.search-summary__sort label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500
}

.search-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: 18px;
  padding-bottom: 2px
}

.search-tab {
  background: transparent;
  border: 0;
  padding: 10px 4px;
  margin: 0 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.search-tab .count {
  background: #f1f5f9;
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 99px
}

.search-tab.active {
  color: var(--blue)
}

.search-tab.active .count {
  background: rgba(14, 41, 168, .1);
  color: var(--blue)
}

.search-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px 2px 0 0
}

.search-section {
  margin-bottom: 22px
}

.search-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px
}

.search-section__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px
}

.search-section__head h3 .count {
  background: #f5f7fb;
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px
}

.search-section__head .link {
  font-size: 12px
}

.search-results-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden
}

.search-result {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease
}

.search-result:last-child {
  border-bottom: 0
}

.search-result:hover {
  background: #fafbfc
}

.search-result__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.search-result__icon svg {
  width: 20px;
  height: 20px
}

.search-result__icon.product { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #7c2d12 }
.search-result__icon.supplier { background: rgba(14, 41, 168, .08); color: var(--blue) }
.search-result__icon.order { background: var(--green-bg); color: #15803d }
.search-result__icon.rfq { background: #dbeafe; color: #1e40af }
.search-result__icon.sr { background: #ffedd5; color: #9a3412 }
.search-result__icon.invoice { background: var(--purple-bg); color: #6d28d9 }
.search-result__icon.message { background: #f1f5f9; color: #6b7280 }

.search-result__body {
  min-width: 0;
  overflow: hidden
}

.search-result__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.search-result__title em {
  background: rgba(245, 158, 11, .22);
  color: var(--ink);
  font-style: normal;
  padding: 0 2px;
  border-radius: 2px
}

.search-result__desc {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.search-result__meta {
  font-size: 11px;
  color: #9aa3b2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.search-result__meta .dot {
  width: 3px;
  height: 3px;
  background: #cbd5e1;
  border-radius: 50%
}

.search-result__meta .pill {
  padding: 1px 7px;
  font-size: 9px;
  border-radius: 4px
}

.search-result__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto
}

.search-result__type {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  color: #9aa3b2;
  text-transform: uppercase
}

.search-result__chevron {
  color: #cbd5e1;
  width: 18px;
  height: 18px
}

/* Empty state with popular searches */
.search-empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  color: #6b7280
}

.search-empty svg {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 12px
}

.search-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink)
}

.search-empty p {
  margin: 0 0 18px;
  font-size: 13px
}

.search-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center
}

.search-popular a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease
}

.search-popular a:hover {
  border-color: var(--blue);
  color: var(--blue)
}

@media (max-width: 768px) {
  .search-summary__query {
    font-size: 18px
  }

  .search-result {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    padding: 12px 14px;
    gap: 10px
  }

  .search-result__icon {
    width: 36px;
    height: 36px;
    grid-row: 1
  }

  .search-result__body {
    grid-row: 1;
    padding-right: 4px
  }

  .search-result__right {
    grid-column: 1 / -1;
    justify-content: flex-end
  }
}

/* =============================================================
   ACCOUNT / SETTINGS PAGE
   ============================================================= */

.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: start
}

.settings-layout > * {
  min-width: 0
}

.settings-nav {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 22px
}

.settings-nav-btn {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .15s ease, color .15s ease
}

.settings-nav-btn:hover {
  background: #f5f7fb
}

.settings-nav-btn.active {
  background: rgba(14, 41, 168, .08);
  color: var(--blue)
}

.settings-nav-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto
}

.settings-section {
  display: none
}

.settings-section.active {
  display: block
}

.settings-section__head {
  margin-bottom: 18px
}

.settings-section__head h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px
}

.settings-section__head p {
  margin: 0;
  font-size: 13px;
  color: #6b7280
}

/* Avatar uploader */
.avatar-uploader {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px
}

.avatar-uploader__circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
  position: relative
}

.avatar-uploader__info {
  flex: 1
}

.avatar-uploader__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.avatar-uploader__meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.avatar-uploader__btn {
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease
}

.avatar-uploader__btn:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* Save bar at the bottom of forms */
.settings-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2)
}

.settings-save-bar .btn-ghost-link {
  background: transparent;
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 8px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit
}

.settings-save-bar .btn-ghost-link:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* Notifications preference matrix */
.notif-matrix {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden
}

.notif-matrix-row {
  display: grid;
  grid-template-columns: 1.5fr 90px 90px 90px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  gap: 12px
}

.notif-matrix-row:last-child {
  border-bottom: 0
}

.notif-matrix-row.head {
  background: #fafbfc;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: #9aa3b2;
  text-transform: uppercase
}

.notif-matrix-row .matrix-label {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.notif-matrix-row .matrix-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.notif-matrix-row .matrix-label small {
  font-size: 11px;
  color: #6b7280
}

.notif-matrix-cell {
  text-align: center
}

.notif-matrix-cell .toggle-switch {
  gap: 0
}

/* Address cards */
.address-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.address-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  position: relative
}

.address-card.default {
  border-color: var(--blue);
  background: rgba(14, 41, 168, .02)
}

.address-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px
}

.address-card__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink)
}

.address-card__default {
  font-size: 9px;
  letter-spacing: .8px;
  font-weight: 800;
  color: var(--blue);
  background: rgba(14, 41, 168, .12);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase
}

.address-card__body {
  font-size: 13px;
  color: #374151;
  line-height: 1.55
}

.address-card__phone {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px
}

.address-card__actions {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2)
}

.address-card__action {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease
}

.address-card__action:hover {
  background: #f5f7fb;
  color: var(--blue)
}

.address-card__action.delete:hover {
  color: var(--red);
  background: var(--red-bg)
}

.address-card__add {
  background: rgba(14, 41, 168, .03);
  border: 1px dashed var(--blue);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--blue);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700
}

.address-card__add svg {
  width: 22px;
  height: 22px
}

/* Session list (Security) */
.session-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2)
}

.session-row:last-child {
  border-bottom: 0
}

.session-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.session-row__info {
  flex: 1;
  min-width: 0
}

.session-row__device {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px
}

.session-row__meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.session-row__current {
  font-size: 9px;
  letter-spacing: .8px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-bg);
  padding: 2px 6px;
  border-radius: 4px
}

.session-row__revoke {
  background: transparent;
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease
}

.session-row__revoke:hover {
  border-color: var(--red);
  color: var(--red)
}

/* Danger zone for sign out */
.danger-zone {
  background: rgba(220, 38, 38, .04);
  border: 1px solid rgba(220, 38, 38, .2);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px
}

.danger-zone__info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--red)
}

.danger-zone__info p {
  margin: 0;
  font-size: 12px;
  color: #6b7280
}

.danger-zone__btn {
  background: var(--red);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto
}

.danger-zone__btn:hover {
  background: #b91c1c
}

/* Sidebar user — make it clickable */
.sidebar-user.is-link {
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease
}

.sidebar-user.is-link:hover {
  background: rgba(255, 255, 255, .04)
}

.sidebar-user.is-link:hover .sidebar-user-name {
  color: #fff
}

/* Mobile */
@media (max-width: 1024px) {
  .settings-layout {
    grid-template-columns: 1fr
  }

  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 6px;
    scrollbar-width: none
  }

  .settings-nav::-webkit-scrollbar {
    display: none
  }

  .settings-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap
  }

  .address-list {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .notif-matrix-row {
    grid-template-columns: 1fr 60px 60px 60px;
    padding: 12px 14px
  }

  .danger-zone {
    flex-direction: column;
    align-items: flex-start
  }

  .danger-zone__btn {
    width: 100%
  }
}

@media (max-width: 480px) {
  .notif-matrix-row {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .notif-matrix-row.head {
    display: none
  }

  .notif-matrix-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left
  }

  .notif-matrix-cell::before {
    content: attr(data-channel);
    font-size: 11px;
    color: #6b7280;
    font-weight: 600
  }
}

/* =============================================================
   NOTIFICATIONS PAGE
   ============================================================= */

.notif-header-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.notif-action-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease
}

.notif-action-btn:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* Reuse conv-filter and conv-topic-row styles from Messages */
.notif-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2)
}

.notif-feed {
  display: flex;
  flex-direction: column
}

.notif-group {
  border-top: 1px solid var(--line-2)
}

.notif-group:first-of-type {
  border-top: 0
}

.notif-group__title {
  padding: 12px 20px 4px;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: #9aa3b2;
  text-transform: uppercase
}

.notif-item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .15s ease;
  position: relative
}

.notif-item:hover {
  background: #fafbfc
}

.notif-item.unread {
  background: rgba(14, 41, 168, .03)
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%
}

.notif-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.notif-icon svg {
  width: 18px;
  height: 18px
}

.notif-icon.rfq { background: #dbeafe; color: #1e40af }
.notif-icon.sr { background: #ffedd5; color: #9a3412 }
.notif-icon.sample { background: #fef3c7; color: #92400e }
.notif-icon.order { background: var(--green-bg); color: #15803d }
.notif-icon.invoice { background: var(--purple-bg); color: #6d28d9 }
.notif-icon.dispute { background: var(--red-bg); color: #b91c1c }
.notif-icon.general { background: #f1f5f9; color: #6b7280 }

.notif-body {
  min-width: 0
}

.notif-title {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4
}

.notif-item.unread .notif-title {
  font-weight: 700
}

.notif-title strong {
  font-weight: 700
}

.notif-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.notif-meta .conv-type-tag {
  font-size: 8px;
  padding: 2px 6px
}

.notif-time {
  font-size: 11px;
  color: #9aa3b2;
  white-space: nowrap;
  flex: 0 0 auto
}

.notif-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
  flex: 0 0 auto
}

.notif-cta:hover {
  background: var(--blue);
  color: #fff
}

.notif-cta.urgent {
  background: var(--red-bg);
  color: #b91c1c
}

.notif-cta.urgent:hover {
  background: var(--red);
  color: #fff
}

.notif-empty {
  padding: 64px 24px;
  text-align: center;
  color: #6b7280
}

.notif-empty svg {
  width: 44px;
  height: 44px;
  color: #cbd5e1;
  margin-bottom: 12px
}

.notif-empty h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink)
}

.notif-empty p {
  margin: 0;
  font-size: 13px
}

/* Mobile */
@media (max-width: 768px) {
  .notif-item {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 12px 16px
  }

  .notif-time {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    align-self: start
  }

  .notif-body {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 50px
  }

  .notif-icon {
    grid-row: 1
  }

  .notif-cta {
    grid-column: 1 / -1;
    justify-self: flex-end;
    margin-top: 2px
  }

  .notif-item.unread::before {
    left: 2px
  }
}

/* =============================================================
   MESSAGES PAGE
   ============================================================= */

.messages-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  height: 720px;
  max-height: calc(100vh - 200px);
  min-height: 520px
}

.messages-layout > * {
  min-width: 0;
  min-height: 0
}

/* ----- Conversation list (left pane) ----- */
.conv-list {
  border-right: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  background: #fff
}

.conv-list__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.conv-list__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.conv-list__title .unread-pill {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: .3px
}

.conv-search {
  position: relative
}

.conv-search input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none
}

.conv-search input:focus {
  border-color: var(--blue)
}

.conv-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b2
}

.conv-filter {
  display: flex;
  gap: 4px
}

.conv-filter-btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit
}

.conv-filter-btn:hover {
  background: #f5f7fb
}

.conv-filter-btn.active {
  background: rgba(14, 41, 168, .08);
  color: var(--blue)
}

/* Secondary topic filter — slim horizontal scroll row */
.conv-topic-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 2px;
  padding-bottom: 2px
}

.conv-topic-row::-webkit-scrollbar {
  display: none
}

.conv-topic-btn {
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: .3px;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease, color .15s ease
}

.conv-topic-btn:hover {
  background: #f5f7fb
}

.conv-topic-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

/* Inline type tags on each conv item */
.conv-type-tag {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex: 0 0 auto;
  margin-right: 4px
}

.conv-type-tag.rfq { background: #dbeafe; color: #1e40af }
.conv-type-tag.sr { background: #ffedd5; color: #9a3412 }
.conv-type-tag.sample { background: #fef3c7; color: #92400e }
.conv-type-tag.order { background: var(--green-bg); color: #15803d }
.conv-type-tag.invoice { background: var(--purple-bg); color: #6d28d9 }
.conv-type-tag.dispute { background: var(--red-bg); color: #b91c1c }
.conv-type-tag.general { background: #f1f5f9; color: #6b7280 }

.conv-items {
  flex: 1;
  overflow-y: auto
}

.conv-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .15s ease;
  position: relative;
  background: #fff
}

.conv-item:hover {
  background: #fafbfc
}

.conv-item.active {
  background: rgba(14, 41, 168, .06)
}

.conv-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue)
}

.conv-item.unread .conv-name,
.conv-item.unread .conv-preview {
  color: var(--ink);
  font-weight: 700
}

.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex: 0 0 auto;
  position: relative
}

.conv-avatar.sg { background: linear-gradient(135deg, #fb923c, #f97316) }
.conv-avatar.cm { background: linear-gradient(135deg, #1e40af, #1e3a8a) }
.conv-avatar.ty { background: #1f2937 }
.conv-avatar.af { background: #e0e7ff; color: #1e3a8a }
.conv-avatar.ep { background: linear-gradient(135deg, #7c3aed, #5b21b6) }
.conv-avatar.hs { background: linear-gradient(135deg, #f59e0b, #d97706) }
.conv-avatar.tf { background: linear-gradient(135deg, #92400e, #78350f) }
.conv-avatar.bd { background: #dc2626 }
.conv-avatar.nw { background: linear-gradient(135deg, #be185d, #9d174d) }

.conv-avatar__dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff
}

.conv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.conv-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px
}

.conv-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0
}

.conv-time {
  font-size: 10px;
  color: #9aa3b2;
  flex: 0 0 auto;
  white-space: nowrap
}

.conv-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px
}

.conv-preview {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0
}

.conv-unread {
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  flex: 0 0 auto;
  min-width: 18px;
  text-align: center
}

.conv-item:not(.unread) .conv-unread {
  display: none
}

/* ----- Thread (right pane) ----- */
.thread {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 0
}

.thread__back {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  margin-right: 6px;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer
}

.thread__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
  flex: 0 0 auto
}

.thread__supplier {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px
}

.thread__supplier-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px
}

.thread__supplier-name .pill {
  border-radius: 99px;
  padding: 2px 7px;
  font-size: 9px
}

.thread__supplier-status {
  font-size: 11px;
  color: #6b7280
}

.thread__supplier-status .online-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px
}

.thread__actions {
  display: flex;
  gap: 4px
}

.thread__action {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.thread__action:hover {
  background: #f5f7fb;
  color: var(--blue)
}

.thread__context {
  padding: 8px 18px;
  background: rgba(14, 41, 168, .04);
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px
}

.thread__context a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none
}

.thread__context a:hover {
  text-decoration: underline
}

.thread__messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.msg-day-sep {
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9aa3b2;
  margin: 14px 0 6px
}

.msg-system {
  align-self: center;
  background: rgba(14, 41, 168, .04);
  color: #374151;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 99px;
  margin: 8px 0;
  max-width: 80%;
  text-align: center
}

.msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin: 4px 0
}

.msg-row.outgoing {
  flex-direction: row-reverse
}

.msg-row__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff
}

.msg-row.outgoing .msg-row__avatar {
  background: linear-gradient(135deg, #fbbf24, #f59e0b)
}

.msg-row__bubble {
  background: #f5f7fb;
  padding: 9px 13px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  max-width: 68%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  position: relative
}

.msg-row.outgoing .msg-row__bubble {
  background: var(--blue);
  color: #fff;
  border-top-left-radius: 14px;
  border-top-right-radius: 4px
}

.msg-row__meta {
  font-size: 10px;
  color: #9aa3b2;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px
}

.msg-row.outgoing .msg-row__meta {
  justify-content: flex-end
}

.msg-row__meta svg {
  width: 12px;
  height: 12px;
  color: var(--blue)
}

.msg-row__attach {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .15);
  border-radius: 8px;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .15)
}

.msg-row:not(.outgoing) .msg-row__attach {
  background: #fff;
  border-color: var(--line)
}

.msg-row__attach svg {
  width: 16px;
  height: 16px;
  color: var(--red);
  flex: 0 0 auto
}

.msg-row__attach strong {
  font-weight: 700;
  display: block
}

.msg-row__attach small {
  font-size: 10px;
  color: #9aa3b2
}

.msg-row.outgoing .msg-row__attach small {
  color: rgba(255, 255, 255, .7)
}

/* ----- Composer ----- */
.thread__composer {
  border-top: 1px solid var(--line-2);
  padding: 12px 14px;
  background: #fff;
  flex: 0 0 auto
}

.composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f5f7fb;
  border-radius: 12px;
  padding: 4px 4px 4px 10px
}

.composer-row__btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit
}

.composer-row__btn:hover {
  background: rgba(15, 23, 42, .06);
  color: var(--blue)
}

.composer-row__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  font-family: inherit;
  resize: none;
  padding: 9px 0;
  max-height: 80px;
  line-height: 1.4
}

.composer-row__send {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.composer-row__send:hover {
  background: var(--blue-600)
}

.composer-row__send:disabled {
  background: #cbd5e1;
  cursor: not-allowed
}

/* ----- Mobile pane switching ----- */
@media (max-width: 768px) {
  .messages-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 200px);
    min-height: 540px
  }

  .messages-layout .thread {
    display: none
  }

  .messages-layout.thread-open .conv-list {
    display: none
  }

  .messages-layout.thread-open .thread {
    display: flex
  }

  .thread__back {
    display: inline-flex
  }

  .msg-row__bubble {
    max-width: 80%
  }
}

/* =============================================================
   INVOICES & PAYMENTS PAGE
   ============================================================= */

.invoices-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start
}

.invoices-layout > * {
  min-width: 0
}

.invoices-aside {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

/* Outstanding balance highlight card */
.balance-card {
  background: linear-gradient(135deg, var(--blue) 0%, #1e3a8a 100%);
  color: #fff;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.balance-card__label {
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7)
}

.balance-card__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.1
}

.balance-card__meta {
  font-size: 11px;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 8px
}

.balance-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 14px;
  background: #fff;
  color: var(--blue);
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background .15s ease
}

.balance-card__btn:hover {
  background: #eef2ff
}

.balance-card__sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 9px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none
}

.balance-card__sub-btn:hover {
  background: rgba(255, 255, 255, .08)
}

/* Payment methods card */
.payment-methods-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px
}

.payment-methods-card h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2)
}

.payment-method:first-of-type {
  border-top: 0;
  padding-top: 0
}

.payment-method__icon {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px
}

.payment-method__icon.visa { background: linear-gradient(135deg, #1a1f71, #4d4d96) }
.payment-method__icon.mc { background: linear-gradient(135deg, #eb001b, #f79e1b) }
.payment-method__icon.escrow {
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  font-size: 12px
}

.payment-method__info {
  flex: 1;
  min-width: 0
}

.payment-method__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.payment-method__meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px
}

.payment-method__default {
  font-size: 9px;
  letter-spacing: .5px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-bg);
  padding: 2px 6px;
  border-radius: 4px;
  flex: 0 0 auto
}

.payment-methods-add {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none
}

.payment-methods-add:hover {
  text-decoration: underline
}

/* Invoice row action buttons */
.invoice-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center
}

.invoice-action {
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease
}

.invoice-action:hover {
  background: #f5f7fb;
  color: var(--blue)
}

.invoice-action svg {
  width: 14px;
  height: 14px
}

.invoice-pay-btn {
  background: var(--blue);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  font-family: inherit
}

.invoice-pay-btn:hover {
  background: var(--blue-600)
}

.invoice-pay-btn.overdue {
  background: var(--red)
}

.invoice-pay-btn.overdue:hover {
  background: #b91c1c
}

/* Status pill modifier for due dates */
.invoice-due {
  font-size: 11px
}

.invoice-due.overdue-text {
  color: var(--red);
  font-weight: 700
}

.invoice-due.due-soon {
  color: var(--amber);
  font-weight: 600
}

/* Mobile responsive — collapse layout, stack right aside above */
@media (max-width: 1024px) {
  .invoices-layout {
    grid-template-columns: 1fr
  }

  .invoices-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap
  }

  .balance-card,
  .payment-methods-card {
    flex: 1 1 280px
  }

  /* Invoice table: 7 columns is too many for narrow content area — horizontal scroll */
  [data-screen-label="Invoices & Payments"] .card > table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
  }

  [data-screen-label="Invoices & Payments"] .card > table .invoice-due,
  [data-screen-label="Invoices & Payments"] .card > table .invoice-actions {
    white-space: nowrap
  }
}

/* Prevent grid/flex children from forcing the page wider than the viewport */
.main {
  min-width: 0
}

@media (max-width: 768px) {
  .invoices-aside {
    flex-direction: column
  }

  .balance-card__value {
    font-size: 22px
  }
}

/* =============================================================
   SAVED PRODUCTS PAGE
   ============================================================= */

.saved-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.saved-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
  cursor: pointer
}

.saved-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px)
}

.saved-card__media {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-bottom: 1px solid var(--line-2)
}

.saved-card__media svg {
  width: 64px;
  height: 64px;
  color: rgba(15, 23, 42, .25)
}

.saved-card__heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  transition: transform .15s ease
}

.saved-card__heart:hover {
  transform: scale(1.08)
}

.saved-card__heart svg {
  width: 16px;
  height: 16px;
  fill: #ef4444;
  stroke: #ef4444
}

.saved-card__supplier-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  padding: 3px 10px;
  letter-spacing: .3px;
  text-decoration: none
}

.saved-card__supplier-pill:hover {
  color: var(--blue);
  border-color: var(--blue)
}

.saved-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1
}

.saved-card__category {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #9aa3b2;
  text-transform: uppercase
}

.saved-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3
}

.saved-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280
}

.saved-card__rating .stars {
  color: #fbbf24;
  letter-spacing: 1px
}

.saved-card__price {
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
  margin-top: auto
}

.saved-card__price small {
  font-size: 11px;
  color: #9aa3b2;
  font-weight: 500
}

.saved-card__moq {
  font-size: 11px;
  color: #6b7280
}

.saved-card__saved-date {
  font-size: 10px;
  color: #9aa3b2;
  margin-top: 2px;
  font-style: italic
}

.saved-card__actions {
  display: flex;
  gap: 6px;
  padding: 0 14px 14px
}

.saved-card__add-cart {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease
}

.saved-card__add-cart:hover {
  background: var(--blue-600)
}

.saved-card__add-cart.is-added {
  background: var(--green)
}

.saved-card__add-cart svg {
  width: 14px;
  height: 14px
}

.saved-card__rfq {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease
}

.saved-card__rfq:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.saved-empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
  color: #6b7280
}

.saved-empty svg {
  width: 48px;
  height: 48px;
  color: #cbd5e1;
  margin-bottom: 14px
}

.saved-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink)
}

.saved-empty p {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280
}

.saved-empty .btn {
  text-decoration: none
}

.saved-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 41, 168, .04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--ink)
}

.saved-bulk-bar strong {
  color: var(--blue)
}

.saved-bulk-bar .grow {
  flex: 1
}

@media (max-width: 1024px) {
  .saved-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width: 768px) {
  .saved-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 480px) {
  .saved-grid {
    grid-template-columns: 1fr
  }
}

/* =============================================================
   SOURCING REQUEST PAGES
   ============================================================= */

/* Response count chip used in the list table + activity items */
.responses-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px
}

.responses-chip.zero {
  background: #f5f7fb;
  color: #9aa3b2
}

.responses-chip svg {
  width: 10px;
  height: 10px
}

/* Category tag inline next to product name on the SR table */
.sr-category-tag {
  display: inline-flex;
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: .3px
}

/* "Matching Suppliers" card on the Post Sourcing Request form */
.broadcast-card {
  background: linear-gradient(135deg, rgba(14, 41, 168, .04) 0%, rgba(99, 102, 241, .06) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.broadcast-card__head {
  display: flex;
  align-items: center;
  gap: 10px
}

.broadcast-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.broadcast-card__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink)
}

.broadcast-card__sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.broadcast-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px
}

.broadcast-card__stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  text-align: center
}

.broadcast-card__stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.3px
}

.broadcast-card__stat-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: #6b7280;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px
}

/* Supplier preferences (region pills) */
.region-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.region-pills input {
  display: none
}

.region-pills label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer
}

.region-pills input:checked + label {
  background: rgba(14, 41, 168, .08);
  border-color: var(--blue);
  color: var(--blue)
}

.region-pills label::before {
  content: '';
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, #94a3b8 0%, #94a3b8 100%);
  border-radius: 2px;
  flex: 0 0 auto
}

/* =============================================================
   CHECKOUT PAGE
   ============================================================= */

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start
}

.checkout-aside {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.checkout-review {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.checkout-review__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px
}

.checkout-review__thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #f1f5f9
}

.checkout-review__thumb svg {
  width: 18px;
  height: 18px;
  color: rgba(15, 23, 42, .45)
}

.checkout-review__name {
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.checkout-review__qty {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500
}

.checkout-review__price {
  font-size: 13px;
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap
}

.place-order-btn {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  border: 0;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit
}

.place-order-btn:hover {
  background: var(--blue-600)
}

/* =============================================================
   ORDER CONFIRMED PAGE
   ============================================================= */

.order-confirmed {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px;
  max-width: 720px;
  margin: 0 auto
}

.order-confirmed__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(22, 163, 74, .12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px
}

.order-confirmed__icon svg {
  width: 32px;
  height: 32px
}

.order-confirmed__head {
  text-align: center;
  margin-bottom: 24px
}

.order-confirmed__head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px
}

.order-confirmed__head p {
  margin: 0;
  font-size: 13px;
  color: #6b7280
}

.order-confirmed__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: #f5f7fb;
  border-radius: 10px;
  margin-bottom: 22px
}

.order-confirmed__meta-cell {
  text-align: center
}

.order-confirmed__meta-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #6b7280;
  font-weight: 700;
  text-transform: uppercase
}

.order-confirmed__meta-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 4px
}

.order-confirmed__meta-value.blue {
  color: var(--blue)
}

.order-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 22px;
  position: relative
}

.order-step {
  text-align: center;
  position: relative;
  padding-top: 28px
}

.order-step::before {
  content: '';
  position: absolute;
  top: 8px;
  left: calc(50% + 12px);
  right: calc(-50% + 12px);
  height: 2px;
  background: var(--line-2)
}

.order-step:last-child::before {
  display: none
}

.order-step.done::before {
  background: var(--green)
}

.order-step__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  z-index: 1
}

.order-step.done .order-step__dot {
  background: var(--green);
  border-color: var(--green)
}

.order-step.done .order-step__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat
}

.order-step.current .order-step__dot {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(14, 41, 168, .15)
}

.order-step__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px
}

.order-step__date {
  font-size: 10px;
  color: #9aa3b2;
  margin-top: 2px
}

.order-confirmed__items {
  border-top: 1px solid var(--line-2);
  padding-top: 18px;
  margin-bottom: 22px
}

.order-confirmed__items h4 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 700
}

.order-confirmed__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.order-confirmed__actions .btn,
.order-confirmed__actions .btn-ghost {
  flex: 1;
  padding: 12px 18px;
  font-size: 13px;
  justify-content: center;
  text-decoration: none
}

.order-confirmed__actions .btn-ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s ease, color .15s ease
}

.order-confirmed__actions .btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* =============================================================
   MY ORDERS — extra styles (reuses .pill, table, filter-tabs)
   ============================================================= */

.order-row-new {
  background: rgba(22, 163, 74, .04)
}

.order-row-new td:first-child .id::before {
  content: 'NEW ';
  font-size: 9px;
  font-weight: 800;
  color: var(--green);
  background: rgba(22, 163, 74, .12);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  letter-spacing: .5px
}

@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr
  }

  .checkout-aside {
    position: static
  }

  .order-confirmed__meta {
    grid-template-columns: 1fr;
    text-align: left
  }

  .order-confirmed__meta-cell {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
}

@media (max-width: 600px) {
  .order-confirmed {
    padding: 24px
  }

  .order-steps {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .order-step {
    padding-top: 0;
    padding-left: 28px;
    text-align: left
  }

  .order-step__dot {
    left: 0;
    top: 50%;
    transform: translateY(-50%)
  }

  .order-step::before {
    display: none
  }
}

/* =============================================================
   CART PAGE
   ============================================================= */

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start
}

.cart-aside {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.cart-supplier-banner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px
}

.cart-supplier-banner__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f5f7fb;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex: 0 0 auto
}

.cart-supplier-banner__info {
  flex: 1;
  min-width: 0
}

.cart-supplier-banner__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px
}

.cart-supplier-banner__meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.cart-supplier-banner__view {
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  flex: 0 0 auto
}

.cart-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1.6fr 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2)
}

.cart-item:last-child {
  border-bottom: 0
}

.cart-item__media {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9
}

.cart-item__media svg {
  width: 36px;
  height: 36px;
  color: rgba(15, 23, 42, .35)
}

.cart-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.cart-item__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3
}

.cart-item__meta {
  font-size: 12px;
  color: #6b7280
}

.cart-item__price {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.cart-item__price strong {
  color: var(--ink);
  font-weight: 700
}

.cart-item__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  height: 36px;
  background: #fff
}

.cart-item__qty button {
  border: 0;
  background: #fff;
  color: var(--ink);
  width: 32px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700
}

.cart-item__qty button:hover {
  background: #f5f7fb
}

.cart-item__qty button:disabled {
  color: #cbd5e1;
  cursor: not-allowed
}

.cart-item__qty input {
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  width: 64px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  -moz-appearance: textfield
}

.cart-item__qty input::-webkit-outer-spin-button,
.cart-item__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.cart-item__subtotal {
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  color: var(--blue);
  min-width: 90px;
  white-space: nowrap
}

.cart-item__remove {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: #9aa3b2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease
}

.cart-item__remove:hover {
  background: #fee2e2;
  color: var(--red)
}

.cart-empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
  color: #6b7280
}

.cart-empty svg {
  width: 48px;
  height: 48px;
  color: #cbd5e1;
  margin-bottom: 14px
}

.cart-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink)
}

.cart-empty p {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280
}

.cart-empty .btn {
  text-decoration: none
}

/* Cart summary panel */
.cart-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px
}

.cart-summary h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0
}

.cart-summary__row .label {
  color: #6b7280
}

.cart-summary__row .value {
  color: var(--ink);
  font-weight: 600
}

.cart-summary__row.total {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(14, 41, 168, .04);
  border-radius: 8px;
  font-size: 14px
}

.cart-summary__row.total .label {
  color: var(--ink);
  font-weight: 700
}

.cart-summary__row.total .value {
  color: var(--blue);
  font-size: 18px;
  font-weight: 800
}

.cart-checkout-btn {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease
}

.cart-checkout-btn:hover {
  background: var(--blue-600)
}

.cart-checkout-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed
}

.cart-secondary-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600
}

.cart-secondary-link:hover {
  text-decoration: underline
}

/* Trust badge inside cart summary */
.cart-trust-note {
  margin-top: 12px;
  padding: 10px;
  background: #f5f7fb;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5
}

.cart-trust-note svg {
  width: 14px;
  height: 14px;
  color: var(--blue);
  flex: 0 0 auto;
  margin-top: 1px
}

/* "Add to Cart" button on Store Detail product card */
.store-product__add {
  margin: 0 14px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, transform .15s ease
}

.store-product__add:hover {
  background: var(--blue-600)
}

.store-product__add.is-added {
  background: var(--green)
}

.store-product__add svg {
  width: 14px;
  height: 14px
}

/* Mini cart icon for non-Landing topbars */
.icon-btn.cart {
  position: relative
}

.icon-btn.cart .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f59e0b;
  color: #1a1300;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 99px;
  line-height: 1.4;
  border: 2px solid #fff;
  min-width: 16px;
  text-align: center
}

.icon-btn.cart .cart-count.is-empty {
  display: none
}

/* Responsive cart */
@media (max-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr
  }

  .cart-aside {
    position: static
  }
}

@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 60px 1fr auto;
    gap: 10px;
    padding: 12px
  }

  .cart-item__media {
    width: 60px;
    height: 60px
  }

  .cart-item__media svg {
    width: 26px;
    height: 26px
  }

  .cart-item__qty {
    grid-column: 1 / 4;
    width: 100%;
    justify-content: flex-start
  }

  .cart-item__qty input {
    flex: 1
  }

  .cart-item__subtotal {
    grid-column: 2 / 3;
    text-align: right
  }

  .cart-item__remove {
    grid-column: 3 / 4
  }
}

/* =============================================================
   BULK QUOTE — LINE ITEMS (multi-product RFQ)
   ============================================================= */

.line-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px
}

.line-item {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 2.1fr 1.4fr 1fr 1.2fr auto auto;
  gap: 10px;
  align-items: end;
  position: relative
}

.line-item__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #9aa3b2;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: -2px
}

.line-item__subtotal-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-left: 2px;
  min-width: 86px
}

.line-item__subtotal-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: #9aa3b2;
  font-weight: 700;
  text-transform: uppercase
}

.line-item__subtotal {
  font-size: 15px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
  line-height: 1
}

.line-item__subtotal.empty {
  color: #cbd5e1
}

.line-item__remove {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: #9aa3b2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
  transition: background .15s ease, color .15s ease
}

.line-item__remove:hover {
  background: #fee2e2;
  color: var(--red)
}

.line-item__remove svg {
  width: 14px;
  height: 14px
}

.line-items[data-count="1"] .line-item__remove {
  visibility: hidden
}

.line-items-add {
  background: rgba(14, 41, 168, .04);
  border: 1px dashed var(--blue);
  color: var(--blue);
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  transition: background .15s ease
}

.line-items-add:hover {
  background: rgba(14, 41, 168, .1)
}

/* Aside summary: line breakdown */
.bq-summary__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2)
}

.bq-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline
}

.bq-summary__line-name {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0
}

.bq-summary__line-meta {
  font-size: 11px;
  color: #6b7280;
  flex: 0 0 auto;
  font-weight: 500
}

.bq-summary__lines-empty {
  text-align: center;
  padding: 14px 8px;
  font-size: 12px;
  color: #cbd5e1;
  font-style: italic
}

.bq-summary__line-totals {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  display: flex;
  justify-content: space-between
}

/* Responsive */
@media (max-width: 1024px) {
  .line-item {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .line-item__subtotal-wrap {
    grid-column: 1 / 2;
    align-items: flex-start;
    padding-left: 0
  }

  .line-item__remove {
    grid-column: 2 / 3;
    justify-self: end
  }
}

@media (max-width: 600px) {
  .line-item {
    grid-template-columns: 1fr
  }

  .line-item__subtotal-wrap,
  .line-item__remove {
    grid-column: 1 / 2
  }

  .line-item__remove {
    justify-self: flex-end
  }
}

/* =============================================================
   BULK QUOTE FORM PAGE
   ============================================================= */

.bulk-quote-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start
}

.bulk-quote-aside {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 14px
}

.form-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink)
}

.form-card .form-card__sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: #6b7280
}

.form-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
  vertical-align: middle
}

.form-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px
}

.form-row:last-child {
  margin-bottom: 0
}

.form-row > .form-field {
  flex: 1;
  min-width: 0
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.form-field label {
  font-size: 12px;
  color: #374151;
  font-weight: 600
}

.form-field label .req {
  color: var(--red);
  margin-left: 2px
}

.form-field .hint {
  font-size: 11px;
  color: #9aa3b2;
  margin-top: 2px
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(14, 41, 168, .1)
}

.form-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px
}

.form-input--with-prefix {
  padding-left: 28px
}

.form-input-wrap {
  position: relative
}

.form-input-prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b2;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none
}

/* Quantity input with unit selector inline */
.qty-input {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden
}

.qty-input input {
  flex: 1;
  border: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  min-width: 0
}

.qty-input input:focus {
  background: rgba(14, 41, 168, .04)
}

.qty-input select {
  border: 0;
  border-left: 1px solid var(--line);
  background: #f5f7fb;
  padding: 0 28px 0 12px;
  font-size: 12px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none
}

/* Radio group as cards */
.radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  background: #fff;
  transition: border-color .15s ease, background .15s ease
}

.radio-group label:hover {
  border-color: #cbd5e1
}

.radio-group input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  margin: 0;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto
}

.radio-group input[type="radio"]:checked {
  border-color: var(--blue)
}

.radio-group input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--blue);
  border-radius: 50%
}

.radio-group label:has(input:checked) {
  border-color: var(--blue);
  background: rgba(14, 41, 168, .04)
}

.radio-group label small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 2px
}

.radio-group .label-text {
  flex: 1;
  min-width: 0
}

/* Toggle switch */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer
}

.toggle-switch input {
  display: none
}

.toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: #cbd5e1;
  position: relative;
  transition: background .15s ease
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease
}

.toggle-switch input:checked + .toggle-track {
  background: var(--blue)
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(16px)
}

/* Chip multi-select */
.chip-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.chip-multi input {
  display: none
}

.chip-multi label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease
}

.chip-multi label:hover {
  background: #f5f7fb
}

.chip-multi input:checked + label {
  background: rgba(14, 41, 168, .08);
  border-color: var(--blue);
  color: var(--blue)
}

.chip-multi input:checked + label::before {
  content: '✓';
  font-weight: 800
}

/* File drop zone */
.file-drop {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 22px 16px;
  text-align: center;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease
}

.file-drop:hover {
  border-color: var(--blue);
  background: #eef2ff
}

.file-drop svg {
  width: 28px;
  height: 28px;
  color: #9aa3b2;
  margin-bottom: 6px
}

.file-drop__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px
}

.file-drop__sub {
  font-size: 11px;
  color: #6b7280
}

/* Bulk quote: supplier mini-card */
.bq-supplier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px
}

.bq-supplier__logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #f5f7fb;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px
}

.bq-supplier__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px
}

.bq-supplier__meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.bq-supplier__verified {
  display: inline-flex;
  align-items: center;
  background: var(--green-bg);
  color: #15803d;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  letter-spacing: .5px
}

/* Bulk quote: live summary */
.bq-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px
}

.bq-summary h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.bq-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
  gap: 8px
}

.bq-summary__row:first-of-type {
  border-top: 0;
  padding-top: 0
}

.bq-summary__row .label {
  color: #6b7280;
  font-weight: 500;
  flex: 0 0 auto
}

.bq-summary__row .value {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.bq-summary__row .value.empty {
  color: #cbd5e1;
  font-weight: 500;
  font-style: italic
}

.bq-summary__total {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(14, 41, 168, .04);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.bq-summary__total .label {
  font-size: 12px;
  color: #374151;
  font-weight: 600
}

.bq-summary__total .value {
  font-size: 16px;
  color: var(--blue);
  font-weight: 800
}

/* Bulk quote: submit panel */
.bq-submit {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.bq-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid var(--blue);
  transition: background .15s ease, color .15s ease
}

.bq-submit-btn--primary {
  background: var(--blue);
  color: #fff
}

.bq-submit-btn--primary:hover {
  background: var(--blue-600)
}

.bq-submit-btn--secondary {
  background: #fff;
  color: var(--blue)
}

.bq-submit-btn--secondary:hover {
  background: #eef2ff
}

.bq-submit-meta {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.bq-submit-meta svg {
  color: var(--green)
}

/* Responsive */
@media (max-width: 1024px) {
  .bulk-quote-layout {
    grid-template-columns: 1fr
  }

  .bulk-quote-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap
  }

  .bq-supplier,
  .bq-summary,
  .bq-submit {
    flex: 1 1 280px
  }
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column
  }

  .radio-group {
    grid-template-columns: 1fr
  }

  .bulk-quote-aside {
    flex-direction: column
  }
}

/* =============================================================
   STORE DETAIL PAGE
   ============================================================= */

/* ----- Breadcrumb ----- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 14px
}

.breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease
}

.breadcrumb a:hover {
  color: var(--blue)
}

.breadcrumb .breadcrumb-sep {
  color: #cbd5e1
}

.breadcrumb .breadcrumb-current {
  color: var(--ink);
  font-weight: 600
}

/* ----- Store Detail Hero ----- */
.store-hero {
  position: relative;
  background: linear-gradient(135deg, #1e3a8a 0%, #0e29a8 60%, #1e40af 100%);
  border-radius: 16px;
  padding: 28px;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 220px;
  margin-bottom: 22px
}

.store-hero__bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .04) 12px, transparent 12px, transparent 24px);
  pointer-events: none
}

.store-hero__media {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, rgba(14, 41, 168, 1) 0%, rgba(14, 41, 168, 0) 30%);
  pointer-events: none
}

.store-hero__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .04) 12px, rgba(255, 255, 255, .08) 12px, rgba(255, 255, 255, .08) 24px);
  border-left: 1px dashed rgba(255, 255, 255, .15)
}

.store-hero__media-placeholder svg {
  width: 56px;
  height: 56px;
  color: rgba(255, 255, 255, .45)
}

.store-hero__media-placeholder span {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .5)
}

.store-hero__logo {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding: 12px
}

.store-hero__info {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0
}

.store-hero__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap
}

.store-hero__title {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.5px;
  line-height: 1
}

.store-hero__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, .2);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .35);
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase
}

.store-hero__stats {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: #cfd8ff;
  flex-wrap: wrap
}

.store-hero__stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.store-hero__stats .dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, .3);
  border-radius: 50%
}

.store-hero__stats svg {
  color: #fbbf24
}

.store-hero__stats strong {
  color: #fff;
  font-weight: 700
}

/* ----- Store detail layout ----- */
.store-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start
}

.store-detail-aside {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

/* ----- Tabs ----- */
.store-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: thin
}

.store-tab {
  background: transparent;
  border: 0;
  padding: 12px 4px;
  margin: 0 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: color .15s ease;
  white-space: nowrap
}

.store-tab:first-child {
  margin-left: 4px
}

.store-tab:hover {
  color: var(--ink)
}

.store-tab.active {
  color: var(--blue)
}

.store-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  border-radius: 2px 2px 0 0
}

/* ----- Tab panels ----- */
.store-tab-panel {
  display: none
}

.store-tab-panel.active {
  display: block
}

.store-tab-empty {
  padding: 60px 20px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: #6b7280
}

.store-tab-empty svg {
  width: 36px;
  height: 36px;
  color: #cbd5e1;
  margin-bottom: 12px
}

.store-tab-empty h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.store-tab-empty p {
  margin: 0;
  font-size: 13px;
  color: #6b7280
}

/* ----- Store detail product grid ----- */
.store-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.store-product {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease
}

.store-product:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px)
}

.store-product__media {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #eef2f7 12px, #eef2f7 24px);
  border-bottom: 1px solid var(--line-2)
}

.store-product__media svg {
  width: 64px;
  height: 64px;
  color: rgba(15, 23, 42, .25)
}

.store-product__ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff
}

.store-product__ribbon.best { background: var(--blue) }
.store-product__ribbon.new { background: #16a34a }
.store-product__ribbon.top { background: #f59e0b; color: #1a1300 }

.store-product__heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  transition: transform .15s ease, background .15s ease
}

.store-product__heart:hover {
  transform: scale(1.08)
}

.store-product__heart svg {
  width: 16px;
  height: 16px
}

.store-product__heart[data-saved="false"] svg {
  fill: none;
  stroke: #9aa3b2
}

.store-product__heart[data-saved="true"] svg {
  fill: #ef4444;
  stroke: #ef4444
}

.store-product__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1
}

.store-product__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3
}

.store-product__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280
}

.store-product__rating .stars {
  color: #fbbf24;
  letter-spacing: 1px
}

.store-product__price {
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
  margin-top: auto
}

.store-product__price small {
  font-size: 11px;
  color: #9aa3b2;
  font-weight: 500
}

.store-product__moq {
  font-size: 11px;
  color: #6b7280;
  letter-spacing: .3px
}

/* ----- Aside: CTA panel ----- */
.store-cta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.store-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid var(--blue);
  transition: background .15s ease, color .15s ease
}

.store-cta__btn--primary {
  background: var(--blue);
  color: #fff
}

.store-cta__btn--primary:hover {
  background: var(--blue-600)
}

.store-cta__btn--secondary {
  background: #fff;
  color: var(--blue)
}

.store-cta__btn--secondary:hover {
  background: #eef2ff
}

.store-cta__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px
}

.store-cta__stat {
  background: #f5f7fb;
  border-radius: 10px;
  padding: 10px;
  text-align: center
}

.store-cta__stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px
}

.store-cta__stat-label {
  font-size: 9px;
  color: #6b7280;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px
}

/* ----- Aside: Supplier info ----- */
.supplier-info {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px
}

.supplier-info h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.supplier-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2)
}

.supplier-info-row:first-of-type {
  border-top: 0;
  padding-top: 0
}

.supplier-info-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 2px
}

.supplier-info-content {
  flex: 1;
  min-width: 0
}

.supplier-info-label {
  font-size: 9px;
  color: #9aa3b2;
  letter-spacing: 1.2px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px
}

.supplier-info-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35
}

/* ----- Aside: Shipping insurance ----- */
.shipping-insurance {
  background: #f5f7fb;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px
}

.shipping-insurance__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

.shipping-insurance__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.shipping-insurance__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.shipping-insurance p {
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5
}

.shipping-insurance a {
  font-size: 12px;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none
}

.shipping-insurance a:hover {
  text-decoration: underline
}

/* ----- Store detail responsive ----- */
@media (max-width: 1024px) {
  .store-layout {
    grid-template-columns: 1fr
  }

  .store-detail-aside {
    position: static;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap
  }

  .store-cta,
  .supplier-info,
  .shipping-insurance {
    flex: 1 1 280px
  }

  .store-products {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width: 768px) {
  .store-hero {
    padding: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-height: 0
  }

  .store-hero__media {
    display: none
  }

  .store-hero__title {
    font-size: 22px
  }

  .store-products {
    grid-template-columns: 1fr 1fr
  }

  .store-detail-aside {
    flex-direction: column
  }
}

@media (max-width: 480px) {
  .store-products {
    grid-template-columns: 1fr
  }

  .store-cta__stats {
    grid-template-columns: 1fr 1fr
  }
}

/* ===== Filter bar (Stores) ===== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  flex-wrap: wrap
}

.category-chips {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease
}

.chip:hover {
  background: #f5f7fb
}

.chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto
}

.sort-control label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500
}

.sort-select {
  padding: 8px 28px 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none
}

.sort-select:focus {
  border-color: var(--blue)
}

/* ===== Stores grid ===== */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.stores-grid .store-card {
  min-width: 0;
  max-width: none
}

.stores-empty {
  text-align: center;
  padding: 48px 20px;
  color: #6b7280;
  font-size: 14px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 12px
}

.load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 18px
}

.load-more-btn {
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease
}

.load-more-btn:hover {
  background: var(--blue);
  color: #fff
}

/* ===== Store card additions ===== */
.store-card__country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6b7280;
  margin-top: -4px
}

.store-card__country::before {
  content: '';
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, #ef4444 0 33%, #fff 33% 66%, #3b82f6 66%);
  border-radius: 2px;
  flex: 0 0 auto;
  border: 1px solid var(--line-2)
}

.store-card__stats {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  margin-top: 4px
}

.store-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1
}

.store-card__stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.store-card__stat-label {
  font-size: 10px;
  color: #9aa3b2;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 600
}

.store-card__actions {
  display: flex;
  gap: 6px
}

.store-card__follow {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease
}

.store-card__follow:hover {
  background: var(--blue-600);
  border-color: var(--blue-600)
}

.store-card__follow.is-following {
  background: #fff;
  color: var(--blue)
}

.store-card__follow.is-following:hover {
  background: #fee2e2;
  border-color: var(--red);
  color: var(--red)
}

.store-card .store-card__btn {
  flex: 1
}

/* Stretch View Store action when alone */
.store-card__actions:only-child .store-card__btn {
  width: 100%
}

/* =============================================================
   LANDING PAGE
   ============================================================= */

body.landing-page {
  background: #fff
}

.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}

/* ----- Image placeholder pattern ----- */
.placeholder-img {
  position: relative;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #eef2f7 12px, #eef2f7 24px);
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #94a3b8;
  overflow: hidden
}

.placeholder-img__icon {
  width: 48px;
  height: 48px;
  opacity: .55
}

.placeholder-img__label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #94a3b8
}

/* ===== Top contact bar (dark) ===== */
.landing-topbar {
  background: var(--blue);
  color: #cfd8ff
}

.landing-topbar > .landing-container {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 44px
}

.landing-topbar-contact {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto
}

.landing-topbar-contact a {
  color: #cfd8ff;
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500
}

.landing-topbar-contact a:hover {
  color: #fff
}

.landing-topbar-search {
  flex: 1;
  position: relative;
  max-width: 460px;
  margin: 0 auto
}

.landing-topbar-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280
}

.landing-topbar-search input {
  width: 100%;
  height: 32px;
  padding: 0 12px 0 34px;
  border-radius: 6px;
  border: 0;
  background: #fff;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  font-family: inherit
}

.landing-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto
}

.landing-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease
}

.landing-btn-ghost:hover {
  background: rgba(255, 255, 255, .12)
}

.landing-btn-primary {
  background: #fff;
  color: var(--blue);
  border: 0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit
}

.landing-btn-primary:hover {
  background: #f5f7fb
}

.landing-cart-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer
}

.landing-cart-btn:hover {
  background: rgba(255, 255, 255, .22)
}

.landing-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f59e0b;
  color: #1a1300;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 99px;
  line-height: 1.4;
  border: 2px solid var(--blue)
}

.landing-cart-badge.is-empty {
  display: none
}

/* ===== Main nav (white) ===== */
.landing-nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30
}

.landing-nav > .landing-container {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px
}

.landing-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto
}

.landing-logo img {
  width: 150px;
  height: auto
}

.landing-nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto
}

.landing-nav-links a {
  padding: 8px 16px;
  border-radius: 8px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease
}

.landing-nav-links a:hover {
  background: #f5f7fb;
  color: var(--blue)
}

.landing-nav-links a.active {
  color: var(--blue)
}

.landing-nav-toggle {
  display: none;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

/* ===== Hero ===== */
.hero {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f7fb 60%);
  padding: 56px 0;
  overflow: hidden
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 99px;
  letter-spacing: .3px
}

.hero h1 {
  font-size: 48px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--ink);
  margin: 16px 0 14px;
  letter-spacing: -1px
}

.hero h1 span {
  color: var(--blue)
}

.hero p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 480px
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.hero-actions .btn {
  padding: 12px 22px;
  font-size: 14px;
  border-radius: 8px
}

.hero-actions .btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s ease, color .15s ease
}

.hero-actions .btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.hero-image.placeholder-img {
  aspect-ratio: 1.05/1;
  border-radius: 16px
}

.hero-image .placeholder-img__icon {
  width: 80px;
  height: 80px
}

/* ===== Stats bar ===== */
.stats-bar {
  background: var(--blue);
  color: #fff;
  padding: 28px 0
}

.stats-bar > .landing-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1
}

.stat-label {
  font-size: 12px;
  color: #cfd8ff;
  margin-top: 6px;
  letter-spacing: .5px
}

/* ===== Brand strip ===== */
.brand-strip {
  padding: 48px 0 24px
}

.brand-strip-title {
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: #9aa3b2;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 22px
}

.brand-strip-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px
}

.brand-tile {
  height: 60px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #6b7280;
  font-size: 14px;
  background: #fff;
  letter-spacing: .5px;
  transition: border-color .15s ease, color .15s ease
}

.brand-tile:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* ===== Section eyebrow + heading ===== */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px
}

.section-eyebrow::before {
  content: '';
  width: 2px;
  height: 12px;
  background: var(--blue);
  border-radius: 1px
}

.landing-section-heading {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -.5px
}

.landing-section-sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 26px;
  max-width: 600px
}

/* ===== Categories mosaic ===== */
.categories-mosaic {
  padding: 36px 0
}

.categories-mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 360px
}

.cat-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: stretch;
  background: #f1f5f9;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease
}

.cat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08)
}

.cat-tile--large {
  grid-column: span 1;
  grid-row: span 2
}

.cat-tile__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cat-color, #e0e7ff), var(--cat-color-2, #c7d2fe));
  display: flex;
  align-items: center;
  justify-content: center
}

.cat-tile__media svg {
  width: 64px;
  height: 64px;
  color: rgba(255, 255, 255, .8)
}

.cat-tile--large .cat-tile__media svg {
  width: 96px;
  height: 96px
}

.cat-tile__content {
  position: relative;
  z-index: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 60%);
  width: 100%
}

.cat-tile__count {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(15, 23, 42, .08);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 99px;
  margin-bottom: 8px
}

.cat-tile__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0
}

.cat-tile--large .cat-tile__name {
  font-size: 22px
}

/* ===== How it works ===== */
.how-it-works {
  padding: 56px 0;
  background: #f5f7fb
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px
}

.how-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  position: relative
}

.how-step__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 12px;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 1px
}

.how-step__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px
}

.how-step h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink)
}

.how-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280
}

.how-step__connector {
  position: absolute;
  bottom: -1px;
  left: 22px;
  right: 22px;
  height: 3px;
  background: var(--blue);
  border-radius: 99px;
  opacity: .25
}

/* ===== Featured products section (landing) ===== */
.products-section {
  padding: 56px 0
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px
}

.section-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px
}

.products-tabs {
  display: inline-flex;
  background: #f5f7fb;
  border-radius: 99px;
  padding: 4px;
  gap: 2px
}

.product-tab {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease
}

.product-tab:hover {
  color: var(--ink)
}

.product-tab.active {
  background: var(--blue);
  color: #fff
}

.product-grid-landing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.product-card-landing {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease
}

.product-card-landing:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px)
}

.product-card__media {
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9
}

.product-card__media svg {
  width: 64px;
  height: 64px;
  color: rgba(15, 23, 42, .25)
}

.product-card__discount {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
  color: #fff
}

.product-card__discount.green { background: #16a34a }
.product-card__discount.orange { background: #f59e0b; color: #1a1300 }
.product-card__discount.red { background: #dc2626 }
.product-card__discount.blue { background: var(--blue) }

.product-card__rating {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, .92);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 3px
}

.product-card__body {
  padding: 14px
}

.product-card__category {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #9aa3b2;
  text-transform: uppercase;
  margin-bottom: 4px
}

.product-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3
}

.product-card__prices {
  display: inline-flex;
  align-items: baseline;
  gap: 8px
}

.product-card__price-now {
  font-size: 16px;
  font-weight: 800;
  color: var(--blue)
}

.product-card__price-was {
  font-size: 12px;
  color: #9aa3b2;
  text-decoration: line-through;
  font-weight: 500
}

/* ===== Shop by Stores section (landing wrapper) ===== */
.shop-stores {
  padding: 36px 0;
  background: #f5f7fb
}

.shop-stores .stores-grid {
  grid-template-columns: repeat(3, 1fr)
}

.explore-stores-row {
  display: flex;
  justify-content: center;
  margin-top: 24px
}

.explore-stores-row .btn {
  padding: 12px 28px;
  font-size: 14px;
  border-radius: 8px
}

/* ===== Banner cards ===== */
.banner-cards {
  padding: 48px 0
}

.banner-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px
}

.banner-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 200px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ink);
  text-decoration: none
}

.banner-card--golf {
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%)
}

.banner-card--milkshake {
  background: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
  color: #fff
}

.banner-card--toys {
  background: linear-gradient(135deg, #cffafe 0%, #67e8f9 100%)
}

.banner-card__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 18px;
  opacity: .35
}

.banner-card--milkshake .banner-card__media {
  opacity: .5
}

.banner-card__media svg {
  width: 140px;
  height: 140px;
  color: currentColor
}

.banner-card__content {
  position: relative;
  z-index: 1
}

.banner-card__content h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.15
}

.banner-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--blue);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease
}

.banner-card--milkshake .banner-card__btn {
  background: #fff;
  color: var(--blue)
}

.banner-card__btn:hover {
  transform: translateX(2px)
}

/* ===== Testimonials ===== */
.testimonials {
  padding: 56px 0;
  background: #f5f7fb
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px
}

.testimonial-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.testimonial-stars {
  color: #fbbf24;
  font-size: 14px;
  letter-spacing: 2px;
  display: flex;
  gap: 2px
}

.testimonial-quote {
  margin: 0;
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
  flex: 1
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2)
}

.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto
}

.testimonial-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.testimonial-role {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px
}

/* ===== Seller CTA ===== */
.seller-cta {
  padding: 36px 0
}

.seller-cta-card {
  background: linear-gradient(135deg, var(--blue) 0%, #1e3a8a 100%);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  flex-wrap: wrap
}

.seller-cta-content {
  flex: 1;
  min-width: 260px
}

.seller-cta-eyebrow {
  display: inline-flex;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #cfd8ff;
  text-transform: uppercase;
  margin-bottom: 10px
}

.seller-cta-card h2 {
  font-size: 28px;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -.5px
}

.seller-cta-card p {
  font-size: 14px;
  color: #cfd8ff;
  margin: 0;
  line-height: 1.55;
  max-width: 540px
}

.seller-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--blue);
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease
}

.seller-cta-btn:hover {
  transform: translateX(2px)
}

/* ===== Trust badges ===== */
.trust-badges {
  padding: 48px 0;
  border-top: 1px solid var(--line)
}

.trust-badges > .landing-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 14px
}

.trust-badge__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(14, 41, 168, .08);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.trust-badge h5 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.trust-badge p {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.55
}

/* ===== Mobile nav drawer ===== */
.landing-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
  padding: 60px 20px 20px;
  display: none
}

.landing-nav-drawer.is-open {
  transform: translateX(0)
}

.landing-nav-drawer a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600
}

.landing-nav-drawer a:hover {
  background: #f5f7fb;
  color: var(--blue)
}

.landing-nav-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

/* ===== Landing responsive ===== */
@media (max-width: 1024px) {
  .hero h1 {
    font-size: 40px
  }

  .hero-grid {
    gap: 32px
  }

  .brand-strip-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .categories-mosaic-grid {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
    grid-auto-flow: row
  }

  .cat-tile--large {
    grid-column: span 2;
    grid-row: span 1
  }

  .how-grid {
    grid-template-columns: 1fr 1fr
  }

  .product-grid-landing {
    grid-template-columns: repeat(3, 1fr)
  }

  .testimonials-grid {
    grid-template-columns: 1fr 1fr
  }

  .banner-grid {
    grid-template-columns: 1fr 1fr
  }

  .banner-card--milkshake {
    grid-column: span 2
  }

  .stats-bar > .landing-container {
    grid-template-columns: 1fr 1fr
  }

  .trust-badges > .landing-container {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

@media (max-width: 768px) {
  .landing-topbar > .landing-container {
    height: auto;
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 8px
  }

  .landing-topbar-contact {
    flex-basis: 100%;
    justify-content: space-between;
    min-width: 0
  }

  .landing-topbar-contact a {
    font-size: 11px
  }

  .landing-topbar-actions {
    flex-basis: 100%;
    order: 4;
    justify-content: flex-start
  }

  .landing-topbar-search {
    order: 5;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    margin: 0
  }

  .landing-nav-links {
    display: none
  }

  .landing-nav-toggle {
    display: inline-flex
  }

  .landing-nav-drawer {
    display: block
  }

  .hero {
    padding: 36px 0
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .hero h1 {
    font-size: 32px
  }

  .hero-image.placeholder-img {
    aspect-ratio: 1.4/1
  }

  .stat-value {
    font-size: 24px
  }

  .stats-bar {
    padding: 22px 0
  }

  .brand-strip-row {
    grid-template-columns: 1fr 1fr
  }

  .categories-mosaic-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 160px;
    height: auto
  }

  .cat-tile--large {
    grid-column: span 1
  }

  .how-grid {
    grid-template-columns: 1fr
  }

  .product-grid-landing {
    grid-template-columns: 1fr 1fr
  }

  .shop-stores .stores-grid {
    grid-template-columns: 1fr
  }

  .banner-grid {
    grid-template-columns: 1fr
  }

  .banner-card--milkshake {
    grid-column: span 1
  }

  .testimonials-grid {
    grid-template-columns: 1fr
  }

  .seller-cta-card {
    padding: 24px
  }

  .seller-cta-card h2 {
    font-size: 22px
  }

  .section-header h2,
  .landing-section-heading {
    font-size: 22px
  }
}

/* ===== Page footer ===== */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding: 28px 28px 22px;
  color: #6b7280
}

.site-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-2)
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.site-footer-brand img {
  width: 140px;
  height: auto;
  filter: brightness(.4) saturate(1.2)
}

.site-footer-brand p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
  max-width: 320px
}

.site-footer-col h5 {
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  text-transform: uppercase
}

.site-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.site-footer-col a {
  color: #6b7280;
  font-size: 13px;
  text-decoration: none;
  transition: color .15s ease
}

.site-footer-col a:hover {
  color: var(--blue)
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  font-size: 12px;
  color: #9aa3b2;
  flex-wrap: wrap
}

.site-footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap
}

.site-footer-legal a {
  color: #9aa3b2;
  text-decoration: none;
  transition: color .15s ease
}

.site-footer-legal a:hover {
  color: var(--blue)
}

.site-footer-social {
  display: flex;
  gap: 8px
}

.site-footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f5f7fb;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease
}

.site-footer-social a:hover {
  background: var(--blue);
  color: #fff
}

/* Make .main a flex column so footer sits at bottom */
.main {
  display: flex;
  flex-direction: column
}

.main > .content {
  flex: 1
}

/* ===== Mobile drawer toggle + overlay ===== */
.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  flex: 0 0 auto;
  font-family: inherit
}

.menu-toggle:hover {
  background: #f5f7fb
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 40;
  opacity: 0;
  transition: opacity .2s ease
}

.sidebar-overlay.is-open {
  display: block;
  opacity: 1
}

/* ===== Toast notifications ===== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none
}

.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  animation: toast-in .25s ease;
  pointer-events: auto
}

.toast.success {
  background: var(--green)
}

.toast.error {
  background: var(--red)
}

.toast.info {
  background: var(--blue)
}

.toast.is-leaving {
  animation: toast-out .25s ease forwards
}

@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0 }
  to { transform: translateY(0); opacity: 1 }
}

@keyframes toast-out {
  to { transform: translateY(20px); opacity: 0 }
}

@keyframes spin {
  to { transform: rotate(360deg) }
}

/* ===== Responsive: tablet ===== */
@media (max-width: 1024px) {
  .app {
    grid-template-columns: 200px 1fr
  }

  .brand-logo {
    width: 150px
  }

  .kpis {
    grid-template-columns: repeat(2, 1fr)
  }

  .grid-2,
  .grid-2-alt {
    grid-template-columns: 1fr
  }

  .prod-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .stores-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .search {
    width: 220px
  }
}

/* ===== Responsive: mobile ===== */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .15)
  }

  .sidebar.is-open {
    transform: translateX(0)
  }

  .menu-toggle {
    display: inline-flex
  }

  .topbar {
    padding: 14px 16px 0;
    gap: 10px;
    flex-wrap: wrap
  }

  .welcome h1 {
    font-size: 18px
  }

  .welcome p {
    font-size: 12px
  }

  .topbar .grow {
    display: none
  }

  .search {
    order: 10;
    width: 100%
  }

  .btn {
    padding: 8px 12px;
    font-size: 12px
  }

  .content {
    padding: 14px 16px 18px;
    gap: 14px
  }

  .kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
  }

  .kpi {
    padding: 14px
  }

  .kpi .value {
    font-size: 22px
  }

  .card-h {
    padding: 14px 16px 8px
  }

  /* Tables: horizontal scroll inside the card */
  .card > table,
  .card > .table-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  th,
  td {
    padding: 10px 14px;
    white-space: nowrap
  }

  .rfq-row,
  .quote-row,
  .msg-row,
  .store-row,
  .wish-row,
  .bar-row {
    padding-left: 16px;
    padding-right: 16px
  }

  .rfq-row {
    grid-template-columns: 1fr;
    row-gap: 6px
  }

  .rfq-row > div:not(.rfq-prod) {
    font-size: 12px
  }

  .rfq-row[style*="background"] {
    display: none
  }

  .quote-row {
    flex-wrap: wrap
  }

  .quote-actions {
    width: 100%;
    justify-content: flex-end
  }

  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 6px 16px 16px;
    gap: 10px
  }

  .cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 18px
  }

  .cta .btn-w {
    width: 100%
  }

  .store-card {
    min-width: 260px;
    max-width: 280px;
    padding: 18px
  }

  .stores-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .stores-grid .store-card {
    min-width: 0;
    max-width: none
  }

  .filter-bar {
    gap: 8px
  }

  .sort-control {
    width: 100%
  }

  .sort-select {
    flex: 1
  }

  .filter-tabs {
    padding: 4px 16px 12px
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px
  }

  .toast {
    min-width: 0
  }

  .site-footer {
    padding: 22px 16px 18px
  }

  .site-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 22px
  }

  .site-footer-brand {
    grid-column: 1 / -1
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }
}

@media (max-width: 480px) {
  .kpis {
    grid-template-columns: 1fr
  }

  .welcome h1 {
    font-size: 16px
  }

  .icon-btn {
    width: 34px;
    height: 34px
  }
}

/* ============================================================
   AUTH PAGES (Login / Sign Up / Forgot Password / Reset)
   Split-pane layout: left brand panel, right form
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif
}

.auth-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 50%, #7c3aed 100%);
  color: #fff;
  padding: 56px 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.auth-brand::before {
  content: '';
  position: absolute;
  inset: -50px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 200, 100, .12), transparent 40%);
  pointer-events: none
}

.auth-brand > * { position: relative }

.auth-brand-logo img {
  width: 180px;
  height: auto;
  filter: brightness(0) invert(1)
}

.auth-brand-hero h2 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -.5px
}

.auth-brand-hero p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 28px;
  max-width: 460px
}

.auth-brand-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 460px
}

.auth-brand-stat {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .04em;
  text-transform: uppercase
}

.auth-brand-stat strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -.3px
}

.auth-brand-footer {
  font-size: 12px;
  color: rgba(255, 255, 255, .6)
}

.auth-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 56px
}

.auth-form {
  width: 100%;
  max-width: 420px
}

.auth-form-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 28px;
  transition: color .15s ease
}

.auth-form-back:hover { color: var(--ink) }

.auth-form-back svg {
  width: 14px;
  height: 14px
}

.auth-form-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--ink);
  margin: 0 0 6px
}

.auth-form-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 28px;
  line-height: 1.5
}

.auth-form-field {
  margin-bottom: 16px
}

.auth-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px
}

.auth-form-field input,
.auth-form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease
}

.auth-form-field input:focus,
.auth-form-field select:focus {
  outline: none;
  border-color: var(--brand-600, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12)
}

.auth-form-field--password {
  position: relative
}

.auth-form-field--password input {
  padding-right: 44px
}

.auth-form-toggle-pw {
  position: absolute;
  right: 8px;
  top: 30px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px
}

.auth-form-toggle-pw:hover { color: var(--ink); background: #f3f4f6 }

.auth-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px
}

.auth-form-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  cursor: pointer;
  user-select: none
}

.auth-form-row label input { accent-color: #4f46e5 }

.auth-form-row a {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600
}

.auth-form-row a:hover { text-decoration: underline }

.auth-submit {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease;
  font-family: inherit
}

.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(79, 70, 229, .28)
}

.auth-submit:active { transform: translateY(0) }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 12px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .06em
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line)
}

.auth-sso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px
}

.auth-sso button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease
}

.auth-sso button:hover {
  background: #f9fafb;
  border-color: #d1d5db
}

.auth-sso button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.auth-footer-text {
  text-align: center;
  font-size: 14px;
  color: #6b7280
}

.auth-footer-text a {
  color: #4f46e5;
  font-weight: 600;
  text-decoration: none
}

.auth-footer-text a:hover { text-decoration: underline }

.auth-demo-hint {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 22px;
  font-size: 13px;
  color: #0c4a6e;
  display: flex;
  align-items: flex-start;
  gap: 10px
}

.auth-demo-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px
}

.auth-demo-hint strong { font-weight: 700 }

.auth-demo-hint button {
  background: transparent;
  border: 0;
  color: #0369a1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap
}

.auth-demo-hint button:hover { text-decoration: underline }

/* Sign Up wizard */
.auth-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 28px
}

.auth-step {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
  transition: background .25s ease
}

.auth-step.is-active { background: #4f46e5 }
.auth-step.is-done { background: #22c55e }

.auth-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px
}

.auth-role {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 20px 18px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  position: relative
}

.auth-role:hover { border-color: #c7d2fe; background: #f8faff }

.auth-role.is-selected {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #f5f3ff, #eef2ff)
}

.auth-role.is-selected::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: #4f46e5 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  border-radius: 50%
}

.auth-role-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 12px
}

.auth-role-icon svg {
  width: 20px;
  height: 20px
}

.auth-role h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px
}

.auth-role p {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0
}

.auth-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.auth-form-nav {
  display: flex;
  gap: 10px;
  margin-top: 6px
}

.auth-form-nav .auth-submit { flex: 1 }

.auth-back-btn {
  padding: 13px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease
}

.auth-back-btn:hover { background: #f9fafb }

/* Success state (post-signup, forgot-password sent) */
.auth-success {
  text-align: center;
  padding: 12px 0
}

.auth-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff
}

.auth-success-icon svg {
  width: 32px;
  height: 32px
}

.auth-success h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px
}

.auth-success p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 26px
}

/* Strength meter */
.auth-strength {
  margin-top: -8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px
}

.auth-strength-bars {
  display: flex;
  flex: 1;
  gap: 4px
}

.auth-strength-bar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px
}

.auth-strength.weak .auth-strength-bar:nth-child(1) { background: #ef4444 }
.auth-strength.medium .auth-strength-bar:nth-child(1),
.auth-strength.medium .auth-strength-bar:nth-child(2) { background: #f59e0b }
.auth-strength.strong .auth-strength-bar:nth-child(1),
.auth-strength.strong .auth-strength-bar:nth-child(2),
.auth-strength.strong .auth-strength-bar:nth-child(3) { background: #22c55e }
.auth-strength.very-strong .auth-strength-bar { background: #16a34a }

.auth-strength-label {
  font-size: 11px;
  color: #6b7280;
  min-width: 64px;
  text-align: right
}

/* Mobile */
@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr
  }

  .auth-brand {
    padding: 32px 24px 28px;
    min-height: 280px
  }

  .auth-brand-hero h2 { font-size: 24px }

  .auth-brand-hero p { font-size: 14px; margin-bottom: 20px }

  .auth-brand-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
  }

  .auth-brand-stat strong { font-size: 18px }

  .auth-form-pane {
    padding: 32px 24px 48px
  }

  .auth-form { max-width: none }

  .auth-form-title { font-size: 22px }

  .auth-sso { grid-template-columns: 1fr }

  .auth-form-grid-2 { grid-template-columns: 1fr }
}

/* ============================================================
   SELLER DASHBOARD
   B2B-focused KPIs, pipeline, response gauge, top buyers
   ============================================================ */

.seller-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px
}

.seller-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  min-width: 0
}

.seller-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.seller-kpi__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em
}

.seller-kpi__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center
}

.seller-kpi__icon svg { width: 16px; height: 16px }

.seller-kpi__icon--amber { background: #fef3c7; color: #d97706 }
.seller-kpi__icon--green { background: #dcfce7; color: #16a34a }
.seller-kpi__icon--blue { background: #dbeafe; color: #2563eb }
.seller-kpi__icon--purple { background: #f3e8ff; color: #7c3aed }

.seller-kpi__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px;
  line-height: 1.1
}

.seller-kpi__sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.seller-kpi__sub .pill { padding: 2px 8px; font-size: 10.5px }

.seller-kpi__alert {
  color: #b91c1c;
  font-weight: 600
}

.seller-kpi__trend {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.seller-kpi__trend--up { color: #16a34a }
.seller-kpi__trend--down { color: #dc2626 }

/* Dashboard 2-col layout: main column (2/3) + side column (1/3) */
.seller-dash-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px
}

.seller-dash-row--3col {
  grid-template-columns: 1fr 1fr 1fr
}

.seller-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 0;
  overflow: hidden
}

.seller-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px
}

.seller-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0
}

.seller-card__sub {
  font-size: 12px;
  color: #6b7280;
  margin: 2px 0 0
}

.seller-card__link {
  font-size: 12px;
  color: #4f46e5;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0
}

.seller-card__link:hover { text-decoration: underline }

.seller-tabs-mini {
  display: flex;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  font-size: 12px
}

.seller-tabs-mini button {
  border: 0;
  background: transparent;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  font-weight: 500;
  font-family: inherit
}

.seller-tabs-mini button.is-active {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04)
}

/* Revenue chart placeholder */
.seller-chart-tabs {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
  overflow-x: auto
}

.seller-chart-tab {
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  border: 0;
  background: transparent;
  font-family: inherit
}

.seller-chart-tab strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #cbd5e1;
  line-height: 1.1;
  margin-bottom: 2px;
  letter-spacing: -.3px
}

.seller-chart-tab.is-active strong { color: var(--ink) }

.seller-chart-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4f46e5;
  border-radius: 2px
}

.seller-chart-area {
  height: 200px;
  width: 100%;
  position: relative
}

.seller-chart-area svg { width: 100%; height: 100% }

.seller-chart-x {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: #9ca3af
}

.seller-chart-tooltip {
  position: absolute;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
  z-index: 2
}

.seller-chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b
}

/* Activity feed */
.seller-activity {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.seller-activity__item {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.seller-activity__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.seller-activity__icon svg { width: 16px; height: 16px }

.seller-activity__icon--rfq { background: #eef2ff; color: #4f46e5 }
.seller-activity__icon--order { background: #dcfce7; color: #16a34a }
.seller-activity__icon--review { background: #fef3c7; color: #d97706 }
.seller-activity__icon--sample { background: #f3e8ff; color: #7c3aed }
.seller-activity__icon--alert { background: #fee2e2; color: #dc2626 }

.seller-activity__body { flex: 1; min-width: 0 }

.seller-activity__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px
}

.seller-activity__desc {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5
}

.seller-activity__time {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px
}

/* Pipeline stages */
.seller-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px
}

.seller-pipeline-stage {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafbfc
}

.seller-pipeline-stage.is-active { border-color: #c7d2fe; background: #eef2ff }

.seller-pipeline-stage__count {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px;
  line-height: 1
}

.seller-pipeline-stage__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px
}

.seller-pipeline-stage__urgent {
  font-size: 10.5px;
  color: #b91c1c;
  font-weight: 600;
  margin-top: 6px
}

.seller-pipeline-rows {
  border-top: 1px solid var(--line-2);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.seller-pipeline-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .15s ease
}

.seller-pipeline-row:hover { background: #f8fafc; cursor: pointer }

.seller-pipeline-row__title {
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.seller-pipeline-row__buyer {
  color: #6b7280;
  font-size: 12px
}

.seller-pipeline-row__due {
  font-size: 12px;
  color: #6b7280
}

/* Country sales list */
.seller-country-list {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.seller-country {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center
}

.seller-country__flag {
  width: 32px;
  height: 22px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: #f3f4f6;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center
}

.seller-country__body { min-width: 0 }

.seller-country__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px
}

.seller-country__bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden
}

.seller-country__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 4px;
  transition: width .8s ease
}

.seller-country__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: right
}

.seller-country__delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px
}

.seller-country__delta--up { color: #16a34a }
.seller-country__delta--down { color: #dc2626 }

/* Top products / buyers */
.seller-product-row,
.seller-buyer-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer
}

.seller-product-row:last-child,
.seller-buyer-row:last-child { border-bottom: 0 }

.seller-product-row__thumb,
.seller-buyer-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .5);
  font-size: 12px;
  font-weight: 700
}

.seller-product-row__thumb svg,
.seller-buyer-row__avatar svg { width: 18px; height: 18px }

.seller-product-row__name,
.seller-buyer-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.seller-product-row__meta,
.seller-buyer-row__meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.seller-product-row__value,
.seller-buyer-row__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: right
}

.seller-product-row__delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  color: #16a34a
}

/* Sourcing opportunity */
.seller-opp {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fafbff, #fff)
}

.seller-opp:last-child { margin-bottom: 0 }

.seller-opp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px
}

.seller-opp__id {
  font-size: 12px;
  font-weight: 700;
  color: #4f46e5
}

.seller-opp__expires {
  font-size: 11px;
  color: #b91c1c;
  font-weight: 600
}

.seller-opp__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.4
}

.seller-opp__meta {
  font-size: 11.5px;
  color: #6b7280;
  margin: 0 0 10px
}

.seller-opp__actions {
  display: flex;
  gap: 6px
}

.seller-opp__btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease
}

.seller-opp__btn--primary {
  background: #4f46e5;
  color: #fff
}

.seller-opp__btn--primary:hover { opacity: .92 }

.seller-opp__btn--ghost {
  background: #fff;
  color: #6b7280;
  border: 1px solid var(--line)
}

.seller-opp__btn--ghost:hover { background: #f9fafb }

/* Reviews mini-summary */
.seller-reviews-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center
}

.seller-reviews-score {
  text-align: center;
  padding-right: 18px;
  border-right: 1px solid var(--line-2)
}

.seller-reviews-score__num {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  line-height: 1
}

.seller-reviews-score__stars {
  font-size: 13px;
  color: #f59e0b;
  letter-spacing: 1px;
  margin: 4px 0
}

.seller-reviews-score__count {
  font-size: 11px;
  color: #6b7280
}

.seller-reviews-latest__quote {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  font-style: italic;
  margin: 0 0 6px
}

.seller-reviews-latest__author {
  font-size: 11.5px;
  color: #6b7280
}

/* Response time gauge */
.seller-gauge {
  text-align: center;
  padding: 4px 0
}

.seller-gauge__ring {
  position: relative;
  width: 140px;
  height: 80px;
  margin: 0 auto 10px;
  overflow: hidden
}

.seller-gauge__ring svg {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg)
}

.seller-gauge__ring-bg {
  fill: none;
  stroke: #f3f4f6;
  stroke-width: 12;
  stroke-linecap: round
}

.seller-gauge__ring-fill {
  fill: none;
  stroke: url(#gradGreen);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease
}

.seller-gauge__value {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px
}

.seller-gauge__value small {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0
}

.seller-gauge__caption {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 0
}

.seller-gauge__threshold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  margin-top: 8px;
  padding: 3px 10px;
  background: #dcfce7;
  border-radius: 12px
}

/* PRO Seller card (sidebar) */
.pro-seller-card {
  margin: 12px 14px 16px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 14px;
  font-size: 12px
}

.pro-seller-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: #4f46e5;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px
}

.pro-seller-card__text {
  color: #4b5563;
  margin-bottom: 12px;
  line-height: 1.4
}

.pro-seller-card__btn {
  display: inline-block;
  background: #4f46e5;
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  width: 100%;
  text-align: center
}

.pro-seller-card__btn:hover { opacity: .92 }

/* Role switcher (dev convenience) */
.role-switcher {
  margin: 0 14px 12px;
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  font-size: 11px;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}
.company-switcher { margin: 0 14px 8px; display: flex; flex-direction: column; gap: 4px }
.company-switcher__label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #93a3c9 }
.company-switcher__select {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer
}
.company-switcher__select option { color: #0f172a }

.role-switcher__label { font-weight: 600 }

.role-switcher__btn {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit
}

.role-switcher__btn:hover { background: #fffbeb }

/* Mobile / tablet */
@media (max-width: 1100px) {
  .seller-kpi-grid { grid-template-columns: repeat(2, 1fr) }
  .seller-dash-row { grid-template-columns: 1fr }
  .seller-dash-row--3col { grid-template-columns: 1fr 1fr }
}

@media (max-width: 768px) {
  .seller-kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px }
  .seller-pipeline { grid-template-columns: 1fr 1fr; gap: 8px }
  .seller-dash-row--3col { grid-template-columns: 1fr }
  .seller-chart-tabs { gap: 14px }
  .seller-chart-tab strong { font-size: 16px }
  .seller-reviews-summary { grid-template-columns: 1fr; gap: 12px }
  .seller-reviews-score {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 12px
  }

  /* Pipeline rows: stack info, hide arrow */
  .seller-pipeline-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px
  }
  .seller-pipeline-row__due {
    grid-column: 1 / -1;
    font-size: 11px;
    color: #9ca3af
  }
  .seller-pipeline-row > span:last-child {
    display: none
  }
}

@media (max-width: 480px) {
  .seller-kpi-grid { grid-template-columns: 1fr }
  .seller-pipeline { grid-template-columns: 1fr 1fr }
}

/* ============================================================
   QUOTE REQUESTS (Seller inbox + Detail)
   ============================================================ */

.qr-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px
}

.qr-summary__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease
}

.qr-summary__card:hover { border-color: #c7d2fe }
.qr-summary__card.is-active {
  border-color: #4f46e5;
  background: linear-gradient(180deg, #fafbff, #fff);
  box-shadow: 0 4px 12px rgba(79, 70, 229, .08)
}

.qr-summary__card-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px
}

.qr-summary__card-count {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.4px
}

.qr-summary__card-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px
}

.qr-summary__card-alert { color: #b91c1c; font-weight: 600 }

/* Quote request table */
.qr-table-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px
}

.qr-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.qr-table-head__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }

.qr-table-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.qr-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  width: 220px
}

.qr-search svg { color: #9ca3af; flex-shrink: 0 }

.qr-search input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit
}

.qr-sort {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  color: #374151;
  cursor: pointer
}

.qr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

.qr-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-2)
}

.qr-table tbody tr {
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .12s ease
}

.qr-table tbody tr:hover { background: #f8fafc }
.qr-table tbody tr:last-child { border-bottom: 0 }

.qr-table td { padding: 14px 8px; vertical-align: top }

.qr-table__rfq-id {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px
}

.qr-table__product {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.qr-table__buyer {
  display: flex;
  align-items: center;
  gap: 10px
}

.qr-table__buyer-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.qr-table__buyer-name { font-weight: 600; color: var(--ink); font-size: 13px }
.qr-table__buyer-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px
}

.qr-table__repeat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: #dcfce7;
  color: #166534;
  margin-left: 6px;
  text-transform: uppercase
}

.qr-table__qty {
  font-weight: 700;
  color: var(--ink)
}

.qr-table__qty-unit {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px
}

.qr-table__target {
  font-weight: 700;
  color: #4f46e5
}

.qr-table__target-total {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px
}

.qr-table__expires {
  font-size: 12px
}

.qr-table__expires-urgent { color: #b91c1c; font-weight: 600 }
.qr-table__expires-warn { color: #d97706; font-weight: 600 }

.qr-table__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end
}

.qr-action-btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease, background .15s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.qr-action-btn--primary { background: #4f46e5; color: #fff }
.qr-action-btn--primary:hover { opacity: .92 }

.qr-action-btn--ghost {
  background: #fff;
  color: #6b7280;
  border: 1px solid var(--line)
}

.qr-action-btn--ghost:hover { background: #f9fafb; color: var(--ink) }

/* Quote Request Detail page */
.qr-detail-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start
}

.qr-detail-layout > * { min-width: 0 }

.qr-detail-aside {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.qr-buyer-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px
}

.qr-buyer-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.qr-buyer-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.qr-buyer-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.qr-buyer-card__verified {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  text-transform: uppercase;
  letter-spacing: .04em
}

.qr-buyer-card__loc { font-size: 12px; color: #6b7280 }

.qr-buyer-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px
}

.qr-buyer-card__stat-label {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em
}

.qr-buyer-card__stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px
}

.qr-buyer-card__cta {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.qr-quote-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px
}

.qr-quote-form__head {
  margin-bottom: 18px
}

.qr-quote-form__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px
}

.qr-quote-form__sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0
}

.qr-quote-form__mode {
  display: flex;
  gap: 6px;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px
}

.qr-quote-form__mode-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit
}

.qr-quote-form__mode-btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06)
}

.qr-quote-form__mode-btn--decline.is-active { color: #b91c1c }

.qr-quote-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px
}

.qr-quote-form__field { margin-bottom: 14px }

.qr-quote-form__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px
}

.qr-quote-form__field input,
.qr-quote-form__field select,
.qr-quote-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease
}

.qr-quote-form__field textarea { min-height: 80px; resize: vertical }

.qr-quote-form__field input:focus,
.qr-quote-form__field select:focus,
.qr-quote-form__field textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12)
}

.qr-quote-form__field-hint {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px
}

.qr-quote-form__pricing-tier {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px
}

.qr-quote-form__pricing-tier input {
  margin: 0
}

.qr-quote-form__pricing-tier-remove {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.qr-quote-form__pricing-tier-remove:hover { color: #dc2626; border-color: #fecaca }

.qr-quote-form__add-tier {
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 8px;
  width: 100%;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 4px
}

.qr-quote-form__add-tier:hover { background: #f5f3ff; border-color: #c7d2fe }

.qr-quote-form__summary {
  background: linear-gradient(180deg, #fafbff, #f5f3ff);
  border: 1px solid #e0e7ff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px
}

.qr-quote-form__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 6px
}

.qr-quote-form__summary-row:last-child { margin-bottom: 0 }

.qr-quote-form__summary-row.is-total {
  border-top: 1px solid #c7d2fe;
  padding-top: 10px;
  margin-top: 4px;
  font-size: 15px
}

.qr-quote-form__summary-row.is-total strong {
  font-size: 18px;
  color: #4338ca;
  font-weight: 800
}

.qr-quote-form__summary-label { color: #6b7280 }
.qr-quote-form__summary-value { color: var(--ink); font-weight: 600 }

.qr-quote-form__file-drop {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background .15s ease, border-color .15s ease
}

.qr-quote-form__file-drop:hover { background: #f8faff; border-color: #c7d2fe }

.qr-quote-form__file-drop svg {
  width: 24px;
  height: 24px;
  color: #9ca3af;
  margin-bottom: 6px
}

.qr-quote-form__file-drop-text {
  font-size: 12px;
  color: #6b7280
}

.qr-quote-form__file-drop strong { color: #4f46e5; font-weight: 600 }

.qr-quote-form__actions {
  display: flex;
  gap: 10px;
  align-items: center
}

.qr-quote-form__submit {
  flex: 1;
  padding: 12px 20px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s ease, box-shadow .15s ease
}

.qr-quote-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .25)
}

.qr-quote-form__submit--decline {
  background: linear-gradient(135deg, #dc2626, #b91c1c)
}

.qr-quote-form__submit--decline:hover {
  box-shadow: 0 8px 20px rgba(220, 38, 38, .25)
}

.qr-quote-form__draft {
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit
}

.qr-quote-form__draft:hover { background: #f9fafb }

.qr-quote-form__decline-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px
}

.qr-quote-form__decline-reason {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
  color: #374151;
  transition: border-color .15s ease, background .15s ease
}

.qr-quote-form__decline-reason.is-selected {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 600
}

/* Specs table (incoming request) */
.qr-specs-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px
}

.qr-specs-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.qr-specs-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px
}

.qr-specs-card__sub {
  font-size: 12px;
  color: #6b7280;
  margin: 0
}

.qr-specs-card__expires-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 12px;
  background: #fee2e2;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap
}

.qr-specs-card__expires-tag svg { width: 12px; height: 12px }

.qr-specs-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed
}

.qr-specs-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal
}

.qr-specs-table tr:last-child td { border-bottom: 0 }

.qr-specs-table td:first-child {
  width: 40%;
  color: #6b7280
}

.qr-specs-table td:last-child {
  color: var(--ink);
  font-weight: 600
}

.qr-specs-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5
}

.qr-specs-note strong { font-weight: 700 }

/* Status stepper (reuse from RFQ Detail buyer side, slightly adapted) */
.qr-status {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px
}

.qr-status__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px
}

.qr-status__steps {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  position: relative
}

.qr-status__step {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 11px
}

.qr-status__step::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--line-2);
  z-index: 0
}

.qr-status__step:last-child::before { display: none }

.qr-status__step.is-done::before { background: #22c55e }

.qr-status__step-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af
}

.qr-status__step.is-done .qr-status__step-dot {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff
}

.qr-status__step.is-active .qr-status__step-dot {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .15)
}

.qr-status__step-label {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1px
}

.qr-status__step-time {
  font-size: 10px;
  color: #9ca3af
}

/* Mobile */
@media (max-width: 1100px) {
  .qr-detail-layout { grid-template-columns: 1fr }
  .qr-detail-aside { position: static }
}

@media (max-width: 768px) {
  .qr-summary { grid-template-columns: 1fr 1fr }
  .qr-table { display: block; width: 100% }
  .qr-table thead { display: none }
  .qr-table tbody { display: block; width: 100% }
  .qr-table tbody tr {
    display: block;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box
  }
  .qr-table td {
    display: block;
    padding: 4px 0;
    border-bottom: 0;
    width: 100%;
    box-sizing: border-box
  }
  .qr-table td:before {
    content: attr(data-label) ': ';
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 4px
  }
  .qr-table td:first-child:before { display: none }
  .qr-table__actions { justify-content: flex-start }
  .qr-quote-form__row { grid-template-columns: 1fr }
  .qr-quote-form__pricing-tier { grid-template-columns: 1fr 1fr; gap: 8px }
  .qr-quote-form__pricing-tier-remove { grid-column: 1 / -1; width: 100%; height: 32px }
  .qr-quote-form__decline-reasons { grid-template-columns: 1fr }
  .qr-status__step { font-size: 10px }
  .qr-status__step-label { font-size: 10px }
}

@media (max-width: 480px) {
  .qr-summary { grid-template-columns: 1fr }
}

/* ============================================================
   SALES ORDERS (Seller fulfillment)
   Reuses qr-summary, qr-table, qr-status, qr-detail-layout,
   qr-buyer-card, seller-activity. Adds the action panel + escrow.
   ============================================================ */

/* Prominent "next action" panel on detail page */
.so-action-panel {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px
}

.so-action-panel--urgent {
  background: linear-gradient(135deg, #fef3c7, #fef9c3);
  border-color: #fcd34d
}

.so-action-panel--success {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  border-color: #86efac
}

.so-action-panel__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4338ca;
  margin-bottom: 6px
}

.so-action-panel--urgent .so-action-panel__label { color: #92400e }
.so-action-panel--success .so-action-panel__label { color: #166534 }

.so-action-panel__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px
}

.so-action-panel__desc {
  font-size: 13px;
  color: #4b5563;
  margin: 0 0 14px;
  line-height: 1.5
}

.so-action-panel__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.so-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 9px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.so-btn--primary { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff }
.so-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(79, 70, 229, .25) }

.so-btn--success { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff }
.so-btn--success:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22, 163, 74, .25) }

.so-btn--ghost { background: #fff; border: 1px solid var(--line); color: #374151 }
.so-btn--ghost:hover { background: #f9fafb }

/* Inline ship form (revealed on "Add tracking") */
.so-ship-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 12px
}

.so-ship-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px
}

.so-ship-form__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px
}

.so-ship-form__field input,
.so-ship-form__field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink)
}

.so-ship-form__field input:focus,
.so-ship-form__field select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12)
}

/* Order items table */
.so-items {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px
}

.so-items__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px
}

.so-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

.so-items-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2)
}

.so-items-table thead th:last-child,
.so-items-table tbody td:last-child { text-align: right }

.so-items-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle
}

.so-items-table tbody tr:last-child td { border-bottom: 0 }

.so-items-table__product {
  display: flex;
  align-items: center;
  gap: 10px
}

.so-items-table__thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .5);
  flex-shrink: 0
}

.so-items-table__thumb svg { width: 18px; height: 18px }

.so-items-table__name { font-weight: 600; color: var(--ink) }
.so-items-table__variant { font-size: 11px; color: #6b7280; margin-top: 1px }

.so-items__totals {
  border-top: 1px solid var(--line-2);
  margin-top: 14px;
  padding-top: 14px
}

.so-items__total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px
}

.so-items__total-row.is-grand {
  font-size: 15px;
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
  margin-top: 4px
}

.so-items__total-label { color: #6b7280 }
.so-items__total-value { color: var(--ink); font-weight: 600 }
.so-items__total-row.is-grand .so-items__total-value { color: #4338ca; font-size: 18px; font-weight: 800 }

/* Escrow / Trade Assurance card */
.so-escrow {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px
}

.so-escrow__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px
}

.so-escrow__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.so-escrow__icon svg { width: 18px; height: 18px }

.so-escrow__title { font-size: 14px; font-weight: 700; color: var(--ink) }
.so-escrow__sub { font-size: 11px; color: #6b7280 }

.so-escrow__amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px;
  margin-bottom: 4px
}

.so-escrow__stages {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.so-escrow__stage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px
}

.so-escrow__stage-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: transparent
}

.so-escrow__stage.is-done .so-escrow__stage-dot { background: #22c55e; border-color: #22c55e; color: #fff }
.so-escrow__stage.is-active .so-escrow__stage-dot { border-color: #4f46e5; background: #4f46e5; color: #fff }

.so-escrow__stage-label { font-weight: 600; color: var(--ink) }
.so-escrow__stage-time { color: #9ca3af; font-size: 11px }
.so-escrow__stage.is-pending .so-escrow__stage-label { color: #9ca3af; font-weight: 500 }

/* 6-step stepper override for sales orders (qr-status with 6 steps fits) */
.so-status .qr-status__step { font-size: 10.5px }

@media (max-width: 768px) {
  .so-ship-form__row { grid-template-columns: 1fr }
  .so-items-table { display: block; overflow-x: auto; white-space: nowrap }
}

/* ============================================================
   REVIEWS (Seller — buyer feedback)
   ============================================================ */

.rv-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start
}

.rv-summary {
  position: sticky;
  top: 88px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px
}

.rv-summary__score {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 16px
}

.rv-summary__num {
  font-size: 44px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1
}

.rv-summary__stars {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 8px 0 4px
}

.rv-summary__count {
  font-size: 12px;
  color: #6b7280
}

.rv-bar-row {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #6b7280
}

.rv-bar {
  height: 7px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden
}

.rv-bar__fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 4px
}

.rv-summary__stats {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.rv-summary__stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em
}

.rv-summary__stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px
}

.rv-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.rv-filter {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease
}

.rv-filter:hover { border-color: #c7d2fe }
.rv-filter.is-active { background: #4f46e5; border-color: #4f46e5; color: #fff; font-weight: 600 }

.rv-filter .count {
  background: rgba(0, 0, 0, .08);
  border-radius: 10px;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 11px
}

.rv-filter.is-active .count { background: rgba(255, 255, 255, .25) }

.rv-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px
}

.rv-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px
}

.rv-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.rv-card__meta { flex: 1; min-width: 0 }

.rv-card__buyer {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.rv-card__verified {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #dcfce7;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: .04em
}

.rv-card__sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.rv-card__stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 1px;
  flex-shrink: 0
}

.rv-card__product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #4338ca;
  background: #eef2ff;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: 500
}

.rv-card__body {
  font-size: 13.5px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 12px
}

.rv-card__photos {
  display: flex;
  gap: 8px;
  margin-bottom: 12px
}

.rv-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .4)
}

.rv-card__photo svg { width: 22px; height: 22px }

.rv-card__actions {
  display: flex;
  gap: 8px;
  align-items: center
}

.rv-card__btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-family: inherit
}

.rv-card__btn--primary { background: #4f46e5; border-color: #4f46e5; color: #fff }
.rv-card__btn--primary:hover { opacity: .92 }
.rv-card__btn:hover { background: #f9fafb }
.rv-card__btn--primary:hover { background: #4338ca }

.rv-card__helpful {
  margin-left: auto;
  font-size: 11.5px;
  color: #9ca3af
}

/* Seller reply (nested) */
.rv-reply {
  margin-top: 12px;
  margin-left: 24px;
  padding: 12px 16px;
  background: #f8fafc;
  border-left: 3px solid #4f46e5;
  border-radius: 0 8px 8px 0
}

.rv-reply__head {
  font-size: 12px;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px
}

.rv-reply__body {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin: 0
}

.rv-reply__time { font-size: 11px; color: #9ca3af; margin-top: 4px }

/* Inline reply form */
.rv-reply-form {
  margin-top: 12px;
  display: none
}

.rv-reply-form.is-open { display: block }

.rv-reply-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  min-height: 70px;
  resize: vertical
}

.rv-reply-form textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12) }

.rv-reply-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px
}

.rv-needs-reply {
  border-left: 3px solid #f59e0b
}

@media (max-width: 900px) {
  .rv-layout { grid-template-columns: 1fr }
  .rv-summary { position: static }
  .rv-summary__score { display: flex; align-items: center; gap: 18px; text-align: left; justify-content: flex-start }
  .rv-summary__score > div:first-child { flex-shrink: 0 }
}

/* ============================================================
   BUYERS (Seller — accounts / CRM-lite)
   Reuses qr-summary + qr-table. A couple of helpers below.
   ============================================================ */

.by-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase
}

.by-status-pill--vip { background: #fef3c7; color: #92400e }
.by-status-pill--repeat { background: #dcfce7; color: #166534 }
.by-status-pill--new { background: #dbeafe; color: #1e40af }
.by-status-pill--risk { background: #fef2f2; color: #991b1b }

.by-ltv { font-weight: 700; color: var(--ink) }
.by-ltv-bar {
  height: 5px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
  width: 90px
}
.by-ltv-bar__fill { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 3px }

/* ===== BUYERS — Enhanced list + Detail page ===== */

/* Smart suggestion banner */
.by-suggestion {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap
}
.by-suggestion__icon {
  width: 36px; height: 36px;
  background: #4f46e5; color: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.by-suggestion__icon svg { width: 18px; height: 18px }
.by-suggestion__text { flex: 1; min-width: 220px; font-size: 13px; color: #312e81; line-height: 1.4 }
.by-suggestion__text strong { color: #1e1b4b; font-weight: 700 }
.by-suggestion__actions { display: flex; gap: 8px; flex-shrink: 0 }
.by-suggestion__btn {
  font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 7px;
  background: #4f46e5; color: #fff; border: 0;
  cursor: pointer; font-family: inherit
}
.by-suggestion__btn:hover { background: #4338ca }
.by-suggestion__btn--ghost { background: transparent; color: #4338ca; border: 1px solid #c7d2fe }
.by-suggestion__btn--ghost:hover { background: #fff }

/* View toggle (Table / Pipeline) */
.by-view-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f1f5f9; padding: 3px; border-radius: 8px
}
.by-view-toggle button {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; color: #475569;
  font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s ease, color .15s ease
}
.by-view-toggle button svg { width: 13px; height: 13px }
.by-view-toggle button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.05) }

/* Subtoolbar holding country dropdown + persistent view toggle */
.by-subtoolbar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; flex-wrap: wrap
}
.by-subtoolbar .grow { flex: 1 }
.by-country-select-wrap {
  display: inline-flex; align-items: center; gap: 8px
}
.by-country-select {
  padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--ink);
  cursor: pointer; min-width: 220px
}
.by-country-select:focus { outline: 2px solid #c7d2fe; outline-offset: -1px }
@media (max-width: 700px) {
  .by-country-select { min-width: 0; width: 100% }
  .by-country-select-wrap { width: 100%; gap: 6px }
  .by-subtoolbar { gap: 8px }
}

/* Country filter chips (legacy — kept for any other uses) */
.by-country-row {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 14px;
  flex-wrap: wrap
}
.by-country-row__label {
  font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  margin-right: 4px
}
.by-country-chip {
  font-size: 12px; font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer;
  color: #4b5563; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .15s ease, background .15s ease, color .15s ease
}
.by-country-chip:hover { border-color: #c7d2fe }
.by-country-chip.is-active { border-color: #4f46e5; background: #4f46e5; color: #fff }
.by-country-chip__count { opacity: .7; font-weight: 500 }

/* Bulk action bar (when rows selected) */
.by-bulk-bar {
  display: none;
  align-items: center; gap: 10px;
  background: #1e1b4b; color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 13px
}
.by-bulk-bar.is-visible { display: flex }
.by-bulk-bar__count { font-weight: 700 }
.by-bulk-bar__btn {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 7px;
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  cursor: pointer; font-family: inherit
}
.by-bulk-bar__btn:hover { background: rgba(255,255,255,.2) }
.by-bulk-bar__btn--danger { background: #dc2626 }
.by-bulk-bar__btn--danger:hover { background: #b91c1c }
.by-bulk-bar__close {
  margin-left: auto;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 6px;
  cursor: pointer; font-size: 16px; font-family: inherit
}
.by-bulk-bar__close:hover { background: rgba(255,255,255,.2) }
.by-row-check { accent-color: #4f46e5; cursor: pointer }
tr.is-selected { background: #f5f3ff !important }

/* Tag chips on rows */
.by-tags-cell {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; max-width: 180px
}
.by-tag {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6; color: #374151;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px
}
.by-tag--green { background: #dcfce7; color: #166534 }
.by-tag--blue { background: #dbeafe; color: #1e40af }
.by-tag--amber { background: #fef3c7; color: #92400e }
.by-tag--purple { background: #ede9fe; color: #5b21b6 }
.by-tag--pink { background: #fce7f3; color: #9d174d }
.by-tag-add {
  font-size: 10.5px; font-weight: 600; color: #6b7280;
  padding: 2px 7px;
  border: 1px dashed var(--line); border-radius: 999px;
  background: transparent; cursor: pointer;
  font-family: inherit
}
.by-tag-add:hover { color: #4338ca; border-color: #c7d2fe; background: #f5f3ff }

/* Activity column polish (typed activity) */
.by-activity-line {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #4b5563
}
.by-activity-line__icon { font-size: 12px }
.by-activity-line__time { color: #9ca3af; font-size: 11px }
.by-activity-line--rfq { color: #4338ca }
.by-activity-line--msg { color: #0891b2 }
.by-activity-line--order { color: #166534 }
.by-activity-line--none { color: #9ca3af; font-style: italic }

/* Health pill (A/B/C) */
.by-health {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  vertical-align: middle
}
.by-health--a { background: #dcfce7; color: #166534 }
.by-health--b { background: #fef3c7; color: #854d0e }
.by-health--c { background: #fee2e2; color: #b91c1c }

/* Acquisition source chip */
.by-source {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f3f4f6; color: #4b5563;
  display: inline-flex; align-items: center; gap: 4px
}
.by-source__icon { font-size: 10px }

/* Pipeline (Kanban) view */
.by-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px
}
.by-pipeline-col {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  min-width: 0
}
.by-pipeline-col__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px
}
.by-pipeline-col__title {
  font-size: 12px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px
}
.by-pipeline-col__count {
  font-size: 11px; font-weight: 600; color: #6b7280;
  background: #fff;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line)
}
.by-pipeline-col__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #94a3b8
}
.by-pipeline-col--lead .by-pipeline-col__dot { background: #94a3b8 }
.by-pipeline-col--quoted .by-pipeline-col__dot { background: #4338ca }
.by-pipeline-col--won .by-pipeline-col__dot { background: #16a34a }
.by-pipeline-col--repeat .by-pipeline-col__dot { background: #f59e0b }
.by-pipeline-col--risk .by-pipeline-col__dot { background: #dc2626 }

.by-pipeline-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  display: block; text-decoration: none; color: inherit
}
.by-pipeline-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  transform: translateY(-1px)
}
.by-pipeline-card__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px
}
.by-pipeline-card__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.by-pipeline-card__name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2 }
.by-pipeline-card__meta { font-size: 11px; color: #6b7280; margin-top: 1px }
.by-pipeline-card__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: #4b5563;
  margin-top: 6px
}
.by-pipeline-card__row strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
.by-pipeline-card__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px }

/* Buyer DETAIL page */
.by-detail-header {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
  display: flex; gap: 20px; align-items: flex-start;
  flex-wrap: wrap
}
.by-detail-header__avatar {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.by-detail-header__main { flex: 1; min-width: 240px }
.by-detail-header__title-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; flex-wrap: wrap
}
.by-detail-header__name { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 }
.by-detail-header__meta {
  font-size: 13px; color: #6b7280; line-height: 1.5;
  display: flex; gap: 14px; flex-wrap: wrap
}
.by-detail-header__meta-row { display: inline-flex; align-items: center; gap: 5px }

.by-detail-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 0;
  width: 100%;
  border-top: 1px solid var(--line-2); padding-top: 16px
}
.by-detail-kpi__label { font-size: 11px; color: #6b7280; font-weight: 500 }
.by-detail-kpi__value {
  font-size: 22px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-top: 2px
}
.by-detail-kpi__trend { font-size: 11px; color: #16a34a; font-weight: 600; margin-top: 2px }

.by-detail-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap }
.by-detail-actions button, .by-detail-actions a {
  font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 8px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none
}
.by-detail-actions button:hover, .by-detail-actions a:hover { background: #f3f4f6 }
.by-detail-actions .is-primary {
  background: #4f46e5; color: #fff; border-color: #4f46e5
}
.by-detail-actions .is-primary:hover { background: #4338ca; border-color: #4338ca }
.by-detail-actions svg { width: 14px; height: 14px }

/* Tags row in detail */
.by-detail-tags {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap
}
.by-detail-tags__label {
  font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  margin-right: 4px
}

/* Detail layout: main + sidebar */
.by-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px
}
@media (max-width: 980px) {
  .by-detail-layout { grid-template-columns: 1fr }
  .by-detail-kpis { grid-template-columns: 1fr 1fr }
}

/* Detail tabs */
.by-detail-tabs {
  display: flex; gap: 4px;
  background: #f1f5f9; padding: 3px;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow-x: auto
}
.by-detail-tabs button {
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 7px;
  background: transparent; border: 0;
  cursor: pointer; color: #475569;
  font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease, color .15s ease
}
.by-detail-tabs button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.05) }
.by-detail-tab-badge {
  font-size: 10.5px; font-weight: 700;
  background: #e5e7eb; color: #4b5563;
  padding: 1px 6px; border-radius: 999px
}
.by-detail-tabs button.is-active .by-detail-tab-badge { background: #eef2ff; color: #4338ca }

.by-detail-pane { display: none }
.by-detail-pane.is-active { display: block }

.by-detail-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px; margin-bottom: 14px
}
.by-detail-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px
}
.by-detail-card__title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 }
.by-detail-card__sub { font-size: 11.5px; color: #6b7280; margin: 2px 0 0 }

/* Timeline */
.by-timeline { position: relative; padding-left: 22px }
.by-timeline::before {
  content: ''; position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line-2)
}
.by-timeline-item { position: relative; padding-bottom: 14px }
.by-timeline-item:last-child { padding-bottom: 0 }
.by-timeline-item__dot {
  position: absolute; left: -19px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  border: 2.5px solid #4f46e5
}
.by-timeline-item__dot--order { border-color: #16a34a }
.by-timeline-item__dot--rfq { border-color: #4338ca }
.by-timeline-item__dot--msg { border-color: #0891b2 }
.by-timeline-item__dot--note { border-color: #f59e0b }
.by-timeline-item__title { font-size: 13px; font-weight: 600; color: var(--ink) }
.by-timeline-item__meta { font-size: 11.5px; color: #6b7280; margin-top: 2px }
.by-timeline-item__body { font-size: 12.5px; color: #4b5563; margin-top: 4px; line-height: 1.5 }

/* Sidebar contact card */
.by-detail-sidebar { display: flex; flex-direction: column; gap: 14px }
.by-detail-contact-list { display: flex; flex-direction: column; gap: 10px }
.by-detail-contact {
  display: flex; gap: 10px; align-items: center;
  padding: 10px;
  border: 1px solid var(--line-2); border-radius: 9px
}
.by-detail-contact__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e5e7eb; color: #4b5563;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.by-detail-contact__name { font-size: 13px; font-weight: 600; color: var(--ink) }
.by-detail-contact__role { font-size: 11px; color: #6b7280 }
.by-detail-contact__main { flex: 1; min-width: 0 }
.by-detail-contact__action {
  width: 30px; height: 30px;
  background: transparent; color: #6b7280;
  border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: inherit
}
.by-detail-contact__action svg { width: 13px; height: 13px }
.by-detail-contact__action:hover { background: #f3f4f6 }

/* Notes area on detail */
.by-notes-area {
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; color: var(--ink);
  resize: vertical; width: 100%;
  line-height: 1.5
}
.by-notes-area:focus { outline: 2px solid #c7d2fe; outline-offset: -1px }

/* Buying patterns */
.by-pattern-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: 13px
}
.by-pattern-row:last-child { border-bottom: 0 }
.by-pattern-row__label { color: #4b5563; flex: 1 }
.by-pattern-row__value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
.by-pattern-row__bar {
  flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden;
  max-width: 100px
}
.by-pattern-row__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 3px
}

@media (max-width: 700px) {
  .by-pipeline { grid-template-columns: repeat(5, 280px); grid-auto-columns: 280px }
}

/* ============================================================
   EARNINGS (Seller — escrow, balance, payouts)
   Reuses seller-kpi, seller-chart, seller-card, qr-table.
   ============================================================ */

/* Balance card (right rail) */
.ea-balance {
  background: linear-gradient(135deg, #1e1b4b, #4f46e5);
  color: #fff;
  border-radius: 14px;
  padding: 22px;
  position: relative;
  overflow: hidden
}

.ea-balance::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .12), transparent 45%);
  pointer-events: none
}

.ea-balance > * { position: relative }

.ea-balance__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px
}

.ea-balance__amount {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px
}

.ea-balance__note {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 16px
}

.ea-balance__btn {
  width: 100%;
  background: #fff;
  color: #4338ca;
  border: 0;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s ease
}

.ea-balance__btn:hover { transform: translateY(-1px) }

.ea-balance__breakdown {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ea-balance__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px
}

.ea-balance__row-label {
  color: rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  gap: 8px
}

.ea-balance__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.ea-balance__row-value { font-weight: 700 }

.ea-balance__schedule {
  margin-top: 16px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px
}

.ea-balance__schedule svg { width: 14px; height: 14px; flex-shrink: 0 }

/* Upcoming escrow releases */
.ea-release {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2)
}

.ea-release:last-child { border-bottom: 0 }

.ea-release__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ea-release__icon svg { width: 18px; height: 18px }

.ea-release__body { flex: 1; min-width: 0 }

.ea-release__order {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.ea-release__meta {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 1px
}

.ea-release__amount {
  font-size: 14px;
  font-weight: 700;
  color: #16a34a;
  text-align: right;
  flex-shrink: 0
}

.ea-release__amount-when {
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 500;
  margin-top: 1px
}

/* Payout method card */
.ea-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px
}

.ea-method__logo {
  width: 46px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .03em
}

.ea-method__body { flex: 1; min-width: 0 }

.ea-method__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

.ea-method__sub { font-size: 11.5px; color: #6b7280; margin-top: 1px }

.ea-method__default {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #dcfce7;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: .04em
}

.ea-add-method {
  width: 100%;
  border: 1px dashed var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #4f46e5;
  cursor: pointer;
  font-family: inherit
}

.ea-add-method:hover { background: #f5f3ff; border-color: #c7d2fe }

/* Fee breakdown */
.ea-fee-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2)
}

.ea-fee-row:last-child { border-bottom: 0 }

.ea-fee-row.is-total {
  font-size: 15px;
  font-weight: 700;
  padding-top: 12px;
  border-top: 2px solid var(--line-2);
  border-bottom: 0;
  margin-top: 4px
}

.ea-fee-label { color: #6b7280 }
.ea-fee-row.is-total .ea-fee-label { color: var(--ink) }
.ea-fee-value { font-weight: 600; color: var(--ink) }
.ea-fee-value--neg { color: #dc2626 }
.ea-fee-row.is-total .ea-fee-value { color: #16a34a; font-size: 18px; font-weight: 800 }

/* Payout status pills (reuse pill, but a couple custom) */
.ea-payout-status--processing { background: #fef3c7; color: #92400e }

/* ============================================================
   INVENTORY (Seller — stock management)
   Reuses qr-summary, filter-tabs, qr-table-card.
   ============================================================ */

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

.inv-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap
}

.inv-table thead th.is-num,
.inv-table tbody td.is-num { text-align: right }

.inv-table tbody tr {
  border-bottom: 1px solid var(--line-2);
  transition: background .12s ease
}

.inv-table tbody tr:hover { background: #f8fafc }
.inv-table tbody tr.inv-variant-row { background: #fafbfc }
.inv-table tbody tr.inv-variant-row td:first-child { padding-left: 40px }

.inv-table td {
  padding: 13px 14px;
  vertical-align: middle
}

.inv-table__product {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.inv-table__expand {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: transform .15s ease
}

.inv-table__expand.is-open { transform: rotate(90deg) }
.inv-table__expand svg { width: 14px; height: 14px }
.inv-table__expand-spacer { width: 20px; flex-shrink: 0 }

.inv-table__thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .5);
  flex-shrink: 0
}

.inv-table__thumb svg { width: 18px; height: 18px }

.inv-table__swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .08)
}

.inv-table__name { font-weight: 600; color: var(--ink); white-space: nowrap }
.inv-table__sku { font-size: 11px; color: #9ca3af; font-family: 'SF Mono', Menlo, monospace; margin-top: 1px }

.inv-num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
.inv-num--muted { color: #9ca3af; font-weight: 500 }
.inv-num--avail { color: #16a34a }
.inv-num--low { color: #d97706 }
.inv-num--out { color: #dc2626 }

.inv-incoming {
  font-size: 12px;
  color: #2563eb;
  font-weight: 600;
  white-space: nowrap
}
.inv-incoming small { color: #9ca3af; font-weight: 500; display: block; font-size: 10.5px }
.inv-incoming--none { color: #d1d5db; font-weight: 500 }

.inv-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap
}

.inv-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor
}

.inv-status--healthy { background: #dcfce7; color: #166534 }
.inv-status--low { background: #fef3c7; color: #92400e }
.inv-status--out { background: #fef2f2; color: #991b1b }
.inv-status--mto { background: #eef2ff; color: #4338ca }

.inv-adjust-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: #4f46e5;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap
}

.inv-adjust-btn:hover { background: #f5f3ff; border-color: #c7d2fe }

/* Adjustment form + movement log row */
.inv-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px
}

.inv-adjust-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px
}

.inv-adjust-card__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px }
.inv-adjust-card__sub { font-size: 12px; color: #6b7280; margin: 0 0 16px }

.inv-adjust-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 9px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

.inv-adjust-product__thumb {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  flex-shrink: 0
}

.inv-adjust-field { margin-bottom: 14px }
.inv-adjust-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px }
.inv-adjust-field input,
.inv-adjust-field select,
.inv-adjust-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink)
}
.inv-adjust-field textarea { min-height: 56px; resize: vertical }
.inv-adjust-field input:focus, .inv-adjust-field select:focus, .inv-adjust-field textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12) }

.inv-adjust-type {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px
}

.inv-adjust-type label {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: #374151;
  margin: 0
}

.inv-adjust-type label.is-active { border-color: #4f46e5; background: #f5f3ff; color: #4338ca }
.inv-adjust-type input { display: none }

.inv-adjust-actions { display: flex; gap: 10px; margin-top: 4px }

.inv-movement-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px
}

.inv-movement {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2)
}
.inv-movement:last-child { border-bottom: 0 }

.inv-movement__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}
.inv-movement__icon svg { width: 15px; height: 15px }
.inv-movement__icon--in { background: #dcfce7; color: #16a34a }
.inv-movement__icon--out { background: #fef2f2; color: #dc2626 }
.inv-movement__icon--set { background: #eef2ff; color: #4f46e5 }

.inv-movement__body { flex: 1; min-width: 0 }
.inv-movement__title { font-size: 13px; font-weight: 600; color: var(--ink) }
.inv-movement__meta { font-size: 11.5px; color: #6b7280; margin-top: 1px }
.inv-movement__delta { font-size: 13px; font-weight: 700; white-space: nowrap }
.inv-movement__delta--in { color: #16a34a }
.inv-movement__delta--out { color: #dc2626 }

@media (max-width: 1100px) {
  .inv-bottom { grid-template-columns: 1fr }
}

@media (max-width: 900px) {
  .inv-table-wrap { overflow-x: auto }
  .inv-table { min-width: 760px }
}

/* ============================================================
   REPORTS (Seller analytics)
   ============================================================ */

.rp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.rp-daterange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit
}

.rp-daterange svg { width: 15px; height: 15px; color: #6b7280 }

.rp-toolbar__grow { flex: 1 }

.rp-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-family: inherit
}

.rp-toolbar__btn:hover { background: #f9fafb }
.rp-toolbar__btn svg { width: 14px; height: 14px }
.rp-toolbar__btn--primary { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: 0 }
.rp-toolbar__btn--primary:hover { opacity: .92 }

.rp-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start
}

.rp-layout > * { min-width: 0 }

/* Report library rail */
.rp-library {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.rp-lib-group {
  font-size: 10.5px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 10px 4px
}

.rp-lib-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background .15s ease
}

.rp-lib-item:hover { background: #f3f4f6 }
.rp-lib-item.is-active { background: #eef2ff }

.rp-lib-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.rp-lib-item.is-active .rp-lib-item__icon { background: #4f46e5; color: #fff }
.rp-lib-item__icon svg { width: 16px; height: 16px }

.rp-lib-item__name { font-size: 13px; font-weight: 600; color: var(--ink) }
.rp-lib-item.is-active .rp-lib-item__name { color: #4338ca }
.rp-lib-item__desc { font-size: 11px; color: #9ca3af; margin-top: 1px }

/* Report panel */
.rp-panel { display: none }
.rp-panel.is-active { display: block }

.rp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px
}

.rp-header__title { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; margin: 0 0 2px }
.rp-header__sub { font-size: 13px; color: #6b7280; margin: 0 }

.rp-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px
}

.rp-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px
}

.rp-kpi__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px
}

.rp-kpi__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px;
  line-height: 1
}

.rp-kpi__trend { font-size: 12px; font-weight: 600; margin-top: 5px; display: inline-flex; align-items: center; gap: 3px }
.rp-kpi__trend--up { color: #16a34a }
.rp-kpi__trend--down { color: #dc2626 }
.rp-kpi__trend--flat { color: #6b7280 }

.rp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px
}

.rp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 10px
}

.rp-card__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }

.rp-two-col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 16px
}

/* CSS bar chart */
.rp-bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 200px;
  padding-top: 10px
}

.rp-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 8px
}

.rp-bars__bar-wrap {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1
}

.rp-bars__bar {
  width: 60%;
  max-width: 42px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: opacity .15s ease;
  min-height: 4px
}

.rp-bars__bar:hover { opacity: .85 }
.rp-bars__bar--alt { background: linear-gradient(180deg, #34d399, #16a34a) }

.rp-bars__value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap
}

.rp-bars__label { font-size: 11px; color: #9ca3af; font-weight: 500 }

/* Funnel bars (horizontal) */
.rp-funnel { display: flex; flex-direction: column; gap: 12px }
.rp-funnel__row { display: grid; grid-template-columns: 120px 1fr 60px; gap: 12px; align-items: center }
.rp-funnel__label { font-size: 12.5px; font-weight: 600; color: var(--ink) }
.rp-funnel__track { height: 28px; background: #f3f4f6; border-radius: 6px; overflow: hidden }
.rp-funnel__fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; color: #fff; font-size: 12px; font-weight: 700; background: linear-gradient(90deg, #4f46e5, #6366f1) }
.rp-funnel__pct { font-size: 12px; font-weight: 700; color: #6b7280; text-align: right }

/* Donut */
.rp-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
.rp-donut {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative
}
.rp-donut::after {
  content: '';
  position: absolute;
  inset: 26px;
  background: #fff;
  border-radius: 50%
}
.rp-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1
}
.rp-donut__total { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1 }
.rp-donut__label { font-size: 10px; color: #9ca3af; margin-top: 2px }
.rp-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 130px }
.rp-legend__row { display: flex; align-items: center; gap: 8px; font-size: 12.5px }
.rp-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0 }
.rp-legend__name { color: #374151; flex: 1 }
.rp-legend__val { font-weight: 700; color: var(--ink) }

/* Report tables reuse qr-table; small helper for right-aligned cells */
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px }
.rp-table thead th { text-align: left; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line-2) }
.rp-table thead th.is-num, .rp-table td.is-num { text-align: right }
.rp-table tbody td { padding: 12px; border-bottom: 1px solid var(--line-2) }
.rp-table tbody tr:last-child td { border-bottom: 0 }
.rp-table tbody tr:hover { background: #f8fafc }
.rp-table__name { font-weight: 600; color: var(--ink) }
.rp-table__name-row { display: inline-flex; align-items: center; gap: 8px }
.rp-table__num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }
.rp-table__pos { color: #16a34a; font-weight: 600 }
.rp-table__neg { color: #dc2626; font-weight: 600 }

@media (max-width: 1100px) {
  .rp-layout { grid-template-columns: 1fr }
  .rp-library { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px }
  .rp-lib-group { display: none }
  .rp-lib-item { flex-shrink: 0; width: auto }
  .rp-lib-item__desc { display: none }
  .rp-two-col { grid-template-columns: 1fr }
  .rp-kpi-row { grid-template-columns: 1fr 1fr }
}

@media (max-width: 600px) {
  .rp-kpi-row { grid-template-columns: 1fr 1fr }
  .rp-funnel__row { grid-template-columns: 90px 1fr 44px }
  .rp-table { display: block; overflow-x: auto; white-space: nowrap }
}

/* ============================================================
   TEAM MANAGEMENT (Seller — reps, roles, approvals, assignment)
   ============================================================ */

.tm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 18px;
  overflow-x: auto
}

.tm-tab {
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.tm-tab:hover { color: var(--ink) }
.tm-tab.is-active { color: #4338ca }
.tm-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4f46e5;
  border-radius: 2px
}

.tm-tab__badge {
  font-size: 10.5px;
  font-weight: 700;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 10px;
  padding: 1px 7px
}

.tm-panel { display: none }
.tm-panel.is-active { display: block }

/* Role badges */
.tm-role {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: 5px;
  text-transform: uppercase
}

.tm-role--owner { background: #f3e8ff; color: #6b21a8 }
.tm-role--manager { background: #dbeafe; color: #1e40af }
.tm-role--rep { background: #dcfce7; color: #166534 }
.tm-role--readonly { background: #f3f4f6; color: #4b5563 }

/* Performance mini cell */
.tm-perf { font-size: 12px; color: #6b7280; line-height: 1.5 }
.tm-perf strong { color: var(--ink); font-weight: 700 }

.tm-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600
}
.tm-status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.tm-status-dot--active { color: #16a34a }
.tm-status-dot--pending { color: #d97706 }
.tm-status-dot--suspended { color: #9ca3af }

/* Approval cards */
.tm-approval {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid #f59e0b;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px
}

.tm-approval__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.tm-approval__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.tm-approval__who { flex: 1; min-width: 0 }
.tm-approval__rep { font-size: 13px; font-weight: 700; color: var(--ink) }
.tm-approval__sub { font-size: 11.5px; color: #6b7280; margin-top: 1px }
.tm-approval__flag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  background: #fef3c7;
  color: #92400e;
  white-space: nowrap
}

.tm-approval__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 9px;
  margin-bottom: 12px
}

.tm-approval__metric-label { font-size: 10.5px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em }
.tm-approval__metric-value { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px }
.tm-approval__metric-value--margin { color: #16a34a }

.tm-approval__actions { display: flex; gap: 10px }

.tm-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit
}
.tm-btn--approve { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff }
.tm-btn--approve:hover { opacity: .92 }
.tm-btn--reject { background: #fff; border: 1px solid var(--line); color: #b91c1c }
.tm-btn--reject:hover { background: #fef2f2; border-color: #fecaca }
.tm-btn--ghost { background: #fff; border: 1px solid var(--line); color: #374151 }
.tm-btn--ghost:hover { background: #f9fafb }

/* Permissions matrix */
.tm-matrix-wrap { overflow-x: auto }
.tm-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 620px
}
.tm-matrix thead th {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  padding: 12px 10px;
  border-bottom: 2px solid var(--line-2)
}
.tm-matrix thead th:first-child { text-align: left; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em }
.tm-matrix tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); text-align: center }
.tm-matrix tbody td:first-child { text-align: left; font-weight: 500; color: #374151 }
.tm-matrix tbody tr:last-child td { border-bottom: 0 }
.tm-matrix tbody tr:hover { background: #f8fafc }
.tm-check { color: #16a34a; font-weight: 700 }
.tm-cross { color: #d1d5db }
.tm-limit { font-size: 11px; color: #6b7280; font-weight: 600 }

/* Assignment rules */
.tm-assign-modes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px }
.tm-assign-mode {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: border-color .15s ease, background .15s ease
}
.tm-assign-mode:hover { border-color: #c7d2fe }
.tm-assign-mode.is-active { border-color: #4f46e5; background: linear-gradient(135deg, #f5f3ff, #eef2ff) }
.tm-assign-mode.is-active::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4f46e5 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat
}
.tm-assign-mode__icon { width: 34px; height: 34px; border-radius: 9px; background: #eef2ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; margin-bottom: 10px }
.tm-assign-mode__icon svg { width: 18px; height: 18px }
.tm-assign-mode__name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px }
.tm-assign-mode__desc { font-size: 11.5px; color: #6b7280; line-height: 1.5 }

.tm-territory {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2)
}
.tm-territory:last-child { border-bottom: 0 }
.tm-territory__region { font-size: 13px; font-weight: 600; color: var(--ink) }
.tm-territory select { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; width: 100% }
.tm-territory__cap { font-size: 12px; color: #6b7280; white-space: nowrap }

@media (max-width: 900px) {
  .tm-assign-modes { grid-template-columns: 1fr }
  .tm-approval__grid { grid-template-columns: 1fr 1fr }
  .tm-territory { grid-template-columns: 1fr; gap: 6px }
}

/* ============================================================
   PRODUCT CATALOG (Seller inventory list)
   ============================================================ */

.pc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px
}

.pc-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease
}

.pc-kpi:hover { border-color: #c7d2fe }
.pc-kpi.is-active {
  border-color: #4f46e5;
  background: linear-gradient(180deg, #fafbff, #fff);
  box-shadow: 0 2px 8px rgba(79, 70, 229, .08)
}

.pc-kpi__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px
}

.pc-kpi__value {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.4px
}

.pc-kpi__sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px
}

.pc-kpi--warn .pc-kpi__value { color: #d97706 }
.pc-kpi--draft .pc-kpi__value { color: #6b7280 }

/* Toolbar above table/grid */
.pc-toolbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.pc-toolbar__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

.pc-toolbar__count strong { font-weight: 700 }

.pc-toolbar__grow { flex: 1 }

.pc-toolbar__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  width: 260px
}

.pc-toolbar__search svg { color: #9ca3af; flex-shrink: 0 }

.pc-toolbar__search input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font-size: 13px;
  font-family: inherit
}

.pc-toolbar__sort {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  color: #374151;
  cursor: pointer
}

.pc-toolbar__view {
  display: flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  gap: 2px
}

.pc-toolbar__view button {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600
}

.pc-toolbar__view button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06)
}

.pc-toolbar__view button svg { width: 14px; height: 14px }

.pc-toolbar__btn {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.pc-toolbar__btn--primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff
}

.pc-toolbar__btn--primary:hover { opacity: .92 }

.pc-toolbar__btn--ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: #374151
}

.pc-toolbar__btn--ghost:hover { background: #f9fafb }

/* Bulk action bar (appears when rows selected) */
.pc-bulk-bar {
  background: #1e293b;
  color: #fff;
  padding: 10px 18px;
  display: none;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .15)
}

.pc-bulk-bar.is-visible { display: flex }

.pc-bulk-bar__count {
  font-weight: 700;
  background: rgba(255, 255, 255, .12);
  padding: 4px 10px;
  border-radius: 12px
}

.pc-bulk-bar__btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit
}

.pc-bulk-bar__btn:hover { background: rgba(255, 255, 255, .1) }
.pc-bulk-bar__btn--danger { border-color: #fca5a5; color: #fca5a5 }
.pc-bulk-bar__btn--danger:hover { background: rgba(252, 165, 165, .1) }

.pc-bulk-bar__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit
}

/* Catalog table */
.pc-table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  overflow: hidden
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

.pc-table thead {
  background: #fafbfc
}

.pc-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2)
}

.pc-table thead th input[type="checkbox"] { margin: 0 }

.pc-table tbody tr {
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .12s ease
}

.pc-table tbody tr:hover { background: #f8fafc }
.pc-table tbody tr:last-child { border-bottom: 0 }
.pc-table tbody tr.is-selected { background: #eef2ff }

.pc-table td {
  padding: 12px 16px;
  vertical-align: middle
}

.pc-table__check { width: 32px }

.pc-table__product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0
}

.pc-table__thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .5);
  flex-shrink: 0
}

.pc-table__thumb svg { width: 20px; height: 20px }

.pc-table__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 2px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pc-table__name-row {
  display: flex;
  align-items: center;
  gap: 6px
}

.pc-table__sku {
  font-size: 11px;
  color: #9ca3af;
  font-family: 'SF Mono', Menlo, monospace
}

.pc-table__price {
  font-weight: 700;
  color: var(--ink)
}

.pc-table__price-range {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.pc-table__moq {
  color: #374151;
  font-weight: 500
}

.pc-table__stock {
  font-weight: 600
}

.pc-table__stock--low { color: #d97706 }
.pc-table__stock--out { color: #dc2626 }
.pc-table__stock--mto { color: #6b7280; font-weight: 500; font-style: italic }

.pc-table__sold {
  font-weight: 600;
  color: var(--ink)
}

.pc-table__sold-period {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px
}

.pc-table__status-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase
}

.pc-table__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end
}

.pc-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: color .15s ease, border-color .15s ease, background .15s ease
}

.pc-icon-btn:hover { color: #4f46e5; border-color: #c7d2fe; background: #fafbff }
.pc-icon-btn svg { width: 14px; height: 14px }
.pc-icon-btn--danger:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2 }

/* Grid view */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px
}

.pc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .12s ease;
  position: relative
}

.pc-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px)
}

.pc-card.is-selected {
  outline: 2px solid #4f46e5;
  outline-offset: -2px
}

.pc-card__check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  background: rgba(255, 255, 255, .9);
  border-radius: 4px;
  padding: 2px
}

.pc-card__media {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .35);
  position: relative
}

.pc-card__media svg { width: 48px; height: 48px }

.pc-card__status-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase
}

.pc-card__body { padding: 12px 14px 14px }

.pc-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.pc-card__sku {
  font-size: 10.5px;
  color: #9ca3af;
  font-family: 'SF Mono', Menlo, monospace;
  margin-bottom: 8px
}

.pc-card__price {
  font-size: 15px;
  font-weight: 800;
  color: #4f46e5;
  letter-spacing: -.2px
}

.pc-card__price-unit {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-left: 2px
}

.pc-card__stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 11px;
  color: #6b7280
}

.pc-card__stat strong { color: var(--ink); font-weight: 700 }

.pc-card__variant-count {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: .03em
}

/* Catalog mobile */
@media (max-width: 1100px) {
  .pc-kpi-strip { grid-template-columns: repeat(3, 1fr) }
  .pc-toolbar__search { width: 180px }
}

@media (max-width: 768px) {
  .pc-kpi-strip { grid-template-columns: repeat(2, 1fr) }
  .pc-toolbar { padding: 12px 14px }
  .pc-toolbar__search { width: 100%; order: 100 }
  .pc-table { display: block; width: 100% }
  .pc-table thead { display: none }
  .pc-table tbody { display: block; width: 100% }
  .pc-table tbody tr {
    display: block;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    margin: 0 12px 10px;
    width: auto;
    box-sizing: border-box
  }
  .pc-table td {
    display: block;
    padding: 4px 0;
    border-bottom: 0;
    width: 100%;
    box-sizing: border-box
  }
  .pc-table td.pc-table__check { display: none }
  .pc-table td:before {
    content: attr(data-label) ': ';
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 4px
  }
  .pc-table td.pc-table__cell--product:before { display: none }
  .pc-table__actions { justify-content: flex-start; margin-top: 8px }
}

@media (max-width: 480px) {
  .pc-kpi-strip { grid-template-columns: 1fr }
}

/* ============================================================
   PRODUCT EDITOR (Seller — add/edit product)
   ============================================================ */

.pe-layout {
  display: grid;
  grid-template-columns: 200px 1fr 320px;
  gap: 20px;
  align-items: start
}

/* Left: section nav rail */
.pe-nav {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.pe-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background .15s ease, color .15s ease
}

.pe-nav__item:hover { background: #f3f4f6; color: var(--ink) }

.pe-nav__item.is-active {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600
}

.pe-nav__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent
}

.pe-nav__item.is-complete .pe-nav__dot {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff
}

.pe-nav__item.is-active .pe-nav__dot {
  border-color: #4f46e5
}

/* Center: section cards */
.pe-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0
}

.pe-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  scroll-margin-top: 80px
}

.pe-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px
}

.pe-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
  flex-shrink: 0
}

.pe-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center
}

.pe-section__sub {
  font-size: 12.5px;
  color: #6b7280;
  margin: 4px 0 0 34px
}

.pe-field { margin-bottom: 16px }
.pe-field:last-child { margin-bottom: 0 }

.pe-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px
}

.pe-field label .pe-optional {
  color: #9ca3af;
  font-weight: 400;
  font-size: 12px
}

.pe-field input[type="text"],
.pe-field input[type="number"],
.pe-field select,
.pe-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease
}

.pe-field textarea { min-height: 90px; resize: vertical; line-height: 1.5 }

.pe-field input:focus,
.pe-field select:focus,
.pe-field textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12)
}

.pe-field__hint {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 5px
}

.pe-field__count {
  float: right;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 400
}

.pe-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.pe-row--3 { grid-template-columns: 1fr 1fr 1fr }

.pe-input-prefix {
  position: relative
}

.pe-input-prefix__sign {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 13px;
  pointer-events: none
}

.pe-input-prefix input { padding-left: 26px !important }

/* Tag input */
.pe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  align-items: center
}

.pe-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px
}

.pe-tag button {
  border: 0;
  background: transparent;
  color: #4338ca;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  font-family: inherit
}

.pe-tags input {
  border: 0 !important;
  outline: 0;
  flex: 1;
  min-width: 80px;
  font-size: 13px;
  padding: 4px !important;
  box-shadow: none !important
}

/* Photo upload grid */
.pe-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px
}

.pe-photo {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .4);
  position: relative;
  cursor: grab
}

.pe-photo svg { width: 28px; height: 28px }

.pe-photo__main-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #1e293b;
  color: #fff;
  text-transform: uppercase
}

.pe-photo__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit
}

.pe-photo-add {
  aspect-ratio: 1;
  border: 2px dashed var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
  background: #fafbfc;
  transition: border-color .15s ease, background .15s ease
}

.pe-photo-add:hover { border-color: #c7d2fe; background: #f5f3ff; color: #4f46e5 }
.pe-photo-add svg { width: 22px; height: 22px }

/* Toggle switch */
.pe-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0
}

.pe-toggle-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink)
}

.pe-toggle-row__desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px
}

.pe-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer
}

.pe-switch input { opacity: 0; width: 0; height: 0; position: absolute }

.pe-switch__track {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 12px;
  transition: background .2s ease
}

.pe-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

.pe-switch input:checked + .pe-switch__track { background: #4f46e5 }
.pe-switch input:checked + .pe-switch__track::after { transform: translateX(18px) }

/* Bulk Channel Update modal (shared by Editor + Catalog) */
.bcu-modal__card { max-width: 560px }
.bcu-section { margin-bottom: 20px }
.bcu-section:last-child { margin-bottom: 0 }
.bcu-section__label {
  font-size: 11px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 10px;
  display: flex; justify-content: space-between; align-items: center
}
.bcu-section__shortcut {
  font-size: 11px; font-weight: 600; color: #4338ca;
  background: none; border: 0; cursor: pointer; padding: 0;
  text-transform: none; letter-spacing: 0
}
.bcu-section__shortcut + .bcu-section__shortcut { margin-left: 10px }
.bcu-section__shortcut:hover { text-decoration: underline }

.bcu-chans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.bcu-chan {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-size: 13px; font-weight: 500; color: var(--ink)
}
.bcu-chan:hover { border-color: #c7d2fe }
.bcu-chan.is-active { border-color: #4f46e5; background: #f5f3ff }
.bcu-chan input { accent-color: #4f46e5; margin: 0 }
.bcu-chan .brand-icon { flex-shrink: 0 }
.bcu-chan__meta { margin-left: auto; font-size: 11px; color: #6b7280 }
.bcu-chan.is-active .bcu-chan__meta { color: #4338ca }

.bcu-actions { display: grid; gap: 8px }
.bcu-action {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease
}
.bcu-action:hover { border-color: #c7d2fe }
.bcu-action.is-active { border-color: #4f46e5; background: #f5f3ff }
.bcu-action input { accent-color: #4f46e5; margin-top: 2px; flex-shrink: 0 }
.bcu-action__main { flex: 1; min-width: 0 }
.bcu-action__name { font-size: 13.5px; font-weight: 600; color: var(--ink) }
.bcu-action__desc { font-size: 12px; color: #6b7280; margin-top: 2px }
.bcu-action.is-danger.is-active { border-color: #fca5a5; background: #fef2f2 }

.bcu-price-modes {
  margin-top: 10px;
  display: none;
  border: 1px dashed var(--line); border-radius: 10px; padding: 12px;
  background: #fafafa
}
.bcu-price-modes.is-visible { display: block }
.bcu-price-mode {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; font-size: 13px; color: var(--ink)
}
.bcu-price-mode:hover { background: #fff }
.bcu-price-mode input { accent-color: #4f46e5 }
.bcu-price-mode__input {
  margin-left: auto;
  width: 90px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: inherit
}
.bcu-price-mode__sym { color: #6b7280; font-size: 12px }

.bcu-preview {
  background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 12px 14px;
  font-size: 13px; color: #312e81; line-height: 1.45;
  margin-bottom: 16px
}
.bcu-preview strong { color: #1e1b4b; font-weight: 700 }
.bcu-preview.is-warn { background: #fef9c3; border-color: #fde68a; color: #713f12 }
.bcu-preview.is-warn strong { color: #422006 }

.bcu-apply {
  background: #4f46e5; color: #fff; border: 0;
  padding: 9px 18px; font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  font-family: inherit
}
.bcu-apply:hover { background: #4338ca }
.bcu-apply:disabled { background: #c7d2fe; cursor: not-allowed }
.bcu-apply.is-danger { background: #dc2626 }
.bcu-apply.is-danger:hover { background: #b91c1c }

.bcu-trigger {
  font-size: 12px; font-weight: 600;
  padding: 7px 12px; border: 1px solid #c7d2fe;
  background: #eef2ff; color: #4338ca;
  border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit
}
.bcu-trigger:hover { background: #e0e7ff }
.bcu-trigger svg { width: 14px; height: 14px }

.pe-section__head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px
}

@media (max-width: 600px) {
  .bcu-chans { grid-template-columns: 1fr }
  .bcu-price-mode { flex-wrap: wrap }
  .bcu-price-mode__input { margin-left: 24px }
}

/* Product Catalog — Channel quick modal & bulk dropdown */
.pc-chan-modal__list { display: grid; gap: 8px; margin-bottom: 8px }
.pc-chan-modal__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff
}
.pc-chan-modal__row.is-off { background: #fafafa; opacity: .7 }
.pc-chan-modal__row.is-err { border-color: #fecaca; background: #fef2f2 }
.pc-chan-modal__row .brand-icon { flex-shrink: 0 }
.pc-chan-modal__main { flex: 1; min-width: 0 }
.pc-chan-modal__name { font-size: 14px; font-weight: 600; color: var(--ink) }
.pc-chan-modal__meta { font-size: 11.5px; color: #6b7280; margin-top: 2px }
.pc-chan-modal__meta.is-ok { color: #16a34a }
.pc-chan-modal__meta.is-err { color: #dc2626 }
.pc-chan-modal__editlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #4338ca;
  text-decoration: none; padding: 6px 10px;
  border: 1px solid #c7d2fe; border-radius: 6px; background: #eef2ff
}
.pc-chan-modal__editlink:hover { background: #e0e7ff }

/* Bulk dropdown (List on channel) */
.pc-bulk-dd { position: relative }
.pc-bulk-dd__menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.15);
  padding: 6px; z-index: 50;
  display: none
}
.pc-bulk-dd.is-open .pc-bulk-dd__menu { display: block }
.pc-bulk-dd__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink);
  background: transparent; border: 0; width: 100%; text-align: left
}
.pc-bulk-dd__item:hover { background: #f3f4f6 }
.pc-bulk-dd__item .brand-icon { flex-shrink: 0 }

/* Product Editor — Channels & Listings */
.pe-chan-list { display: grid; gap: 10px }
.pe-chan-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease
}
.pe-chan-row.is-off { opacity: .55; background: #fafafa }
.pe-chan-row.is-err { border-color: #fecaca; background: #fef2f2 }
.pe-chan-row__main { min-width: 0 }
.pe-chan-row__title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px; color: var(--ink)
}
.pe-chan-row__status {
  font-size: 11px; font-weight: 500; color: #6b7280; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap
}
.pe-chan-row__status.is-ok { color: #16a34a }
.pe-chan-row__status.is-err { color: #dc2626 }
.pe-chan-row__status.is-info { color: #4338ca }
.pe-chan-row__status-sync { color: #9ca3af; font-weight: 500 }
.pe-chan-row__status-sync::before { content: '·'; margin-right: 6px; color: #9ca3af }
.pe-chan-price {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 8px;
  background: #fff;
  min-width: 0
}
.pe-chan-price__sym { font-size: 12px; color: #6b7280; flex-shrink: 0 }
.pe-chan-price input {
  border: 0; outline: 0; padding: 7px 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
  width: 100%; min-width: 0; background: transparent;
  font-variant-numeric: tabular-nums
}
.pe-chan-row.is-off .pe-chan-price { background: #f3f4f6 }
.pe-chan-row.is-off .pe-chan-price input { pointer-events: none }

/* Icon-only action buttons */
.pe-chan-actions {
  display: flex; align-items: center; gap: 4px;
  justify-content: flex-end
}
.pe-chan-actions button {
  font-size: 12px; font-weight: 600;
  padding: 0; border: 1px solid var(--line);
  background: #fff; border-radius: 6px; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center
}
.pe-chan-actions button svg { width: 14px; height: 14px }
.pe-chan-actions button:hover { background: #f3f4f6; border-color: #d1d5db }
.pe-chan-actions button.is-danger:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626 }
.pe-chan-row.is-off .pe-chan-actions button:not(.pe-chan-list-btn) { display: none }
.pe-chan-list-btn {
  color: #4338ca; border-color: #c7d2fe !important;
  background: #eef2ff !important;
  font-size: 12px !important; font-weight: 600 !important;
  padding: 0 10px !important; width: auto !important;
  gap: 4px
}
.pe-chan-list-btn:hover { background: #e0e7ff !important }
.pe-chan-row:not(.is-off) .pe-chan-list-btn { display: none }

.pe-chan-summary {
  display: flex; gap: 16px; padding: 12px 16px;
  background: #f8fafc; border: 1px solid var(--line-2);
  border-radius: 10px; margin-bottom: 16px; font-size: 13px; color: #4b5563;
  flex-wrap: wrap
}
.pe-chan-summary strong { color: var(--ink); font-weight: 700 }

.pe-chan-advanced {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff
}
.pe-chan-advanced__head {
  width: 100%; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 13px; color: var(--ink);
  background: transparent; border: 0; cursor: pointer;
  text-align: left
}
.pe-chan-advanced__head svg {
  width: 18px; height: 18px;
  transition: transform .2s ease
}
.pe-chan-advanced.is-open .pe-chan-advanced__head svg { transform: rotate(180deg) }
.pe-chan-advanced__body { padding: 0 16px 16px; display: none }
.pe-chan-advanced.is-open .pe-chan-advanced__body { display: block }
.pe-chan-advanced__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px
}
.pe-chan-advanced__grid .pe-field { margin: 0 }
.pe-chan-advanced__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0
}
.pe-chan-advanced__row .brand-icon { flex-shrink: 0 }
.pe-chan-advanced__row label { font-size: 12px; color: #6b7280; min-width: 110px; flex-shrink: 0; margin: 0 }
.pe-chan-advanced__row input {
  flex: 1; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: inherit; min-width: 0
}

@media (max-width: 800px) {
  .pe-chan-row {
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 8px
  }
  .pe-chan-row__main { grid-column: 1 / -1 }
  .pe-chan-price { grid-column: 1 }
  .pe-chan-actions { grid-column: 2; justify-content: flex-end }
  .pe-switch { grid-column: 2; justify-self: end }
  .pe-chan-advanced__grid { grid-template-columns: 1fr }
}

/* Section header with side button (e.g. "Bulk update") */
.pe-section__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.pe-section__head-row > div:first-child { flex: 1; min-width: 200px }
.pe-section__head-row .bcu-trigger { white-space: nowrap; flex-shrink: 0 }

/* ===== INVENTORY: Adjust modal + Activity drawer ===== */
/* Adjust modal */
.inv-adjust-modal__card { max-width: 560px }
.inv-adjust-modal__product {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #f8fafc; border: 1px solid var(--line-2);
  border-radius: 10px; margin-bottom: 18px
}
.inv-adjust-modal__thumb {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff
}
.inv-adjust-modal__name { font-size: 14px; font-weight: 700; color: var(--ink) }
.inv-adjust-modal__sku { font-size: 11.5px; color: #6b7280; margin-top: 2px }

.inv-adjust-modal__wh-picker { margin-bottom: 16px }
.inv-adjust-modal__wh-picker label {
  font-size: 11px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px; display: block
}
.inv-adjust-modal__wh-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px
}
.inv-adjust-modal__wh-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-size: 12.5px
}
.inv-adjust-modal__wh-opt:hover { border-color: #c7d2fe }
.inv-adjust-modal__wh-opt.is-active { border-color: #4f46e5; background: #f5f3ff }
.inv-adjust-modal__wh-opt input { accent-color: #4f46e5 }
.inv-adjust-modal__wh-opt-code { font-weight: 700; color: var(--ink) }
.inv-adjust-modal__wh-opt-stock { margin-left: auto; font-weight: 600; color: #4338ca; font-variant-numeric: tabular-nums }

.inv-adjust-modal__seg {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  margin-bottom: 4px
}
.inv-adjust-modal__seg label {
  text-align: center;
  padding: 9px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: #374151;
  transition: border-color .15s ease, background .15s ease;
  display: flex; align-items: center; justify-content: center; gap: 6px
}
.inv-adjust-modal__seg label:hover { border-color: #c7d2fe }
.inv-adjust-modal__seg label.is-active { border-color: #4f46e5; background: #f5f3ff; color: #4338ca }
.inv-adjust-modal__seg label.is-active.is-remove { border-color: #fca5a5; background: #fef2f2; color: #dc2626 }
.inv-adjust-modal__seg input { display: none }

.inv-adjust-modal__preview {
  background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: #312e81; line-height: 1.4;
  margin-bottom: 16px
}
.inv-adjust-modal__preview.is-warn { background: #fef9c3; border-color: #fde68a; color: #713f12 }
.inv-adjust-modal__preview-icon { font-size: 18px }
.inv-adjust-modal__preview-numbers {
  font-weight: 700; color: #1e1b4b;
  font-variant-numeric: tabular-nums
}
.inv-adjust-modal__preview-arrow { color: #6b7280 }
.inv-adjust-modal__preview.is-warn .inv-adjust-modal__preview-numbers { color: #422006 }

/* Activity drawer */
.inv-activity-trigger {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease, border-color .15s ease
}
.inv-activity-trigger:hover { background: #f3f4f6 }
.inv-activity-trigger svg { width: 14px; height: 14px }
.inv-activity-trigger__dot {
  position: absolute; top: 4px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 2px #fff
}

.inv-activity-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #fff;
  box-shadow: -8px 0 32px rgba(15, 23, 42, .15);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 250;
  display: flex; flex-direction: column
}
.inv-activity-drawer.is-open { transform: translateX(0) }
.inv-activity-drawer__backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .25);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 249
}
.inv-activity-drawer__backdrop.is-open { opacity: 1; pointer-events: auto }

.inv-activity-drawer__head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-shrink: 0
}
.inv-activity-drawer__title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 }
.inv-activity-drawer__sub { font-size: 12px; color: #6b7280; margin: 3px 0 0 }
.inv-activity-drawer__close {
  width: 32px; height: 32px;
  background: #f3f4f6; border: 0; border-radius: 8px;
  cursor: pointer; color: #6b7280; font-size: 16px; font-family: inherit;
  flex-shrink: 0
}
.inv-activity-drawer__close:hover { background: #e5e7eb; color: var(--ink) }

.inv-activity-drawer__filters {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0
}
.inv-activity-drawer__filter-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap
}
.inv-activity-drawer__filter-label {
  font-size: 10px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  min-width: 60px
}
.inv-activity-chip {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer;
  color: #4b5563; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  transition: border-color .15s ease, background .15s ease, color .15s ease
}
.inv-activity-chip:hover { border-color: #c7d2fe }
.inv-activity-chip.is-active { border-color: #4f46e5; background: #4f46e5; color: #fff }
.inv-activity-chip .wh-pill__flag { width: 12px; height: 12px; font-size: 8px }

.inv-activity-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 12px 20px 24px
}
.inv-activity-drawer__empty {
  text-align: center; color: #6b7280; font-size: 13px;
  padding: 40px 20px
}

/* Movement item in drawer (reuses inv-movement layout, plus warehouse pill row) */
.inv-activity-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line-2)
}
.inv-activity-item:last-child { border-bottom: 0 }
.inv-activity-item__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.inv-activity-item__icon svg { width: 14px; height: 14px }
.inv-activity-item__icon--in { background: #dcfce7; color: #166534 }
.inv-activity-item__icon--out { background: #fee2e2; color: #b91c1c }
.inv-activity-item__icon--set { background: #fef3c7; color: #854d0e }
.inv-activity-item__icon--transfer { background: #eef2ff; color: #4338ca }
.inv-activity-item__main { flex: 1; min-width: 0 }
.inv-activity-item__title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  line-height: 1.3
}
.inv-activity-item__meta {
  font-size: 11.5px; color: #6b7280; margin-top: 2px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap
}
.inv-activity-item__meta .wh-pill { padding: 1px 6px; font-size: 10.5px }
.inv-activity-item__delta {
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  align-self: center; white-space: nowrap
}
.inv-activity-item__delta--in { color: #16a34a }
.inv-activity-item__delta--out { color: #dc2626 }
.inv-activity-item__delta--set { color: #b45309 }

@media (max-width: 700px) {
  .inv-adjust-modal__wh-options { grid-template-columns: 1fr }
  .inv-activity-drawer { width: 100vw }
}

/* ===== WAREHOUSES ===== */
/* Reusable warehouse pill (compact chip used in lists, tables, summaries) */
.wh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 4px;
  font-size: 11px; font-weight: 600; color: #1e293b;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}
.wh-pill__flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 10px;
  border-radius: 50%;
  flex-shrink: 0
}
.wh-pill__code { color: #475569 }
.wh-pill__count { color: #0f172a; font-weight: 700 }
.wh-pill--us .wh-pill__flag { background: #dbeafe; color: #1e40af }
.wh-pill--eu .wh-pill__flag { background: #fef3c7; color: #92400e }
.wh-pill--asia .wh-pill__flag { background: #fce7f3; color: #9d174d }
.wh-pill[title] { cursor: help }
.wh-pill .wh-pill__code { letter-spacing: .02em }
.wh-pill.is-low { background: #fef2f2; border-color: #fecaca }
.wh-pill.is-low .wh-pill__count { color: #dc2626 }
.wh-pill.is-transit { background: #eef2ff; border-color: #c7d2fe }
.wh-pill.is-transit .wh-pill__count { color: #4338ca }

/* Larger warehouse "logo" for cards */
.wh-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  font-size: 22px;
  border-radius: 12px;
  flex-shrink: 0
}
.wh-logo--us { background: #dbeafe; color: #1e40af }
.wh-logo--eu { background: #fef3c7; color: #92400e }
.wh-logo--asia { background: #fce7f3; color: #9d174d }

/* Warehouse cards (Warehouses page) */
.wh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px
}
.wh-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 0
}
.wh-card:hover { border-color: #c7d2fe; box-shadow: 0 4px 16px rgba(15, 23, 42, .06) }
.wh-card__head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px
}
.wh-card__main { flex: 1; min-width: 0 }
.wh-card__name { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }
.wh-card__addr { font-size: 12px; color: #6b7280; margin: 3px 0 0 }
.wh-card__status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  margin-top: 6px
}
.wh-card__status--active { background: #dcfce7; color: #166534 }
.wh-card__status--paused { background: #fef9c3; color: #854d0e }
.wh-card__status--syncing { background: #dbeafe; color: #1e40af }
.wh-card__type {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #6b7280;
  margin-top: 4px
}
.wh-card__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px
}
.wh-card__stat-label { font-size: 11px; color: #6b7280; font-weight: 500 }
.wh-card__stat-value {
  font-size: 18px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-top: 2px
}
.wh-card__stat-value.is-warn { color: #b45309 }
.wh-card__stat-value.is-danger { color: #dc2626 }
.wh-card__foot {
  display: flex; gap: 8px; margin-top: auto
}
.wh-card__btn {
  flex: 1;
  font-size: 13px; font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px; color: var(--ink);
  cursor: pointer; font-family: inherit;
  transition: background .15s ease, border-color .15s ease
}
.wh-card__btn:hover { background: #f3f4f6; border-color: #d1d5db }
.wh-card__btn--primary {
  background: #4f46e5; color: #fff; border-color: #4f46e5
}
.wh-card__btn--primary:hover { background: #4338ca; border-color: #4338ca }

/* "Add warehouse" tile (dashed) */
.wh-add {
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  color: #4f46e5; font-weight: 600;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px;
  min-height: 200px;
  transition: background .15s ease, border-color .15s ease
}
.wh-add:hover { background: #eef2ff; border-color: #4f46e5 }
.wh-add svg { width: 28px; height: 28px }

/* Inventory: warehouse breakdown */
.inv-wh-cell {
  display: flex; flex-wrap: wrap; gap: 4px;
  align-items: center
}
.inv-wh-cell__total {
  font-size: 11px; color: #6b7280; margin-left: 4px
}
.inv-by-wh-row {
  background: #f8fafc !important;
  font-size: 13px
}
.inv-by-wh-row td { padding: 8px 12px !important }
.inv-by-wh-row .inv-wh-row-label {
  padding-left: 36px;
  display: flex; align-items: center; gap: 8px;
  color: #475569
}

/* Inventory view toggle */
.inv-view-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f1f5f9; padding: 3px; border-radius: 8px
}
.inv-view-toggle button {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; color: #475569;
  font-family: inherit;
  transition: background .15s ease, color .15s ease
}
.inv-view-toggle button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.05) }
.inv-wh-filter {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #475569;
  margin-left: 12px
}
.inv-wh-filter select {
  padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 7px; font-family: inherit; font-size: 13px;
  background: #fff; min-width: 180px; cursor: pointer
}

/* Transfer modal: from→to picker */
.wh-transfer-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: end;
  margin-bottom: 16px
}
.wh-transfer-row__arrow {
  font-size: 20px; color: #6b7280; padding: 0 4px;
  margin-bottom: 9px
}
.wh-transfer-row label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); margin-bottom: 6px
}
.wh-transfer-row select {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13px; background: #fff
}
.wh-transfer__stock-info {
  background: #f8fafc; border: 1px solid var(--line-2);
  border-radius: 8px; padding: 10px 12px;
  font-size: 12px; color: #475569;
  margin-bottom: 14px;
  display: flex; gap: 14px; flex-wrap: wrap
}
.wh-transfer__stock-info strong { color: var(--ink); font-weight: 700 }

/* Ships-from picker (Editor channel rows) */
.pe-ships-from {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #6b7280;
  margin-top: 4px
}
.pe-ships-from select {
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff;
  color: var(--ink); font-family: inherit;
  cursor: pointer
}

/* Fulfilled-from picker (Sales Order Detail) */
.order-fulfill {
  background: #f8fafc;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px
}
.order-fulfill__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #6b7280;
  margin-bottom: 8px
}
.order-fulfill__row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap
}
.order-fulfill__current {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink)
}
.order-fulfill__suggestion {
  font-size: 11px; color: #4338ca;
  background: #eef2ff;
  padding: 4px 8px; border-radius: 999px;
  font-weight: 600
}
.order-fulfill select {
  padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 7px; font-family: inherit; font-size: 13px;
  background: #fff; min-width: 200px; cursor: pointer
}
.order-fulfill__stock-line {
  font-size: 11.5px; color: #6b7280;
  margin-top: 8px;
  display: flex; gap: 12px; flex-wrap: wrap
}

@media (max-width: 700px) {
  .wh-card__stats { grid-template-columns: 1fr 1fr }
  .wh-transfer-row { grid-template-columns: 1fr; gap: 8px }
  .wh-transfer-row__arrow { display: none }
}

/* Variant axis builder */
.pe-variant-axis {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fafbfc
}

.pe-variant-axis__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}

.pe-variant-axis__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.pe-variant-axis__name input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 600;
  width: 120px;
  font-family: inherit
}

.pe-variant-axis__remove {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #9ca3af;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit
}

.pe-variant-axis__remove:hover { color: #dc2626 }

.pe-variant-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.pe-variant-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px
}

.pe-variant-value button {
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  font-family: inherit
}

.pe-variant-value button:hover { color: #dc2626 }

.pe-variant-value-add {
  border: 1px dashed var(--line);
  background: transparent;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit
}

.pe-variant-value-add:hover { background: #f5f3ff; border-color: #c7d2fe }

.pe-add-axis {
  border: 1px dashed var(--line);
  background: transparent;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 16px
}

.pe-add-axis:hover { background: #f5f3ff; border-color: #c7d2fe }

/* Variant matrix table */
.pe-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px
}

.pe-matrix thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2)
}

.pe-matrix tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle
}

.pe-matrix tbody tr:last-child td { border-bottom: 0 }

.pe-matrix__variant {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap
}

.pe-matrix__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, .1)
}

.pe-matrix input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit
}

.pe-matrix input:focus { outline: none; border-color: #4f46e5 }

.pe-matrix__sku { width: 110px }
.pe-matrix__price { width: 90px }
.pe-matrix__stock { width: 90px }

/* Pricing tiers */
.pe-tier {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px
}

.pe-tier__head {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em
}

.pe-tier input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  width: 100%
}

.pe-tier input:focus { outline: none; border-color: #4f46e5 }

.pe-tier__savings {
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  text-align: center
}

.pe-tier__remove {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  color: #9ca3af;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit
}

.pe-tier__remove:hover { color: #dc2626; border-color: #fecaca }

.pe-add-tier {
  border: 1px dashed var(--line);
  background: transparent;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px
}

.pe-add-tier:hover { background: #f5f3ff; border-color: #c7d2fe }

/* Specification rows (key-value builder) */
.pe-spec-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px
}

.pe-spec-row__head {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em
}

.pe-spec-row input {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  width: 100%
}

.pe-spec-row input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12) }

.pe-spec-row input[data-pe-spec-label] { font-weight: 600; color: var(--ink) }

.pe-spec-row__remove {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  color: #9ca3af;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  flex-shrink: 0
}

.pe-spec-row__remove:hover { color: #dc2626; border-color: #fecaca }

.pe-add-spec {
  border: 1px dashed var(--line);
  background: transparent;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px
}

.pe-add-spec:hover { background: #f5f3ff; border-color: #c7d2fe }

.pe-spec-note {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #0c4a6e;
  line-height: 1.5;
  margin-top: 14px
}

.pe-spec-note strong { font-weight: 700 }

@media (max-width: 600px) {
  .pe-spec-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto }
  .pe-spec-row input[data-pe-spec-value] { grid-column: 1 / -1 }
}

/* Cert checkboxes */
.pe-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.pe-cert {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
  transition: border-color .15s ease, background .15s ease
}

.pe-cert:hover { border-color: #c7d2fe }

.pe-cert input { accent-color: #4f46e5 }

.pe-cert.is-checked {
  border-color: #4f46e5;
  background: #f5f3ff;
  font-weight: 600;
  color: #4338ca
}

/* Right: live preview rail */
.pe-preview {
  position: sticky;
  top: 88px
}

.pe-preview__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px
}

.pe-preview__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 16px 0
}

.pe-preview__media {
  aspect-ratio: 16/11;
  margin: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .35)
}

.pe-preview__media svg { width: 40px; height: 40px }

.pe-preview__body { padding: 0 16px 16px }

.pe-preview__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px
}

.pe-preview__brand {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px
}

.pe-preview__price {
  font-size: 18px;
  font-weight: 800;
  color: #4f46e5
}

.pe-preview__price small { font-size: 12px; color: #6b7280; font-weight: 500 }

.pe-preview__moq {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px
}

.pe-preview__tip {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: #0c4a6e;
  line-height: 1.5
}

.pe-preview__tip strong { font-weight: 700 }

/* Sticky action bar */
.pe-actionbar {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  margin: 16px -4px 0;
  padding: 14px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10
}

.pe-actionbar__status {
  font-size: 12px;
  color: #6b7280
}

.pe-actionbar__grow { flex: 1 }

.pe-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  border: 0
}

.pe-btn--ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: #374151
}

.pe-btn--ghost:hover { background: #f9fafb }

.pe-btn--primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff
}

.pe-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79, 70, 229, .25) }

/* Editor mobile */
@media (max-width: 1200px) {
  .pe-layout { grid-template-columns: 1fr 300px }
  .pe-nav {
    grid-column: 1 / -1;
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px
  }
  .pe-nav__item { white-space: nowrap; flex-shrink: 0 }
}

@media (max-width: 920px) {
  .pe-layout { grid-template-columns: 1fr }
  .pe-preview { position: static; grid-column: 1 / -1 }
}

@media (max-width: 600px) {
  .pe-row, .pe-row--3 { grid-template-columns: 1fr }
  .pe-tier { grid-template-columns: 1fr 1fr; gap: 8px }
  .pe-tier__savings { grid-column: 1 / -1; text-align: left }
  .pe-tier__remove { grid-column: 1 / -1; width: 100% }
  .pe-cert-grid { grid-template-columns: 1fr }
  .pe-matrix { display: block; overflow-x: auto; white-space: nowrap }
  .pe-actionbar { flex-wrap: wrap }
  .pe-actionbar__status { width: 100%; order: -1; margin-bottom: 4px }
}
/* ============================================================
   ORDER MANAGEMENT (Seller — multichannel orders hub)
   ============================================================ */

/* Topbar buttons */
.om-topbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: #374151;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit
}
.om-topbtn:hover { background: #f9fafb }
.om-topbtn svg { width: 14px; height: 14px }

.om-daterange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap
}
.om-daterange svg { width: 14px; height: 14px; color: #6b7280 }

/* Create Order dropdown */
.om-create { position: relative }
.om-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border: 0;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap
}
.om-create-btn:hover { opacity: .92 }
.om-create-btn svg { width: 13px; height: 13px }

.om-create-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
  padding: 6px;
  min-width: 220px;
  z-index: 60;
  display: none
}
.om-create-menu.is-open { display: block }
.om-create-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit
}
.om-create-menu button:hover { background: #f3f4f6 }
.om-create-menu button small { display: block; font-size: 11px; color: #6b7280; font-weight: 400; margin-top: 1px }

/* Channel badges */
.om-ch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap
}
.om-ch::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0 }
.om-ch--globetrader { background: #eef2ff; color: #4338ca }
.om-ch--amazon { background: #fff4e5; color: #b45309 }
.om-ch--shopify { background: #ecfdf3; color: #15803d }
.om-ch--ebay { background: #fef2f2; color: #dc2626 }
.om-ch--walmart { background: #e0f2fe; color: #0369a1 }
.om-ch--direct { background: #f3f4f6; color: #4b5563 }

/* Order Management table */
.om-table-wrap { overflow-x: auto }
.om-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 980px
}
.om-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  background: #fafbfc
}
.om-table thead th.is-num, .om-table td.is-num { text-align: right }
.om-table tbody tr { border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .12s ease }
.om-table tbody tr:hover { background: #f8fafc }
.om-table tbody tr:last-child td { border-bottom: 0 }
.om-table tbody tr.is-selected { background: #eef2ff }
.om-table td { padding: 12px; vertical-align: middle; white-space: nowrap }
.om-table__check { width: 34px }
.om-table__order-id { font-weight: 700; color: var(--ink) }
.om-table__order-sub { font-size: 11px; color: #6b7280; margin-top: 1px; white-space: normal; max-width: 200px }
.om-table__cust { font-weight: 600; color: var(--ink) }
.om-table__cust-sub { font-size: 11px; color: #9ca3af; margin-top: 1px }
.om-table__total { font-weight: 700; color: var(--ink) }
.om-table__out { font-weight: 700; color: #dc2626 }
.om-table__out--zero { color: #16a34a; font-weight: 600 }
.om-table__terms { font-size: 12px; color: #6b7280; font-weight: 600 }
.om-table__rep { display: inline-flex; align-items: center; gap: 6px }
.om-table__rep-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.om-table__rep-none { color: #cbd5e1; font-size: 12px }
.om-table__more {
  width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit
}
.om-table__more:hover { background: #f5f3ff; color: #4f46e5; border-color: #c7d2fe }
.om-table__more svg { width: 15px; height: 15px }

/* Toolbar dropdowns (sort / filter) */
.om-dd { position: relative; display: inline-block }
.om-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: #374151; cursor: pointer; font-family: inherit
}
.om-dd-btn:hover { background: #f9fafb }
.om-dd-btn svg { width: 14px; height: 14px; color: #6b7280 }
.om-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 6px; min-width: 230px; z-index: 60; display: none
}
.om-dd-menu.is-open { display: block }
.om-dd-menu__group { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; padding: 8px 10px 4px }
.om-dd-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--ink); cursor: pointer; font-family: inherit
}
.om-dd-item:hover { background: #f3f4f6 }
.om-dd-item .om-dd-check { margin-left: auto; color: #4f46e5; opacity: 0 }
.om-dd-item.is-active .om-dd-check { opacity: 1 }
.om-dd-item.is-active { color: #4338ca; font-weight: 600 }

/* Modal system */
.om-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45); padding: 20px
}
.om-modal.is-open { display: flex }
.om-modal__card {
  background: #fff; border-radius: 16px; width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(15,23,42,.3)
}
.om-modal--wide .om-modal__card { max-width: 860px }
.om-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--line-2)
}
.om-modal__title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 }
.om-modal__sub { font-size: 12.5px; color: #6b7280; margin: 2px 0 0 }
.om-modal__close { width: 32px; height: 32px; border: 0; background: #f3f4f6; border-radius: 8px; cursor: pointer; color: #6b7280; font-size: 16px; font-family: inherit; flex-shrink: 0 }
.om-modal__close:hover { background: #e5e7eb; color: var(--ink) }
.om-modal__body { padding: 22px 24px }
.om-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--line-2) }

.om-field { margin-bottom: 18px }
.om-field__label { font-size: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px }
.om-radio { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, background .15s ease }
.om-radio:hover { border-color: #c7d2fe }
.om-radio.is-active { border-color: #4f46e5; background: #f5f3ff }
.om-radio input { margin-top: 2px; accent-color: #4f46e5 }
.om-radio__name { font-size: 13px; font-weight: 600; color: var(--ink) }
.om-radio__desc { font-size: 11.5px; color: #6b7280; margin-top: 1px }

.om-seg { display: flex; gap: 8px }
.om-seg label { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer }
.om-seg label.is-active { border-color: #4f46e5; background: #f5f3ff; color: #4338ca }
.om-seg input { display: none }

.om-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.om-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer }
.om-check input { accent-color: #4f46e5 }

.om-form-field { margin-bottom: 14px }
.om-form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px }
.om-form-field select, .om-form-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--ink) }
.om-form-field select:focus, .om-form-field input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12) }

/* Bulk edit review table */
.om-review-table { width: 100%; border-collapse: collapse; font-size: 12.5px }
.om-review-table th { text-align: left; font-size: 10.5px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; padding: 8px; border-bottom: 1px solid var(--line-2) }
.om-review-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-2) }
.om-review-table tr:last-child td { border-bottom: 0 }

.om-summary-box { background: #f8fafc; border-radius: 10px; padding: 14px 16px; margin-top: 14px }
.om-summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px }
.om-summary-row:last-child { margin-bottom: 0; font-weight: 700; color: var(--ink) }
.om-summary-row span:first-child { color: #6b7280 }

/* Print labels */
.om-labels-grid { display: grid; grid-template-columns: 1fr 280px; gap: 20px }
.om-label-list { display: flex; flex-direction: column; gap: 12px }
.om-label {
  display: flex; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; align-items: center
}
.om-label__preview {
  width: 90px; height: 120px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px; flex-shrink: 0
}
.om-label__barcode { width: 70px; height: 30px; background: repeating-linear-gradient(90deg, #1e293b 0 2px, #fff 2px 4px) }
.om-label__addr { font-size: 8px; color: #475569; text-align: center; line-height: 1.3 }
.om-label__info { flex: 1; min-width: 0 }
.om-label__order { font-size: 14px; font-weight: 700; color: var(--ink) }
.om-label__meta { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.5 }
.om-print-settings { background: #f8fafc; border-radius: 12px; padding: 18px; align-self: start }
.om-print-settings h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 12px }

@media (max-width: 768px) {
  .om-table { display: block; min-width: 0 }
  .om-table thead { display: none }
  .om-table tbody, .om-table tbody tr { display: block; width: 100% }
  .om-table tbody tr { border: 1px solid var(--line-2); border-radius: 10px; margin: 0 12px 10px; padding: 12px; box-sizing: border-box }
  .om-table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; white-space: normal; text-align: right }
  .om-table td.om-table__check { display: none }
  .om-table td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; text-align: left }
  .om-table td.om-table__cell--order::before { display: none }
  .om-labels-grid { grid-template-columns: 1fr }
  .om-checks { grid-template-columns: 1fr }
}

@media (max-width: 600px) {
  .om-create, .om-daterange { display: none }
}

/* 5-KPI strip for Order Management (responsive override) */
.om-kpi5 { grid-template-columns: repeat(5, 1fr) }
@media (max-width: 1200px) { .om-kpi5 { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 768px) { .om-kpi5 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .om-kpi5 { grid-template-columns: 1fr } }

/* ============================================================
   CREATE ORDER (Seller — quotation / PO builder)
   Reuses seller-card, om-form-field, om-seg, qr-detail-layout.
   ============================================================ */

.co-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px
}
.co-type__opt {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color .15s ease, background .15s ease
}
.co-type__opt:hover { border-color: #c7d2fe }
.co-type__opt.is-active { border-color: #4f46e5; background: linear-gradient(135deg, #f5f3ff, #eef2ff) }
.co-type__icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff
}
.co-type__icon svg { width: 20px; height: 20px }
.co-type__name { font-size: 14px; font-weight: 700; color: var(--ink) }
.co-type__desc { font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.45 }

/* Buyer picker info card */
.co-buyer-info {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px
}
.co-buyer-info__avatar {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center
}
.co-buyer-info__name { font-size: 13px; font-weight: 700; color: var(--ink) }
.co-buyer-info__meta { font-size: 11.5px; color: #6b7280; margin-top: 1px }

/* Line items */
.co-line-head {
  display: grid;
  grid-template-columns: 1fr 80px 110px 100px 34px;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 2px 8px
}
.co-line {
  display: grid;
  grid-template-columns: 1fr 80px 110px 100px 34px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px
}
.co-line select, .co-line input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: var(--ink)
}
.co-line select:focus, .co-line input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12) }
.co-line__total { font-weight: 700; color: var(--ink); font-size: 13px; text-align: right; padding-right: 2px }
.co-line__remove {
  width: 34px; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  color: #9ca3af; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit
}
.co-line__remove:hover { color: #dc2626; border-color: #fecaca }
.co-line__tierhint { grid-column: 1 / -1; font-size: 11px; color: #16a34a; padding: 0 2px 4px; margin-top: -2px }
.co-add-line {
  width: 100%; border: 1px dashed var(--line); background: transparent; border-radius: 9px;
  padding: 10px; color: #4f46e5; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 4px
}
.co-add-line:hover { background: #f5f3ff; border-color: #c7d2fe }

.co-channel-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px;
  background: #f3f4f6; color: #4b5563
}
.co-channel-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }

/* Sticky summary aside */
.co-summary-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px
}
.co-summary-card__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px }
.co-summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 9px }
.co-summary-row span:first-child { color: #6b7280 }
.co-summary-row span:last-child { font-weight: 600; color: var(--ink) }
.co-summary-row.is-total {
  border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 4px; font-size: 15px
}
.co-summary-row.is-total span:last-child { font-size: 20px; font-weight: 800; color: #4338ca }
.co-summary-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 9px }

@media (max-width: 768px) {
  .co-type { grid-template-columns: 1fr }
  .co-line-head { display: none }
  .co-line {
    grid-template-columns: 1fr 1fr; gap: 8px;
    border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; margin-bottom: 10px
  }
  .co-line select { grid-column: 1 / -1 }
  .co-line__total { grid-column: 1 / -1; text-align: left }
  .co-line__remove { grid-column: 1 / -1; width: 100% }
}

/* ============================================================
   SELLER ACCORDION NAV (collapsible groups — shorter sidebar)
   ============================================================ */
.snav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px }

.snav-link, .snav-group__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: #cdd5ff; text-decoration: none; border: 0; background: transparent;
  font-family: inherit; cursor: pointer; text-align: left
}
.snav-link:hover, .snav-group__head:hover { background: rgba(255, 255, 255, .06); color: #fff }
.snav-link.active { background: var(--sidebar-active); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) }

.snav-ic { width: 16px; height: 16px; flex: 0 0 auto }
.snav-chev { width: 13px; height: 13px; margin-left: auto; transition: transform .2s ease; opacity: .65; flex: 0 0 auto }
.snav-group.is-open > .snav-group__head .snav-chev { transform: rotate(90deg) }

.snav-group__items {
  max-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  transition: max-height .25s ease
}
.snav-group.is-open > .snav-group__items { max-height: 260px; margin: 2px 0 4px }

.snav-sublink {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 38px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: #aab4ee; text-decoration: none; position: relative
}
.snav-sublink::before {
  content: ''; position: absolute; left: 21px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5
}
.snav-sublink:hover { background: rgba(255, 255, 255, .06); color: #fff }
.snav-sublink.active { background: var(--sidebar-active); color: #fff; font-weight: 600 }
.snav-sublink.is-locked { opacity: .5; cursor: default; justify-content: space-between }
.snav-sublink.is-locked:hover { background: transparent; color: inherit }
.snav-lock { flex: none; opacity: .8 }

.snav .badge {
  margin-left: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 4px; padding: 2px 6px; line-height: 1
}
.snav-group__head .badge { margin-right: 6px }

/* Sky-blue seller theme for accordion nav */
.sidebar[data-sidebar="seller"] .snav-link,
.sidebar[data-sidebar="seller"] .snav-group__head { color: #f0f9ff }
.sidebar[data-sidebar="seller"] .snav-sublink { color: #d8eefc }
.sidebar[data-sidebar="seller"] .snav-link:hover,
.sidebar[data-sidebar="seller"] .snav-group__head:hover,
.sidebar[data-sidebar="seller"] .snav-sublink:hover { background: rgba(255, 255, 255, .15); color: #fff }
.sidebar[data-sidebar="seller"] .snav-link.active,
.sidebar[data-sidebar="seller"] .snav-sublink.active { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) }

/* ============================================================
   CHANNELS / INTEGRATIONS (Seller — multichannel sync)
   Reuses qr-summary + om-modal.
   ============================================================ */
.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 24px
}
.ch-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: box-shadow .15s ease
}
.ch-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .07) }
.ch-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px }
.ch-logo {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em
}
.ch-logo--globetrader { background: linear-gradient(135deg, #4f46e5, #7c3aed) }
.ch-logo--amazon { background: linear-gradient(135deg, #ff9900, #e88a00); color: #232f3e }
.ch-logo--shopify { background: linear-gradient(135deg, #95bf47, #5e8e3e) }
.ch-logo--ebay { background: linear-gradient(135deg, #e53238, #c0282d) }
.ch-logo--walmart { background: linear-gradient(135deg, #0071ce, #004f9a) }
.ch-logo--direct { background: linear-gradient(135deg, #9ca3af, #6b7280) }
.ch-logo--woo { background: linear-gradient(135deg, #7f54b3, #674399) }
.ch-logo--tiktok { background: linear-gradient(135deg, #25f4ee, #fe2c55) }
.ch-logo--etsy { background: linear-gradient(135deg, #f56400, #d35400) }
.ch-card__title { font-size: 15px; font-weight: 700; color: var(--ink) }
.ch-card__sub { font-size: 11.5px; color: #6b7280; margin-top: 1px }

.ch-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px;
  text-transform: uppercase; letter-spacing: .03em; margin-left: auto; white-space: nowrap
}
.ch-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.ch-status--connected { background: #dcfce7; color: #166534 }
.ch-status--native { background: #eef2ff; color: #4338ca }
.ch-status--error { background: #fef2f2; color: #b91c1c }
.ch-status--syncing { background: #fef3c7; color: #92400e }

.ch-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--line-2); margin-bottom: 12px
}
.ch-stat__label { font-size: 10.5px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em }
.ch-stat__value { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 2px }
.ch-stat__value--warn { color: #d97706 }

.ch-card__foot { display: flex; align-items: center; gap: 8px }
.ch-card__synced { font-size: 11px; color: #9ca3af; flex: 1 }
.ch-btn {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: #374151; cursor: pointer; font-family: inherit
}
.ch-btn:hover { background: #f9fafb }
.ch-btn--primary { background: #4f46e5; border-color: #4f46e5; color: #fff }
.ch-btn--primary:hover { background: #4338ca }
.ch-btn--fix { background: #fef2f2; border-color: #fecaca; color: #b91c1c }
.ch-btn--fix:hover { background: #fee2e2 }

/* Available-to-connect row (smaller) */
.ch-available {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px
}
.ch-avail-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px
}
.ch-avail-card .ch-logo { width: 38px; height: 38px; border-radius: 10px; font-size: 11px }
.ch-avail-card__name { font-size: 13px; font-weight: 600; color: var(--ink) }
.ch-avail-card__sub { font-size: 11px; color: #9ca3af; margin-top: 1px }
.ch-avail-card .ch-btn { margin-left: auto }

.ch-section-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 8px 0 12px }

/* Manage modal sync toggles */
.ch-sync-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2)
}
.ch-sync-row:last-child { border-bottom: 0 }
.ch-sync-row__label { font-size: 13px; font-weight: 600; color: var(--ink) }
.ch-sync-row__desc { font-size: 11.5px; color: #6b7280; margin-top: 1px }

.ch-grid > *, .ch-available > * { min-width: 0 }

@media (max-width: 768px) {
  .ch-grid { grid-template-columns: 1fr }
  .ch-available { grid-template-columns: 1fr }
}

/* Product Catalog — per-product channel-sync chips */
.pc-chans { display: inline-flex; gap: 3px; align-items: center; flex-wrap: wrap }
.pc-chan {
  min-width: 24px; height: 18px; padding: 0 4px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; position: relative; cursor: pointer
}
.pc-chan--gt { background: #4f46e5 }
.pc-chan--az { background: #ff9900; color: #232f3e }
.pc-chan--sh { background: #5e8e3e }
.pc-chan--eb { background: #e53238 }
.pc-chan--wm { background: #0071ce }
.pc-chan--err { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #dc2626 }
.pc-chan--err::after {
  content: '!'; position: absolute; top: -5px; right: -5px;
  width: 12px; height: 12px; background: #dc2626; color: #fff; border-radius: 50%;
  font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff
}
.pc-chan-none { font-size: 11px; color: #9ca3af; font-style: italic }

/* ============================================================
   SOURCING (Seller — broadcast SR opportunities to quote)
   ============================================================ */
.src-list { display: flex; flex-direction: column; gap: 12px }
.src-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start
}
.src-card--urgent { border-color: #fecaca }
.src-card__main { min-width: 0 }
.src-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap }
.src-card__id { font-size: 12px; font-weight: 700; color: #4338ca }
.src-card__cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 4px; background: #fef3c7; color: #92400e }
.src-card__expires { font-size: 11.5px; color: #b91c1c; font-weight: 600; margin-left: auto }
.src-card__expires--warn { color: #d97706 }
.src-card__expires--ok { color: #6b7280 }
.src-card__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px }
.src-card__meta { font-size: 12.5px; color: #6b7280; margin: 0 0 10px }
.src-card__match {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: #166534; background: #dcfce7; padding: 3px 10px; border-radius: 12px; margin-bottom: 8px
}
.src-card__match svg { width: 12px; height: 12px }
.src-card__stats { display: flex; gap: 18px; font-size: 12px; color: #6b7280; flex-wrap: wrap }
.src-card__stats strong { color: var(--ink); font-weight: 700 }
.src-card__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 120px }
@media (max-width: 600px) {
  .src-card { grid-template-columns: 1fr }
  .src-card__actions { flex-direction: row }
}

/* ============================================================
   LEAD DISCOVERY (Seller — prospecting)
   ============================================================ */
.ld-layout { display: grid; grid-template-columns: 230px 1fr 260px; gap: 16px; align-items: start }
.ld-rail { position: sticky; top: 88px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px }
.ld-rail h4 { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px }
.ld-rail h4:first-child { margin-top: 0 }
.ld-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; padding: 5px 0; cursor: pointer }
.ld-check input { accent-color: #4f46e5 }
.ld-rail select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; margin-bottom: 4px }
.ld-rail__apply { width: 100%; margin-top: 14px; background: #4f46e5; color: #fff; border: 0; border-radius: 8px; padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit }
.ld-rail__apply:hover { background: #4338ca }

.ld-list { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.ld-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px }
.ld-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px }
.ld-card__avatar { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center }
.ld-card__name { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.ld-card__verified { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #eef2ff; color: #4338ca; text-transform: uppercase }
.ld-card__src { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em }
.ld-card__src--platform { background: #dcfce7; color: #166534 }
.ld-card__src--external { background: #fef3c7; color: #92400e }
.ld-card__meta { font-size: 12px; color: #6b7280; margin-top: 1px }
.ld-card__fit { text-align: center; flex-shrink: 0; margin-left: auto }
.ld-card__fit-num { font-size: 20px; font-weight: 800; color: #16a34a; line-height: 1 }
.ld-card__fit-label { font-size: 9px; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em }
.ld-card__activity { font-size: 12px; color: #475569; background: #f8fafc; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.5 }
.ld-card__actions { display: flex; gap: 8px; flex-wrap: wrap }
.ld-btn { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #374151; cursor: pointer; font-family: inherit }
.ld-btn:hover { background: #f9fafb }
.ld-btn--primary { background: #4f46e5; border-color: #4f46e5; color: #fff }
.ld-btn--primary:hover { background: #4338ca }

.ld-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px }
.ld-side-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px }
.ld-side-card h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 12px }
.ld-listitem { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; cursor: pointer }
.ld-listitem:last-child { border-bottom: 0 }
.ld-listitem__name { color: var(--ink); font-weight: 500 }
.ld-listitem__count { font-size: 11px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 10px; padding: 1px 8px }
.ld-camp-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 7px }
.ld-camp-row span:first-child { color: #6b7280 }
.ld-camp-row span:last-child { font-weight: 700; color: var(--ink) }

@media (max-width: 1100px) {
  .ld-layout { grid-template-columns: 1fr }
  .ld-rail, .ld-side { position: static }
  .ld-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px }
  .ld-rail__apply { grid-column: 1 / -1 }
}

/* ============================================================
   BRAND ICONS (reusable channel identifiers — generic glyphs in brand colors)
   Usage: <span class="brand-icon brand-icon--xs brand-icon--amazon" title="Amazon"></span>
   ============================================================ */
.brand-icon {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  vertical-align: middle
}
.brand-icon--xs { width: 20px; height: 20px }
.brand-icon--sm { width: 24px; height: 24px }
.brand-icon--md { width: 36px; height: 36px }
.brand-icon--lg { width: 46px; height: 46px }

/* GlobeTrader: indigo with globe */
.brand-icon--gt {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%234f46e5'/><circle cx='12' cy='12' r='6.5' fill='none' stroke='%23ffffff' stroke-width='1.5'/><line x1='5.5' y1='12' x2='18.5' y2='12' stroke='%23ffffff' stroke-width='1.5'/><ellipse cx='12' cy='12' rx='3' ry='6.5' fill='none' stroke='%23ffffff' stroke-width='1.5'/></svg>")
}

/* Amazon: dark navy with white "a" */
.brand-icon--amazon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%23232f3e'/><text x='12' y='17.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-weight='900' font-size='15' fill='%23ffffff'>a</text></svg>")
}

/* Shopify: green with shopping bag */
.brand-icon--shopify {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%235e8e3e'/><path d='M8 8h8l-1 10H9z' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/><path d='M10 8V7a2 2 0 0 1 4 0v1' fill='none' stroke='%23ffffff' stroke-width='1.5'/></svg>")
}

/* eBay: white card with letter "e" */
.brand-icon--ebay {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%23ffffff' stroke='%23e5e7eb' stroke-width='0.5'/><text x='12' y='17.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-weight='900' font-size='15' fill='%23e53238'>e</text></svg>")
}

/* Walmart: blue with yellow sparkle */
.brand-icon--walmart {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%230071ce'/><g stroke='%23ffc220' stroke-width='2' stroke-linecap='round'><line x1='12' y1='6' x2='12' y2='10'/><line x1='12' y1='14' x2='12' y2='18'/><line x1='6' y1='12' x2='10' y2='12'/><line x1='14' y1='12' x2='18' y2='12'/><line x1='7.8' y1='7.8' x2='10.4' y2='10.4'/><line x1='13.6' y1='13.6' x2='16.2' y2='16.2'/><line x1='16.2' y1='7.8' x2='13.6' y2='10.4'/><line x1='10.4' y1='13.6' x2='7.8' y2='16.2'/></g></svg>")
}

/* Direct: gray with upload glyph */
.brand-icon--direct {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%236b7280'/><path d='M12 7v8M8.5 10.5L12 7l3.5 3.5M7 18h10' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
}

/* Optional: extras for Available-to-connect cards */
.brand-icon--woo {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%237f54b3'/><text x='12' y='17' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-weight='900' font-size='12' fill='%23ffffff'>W</text></svg>")
}
.brand-icon--tiktok {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%23111111'/><path d='M14 6v8.5a2.5 2.5 0 1 1-2.5-2.5' fill='none' stroke='%2325f4ee' stroke-width='1.8' stroke-linecap='round'/><path d='M14 6c.5 1.8 2 3 4 3' fill='none' stroke='%23fe2c55' stroke-width='1.8' stroke-linecap='round'/></svg>")
}
.brand-icon--etsy {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='5' fill='%23f56400'/><text x='12' y='17' text-anchor='middle' font-family='Georgia,serif' font-weight='900' font-style='italic' font-size='14' fill='%23ffffff'>E</text></svg>")
}

/* Brand-icon chip wrapper (clickable + optional error marker) */
.brand-icon-chip { position: relative; cursor: pointer; border-radius: 5px; transition: transform .12s ease, box-shadow .12s ease }
.brand-icon-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.18) }
.brand-icon-chip.is-err::after {
  content: '!'; position: absolute; top: -5px; right: -5px;
  width: 12px; height: 12px; background: #dc2626; color: #fff; border-radius: 50%;
  font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
  z-index: 1
}
.brand-icons-row { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap }

/* Inline channel pill (icon + text label) — replaces om-ch for cleaner brand identity */
.channel-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #374151;
  padding: 3px 9px 3px 3px; border-radius: 14px;
  background: #f3f4f6; white-space: nowrap
}
.channel-pill .brand-icon { width: 18px; height: 18px }

/* ====================================================================
   Admin Access Console — user management + per-membership access editor
   ==================================================================== */
.btn-outline {
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.btn-outline:hover { background: #f8fafc; color: var(--ink); border-color: var(--blue) }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px }

.access-flash {
  margin-bottom: 18px; padding: 11px 16px; border-radius: 10px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  font-size: 13px; font-weight: 500;
}
.access-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  align-items: start; margin: 18px 0;
}
@media (max-width: 980px) { .access-grid { grid-template-columns: 1fr } }

/* Company-context chips (membership selector) */
.ctx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.ctx-chip:hover { border-color: var(--blue); color: var(--ink) }
.ctx-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff }

/* Toggle rows */
.access-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.access-row:last-child { border-bottom: 0 }
.access-row__name { font-size: 13.5px; font-weight: 600; color: var(--ink) }
.access-row__desc { font-size: 11.5px; color: var(--muted); margin-top: 2px }

/* iOS-style switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none }
.switch input { opacity: 0; width: 0; height: 0 }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #cbd5e1; border-radius: 999px; transition: .18s;
}
.switch .slider::before {
  content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: var(--blue) }
.switch input:checked + .slider::before { transform: translateX(18px) }
.switch input:disabled + .slider { opacity: .45; cursor: not-allowed }

/* Permission matrix helpers */
/* Single fixed-layout table so every group shares one column width = aligned */
.perm-matrix { table-layout: fixed }
.perm-matrix td { vertical-align: middle }
.perm-label { font-size: 13px; font-weight: 600; color: var(--ink) }
.perm-key { font-size: 11px; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all }
.perm-req { font-size: 11px; color: var(--muted); margin-top: 3px }
.perm-group-row td {
  background: #f8fafc; border-bottom: 1px solid var(--line-2);
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #9aa3b2; font-weight: 700; padding: 9px 20px;
}
.eff-reason { font-size: 11px; color: var(--muted); margin-top: 3px }
.access-legend { font-size: 12px; color: var(--muted); margin: 2px 0 4px }
.access-legend strong { color: var(--ink-2) }

/* ====================================================================
   Admin Category Management — tree + tabbed detail editor
   ==================================================================== */
.cat-admin { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; margin-top: 4px }
@media (max-width: 1000px) { .cat-admin { grid-template-columns: 1fr } }
.cat-tree-pane, .cat-detail-pane { padding-bottom: 12px }

.cat-tree { padding: 6px 6px 4px }
.cat-node__row {
  display: flex; align-items: center; gap: 4px; border-radius: 8px;
  padding-top: 3px; padding-bottom: 3px; min-height: 34px;
}
.cat-node__row:hover { background: #f8fafc }
.cat-node__row.is-selected { background: #eff6ff; box-shadow: inset 2px 0 0 var(--blue) }
.cat-node__caret { background: none; border: 0; cursor: pointer; color: #94a3b8; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none }
.cat-node__caret svg { width: 13px; height: 13px; transition: transform .12s }
.cat-node__name { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 0; font-family: inherit }
.cat-node__name:hover { color: var(--blue) }
.cat-node__count { font-size: 10px; font-weight: 700; color: #64748b; background: #e2e8f0; border-radius: 999px; padding: 1px 7px }
.cat-node__actions { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .12s; flex: none }
.cat-node__row:hover .cat-node__actions { opacity: 1 }
.cat-node__actions button { width: 24px; height: 24px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #64748b; font-size: 13px; line-height: 1 }
.cat-node__actions button:hover { background: #e2e8f0; color: var(--ink) }
.cat-node__actions .cat-node__del:hover { background: #fee2e2; color: #dc2626 }

.cat-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); padding: 0 18px; flex-wrap: wrap }
.cat-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 12px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit }
.cat-tab:hover { color: var(--ink) }
.cat-tab.is-active { color: var(--blue); border-bottom-color: var(--blue) }
.cat-tab-body { padding: 18px }
.cat-empty { color: var(--muted); font-size: 13px; padding: 24px 4px }

.cat-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px }
.cat-form__title { font-size: 14px; font-weight: 700; color: var(--ink) }
.cat-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 640px) { .cat-form__row { grid-template-columns: 1fr } }
.cat-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2) }
.cat-form input[type=text], .cat-form input[type=number], .cat-form select, .cat-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: #fff; font-weight: 500;
}
.cat-form input:focus, .cat-form select:focus, .cat-form textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12) }
.cat-form .cat-checkbox { flex-direction: row; align-items: center; gap: 8px; font-weight: 600 }
.cat-form__actions { display: flex; gap: 10px; margin-top: 4px }
.cat-err { color: #dc2626; font-size: 11.5px; font-weight: 500 }

/* Category attributes manager */
.cat-attr-list { display: flex; flex-direction: column; gap: 6px }
.cat-attr-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff }
.cat-attr-row.is-inherited { background: #f8fafc; opacity: .85 }
.cat-attr-row__name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; display: flex; align-items: center; gap: 8px }
.cat-attr-row__flags { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--muted) }
.cat-attr-row__del { width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #94a3b8 }
.cat-attr-row__del:hover { background: #fee2e2; color: #dc2626 }
.cat-attr-flags { display: flex; flex-wrap: wrap; gap: 16px }
.cat-opt-row { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 8px; margin-bottom: 8px }
.cat-opt-row input { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; font-family: inherit }
.cat-opt-row button { border: 0; background: #f1f5f9; border-radius: 8px; cursor: pointer; color: #64748b }
.cat-opt-row button:hover { background: #fee2e2; color: #dc2626 }

/* Category requests (admin manager + supplier submissions) */
.cat-req { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-2) }
.cat-req:last-child { border-bottom: 0 }
.cat-req__name { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px }
.cat-req__meta { font-size: 12px; color: var(--muted); margin-top: 3px }
.cat-req__desc { font-size: 12.5px; color: var(--ink-2); margin-top: 6px }
.cat-req__notes { font-size: 11.5px; color: #64748b; background: #f8fafc; border-radius: 6px; padding: 6px 10px; margin-top: 6px }
.cat-req__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none }
.cat-req__merge { display: flex; gap: 6px; align-items: center }
.cat-req__merge select { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; font-size: 12px; font-family: inherit; max-width: 160px }

/* Supplier-request moderation table + review screen */
.cat-req-filters input, .cat-req-filters select { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; font-family: inherit }
.cat-req-table { border-collapse: collapse; font-size: 13px }
.cat-req-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-2) }
.cat-req-table tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
.cat-req-table tbody tr:hover { background: #f8fafc }
.cat-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-size: 12px; color: var(--muted) }
.cat-review { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start }
.cat-review dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px; margin: 0 }
.cat-review dt { color: var(--muted); font-weight: 600 }
.cat-review dd { margin: 0; color: var(--ink) }
.cat-sim { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2) }
.cat-sim:last-child { border-bottom: 0 }
.cat-sim__score { font-size: 11px; font-weight: 700; color: #6d28d9 }
@media (max-width: 900px) { .cat-review { grid-template-columns: 1fr } }