/* ===== 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.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
}

/* ===== ACCEPT INVITATION ===== */
.invite-card {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 24px
}
.invite-card__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px }
.invite-card__avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  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
}
.invite-card__org { font-size: 16px; font-weight: 700; color: #1e1b4b }
.invite-card__inviter { font-size: 12.5px; color: #4338ca; margin-top: 2px }
.invite-card__inviter strong { color: #1e1b4b; font-weight: 700 }

.invite-card__role-line {
  font-size: 13px; color: #4338ca;
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(199, 210, 254, .6);
  margin-bottom: 12px
}
.invite-role-pill {
  font-size: 12px; font-weight: 700;
  background: #4f46e5; color: #fff;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em
}
.invite-role-pill--owner { background: #16a34a }
.invite-role-pill--manager { background: #4f46e5 }
.invite-role-pill--rep { background: #0891b2 }
.invite-role-pill--readonly { background: #6b7280 }

.invite-perms {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px
}
.invite-perms li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #312e81
}
.invite-perms__icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #4f46e5; color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.invite-perms__icon--no { background: #e5e7eb; color: #6b7280 }

.invite-actions { display: flex; gap: 10px; margin-top: 14px }
.invite-actions .auth-submit { flex: 1 }
.auth-decline {
  padding: 13px 18px;
  background: #fff;
  color: #4b5563;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease
}
.auth-decline:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca }

.auth-form-field__hint {
  font-size: 11.5px; color: #6b7280;
  margin-top: 5px
}

/* ===== SALES REP WORKSPACE ===== */

/* Quota progress widget */
.rep-quota {
  display: grid; grid-template-columns: 1fr 200px;
  gap: 18px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px
}
.rep-quota__main { min-width: 0 }
.rep-quota__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 14px
}
.rep-quota__eyebrow {
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em
}
.rep-quota__amount {
  font-size: 22px; color: #f1f5f9;
  margin-top: 4px;
  font-variant-numeric: tabular-nums
}
.rep-quota__amount strong { font-size: 28px; font-weight: 800; color: #fff }
.rep-quota__amount span { color: #94a3b8 }
.rep-quota__pct {
  font-size: 36px; font-weight: 800; color: #34d399;
  font-variant-numeric: tabular-nums;
  line-height: 1
}
.rep-quota__bar {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: visible;
  margin-bottom: 12px
}
.rep-quota__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #14b8a6);
  border-radius: 999px;
  transition: width .4s ease
}
.rep-quota__bar-marker {
  position: absolute; top: -3px;
  width: 4px; height: 16px;
  background: #34d399;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .25);
  transform: translateX(-50%)
}
.rep-quota__foot {
  font-size: 12px; color: #cbd5e1;
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center
}
.rep-quota__foot strong { color: #fff; font-weight: 700 }
.rep-quota__sep { color: #475569 }

.rep-quota__bonus {
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start
}
.rep-quota__bonus-label {
  font-size: 10px; font-weight: 700; color: #fcd34d;
  text-transform: uppercase; letter-spacing: .06em
}
.rep-quota__bonus-pct { font-size: 18px; font-weight: 800; color: #fef3c7 }
.rep-quota__bonus-hint { font-size: 11px; color: #fde68a; line-height: 1.35 }

@media (max-width: 800px) {
  .rep-quota { grid-template-columns: 1fr }
  .rep-quota__bonus { flex-direction: row; align-items: center; gap: 8px }
  .rep-quota__bonus-hint { display: none }
}


/* Rep mini perf card in sidebar (replaces pro-seller-card for reps) */
.rep-card {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff;
  margin: 0 14px 12px;
  padding: 12px;
  border-radius: 12px
}
.rep-card__eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #cffafe; margin-bottom: 8px
}
.rep-card__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  padding: 3px 0
}
.rep-card__row strong { font-weight: 700; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums }

/* Rep CTA button in topbar */
.rep-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  font-family: inherit
}
.rep-cta:hover { opacity: .92 }
.rep-cta svg { width: 14px; height: 14px }

/* Rep KPI row */
.rep-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px
}
.rep-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px
}
.rep-kpi__label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em }
.rep-kpi__value { font-size: 24px; font-weight: 800; color: var(--ink); margin-top: 3px; font-variant-numeric: tabular-nums }
.rep-kpi__trend { font-size: 11.5px; color: #6b7280; margin-top: 2px; font-weight: 600 }
.rep-kpi--primary { border-left: 3px solid #4f46e5 }
.rep-kpi--accent { background: linear-gradient(135deg, #ecfeff, #f0fdf4); border-color: #99f6e4 }
.rep-kpi--accent .rep-kpi__value { color: #0e7490 }

/* Due list */
.rep-due-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px }
.rep-due {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .1s ease
}
.rep-due:hover { border-color: #c7d2fe; background: #f8fafc; transform: translateX(2px) }
.rep-due__urgency {
  flex-shrink: 0;
  width: 56px;
  font-size: 11px; font-weight: 800;
  text-align: center;
  padding: 6px 4px;
  border-radius: 7px
}
.rep-due__urgency--high { background: #fef2f2; color: #b91c1c }
.rep-due__urgency--med { background: #fef3c7; color: #92400e }
.rep-due__urgency--low { background: #f1f5f9; color: #475569 }
.rep-due__main { flex: 1; min-width: 0 }
.rep-due__title { font-size: 13px; font-weight: 600; color: var(--ink) }
.rep-due__meta { font-size: 11.5px; color: #6b7280; margin-top: 1px }
.rep-due__amount { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.rep-due__cta { font-size: 12px; font-weight: 600; color: #4338ca; white-space: nowrap }

/* Pipeline mini-kanban for rep */
.rep-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 6px
}
.rep-pipeline-col {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px;
  min-width: 0
}
.rep-pipeline-col__head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px
}
.rep-pipeline-col__head strong { color: var(--ink); font-weight: 800; font-size: 10.5px }
.rep-pipeline-col__dot { width: 6px; height: 6px; border-radius: 50% }
.rep-pip-card {
  display: block; padding: 8px 10px; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 7px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .1s ease
}
.rep-pip-card:hover { border-color: #c7d2fe; transform: translateY(-1px) }
.rep-pip-card__name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3 }
.rep-pip-card__meta { font-size: 11px; color: #6b7280; margin-top: 1px }
.rep-pip-card__val { font-size: 11.5px; font-weight: 700; color: #166534; margin-top: 4px; font-variant-numeric: tabular-nums }

/* Recent messages */
.rep-msg-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px }
.rep-msg {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  text-decoration: none; color: inherit
}
.rep-msg:hover { background: #f8fafc }
.rep-msg__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.rep-msg__main { flex: 1; min-width: 0 }
.rep-msg__title { font-size: 12.5px; font-weight: 600; color: var(--ink) }
.rep-msg__preview { font-size: 11.5px; color: #6b7280; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rep-msg__time { font-size: 11px; color: #9ca3af; flex-shrink: 0 }

/* Leaderboard */
.rep-leaderboard { display: flex; flex-direction: column; gap: 8px; margin-top: 4px }
.rep-lb-row {
  display: grid;
  grid-template-columns: 18px minmax(100px, 1.4fr) 1fr 50px;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 12.5px
}
.rep-lb-row--you {
  background: linear-gradient(90deg, #ecfeff, #f8fafc);
  border-radius: 6px;
  padding: 6px 8px
}
.rep-lb-row__rank { font-size: 11px; font-weight: 700; color: #6b7280; text-align: center }
.rep-lb-row__name { color: var(--ink) }
.rep-lb-row__name strong { color: #0891b2; font-weight: 700 }
.rep-lb-row__bar-wrap { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden }
.rep-lb-row__bar { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 3px }
.rep-lb-row__val { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums }

@media (max-width: 800px) {
  .rep-pipeline { grid-template-columns: repeat(2, 1fr) }
  .rep-kpi-row { grid-template-columns: 1fr 1fr }
  .rep-due { flex-wrap: wrap }
  .seller-card[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important }
}

/* Rep Customers grid (dedicated rep page) */
.rep-cust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px }
.rep-cust-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease
}
.rep-cust-card:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .06) }
.rep-cust-card__head { display: flex; gap: 10px; align-items: center }
.rep-cust-card__avatar { width: 40px; height: 40px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-cust-card__name { font-size: 14px; font-weight: 700; color: var(--ink) }
.rep-cust-card__city { font-size: 11.5px; color: #6b7280; margin-top: 1px }
.rep-cust-card__stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2)
}
.rep-cust-card__stat-label { font-size: 10px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .03em }
.rep-cust-card__stat-value { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums }
.rep-cust-card__tags { display: flex; gap: 4px; flex-wrap: wrap }
.rep-cust-card__foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #6b7280; padding-top: 2px }

/* Rep New Quote — commission widget */
.rep-comm-widget {
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  border: 1px solid #99f6e4;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px
}
.rep-comm-widget__icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #0891b2, #0e7490); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0 }
.rep-comm-widget__main { flex: 1; min-width: 0 }
.rep-comm-widget__label { font-size: 11px; font-weight: 700; color: #0891b2; text-transform: uppercase; letter-spacing: .04em }
.rep-comm-widget__amount { font-size: 18px; font-weight: 800; color: #0e7490; margin-top: 2px; font-variant-numeric: tabular-nums }
.rep-comm-widget__hint { font-size: 11.5px; color: #155e75; margin-top: 2px }

/* Rep Catalog — "Add to quote" button */
.rep-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.rep-cat-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column
}
.rep-cat-card__media { height: 120px; display: flex; align-items: center; justify-content: center; color: #fff }
.rep-cat-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.rep-cat-card__name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3 }
.rep-cat-card__sku { font-size: 11px; color: #6b7280 }
.rep-cat-card__tiers { font-size: 11.5px; color: #4b5563; line-height: 1.5; padding: 6px 8px; background: #f8fafc; border-radius: 6px }
.rep-cat-card__tiers strong { color: var(--ink); font-weight: 700 }
.rep-cat-card__add {
  background: #4f46e5; color: #fff; border: 0;
  padding: 9px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  margin-top: auto
}
.rep-cat-card__add:hover { background: #4338ca }

/* Rep Catalog — view toggle + table view */
.rep-cat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px; flex-wrap: wrap;
}
.view-toggle {
  display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 3px; gap: 2px;
}
.view-toggle__btn {
  background: transparent; border: 0; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; color: #475569;
  border-radius: 6px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; font-family: inherit;
  transition: all .15s ease;
}
.view-toggle__btn:hover { color: #1e293b }
.view-toggle__btn.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.06) }

.rep-cat-table-wrap {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  overflow: hidden;
}
.rep-cat-table { width: 100%; border-collapse: collapse; font-size: 13px }
.rep-cat-table thead th {
  text-align: left; padding: 11px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.rep-cat-table tbody td {
  padding: 12px 14px; border-bottom: 1px solid #f1f5f9;
  color: #334155; vertical-align: middle;
}
.rep-cat-table tbody tr:last-child td { border-bottom: 0 }
.rep-cat-table tbody tr:hover { background: #f8fafc }
.rep-cat-table__product { display: flex; align-items: center; gap: 12px; min-width: 220px }
.rep-cat-table__thumb {
  width: 38px; height: 38px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.rep-cat-table__name { font-weight: 700; color: #0f172a; font-size: 13px }
.rep-cat-table__variants { font-size: 11.5px; color: #64748b; margin-top: 2px }
.rep-cat-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #475569;
}
.tier-mini {
  display: inline-block; font-size: 11.5px; color: #475569;
  background: #f1f5f9; padding: 3px 8px; border-radius: 5px;
  margin-right: 4px;
}
.tier-mini strong { color: #0f172a; font-weight: 700 }
.stock-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}
.stock-pill--healthy { background: #ecfdf5; color: #047857 }
.stock-pill--low { background: #fef3c7; color: #b45309 }
.stock-pill--made { background: #ede9fe; color: #6d28d9 }
.rep-cat-table__action { text-align: right; width: 1% }
.rep-cat-table__action .rep-cat-card__add {
  margin-top: 0; padding: 7px 12px; white-space: nowrap;
}

@media (max-width: 700px) {
  .rep-cat-table thead { display: none }
  .rep-cat-table, .rep-cat-table tbody, .rep-cat-table tr, .rep-cat-table td {
    display: block; width: 100%;
  }
  .rep-cat-table tbody tr {
    border-bottom: 1px solid #e2e8f0; padding: 12px 4px;
  }
  .rep-cat-table tbody td { border-bottom: 0; padding: 4px 14px }
  .rep-cat-table__product { padding-top: 10px }
  .rep-cat-table__action { text-align: left; padding-bottom: 10px }
}

/* Rep My Customers — view toggle + list table + pipeline board */
.rep-cust-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  margin: 20px 0 4px;
}

.rep-cust-list-wrap {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  overflow: hidden; margin-top: 12px;
}
.rep-cust-list { width: 100%; border-collapse: collapse; font-size: 13px }
.rep-cust-list thead th {
  text-align: left; padding: 11px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.rep-cust-list tbody td {
  padding: 14px; border-bottom: 1px solid #f1f5f9;
  color: #334155; vertical-align: middle;
}
.rep-cust-list tbody tr:last-child td { border-bottom: 0 }
.rep-cust-list tbody tr:hover { background: #f8fafc }
.rep-cust-list__namelink {
  display: flex; align-items: center; gap: 11px;
  color: inherit; text-decoration: none;
}
.rep-cust-list__namelink strong { color: #0f172a; font-size: 13.5px; display: block }
.rep-cust-list__avatar {
  width: 36px; height: 36px; border-radius: 9px;
  color: #fff; font-weight: 700; font-size: 11.5px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rep-cust-list__tags { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap }
.rep-cust-list__action { text-align: right; width: 1% }
.rep-cta--mini {
  padding: 7px 12px; font-size: 12px; white-space: nowrap;
}

.stage-pill {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
}
.stage-pill--new { background: #f0fdf4; color: #15803d }
.stage-pill--active { background: #fff7ed; color: #c2410c }
.stage-pill--vip { background: #ede9fe; color: #5b21b6 }
.stage-pill--risk { background: #fef2f2; color: #b91c1c }

/* =========================================================================
   REP · Commission / Earnings / Multi-brand  (Sales Agent)
   ========================================================================= */

/* --- Active-brand switcher (in dark sidebar) --- */
.rep-brandswitch { position: relative; margin: 0 14px 12px }
.rep-brandswitch__btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #fff; text-align: left; transition: background .15s ease, border-color .15s ease;
}
.rep-brandswitch__btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2) }
.rep-brandswitch__avatar {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11.5px; color: #fff; letter-spacing: .3px;
}
.rep-brandswitch__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2 }
.rep-brandswitch__eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,.5) }
.rep-brandswitch__name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rep-brandswitch__chev { width: 15px; height: 15px; color: rgba(255,255,255,.55); flex-shrink: 0; transition: transform .2s ease }
.rep-brandswitch.is-open .rep-brandswitch__chev { transform: rotate(180deg) }

.rep-brandswitch__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15,23,42,.28); padding: 8px; overflow: hidden;
}
.rep-brandswitch__menu[hidden] { display: none }
.rep-brandswitch__menu-label { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: #94a3b8; padding: 6px 8px 4px }
.rep-brandswitch__item {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px; border-radius: 9px; border: 0; background: transparent; text-align: left;
  transition: background .12s ease;
}
.rep-brandswitch__item:hover { background: #f1f5f9 }
.rep-brandswitch__item.is-active { background: #ecfeff }
.rep-brandswitch__item-av {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px;
}
.rep-brandswitch__item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25 }
.rep-brandswitch__item-name { font-size: 13px; font-weight: 600; color: #0f172a }
.rep-brandswitch__item-sub { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rep-brandswitch__item-rate {
  font-size: 11.5px; font-weight: 700; color: #0e7490;
  background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 2px 8px; flex-shrink: 0;
}
.rep-brandswitch__item.is-active .rep-brandswitch__item-rate { background: #cffafe }
.rep-brandswitch__manage {
  display: flex; align-items: center; gap: 7px; margin-top: 4px;
  padding: 9px 8px; border-top: 1px solid #f1f5f9; color: #0e7490;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.rep-brandswitch__manage:hover { color: #155e75 }
.rep-brandswitch__manage svg { width: 14px; height: 14px }

/* sidebar Earnings pill */
.snav-pill {
  margin-left: auto; font-size: 11px; font-weight: 700; color: #5eead4;
  background: rgba(14,116,144,.35); border-radius: 999px; padding: 2px 8px;
}

/* --- Wallet hero --- */
.rep-wallet {
  display: grid; grid-template-columns: minmax(300px, 1fr) 1.4fr; gap: 0;
  border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0;
  background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.rep-wallet__main {
  background: linear-gradient(150deg, #0d3b46 0%, #0e7490 55%, #0891b2 100%);
  color: #fff; padding: 26px 28px; display: flex; flex-direction: column; justify-content: center;
}
.rep-wallet__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8) }
.rep-wallet__eyebrow svg { width: 15px; height: 15px }
.rep-wallet__balance { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin: 8px 0 2px; line-height: 1 }
.rep-wallet__cleared { font-size: 12.5px; color: rgba(255,255,255,.78) }
.rep-wallet__actions { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.rep-wallet__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; color: #0e7490; border: 0; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; padding: 11px 18px; font-family: inherit;
  box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .12s ease;
}
.rep-wallet__btn:hover { transform: translateY(-1px) }
.rep-wallet__btn svg { width: 16px; height: 16px }
.rep-wallet__payout { font-size: 11.5px; color: rgba(255,255,255,.7) }

.rep-wallet__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.rep-wallet__stat { padding: 24px 22px; border-left: 1px solid #eef2f6; display: flex; flex-direction: column; justify-content: center }
.rep-wallet__stat:first-child { border-left: 0 }
.rep-wallet__stat-label { font-size: 12px; color: #64748b; font-weight: 500 }
.rep-wallet__stat-val { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -.5px; margin: 6px 0 3px }
.rep-wallet__stat-sub { font-size: 11.5px; color: #94a3b8 }

/* --- Generic rep panel --- */
.rep-panel {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 18px 20px; margin-top: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.rep-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.rep-panel__title { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 }
.rep-panel__sub { font-size: 12.5px; color: #64748b; margin: 3px 0 0 }
.rep-panel__link { font-size: 12.5px; font-weight: 600; color: #0e7490; text-decoration: none; white-space: nowrap }
.rep-panel__link:hover { color: #155e75 }
.rep-panel__link--btn { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0 }

/* --- Commission-by-brand table --- */
.rep-comm-table-wrap { overflow-x: auto }
.rep-comm-table { width: 100%; border-collapse: collapse; font-size: 13px }
.rep-comm-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #94a3b8; padding: 0 14px 10px; border-bottom: 1px solid #eef2f6;
}
.rep-comm-table th.is-num, .rep-comm-table td.is-num { text-align: right }
.rep-comm-table tbody td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; color: #334155 }
.rep-comm-table tbody tr:hover { background: #f8fafc }
.rep-comm-table tfoot td { padding: 12px 14px; font-weight: 700; color: #0f172a; border-top: 2px solid #e2e8f0 }
.rep-comm-table strong { color: #0f172a }
.rep-muted { color: #94a3b8 !important; font-weight: 500 }
.rep-comm-brand { display: flex; align-items: center; gap: 10px }
.rep-comm-brand__av { width: 34px; height: 34px; border-radius: 9px; color: #fff; font-weight: 800; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-comm-brand__name { font-size: 13.5px; font-weight: 600; color: #0f172a }
.rep-comm-brand__cat { font-size: 11.5px; color: #94a3b8 }
.rep-rate-pill { font-size: 12px; font-weight: 700; color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 3px 9px }
.rep-rate-pill--edit { cursor: pointer; font-family: inherit; transition: background .12s ease, border-color .12s ease }
.rep-rate-pill--edit:hover { background: #cffafe; border-color: #67e8f9 }
.sa-rate-ctl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #64748b; white-space: nowrap }
.sa-rate-ctl strong { color: #0e7490; font-size: 13.5px }
.rep-fund-note { font-size: 12.5px; color: #475569; line-height: 1.5; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 15px; margin: 14px 0 0 }
.rep-fund-note strong { color: #0e7490 }
.rep-comm-stmt { font-size: 12.5px; font-weight: 600; color: #0e7490; text-decoration: none; white-space: nowrap }
.rep-comm-stmt:hover { color: #155e75; text-decoration: underline }

/* --- Two-column grid (ledger + payouts) --- */
.rep-earn-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start }
.rep-earn-grid .rep-panel { margin-top: 16px }

/* --- Ledger (commission activity) --- */
.rep-ledger { display: flex; flex-direction: column }
.rep-ledger__row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f1f5f9 }
.rep-ledger__row:last-child { border-bottom: 0 }
.rep-ledger__icon { width: 30px; height: 30px; border-radius: 8px; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-ledger__main { flex: 1; min-width: 0 }
.rep-ledger__title { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rep-ledger__meta { font-size: 11.5px; color: #64748b; margin-top: 2px }
.rep-ledger__right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px }
.rep-ledger__amt { font-size: 13.5px; font-weight: 700; color: #047857 }

/* --- Payout history --- */
.rep-payouts { display: flex; flex-direction: column }
.rep-payout { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f1f5f9 }
.rep-payout:last-child { border-bottom: 0 }
.rep-payout__icon { width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; color: #475569; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-payout__icon svg { width: 16px; height: 16px }
.rep-payout__main { flex: 1; min-width: 0 }
.rep-payout__amt { font-size: 13.5px; font-weight: 700; color: #0f172a }
.rep-payout__meta { font-size: 11.5px; color: #64748b; margin-top: 1px }

/* --- Status pills --- */
.rep-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.rep-status--pending { background: #fef3c7; color: #b45309 }
.rep-status--cleared { background: #dbeafe; color: #1d4ed8 }
.rep-status--paid { background: #dcfce7; color: #15803d }
.rep-status--processing { background: #f1f5f9; color: #475569 }

/* --- Withdraw modal --- */
.rep-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px }
.rep-modal[aria-hidden="false"] { display: flex }
.rep-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px) }
.rep-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.35);
  overflow: hidden; animation: repModalIn .18s ease;
}
@keyframes repModalIn { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
.rep-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px }
.rep-modal__title { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 }
.rep-modal__sub { font-size: 12.5px; color: #64748b; margin: 4px 0 0 }
.rep-modal__sub strong { color: #0e7490 }
.rep-modal__close { background: none; border: 0; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px }
.rep-modal__close:hover { color: #475569 }
.rep-modal__body { padding: 6px 22px 8px }
.rep-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px 22px }

.rep-field { display: block; margin-bottom: 18px }
.rep-field__label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px }
.rep-field__money { display: flex; align-items: center; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 0 14px; transition: border-color .15s ease }
.rep-field__money:focus-within { border-color: #0e7490; box-shadow: 0 0 0 3px rgba(14,116,144,.12) }
.rep-field__currency { font-size: 20px; font-weight: 700; color: #94a3b8 }
.rep-field__money input { flex: 1; border: 0; outline: 0; font-size: 22px; font-weight: 700; color: #0f172a; padding: 12px 8px; font-family: inherit; background: transparent }
.rep-field__hint { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; min-height: 20px }
.rep-field__err { font-size: 11.5px; color: #dc2626; font-weight: 600 }
.rep-chip { font-size: 11.5px; font-weight: 600; color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 4px 11px; cursor: pointer; font-family: inherit }
.rep-chip:hover { background: #cffafe }

.rep-paymethod { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1.5px solid #e2e8f0; border-radius: 11px; cursor: pointer; margin-bottom: 9px; transition: border-color .15s ease, background .15s ease }
.rep-paymethod:hover { border-color: #cbd5e1 }
.rep-paymethod:has(input:checked) { border-color: #0e7490; background: #ecfeff }
.rep-paymethod input { accent-color: #0e7490; width: 16px; height: 16px; flex-shrink: 0 }
.rep-paymethod__ic { width: 34px; height: 34px; border-radius: 9px; background: #f1f5f9; color: #475569; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-paymethod__ic svg { width: 17px; height: 17px }
.rep-paymethod__main { display: flex; flex-direction: column; line-height: 1.3 }
.rep-paymethod__name { font-size: 13.5px; font-weight: 600; color: #0f172a }
.rep-paymethod__sub { font-size: 11.5px; color: #64748b }

.rep-btn { font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 11px 18px; border-radius: 10px; cursor: pointer; border: 1px solid transparent }
.rep-btn--ghost { background: #fff; color: #475569; border-color: #cbd5e1 }
.rep-btn--ghost:hover { background: #f8fafc }
.rep-btn--primary { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff }
.rep-btn--primary:hover { opacity: .93 }

/* --- Success toast --- */
.rep-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #0f172a; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 13px 20px; border-radius: 11px; box-shadow: 0 14px 36px rgba(15,23,42,.35);
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  display: flex; align-items: center; gap: 10px; max-width: 90vw;
}
.rep-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0) }
.rep-toast__check { width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0 }

@media (max-width: 1000px) {
  .rep-wallet { grid-template-columns: 1fr }
  .rep-wallet__stats { grid-template-columns: repeat(3, 1fr) }
  .rep-earn-grid { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .rep-wallet__stats { grid-template-columns: 1fr }
  .rep-wallet__stat { border-left: 0; border-top: 1px solid #eef2f6 }
  .rep-wallet__balance { font-size: 36px }
}

/* --- Small button modifier --- */
.rep-btn--sm { padding: 8px 13px; font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center }

/* --- My Brands: portfolio summary strip --- */
.rep-bsummary {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: #e2e8f0; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden;
}
.rep-bsummary__item { background: #fff; padding: 16px 18px }
.rep-bsummary__val { font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -.5px }
.rep-bsummary__label { font-size: 11.5px; color: #64748b; margin-top: 2px }

/* --- My Brands: portfolio cards --- */
.rep-brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px }
.rep-brand-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); display: flex; flex-direction: column;
}
.rep-brand-card__top { display: flex; align-items: center; gap: 12px }
.rep-brand-card__av { width: 44px; height: 44px; border-radius: 11px; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-brand-card__id { flex: 1; min-width: 0 }
.rep-brand-card__name { font-size: 15px; font-weight: 700; color: #0f172a }
.rep-brand-card__cat { font-size: 12px; color: #64748b; margin-top: 1px }
.rep-brand-card__rate {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0; padding: 11px 14px; border-radius: 10px;
  background: #ecfeff; border: 1px solid #cffafe; color: #155e75; font-size: 12.5px; font-weight: 600;
}
.rep-brand-card__rate-num { font-size: 18px; font-weight: 800; color: #0e7490 }
.rep-brand-card__rate-terms { font-size: 11.5px; color: #0891b2; font-weight: 500 }
.rep-brand-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 0 16px }
.rep-brand-card__stats > div { display: flex; flex-direction: column }
.rep-brand-stat__num { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -.3px }
.rep-brand-stat__lbl { font-size: 10.5px; color: #94a3b8; margin-top: 2px; text-transform: uppercase; letter-spacing: .3px }
.rep-brand-card__actions { display: flex; gap: 9px; margin-top: auto }
.rep-brand-card__actions .rep-btn { flex: 1 }

/* --- My Brands: discover --- */
.rep-discover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.rep-discover__card { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc }
.rep-discover__card .rep-brand-card__av { width: 38px; height: 38px; border-radius: 9px; font-size: 12px }
.rep-discover__main { flex: 1; min-width: 0 }
.rep-discover__action { flex-shrink: 0 }

/* --- Agent verification banner --- */
.rep-agent-banner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fcd34d;
  border-radius: 14px; padding: 14px 18px;
}
.rep-agent-banner[hidden] { display: none }
.rep-agent-banner__ic { width: 40px; height: 40px; border-radius: 11px; background: #fde68a; color: #92400e; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0 }
.rep-agent-banner__main { flex: 1; min-width: 0 }
.rep-agent-banner__title { font-size: 14px; font-weight: 700; color: #92400e }
.rep-agent-banner__sub { font-size: 12.5px; color: #b45309; margin-top: 2px; line-height: 1.45 }
.rep-agent-banner--verified { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #86efac }
.rep-agent-banner--verified .rep-agent-banner__ic { background: #bbf7d0; color: #166534 }
.rep-agent-banner--verified .rep-agent-banner__title { color: #166534 }
.rep-agent-banner--verified .rep-agent-banner__sub { color: #15803d }

/* --- New-agent empty portfolio --- */
.rep-empty {
  text-align: center; background: #fff; border: 1px dashed #cbd5e1; border-radius: 16px;
  padding: 44px 28px; margin-top: 4px;
}
.rep-empty__ic { width: 60px; height: 60px; border-radius: 16px; background: #ecfeff; color: #0e7490; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px }
.rep-empty__ic svg { width: 30px; height: 30px }
.rep-empty__title { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 0 6px }
.rep-empty__sub { font-size: 13.5px; color: #64748b; line-height: 1.55; max-width: 440px; margin: 0 auto 20px }
.rep-empty .rep-btn { display: inline-flex; align-items: center }

/* --- Seller · Sales Agents (applications) --- */
.sa-apps { display: flex; flex-direction: column; gap: 10px }
.sa-app {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  transition: opacity .25s ease, transform .25s ease;
}
.sa-app.is-removing { opacity: 0; transform: translateX(12px) }
.sa-app__av { width: 44px; height: 44px; border-radius: 11px; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.sa-app__main { flex: 1; min-width: 0 }
.sa-app__name { font-size: 14.5px; font-weight: 700; color: #0f172a }
.sa-app__meta { font-size: 12px; color: #64748b; margin-top: 1px }
.sa-app__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px }
.sa-app__tag { font-size: 11px; font-weight: 600; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 3px 9px }
.sa-app__when { font-size: 11.5px; color: #94a3b8; white-space: nowrap; flex-shrink: 0 }
.sa-app__actions { display: flex; gap: 8px; flex-shrink: 0 }
.sa-empty { text-align: center; padding: 26px; color: #94a3b8; font-size: 13px }

@media (max-width: 760px) {
  .sa-app { flex-wrap: wrap }
  .sa-app__actions { width: 100% }
  .sa-app__actions .rep-btn { flex: 1 }
}

@media (max-width: 1000px) {
  .rep-brand-grid { grid-template-columns: 1fr }
  .rep-bsummary { grid-template-columns: repeat(2, 1fr) }
  .rep-discover { grid-template-columns: 1fr }
}

/* --- Ghost CTA (topbar secondary) --- */
.rep-cta--ghost { background: #fff; color: #0e7490; border: 1px solid #cbd5e1 }
.rep-cta--ghost:hover { background: #f8fafc; opacity: 1 }

/* --- Brand Statement page --- */
.rep-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #94a3b8; margin-bottom: 14px }
.rep-crumb a { color: #0e7490; text-decoration: none; font-weight: 600 }
.rep-crumb a:hover { text-decoration: underline }

.rep-stmt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.rep-stmt-head__brand { display: flex; align-items: center; gap: 14px }
.rep-stmt-head__name { font-size: 18px; font-weight: 800; color: #0f172a }
.rep-stmt-head__terms { font-size: 12.5px; color: #64748b; margin-top: 3px }
.rep-stmt-head__terms strong { color: #0e7490 }
.rep-stmt-head__actions { display: flex; gap: 9px }

.rep-recon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px }
.rep-recon__tile { background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04) }
.rep-recon__tile--accent { background: linear-gradient(135deg, #ecfeff, #f0fdfa); border-color: #99f6e4 }
.rep-recon__label { font-size: 12px; color: #64748b; font-weight: 500 }
.rep-recon__val { font-size: 25px; font-weight: 800; color: #0f172a; letter-spacing: -.5px; margin: 6px 0 3px }
.rep-recon__tile--accent .rep-recon__val { color: #0e7490 }
.rep-recon__sub { font-size: 11.5px; color: #94a3b8 }

.rep-recon-note {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
  padding: 11px 14px; font-size: 12.5px; color: #166534;
}
.rep-recon-note strong { color: #14532d }
.rep-recon-note svg { width: 16px; height: 16px; color: #16a34a; flex-shrink: 0 }

.rep-months { display: flex; flex-direction: column }
.rep-month { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f1f5f9 }
.rep-month:last-child { border-bottom: 0 }
.rep-month__main { flex: 1; min-width: 0 }
.rep-month__name { font-size: 13.5px; font-weight: 600; color: #0f172a }
.rep-month__meta { font-size: 11.5px; color: #94a3b8; margin-top: 1px }
.rep-month__amt { font-size: 14px; font-weight: 700; color: #0f172a }
.rep-month__dl { background: #f1f5f9; border: 0; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: #475569; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rep-month__dl:hover { background: #e2e8f0 }
.rep-month__dl svg { width: 15px; height: 15px }

@media (max-width: 1000px) {
  .rep-recon { grid-template-columns: repeat(2, 1fr) }
  .rep-stmt-head { flex-direction: column; align-items: flex-start }
}

/* Pipeline kanban board */
.rep-pipeline-board {
  display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 14px; margin-top: 12px;
}
.rep-pipe-col {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 360px;
}
.rep-pipe-col--new { border-top: 3px solid #16a34a }
.rep-pipe-col--active { border-top: 3px solid #f97316 }
.rep-pipe-col--vip { border-top: 3px solid #7c3aed }
.rep-pipe-col--risk { border-top: 3px solid #dc2626 }
.rep-pipe-col__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; color: #0f172a;
}
.rep-pipe-col__count {
  background: rgba(15, 23, 42, .08); color: #475569;
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
}
.rep-pipe-col__hint {
  font-size: 11.5px; color: #64748b; line-height: 1.4;
  padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0;
}
.rep-pipe-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
  transition: all .15s ease;
}
.rep-pipe-card:hover { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.05) }
.rep-pipe-card--vip { background: linear-gradient(180deg, #faf5ff 0%, #ffffff 60%) }
.rep-pipe-card__head { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #0f172a }
.rep-pipe-card__head strong { font-weight: 700 }
.rep-pipe-card__avatar {
  width: 30px; height: 30px; border-radius: 8px;
  color: #fff; font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rep-pipe-card__loc { font-size: 11.5px; color: #64748b }
.rep-pipe-card__deal {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 7px 9px;
  background: #f8fafc; border-radius: 7px;
}
.rep-pipe-card__deal strong { color: #0f172a; font-weight: 700 }
.rep-pipe-card__next {
  font-size: 11.5px; color: #4f46e5;
  background: #eef2ff; padding: 5px 9px; border-radius: 6px;
}
.rep-pipe-card__foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #64748b;
  padding-top: 6px; border-top: 1px solid #f1f5f9;
}
.rep-pipe-empty {
  text-align: center; padding: 28px 12px; color: #94a3b8;
}
.rep-pipe-empty__check {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f0fdf4; color: #16a34a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  margin-bottom: 8px;
}
.rep-pipe-empty__title { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 3px }
.rep-pipe-empty__sub { font-size: 11.5px; color: #94a3b8; line-height: 1.4 }

@media (max-width: 1100px) {
  .rep-pipeline-board { grid-template-columns: repeat(2, 1fr) }
  .rep-pipeline-board--5col { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px) {
  .rep-pipeline-board { grid-template-columns: 1fr }
  .rep-pipeline-board--5col { grid-template-columns: 1fr }
  .rep-cust-list thead { display: none }
  .rep-cust-list, .rep-cust-list tbody, .rep-cust-list tr, .rep-cust-list td {
    display: block; width: 100%;
  }
  .rep-cust-list tbody tr { border-bottom: 1px solid #e2e8f0; padding: 10px 4px }
  .rep-cust-list tbody td { border-bottom: 0; padding: 4px 14px }
  .rep-cust-list__action { text-align: left; padding-bottom: 12px }
}

/* 5-col pipeline for Quotes (Awaiting → Quoted → Counter → Won → Declined) */
.rep-pipeline-board--5col {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
}
.rep-pipe-col--awaiting { border-top-color: #4f46e5 }
.rep-pipe-col--quoted   { border-top-color: #0ea5e9 }
.rep-pipe-col--counter  { border-top-color: #f59e0b }
.rep-pipe-col--won      { border-top-color: #16a34a }
.rep-pipe-col--declined { border-top-color: #94a3b8 }
/* Orders pipeline */
.rep-pipe-col--confirmed  { border-top-color: #4f46e5 }
.rep-pipe-col--production { border-top-color: #f59e0b }
.rep-pipe-col--shipped    { border-top-color: #0ea5e9 }
.rep-pipe-col--delivered  { border-top-color: #16a34a }
.rep-pipe-col--paid       { border-top-color: #047857 }

/* Rep RFQ Cards view */
.rep-rfq-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 12px;
}
.rep-rfq-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit;
  transition: all .15s ease;
}
.rep-rfq-card:hover { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.05) }
.rep-rfq-card--urgent { border-left: 3px solid #dc2626 }
.rep-rfq-card--vip { background: linear-gradient(180deg, #faf5ff 0%, #ffffff 60%); border-left: 3px solid #7c3aed }
.rep-rfq-card__row1 {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: #0f172a;
}
.rep-rfq-card__row1 strong { font-weight: 700; font-size: 14px }
.rep-rfq-card__product { font-size: 12.5px; color: #475569; line-height: 1.4 }
.rep-rfq-card__buyer {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: #f8fafc; border-radius: 8px;
}
.rep-rfq-card__buyer strong { color: #0f172a; font-size: 13px; display: block }
.rep-rfq-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.rep-rfq-card__stats > div {
  display: flex; flex-direction: column; gap: 1px;
}
.rep-rfq-card__stats span { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em }
.rep-rfq-card__stats strong { font-size: 13px; color: #0f172a; font-weight: 700 }
.rep-rfq-card__foot {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #64748b;
  padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.rep-rfq-card__cta {
  background: #4f46e5; color: #fff; border: 0;
  padding: 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  margin-top: 4px;
}
.rep-rfq-card__cta:hover { background: #4338ca }

/* ===== DEDICATED ACCOUNT / DIRECT SUPPLIER ===== */

/* Seller-side: Dedicated Account panel on Buyer Detail */
.dedicated-panel {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px
}
.dedicated-panel__main { min-width: 0 }
.dedicated-panel__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px
}
.dedicated-panel__icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1e1b4b;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  flex-shrink: 0
}
.dedicated-panel__title {
  font-size: 15px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px
}
.dedicated-panel__pill {
  font-size: 10.5px; font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1e1b4b;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em
}
.dedicated-panel__sub { font-size: 12px; color: #94a3b8; margin-top: 2px }
.dedicated-panel__toggle { margin-left: auto }
.dedicated-panel__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px
}
.dedicated-panel__cell-label { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em }
.dedicated-panel__cell-value { font-size: 16px; font-weight: 800; color: #fff; margin-top: 4px; font-variant-numeric: tabular-nums }
.dedicated-panel__cell-hint { font-size: 11px; color: #cbd5e1; margin-top: 2px }

.dedicated-panel__contract {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1)
}
.dedicated-panel__contract-label { font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px }
.dedicated-panel__contract-bar {
  height: 10px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden;
  margin-bottom: 8px
}
.dedicated-panel__contract-bar-fill {
  height: 100%; background: linear-gradient(90deg, #34d399, #14b8a6); border-radius: 999px
}
.dedicated-panel__contract-foot { font-size: 12px; color: #cbd5e1; display: flex; gap: 12px; flex-wrap: wrap }
.dedicated-panel__contract-foot strong { color: #fff; font-weight: 700 }

.dedicated-panel__manager {
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px
}
.dedicated-panel__manager-label { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em }
.dedicated-panel__manager-row { display: flex; align-items: center; gap: 10px }
.dedicated-panel__manager-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.dedicated-panel__manager-name { font-size: 13px; font-weight: 700; color: #fff }
.dedicated-panel__manager-role { font-size: 11px; color: #94a3b8 }
.dedicated-panel__btn {
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 12px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  text-align: center
}
.dedicated-panel__btn:hover { background: rgba(255,255,255,.14) }
.dedicated-panel__btn--primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1e1b4b; border: 0; font-weight: 700 }

/* Custom-pricing list */
.dedicated-pricing {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1)
}
.dedicated-pricing__label { font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px }
.dedicated-pricing__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,.05)
}
.dedicated-pricing__row:last-child { border-bottom: 0 }
.dedicated-pricing__name { flex: 1; color: #e2e8f0 }
.dedicated-pricing__public { color: #94a3b8; text-decoration: line-through; font-variant-numeric: tabular-nums }
.dedicated-pricing__contract { color: #34d399; font-weight: 700; font-variant-numeric: tabular-nums }
.dedicated-pricing__save { color: #34d399; font-size: 11px; font-weight: 600 }

@media (max-width: 800px) {
  .dedicated-panel { grid-template-columns: 1fr }
  .dedicated-panel__grid { grid-template-columns: 1fr 1fr }
}

/* Exclusive badge on buyer rows */
.exclusive-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em
}
.exclusive-badge::before { content: '★'; color: #d97706 }

/* === BUYER SIDE — Direct Suppliers list === */
.direct-hero {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap
}
.direct-hero__main { flex: 1; min-width: 260px }
.direct-hero__title { font-size: 22px; font-weight: 800; margin: 0; color: #fff }
.direct-hero__sub { font-size: 13.5px; color: #c7d2fe; margin: 6px 0 0 }
.direct-hero__stats { display: flex; gap: 22px; flex-shrink: 0 }
.direct-hero__stat-label { font-size: 11px; color: #c7d2fe; text-transform: uppercase; letter-spacing: .04em; font-weight: 600 }
.direct-hero__stat-value { font-size: 22px; font-weight: 800; color: #fff; margin-top: 2px; font-variant-numeric: tabular-nums }

.supplier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px
}
.supplier-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease
}
.supplier-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px)
}
.supplier-card__head { display: flex; align-items: center; gap: 12px }
.supplier-card__logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
  flex-shrink: 0
}
.supplier-card__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.supplier-card__name { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 }
.supplier-card__meta { font-size: 11.5px; color: #6b7280; margin-top: 2px }

.supplier-card__contract {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px
}
.supplier-card__contract-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; color: #4b5563;
  margin-bottom: 6px
}
.supplier-card__contract-row strong { color: var(--ink); font-weight: 700; font-size: 13px }
.supplier-card__contract-bar { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden }
.supplier-card__contract-bar-fill { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 999px }

.supplier-card__metrics {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; padding: 6px 0;
  border-top: 1px solid var(--line-2)
}
.supplier-card__metric-label { font-size: 10.5px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.supplier-card__metric-value { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 2px }

.supplier-card__foot { display: flex; align-items: center; gap: 10px; padding-top: 4px }
.supplier-card__cta {
  flex: 1; background: #4f46e5; color: #fff;
  border: 0; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  text-decoration: none; text-align: center
}
.supplier-card__cta:hover { background: #4338ca }
.supplier-card__msg {
  width: 38px; height: 38px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #4b5563
}
.supplier-card__msg:hover { background: #f3f4f6 }

/* === Direct Storefront page === */
.storefront-hero {
  background: linear-gradient(135deg, #4f46e5, #6366f1, #7c3aed);
  color: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 22px;
  position: relative; overflow: hidden
}
.storefront-hero::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(245,158,11,.25), transparent);
  border-radius: 50%
}
.storefront-hero__row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap }
.storefront-hero__logo {
  width: 66px; height: 66px;
  background: rgba(255,255,255,.15);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 22px;
  flex-shrink: 0
}
.storefront-hero__main { flex: 1; min-width: 260px }
.storefront-hero__eyebrow { font-size: 11px; font-weight: 700; color: #fde68a; text-transform: uppercase; letter-spacing: .08em }
.storefront-hero__title { font-size: 24px; font-weight: 800; color: #fff; margin: 4px 0 0 }
.storefront-hero__sub { font-size: 13.5px; color: #e0e7ff; margin: 6px 0 0; line-height: 1.5 }
.storefront-hero__pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1e1b4b;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px
}

/* Contract progress widget (buyer view) */
.contract-progress {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 18px
}
.contract-progress__main { min-width: 0 }
.contract-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px }
.contract-progress__title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 }
.contract-progress__sub { font-size: 11.5px; color: #6b7280; margin: 2px 0 0 }
.contract-progress__amount { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums }
.contract-progress__amount span { font-weight: 500; color: #6b7280 }
.contract-progress__bar { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-bottom: 8px }
.contract-progress__bar-fill { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 999px }
.contract-progress__foot { font-size: 12px; color: #4b5563; display: flex; gap: 12px; flex-wrap: wrap }
.contract-progress__foot strong { color: var(--ink); font-weight: 700 }
.contract-progress__manager {
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  border-radius: 10px;
  padding: 12px;
  display: flex; align-items: center; gap: 10px
}
.contract-progress__manager-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.contract-progress__manager-main { flex: 1; min-width: 0 }
.contract-progress__manager-label { font-size: 9.5px; font-weight: 700; color: #0891b2; text-transform: uppercase; letter-spacing: .04em }
.contract-progress__manager-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 1px }
.contract-progress__manager-role { font-size: 11px; color: #6b7280 }
.contract-progress__manager-msg {
  width: 34px; height: 34px;
  background: #fff; border: 1px solid #99f6e4;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #0891b2;
  text-decoration: none
}
.contract-progress__manager-msg:hover { background: #ecfeff }
@media (max-width: 800px) { .contract-progress { grid-template-columns: 1fr } }

/* Direct buy product grid */
.direct-products {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px
}
.direct-product {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px
}
.direct-product__media {
  height: 110px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff
}
.direct-product__name { font-size: 13.5px; font-weight: 700; color: var(--ink) }
.direct-product__sku { font-size: 11px; color: #6b7280 }
.direct-product__pricing { display: flex; align-items: baseline; gap: 8px }
.direct-product__price { font-size: 18px; font-weight: 800; color: #4338ca; font-variant-numeric: tabular-nums }
.direct-product__public { font-size: 12px; color: #6b7280; text-decoration: line-through; font-variant-numeric: tabular-nums }
.direct-product__save {
  font-size: 10.5px; font-weight: 700;
  background: #dcfce7; color: #166534;
  padding: 2px 7px; border-radius: 5px
}
.direct-product__cta {
  display: flex; gap: 6px
}
.direct-product__cta button {
  flex: 1; padding: 8px;
  border: 0; border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit
}
.direct-product__cta button.primary { background: #4f46e5; color: #fff }
.direct-product__cta button.primary:hover { background: #4338ca }
.direct-product__cta button.ghost { background: #fff; color: #4b5563; border: 1px solid var(--line) }
.direct-product__cta button.ghost:hover { background: #f3f4f6 }

/* Reorder past-orders strip */
.reorder-strip {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px
}
.reorder-card {
  flex: 0 0 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px
}
.reorder-card__date { font-size: 11px; color: #6b7280; font-weight: 600 }
.reorder-card__items { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 4px; line-height: 1.3 }
.reorder-card__total { font-size: 14px; font-weight: 800; color: #4338ca; margin: 8px 0; font-variant-numeric: tabular-nums }
.reorder-card__cta {
  width: 100%; padding: 8px; border: 0; border-radius: 7px;
  background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit
}
.reorder-card__cta:hover { opacity: .92 }

/* Cart: "direct from supplier" indicator */
.cart-direct-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  border: 1px solid #99f6e4;
  color: #0e7490;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 5px
}
.cart-direct-savings {
  background: #dcfce7; color: #166534;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px
}

/* Rep ownership filter pill (shown when rep is viewing filtered list) */
.rep-owner-pill {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  border: 1px solid #99f6e4;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #155e75
}
.rep-owner-pill svg { width: 16px; height: 16px; color: #0891b2; flex-shrink: 0 }
.rep-owner-pill strong { color: #0e7490; font-weight: 700 }

/* Rep quote-limit banner on Create Order */
.rep-limit-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  border: 1px solid #99f6e4;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 13px;
  color: #155e75
}
.rep-limit-banner svg { width: 18px; height: 18px; color: #0891b2; flex-shrink: 0 }
.rep-limit-banner strong { color: #0e7490; font-weight: 700 }
.rep-limit-banner.is-over {
  background: linear-gradient(135deg, #fef3c7, #fef9c3);
  border-color: #fbbf24;
  color: #78350f
}
.rep-limit-banner.is-over svg { color: #d97706 }
.rep-limit-banner.is-over strong { color: #1c0a01 }

button.is-warn { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important }

/* Read-only banner (rep on Catalog / Editor) */
.read-only-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px; font-weight: 600;
  color: #78350f;
  margin: 0 0 14px;
  width: fit-content
}
.read-only-pill svg { width: 13px; height: 13px }

/* Demo accounts panel on Login page */
.demo-accounts {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px dashed #cbd5e1;
  border-radius: 12px
}
.demo-accounts__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px
}
.demo-accounts__label {
  font-size: 11px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: .06em
}
.demo-accounts__hint { font-size: 10.5px; color: #94a3b8 }
.demo-accounts__grid {
  display: grid; gap: 6px
}
.demo-account {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease
}
.demo-account:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  transform: translateY(-1px)
}
.demo-account__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 15px
}
.demo-account__main { flex: 1; min-width: 0 }
.demo-account__name { font-size: 13px; font-weight: 700; color: var(--ink) }
.demo-account__role { font-size: 11px; color: #6b7280; margin-top: 1px }
.demo-account__arrow { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0 }
.demo-account:hover .demo-account__arrow { color: #4f46e5 }

.demo-accounts__invite {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 12.5px; color: #6b7280;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap
}
.demo-accounts__invite-btn {
  font-size: 12.5px; font-weight: 600; color: #4338ca;
  background: transparent; border: 0;
  padding: 4px 8px; border-radius: 6px;
  cursor: pointer; font-family: inherit
}
.demo-accounts__invite-btn:hover { background: #eef2ff }

/* Team invite modal — permissions preview + link reveal */
.tm-perm-preview {
  background: #f8fafc;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px
}
.tm-perm-preview__label {
  font-size: 10px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px
}
.tm-perm-preview ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px }
.tm-perm-preview li {
  font-size: 12.5px; color: #374151;
  display: flex; align-items: center; gap: 6px;
  line-height: 1.4
}
.tm-perm-preview li strong { color: var(--ink); font-weight: 700 }
.tm-perm-preview li .ok { color: #16a34a; font-weight: 700 }
.tm-perm-preview li .no { color: #dc2626; font-weight: 700 }

.tm-invite-link {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px
}
.tm-invite-link__label {
  font-size: 12px; font-weight: 700; color: #166534;
  margin-bottom: 8px
}
.tm-invite-link__row {
  display: flex; gap: 6px; align-items: stretch;
  margin-bottom: 6px
}
.tm-invite-link__row input {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  border: 1px solid #86efac; border-radius: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #14532d;
  background: #fff
}
.tm-invite-link__row button {
  background: #16a34a; color: #fff; border: 0;
  padding: 8px 14px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  white-space: nowrap
}
.tm-invite-link__row button:hover { background: #15803d }
.tm-invite-link__hint {
  font-size: 11px; color: #15803d
}
.tm-invite-link__hint strong { font-weight: 700 }

/* ============================================================
   SUPER ADMIN APP — dark-slate theme
   Distinct from seller (sky-blue) and buyer (navy)
   ============================================================ */

/* Sidebar */
.sidebar[data-sidebar="admin"] {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  display: flex; flex-direction: column;
  padding: 0;
  overflow-y: auto
}
.sidebar[data-sidebar="admin"] .brand {
  padding: 18px 18px 16px;
  display: flex; align-items: center; gap: 10px
}
.sidebar[data-sidebar="admin"] .brand-logo {
  filter: brightness(0) invert(1);
  width: 130px;
  opacity: .95
}
.sidebar[data-sidebar="admin"] .admin-id-badge {
  margin: 0 14px 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1e1b4b;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start
}
.sidebar[data-sidebar="admin"] .admin-id-badge::before {
  content: '★';
  font-size: 12px;
  line-height: 1
}

.admin-nav { display: flex; flex-direction: column; padding: 4px 10px; gap: 1px }
.admin-nav a, .admin-nav button {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  font-size: 13px; font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  border-radius: 8px;
  background: transparent; border: 0;
  font-family: inherit;
  cursor: pointer;
  width: 100%; text-align: left;
  transition: background .15s ease, color .15s ease
}
.admin-nav a:hover, .admin-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff }
.admin-nav a.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .04));
  color: #fef3c7;
  border-left: 3px solid #f59e0b;
  padding-left: 9px
}
.admin-nav .admin-nav__ic {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: .85
}
.admin-nav a.active .admin-nav__ic { opacity: 1 }
.admin-nav .admin-nav__badge {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: #dc2626; color: #fff;
  min-width: 18px; text-align: center
}
.admin-nav .admin-nav__badge--amber { background: #f59e0b; color: #1e1b4b }
.admin-nav .admin-nav__section {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 14px 12px 6px
}

.sidebar[data-sidebar="admin"] .admin-user {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 16px;
  display: flex; gap: 10px; align-items: center;
  text-decoration: none;
  color: #e2e8f0
}
.sidebar[data-sidebar="admin"] .admin-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex; align-items: center; justify-content: center;
  color: #1e1b4b; font-weight: 800; font-size: 12px;
  flex-shrink: 0
}
.sidebar[data-sidebar="admin"] .admin-user-info { flex: 1; min-width: 0 }
.sidebar[data-sidebar="admin"] .admin-user-name { font-size: 13px; font-weight: 600; color: #fff }
.sidebar[data-sidebar="admin"] .admin-user-role { font-size: 11px; color: #94a3b8 }

/* Topbar variant for admin */
.admin-app .topbar h1 { color: var(--ink) }
.admin-app .topbar { background: #fff }

/* Status pills */
.admin-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap
}
.admin-pill--verified { background: #dcfce7; color: #166534 }
.admin-pill--gold { background: #fef3c7; color: #854d0e }
.admin-pill--silver { background: #e5e7eb; color: #374151 }
.admin-pill--pending { background: #dbeafe; color: #1e40af }
.admin-pill--suspended { background: #fee2e2; color: #991b1b }
.admin-pill--flagged { background: #fef2f2; color: #dc2626 }
.admin-pill--active { background: #dcfce7; color: #166534 }
.admin-pill--banned { background: #1f2937; color: #fff }
.admin-pill--new { background: #ede9fe; color: #5b21b6 }
.admin-pill__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor
}

/* KPI cards — admin variant */
.admin-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px
}
.admin-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px
}
.admin-kpi__label { font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.admin-kpi__value { font-size: 26px; font-weight: 800; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums }
.admin-kpi__trend { font-size: 11.5px; margin-top: 4px; font-weight: 600 }
.admin-kpi__trend--up { color: #16a34a }
.admin-kpi__trend--down { color: #dc2626 }
.admin-kpi__trend--flat { color: #6b7280 }
.admin-kpi__trend--warn { color: #b45309 }
.admin-kpi--alert { border-left: 4px solid #dc2626 }
.admin-kpi--warn { border-left: 4px solid #f59e0b }

/* Action queue card */
.admin-queue {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px
}
.admin-queue__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px
}
.admin-queue__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }
.admin-queue__sub { font-size: 11.5px; color: #6b7280; margin: 2px 0 0 }
.admin-queue__filter {
  display: inline-flex; gap: 4px;
  background: #f1f5f9; padding: 3px; border-radius: 7px
}
.admin-queue__filter button {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border: 0; background: transparent;
  border-radius: 5px; cursor: pointer; color: #475569;
  font-family: inherit
}
.admin-queue__filter button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.05) }
.admin-queue__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
  cursor: pointer;
  text-decoration: none; color: inherit
}
.admin-queue__item:first-of-type { border-top: 0 }
.admin-queue__item:hover { background: #f8fafc }
.admin-queue__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px
}
.admin-queue__icon--verify { background: #dbeafe; color: #1e40af }
.admin-queue__icon--dispute { background: #fee2e2; color: #b91c1c }
.admin-queue__icon--fraud { background: #fef3c7; color: #854d0e }
.admin-queue__icon--sync { background: #ede9fe; color: #5b21b6 }
.admin-queue__main { flex: 1; min-width: 0 }
.admin-queue__title-row { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3 }
.admin-queue__meta { font-size: 11.5px; color: #6b7280; margin-top: 2px }
.admin-queue__cta {
  font-size: 12px; font-weight: 600; color: #4338ca;
  padding-top: 4px; white-space: nowrap
}

/* Tables — admin variant */
.admin-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px
}
.admin-table__head {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap
}
.admin-table__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }
.admin-table__sub { font-size: 11.5px; color: #6b7280; margin: 2px 0 0 }
.admin-table__tools { display: flex; gap: 8px; align-items: center }
.admin-table__search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #f8fafc
}
.admin-table__search input {
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 12.5px;
  width: 180px
}
.admin-table table { width: 100%; border-collapse: collapse }
.admin-table thead th {
  font-size: 10.5px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: 10px 18px;
  border-bottom: 1px solid var(--line-2);
  background: #f8fafc
}
.admin-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink);
  vertical-align: middle
}
.admin-table tbody tr:last-child td { border-bottom: 0 }
.admin-table tbody tr:hover { background: #f8fafc }
.admin-table .is-num { text-align: right; font-variant-numeric: tabular-nums }

/* Entity cell — avatar + name + meta */
.admin-entity {
  display: flex; align-items: center; gap: 10px
}
.admin-entity__avatar {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.admin-entity__name { font-size: 13px; font-weight: 700; color: var(--ink) }
.admin-entity__meta { font-size: 11.5px; color: #6b7280; margin-top: 1px }

/* Action buttons */
.admin-btn {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px
}
.admin-btn:hover { background: #f3f4f6 }
.admin-btn--primary { background: #4f46e5; color: #fff; border-color: #4f46e5 }
.admin-btn--primary:hover { background: #4338ca }
.admin-btn--warn { background: #f59e0b; color: #1e1b4b; border-color: #f59e0b }
.admin-btn--warn:hover { background: #d97706 }
.admin-btn--danger { background: #fff; color: #dc2626; border-color: #fecaca }
.admin-btn--danger:hover { background: #fef2f2 }
.admin-btn--ghost { color: #4338ca; border-color: #c7d2fe }
.admin-btn--ghost:hover { background: #eef2ff }

/* Page head */
.admin-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; flex-wrap: wrap
}
.admin-page-head__title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 }
.admin-page-head__sub { font-size: 13px; color: #6b7280; margin: 4px 0 0 }
.admin-page-head__actions { display: flex; gap: 8px; flex-shrink: 0 }

/* Tabs/chips */
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.admin-chip {
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  cursor: pointer; color: #4b5563;
  font-family: inherit
}
.admin-chip:hover { border-color: #c7d2fe }
.admin-chip.is-active { background: #1e293b; border-color: #1e293b; color: #fff }
.admin-chip__count { opacity: .65; margin-left: 4px; font-weight: 500 }

/* Impersonation banner (sticky top of buyer/seller pages when admin impersonates) */
.impersonate-banner {
  position: sticky; top: 0;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-bottom: 2px solid #f59e0b;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
  z-index: 100;
  font-size: 13px; color: #78350f
}
.impersonate-banner__icon { font-size: 18px }
.impersonate-banner__text { flex: 1 }
.impersonate-banner__text strong { color: #1c0a01; font-weight: 800 }
.impersonate-banner__exit {
  background: #1e1b4b; color: #fff; border: 0;
  padding: 6px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit
}
.impersonate-banner__exit:hover { background: #312e81 }

/* Layout helpers for admin */
.admin-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh }
.admin-app .main { background: #f8fafc }
@media (max-width: 980px) {
  .admin-app { grid-template-columns: 1fr }
  .admin-app .sidebar[data-sidebar="admin"] { display: none }
}

.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;
  gap: 10px;
  margin-bottom: 22px
}

.auth-role {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 15px 16px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 14px;
  align-items: center;
}

.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: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  grid-row: 1 / span 2;
  align-self: center;
}
.auth-role-icon--agent { background: linear-gradient(135deg, #0e7490, #0891b2) }

.auth-role-icon svg {
  width: 20px;
  height: 20px
}

.auth-role h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
  grid-column: 2;
}

.auth-role p {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
  margin: 0;
  grid-column: 2;
}

/* =========================================================================
   Agent self-onboarding wizard
   ========================================================================= */
.auth-brand--agent { background: linear-gradient(160deg, #0d3b46 0%, #0e7490 58%, #0891b2 100%) }
.auth-brand-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px }
.auth-brand-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.92) }
.auth-brand-list svg { width: 18px; height: 18px; color: #5eead4; flex-shrink: 0 }

.auth-req { color: #e11d48 }
.auth-optional { color: #9ca3af; font-weight: 400; font-size: 11.5px }

.auth-chips { display: flex; flex-wrap: wrap; gap: 8px }
.auth-chip {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #475569;
  background: #fff; border: 1.5px solid var(--line, #e2e8f0); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: all .12s ease;
}
.auth-chip:hover { border-color: #94d4e0; background: #f0fdff }
.auth-chip.is-on { background: #0e7490; border-color: #0e7490; color: #fff }

textarea#onb-bio,
.auth-form-field textarea {
  width: 100%; border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--ink, #0f172a);
  resize: vertical; transition: border-color .15s ease;
}
.auth-form-field textarea:focus { outline: none; border-color: #0e7490; box-shadow: 0 0 0 3px rgba(14,116,144,.12) }

.auth-tax { display: flex; flex-direction: column; gap: 8px }
.auth-tax__opt { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px; cursor: pointer; font-size: 13px; color: #334155; transition: border-color .15s ease, background .15s ease }
.auth-tax__opt:has(input:checked) { border-color: #0e7490; background: #ecfeff }
.auth-tax__opt input { accent-color: #0e7490; width: 16px; height: 16px }
.auth-tax__opt strong { color: #0f172a }

.auth-review { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; margin-bottom: 16px }
.auth-review__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; border-bottom: 1px solid #f1f5f9; font-size: 13px }
.auth-review__row:last-child { border-bottom: 0 }
.auth-review__row span { color: #64748b }
.auth-review__row strong { color: #0f172a; font-weight: 600; text-align: right }

.auth-next-note { display: flex; gap: 12px; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px }
.auth-next-note__ic { width: 34px; height: 34px; border-radius: 9px; background: #0e7490; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.auth-next-note__ic svg { width: 18px; height: 18px }
.auth-next-note strong { font-size: 13.5px; color: #0f172a }
.auth-next-note p { font-size: 12.5px; color: #475569; line-height: 1.5; margin: 3px 0 0 }
.auth-next-note p strong { color: #0e7490 }

.agent-done { text-align: center; padding: 8px 0 }
.agent-done__check { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0e7490, #10b981); color: #fff; display: flex; align-items: center; justify-content: center; margin: 6px auto 18px; box-shadow: 0 12px 28px rgba(14,116,144,.35) }
.agent-done__check svg { width: 30px; height: 30px }
.agent-done__status { display: inline-block; font-size: 12.5px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 6px 14px; margin: 8px 0 14px }
.agent-done__hint { font-size: 13px; color: #64748b; line-height: 1.55; max-width: 380px; margin: 0 auto 20px }
.agent-done .auth-submit { text-decoration: none; display: block }
.agent-done__secondary { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: #0e7490; text-decoration: none }
.agent-done__secondary:hover { text-decoration: underline }

.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
}

.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 }

/* ===== NOTIFICATIONS DROPDOWN (bell icon) ===== */
/* Bell with unread red dot */
.icon-btn { position: relative }
.icon-btn .dot,
.icon-btn .notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: #dc2626; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none
}
.icon-btn[data-no-unread] .dot,
.icon-btn[data-no-unread] .notif-dot { display: none }

/* Dropdown panel */
.notif-dd {
  position: fixed;
  top: 60px; right: 24px;
  width: 380px; max-width: calc(100vw - 24px);
  max-height: 70vh;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
  z-index: 250;
  display: none;
  flex-direction: column;
  overflow: hidden
}
.notif-dd.is-open { display: flex }
.notif-dd__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-shrink: 0
}
.notif-dd__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 }
.notif-dd__sub { font-size: 11.5px; color: #6b7280; margin: 2px 0 0 }
.notif-dd__mark {
  font-size: 12px; font-weight: 600; color: #4338ca;
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  font-family: inherit
}
.notif-dd__mark:hover { background: #eef2ff }
.notif-dd__body { flex: 1; overflow-y: auto; padding: 4px 0 }

.notif-dd__group-label {
  font-size: 10px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 18px 6px
}

.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none; color: inherit;
  position: relative;
  transition: background .15s ease
}
.notif-item:hover { background: #f8fafc }
.notif-item.is-unread { background: #f5f3ff }
.notif-item.is-unread:hover { background: #ede9fe }
.notif-item.is-unread::before {
  content: '';
  position: absolute; left: 7px; top: 18px;
  width: 6px; height: 6px;
  background: #4f46e5; border-radius: 50%
}
.notif-item__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px
}
.notif-item__icon--order { background: #dcfce7; color: #166534 }
.notif-item__icon--rfq { background: #eef2ff; color: #4338ca }
.notif-item__icon--msg { background: #cffafe; color: #155e75 }
.notif-item__icon--stock { background: #fef3c7; color: #854d0e }
.notif-item__icon--payment { background: #dbeafe; color: #1e40af }
.notif-item__icon--review { background: #fce7f3; color: #9d174d }
.notif-item__icon--sync { background: #fee2e2; color: #b91c1c }
.notif-item__main { flex: 1; min-width: 0 }
.notif-item__title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3 }
.notif-item__meta { font-size: 11.5px; color: #6b7280; margin-top: 2px; line-height: 1.4 }
.notif-item__time { font-size: 11px; color: #9ca3af; flex-shrink: 0; padding-top: 1px }

.notif-dd__foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line-2);
  flex-shrink: 0
}
.notif-dd__see-all {
  display: block; text-align: center;
  font-size: 12.5px; font-weight: 600; color: #4338ca;
  text-decoration: none;
  padding: 6px;
  border-radius: 7px
}
.notif-dd__see-all:hover { background: #eef2ff }

.notif-dd__empty {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 13px
}
.notif-dd__empty-icon { font-size: 32px; margin-bottom: 8px }

@media (max-width: 500px) {
  .notif-dd { right: 12px; left: 12px; width: auto }
}

/* ===== 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 .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 }

/* ==============================================================
   ===== DIRECT BUYER PORTAL (Dedicated Account · Emerald) =====
   Isolated namespace — no collisions with buyer/seller/rep/admin
   ============================================================== */

:root {
  --d-ink: #042f2e;
  --d-primary: #047857;
  --d-primary-deep: #065f46;
  --d-primary-soft: #d1fae5;
  --d-accent: #0d9488;
  --d-bg: #f0fdf4;
  --d-sidebar: linear-gradient(180deg, #042f2e 0%, #064e3b 100%);
  --d-card-border: #d1fae5;
}

.direct-app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--d-bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--d-ink);
}

/* ===== Direct Sidebar ===== */
.dsidebar {
  background: var(--d-sidebar);
  color: #d1fae5;
  display: flex; flex-direction: column;
  padding: 18px 14px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.dsidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 16px;
  border-bottom: 1px solid rgba(167, 243, 208, .15);
}
.dsidebar__brand-logo {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #10b981, #047857);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
}
.dsidebar__brand-text { line-height: 1.1 }
.dsidebar__brand-eyebrow {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: #6ee7b7; font-weight: 700;
}
.dsidebar__brand-name { font-size: 13.5px; color: #fff; font-weight: 700; margin-top: 2px }

.dnav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px }
.dnav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px;
  color: #a7f3d0; text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: all .12s ease;
}
.dnav-link:hover { background: rgba(167, 243, 208, .08); color: #ecfdf5 }
.dnav-link.active { background: rgba(16, 185, 129, .2); color: #fff; font-weight: 600 }
.dnav-link__ic { width: 17px; height: 17px; flex-shrink: 0 }
.dnav-link__badge {
  background: #ef4444; color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
  margin-left: auto;
}

.dsidebar__rep-card {
  margin-top: 16px; padding: 12px;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .25);
  border-radius: 10px;
}
.dsidebar__rep-eyebrow {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #6ee7b7; font-weight: 700; margin-bottom: 8px;
}
.dsidebar__rep-body {
  display: flex; align-items: center; gap: 10px;
}
.dsidebar__rep-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff; font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dsidebar__rep-info { flex: 1; min-width: 0 }
.dsidebar__rep-name { font-size: 12.5px; font-weight: 700; color: #fff }
.dsidebar__rep-title { font-size: 10.5px; color: #a7f3d0; margin-top: 1px }
.dsidebar__rep-actions {
  display: flex; gap: 6px; margin-top: 9px;
}
.dsidebar__rep-action {
  flex: 1; padding: 6px; border-radius: 6px;
  background: rgba(167, 243, 208, .1); color: #d1fae5;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none;
  transition: all .12s ease;
}
.dsidebar__rep-action:hover { background: rgba(167, 243, 208, .2) }

.dsidebar__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(167, 243, 208, .15) }
.dsidebar__user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px;
  color: #d1fae5; text-decoration: none;
}
.dsidebar__user:hover { background: rgba(167, 243, 208, .08) }
.dsidebar__user-avatar {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, #6ee7b7, #34d399); color: #042f2e;
  font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dsidebar__user-info { flex: 1; min-width: 0 }
.dsidebar__user-name { font-size: 12.5px; font-weight: 700; color: #fff }
.dsidebar__user-meta { font-size: 10.5px; color: #6ee7b7; margin-top: 1px }

.dsidebar__exit {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(167, 243, 208, .08);
  color: #a7f3d0; border-radius: 8px;
  font-size: 11.5px; text-decoration: none; display: block; text-align: center;
  border: 1px dashed rgba(167, 243, 208, .25);
}
.dsidebar__exit:hover { background: rgba(167, 243, 208, .14); color: #ecfdf5 }

/* ===== Direct Main Content ===== */
.dmain { display: flex; flex-direction: column; min-height: 100vh }
.dtopbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 28px; background: #fff;
  border-bottom: 1px solid var(--d-card-border);
}
.dtopbar__menu {
  display: none; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: 8px; cursor: pointer;
}
.dtopbar__title { flex: 1 }
.dtopbar__title h1 { margin: 0; font-size: 22px; color: var(--d-ink); font-weight: 700 }
.dtopbar__title p { margin: 2px 0 0; font-size: 12.5px; color: #475569 }
.dtopbar__notif {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--d-bg); border: 1px solid var(--d-card-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--d-primary);
}

.direct-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--d-primary); color: #fff;
  padding: 9px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
  transition: background .12s ease;
}
.direct-cta:hover { background: var(--d-primary-deep) }
.direct-cta svg { width: 14px; height: 14px }

.direct-cta--ghost {
  background: #fff; color: var(--d-primary);
  border: 1px solid var(--d-card-border);
}
.direct-cta--ghost:hover { background: var(--d-bg) }

.dcontent { padding: 24px 32px; max-width: 1640px; width: 100%; margin: 0 auto }
/* Detail / form / document pages read better at a comfortable centered width
   than full-bleed (giant product gallery, over-wide forms, long text lines). */
.direct-app[data-screen-label="Direct Product Detail"] .dcontent,
.direct-app[data-screen-label="Direct Checkout"] .dcontent,
.direct-app[data-screen-label="Direct Contract"] .dcontent,
.direct-app[data-screen-label="Direct Order Detail"] .dcontent { max-width: 1280px }

.dcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #475569;
  margin-bottom: 16px;
}
.dcrumb a { color: var(--d-primary); text-decoration: none }
.dcrumb a:hover { text-decoration: underline }

/* ===== Hero / Welcome Card ===== */
.direct-hero {
  background: linear-gradient(135deg, #064e3b, #047857);
  color: #fff; border-radius: 14px;
  padding: 24px 26px; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.direct-hero::before {
  content: ''; position: absolute;
  right: -40px; top: -40px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 231, 183, .25), transparent 70%);
  pointer-events: none;
}
.direct-hero__eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: #6ee7b7; font-weight: 700;
}
.direct-hero__title { font-size: 24px; font-weight: 700; margin: 6px 0 4px }
.direct-hero__sub { font-size: 13px; color: #a7f3d0 }
.direct-hero__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 22px;
}
.direct-hero__stat-label { font-size: 10.5px; color: #6ee7b7; text-transform: uppercase; letter-spacing: .06em }
.direct-hero__stat-value { font-size: 22px; font-weight: 700; margin-top: 2px }
.direct-hero__stat-sub { font-size: 11.5px; color: #a7f3d0; margin-top: 2px }
.direct-hero__actions { display: flex; gap: 10px; margin-top: 22px }
.direct-hero__actions .direct-cta {
  background: #fff; color: var(--d-primary-deep);
}
.direct-hero__actions .direct-cta--ghost {
  background: rgba(167, 243, 208, .12); color: #fff;
  border: 1px solid rgba(167, 243, 208, .3);
}
.direct-hero__actions .direct-cta--ghost:hover { background: rgba(167, 243, 208, .2) }

/* ===== Contract progress bar ===== */
.contract-progress {
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; padding: 16px;
}
.contract-progress__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.contract-progress__title { font-size: 13px; font-weight: 700; color: var(--d-ink) }
.contract-progress__tier {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.contract-progress__bar {
  height: 10px; background: #d1fae5; border-radius: 999px; overflow: hidden;
}
.contract-progress__fill {
  height: 100%; background: linear-gradient(90deg, var(--d-primary), var(--d-accent));
  border-radius: 999px;
}
.contract-progress__meta {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #475569; margin-top: 8px;
}

/* ===== Direct cards & grids ===== */
.direct-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
.direct-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.direct-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }

.direct-card {
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; padding: 16px;
}
.direct-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.direct-card__title { font-size: 13px; font-weight: 700; color: var(--d-ink) }
.direct-card__link { font-size: 12px; color: var(--d-primary); text-decoration: none; font-weight: 600 }
.direct-card__link:hover { text-decoration: underline }

.direct-kpi {
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; padding: 16px;
}
.direct-kpi__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: #64748b; font-weight: 700;
}
.direct-kpi__value { font-size: 26px; font-weight: 700; color: var(--d-ink); margin: 4px 0 }
.direct-kpi__sub { font-size: 11.5px; color: #475569 }
.direct-kpi--accent { border-left: 3px solid var(--d-primary); background: var(--d-bg) }

/* ===== Catalog cards (contract) ===== */
.dcat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.dcat-card {
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dcat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(4, 120, 87, .08) }
.dcat-card__media {
  height: 130px; display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.dcat-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.dcat-card__name { font-size: 13.5px; font-weight: 700; color: var(--d-ink); line-height: 1.3 }
.dcat-card__sku { font-size: 11px; color: #64748b }
.dcat-card__price {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--d-bg); border-radius: 7px; padding: 8px 10px;
}
.dcat-card__price-label { font-size: 10.5px; color: var(--d-primary-deep); text-transform: uppercase; font-weight: 700 }
.dcat-card__price-value { font-size: 16px; font-weight: 700; color: var(--d-primary-deep) }
.dcat-card__price-strike { font-size: 11.5px; color: #94a3b8; text-decoration: line-through; margin-left: 6px }
.dcat-card__actions { display: flex; gap: 6px; margin-top: auto }
.dcat-card__actions .direct-cta { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12px }

/* ===== Tables (Orders, Contract amendments, etc) ===== */
.dtable-wrap {
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; overflow: hidden;
}
.dtable { width: 100%; border-collapse: collapse; font-size: 13px }
.dtable thead th {
  text-align: left; padding: 11px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
  background: var(--d-bg); border-bottom: 1px solid var(--d-card-border);
}
.dtable tbody td {
  padding: 12px 14px; border-bottom: 1px solid #ecfdf5;
  color: #334155; vertical-align: middle;
}
.dtable tbody tr:last-child td { border-bottom: 0 }
.dtable tbody tr:hover { background: var(--d-bg) }

.dstatus {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.dstatus--prod { background: #fef3c7; color: #92400e }
.dstatus--ship { background: #dbeafe; color: #1e40af }
.dstatus--deliv { background: #dcfce7; color: #166534 }
.dstatus--paid { background: #ccfbf1; color: #115e59 }
.dstatus--conf { background: #ede9fe; color: #5b21b6 }

/* ===== Quantity steppers, line items ===== */
.dqty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--d-card-border); border-radius: 8px;
  overflow: hidden;
}
.dqty button {
  background: var(--d-bg); border: 0; color: var(--d-primary-deep);
  width: 30px; height: 32px; cursor: pointer; font-weight: 700;
  font-family: inherit;
}
.dqty button:hover { background: var(--d-primary-soft) }
.dqty input {
  width: 50px; height: 32px; border: 0; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--d-ink);
  -moz-appearance: textfield;
}
.dqty input::-webkit-outer-spin-button,
.dqty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* ===== Contract page specifics ===== */
.contract-tier-card {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff; border-radius: 12px; padding: 18px;
}
.contract-tier-card__eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: #fef3c7; font-weight: 700;
}
.contract-tier-card__tier { font-size: 28px; font-weight: 700; margin: 4px 0 }
.contract-tier-card__sub { font-size: 12px; color: #fef3c7 }

.dtimeline { display: flex; flex-direction: column; gap: 12px; margin-top: 8px }
.dtimeline__item {
  display: flex; gap: 12px;
  padding-left: 14px; position: relative;
}
.dtimeline__item::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--d-primary);
  box-shadow: 0 0 0 3px var(--d-primary-soft);
}
.dtimeline__time { font-size: 11px; color: #94a3b8; min-width: 80px }
.dtimeline__body { flex: 1; font-size: 12.5px; color: #334155; line-height: 1.5 }

/* ===== Cart / Checkout specifics ===== */
.direct-banner {
  background: linear-gradient(90deg, var(--d-primary-soft), var(--d-bg));
  border: 1px solid var(--d-card-border); border-left: 3px solid var(--d-primary);
  border-radius: 10px; padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 16px; font-size: 12.5px; color: var(--d-primary-deep);
}
.direct-banner strong { font-weight: 700 }
.direct-banner__icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--d-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
}

.dform-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px }
.dform-field label { font-size: 11.5px; color: #475569; font-weight: 600 }
.dform-field input,
.dform-field select,
.dform-field textarea {
  border: 1px solid var(--d-card-border); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: var(--d-ink); font-family: inherit;
  background: #fff;
}
.dform-field input:focus,
.dform-field select:focus,
.dform-field textarea:focus { outline: none; border-color: var(--d-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, .12) }

.dpayopt {
  display: flex; gap: 12px; padding: 12px;
  border: 1px solid var(--d-card-border); border-radius: 10px;
  cursor: pointer; background: #fff;
}
.dpayopt.is-active { border-color: var(--d-primary); background: var(--d-bg); box-shadow: 0 0 0 2px rgba(16, 185, 129, .15) }
.dpayopt input[type=radio] { margin-top: 2px }
.dpayopt__title { font-size: 13px; font-weight: 700; color: var(--d-ink) }
.dpayopt__sub { font-size: 11.5px; color: #475569; margin-top: 2px }

/* ===== Stepper ===== */
.dstepper {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 18px;
  gap: 4px;
}
.dstep {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  font-size: 11.5px; color: #94a3b8; text-align: center;
}
.dstep__dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e2e8f0; color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-bottom: 5px;
}
.dstep.is-done .dstep__dot { background: var(--d-primary); color: #fff }
.dstep.is-active .dstep__dot { background: var(--d-accent); color: #fff; box-shadow: 0 0 0 4px rgba(13, 148, 136, .2) }
.dstep.is-done, .dstep.is-active { color: var(--d-ink); font-weight: 600 }
.dstepper__sep { flex: 1; height: 2px; background: #e2e8f0; margin: 0 -8px -22px }
.dstepper__sep.is-done { background: var(--d-primary) }

/* ===== Messages ===== */
.dmsg-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; height: calc(100vh - 220px); min-height: 480px }
.dmsg-card { background: #fff; border: 1px solid var(--d-card-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden }
.dmsg-context {
  padding: 14px 18px; background: var(--d-bg);
  border-bottom: 1px solid var(--d-card-border);
  display: flex; align-items: center; gap: 12px;
}
.dmsg-context__avatar {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #0891b2, #0e7490); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.dmsg-context__name { font-size: 13.5px; font-weight: 700; color: var(--d-ink) }
.dmsg-context__sub { font-size: 11.5px; color: #475569; margin-top: 1px }
.dmsg-thread { flex: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px }
.dmsg { display: flex; gap: 8px; max-width: 70% }
.dmsg__bubble {
  padding: 9px 13px; border-radius: 13px;
  font-size: 13px; line-height: 1.45; color: #334155;
  background: var(--d-bg); border: 1px solid var(--d-card-border);
}
.dmsg__time { font-size: 10.5px; color: #94a3b8; margin-top: 3px }
.dmsg--mine { align-self: flex-end }
.dmsg--mine .dmsg__bubble { background: var(--d-primary); color: #fff; border-color: var(--d-primary) }
.dmsg-compose { padding: 12px 14px; border-top: 1px solid var(--d-card-border); display: flex; gap: 8px; align-items: center }
.dmsg-compose input {
  flex: 1; border: 1px solid var(--d-card-border); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: var(--d-ink); font-family: inherit;
}
.dmsg-compose input:focus { outline: none; border-color: var(--d-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, .12) }

/* ===== Mobile ===== */
@media (max-width: 900px) {
  .direct-app { grid-template-columns: 1fr }
  .dsidebar { position: fixed; left: -260px; top: 0; bottom: 0; width: 248px; z-index: 100; transition: left .2s ease }
  .dsidebar.is-open { left: 0 }
  .dtopbar__menu { display: inline-flex }
  .direct-hero__row { grid-template-columns: repeat(2, 1fr) }
  .direct-grid-2, .direct-grid-3, .direct-grid-4 { grid-template-columns: 1fr }
  .dcontent { padding: 16px }
  .dtopbar { padding: 14px 16px }
}
@media (max-width: 600px) {
  .dtable thead { display: none }
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100% }
  .dtable tbody tr { padding: 12px 4px; border-bottom: 1px solid var(--d-card-border) }
  .dtable tbody td { border-bottom: 0; padding: 4px 14px }
}

/* === Direct portal · Login demo card === */
.demo-account[data-demo-login="direct"] {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
}
.demo-account[data-demo-login="direct"] .demo-account__icon {
  background: linear-gradient(135deg, #10b981, #047857);
}

/* ==============================================================
   ===== DIRECT · QUICK ORDER (Wholesale catalog layout) =====
   Pattern from Sunday Golf existing portal, supercharged with
   contract pricing intelligence and rep context.
   ============================================================== */

/* Sunday Golf-style supplier top bar */
.qorder-supbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 22px; background: #fff;
  border-bottom: 1px solid var(--d-card-border);
  position: sticky; top: 0; z-index: 50;
}
.qorder-supbar__brand {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Inter', system-ui;
}
.qorder-supbar__brand-mark {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #10b981, #047857);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
}
.qorder-supbar__brand-name { font-size: 18px; font-weight: 800; color: var(--d-ink); line-height: 1.1 }
.qorder-supbar__brand-sub { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .08em }

.qorder-supbar__search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 9px 14px; background: #fff;
}
.qorder-supbar__search:focus-within { border-color: var(--d-primary); box-shadow: 0 0 0 3px rgba(16,185,129,.1) }
.qorder-supbar__search input { flex: 1; border: 0; outline: 0; font-size: 13px; color: var(--d-ink); background: transparent; font-family: inherit }
.qorder-supbar__search svg { width: 16px; height: 16px; color: #64748b }

.qorder-supbar__selector {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 999px;
  font-size: 12.5px; color: #334155; font-weight: 600;
  cursor: pointer;
}
.qorder-supbar__cart {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: var(--d-ink); color: #fff;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.qorder-supbar__cart strong { color: #6ee7b7; font-weight: 700 }
.qorder-supbar__add {
  background: var(--d-primary-soft); color: var(--d-primary-deep);
  border: 0; border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.qorder-supbar__add:hover { background: #a7f3d0 }

/* Category tab bar */
.qorder-catbar {
  display: flex; gap: 4px; align-items: center;
  padding: 10px 22px; background: #fff;
  border-bottom: 1px solid var(--d-card-border);
  overflow-x: auto; position: sticky; top: 60px; z-index: 49;
  scrollbar-width: thin;
}
.qorder-catbar::-webkit-scrollbar { height: 4px }
.qorder-catbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px }
.qorder-catbar__btn {
  background: transparent; border: 0; color: #64748b;
  padding: 7px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all .12s ease;
}
.qorder-catbar__btn:hover { background: #f0fdf4; color: var(--d-primary-deep) }
.qorder-catbar__btn.is-active { background: var(--d-ink); color: #fff }
.qorder-catbar__more {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; color: #475569;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* Contract status strip — replaces marketing banner */
.qorder-strip {
  background: linear-gradient(90deg, #064e3b, #047857);
  color: #fff; padding: 14px 22px;
  display: grid; grid-template-columns: 1fr auto auto auto auto auto;
  gap: 20px; align-items: center;
  font-family: 'Inter', system-ui;
}
.qorder-strip__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #d1fae5; font-weight: 600;
}
.qorder-strip__title strong { color: #fff; font-weight: 700 }
.qorder-strip__title-mark {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
}
.qorder-strip__stat { font-size: 12px; color: #a7f3d0; line-height: 1.3 }
.qorder-strip__stat strong { color: #fff; font-size: 14px; font-weight: 700; display: block }
.qorder-strip__rep {
  display: flex; align-items: center; gap: 8px;
  background: rgba(167, 243, 208, .14);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; color: #ecfdf5;
}
.qorder-strip__rep-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 0 3px rgba(110,231,183,.3); animation: qorderPulse 2s ease-in-out infinite }
@keyframes qorderPulse { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }

/* Quick actions row */
.qorder-actions-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 16px 22px; background: #f8fafc;
  border-bottom: 1px solid var(--d-card-border);
}
.qorder-action-card {
  display: flex; gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 10px; padding: 12px;
  cursor: pointer; transition: all .15s ease;
  text-decoration: none; color: inherit;
}
.qorder-action-card:hover { border-color: var(--d-primary); background: #ecfdf5; transform: translateY(-1px) }
.qorder-action-card__ic {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(135deg, var(--d-primary-soft), #a7f3d0);
  color: var(--d-primary-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.qorder-action-card__title { font-size: 12.5px; font-weight: 700; color: var(--d-ink); line-height: 1.2 }
.qorder-action-card__sub { font-size: 10.5px; color: #64748b; margin-top: 2px }

/* Toolbar above sections */
.qorder-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 0; gap: 12px; flex-wrap: wrap;
}
.qorder-toolbar__left { font-size: 12.5px; color: #475569 }
.qorder-toolbar__right { display: flex; align-items: center; gap: 10px }
.qorder-toolbar__sort {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--d-card-border);
  padding: 6px 12px 6px 14px; border-radius: 8px;
  font-size: 12.5px; color: var(--d-ink); font-weight: 600;
  cursor: pointer; font-family: inherit;
}

/* Category section (LOMA / LOMA XL / etc.) */
.qorder-section {
  background: #fff; border: 1px solid var(--d-card-border);
  border-radius: 12px; margin: 14px 22px; overflow: hidden;
}
.qorder-section__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: #f8fafc;
  border-bottom: 1px solid var(--d-card-border);
  cursor: pointer;
}
.qorder-section__head h3 {
  margin: 0; font-size: 15px; font-weight: 800; color: var(--d-ink);
  display: flex; align-items: center; gap: 12px;
}
.qorder-section__head h3 span {
  font-weight: 500; color: #64748b; font-size: 13px;
  border-left: 1px solid #cbd5e1; padding-left: 12px;
}
.qorder-section__count {
  display: inline-block; background: #d1fae5; color: #047857;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; margin-left: 8px;
}
.qorder-section__toggle {
  background: transparent; border: 0; color: var(--d-primary);
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  margin-left: auto;
}
.qorder-section__body { padding: 18px; display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start }
.qorder-section.is-hidden .qorder-section__body { display: none }
.qorder-section__hero {
  border-radius: 10px; background: linear-gradient(180deg, #fafafa, #f1f5f9);
  padding: 16px; text-align: center;
}
.qorder-section__hero-img {
  width: 200px; height: 200px; margin: 0 auto;
  border-radius: 12px; background: #fff; border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center; color: #64748b;
}
.qorder-section__hero-title { font-size: 13px; font-weight: 700; color: var(--d-ink); margin-top: 10px }
.qorder-section__hero-meta { font-size: 11px; color: #64748b; line-height: 1.5; margin-top: 4px }
.qorder-section__hero-meta strong { color: var(--d-primary-deep); font-weight: 700 }

/* Variant grid */
.qorder-variant-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.qorder-variant {
  border: 1px solid var(--d-card-border); border-radius: 10px;
  padding: 11px; display: flex; flex-direction: column; gap: 7px;
  background: #fff; transition: border-color .15s ease;
}
.qorder-variant:hover { border-color: var(--d-primary) }
.qorder-variant__thumb {
  width: 100%; aspect-ratio: 1.2/1; border-radius: 7px;
  background: #f8fafc; display: flex; align-items: center; justify-content: center;
  color: #64748b;
  background-size: cover; background-position: center;
}
.qorder-variant__row1 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap }
.qorder-variant__name { font-size: 12px; font-weight: 700; color: var(--d-ink); line-height: 1.2 }
.qorder-variant__sku {
  font-size: 10px; font-family: ui-monospace, Menlo, monospace;
  background: #f1f5f9; color: #475569;
  padding: 1px 6px; border-radius: 4px;
}
.qorder-variant__pricing {
  display: flex; align-items: baseline; gap: 6px;
  background: #ecfdf5; padding: 5px 8px; border-radius: 6px;
}
.qorder-variant__price { font-size: 14px; font-weight: 800; color: var(--d-primary-deep) }
.qorder-variant__list { font-size: 11px; color: #94a3b8; text-decoration: line-through }
.qorder-variant__save {
  margin-left: auto; background: #047857; color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  letter-spacing: .03em;
}
.qorder-variant__meta {
  display: flex; gap: 7px; flex-wrap: wrap; font-size: 10.5px;
}
.qorder-variant__stock { color: #047857; font-weight: 600 }
.qorder-variant__stock--low { color: #b45309 }
.qorder-variant__stock--mto { color: #5b21b6 }
.qorder-variant__last {
  background: #fff7ed; color: #9a3412;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.qorder-variant__embr {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #334155; cursor: pointer;
  padding: 4px 0;
}
.qorder-variant__embr input { width: 13px; height: 13px; accent-color: var(--d-primary) }
.qorder-variant__embr-cost { color: #94a3b8; font-size: 10px }
.qorder-variant__embr-detail {
  display: none; padding: 8px; background: #ecfdf5; border-radius: 7px;
  font-size: 10.5px; color: #047857;
  margin-top: -2px; border: 1px dashed #6ee7b7;
}
.qorder-variant__embr.is-on + .qorder-variant__embr-detail { display: block }
.qorder-variant__embr-detail strong { color: #064e3b }
.qorder-variant__qty {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
}
.qorder-variant__qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden;
  flex: 1;
}
.qorder-variant__qty-stepper button {
  width: 28px; height: 28px; background: #f8fafc; border: 0; color: #334155;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.qorder-variant__qty-stepper button:hover { background: var(--d-primary-soft) }
.qorder-variant__qty-stepper input {
  flex: 1; min-width: 0; height: 28px; border: 0; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--d-ink);
  -moz-appearance: textfield; background: #fff;
}
.qorder-variant__qty-stepper input::-webkit-outer-spin-button,
.qorder-variant__qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.qorder-variant__reorder {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent; border: 1px solid var(--d-primary);
  color: var(--d-primary-deep);
  font-size: 10.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  padding: 5px 7px; border-radius: 6px; white-space: nowrap;
}
.qorder-variant__reorder:hover { background: var(--d-primary-soft) }

/* List view (alternative) */
.qorder-variant-list {
  display: flex; flex-direction: column; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--d-card-border);
}
.qorder-variant-list .qorder-vrow {
  display: grid;
  grid-template-columns: 56px 1fr 80px 110px 1fr 120px;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--d-card-border);
  font-size: 12.5px;
}
.qorder-variant-list .qorder-vrow:first-child { border-top: 0 }
.qorder-variant-list .qorder-vrow:hover { background: #f8fafc }
.qorder-vrow__thumb { width: 48px; height: 48px; border-radius: 7px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #64748b }
.qorder-vrow__name strong { color: var(--d-ink); font-weight: 700 }
.qorder-vrow__price strong { color: var(--d-primary-deep); font-size: 14px; font-weight: 800 }
.qorder-vrow__price small { color: #94a3b8; text-decoration: line-through; margin-left: 5px }
.qorder-vrow__stock { font-size: 11px; color: #047857; font-weight: 600 }
.qorder-vrow__embr {
  display: flex; align-items: center; gap: 5px; font-size: 11px; color: #334155; cursor: pointer;
}
.qorder-vrow__embr input { accent-color: var(--d-primary) }
.qorder-vrow__qty {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden;
}
.qorder-vrow__qty button { width: 26px; height: 28px; background: #f8fafc; border: 0; font-weight: 700; cursor: pointer; font-family: inherit }
.qorder-vrow__qty input { width: 38px; height: 28px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield }
.qorder-vrow__qty input::-webkit-outer-spin-button, .qorder-vrow__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* Sticky bottom summary bar */
.qorder-floater {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--d-ink); color: #fff;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(4, 47, 46, .35);
  font-family: 'Inter', system-ui; z-index: 60;
}
.qorder-floater__count { font-size: 12.5px; color: #a7f3d0 }
.qorder-floater__count strong { color: #fff; font-weight: 800; font-size: 14px }
.qorder-floater__total { font-size: 16px; font-weight: 800; color: #6ee7b7 }
.qorder-floater__save { font-size: 11px; color: #a7f3d0 }
.qorder-floater__cta {
  background: linear-gradient(135deg, #10b981, #047857); color: #fff;
  border: 0; padding: 9px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.qorder-floater__cta:hover { background: linear-gradient(135deg, #0e9971, #036141) }

@media (max-width: 900px) {
  .qorder-supbar { flex-wrap: wrap; padding: 12px 16px }
  .qorder-supbar__search { order: 4; width: 100%; max-width: none; flex: none }
  .qorder-strip { grid-template-columns: 1fr 1fr; padding: 12px 16px }
  .qorder-actions-row { grid-template-columns: 1fr 1fr; padding: 14px 16px }
  .qorder-section__body { grid-template-columns: 1fr }
  .qorder-section__hero-img { width: 140px; height: 140px }
  .qorder-section { margin: 12px 16px }
  .qorder-floater { left: 12px; right: 12px; transform: none; flex-wrap: wrap; gap: 10px }
  .qorder-variant-list .qorder-vrow {
    grid-template-columns: 48px 1fr 1fr; gap: 8px;
  }
  .qorder-vrow__embr, .qorder-vrow__stock { display: none }
}

/* ==============================================================
   ===== DIRECT PORTAL · SUNDAY GOLF BRAND COLOR OVERRIDE =====
   Replaces emerald palette with Sunday Golf's deep teal/petrol
   + warm cream accents (from their existing storefront).
   Scoped to .direct-app so other portals keep their own theme.
   ============================================================== */

/* Body background — match the cream/teal scheme even outside .direct-app */
html:has(.direct-app), body:has(.direct-app) { background: #f5efe2 }

.direct-app {
  /* Sunday Golf brand palette */
  --d-ink: #0d2c34;
  --d-primary: #1d4f5e;
  --d-primary-deep: #133e4c;
  --d-primary-soft: #cee0e4;
  --d-accent: #3d717e;
  --d-bg: #f5efe2;                                              /* warm cream */
  --d-sidebar: linear-gradient(180deg, #0f2c34 0%, #1d4f5e 100%);
  --d-card-border: #dde6e8;
  /* Sunday Golf accent tokens */
  --sg-cream: #f5efe2;
  --sg-cream-deep: #ede0c9;
  --sg-teal-mist: #cee0e4;
  --sg-teal-light: #9ec2cc;
  --sg-teal-mid: #3d717e;
  background: #f5efe2;
}

/* ===== Sidebar — light teal-mist text vs old emerald ===== */
.direct-app .dsidebar { color: #cee0e4 }
.direct-app .dsidebar__brand { border-bottom-color: rgba(206, 224, 228, .18) }
.direct-app .dsidebar__brand-mark {
  background: linear-gradient(135deg, #3d717e, #1d4f5e);
}
.direct-app .dsidebar__brand-eyebrow { color: #9ec2cc }
.direct-app .dnav-link { color: #bcd4d9 }
.direct-app .dnav-link:hover { background: rgba(206, 224, 228, .1); color: #fff }
.direct-app .dnav-link.active { background: rgba(110, 165, 178, .22); color: #fff }
.direct-app .dsidebar__rep-card {
  background: rgba(110, 165, 178, .14);
  border-color: rgba(110, 165, 178, .28);
}
.direct-app .dsidebar__rep-eyebrow { color: #9ec2cc }
.direct-app .dsidebar__rep-title { color: #bcd4d9 }
.direct-app .dsidebar__rep-action {
  background: rgba(206, 224, 228, .1); color: #cee0e4;
}
.direct-app .dsidebar__rep-action:hover { background: rgba(206, 224, 228, .22) }
.direct-app .dsidebar__user:hover { background: rgba(206, 224, 228, .08) }
.direct-app .dsidebar__user-meta { color: #9ec2cc }
.direct-app .dsidebar__foot { border-top-color: rgba(206, 224, 228, .18) }
.direct-app .dsidebar__exit {
  background: rgba(206, 224, 228, .08); color: #bcd4d9;
  border: 1px dashed rgba(206, 224, 228, .28);
}
.direct-app .dsidebar__exit:hover { background: rgba(206, 224, 228, .15); color: #fff }
.direct-app .dsidebar__user-avatar {
  background: linear-gradient(135deg, #cee0e4, #9ec2cc); color: #0d2c34;
}

/* ===== Hero — deep SG teal gradient ===== */
.direct-app .direct-hero {
  background: linear-gradient(135deg, #133e4c 0%, #1d4f5e 100%);
}
.direct-app .direct-hero::before {
  background: radial-gradient(circle, rgba(245, 239, 226, .18), transparent 70%);
}
.direct-app .direct-hero__eyebrow { color: #cee0e4 }
.direct-app .direct-hero__sub { color: #bcd4d9 }
.direct-app .direct-hero__stat-label { color: #9ec2cc }
.direct-app .direct-hero__stat-sub { color: #bcd4d9 }
.direct-app .direct-hero__actions .direct-cta { color: #133e4c; background: #f5efe2 }
.direct-app .direct-hero__actions .direct-cta--ghost {
  background: rgba(245, 239, 226, .12); color: #fff;
  border-color: rgba(245, 239, 226, .35);
}
.direct-app .direct-hero__actions .direct-cta--ghost:hover { background: rgba(245, 239, 226, .2) }

/* ===== Direct cards & CTA refinements ===== */
.direct-app .dtopbar { background: #fff; border-bottom-color: #dde6e8 }
.direct-app .dtopbar__notif { background: #f5efe2; border-color: #dde6e8; color: #1d4f5e }
.direct-app .direct-cta { background: #1d4f5e }
.direct-app .direct-cta:hover { background: #133e4c }
.direct-app .direct-cta--ghost { background: #fff; color: #1d4f5e; border-color: #dde6e8 }
.direct-app .direct-cta--ghost:hover { background: #f5efe2 }
.direct-app .direct-banner {
  background: linear-gradient(90deg, #cee0e4 0%, #f5efe2 100%);
  border-color: #dde6e8; border-left-color: #1d4f5e;
  color: #133e4c;
}
.direct-app .direct-banner__icon { background: #1d4f5e }
.direct-app .direct-card { border-color: #dde6e8 }
.direct-app .direct-card__title { color: #0d2c34 }
.direct-app .direct-card__link { color: #1d4f5e }
.direct-app .direct-kpi { border-color: #dde6e8 }
.direct-app .direct-kpi__value { color: #0d2c34 }
.direct-app .direct-kpi--accent {
  border-left: 3px solid #1d4f5e; background: #f5efe2;
}

/* Tables */
.direct-app .dtable-wrap { border-color: #dde6e8 }
.direct-app .dtable thead th { background: #f5efe2; border-bottom-color: #dde6e8 }
.direct-app .dtable tbody td { border-bottom-color: #ece4d4 }
.direct-app .dtable tbody tr:hover { background: #faf5e9 }

/* Status pills — keep semantic colors, but tint the "paid" one with SG palette */
.direct-app .dstatus--paid { background: #d8e6e9; color: #133e4c }

/* Form fields */
.direct-app .dform-field input,
.direct-app .dform-field select,
.direct-app .dform-field textarea { border-color: #dde6e8; color: #0d2c34 }
.direct-app .dform-field input:focus,
.direct-app .dform-field select:focus,
.direct-app .dform-field textarea:focus {
  border-color: #1d4f5e; box-shadow: 0 0 0 3px rgba(29, 79, 94, .12);
}
.direct-app .dpayopt { border-color: #dde6e8 }
.direct-app .dpayopt.is-active {
  border-color: #1d4f5e; background: #f5efe2;
  box-shadow: 0 0 0 2px rgba(29, 79, 94, .15);
}

/* Stepper */
.direct-app .dstep.is-done .dstep__dot { background: #1d4f5e }
.direct-app .dstep.is-active .dstep__dot {
  background: #3d717e; box-shadow: 0 0 0 4px rgba(61, 113, 126, .2);
}
.direct-app .dstepper__sep.is-done { background: #1d4f5e }

/* Catalog cards — Dashboard / Catalog */
.direct-app .dcat-card { border-color: #dde6e8 }
.direct-app .dcat-card__name { color: #0d2c34 }
.direct-app .dcat-card__price { background: #f5efe2 }
.direct-app .dcat-card__price-label,
.direct-app .dcat-card__price-value { color: #133e4c }

/* Contract progress */
.direct-app .contract-progress { border-color: #dde6e8 }
.direct-app .contract-progress__bar { background: #cee0e4 }
.direct-app .contract-progress__fill {
  background: linear-gradient(90deg, #1d4f5e, #3d717e);
}

/* Messages */
.direct-app .dmsg-card { border-color: #dde6e8 }
.direct-app .dmsg-context { background: #f5efe2; border-bottom-color: #dde6e8 }
.direct-app .dmsg__bubble { background: #f5efe2; border-color: #dde6e8 }
.direct-app .dmsg--mine .dmsg__bubble { background: #1d4f5e; border-color: #1d4f5e }
.direct-app .dmsg-compose input:focus {
  border-color: #1d4f5e; box-shadow: 0 0 0 3px rgba(29, 79, 94, .12);
}

/* Timeline */
.direct-app .dtimeline__item::before {
  background: #1d4f5e; box-shadow: 0 0 0 3px #cee0e4;
}

/* Tier card — keep Gold gradient for the trophy feel */
/* Crumb */
.direct-app .dcrumb a { color: #1d4f5e }

/* ===== Quick Order page — Sunday Golf color details ===== */
.direct-app .qorder-supbar { border-bottom-color: #dde6e8 }
.direct-app .qorder-supbar__brand-mark {
  background: linear-gradient(135deg, #3d717e, #1d4f5e);
}
.direct-app .qorder-supbar__brand-name { color: #0d2c34 }
.direct-app .qorder-supbar__brand-sub { color: #5f7780 }
.direct-app .qorder-supbar__search { border-color: #cbd5e1 }
.direct-app .qorder-supbar__search:focus-within {
  border-color: #1d4f5e; box-shadow: 0 0 0 3px rgba(29, 79, 94, .12);
}
.direct-app .qorder-supbar__selector { background: #f5efe2; border-color: #dde6e8; color: #133e4c }
.direct-app .qorder-supbar__cart { background: #0d2c34 }
.direct-app .qorder-supbar__cart strong { color: #9ec2cc }
.direct-app .qorder-supbar__add {
  background: #f5efe2; color: #133e4c;
}
.direct-app .qorder-supbar__add:hover { background: #ede0c9 }

.direct-app .qorder-catbar { background: #fff; border-bottom-color: #dde6e8 }
.direct-app .qorder-catbar__btn { color: #5f7780 }
.direct-app .qorder-catbar__btn:hover { background: #f5efe2; color: #133e4c }
.direct-app .qorder-catbar__btn.is-active { background: #0d2c34; color: #fff }
.direct-app .qorder-catbar__more { color: #5f7780 }

.direct-app .qorder-strip {
  background: linear-gradient(90deg, #0d2c34 0%, #1d4f5e 100%);
}
.direct-app .qorder-strip__title { color: #cee0e4 }
.direct-app .qorder-strip__stat { color: #9ec2cc }
.direct-app .qorder-strip__rep {
  background: rgba(206, 224, 228, .14); color: #f5efe2;
}
.direct-app .qorder-strip__rep-dot {
  background: #9ec2cc; box-shadow: 0 0 0 3px rgba(158, 194, 204, .3);
}

.direct-app .qorder-actions-row { background: #faf5e9; border-bottom-color: #dde6e8 }
.direct-app .qorder-action-card { border-color: #dde6e8 }
.direct-app .qorder-action-card:hover { border-color: #1d4f5e; background: #f5efe2 }
.direct-app .qorder-action-card__ic {
  background: linear-gradient(135deg, #cee0e4, #9ec2cc); color: #133e4c;
}
.direct-app .qorder-action-card__title { color: #0d2c34 }

.direct-app .qorder-toolbar__sort { border-color: #dde6e8; color: #0d2c34 }
.direct-app .qorder-toolbar__left strong { color: #0d2c34 }

.direct-app .qorder-section { border-color: #dde6e8 }
.direct-app .qorder-section__head { background: #faf5e9; border-bottom-color: #dde6e8 }
.direct-app .qorder-section__head h3 { color: #0d2c34 }
.direct-app .qorder-section__head h3 span { color: #5f7780; border-left-color: #cbd5e1 }
.direct-app .qorder-section__count { background: #cee0e4; color: #133e4c }
.direct-app .qorder-section__toggle { color: #1d4f5e }
.direct-app .qorder-section__hero {
  background: linear-gradient(180deg, #faf5e9, #f5efe2);
}
.direct-app .qorder-section__hero-img { background: #fff; border-color: #dde6e8 }
.direct-app .qorder-section__hero-title { color: #0d2c34 }
.direct-app .qorder-section__hero-meta strong { color: #133e4c }

.direct-app .qorder-variant { border-color: #dde6e8 }
.direct-app .qorder-variant:hover { border-color: #1d4f5e }
.direct-app .qorder-variant__name { color: #0d2c34 }
.direct-app .qorder-variant__sku { background: #f5efe2; color: #5f7780 }
.direct-app .qorder-variant__pricing { background: #e9f0f2 }
.direct-app .qorder-variant__price { color: #133e4c }
.direct-app .qorder-variant__save { background: #1d4f5e }
.direct-app .qorder-variant__stock { color: #133e4c }
.direct-app .qorder-variant__stock--low { color: #92400e }
.direct-app .qorder-variant__stock--mto { color: #553c8a }
.direct-app .qorder-variant__last { background: #faedd6; color: #7a4d12 }
.direct-app .qorder-variant__embr input { accent-color: #1d4f5e }
.direct-app .qorder-variant__embr-detail {
  background: #e9f0f2; color: #133e4c;
  border-color: #9ec2cc;
}
.direct-app .qorder-variant__embr-detail strong { color: #0d2c34 }
.direct-app .qorder-variant__qty-stepper { border-color: #cbd5e1 }
.direct-app .qorder-variant__qty-stepper button:hover { background: #cee0e4 }
.direct-app .qorder-variant__reorder {
  border-color: #1d4f5e; color: #133e4c;
}
.direct-app .qorder-variant__reorder:hover { background: #cee0e4 }

.direct-app .qorder-variant-list { border-color: #dde6e8 }
.direct-app .qorder-variant-list .qorder-vrow { border-top-color: #dde6e8 }
.direct-app .qorder-vrow__name strong { color: #0d2c34 }
.direct-app .qorder-vrow__price strong { color: #133e4c }
.direct-app .qorder-vrow__stock { color: #133e4c }
.direct-app .qorder-vrow__embr input { accent-color: #1d4f5e }
.direct-app .qorder-vrow__qty { border-color: #cbd5e1 }

.direct-app .qorder-floater {
  background: #0d2c34;
  box-shadow: 0 12px 30px rgba(13, 44, 52, .35);
}
.direct-app .qorder-floater__count { color: #bcd4d9 }
.direct-app .qorder-floater__total { color: #9ec2cc }
.direct-app .qorder-floater__save { color: #bcd4d9 }
.direct-app .qorder-floater__cta {
  background: linear-gradient(135deg, #3d717e, #1d4f5e);
}
.direct-app .qorder-floater__cta:hover {
  background: linear-gradient(135deg, #2d5e6b, #133e4c);
}

/* ===== Login demo "Direct Buyer" card override ===== */
.demo-account[data-demo-login="direct"] {
  background: linear-gradient(135deg, #f5efe2 0%, #cee0e4 100%);
  border-color: #9ec2cc;
}
.demo-account[data-demo-login="direct"] .demo-account__icon {
  background: linear-gradient(135deg, #3d717e, #1d4f5e);
}

/* ===== Sunday Golf logo placement =====  */

/* Sidebar — logo replaces the SG box */
.direct-app .dsidebar__brand {
  padding: 6px 4px 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  border-bottom: 1px solid rgba(206, 224, 228, .18);
}
.direct-app .dsidebar__brand-logo {
  width: 100%; height: 64px;
  background: transparent;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.direct-app .dsidebar__brand-logo img {
  width: 100%; max-width: 180px; height: 100%;
  object-fit: contain;
}
.direct-app .dsidebar__brand-eyebrow-row {
  margin-top: 8px;
  text-align: center;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: #9ec2cc;
  padding: 5px 0; border-top: 1px solid rgba(206, 224, 228, .15);
}

/* Quick Order top bar — logo with divider */
.direct-app .qorder-supbar__brand {
  display: flex; align-items: center; gap: 12px;
}
.direct-app .qorder-supbar__brand-img {
  height: 42px; width: auto; display: block;
}
.direct-app .qorder-supbar__brand-divider {
  width: 1px; height: 30px; background: #dde6e8;
}
.direct-app .qorder-supbar__brand-name { color: #0d2c34; font-weight: 800 }
.direct-app .qorder-supbar__brand-sub { color: #5f7780 }

@media (max-width: 900px) {
  .direct-app .dsidebar__brand-logo { height: 52px }
  .direct-app .dsidebar__brand-logo img { max-width: 150px }
  .direct-app .qorder-supbar__brand-img { height: 36px }
}

/* ==============================================================
   ===== DIRECT CATALOG · PREMIUM SHOWCASE LAYOUT =====
   Upgraded catalog with filter rail, sort toolbar, polished
   cards (badges, variant dots, stock signal), category sections.
   ============================================================== */

/* Featured hero strip — premium showcase */
.cat-featured {
  background: linear-gradient(135deg, #0d2c34 0%, #1d4f5e 60%, #3d717e 100%);
  color: #fff; border-radius: 14px;
  padding: 24px 28px; margin-bottom: 18px;
  display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: center;
  position: relative; overflow: hidden;
}
.cat-featured::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 239, 226, .18), transparent 70%);
}
.cat-featured__eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: #ede0c9; font-weight: 800;
}
.cat-featured__title { font-size: 22px; font-weight: 800; margin: 6px 0 4px }
.cat-featured__sub { font-size: 13px; color: #cee0e4; line-height: 1.5 }
.cat-featured__chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }
.cat-featured__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(245, 239, 226, .15); color: #f5efe2;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.cat-featured__price {
  background: rgba(245, 239, 226, .14); border: 1px dashed rgba(245, 239, 226, .35);
  border-radius: 11px; padding: 14px 18px; text-align: center;
  position: relative; z-index: 1;
}
.cat-featured__price-label { font-size: 10.5px; color: #ede0c9; text-transform: uppercase; letter-spacing: .06em }
.cat-featured__price-big { font-size: 30px; font-weight: 800; color: #fff; margin: 4px 0 }
.cat-featured__price-list { font-size: 12px; color: #cee0e4; text-decoration: line-through }
.cat-featured__price-save {
  display: inline-block; margin-top: 6px;
  background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* Catalog two-column with filter rail */
.cat-shell { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start }
@media (max-width: 1100px) { .cat-shell { grid-template-columns: 1fr } }

/* Filter rail */
.cat-rail {
  background: #fff; border: 1px solid #dde6e8; border-radius: 12px;
  padding: 16px; position: sticky; top: 16px;
}
.cat-rail__group { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #ece4d4 }
.cat-rail__group:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0 }
.cat-rail__title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: #0d2c34; margin-bottom: 8px;
}
.cat-rail__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; cursor: pointer;
  font-size: 12.5px; color: #334155;
}
.cat-rail__opt input { accent-color: #1d4f5e }
.cat-rail__opt-count { margin-left: auto; color: #94a3b8; font-size: 11px }
.cat-rail__range {
  display: flex; gap: 6px; align-items: center;
  margin-top: 4px;
}
.cat-rail__range input {
  width: 80px; border: 1px solid #dde6e8; border-radius: 6px;
  padding: 6px 9px; font-size: 12px; font-family: inherit; color: #0d2c34;
}
.cat-rail__swatches {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 4px;
}
.cat-rail__swatch {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent;
}
.cat-rail__swatch:hover { border-color: #1d4f5e }
.cat-rail__swatch.is-on { border-color: #1d4f5e; box-shadow: 0 0 0 2px rgba(29, 79, 94, .25) }
.cat-rail__clear {
  font-size: 11px; color: #1d4f5e; background: none; border: 0;
  cursor: pointer; padding: 0; font-weight: 600; font-family: inherit;
}

/* Toolbar */
.cat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #dde6e8; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
}
.cat-toolbar__count { font-size: 12.5px; color: #475569 }
.cat-toolbar__count strong { color: #0d2c34 }
.cat-toolbar__active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 12px }
.cat-toolbar__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f5efe2; color: #133e4c;
  border: 1px solid #ede0c9;
  font-size: 11px; padding: 3px 9px 3px 11px; border-radius: 999px;
}
.cat-toolbar__chip button { background: none; border: 0; cursor: pointer; color: #5f7780; font-size: 14px; line-height: 1 }
.cat-toolbar__right { display: flex; align-items: center; gap: 10px }
.cat-toolbar__sort {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #dde6e8;
  padding: 7px 12px; border-radius: 8px;
  font-size: 12.5px; color: #0d2c34; font-weight: 600;
  cursor: pointer; font-family: inherit;
}

/* Section heading */
.cat-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 22px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid #dde6e8;
}
.cat-section-head h2 {
  font-size: 18px; font-weight: 800; color: #0d2c34; margin: 0;
}
.cat-section-head__sub {
  font-size: 12px; color: #5f7780;
}
.cat-section-head__count {
  background: #cee0e4; color: #133e4c;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
}

/* PREMIUM product card */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 14px;
}
.cat-card {
  background: #fff; border: 1px solid #dde6e8; border-radius: 13px;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  transition: all .15s ease;
}
.cat-card:hover {
  border-color: #1d4f5e;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 44, 52, .08);
}
.cat-card__badge {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 9px; border-radius: 5px;
}
.cat-card__badge--best { background: #1d4f5e; color: #fff }
.cat-card__badge--new { background: #d97706; color: #fff }
.cat-card__badge--last { background: #faedd6; color: #7a4d12 }
.cat-card__badge--mto { background: #ede9fe; color: #553c8a }
.cat-card__media {
  height: 180px; background: linear-gradient(135deg, var(--media-from, #e9f0f2), var(--media-to, #cee0e4));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cat-card__media-bag {
  width: 90px; height: 130px; position: relative;
  filter: drop-shadow(0 6px 8px rgba(13, 44, 52, .18));
}
.cat-card__media svg { color: var(--media-ink, #fff); width: 100%; height: 100%; }
.cat-card__variants {
  position: absolute; bottom: 10px; left: 10px;
  display: flex; gap: 4px; align-items: center;
}
.cat-card__dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.cat-card__dot-more {
  background: rgba(255, 255, 255, .9); color: #0d2c34;
  font-size: 9.5px; font-weight: 800;
  padding: 0 5px; border-radius: 999px;
  height: 18px; display: inline-flex; align-items: center;
  margin-left: 2px;
}
.cat-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.cat-card__name { font-size: 14.5px; font-weight: 700; color: #0d2c34; line-height: 1.25 }
.cat-card__sku-line {
  display: flex; gap: 6px; align-items: center;
  font-size: 11px; color: #5f7780;
}
.cat-card__sku-pill {
  background: #f5efe2; color: #133e4c;
  padding: 1px 7px; border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
}
.cat-card__price-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0; border-top: 1px solid #ece4d4; border-bottom: 1px solid #ece4d4;
  margin: 4px 0;
}
.cat-card__price-big { font-size: 20px; font-weight: 800; color: #133e4c; line-height: 1 }
.cat-card__price-meta { flex: 1; display: flex; flex-direction: column; gap: 2px }
.cat-card__price-list { font-size: 11.5px; color: #94a3b8; text-decoration: line-through; line-height: 1 }
.cat-card__price-save {
  font-size: 10.5px; font-weight: 700; color: #1d4f5e;
  letter-spacing: .03em;
}
.cat-card__stock {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #475569;
}
.cat-card__stock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a;
}
.cat-card__stock-dot--low { background: #f59e0b }
.cat-card__stock-dot--mto { background: #7c3aed }
.cat-card__stock-dot--out { background: #dc2626 }
.cat-card__actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px }
.cat-card__actions .direct-cta { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12px }
.cat-card__actions .direct-cta--ghost { flex: 0 0 auto; padding: 8px 11px }

@media (max-width: 600px) {
  .cat-featured { grid-template-columns: 1fr; padding: 18px }
  .cat-toolbar { padding: 10px }
  .cat-grid { grid-template-columns: 1fr 1fr }
}

/* ===== Catalog · inline configurator + selection state ===== */
.cat-card__config {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid #ece4d4;
}
.cat-card__embr {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #334155; cursor: pointer;
  padding: 4px 0;
}
.cat-card__embr input { accent-color: #1d4f5e; width: 13px; height: 13px }
.cat-card__embr-cost { color: #94a3b8; font-size: 10.5px; margin-left: auto }
.cat-card__qty-row { display: flex; gap: 6px; align-items: center }
.cat-card__qty {
  display: inline-flex; align-items: center;
  border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden;
}
.cat-card__qty button {
  width: 28px; height: 32px; background: #f5efe2; border: 0;
  color: #133e4c; font-weight: 700; cursor: pointer; font-family: inherit;
  font-size: 14px;
}
.cat-card__qty button:hover { background: #cee0e4 }
.cat-card__qty input {
  width: 52px; height: 32px; border: 0; text-align: center;
  font-size: 13px; font-weight: 700; color: #0d2c34; background: #fff;
  -moz-appearance: textfield;
}
.cat-card__qty input::-webkit-outer-spin-button,
.cat-card__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.cat-card__add {
  flex: 1; padding: 8px 10px; border-radius: 7px;
  background: #1d4f5e; color: #fff; border: 0;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: all .15s ease;
  white-space: nowrap;
}
.cat-card__add:hover:not(:disabled) { background: #133e4c }
.cat-card__add:disabled {
  background: #cbd5e1; color: #f5efe2; cursor: not-allowed;
}

/* Card "added" state */
.cat-card.is-added { border-color: #1d4f5e; box-shadow: 0 0 0 2px rgba(29, 79, 94, .12) }
.cat-card.is-added .cat-card__add {
  background: #d8e6e9; color: #0d2c34;
  border: 1px solid #1d4f5e;
}
.cat-card.is-added .cat-card__add:hover:not(:disabled) {
  background: #cee0e4; color: #0d2c34;
}

/* Sticky selection floater */
.cat-floater {
  position: fixed; bottom: 18px;
  left: 50%; transform: translateX(-50%) translateY(120%);
  background: #0d2c34; color: #fff;
  display: flex; align-items: center; gap: 24px;
  padding: 13px 22px; border-radius: 14px;
  box-shadow: 0 14px 32px rgba(13, 44, 52, .35);
  font-family: 'Inter', system-ui;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: transform .25s ease, opacity .2s ease;
  max-width: calc(100vw - 32px);
}
.cat-floater.is-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1; pointer-events: auto;
}
.cat-floater__lead { font-size: 12.5px; color: #bcd4d9 }
.cat-floater__lead strong { color: #fff; font-weight: 700 }
.cat-floater__totals { display: flex; flex-direction: column; gap: 2px }
.cat-floater__total { font-size: 18px; font-weight: 800; color: #9ec2cc; line-height: 1 }
.cat-floater__save { font-size: 11px; color: #bcd4d9 }
.cat-floater__terms { font-size: 11px; color: #bcd4d9 }
.cat-floater__terms strong { color: #fff; font-weight: 700 }
.cat-floater__clear {
  background: none; border: 0; color: #9ec2cc;
  font-size: 11.5px; cursor: pointer; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.cat-floater__clear:hover { color: #fff }
.cat-floater__cta {
  background: linear-gradient(135deg, #3d717e, #1d4f5e); color: #fff;
  border: 0; padding: 11px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.cat-floater__cta:hover { background: linear-gradient(135deg, #2d5e6b, #133e4c) }

/* Topbar cart link gets dynamic count */
.cat-cart-count {
  display: inline-block; background: #d97706; color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 0 6px; border-radius: 999px; margin-left: 5px;
  line-height: 16px;
}

/* Toast feedback */
.cat-toast {
  position: fixed; top: 90px; right: 24px;
  background: #1d4f5e; color: #fff;
  padding: 12px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(13, 44, 52, .3);
  z-index: 70;
  display: flex; align-items: center; gap: 8px;
  transform: translateX(120%); transition: transform .25s ease;
}
.cat-toast.is-active { transform: translateX(0) }
.cat-toast__icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: #9ec2cc; color: #0d2c34;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}

@media (max-width: 600px) {
  .cat-floater { left: 10px; right: 10px; transform: translateY(120%); flex-wrap: wrap; gap: 12px }
  .cat-floater.is-active { transform: translateY(0) }
}

/* ==============================================================
   ===== DIRECT PORTAL · UNIVERSAL PRODUCT DETAIL PAGE =====
   Schema-driven · adapts to any product (color, size, material,
   etc.) · works for Sunday Golf bags AND any other seller.
   ============================================================== */

.pdp-shell { display: grid; grid-template-columns: 1fr 420px; gap: 30px; align-items: start; margin-top: 6px }
@media (max-width: 1100px) { .pdp-shell { grid-template-columns: 1fr } }

/* ===== Image gallery ===== */
.pdp-gallery { display: flex; flex-direction: column; gap: 12px }
.pdp-gallery__main {
  background: linear-gradient(135deg, var(--pdp-bg-from, #0d2c34), var(--pdp-bg-to, #1d4f5e));
  border-radius: 14px; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border: 1px solid #dde6e8;
}
.pdp-gallery__main svg {
  width: 56%; height: 56%; color: var(--pdp-ink, #f5efe2);
  filter: drop-shadow(0 12px 20px rgba(13,44,52,.4));
}
.pdp-gallery__badge {
  position: absolute; top: 14px; left: 14px;
  background: #1d4f5e; color: #fff;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 10px; border-radius: 5px;
}
.pdp-gallery__zoom {
  position: absolute; bottom: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #133e4c;
  border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(13,44,52,.2);
}
.pdp-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px }
.pdp-gallery__thumb {
  width: 70px; height: 70px; border-radius: 9px; border: 2px solid #dde6e8;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--t-from, #cee0e4), var(--t-to, #9ec2cc));
  color: var(--t-ink, #fff);
}
.pdp-gallery__thumb svg { width: 60%; height: 60%; opacity: .75 }
.pdp-gallery__thumb:hover { border-color: #1d4f5e }
.pdp-gallery__thumb.is-active { border-color: #1d4f5e; box-shadow: 0 0 0 2px rgba(29,79,94,.2) }

/* ===== Info column ===== */
.pdp-info { display: flex; flex-direction: column; gap: 14px }
.pdp-brand {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: #5f7780; font-weight: 700;
}
.pdp-title {
  font-size: 26px; font-weight: 800; color: #0d2c34;
  line-height: 1.2; margin: 0;
}
.pdp-sub {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: #475569; flex-wrap: wrap;
}
.pdp-sub__sku {
  background: #f5efe2; color: #133e4c;
  padding: 2px 8px; border-radius: 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
}
.pdp-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569 }
.pdp-rating__stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px }

.pdp-price {
  background: linear-gradient(180deg, #f5efe2, #faf5e9);
  border: 1px solid #ede0c9; border-radius: 11px;
  padding: 16px;
}
.pdp-price__label {
  font-size: 10.5px; font-weight: 800; color: #133e4c;
  text-transform: uppercase; letter-spacing: .07em;
}
.pdp-price__row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px }
.pdp-price__big { font-size: 30px; font-weight: 800; color: #0d2c34; line-height: 1 }
.pdp-price__list { font-size: 14px; color: #94a3b8; text-decoration: line-through }
.pdp-price__save {
  background: linear-gradient(135deg, #1d4f5e, #133e4c); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
.pdp-price__meta { font-size: 11.5px; color: #5f7780; margin-top: 6px }

.pdp-reorder {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: #fff7ed; border: 1px solid #fde68a; border-radius: 9px;
  font-size: 12.5px; color: #7a4d12;
}
.pdp-reorder__btn {
  margin-left: auto; background: #1d4f5e; color: #fff;
  border: 0; padding: 6px 11px; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}

/* Variant axis group */
.pdp-axis { display: flex; flex-direction: column; gap: 8px }
.pdp-axis__head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px;
}
.pdp-axis__name {
  font-weight: 700; color: #0d2c34;
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
}
.pdp-axis__value { color: #475569 }
.pdp-axis__value strong { color: #0d2c34; font-weight: 700 }
.pdp-axis__guide { margin-left: auto; font-size: 11px; color: #1d4f5e; cursor: pointer; text-decoration: underline; text-underline-offset: 2px }

/* Color swatches */
.pdp-swatches { display: flex; flex-wrap: wrap; gap: 8px }
.pdp-swatch {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer; background: var(--swatch, #1d4f5e);
  transition: transform .15s ease;
}
.pdp-swatch:hover { transform: scale(1.06) }
.pdp-swatch.is-active {
  border-color: #1d4f5e; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d4f5e;
}
.pdp-swatch.is-disabled { opacity: .35; cursor: not-allowed }
.pdp-swatch.is-disabled::after {
  content: ''; position: absolute; top: 50%; left: -2px; right: -2px; height: 2px;
  background: #dc2626; transform: rotate(-45deg);
}
.pdp-swatch__stockdot {
  position: absolute; bottom: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #16a34a; border: 2px solid #fff;
}
.pdp-swatch__stockdot--low { background: #f59e0b }
.pdp-swatch__stockdot--mto { background: #7c3aed }
.pdp-swatch__stockdot--out { background: #dc2626 }

/* Size / generic pills */
.pdp-pills { display: flex; flex-wrap: wrap; gap: 6px }
.pdp-pill {
  background: #fff; border: 1px solid #dde6e8;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #0d2c34;
  cursor: pointer; font-family: inherit; min-width: 50px; text-align: center;
}
.pdp-pill:hover { border-color: #1d4f5e }
.pdp-pill.is-active { border-color: #1d4f5e; background: #1d4f5e; color: #fff }
.pdp-pill.is-disabled {
  opacity: .4; cursor: not-allowed; background: #f1f5f9;
  text-decoration: line-through;
}

/* Stock info banner */
.pdp-stock {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: #f0f5f6; border-radius: 9px;
  font-size: 12.5px; color: #133e4c;
}
.pdp-stock__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
}
.pdp-stock strong { color: #0d2c34 }
.pdp-stock__eta { margin-left: auto; color: #5f7780; font-size: 11.5px }

/* Add-ons */
.pdp-addons { display: flex; flex-direction: column; gap: 6px }
.pdp-addon {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; background: #fff;
  border: 1px solid #dde6e8; border-radius: 9px;
  cursor: pointer; transition: all .12s ease;
}
.pdp-addon:hover { border-color: #1d4f5e; background: #faf5e9 }
.pdp-addon.is-on { border-color: #1d4f5e; background: #f0f5f6 }
.pdp-addon input[type=checkbox] { accent-color: #1d4f5e; width: 15px; height: 15px }
.pdp-addon__title { font-size: 13px; font-weight: 700; color: #0d2c34 }
.pdp-addon__sub { font-size: 11px; color: #5f7780; margin-top: 1px }
.pdp-addon__cost { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #133e4c }
.pdp-addon__cost--free { color: #16a34a }

/* Quantity + actions */
.pdp-qty-actions { display: flex; flex-direction: column; gap: 10px }
.pdp-qty-row { display: flex; align-items: center; gap: 12px }
.pdp-qty {
  display: inline-flex; align-items: center;
  border: 1px solid #cbd5e1; border-radius: 9px; overflow: hidden;
}
.pdp-qty button {
  width: 36px; height: 42px; background: #f5efe2; border: 0;
  color: #133e4c; font-weight: 700; cursor: pointer; font-family: inherit;
  font-size: 17px;
}
.pdp-qty button:hover { background: #cee0e4 }
.pdp-qty input {
  width: 74px; height: 42px; border: 0; text-align: center;
  font-size: 16px; font-weight: 800; color: #0d2c34; background: #fff;
  -moz-appearance: textfield;
}
.pdp-qty input::-webkit-outer-spin-button,
.pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.pdp-qty-subtotal {
  flex: 1; padding: 8px 12px;
  background: #f0f5f6; border-radius: 9px;
  font-size: 12.5px; color: #133e4c;
}
.pdp-qty-subtotal strong { font-size: 14px; color: #0d2c34; font-weight: 800 }

.pdp-cta-row { display: flex; gap: 10px }
.pdp-cta {
  flex: 1; padding: 13px 16px; border-radius: 11px;
  background: #1d4f5e; color: #fff; border: 0;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none;
  transition: background .15s ease;
}
.pdp-cta:hover { background: #133e4c }
.pdp-cta--ghost {
  background: #fff; color: #1d4f5e; border: 1px solid #1d4f5e;
}
.pdp-cta--ghost:hover { background: #f5efe2 }

.pdp-quickinfo {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  margin-top: 4px; font-size: 11.5px; color: #475569;
}
.pdp-quickinfo div { display: flex; align-items: center; gap: 6px }

/* ===== Tabs section ===== */
.pdp-tabs {
  display: flex; gap: 2px; border-bottom: 2px solid #dde6e8;
  margin-top: 28px;
}
.pdp-tab {
  background: transparent; border: 0; padding: 12px 18px;
  font-size: 13px; font-weight: 700; color: #5f7780; cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.pdp-tab:hover { color: #0d2c34 }
.pdp-tab.is-active { color: #1d4f5e; border-bottom-color: #1d4f5e }

.pdp-tab-pane { display: none; padding: 20px 0 }
.pdp-tab-pane.is-active { display: block }

.pdp-desc {
  font-size: 14px; color: #334155; line-height: 1.7;
  max-width: 760px;
}
.pdp-desc h4 { color: #0d2c34; margin: 18px 0 8px; font-size: 14px }
.pdp-desc ul { padding-left: 20px; line-height: 1.8 }

.pdp-specs-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid #dde6e8; border-radius: 11px; overflow: hidden;
}
.pdp-specs-table td {
  padding: 11px 16px; font-size: 13px; color: #334155;
  border-bottom: 1px solid #ece4d4;
}
.pdp-specs-table tr:last-child td { border-bottom: 0 }
.pdp-specs-table td:first-child {
  background: #f5efe2; color: #0d2c34; font-weight: 700; width: 200px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
}

/* Frequently bought together */
.pdp-fbt {
  background: #fff; border: 1px solid #dde6e8; border-radius: 12px;
  padding: 18px;
}
.pdp-fbt__title { font-size: 14px; font-weight: 800; color: #0d2c34; margin-bottom: 14px }
.pdp-fbt__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.pdp-fbt__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f5efe2;
  border-radius: 9px; flex: 1; min-width: 200px;
}
.pdp-fbt__item input { accent-color: #1d4f5e }
.pdp-fbt__thumb {
  width: 38px; height: 38px; border-radius: 7px;
  background: linear-gradient(135deg, var(--f-from, #cee0e4), var(--f-to, #9ec2cc));
  display: flex; align-items: center; justify-content: center;
  color: var(--f-ink, #133e4c);
  flex-shrink: 0;
}
.pdp-fbt__name { font-size: 12px; font-weight: 700; color: #0d2c34; line-height: 1.2 }
.pdp-fbt__price { font-size: 11.5px; color: #133e4c; margin-top: 1px }
.pdp-fbt__plus { font-size: 18px; color: #94a3b8; font-weight: 300 }
.pdp-fbt__total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; margin-top: 14px;
  border-top: 1px solid #ece4d4;
}
.pdp-fbt__total-text { font-size: 13px; color: #0d2c34 }
.pdp-fbt__total-text strong { font-weight: 800 }
.pdp-fbt__total-cta {
  background: #1d4f5e; color: #fff;
  padding: 9px 16px; border-radius: 8px; border: 0;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* You may also like (mini grid) */
.pdp-suggest { margin-top: 22px }
.pdp-suggest__title {
  font-size: 16px; font-weight: 800; color: #0d2c34; margin-bottom: 12px;
}
.pdp-suggest__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.pdp-suggest__card {
  background: #fff; border: 1px solid #dde6e8; border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: all .15s ease;
}
.pdp-suggest__card:hover { border-color: #1d4f5e; transform: translateY(-1px) }
.pdp-suggest__media {
  height: 120px;
  background: linear-gradient(135deg, var(--s-from, #cee0e4), var(--s-to, #9ec2cc));
  display: flex; align-items: center; justify-content: center;
}
.pdp-suggest__media svg { color: var(--s-ink, #fff); width: 50%; height: 50% }
.pdp-suggest__body { padding: 10px 12px }
.pdp-suggest__name { font-size: 12.5px; font-weight: 700; color: #0d2c34; line-height: 1.25 }
.pdp-suggest__price { font-size: 13px; font-weight: 800; color: #133e4c; margin-top: 4px }
.pdp-suggest__list { font-size: 10.5px; color: #94a3b8; text-decoration: line-through; margin-left: 4px }

@media (max-width: 600px) {
  .pdp-title { font-size: 22px }
  .pdp-price__big { font-size: 24px }
  .pdp-qty input { width: 56px; font-size: 14px }
  .pdp-fbt__row { gap: 8px }
  .pdp-fbt__plus { width: 100%; text-align: center }
  .pdp-quickinfo { grid-template-columns: 1fr }
}

/* =========================================================
   ===== DIRECT PORTAL · SLIDE-OUT CART DRAWER =====
   Accessible from top-bar Cart icon on any Direct page.
   ========================================================= */

.cart-drawer__overlay {
  position: fixed; inset: 0;
  background: rgba(13, 44, 52, .5);
  opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity .25s ease;
}
.cart-drawer__overlay.is-active { opacity: 1; pointer-events: auto }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 36px rgba(13,44,52,.18);
  transform: translateX(110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 81;
}
.cart-drawer.is-open { transform: translateX(0) }
.cart-drawer__head {
  padding: 18px 22px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #0d2c34, #1d4f5e); color: #fff;
}
.cart-drawer__head h3 { margin: 0; font-size: 16px; font-weight: 800 }
.cart-drawer__head-meta { font-size: 11.5px; color: #9ec2cc }
.cart-drawer__close {
  margin-left: auto; background: rgba(245,239,226,.14); border: 0;
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.cart-drawer__close:hover { background: rgba(245,239,226,.25) }
.cart-drawer__contract {
  padding: 10px 22px; font-size: 11.5px;
  background: #f5efe2; color: #133e4c;
  border-bottom: 1px solid #dde6e8;
  display: flex; align-items: center; gap: 8px;
}
.cart-drawer__contract strong { font-weight: 700 }

.cart-drawer__body { flex: 1; overflow-y: auto; padding: 14px 18px }
.cart-drawer__empty {
  text-align: center; padding: 50px 20px; color: #94a3b8;
}
.cart-drawer__empty-icon { font-size: 40px; margin-bottom: 10px }
.cart-drawer__empty-title { font-size: 14px; font-weight: 700; color: #475569 }
.cart-drawer__empty-sub { font-size: 11.5px; margin-top: 4px }

.cart-drawer__line {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 11px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid #ece4d4;
}
.cart-drawer__line:last-child { border-bottom: 0 }
.cart-drawer__thumb {
  width: 60px; height: 60px; border-radius: 9px;
  background: linear-gradient(135deg, var(--l-from, #cee0e4), var(--l-to, #9ec2cc));
  display: flex; align-items: center; justify-content: center;
  color: var(--l-ink, #fff);
}
.cart-drawer__thumb svg { width: 55%; height: 55% }
.cart-drawer__info { min-width: 0 }
.cart-drawer__name { font-size: 12.5px; font-weight: 700; color: #0d2c34; line-height: 1.3 }
.cart-drawer__variant {
  font-size: 11px; color: #5f7780; margin-top: 2px;
}
.cart-drawer__variant-pill {
  display: inline-block; background: #f5efe2; color: #133e4c;
  padding: 1px 7px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600; margin-right: 3px;
}
.cart-drawer__qty {
  display: inline-flex; align-items: center; margin-top: 6px;
  border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden;
}
.cart-drawer__qty button { width: 24px; height: 26px; background: #f5efe2; border: 0; cursor: pointer; font-weight: 700; color: #133e4c; font-family: inherit }
.cart-drawer__qty input { width: 40px; height: 26px; border: 0; text-align: center; font-weight: 700; font-size: 12px; color: #0d2c34; -moz-appearance: textfield }
.cart-drawer__qty input::-webkit-outer-spin-button, .cart-drawer__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

.cart-drawer__addon {
  font-size: 10.5px; color: #475569; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; margin-left: 6px;
}
.cart-drawer__addon input { accent-color: #1d4f5e; width: 11px; height: 11px }

.cart-drawer__lineend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.cart-drawer__lineprice { font-size: 13px; font-weight: 800; color: #133e4c }
.cart-drawer__remove { background: none; border: 0; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 0; line-height: 1 }
.cart-drawer__remove:hover { color: #dc2626 }

.cart-drawer__foot {
  padding: 14px 18px; border-top: 1px solid #dde6e8;
  background: #f5efe2;
}
.cart-drawer__totals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px }
.cart-drawer__total-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #475569 }
.cart-drawer__total-row--final { font-size: 15px; color: #0d2c34; font-weight: 800; padding-top: 6px; border-top: 1px solid #ede0c9; margin-top: 4px }
.cart-drawer__total-row--save { color: #16a34a; font-weight: 700 }
.cart-drawer__foot-ctas { display: flex; gap: 8px }
.cart-drawer__foot-ctas .direct-cta { flex: 1; justify-content: center }
.cart-drawer__foot-ctas .direct-cta--ghost { flex: 0 0 auto }

@media (max-width: 600px) {
  .cart-drawer { width: 100vw }
}

/* Catalog · clickable name + view-pill on media */
.direct-app a.cat-card__name { color: #0d2c34; text-decoration: none; display: block }
.direct-app a.cat-card__name:hover { color: #1d4f5e; text-decoration: underline; text-underline-offset: 2px }
.direct-app .cat-card { position: relative }
.direct-app .cat-card__view-pill {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  background: rgba(245, 239, 226, .9); backdrop-filter: blur(6px);
  color: #133e4c; text-decoration: none;
  font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 5px;
  letter-spacing: .02em;
}
.direct-app .cat-card__view-pill:hover { background: #fff; color: #0d2c34 }

/* Make topbar cart link on PDP open the drawer */
.direct-app [data-open-cart-drawer] { cursor: pointer }

/* ===== Direct Cart · Quick-Add widget + Product Picker modal ===== */

.dcart-quickadd {
  background: linear-gradient(135deg, #f5efe2 0%, #faf5e9 100%);
  border: 1px solid #ede0c9; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
}
.dcart-quickadd__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.dcart-quickadd__title {
  font-size: 12.5px; font-weight: 800; color: #0d2c34;
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px;
}
.dcart-quickadd__hint { font-size: 11.5px; color: #5f7780 }
.dcart-quickadd__hint strong { color: #133e4c }
.dcart-quickadd__row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.dcart-quickadd__sku {
  flex: 1; min-width: 140px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: #0d2c34;
  font-family: ui-monospace, Menlo, monospace; background: #fff;
}
.dcart-quickadd__sku:focus {
  outline: none; border-color: #1d4f5e; box-shadow: 0 0 0 3px rgba(29,79,94,.12);
}
.dcart-quickadd__qty {
  width: 90px; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-weight: 700; color: #0d2c34;
  text-align: center; background: #fff;
  -moz-appearance: textfield;
}
.dcart-quickadd__qty::-webkit-outer-spin-button,
.dcart-quickadd__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.dcart-quickadd__add {
  background: #1d4f5e; color: #fff;
  border: 0; padding: 9px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.dcart-quickadd__add:hover { background: #133e4c }
.dcart-quickadd__browse {
  background: #fff; color: #1d4f5e; border: 1px solid #1d4f5e;
  padding: 9px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.dcart-quickadd__browse:hover { background: #f5efe2 }

.dcart-quickadd__favs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed #ede0c9;
}
.dcart-quickadd__fav-label {
  font-size: 11px; color: #5f7780; font-weight: 600;
  display: inline-flex; align-items: center; margin-right: 3px;
}
.dcart-quickadd__fav-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #dde6e8;
  padding: 4px 9px 4px 6px; border-radius: 999px;
  font-size: 11.5px; color: #0d2c34; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .12s ease;
}
.dcart-quickadd__fav-chip:hover { border-color: #1d4f5e; background: #f5efe2 }
.dcart-quickadd__fav-chip__plus {
  background: #1d4f5e; color: #fff;
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.dcart-quickadd__fav-chip__sku {
  background: #f5efe2; color: #133e4c;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  font-weight: 500;
}

/* ===== Product picker modal ===== */
.pick-overlay {
  position: fixed; inset: 0;
  background: rgba(13,44,52,.55);
  opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity .25s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pick-overlay.is-active { opacity: 1; pointer-events: auto }

.pick-modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 760px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(13,44,52,.4);
  transform: scale(.96); transition: transform .25s ease;
}
.pick-overlay.is-active .pick-modal { transform: scale(1) }
.pick-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; background: linear-gradient(135deg, #0d2c34, #1d4f5e); color: #fff;
}
.pick-head h3 { margin: 0; font-size: 16px; font-weight: 800 }
.pick-head__sub { font-size: 11.5px; color: #9ec2cc; margin-top: 2px }
.pick-close {
  margin-left: auto; background: rgba(245,239,226,.14); border: 0;
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.pick-close:hover { background: rgba(245,239,226,.25) }

.pick-search {
  padding: 14px 22px; border-bottom: 1px solid #dde6e8;
  display: flex; gap: 9px; align-items: center;
  background: #f5efe2;
}
.pick-search input {
  flex: 1; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 9px 14px; font-size: 13px; color: #0d2c34;
  background: #fff;
}
.pick-search input:focus { outline: none; border-color: #1d4f5e; box-shadow: 0 0 0 3px rgba(29,79,94,.12) }
.pick-search__filter {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid #dde6e8;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; color: #133e4c; font-weight: 600;
  cursor: pointer; font-family: inherit;
}

.pick-body { flex: 1; overflow-y: auto; padding: 8px 14px }
.pick-empty {
  text-align: center; padding: 50px 20px; color: #94a3b8; font-size: 13px;
}

.pick-row {
  display: grid; grid-template-columns: 48px 1fr auto auto auto;
  gap: 12px; align-items: center;
  padding: 11px 12px; border-bottom: 1px solid #ece4d4;
  transition: background .12s ease;
}
.pick-row:last-child { border-bottom: 0 }
.pick-row:hover { background: #f5efe2 }
.pick-row__thumb {
  width: 48px; height: 48px; border-radius: 8px;
  background: linear-gradient(135deg, var(--pr-from, #0d2c34), var(--pr-to, #1d4f5e));
  display: flex; align-items: center; justify-content: center;
  color: var(--pr-ink, #cee0e4);
}
.pick-row__thumb svg { width: 55%; height: 55% }
.pick-row__info { min-width: 0 }
.pick-row__name { font-size: 13px; font-weight: 700; color: #0d2c34; line-height: 1.2 }
.pick-row__meta {
  display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #5f7780;
  margin-top: 3px;
}
.pick-row__sku-pill {
  background: #f5efe2; color: #133e4c;
  font-family: ui-monospace, Menlo, monospace;
  padding: 1px 6px; border-radius: 4px; font-size: 10px;
}
.pick-row__variants {
  font-size: 10.5px; color: #5b21b6;
  background: #ede9fe; padding: 1px 7px; border-radius: 999px; font-weight: 600;
}
.pick-row__price {
  text-align: right; min-width: 86px;
}
.pick-row__price-big { font-size: 14px; font-weight: 800; color: #133e4c }
.pick-row__price-list { font-size: 10.5px; color: #94a3b8; text-decoration: line-through }
.pick-row__qty {
  display: inline-flex; align-items: center;
  border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden;
}
.pick-row__qty button { width: 26px; height: 30px; background: #f5efe2; border: 0; cursor: pointer; font-weight: 700; color: #133e4c; font-family: inherit }
.pick-row__qty input { width: 44px; height: 30px; border: 0; text-align: center; font-weight: 700; font-size: 12px; color: #0d2c34; -moz-appearance: textfield }
.pick-row__qty input::-webkit-outer-spin-button, .pick-row__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.pick-row__add {
  background: #1d4f5e; color: #fff;
  border: 0; padding: 7px 12px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.pick-row__add:hover { background: #133e4c }
.pick-row__add--variant {
  background: #fff; color: #1d4f5e; border: 1px solid #1d4f5e;
}
.pick-row__add--variant:hover { background: #f5efe2 }

.pick-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px; border-top: 1px solid #dde6e8;
  background: #faf5e9;
  font-size: 12px; color: #5f7780;
}
.pick-foot strong { color: #0d2c34; font-weight: 800 }

/* Cart drawer "+ Add another product" link */
.cart-drawer__addmore {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: #f5efe2;
  border: 1px dashed #1d4f5e; border-radius: 9px;
  color: #1d4f5e; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; width: 100%; justify-content: center;
  margin-top: 12px;
}
.cart-drawer__addmore:hover { background: #cee0e4 }

/* Toast confirming inline add */
.dcart-quick-toast {
  position: fixed; top: 80px; right: 24px; z-index: 95;
  background: #1d4f5e; color: #fff;
  padding: 12px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(13,44,52,.3);
  transform: translateX(120%); transition: transform .25s ease;
  display: flex; align-items: center; gap: 8px;
}
.dcart-quick-toast.is-active { transform: translateX(0) }

@media (max-width: 600px) {
  .dcart-quickadd__row { flex-direction: column; align-items: stretch }
  .dcart-quickadd__sku, .dcart-quickadd__qty { width: 100% }
  .pick-row { grid-template-columns: 48px 1fr; row-gap: 8px }
  .pick-row__price, .pick-row__qty, .pick-row__add { grid-column: 2 }
}

/* ===== Catalog · cleaned-up showcase cards ===== */
.direct-app .cat-card { position: relative; cursor: pointer; }
.direct-app .cat-card__overlay-link {
  position: absolute; inset: 0; z-index: 1;
  text-decoration: none; color: transparent;
}

/* Clean View CTA replacing the configurator */
.direct-app .cat-card__view {
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid #ece4d4;
  position: relative; z-index: 2;
}
.direct-app .cat-card__view-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 10px 14px;
  background: #1d4f5e; color: #fff;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
}
.direct-app .cat-card__view-cta:hover { background: #133e4c; transform: translateY(-1px) }

/* Color dots become hoverable with tooltips */
.direct-app .cat-card__dot {
  position: relative; cursor: help; z-index: 2;
}
.direct-app .cat-card__dot:hover::after {
  content: attr(title);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: #0d2c34; color: #fff;
  padding: 3px 8px; border-radius: 5px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  margin-bottom: 6px;
}

/* Make sure card hover lifts cleanly without configurator chrome */
.direct-app .cat-card:hover { border-color: #1d4f5e; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 44, 52, .08) }

/* Hide now-unused inline configurator if any stragglers remain */
.direct-app .cat-card__config { display: none !important }
.direct-app .cat-floater { display: none !important }
.direct-app .cat-toast { display: none !important }

/* ===== Catalog · Shop-by-category tile grid (Sunday Golf style) ===== */
.cat-tiles-wrap {
  margin: 18px 0;
}
.cat-tiles-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.cat-tiles-head h2 {
  font-size: 18px; font-weight: 800; color: #0d2c34; margin: 0;
}
.cat-tiles-head__sub { font-size: 12.5px; color: #5f7780 }

.cat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .cat-tiles { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .cat-tiles { grid-template-columns: 1fr 1fr } }

.cat-tile {
  background: #fff; border: 1px solid #dde6e8; border-radius: 12px;
  padding: 18px 14px 14px; text-align: center;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; transition: all .15s ease;
  position: relative;
}
.cat-tile:hover {
  border-color: #1d4f5e; transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(13, 44, 52, .08);
}
.cat-tile__media {
  position: static;   /* override stale absolute rule from older component */
  inset: auto;
  width: 100%; height: 118px; border-radius: 9px;   /* bigger image */
  background: linear-gradient(135deg, var(--ct-from, #f5efe2), var(--ct-to, #dde6e8));
  display: flex; align-items: center; justify-content: center;
  color: var(--ct-ink, #1d4f5e);
  flex: 0 0 auto;
}
.cat-tile__media svg { width: 52px; height: 52px }
.cat-tile { overflow: visible; padding: 10px 12px 12px }
.cat-tile__name {
  font-size: 12.5px; font-weight: 800; color: #0d2c34;
  text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.2;
}
/* Product count moved onto the image as a pill (frees the bottom line for a bigger image) */
.cat-tile__count {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px);
  color: #133e4c; font-size: 10px; font-weight: 800;
  padding: 2px 9px; border-radius: 999px;
  letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(13, 44, 52, .12);
}
.cat-tile__badge {
  position: absolute; top: 10px; right: 10px;
  background: #fbbf24; color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
}
.cat-tile__badge--coming {
  background: #94a3b8;
}
.cat-tile__badge--new {
  background: #d97706;
}

/* Section-head category icon */
.cat-section-head__icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, #cee0e4, #9ec2cc);
  color: #133e4c;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 4px; flex-shrink: 0;
}
.cat-section-head__icon svg { width: 60%; height: 60% }

/* Empty/Request section state */
.cat-section-empty {
  background: linear-gradient(180deg, #faf5e9, #f5efe2);
  border: 1px dashed #ede0c9; border-radius: 12px;
  padding: 24px; text-align: center;
}
.cat-section-empty__icon {
  font-size: 36px; margin-bottom: 8px;
}
.cat-section-empty__title {
  font-size: 14px; font-weight: 800; color: #0d2c34; margin-bottom: 4px;
}
.cat-section-empty__sub {
  font-size: 12px; color: #5f7780; line-height: 1.5; max-width: 480px; margin: 0 auto 12px;
}
.cat-section-empty__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1d4f5e; color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
}

/* ===== Quick Order · Compact top redesign ===== */

/* Brand area: image + divider + sub + status chips stacked */
.direct-app .qorder-supbar__brand-status {
  display: flex; align-items: center; gap: 7px;
  margin-top: 3px; flex-wrap: wrap;
  font-size: 11px; color: #5f7780;
}
.direct-app .qorder-supbar__chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #475569; font-weight: 600;
  text-decoration: none;
}
.direct-app .qorder-supbar__chip strong { color: #0d2c34; font-weight: 800 }
.direct-app .qorder-supbar__chip-sep { color: #cbd5e1; font-weight: 400 }
.direct-app .qorder-supbar__chip--gold {
  background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.direct-app .qorder-supbar__chip--rep {
  background: #ecfdf5; color: #047857;
  padding: 3px 9px; border-radius: 999px;
  font-weight: 700;
}
.direct-app .qorder-supbar__chip--rep:hover { background: #d1fae5 }
.direct-app .qorder-supbar__rep-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.25);
  display: inline-block;
}

/* Compact cart pill */
.direct-app .qorder-supbar__cart {
  background: #0d2c34; color: #fff;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; text-decoration: none;
}
.direct-app .qorder-supbar__cart strong { color: #9ec2cc; font-weight: 800; font-size: 13.5px }

/* Sticky slim category bar */
.direct-app .qorder-catbar {
  padding: 8px 22px; gap: 2px;
  border-bottom: 1px solid #dde6e8;
  background: #fff;
  position: sticky; top: 60px; z-index: 49;
}
.direct-app .qorder-catbar__btn { padding: 6px 12px; font-size: 12px }

/* Compact utility row */
.direct-app .qorder-util {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px; background: #faf5e9;
  border-bottom: 1px solid #ede0c9;
  font-family: 'Inter', system-ui;
  flex-wrap: wrap;
}
.direct-app .qorder-util__chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #dde6e8;
  padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #0d2c34;
  text-decoration: none;
  transition: all .12s ease;
}
.direct-app .qorder-util__chip:hover {
  border-color: #1d4f5e; background: #cee0e4;
  transform: translateY(-1px);
}
.direct-app .qorder-util__chip-ic {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #cee0e4, #9ec2cc); color: #133e4c;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.direct-app .qorder-util__chip-sub {
  color: #5f7780; font-weight: 500; font-size: 11px;
  margin-left: 2px;
}
.direct-app .qorder-util__spacer { flex: 1 }
.direct-app .qorder-util__hint {
  font-size: 11.5px; color: #5f7780; font-style: italic;
}

/* Hide the old big contract strip + 5 fat cards */
.direct-app .qorder-strip { display: none }
.direct-app .qorder-actions-row { display: none }

@media (max-width: 900px) {
  .direct-app .qorder-supbar__brand-status { font-size: 10.5px; gap: 5px }
  .direct-app .qorder-util { padding: 10px 14px; gap: 6px }
  .direct-app .qorder-util__chip { padding: 6px 10px; font-size: 11.5px }
  .direct-app .qorder-util__hint { display: none }
}

/* ==============================================================
   ===== QUICK ORDER · DENSE SPREADSHEET TABLE =====
   Single tabular surface for max-speed wholesale order entry.
   Replaces variant-grid sections with one dense scrollable table.
   ============================================================== */

/* Search + bulk toolbar */
.qo-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 22px; background: #fff;
  border-bottom: 1px solid #dde6e8;
}
.qo-toolbar__search {
  flex: 1; min-width: 200px; max-width: 380px;
  display: flex; align-items: center; gap: 8px;
  background: #f5efe2; border: 1px solid #dde6e8;
  border-radius: 8px; padding: 8px 12px;
}
.qo-toolbar__search:focus-within { border-color: #1d4f5e; background: #fff; box-shadow: 0 0 0 3px rgba(29,79,94,.1) }
.qo-toolbar__search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; color: #0d2c34; font-family: inherit }
.qo-toolbar__search svg { width: 14px; height: 14px; color: #5f7780 }

.qo-toolbar__bulkinfo {
  font-size: 12px; color: #5f7780;
  padding: 4px 10px; background: #f5efe2; border-radius: 999px;
}
.qo-toolbar__bulkinfo strong { color: #0d2c34 }
.qo-toolbar__bulkinfo.is-active { background: #cee0e4; color: #133e4c }

.qo-toolbar__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid #dde6e8;
  padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #0d2c34;
  cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.qo-toolbar__btn:hover:not(:disabled) { border-color: #1d4f5e; background: #f5efe2 }
.qo-toolbar__btn:disabled { opacity: .4; cursor: not-allowed }
.qo-toolbar__btn--primary { background: #1d4f5e; color: #fff; border-color: #1d4f5e }
.qo-toolbar__btn--primary:hover:not(:disabled) { background: #133e4c }
.qo-toolbar__btn--danger { color: #b91c1c; border-color: #fecaca }
.qo-toolbar__btn--danger:hover:not(:disabled) { background: #fef2f2 }

.qo-toolbar__spacer { flex: 1 }

.qo-toolbar__hint {
  font-size: 10.5px; color: #5f7780; font-style: italic;
  display: inline-flex; align-items: center; gap: 4px;
}
.qo-toolbar__hint kbd {
  font-family: ui-monospace, Menlo, monospace;
  background: #f1f5f9; color: #133e4c;
  padding: 1px 5px; border-radius: 3px; font-size: 10px;
  border: 1px solid #cbd5e1;
}

/* Table wrap with sticky header */
.qo-table-wrap {
  background: #fff;
  margin: 0 22px 90px;
  border: 1px solid #dde6e8; border-radius: 12px;
  /* NOTE: no overflow:hidden — it would break the sticky thead.
     Corners are rounded on the cells instead (below). */
}
.qo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px }
/* Round the table corners to match the wrap (since wrap can't clip) */
.qo-table thead th:first-child { border-top-left-radius: 11px }
.qo-table thead th:last-child { border-top-right-radius: 11px }
.qo-table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px }
.qo-table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px }

.qo-table thead th {
  position: sticky; top: 156px; z-index: 30;
  background: #0d2c34; color: #cee0e4;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 10px 10px;
  text-align: left;
  border-bottom: 2px solid #1d4f5e;
}
.qo-table thead th.is-num { text-align: right }
.qo-table thead th.is-center { text-align: center }
.qo-table thead th:first-child { padding-left: 14px }
.qo-table thead th:last-child { padding-right: 14px }

/* Category divider row */
.qo-divider {
  background: linear-gradient(90deg, #f5efe2, #faf5e9);
}
.qo-divider td {
  padding: 10px 14px;
  font-size: 12px; font-weight: 800; color: #0d2c34;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid #ede0c9; border-top: 1px solid #ede0c9;
}
.qo-divider__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: #1d4f5e; color: #fff; margin-right: 8px;
  vertical-align: middle;
}
.qo-divider__count {
  display: inline-block;
  background: rgba(29,79,94,.12); color: #133e4c;
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 8px;
}

/* Product row */
.qo-row td {
  padding: 9px 10px;
  border-bottom: 1px solid #ece4d4;
  color: #334155; vertical-align: middle;
}
.qo-row td:first-child { padding-left: 14px }
.qo-row td:last-child { padding-right: 14px }
.qo-row:hover { background: #faf5e9 }
.qo-row.is-selected { background: #f0f5f6 }
.qo-row.is-added { background: linear-gradient(90deg, #ecfdf5 0%, transparent 30%) }
.qo-row.is-hidden { display: none }

.qo-row__sel input { accent-color: #1d4f5e; cursor: pointer }
.qo-row__thumb {
  width: 30px; height: 30px; border-radius: 6px;
  background: linear-gradient(135deg, var(--qot-from, #cee0e4), var(--qot-to, #9ec2cc));
  display: flex; align-items: center; justify-content: center;
  color: var(--qot-ink, #fff);
}
.qo-row__thumb svg { width: 55%; height: 55% }

.qo-row__name {
  display: flex; flex-direction: column; gap: 2px; min-width: 180px;
}
.qo-row__name-text { color: #0d2c34; font-weight: 700; font-size: 12.5px; line-height: 1.2 }
.qo-row__name-text a { color: inherit; text-decoration: none }
.qo-row__name-text a:hover { color: #1d4f5e; text-decoration: underline }
.qo-row__name-meta {
  font-size: 10.5px; color: #5f7780;
  display: flex; gap: 6px; align-items: center;
}
.qo-row__last {
  background: #faedd6; color: #7a4d12;
  padding: 1px 6px; border-radius: 3px;
  font-weight: 700; font-size: 9.5px;
}

.qo-row__sku-pill {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: #f5efe2; color: #133e4c;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap;
}

.qo-row__price {
  text-align: right; white-space: nowrap;
}
.qo-row__price-big { font-size: 13px; font-weight: 800; color: #133e4c }
.qo-row__price-list {
  font-size: 10px; color: #94a3b8; text-decoration: line-through;
  display: block;
}

.qo-row__stock {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  white-space: nowrap;
}
.qo-row__stock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a; flex-shrink: 0;
}
.qo-row__stock-dot--low { background: #f59e0b }
.qo-row__stock-dot--mto { background: #7c3aed }
.qo-row__stock-dot--out { background: #dc2626 }
.qo-row__stock--mto { color: #5b21b6; font-weight: 600 }
.qo-row__stock--low { color: #92400e; font-weight: 600 }

.qo-row__embr {
  text-align: center;
}
.qo-row__embr label {
  display: inline-flex; align-items: center;
  cursor: pointer;
}
.qo-row__embr input { accent-color: #1d4f5e; width: 15px; height: 15px; cursor: pointer }

.qo-row__qty {
  display: inline-flex; align-items: center;
  border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden;
  background: #fff;
}
.qo-row__qty button {
  width: 22px; height: 28px;
  background: #f5efe2; border: 0;
  color: #133e4c; font-weight: 800; cursor: pointer; font-family: inherit;
  font-size: 13px;
}
.qo-row__qty button:hover { background: #cee0e4 }
.qo-row__qty input {
  width: 50px; height: 28px;
  border: 0; text-align: center;
  font-size: 12.5px; font-weight: 700; color: #0d2c34;
  background: #fff;
  -moz-appearance: textfield;
  outline: 0;
}
.qo-row__qty input:focus { background: #ecfdf5 }
.qo-row__qty input::-webkit-outer-spin-button,
.qo-row__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

.qo-row__total {
  text-align: right;
  font-size: 13px; font-weight: 800; color: #133e4c;
  white-space: nowrap; min-width: 80px;
}
.qo-row__total--empty { color: #cbd5e1; font-weight: 400 }
.qo-row__total-add {
  display: block; font-size: 10px; color: #5f7780; font-weight: 500;
}

/* Empty filter state */
.qo-empty {
  text-align: center; padding: 60px 20px; color: #94a3b8;
}
.qo-empty__icon { font-size: 36px; margin-bottom: 8px }
.qo-empty__title { font-size: 14px; font-weight: 700; color: #475569 }

/* Sticky bottom totals bar (slimmer than old floater) */
.qo-totals {
  position: fixed; bottom: 0; left: 248px; right: 0; z-index: 60;
  background: #0d2c34; color: #fff;
  padding: 12px 22px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid #1d4f5e;
  box-shadow: 0 -8px 22px rgba(13,44,52,.15);
}
.qo-totals__group {
  display: flex; flex-direction: column; line-height: 1.1;
}
.qo-totals__label { font-size: 10px; color: #9ec2cc; text-transform: uppercase; letter-spacing: .06em }
.qo-totals__value { font-size: 16px; font-weight: 800; color: #fff; margin-top: 2px }
.qo-totals__value--green { color: #9ec2cc }
.qo-totals__sep { width: 1px; height: 28px; background: rgba(206,224,228,.2) }
.qo-totals__spacer { flex: 1 }

.qo-totals__cta {
  background: linear-gradient(135deg, #3d717e, #1d4f5e); color: #fff;
  border: 0; padding: 11px 22px; border-radius: 10px;
  font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.qo-totals__cta:hover { background: linear-gradient(135deg, #2d5e6b, #133e4c) }

.qo-totals__ghost {
  background: rgba(245,239,226,.15); color: #fff;
  padding: 11px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: 0; font-family: inherit;
  text-decoration: none;
}
.qo-totals__ghost:hover { background: rgba(245,239,226,.25) }

@media (max-width: 900px) {
  .qo-totals { left: 0 }
  .qo-table-wrap { margin: 0 12px 100px }
  .qo-toolbar { padding: 10px 12px }
  /* Hide some less-critical columns on mobile */
  .qo-table thead th.qo-col-hide-mobile,
  .qo-row td.qo-col-hide-mobile { display: none }
  .qo-totals { gap: 12px }
  .qo-totals__sep { display: none }
}

/* Hide old variant-grid sections when in dense table mode */
.qorder-section { display: none !important }
.qorder-floater { display: none !important }

/* ===== Quick Order · Option A · Slim title bar + combined toolbar ===== */

/* Hide old supbar + catbar + utility row from previous redesign */
.direct-app .qorder-supbar { display: none }
.direct-app .qorder-catbar { display: none }
.direct-app .qorder-util { display: none }

/* Slim title bar (~48px) */
.qo-titlebar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: #fff;
  border-bottom: 1px solid #dde6e8;
}
.qo-titlebar__title { flex: 1; display: flex; align-items: baseline; gap: 10px }
.qo-titlebar__title h1 {
  margin: 0; font-size: 17px; font-weight: 800; color: #0d2c34; line-height: 1;
}
.qo-titlebar__sub { font-size: 12.5px; color: #5f7780 }
.qo-titlebar__chip {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.qo-titlebar__actions { display: flex; align-items: center; gap: 8px }
.qo-titlebar__info {
  background: #f5efe2; border: 1px solid #dde6e8;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #133e4c;
}
.qo-titlebar__info:hover { background: #cee0e4 }
.qo-titlebar__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1d4f5e; color: #fff; text-decoration: none;
  padding: 9px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700;
}
.qo-titlebar__cta:hover { background: #133e4c }
.qo-titlebar__cta svg { width: 14px; height: 14px }

/* Combined toolbar */
.direct-app .qo-toolbar {
  position: sticky; top: 0; z-index: 50;
}

/* Category picker dropdown */
.qo-toolbar__catpicker, .qo-toolbar__loadpicker { position: relative }
.qo-toolbar__catbtn, .qo-toolbar__loadbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #dde6e8;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: #0d2c34;
  cursor: pointer; font-family: inherit;
}
.qo-toolbar__catbtn:hover, .qo-toolbar__loadbtn:hover { border-color: #1d4f5e; background: #f5efe2 }
.qo-toolbar__loadbtn { background: #cee0e4; border-color: #9ec2cc }
.qo-toolbar__loadbtn:hover { background: #9ec2cc }

.qo-toolbar__catmenu, .qo-toolbar__loadmenu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border: 1px solid #dde6e8;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(13, 44, 52, .12);
  min-width: 240px; z-index: 60;
  display: none; flex-direction: column; padding: 6px;
}
.qo-toolbar__catmenu.is-open, .qo-toolbar__loadmenu.is-open { display: flex }

.qo-toolbar__catmenu button {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0;
  padding: 8px 12px; border-radius: 6px;
  font-size: 12.5px; color: #0d2c34; font-weight: 600;
  cursor: pointer; font-family: inherit;
  text-align: left;
}
.qo-toolbar__catmenu button:hover { background: #f5efe2 }
.qo-toolbar__catmenu button.is-active { background: #1d4f5e; color: #fff }
.qo-toolbar__catmenu button.is-active span { color: #9ec2cc }
.qo-toolbar__catmenu button span {
  font-size: 11px; color: #94a3b8; font-weight: 700;
}

.qo-toolbar__loadmenu { min-width: 280px }
.qo-load__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  text-decoration: none; color: inherit;
  font-family: inherit;
}
.qo-load__item:hover { background: #f5efe2 }
.qo-load__item strong { display: block; color: #0d2c34; font-size: 12.5px; font-weight: 700 }
.qo-load__item small { display: block; color: #5f7780; font-size: 11px; margin-top: 1px }
.qo-load__ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #cee0e4, #9ec2cc); color: #133e4c;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}

/* Bulk action icons buttons (square, compact) */
.qo-toolbar__btn[title] { padding: 8px 10px; min-width: 36px; font-size: 14px }

/* Adjust sticky positions since we removed bars */
.qo-table thead th { top: var(--qo-thead-top, 62px) }

@media (max-width: 900px) {
  .qo-titlebar { padding: 10px 14px }
  .qo-titlebar__title h1 { font-size: 15px }
  .qo-titlebar__sub { display: none }
  .qo-toolbar { padding: 8px 14px; flex-wrap: wrap }
  .qo-table thead th { top: var(--qo-thead-top, 110px) }
}

/* ===== Quick Order · Grid view (visual cards) ===== */

.qo-grid-wrap {
  padding: 14px 22px 100px;
}

.qo-grid-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid #dde6e8;
}
.qo-grid-section-head h3 {
  margin: 0; font-size: 14px; font-weight: 800; color: #0d2c34;
}
.qo-grid-section-head__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: #1d4f5e; color: #fff; font-size: 11px;
}
.qo-grid-section-head__count {
  font-size: 11px; color: #5f7780;
  margin-left: auto;
  background: #f5efe2; padding: 2px 8px; border-radius: 999px;
}

.qo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.qo-gcard {
  background: #fff; border: 1px solid #dde6e8; border-radius: 11px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .15s ease;
  position: relative;
}
.qo-gcard:hover { border-color: #1d4f5e; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(13, 44, 52, .07) }
.qo-gcard.is-added {
  border-color: #1d4f5e; background: linear-gradient(180deg, #ecfdf5 0%, #fff 30%);
  box-shadow: 0 0 0 2px rgba(29, 79, 94, .15);
}

.qo-gcard__media {
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.qo-gcard__last {
  position: absolute; top: 9px; left: 9px;
  background: #faedd6; color: #7a4d12;
  padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 700;
}

.qo-gcard__body {
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.qo-gcard__name {
  font-size: 12.5px; font-weight: 700; color: #0d2c34;
  line-height: 1.25; text-decoration: none;
}
.qo-gcard__name:hover { color: #1d4f5e; text-decoration: underline }

.qo-gcard__meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #5f7780 }
.qo-gcard__sku {
  background: #f5efe2; color: #133e4c;
  font-family: ui-monospace, Menlo, monospace;
  padding: 1px 6px; border-radius: 4px; font-size: 10.5px;
}

.qo-gcard__price-row {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 0; border-top: 1px solid #ece4d4; border-bottom: 1px solid #ece4d4;
}
.qo-gcard__price { font-size: 16px; font-weight: 800; color: #133e4c }
.qo-gcard__list { font-size: 11px; color: #94a3b8; text-decoration: line-through }
.qo-gcard__save {
  margin-left: auto;
  background: #1d4f5e; color: #fff;
  font-size: 9.5px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px;
}

.qo-gcard__stock {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #475569;
}
.qo-gcard__stock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a;
}
.qo-gcard__stock-dot--low { background: #f59e0b }
.qo-gcard__stock-dot--mto { background: #7c3aed }
.qo-gcard__stock-dot--out { background: #dc2626 }

.qo-gcard__embr {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #334155; cursor: pointer;
  padding: 2px 0;
}
.qo-gcard__embr input { accent-color: #1d4f5e; width: 13px; height: 13px; cursor: pointer }

.qo-gcard__qty-row {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: 4px;
}
.qo-gcard__total {
  font-size: 13px; font-weight: 800; color: #133e4c;
  text-align: right; flex: 1;
}
.qo-gcard__total.qo-row__total--empty { color: #cbd5e1; font-weight: 400 }

/* Hidden state when filtering */
.qo-gcard.is-hidden { display: none }
.qo-grid-section-head.is-hidden { display: none }

@media (max-width: 600px) {
  .qo-grid { grid-template-columns: repeat(2, 1fr) }
  .qo-grid-wrap { padding: 12px 14px 100px }
}

/* ===== Quick Order · Multi add-on popover (Pattern A) ===== */

/* The "+ Add-ons" trigger button */
.qo-addons-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px dashed #cbd5e1;
  color: #1d4f5e; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700;
  padding: 5px 9px; border-radius: 7px;
  white-space: nowrap; transition: all .12s ease;
}
.qo-addons-btn:hover { border-color: #1d4f5e; background: #f5efe2 }
.qo-addons-btn.has-selected {
  border-style: solid; border-color: #1d4f5e;
  background: #cee0e4; color: #133e4c;
}
.qo-addons-btn__count {
  background: #1d4f5e; color: #fff;
  font-size: 9.5px; font-weight: 800;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Grid card: add-on chips shown below the button */
.qo-gcard__addons { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 }
.qo-addon-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px }
.qo-addon-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: #ecfdf5; color: #047857;
  font-size: 9.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
}

/* The popover */
.qo-addon-pop {
  position: fixed; z-index: 200;
  background: #fff; border: 1px solid #dde6e8;
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(13, 44, 52, .18);
  width: 280px; padding: 6px;
  display: none;
}
.qo-addon-pop.is-open { display: block }
.qo-addon-pop__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid #ece4d4; margin-bottom: 4px;
}
.qo-addon-pop__title { font-size: 12px; font-weight: 800; color: #0d2c34 }
.qo-addon-pop__close {
  background: none; border: 0; cursor: pointer; color: #94a3b8;
  font-size: 16px; line-height: 1; padding: 0;
}
.qo-addon-pop__close:hover { color: #0d2c34 }

.qo-addon-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; transition: background .1s ease;
}
.qo-addon-opt:hover { background: #f5efe2 }
.qo-addon-opt.is-on { background: #ecfdf5 }
.qo-addon-opt input { accent-color: #1d4f5e; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0 }
.qo-addon-opt__body { flex: 1; min-width: 0 }
.qo-addon-opt__name { font-size: 12px; font-weight: 700; color: #0d2c34; line-height: 1.2 }
.qo-addon-opt__sub { font-size: 10.5px; color: #5f7780; margin-top: 1px }
.qo-addon-opt__cost { font-size: 12px; font-weight: 800; color: #133e4c; white-space: nowrap }
.qo-addon-opt__cost--free { color: #16a34a }

.qo-addon-pop__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 4px;
  border-top: 1px solid #ece4d4; margin-top: 4px;
}
.qo-addon-pop__sum { font-size: 11.5px; color: #5f7780 }
.qo-addon-pop__sum strong { color: #133e4c; font-weight: 800 }
.qo-addon-pop__done {
  background: #1d4f5e; color: #fff; border: 0;
  padding: 6px 14px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.qo-addon-pop__done:hover { background: #133e4c }

/* List row addons cell shows compact button + tiny chip summary */
.qo-row__addons { white-space: nowrap }
.qo-row__addons .qo-addon-chips { display: none } /* keep list compact; count shown on button */

/* ===== Direct portal · collapsible sidebar ===== */

/* Toggle button (injected via JS) */
.dsidebar__collapse {
  position: absolute; top: 14px; right: -12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 1px solid #dde6e8;
  color: #1d4f5e; cursor: pointer; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(13,44,52,.15);
  transition: transform .2s ease;
}
.dsidebar__collapse:hover { background: #f5efe2 }
.dsidebar__collapse svg { width: 13px; height: 13px; transition: transform .2s ease }
.dsidebar__collapse.is-collapsed svg { transform: rotate(180deg) }

/* Compact monogram shown only when collapsed (injected via JS) */
.dsidebar__mark {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #3d717e, #1d4f5e);
  color: #fff; font-weight: 800; font-size: 14px;
  align-items: center; justify-content: center;
  margin: 0 auto;
}

/* Positioning context for the collapse toggle — desktop only.
   On mobile (≤900px) the sidebar must stay position:fixed/off-canvas
   (set in the max-width:900px block above) so it doesn't reserve
   vertical flow height and push page content down. */
@media (min-width: 901px) {
  .dsidebar { position: relative }
}

/* ===== Collapsed state (desktop only) ===== */
@media (min-width: 901px) {
  .direct-app.is-collapsed { grid-template-columns: 72px 1fr }

  .direct-app.is-collapsed .dsidebar { padding: 18px 8px }

  /* Brand: hide full logo + eyebrow, show monogram */
  .direct-app.is-collapsed .dsidebar__brand-logo,
  .direct-app.is-collapsed .dsidebar__brand-eyebrow-row { display: none }
  .direct-app.is-collapsed .dsidebar__mark { display: flex }
  .direct-app.is-collapsed .dsidebar__brand { padding: 4px 0 14px; justify-content: center }

  /* Nav links: icon only (font-size:0 hides the bare text node + spans) */
  .direct-app.is-collapsed .dnav-link {
    justify-content: center; gap: 0; padding: 11px 0;
    font-size: 0;
  }
  .direct-app.is-collapsed .dnav-link__badge,
  .direct-app.is-collapsed .dnav-link span { display: none }
  .direct-app.is-collapsed .dnav-link__ic { width: 19px; height: 19px }

  /* Rep card: just the avatar */
  .direct-app.is-collapsed .dsidebar__rep-card {
    padding: 8px 0; background: transparent; border-color: transparent;
  }
  .direct-app.is-collapsed .dsidebar__rep-eyebrow,
  .direct-app.is-collapsed .dsidebar__rep-info,
  .direct-app.is-collapsed .dsidebar__rep-actions { display: none }
  .direct-app.is-collapsed .dsidebar__rep-body { justify-content: center }

  /* User card: just the avatar */
  .direct-app.is-collapsed .dsidebar__user { justify-content: center; padding: 8px 0 }
  .direct-app.is-collapsed .dsidebar__user-info { display: none }
  .direct-app.is-collapsed .dsidebar__exit { display: none }

  /* Quick Order totals bar follows the narrower sidebar */
  .direct-app.is-collapsed .qo-totals { left: 72px }
}

/* Hide collapse toggle on mobile (sidebar is off-canvas there) */
@media (max-width: 900px) {
  .dsidebar__collapse { display: none }
}

/* ===== Direct Catalog · List view (compact horizontal rows) ===== */
.cat-grid.cat-grid--list {
  grid-template-columns: 1fr;
  gap: 8px;
}
.cat-grid--list .cat-card {
  flex-direction: row;
  align-items: stretch;
}
.cat-grid--list .cat-card__media {
  width: 84px; height: auto; min-height: 76px;
  flex-shrink: 0;
}
.cat-grid--list .cat-card__media .cat-card__media-bag { width: 38px; height: 54px }
.cat-grid--list .cat-card__badge { font-size: 8.5px; padding: 2px 6px; top: 6px; left: 6px }
.cat-grid--list .cat-card__variants { display: none }  /* hide color dots in compact list */
.cat-grid--list .cat-card__body {
  flex-direction: row; align-items: center; gap: 18px;
  padding: 10px 16px; flex: 1; flex-wrap: wrap;
}
.cat-grid--list .cat-card__name { flex: 1 1 200px; min-width: 160px; font-size: 14px }
.cat-grid--list .cat-card__sku-line { flex: 0 0 auto; margin: 0 }
.cat-grid--list .cat-card__price-row {
  border: 0; padding: 0; margin: 0; width: auto; flex: 0 0 auto;
  flex-direction: column; align-items: flex-start; gap: 0;
}
.cat-grid--list .cat-card__stock { flex: 0 0 auto; margin: 0 }
.cat-grid--list .cat-card__view {
  border: 0; padding: 0; margin: 0 0 0 auto; width: auto; flex: 0 0 auto;
}
.cat-grid--list .cat-card__view-cta { width: auto; padding: 9px 16px }
.cat-grid--list .cat-card:hover { transform: none }  /* no lift in dense list */

@media (max-width: 700px) {
  .cat-grid--list .cat-card__body { gap: 8px; padding: 10px 12px }
  .cat-grid--list .cat-card__sku-line,
  .cat-grid--list .cat-card__stock { display: none }
  .cat-grid--list .cat-card__view { margin-left: auto }
}