/* ============================================================
   YESLAMU Vendor Portal
   Light commerce workspace — distinct from dark admin ops panel
   ============================================================ */

.vendor-body {
  min-height: 100vh;
  background: var(--mist-50);
  color: var(--fg-primary);
  font-family: var(--font-sans);
}

.vendor-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
}

/* Sidebar */
.vendor-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  background: var(--white);
  border-right: 1px solid var(--divider);
  box-shadow: 4px 0 24px rgba(11, 27, 59, 0.04);
  z-index: 30;
  scrollbar-width: thin;
  scrollbar-color: var(--divider) transparent;
}

.vendor-sidebar::-webkit-scrollbar {
  width: 6px;
}

.vendor-sidebar::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 999px;
}

.vendor-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--indigo);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  padding: 4px 8px;
}

.vendor-brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
}

.vendor-brand i {
  color: var(--teal);
  font-style: normal;
}

.vendor-workspace-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 8px 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--teal-100);
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vendor-workspace-tag svg {
  width: 14px;
  height: 14px;
}

.vendor-store-card {
  margin: 12px 4px 20px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-600) 100%);
  color: var(--fg-onDark);
}

.vendor-store-card small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-onDark-dim);
}

.vendor-store-card strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.vendor-store-card p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(234, 238, 247, 0.78);
}

.vendor-nav-group {
  margin-bottom: 18px;
}

.vendor-nav-label {
  margin: 0 10px 8px;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vendor-nav {
  display: grid;
  gap: 4px;
}

.vendor-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--fg-secondary);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.vendor-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.vendor-nav a:hover {
  background: var(--mist-100);
  color: var(--indigo);
}

.vendor-nav a.is-active {
  background: var(--indigo);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(11, 27, 59, 0.18);
}

.vendor-nav a.is-active svg {
  opacity: 1;
}

.vendor-nav-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--saffron-100);
  color: var(--saffron-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vendor-nav a.is-active .vendor-nav-badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.vendor-sidebar-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  display: grid;
  gap: 6px;
}

.vendor-sidebar-foot a,
.vendor-sidebar-foot button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.vendor-sidebar-foot a:hover,
.vendor-sidebar-foot button:hover {
  background: var(--mist-100);
  color: var(--indigo);
}

.vendor-sidebar-foot svg {
  width: 16px;
  height: 16px;
}

/* Main area */
.vendor-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vendor-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(250, 251, 254, 0.92);
  border-bottom: 1px solid var(--divider);
  backdrop-filter: blur(12px);
}

.vendor-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.vendor-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--indigo);
  cursor: pointer;
}

.vendor-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vendor-content {
  flex: 1;
  padding: 24px 28px 40px;
}

/* Page header */
.vendor-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.vendor-page-head h1 {
  margin: 6px 0 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--indigo);
  line-height: 1.15;
}

.vendor-page-head p {
  margin: 8px 0 0;
  max-width: 56ch;
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.vendor-eyebrow {
  display: inline-block;
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Buttons */
.vendor-btn,
.vendor-btn-secondary,
.vendor-btn-danger,
.vendor-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* .vendor-btn-sm's own `display: inline-flex` beats the browser's
   [hidden] { display: none }, so the JS-toggled "Add color"/"Add size"
   buttons need this to actually disappear on a one-of-a-kind product. */
.vendor-btn-sm[hidden] {
  display: none;
}


.vendor-btn svg,
.vendor-btn-secondary svg,
.vendor-btn-danger svg,
.vendor-btn-sm svg {
  width: 16px;
  height: 16px;
}

.vendor-btn {
  background: var(--indigo);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(11, 27, 59, 0.16);
}

.vendor-btn:hover {
  background: var(--indigo-700);
  transform: translateY(-1px);
}

.vendor-btn-secondary {
  background: var(--white);
  color: var(--indigo);
  border-color: var(--border);
}

.vendor-btn-secondary:hover {
  background: var(--mist-100);
}

.vendor-btn-danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.18);
}

.vendor-btn-danger:hover {
  background: #fee2e2;
}

.vendor-btn-sm {
  padding: 8px 12px;
  font-size: 13px;
  background: var(--white);
  color: var(--indigo);
  border-color: var(--border);
}

.vendor-btn-sm-primary {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

.vendor-link {
  color: var(--teal-700);
  font-weight: 600;
  font-size: 13px;
}

.vendor-link:hover {
  color: var(--indigo);
}

/* Alerts */
.vendor-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--success-bg);
  border: 1px solid rgba(22, 163, 123, 0.2);
  color: var(--success);
  font-size: 14px;
  font-weight: 500;
}

.vendor-flash-error {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
}

.vendor-flash-warn {
  background: var(--saffron-100);
  border-color: rgba(217, 119, 6, 0.22);
  color: var(--saffron-700);
}

.vendor-flash svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Stats */
.vendor-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.vendor-stat-grid--narrow {
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
}

.vendor-stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: 0 6px 18px rgba(11, 27, 59, 0.04);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.vendor-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(11, 27, 59, 0.08);
}

.vendor-stat-card span {
  display: block;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
}

.vendor-stat-card strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--indigo);
  line-height: 1;
}

.vendor-stat-card .vendor-stat-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mist-100);
  color: var(--indigo-500);
}

.vendor-stat-card .vendor-stat-icon svg {
  width: 18px;
  height: 18px;
}

.vendor-stat-card.tone-warn .vendor-stat-icon {
  background: var(--saffron-100);
  color: var(--saffron-700);
}

.vendor-stat-card.tone-warn strong {
  color: var(--saffron-700);
}

.vendor-stat-card.tone-danger .vendor-stat-icon {
  background: #fef2f2;
  color: #b91c1c;
}

.vendor-stat-card.tone-danger strong {
  color: #b91c1c;
}

.vendor-stat-card.tone-good .vendor-stat-icon {
  background: var(--teal-100);
  color: var(--teal-700);
}

/* Welcome banner */
.vendor-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-500) 55%, var(--teal-600) 100%);
  color: var(--white);
}

.vendor-welcome h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vendor-welcome p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.55;
}

.vendor-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vendor-welcome .vendor-btn {
  background: var(--white);
  color: var(--indigo);
  box-shadow: none;
}

.vendor-welcome .vendor-btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Revenue strip */
.vendor-revenue-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 22px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: 0 6px 18px rgba(11, 27, 59, 0.04);
}

.vendor-revenue-item {
  display: block;
  padding: 8px 12px;
  margin: -8px -12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease;
}

a.vendor-revenue-item:hover {
  background: var(--mist-50);
}

.vendor-revenue-item .vendor-detail-meta-label em {
  margin-left: 4px;
  color: var(--fg-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.vendor-revenue-item strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--indigo);
}

.vendor-revenue-item strong small {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}

.vendor-revenue-item strong.is-due {
  color: var(--saffron-700);
}

.vendor-revenue-item strong.is-settled {
  color: var(--teal-700);
}

.vendor-revenue-cta {
  margin-left: auto;
  flex: none;
}

@media (max-width: 900px) {
  .vendor-revenue-strip {
    flex-wrap: wrap;
    gap: 16px;
  }

  .vendor-revenue-cta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* Today at a glance — clickable spotlight cards */
.vendor-today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.vendor-today-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: 0 6px 18px rgba(11, 27, 59, 0.04);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.vendor-today-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(11, 27, 59, 0.08);
}

.vendor-today-card.is-empty {
  opacity: 0.75;
}

.vendor-today-card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--mist-100);
  color: var(--indigo);
}

.vendor-today-card-icon svg {
  width: 24px;
  height: 24px;
}

.vendor-today-card-thumb {
  background-size: cover;
  background-position: center;
}

.vendor-today-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.vendor-today-card-body strong {
  display: block;
  margin-top: 2px;
  color: var(--indigo);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendor-today-card-body small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 13px;
}

.vendor-today-card-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--fg-muted);
}

@media (max-width: 720px) {
  .vendor-today-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard — "Needs your attention" alerts */
.vendor-attention-card {
  margin-bottom: 18px;
  border-color: rgba(217, 119, 6, 0.28);
}

.vendor-attention-card.is-clear {
  border-color: var(--divider);
}

.vendor-attention-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-secondary);
  font-size: 14px;
}

.vendor-attention-clear svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--teal-700);
}

.vendor-attention-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vendor-attention-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.vendor-attention-row:hover {
  background: var(--mist-50);
}

.vendor-attention-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mist-100);
  color: var(--indigo-500);
}

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

.vendor-attention-icon.is-info {
  background: #e8f0ff;
  color: var(--indigo-500);
}

.vendor-attention-icon.is-warn {
  background: var(--saffron-100);
  color: var(--saffron-700);
}

.vendor-attention-icon.is-danger {
  background: #fef2f2;
  color: #b91c1c;
}

.vendor-attention-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.vendor-attention-copy strong {
  display: block;
  color: var(--indigo);
  font-size: 14px;
  font-weight: 700;
}

.vendor-attention-copy small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12.5px;
}

.vendor-attention-arrow {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
}

/* Cards & layout */
.vendor-page {
  display: grid;
  gap: 18px;
}

.vendor-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.vendor-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: 0 8px 24px rgba(11, 27, 59, 0.04);
}

.vendor-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* Same [hidden]-losing-to-a-same-specificity-display-rule issue as
   .vendor-btn* — needed wherever a .vendor-card-head itself gets toggled
   hidden (e.g. the Sizes & Stock step head for handmade preorder items). */
.vendor-card-head[hidden] {
  display: none;
}

.vendor-card-head h2 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--indigo);
}

.vendor-card-head p {
  margin: 6px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
}

/* Forms */
.vendor-filter-form,
.vendor-form {
  display: grid;
  gap: 14px;
}

.vendor-filter-form {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  align-items: end;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--divider);
}

.vendor-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 11px;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.vendor-filter-checkbox input {
  width: auto;
  accent-color: var(--teal);
}

/* .vendor-field label/input rules below are the same specificity family as
   .vendor-filter-checkbox's own rules but declared later, so they win
   whenever a checkbox+label combo lives inside a .vendor-field wrapper —
   without this, .vendor-field input's `width: 100%` stretches the checkbox
   itself into an invisible full-width box, shoving its text far to the
   right, and .vendor-field label's `display: block` drops the flex row
   entirely. */
/* Inside a .vendor-field the checkbox is a standalone option sitting in the
   wizard's two-column grid beside ordinary label+input fields, so it's boxed
   to carry the same visual weight and to make an enabled option obvious at a
   glance. Border/hover/checked treatment matches .vendor-method-choice.
   Deliberately scoped: the bare .vendor-filter-checkbox belongs to the dense
   filter bars, where a box per checkbox would be noise. */
.vendor-field .vendor-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Deliberately natural height, not height:100%. These sit in a two-column
     grid whose rows pair checkbox with checkbox, so stretching gains nothing
     — and would blow one card up to the height of a label+input+hint field
     if the grid ever pairs them, leaving a mostly-empty box. */
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--white);
  line-height: 1.45;
  white-space: normal;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vendor-field .vendor-filter-checkbox:hover {
  border-color: var(--teal);
}

.vendor-field .vendor-filter-checkbox:has(input:checked) {
  border-color: var(--teal);
  background: var(--mist-50);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.14);
}

/* The native checkbox's focus ring is invisible against the new border, so
   the card itself takes the keyboard focus treatment. */
.vendor-field .vendor-filter-checkbox:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.14);
}

.vendor-field .vendor-filter-checkbox input {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
}

.vendor-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
}

.vendor-field input,
.vendor-field select,
.vendor-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--fg-primary);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vendor-field input:focus,
.vendor-field select:focus,
.vendor-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.18);
}

.vendor-field input[readonly] {
  background: var(--mist-50);
  color: var(--fg-muted);
  cursor: default;
}

.vendor-field input[readonly]:focus {
  box-shadow: none;
}

.vendor-field textarea {
  resize: vertical;
  min-height: 110px;
}

/* Category picker (product form) */
.vendor-category-picker {
  position: relative;
}

.vendor-category-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--fg-primary);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vendor-category-picker-trigger::-webkit-details-marker {
  display: none;
}

.vendor-category-picker[open] .vendor-category-picker-trigger {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.18);
}

.vendor-category-picker-trigger svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  transition: transform 0.15s ease;
}

.vendor-category-picker[open] .vendor-category-picker-trigger svg {
  transform: rotate(180deg);
}

.vendor-category-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 16px 40px rgba(11, 27, 59, 0.14);
}

.vendor-category-picker-group + .vendor-category-picker-group {
  margin-top: 2px;
}

.vendor-category-picker-parent-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.vendor-category-picker-option {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-primary);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.vendor-category-picker-option:hover {
  background: var(--mist-100);
}

.vendor-category-picker-option.is-selected {
  background: var(--teal-100);
  color: var(--teal-700);
  font-weight: 600;
}

.vendor-category-picker-option--child {
  font-size: 13px;
  color: var(--fg-secondary);
}

.vendor-category-picker-expand {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.15s ease;
}

.vendor-category-picker-expand:hover {
  background: var(--mist-100);
}

.vendor-category-picker-expand svg {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}

.vendor-category-picker-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.vendor-category-picker-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 4px 14px;
  border-left: 1px dashed var(--border);
  margin-left: 15px;
}

.vendor-category-picker-children[hidden] {
  display: none;
}

/* Tables */
.vendor-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--divider);
}

/* Compact dashboard mini-lists (latest products, recent orders) */
.vendor-mini-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vendor-mini-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--divider);
  text-decoration: none;
  transition: background 0.15s ease;
}

.vendor-mini-list li:last-child .vendor-mini-list-row {
  border-bottom: none;
}

.vendor-mini-list-row:hover {
  background: var(--mist-50);
}

.vendor-mini-list-row .vendor-products-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
}

.vendor-top-product-rank {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mist-100);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 800;
}

.vendor-mini-list li:first-child .vendor-top-product-rank {
  background: var(--saffron-100);
  color: var(--saffron-700);
}

.vendor-mini-list-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.vendor-mini-list-copy b {
  display: block;
  color: var(--indigo);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendor-mini-list-copy small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

.vendor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.vendor-table th,
.vendor-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
}

.vendor-table th {
  background: var(--mist-50);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vendor-table tbody tr:hover {
  background: var(--mist-50);
}

.vendor-table td b {
  color: var(--indigo);
  font-weight: 700;
}

.vendor-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mist-200);
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 700;
}

.vendor-badge.is-pending {
  background: var(--saffron-100);
  color: var(--saffron-700);
}

.vendor-badge.is-active,
.vendor-badge.is-delivered {
  background: var(--teal-100);
  color: var(--teal-700);
}

.vendor-badge.is-draft,
.vendor-badge.is-inactive,
.vendor-badge.is-cancelled {
  background: var(--mist-200);
  color: var(--slate-600);
}

.vendor-badge.is-processing,
.vendor-badge.is-shipped {
  background: #e8f0ff;
  color: var(--indigo-500);
}

/* Matches the admin panel's Accepted/Rejected order-item badge colors
   exactly (admin-badge-good/admin-badge-danger), rather than reusing
   is-active/is-cancelled — those are shared with other vendor pages
   (import preview, revenue) for unrelated states, and is-cancelled in
   particular is a muted grey, not the red "rejected" reads as elsewhere. */
.vendor-badge.is-approved {
  background: #e8f8ef;
  color: #0f8f4d;
}

.vendor-badge.is-rejected {
  background: #fff5f5;
  color: #dc2626;
}

.vendor-order-guest-tag {
  margin-inline-start: 6px;
}

.vendor-status-toggle-form {
  margin: 0;
}

.vendor-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.vendor-status-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vendor-status-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--mist-300, #d5dde8);
  transition: background var(--dur-fast, 0.15s);
}

.vendor-status-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: transform var(--dur-fast, 0.15s);
}

.vendor-status-toggle input:checked + .vendor-status-toggle-track {
  background: var(--teal);
}

.vendor-status-toggle input:checked + .vendor-status-toggle-track::after {
  transform: translateX(16px);
}

.vendor-status-toggle-label {
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.vendor-status-toggle input:checked ~ .vendor-status-toggle-label {
  color: var(--teal-700);
}

/* Toolbar card (search + filters, split out as its own card) */
.vendor-card-toolbar .vendor-filter-form {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Count chip, next to a card-head heading */
.vendor-hero-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mist-100);
  color: var(--indigo);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Rich empty state (icon circle + heading + copy + CTA) */
.vendor-hero-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
}

.vendor-hero-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--mist-100);
  color: var(--indigo);
}

.vendor-hero-empty-icon svg {
  width: 26px;
  height: 26px;
}

.vendor-hero-empty h3 {
  margin: 0;
  color: var(--indigo);
  font-size: 18px;
}

.vendor-hero-empty p {
  margin: 0;
  max-width: 420px;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Products table (image + product + category + price + status + actions) */
.vendor-products-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--divider);
}

.vendor-products-table-head,
.vendor-products-table-row {
  display: grid;
  grid-template-columns: 72px minmax(200px, 1.6fr) minmax(110px, 1fr) 100px 120px 76px;
  gap: 14px;
  align-items: center;
}

.vendor-products-table-head {
  padding: 12px 16px;
  background: var(--mist-50);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--divider);
}

.vendor-products-table-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vendor-products-table-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  transition: background 0.15s ease;
}

.vendor-products-table-row:last-child {
  border-bottom: none;
}

.vendor-products-table-row:hover {
  background: var(--mist-50);
}

.vendor-products-thumb {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--mist-100) center/cover no-repeat;
  border: 1px solid var(--divider);
}

.vendor-products-thumb--icon {
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}

.vendor-products-thumb--icon svg {
  width: 20px;
  height: 20px;
}

.vendor-products-name {
  display: block;
  color: var(--indigo);
  font-weight: 700;
  text-decoration: none;
}

.vendor-products-name:hover {
  color: var(--teal-700);
}

.vendor-products-col-product small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

.vendor-products-col-price strong {
  color: var(--indigo);
}

.vendor-products-col-price small {
  color: var(--fg-muted);
  margin-left: 2px;
}

.vendor-products-col-actions {
  display: flex;
  gap: 6px;
}

.vendor-table-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--indigo);
  transition: background 0.15s ease, color 0.15s ease;
}

.vendor-table-icon-btn:hover {
  background: var(--mist-100);
  color: var(--teal-700);
}

.vendor-table-icon-btn svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 900px) {
  .vendor-products-table-head {
    display: none;
  }

  .vendor-products-table-row {
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "image product"
      "image category"
      "image price"
      "image status"
      "image actions";
    row-gap: 6px;
  }

  .vendor-products-col-image { grid-area: image; }
  .vendor-products-col-product { grid-area: product; }
  .vendor-products-col-category { grid-area: category; }
  .vendor-products-col-price { grid-area: price; }
  .vendor-products-col-status { grid-area: status; }
  .vendor-products-col-actions { grid-area: actions; }
}

/* Status tabs (orders / payouts filter headers) */
.vendor-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.vendor-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--white);
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vendor-status-tab:hover {
  border-color: var(--teal);
  color: var(--teal-700);
}

.vendor-status-tab span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mist-100);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
}

.vendor-status-tab.is-active {
  border-color: var(--indigo);
  background: var(--indigo);
  color: var(--white);
}

.vendor-status-tab.is-active span {
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
}

/* Filter card (orders / payouts) — search + collapsible advanced panel */
.vendor-filters-card {
  padding: 18px 22px;
  margin-bottom: 14px;
}

.vendor-filters-form {
  display: grid;
  gap: 0;
}

.vendor-filters-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vendor-filters-search {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.vendor-filters-search svg {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  pointer-events: none;
}

.vendor-filters-search input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--fg-primary);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vendor-filters-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.18);
}

.vendor-filters-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--fg-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.vendor-filters-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
}

.vendor-filters-toggle:hover,
.vendor-filters-toggle.is-active {
  border-color: var(--teal);
  color: var(--teal-700);
  background: var(--mist-50);
}

.vendor-filters-toggle.is-active svg {
  color: var(--teal-700);
}

.vendor-filters-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.vendor-filters-panel[hidden] {
  display: none !important;
}

.vendor-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
}

.vendor-filters-grid .vendor-field input[type="date"] {
  color-scheme: light;
}

.vendor-filters-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.vendor-filters-clear {
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vendor-filters-clear:hover {
  color: var(--indigo);
}

@media (max-width: 960px) {
  .vendor-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .vendor-filters-top {
    flex-direction: column;
    align-items: stretch;
  }

  .vendor-filters-toggle {
    justify-content: center;
  }

  .vendor-filters-grid {
    grid-template-columns: 1fr;
  }
}

/* CSV import */
.vendor-import-steps {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--divider);
}

.vendor-import-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.vendor-import-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.vendor-import-step strong {
  display: block;
  color: var(--indigo);
  font-size: 14px;
}

.vendor-import-step p {
  margin: 4px 0 10px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 60ch;
}

.vendor-import-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.vendor-import-form .vendor-field {
  flex: 1 1 280px;
}

.vendor-import-review-list {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.vendor-import-review-row {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--divider);
  background: var(--mist-50);
}

.vendor-import-review-row.is-ready {
  border-color: var(--teal-100);
}

.vendor-import-review-row.is-error {
  background: #fef2f2;
  border-color: #fecaca;
}

.vendor-import-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vendor-import-review-head strong {
  display: block;
  color: var(--indigo);
  font-size: 15px;
}

.vendor-import-review-head small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

.vendor-import-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  color: var(--fg-secondary);
  font-size: 13px;
}

.vendor-import-review-errors,
.vendor-import-review-warnings {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.vendor-import-review-errors li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #b91c1c;
}

.vendor-import-review-warnings li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--saffron-700);
}

.vendor-import-review-errors svg,
.vendor-import-review-warnings svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
}

.vendor-import-confirm {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

/* Product detail page (read-only) */
.vendor-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.vendor-detail-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex: none;
}

.vendor-detail-head-copy {
  flex: 1 1 auto;
}

.vendor-detail-head-copy h2 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--indigo);
}

.vendor-detail-head-copy p {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
}

.vendor-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.vendor-detail-meta-label {
  display: block;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vendor-detail-meta strong {
  display: block;
  margin-top: 4px;
  color: var(--indigo);
  font-size: 16px;
}

.vendor-detail-meta strong.is-due {
  color: var(--saffron-700);
}

.vendor-detail-meta strong.is-settled {
  color: var(--teal-700);
}

.vendor-detail-meta small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

.vendor-detail-description {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.vendor-detail-description p {
  margin: 6px 0 0;
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.vendor-detail-color-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.vendor-detail-color-head .vendor-color-swatch-preview {
  margin-top: 0;
}

.vendor-detail-color-head strong {
  display: block;
  color: var(--indigo);
  font-size: 15px;
}

.vendor-detail-code-chip {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.vendor-detail-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.vendor-detail-gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  position: relative;
}

.vendor-detail-gallery-thumb.is-primary {
  box-shadow: 0 0 0 2px var(--teal);
}

.vendor-detail-size-table {
  border-radius: 12px;
  border: 1px solid var(--divider);
  overflow: hidden;
}

.vendor-detail-size-head,
.vendor-detail-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 10px 14px;
}

.vendor-detail-size-head {
  background: var(--mist-50);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vendor-detail-size-row {
  border-top: 1px solid var(--divider);
  font-size: 14px;
  color: var(--fg-secondary);
}

.vendor-detail-size-row span:first-child {
  font-weight: 700;
  color: var(--indigo);
}

.vendor-detail-size-row .is-out {
  color: #dc2626;
  font-weight: 700;
}

.vendor-detail-no-sizes {
  margin: 0;
  color: var(--fg-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .vendor-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vendor-detail-size-head {
    display: none;
  }

  .vendor-detail-size-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
  }
}

/* Payout method chooser */
.vendor-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.vendor-method-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vendor-method-choice:hover {
  border-color: var(--teal);
}

.vendor-method-choice:has(input:checked) {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.14);
}

.vendor-method-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.vendor-method-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--mist-100);
  color: var(--indigo-500);
}

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

.vendor-method-choice:has(input:checked) .vendor-method-icon {
  background: var(--teal);
  color: var(--white);
}

.vendor-method-choice b {
  display: block;
  font-size: 14px;
  color: var(--fg-primary);
}

.vendor-method-choice small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

.vendor-payout-balance {
  font-weight: 800;
}

.vendor-payout-balance.is-due {
  color: var(--saffron-700);
}

.vendor-payout-balance.is-settled {
  color: var(--teal-700);
}

.vendor-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

.vendor-empty svg {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--slate-400);
}

.vendor-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Order detail */
.vendor-order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.vendor-order-detail-grid > .vendor-card:nth-child(2) {
  grid-column: 1;
}

.vendor-order-side-card {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.vendor-order-summary-card {
  grid-column: 1;
}

.vendor-order-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.vendor-order-placed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
}

.vendor-order-placed svg {
  width: 13px;
  height: 13px;
}

.vendor-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.vendor-meta-grid > div {
  min-width: 0;
  border-inline-start: 1px solid var(--divider);
  padding-inline-start: 24px;
}

.vendor-meta-grid > div:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.vendor-meta-grid strong {
  color: var(--indigo);
}

.vendor-meta-grid p {
  margin: 6px 0 0;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.vendor-total-line {
  margin-top: 8px !important;
  font-size: 15px !important;
  color: var(--indigo) !important;
}

/* Fulfillment stepper */
.vendor-order-fulfillment {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.vendor-status-stepper {
  display: flex;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.vendor-status-stepper.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

.vendor-order-status-lock-hint {
  margin: 10px 0 0;
}

.vendor-stepper-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vendor-stepper-step::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--divider);
  z-index: 0;
}

.vendor-stepper-step:first-child::before { content: none; }
.vendor-stepper-step.is-done::before { background: var(--teal); }

.vendor-stepper-form { display: contents; }

.vendor-stepper-node {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--divider);
  border-radius: 50%;
  background: var(--white);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 800;
  cursor: default;
}

.vendor-stepper-node svg { width: 15px; height: 15px; }

button.vendor-stepper-node {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

button.vendor-stepper-node:hover {
  border-color: var(--teal);
  color: var(--teal-700);
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(11, 27, 59, 0.14);
}

.vendor-stepper-step.is-done .vendor-stepper-node {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--white);
}

.vendor-stepper-step.is-current .vendor-stepper-node {
  border-color: var(--teal);
  color: var(--teal-700);
  box-shadow: 0 0 0 4px var(--teal-100);
}

.vendor-stepper-step.is-upcoming button.vendor-stepper-node {
  border-style: dashed;
}

.vendor-stepper-label {
  margin-top: 8px;
  color: var(--fg-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.vendor-stepper-step.is-done .vendor-stepper-label,
.vendor-stepper-step.is-current .vendor-stepper-label {
  color: var(--indigo);
}

.vendor-order-cancelled-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 14px;
  background: #fef2f2;
}

.vendor-order-cancelled-banner > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: #b91c1c;
}

.vendor-order-cancelled-banner b { display: block; color: #b91c1c; font-size: 14px; }
.vendor-order-cancelled-banner small { display: block; margin-top: 2px; color: #c0433f; font-size: 12px; }

.vendor-order-accept-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 212, 180, 0.28);
  border-radius: 14px;
  background: var(--teal-100);
}

.vendor-order-accept-banner > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--teal-700);
}

.vendor-order-accept-banner b { display: block; color: var(--teal-700); font-size: 14px; }
.vendor-order-accept-banner small { display: block; margin-top: 2px; color: var(--fg-secondary); font-size: 12px; }

.vendor-order-accept-banner > div { flex: 1 1 auto; min-width: 200px; }

.vendor-order-accept-banner form { flex: none; }

.vendor-order-accept-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  margin-top: 2px;
}

/* Store closure */
.vendor-store-closure-card {
  margin-top: 18px;
}

.vendor-store-closure-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
}

.vendor-store-closure-banner > svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.vendor-store-closure-banner b { display: block; font-size: 14px; }
.vendor-store-closure-banner small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; }

.vendor-store-closure-banner--closed {
  border: 1px solid rgba(220, 38, 38, 0.18);
  background: #fef2f2;
}
.vendor-store-closure-banner--closed > svg { color: #b91c1c; }
.vendor-store-closure-banner--closed b { color: #b91c1c; }
.vendor-store-closure-banner--closed small { color: #c0433f; }

.vendor-store-closure-banner--pending {
  border: 1px solid rgba(245, 158, 11, 0.24);
  background: var(--saffron-100);
}
.vendor-store-closure-banner--pending > svg { color: var(--saffron-700); }
.vendor-store-closure-banner--pending b { color: var(--saffron-700); }
.vendor-store-closure-banner--pending small { color: var(--fg-secondary); }

.vendor-store-closure-banner--rejected {
  border: 1px solid var(--border);
  background: var(--mist-100);
  margin-bottom: 18px;
}
.vendor-store-closure-banner--rejected > svg { color: var(--slate-600); }
.vendor-store-closure-banner--rejected b { color: var(--slate-600); }
.vendor-store-closure-banner--rejected small { color: var(--fg-muted); }

.vendor-store-closure-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vendor-store-closure-details summary::-webkit-details-marker {
  display: none;
}

/* Line items */
.vendor-order-items-head {
  display: flex;
  /* Single row: the decision column is no longer in the header (it's
     full-width on each row and would force the header to wrap). */
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  color: var(--fg-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vendor-order-items-head .vendor-order-item-info { flex: 1 1 auto; }

.vendor-order-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--divider);
}

.vendor-order-item-row:first-child { border-top: 0; padding-top: 0; }

.vendor-order-item-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--divider);
  background: var(--mist-100) center / cover no-repeat;
}

.vendor-order-item-info { flex: 1 1 auto; min-width: 0; }

.vendor-order-item-info b {
  display: block;
  color: var(--indigo);
  font-size: 14px;
  font-weight: 700;
}

.vendor-order-item-info small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

/* Its own card below the row, not squeezed into the product-info column —
   makes it clear this came from the customer, not from your own product
   data. */
.vendor-order-item-customization {
  flex: 1 1 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.vendor-order-item-customization-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vendor-order-item-customization-label svg {
  width: 13px;
  height: 13px;
}
.vendor-order-item-customization-body {
  display: grid;
  gap: 6px;
}
.vendor-order-item-customization-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.vendor-order-item-customization-row span {
  flex: none;
  min-width: 90px;
  color: var(--fg-muted);
}
.vendor-order-item-customization-row strong {
  color: var(--ink);
  font-weight: 600;
}
.vendor-order-item-customization .vendor-order-item-image-link {
  margin-top: 2px;
}

.vendor-order-item-image-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.vendor-order-item-image-link:hover {
  text-decoration: underline;
}

.vendor-order-item-image-link svg {
  width: 13px;
  height: 13px;
}

.vendor-order-item-type { flex: none; }

.vendor-order-item-qty {
  flex: none;
  width: 56px;
  text-align: center;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
}

.vendor-order-item-unit {
  flex: none;
  width: 90px;
  text-align: right;
  color: var(--fg-muted);
  font-size: 13px;
}

.vendor-order-item-total {
  flex: none;
  width: 100px;
  text-align: right;
  color: var(--indigo);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vendor-order-item-decision {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--divider);
}

/* .vendor-field-hint's own margin-top:6px is meant for a hint line sitting
   below a form field — here it's next to the badge, not below anything,
   and that margin pushes it down out of line with the badge's text. */
.vendor-order-item-decision .vendor-field-hint {
  margin-top: 0;
}

.vendor-order-item-decision-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vendor-order-item-decision .vendor-badge svg {
  width: 12px;
  height: 12px;
  margin-inline-end: 3px;
  vertical-align: -2px;
}

/* Sidebar: delivery address, notes, map */
.vendor-order-address-block p {
  margin: 0 0 8px;
  color: var(--fg-primary);
  line-height: 1.5;
}

.vendor-order-note-block,
.vendor-order-notes p {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.6;
}

.vendor-order-notes {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.vendor-order-map {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--divider);
  margin-top: 14px;
}

@media (max-width: 1080px) {
  .vendor-order-detail-grid {
    grid-template-columns: 1fr;
  }
  .vendor-order-side-card,
  .vendor-order-summary-card,
  .vendor-order-detail-grid > .vendor-card:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }
  .vendor-meta-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vendor-meta-grid > div {
    border-inline-start: 0;
    padding-inline-start: 0;
    padding-top: 14px;
    border-top: 1px solid var(--divider);
  }
  .vendor-meta-grid > div:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 640px) {
  .vendor-order-items-head { display: none; }
  .vendor-order-item-row { flex-wrap: wrap; }
  .vendor-order-item-qty,
  .vendor-order-item-unit,
  .vendor-order-item-total { width: auto; text-align: left; }
  .vendor-status-stepper { align-items: flex-start; }
  .vendor-stepper-label { font-size: 10.5px; }
}

/* Pending page */
.vendor-pending-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 212, 180, 0.12), transparent 32%),
    linear-gradient(180deg, var(--mist-50) 0%, var(--mist-100) 100%);
}

.vendor-pending-shell {
  width: min(580px, 100%);
  display: grid;
  gap: 24px;
  justify-items: center;
}

.vendor-pending-card {
  width: 100%;
  padding: 32px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: 0 20px 50px rgba(11, 27, 59, 0.08);
}

.vendor-pending-card h1 {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--indigo);
}

.vendor-pending-card > p {
  margin: 10px 0 0;
  color: var(--fg-secondary);
  line-height: 1.6;
}

.vendor-pending-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--saffron-100);
  color: var(--saffron-700);
  font-size: 13px;
  font-weight: 700;
}

.vendor-pending-status svg {
  width: 16px;
  height: 16px;
}

.vendor-pending-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.vendor-pending-meta > div {
  padding: 14px;
  border-radius: 14px;
  background: var(--mist-50);
  border: 1px solid var(--divider);
}

.vendor-pending-meta small {
  display: block;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vendor-pending-meta strong {
  display: block;
  margin-top: 6px;
  color: var(--indigo);
  font-size: 15px;
}

.vendor-pending-note {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--teal-100);
  color: var(--teal-700);
  font-size: 13px;
  line-height: 1.55;
}

.vendor-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ============================================================
   Product builder (add/edit product wizard)
   ============================================================ */

/* Step indicator */
.vendor-builder-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--divider);
}

.vendor-builder-steps button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--white);
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vendor-builder-steps button::before {
  content: counter(vendor-step);
  counter-increment: vendor-step;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--mist-200);
  color: var(--fg-secondary);
  font-size: 11px;
  flex-shrink: 0;
}

.vendor-builder-steps {
  counter-reset: vendor-step;
}

.vendor-builder-steps button:hover {
  border-color: var(--teal);
}

.vendor-builder-workbench .vendor-builder-steps button.is-active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}

.vendor-builder-steps button.is-active::before {
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
}

/* Step 1: field grouping */
.vendor-builder-section {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--divider);
}

.vendor-builder-section:last-of-type {
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

.vendor-builder-section-title {
  margin: 0 0 14px;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vendor-required {
  color: #dc2626;
}

.vendor-field-hint {
  display: block;
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.5;
}

.vendor-field-hint[hidden] {
  display: none;
}

.vendor-field-error {
  display: block;
  margin-top: 6px;
  color: #b91c1c;
  font-size: 12px;
}

.vendor-builder-advanced {
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.vendor-builder-advanced summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vendor-builder-advanced summary::-webkit-details-marker {
  display: none;
}

.vendor-builder-advanced summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--fg-muted);
  border-bottom: 2px solid var(--fg-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.vendor-builder-advanced[open] summary::before {
  transform: rotate(45deg);
}

.vendor-builder-advanced summary span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mist-200);
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vendor-builder-advanced .vendor-field {
  margin-top: 14px;
}

.vendor-flash-error {
  align-items: flex-start;
}

/* Step 2: color cards */
.vendor-color-card {
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--mist-50);
}

.vendor-color-card + .vendor-color-card {
  margin-top: 14px;
}

.vendor-color-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.vendor-color-swatch-preview {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--divider);
  box-shadow: inset 0 0 0 3px var(--white);
  margin-top: 22px;
}

.vendor-color-card-head .vendor-builder-grid {
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.vendor-color-input-row {
  display: flex;
  gap: 8px;
}

.vendor-color-input-row input[type="color"] {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}

.vendor-color-input-row input[type="text"] {
  flex: 1 1 auto;
}

.vendor-btn-sm-danger {
  flex-shrink: 0;
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.18);
}

/* Only the "Remove color" button (next to a labeled input row in the
   product wizard) needs a top offset to clear the label above it — that
   offset doesn't belong on the shared .vendor-btn-sm-danger class itself,
   or every other use of it (e.g. the order page's Reject button) inherits
   an unrelated vertical shift and ends up misaligned against its sibling. */
.vendor-color-card-head .vendor-btn-sm-danger {
  margin-top: 22px;
}

.vendor-btn-sm-danger:hover {
  background: #fee2e2;
}

/* Image gallery */
.vendor-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.vendor-image-gallery-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.vendor-image-gallery-actions .vendor-field-hint {
  margin: 0;
}

.vendor-image-slot {
  width: 140px;
}

.vendor-image-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 140px;
  height: 140px;
  border: 1.5px dashed rgba(0, 212, 180, 0.4);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vendor-image-upload:hover {
  border-color: var(--teal);
  background: var(--teal-100);
}

.vendor-image-upload.has-image {
  border-style: solid;
  border-color: var(--divider);
}

.vendor-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 0 8px;
}

.vendor-image-placeholder svg {
  width: 22px;
  height: 22px;
  color: var(--teal-700);
}

.vendor-image-upload img[data-image-preview] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The site-wide `img { display: block; }` reset otherwise wins over the
   native [hidden] attribute, leaving an invisible-but-laid-out empty <img>
   box next to the placeholder until a file is actually chosen. */
.vendor-image-upload img[data-image-preview][hidden] {
  display: none;
}

/* Same cascade issue for the placeholder itself — .vendor-image-placeholder's
   own `display: flex` otherwise beats the [hidden] attribute once a file is
   chosen, leaving the "Upload image" icon/text overlaid on the new preview. */
.vendor-image-upload .vendor-image-placeholder[hidden] {
  display: none;
}

.vendor-image-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.vendor-image-slot-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}

.vendor-primary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-secondary);
  cursor: pointer;
}

.vendor-primary-toggle input[type="checkbox"] {
  accent-color: var(--teal-700);
  cursor: pointer;
}

.vendor-primary-toggle:has(input:checked) {
  color: var(--teal-700);
}

.vendor-image-remove-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  cursor: pointer;
}

.vendor-image-remove-btn svg {
  width: 13px;
  height: 13px;
}

.vendor-image-remove-btn:hover {
  background: #fee2e2;
}

.vendor-empty-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--mist-50);
  color: var(--fg-secondary);
  margin-bottom: 18px;
}

.vendor-empty-notice[hidden] {
  display: none;
}

.vendor-empty-notice svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--teal-700);
}

.vendor-empty-notice p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Step 3: size matrix */
.vendor-size-matrix-card {
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--mist-50);
}

.vendor-size-matrix-card + .vendor-size-matrix-card {
  margin-top: 14px;
}

.vendor-size-matrix-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.vendor-size-matrix-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.vendor-size-matrix-head strong {
  display: block;
  color: var(--fg-primary);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vendor-size-matrix-head small {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}

.vendor-swatch {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--divider);
  box-shadow: inset 0 0 0 2px var(--white);
}

.vendor-size-rows {
  display: grid;
  gap: 8px;
}

.vendor-size-row-headers,
.vendor-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 32px;
  gap: 8px;
  align-items: center;
}

.vendor-size-row-headers span {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vendor-size-row input,
.vendor-size-row select {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  background: var(--white);
  width: 100%;
}

.vendor-size-row input[readonly],
.vendor-size-row input:disabled {
  background: var(--mist-50);
  color: var(--fg-muted);
  cursor: default;
}

/* Stock on a limited-edition / one-of-a-kind product is fixed, so its input is
   read-only. Chrome still renders (and honours) the number spinner on a
   readonly input, which reads as editable — hide it so the field looks as
   locked as it is. The server discards submitted stock either way, see
   VendorPanelController::lockEditionStock(). */
.vendor-size-row input[data-size-stock-input][readonly]::-webkit-inner-spin-button,
.vendor-size-row input[data-size-stock-input][readonly]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vendor-size-row input[data-size-stock-input][readonly] {
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: not-allowed;
}

.vendor-size-row input:focus,
.vendor-size-row select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.16);
}

.vendor-size-field select {
  cursor: pointer;
}

.vendor-size-custom[hidden] {
  display: none !important;
}

.vendor-size-custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vendor-size-custom input {
  flex: 1 1 auto;
  min-width: 0;
}

.vendor-size-custom-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--mist-50);
  color: var(--fg-muted);
  cursor: pointer;
}

.vendor-size-custom-back svg {
  width: 13px;
  height: 13px;
}

.vendor-size-custom-back:hover {
  background: var(--mist-100);
  color: var(--fg-secondary);
}

.vendor-size-row-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  cursor: pointer;
}

.vendor-size-row-remove svg {
  width: 13px;
  height: 13px;
}

.vendor-size-row-remove:hover {
  background: #fee2e2;
}

.vendor-store-preview,
.vendor-store-hero {
  background: var(--mist-100);
}

/* Product wizard (create/edit) — six-step flow: Category, Product Info,
   Description, Colors & Photos, Sizes & Stock, Product Details. Reuses the
   .vendor-status-stepper/.vendor-stepper-* family from the order-fulfillment
   tracker above (same checkmark/current/upcoming state machine), but owns
   its own panel/grid/actions classes rather than the older, styles.css-only
   .vendor-builder-* set used by the (separate, unaffected) admin editor. */
.vendor-wizard-stepper-wrap {
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--divider);
}

.vendor-wizard-stepper-wrap .vendor-status-stepper {
  margin-top: 0;
}

.vendor-wizard-panel {
  display: none;
  gap: 16px;
}

.vendor-wizard-panel.is-active {
  display: grid;
}

.vendor-wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vendor-wizard-grid[hidden] {
  display: none;
}

.vendor-wizard-grid-span {
  grid-column: 1 / -1;
}

/* Why a step wouldn't let the seller move on. Sits directly above the
   Continue button so the explanation appears where they just clicked. */
.vendor-wizard-problems {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  /* .vendor-topbar is sticky, so scrollIntoView() would otherwise park this
     underneath it and the seller would see nothing. */
  scroll-margin-top: 84px;
  padding: 14px 16px;
  border: 1px solid rgba(197, 48, 48, 0.28);
  border-radius: 12px;
  background: rgba(197, 48, 48, 0.06);
}

/* The display: grid above outranks the UA [hidden] rule, so the attribute
   needs an explicit override to actually hide the box. */
.vendor-wizard-problems[hidden] {
  display: none;
}

.vendor-wizard-problems-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9b2c2c;
  font-size: 0.94rem;
}

.vendor-wizard-problems-head i,
.vendor-wizard-problems-head svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.vendor-wizard-problems ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: 26px;
  list-style: disc;
}

.vendor-wizard-problems li {
  color: #9b2c2c;
  font-size: 0.9rem;
}

.vendor-wizard-problems li button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.vendor-wizard-problems li button:hover,
.vendor-wizard-problems li button:focus-visible {
  text-decoration-thickness: 2px;
}

.vendor-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.vendor-wizard-actions-spacer {
  flex: 1 1 auto;
}

/* .vendor-btn*'s own `display: inline-flex` is the same specificity as the
   UA [hidden] rule and, being an author rule, wins the cascade — without
   this, JS toggling the hidden attribute on the wizard's Previous/Continue/
   Submit buttons has no visual effect. */
.vendor-wizard-actions [hidden] {
  display: none;
}

/* Dimension (L x W x H + unit) and weight (value + unit) sub-groups sit
   inside a .vendor-field so the whole thing reads as one labeled control. */
.vendor-dimension-group,
.vendor-weight-group {
  display: grid;
  gap: 8px;
}

.vendor-dimension-group {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.vendor-weight-group {
  grid-template-columns: 1fr 1fr;
}

.vendor-dimension-group input,
.vendor-weight-group input,
.vendor-dimension-group select,
.vendor-weight-group select {
  width: 100%;
}

/* Step 1: category grid-of-cards picker */
.vendor-category-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.vendor-category-search {
  position: relative;
  flex: 1 1 260px;
}

.vendor-category-search svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  transform: translateY(-50%);
}

.vendor-category-search input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  background: var(--white);
}

.vendor-category-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 180, 0.18);
}

.vendor-category-selected-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--teal-100);
  border-radius: 14px;
  background: var(--teal-100);
  color: var(--teal-700);
}

.vendor-category-selected-summary[hidden] {
  display: none;
}

.vendor-category-selected-summary svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.vendor-category-selected-summary strong {
  font-weight: 700;
}

.vendor-category-selected-change {
  margin-left: auto;
  color: var(--teal-700);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

.vendor-category-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--fg-muted);
  font-size: 13px;
}

.vendor-category-breadcrumb button {
  padding: 2px 4px;
  border: none;
  background: none;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.vendor-category-breadcrumb button:last-child,
.vendor-category-breadcrumb span[aria-current] {
  color: var(--indigo);
  text-decoration: none;
  cursor: default;
}

.vendor-category-level[hidden] {
  display: none;
}

.vendor-category-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vendor-category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.vendor-category-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(11, 27, 59, 0.08);
  transform: translateY(-1px);
}

.vendor-category-card.is-selected {
  border-color: var(--teal);
  background: var(--teal-100);
}

.vendor-category-card[hidden] {
  display: none;
}

.vendor-category-card-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--mist-100);
  color: var(--teal-700);
}

.vendor-category-card.is-selected .vendor-category-card-icon {
  background: var(--white);
}

.vendor-category-card-icon svg {
  width: 19px;
  height: 19px;
}

.vendor-category-card-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg-primary);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vendor-category-card-check {
  flex-shrink: 0;
  color: var(--teal-700);
}

.vendor-category-card-chevron {
  flex-shrink: 0;
  color: var(--fg-muted);
}

.vendor-category-card-chevron svg,
.vendor-category-card-check svg {
  width: 16px;
  height: 16px;
}

.vendor-category-empty {
  padding: 24px;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: center;
}

.vendor-category-empty[hidden] {
  display: none;
}

/* Step 3: rich-text description editor (Quill, "snow" theme, self-hosted) */
.vendor-richtext-field .ql-toolbar.ql-snow {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--mist-50);
}

.vendor-richtext-field .ql-container.ql-snow {
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  font-family: inherit;
  font-size: 14px;
}

/* The About summary is a short blurb, not a full description — its editor
   doesn't need the description's 160px canvas. */
.vendor-richtext-field--simple .ql-editor {
  min-height: 96px;
}

.vendor-richtext-field .ql-editor {
  min-height: 160px;
}

.vendor-richtext-field .ql-editor.ql-blank::before {
  color: var(--fg-muted);
  font-style: normal;
}

.vendor-richtext-field:focus-within .ql-toolbar.ql-snow,
.vendor-richtext-field:focus-within .ql-container.ql-snow {
  border-color: var(--teal);
}

.vendor-richtext-field[dir="rtl"] .ql-editor {
  text-align: right;
}

/* The Arabic editor's *text* is right-aligned (above), but its toolbar
   stays left-to-right so both editors' controls sit in the same place and
   the seller isn't hunting for a button that moved.

   dir="rtl" on the wrapper is what flips the toolbar: Quill lays its
   button groups out as inline-blocks, and inline content in an RTL
   context flows from the right in reverse order. Resetting direction on
   the toolbar alone puts the groups back in their normal order without
   touching the editor body. */
.vendor-richtext-field[dir="rtl"] .ql-toolbar {
  direction: ltr;
  text-align: left;
}

/* Pagination */
.vendor-pagination {
  margin-top: 18px;
}

.vendor-pagination-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vendor-page-link,
.vendor-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vendor-page-link {
  min-width: 0;
  gap: 6px;
  padding: 0 16px;
  color: var(--fg-primary);
}

.vendor-page-link svg {
  width: 15px;
  height: 15px;
}

.vendor-page-link:not(.is-disabled):hover {
  border-color: var(--teal);
  color: var(--teal-700);
  background: var(--mist-50);
}

.vendor-page-link.is-disabled {
  color: var(--slate-400);
  cursor: default;
  opacity: 0.6;
}

.vendor-page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vendor-page-num {
  min-width: 38px;
}

a.vendor-page-num:hover {
  border-color: var(--teal);
  color: var(--teal-700);
  background: var(--mist-50);
}

.vendor-page-num.is-current {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
  cursor: default;
}

.vendor-page-gap {
  color: var(--fg-muted);
  padding: 0 2px;
  user-select: none;
}

@media (max-width: 560px) {
  .vendor-page-link span {
    display: none;
  }

  .vendor-page-link {
    padding: 0 12px;
  }
}

/* Responsive */
@media (max-width: 1080px) {
  .vendor-detail-grid,
  .vendor-grid-2,
  .vendor-meta-grid {
    grid-template-columns: 1fr;
  }

  .vendor-category-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .vendor-wizard-grid {
    grid-template-columns: 1fr;
  }

  .vendor-stepper-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .vendor-size-row-headers {
    display: none;
  }

  .vendor-size-row {
    grid-template-columns: 1fr 1fr;
  }

  .vendor-size-row-remove {
    grid-column: 2 / 3;
    justify-self: end;
  }

  .vendor-color-card-head {
    flex-wrap: wrap;
  }

  .vendor-category-cards {
    /* minmax(0, …) not a bare 1fr: `1fr` means minmax(auto, 1fr), whose
       automatic minimum keeps the card from shrinking below its content. */
    grid-template-columns: minmax(0, 1fr);
  }

  .vendor-dimension-group {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .vendor-shell {
    grid-template-columns: 1fr;
  }

  .vendor-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    box-shadow: 12px 0 40px rgba(11, 27, 59, 0.14);
  }

  .vendor-shell.is-nav-open .vendor-sidebar {
    transform: translateX(0);
  }

  .vendor-shell.is-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 27, 59, 0.38);
    z-index: 25;
  }

  .vendor-menu-toggle {
    display: inline-flex;
  }

  .vendor-topbar,
  .vendor-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .vendor-page-head {
    flex-direction: column;
  }

  .vendor-welcome {
    flex-direction: column;
    align-items: flex-start;
  }

  .vendor-pending-meta {
    grid-template-columns: 1fr;
  }
}

/* —— Vendor brand + store status —— */
.vendor-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 4px;
}
.vendor-store-status-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.vendor-store-status-tag.is-active {
  background: #dcfce7;
  color: #166534;
}
.vendor-store-status-tag.is-suspended {
  background: #fee2e2;
  color: #991b1b;
}
.vendor-store-status-tag.is-closed {
  background: #fef3c7;
  color: #92400e;
}
.vendor-store-status-tag.is-pending,
.vendor-store-status-tag.is-rejected {
  background: #e2e8f0;
  color: #334155;
}

/* —— Vendor discounts —— */
.vendor-discount-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
}
.vendor-discount-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vendor-discount-row {
  display: grid;
  grid-template-columns: auto 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border, #d7dde5);
  border-radius: 14px;
  background: var(--surface, #fff);
  cursor: pointer;
}
.vendor-discount-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--teal, #0d9488) 55%, #d7dde5);
  background: color-mix(in srgb, var(--teal-100, #ccfbf1) 55%, #fff);
}
.vendor-discount-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  color: var(--fg-muted);
}
.vendor-discount-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vendor-discount-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vendor-discount-copy strong {
  font-size: 14px;
  color: var(--ink, #0f172a);
}
.vendor-discount-copy small {
  color: var(--fg-muted);
  font-size: 12px;
}
.vendor-discount-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.vendor-discount-chip.is-active {
  background: #dcfce7;
  color: #166534;
}
.vendor-discount-chip.is-scheduled {
  background: #e0f2fe;
  color: #075985;
}
.vendor-discount-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #d7dde5);
}
.vendor-discount-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vendor-muted {
  color: var(--fg-muted);
  font-size: 13px;
}

/* —— Vendor modal —— */
body.vendor-modal-open {
  overflow: hidden;
}
.vendor-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.vendor-modal[hidden] {
  display: none !important;
}
.vendor-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 59, 0.45);
}
.vendor-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}
.vendor-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 0;
}
.vendor-modal-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
}
.vendor-modal-head p {
  margin: 6px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
}
.vendor-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
}
.vendor-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.vendor-icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
}
@media (max-width: 720px) {
  .vendor-discount-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .vendor-discount-footer-actions {
    justify-content: stretch;
  }
  .vendor-discount-footer-actions .vendor-btn,
  .vendor-discount-footer-actions .vendor-btn-secondary {
    flex: 1;
  }
}


/* ---------------------------------------------------------------------------
   Narrow-screen overflow in the seller portal — same root cause as the block
   in styles.css: a grid/flex item's automatic minimum size (`min-width: auto`)
   stops it shrinking, so the card outgrows .vendor-main and gets clipped.
   Measured overflowing by up to 206px at 360px on Orders, Revenue, Requests
   and both product wizards.
   --------------------------------------------------------------------------- */
.vendor-page > *,
.vendor-page-head > *,
.vendor-card-head > *,
.vendor-grid-2 > *,
.vendor-product-form > *,
.vendor-mini-list > *,
.vendor-wizard-panel > *,
/* The cards grid already uses minmax(0, 1fr), so the track shrinks — but each
   card is itself a flex container whose children hold it open, so the card
   overflows its own track. */
.vendor-category-card > * {
  min-width: 0;
}

/* The page head is a flex row of title + action buttons, and the buttons are
   flex-shrink: 0 — so on a phone they push past the viewport instead of
   dropping under the title. Wrapping only engages when they no longer fit, so
   the desktop row is unchanged. */
.vendor-page-head,
.vendor-topbar-actions {
  flex-wrap: wrap;
}


/* Touch targets in the seller portal — see the matching block in styles.css.
   Only applies to touch input, so the desktop layout is unchanged. */
@media (pointer: coarse) {
  .vendor-table-icon-btn,
  /* Wizard step circles double as navigation between steps. */
  .vendor-stepper-node {
    min-width: 40px;
    min-height: 40px;
  }

  .vendor-body input[type="checkbox"],
  .vendor-body input[type="radio"] {
    width: 20px;
    height: 20px;
  }
}

/* Highlight rows are numbered by their placeholder, so their labels exist
   only for screen readers — visible ones would triple the block's height
   for no benefit. */
.vendor-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Collapsed Arabic counterparts — optional fields that shouldn't double the
   length of a step for the sellers who don't fill them in. */
.vendor-details-block {
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fbfcfe;
}
.vendor-details-block > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink, #16211f);
  list-style: none;
}
.vendor-details-block > summary::-webkit-details-marker {
  display: none;
}
.vendor-details-block > summary::before {
  content: "▸";
  display: inline-block;
  margin-inline-end: 6px;
  transition: transform 160ms ease;
}
.vendor-details-block[open] > summary::before {
  transform: rotate(90deg);
}
.vendor-details-block > summary em {
  font-weight: 400;
  color: var(--muted, #6b7d79);
}

/* ---- Send stock to the YESLAMU warehouse ---- */
.wh-send-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.wh-send-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 180px);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: #fbfcfe;
}
.wh-send-product {
  min-width: 0;
}
.wh-send-product strong {
  display: block;
  font-size: 0.94rem;
}
.wh-send-product small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted, #6b7d79);
}
.wh-send-qty {
  display: grid;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--muted, #6b7d79);
}
.wh-send-qty input {
  padding: 8px 10px;
  border: 1px solid var(--divider);
  border-radius: 8px;
}
.wh-send-where {
  min-width: 0;
  text-align: end;
}
.wh-send-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.wh-send-meta label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted, #6b7d79);
}
.wh-send-meta input {
  padding: 9px 11px;
  border: 1px solid var(--divider);
  border-radius: 9px;
}

@media (max-width: 720px) {
  .wh-send-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .wh-send-where {
    text-align: start;
  }
}

/* A shipment line the warehouse refused. Shown under its shipment row so the
   seller sees which items, why, and that the units never reached their stock. */
.vendor-shipment-issue-row td {
  padding-top: 0 !important;
  background: #fdf6f5;
}
.vendor-shipment-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #f3c9c4;
  color: #b42318;
}
.vendor-shipment-issue i,
.vendor-shipment-issue svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.vendor-shipment-issue strong { display: block; font-size: 13.5px; }
.vendor-shipment-issue ul { margin: 6px 0 0; padding-inline-start: 18px; }
.vendor-shipment-issue li { font-size: 13px; line-height: 1.6; }
.vendor-shipment-issue .vendor-field-hint { display: block; color: #8a5b56; }