/* =====================================================================
   SelleeTools — panel.css
   Brand tokens, layout, sidebar, header, cards, tables, forms, badges.
   Bootstrap 5.3.8 (loaded separately).
   ===================================================================== */

/* ---------- 1. Brand tokens ---------- */
:root {
  --st-orange:        #fe9800;
  --st-orange-hover:  #e58800;
  --st-orange-soft:   #fff4e0;
  --st-dark:          #242424;
  --st-dark-soft:     #3a3a3a;
  --st-grey-50:       #fafafa;
  --st-grey-100:      #f4f4f4;
  --st-grey-200:      #eeeeee;
  --st-grey-300:      #e4e4e4;
  --st-grey-400:      #cfcfcf;
  --st-text:          #242424;
  --st-text-muted:    #666666;
  --st-text-faint:    #8a8a8a;
  --st-ok:            #8fae1b;
  --st-ok-soft:       #f0f5d6;
  --st-warn:          #f0a500;
  --st-danger:        #b81c23;
  --st-danger-soft:   #fbe5e6;
  --st-info:          #2c8acb;
  --st-info-soft:     #e0f0fa;
  --st-allegro:       #ff5a00;
  --st-amazon:        #232f3e;
  --st-baselinker:    #4b46c4;
  --st-ebay:          #0064d2;
  --st-etsy:          #e64910;

  --st-radius:        6px;
  --st-radius-sm:     4px;
  --st-shadow-sm:     0 1px 2px rgba(20, 20, 20, 0.04);
  --st-shadow-md:     0 2px 8px rgba(20, 20, 20, 0.06);

  --st-sidebar-w:     240px;
  --st-header-h:      60px;

  --st-font-sans:     "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
html, body {
  height: 100%;
}

body {
  font-family: var(--st-font-sans);
  color: var(--st-text);
  background: var(--st-grey-100);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--st-orange);
  text-decoration: none;
}

a:hover {
  color: var(--st-orange-hover);
  text-decoration: underline;
}

hr {
  border-top: 1px solid var(--st-grey-200);
  opacity: 1;
}

/* ---------- 3. Top alert banner ---------- */
.st-topalert {
  background: var(--st-danger);
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.st-topalert__msg {
  flex: 1;
}

.st-topalert a {
  color: #fff;
  text-decoration: underline;
}

.st-topalert__cta {
  background: var(--st-orange);
  color: #fff;
  border: 0;
  padding: 8px 18px;
  border-radius: var(--st-radius);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.st-topalert__cta:hover {
  background: var(--st-orange-hover);
  color: #fff;
}

/* ---------- 4. Header ---------- */
.st-header {
  background: var(--st-dark);
  color: #fff;
  height: var(--st-header-h);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.st-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.st-header__brand:hover {
  color: #fff;
  text-decoration: none;
}

.st-header__brand-logo {
  height: 28px;
  width: auto;
  display: inline-block;
  object-fit: contain;
}

.st-header__beta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--st-orange);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
}

.st-header__marketplace {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cfcfcf;
  font-size: 13px;
}

.st-header__marketplace .form-select {
  background: #1a1a1a;
  border: 1px solid #444;
  color: #fff;
  padding: 4px 28px 4px 10px;
  height: 32px;
  font-size: 13px;
  min-width: 120px;
}

.st-header__marketplace .form-select:focus {
  border-color: var(--st-orange);
  box-shadow: none;
}

.st-header__search {
  flex: 1;
  max-width: 420px;
  position: relative;
}

.st-header__search input {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  padding: 8px 12px 8px 34px;
  height: 36px;
  border-radius: var(--st-radius);
  width: 100%;
  font-size: 13px;
}

.st-header__search input::placeholder {
  color: #888;
}

.st-header__search input:focus {
  outline: none;
  border-color: var(--st-orange);
}

.st-header__search .bi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 14px;
}

.st-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.st-header__iconbtn {
  background: transparent;
  border: 0;
  color: #d4d4d4;
  width: 38px;
  height: 38px;
  border-radius: var(--st-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  transition: background 0.15s ease;
}

.st-header__iconbtn:hover {
  background: #3a3a3a;
  color: #fff;
}

.st-header__iconbtn .st-counter {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--st-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--st-dark);
  box-sizing: content-box;
  line-height: 1;
  pointer-events: none;
}

/* Notification dropdown — wider, scrollable */
.st-notify-dropdown {
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 0;
}

.st-notify-dropdown__head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--st-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
  color: var(--st-text);
}

.st-notify-dropdown__head .st-badge { font-weight: 700; }

.st-notify-dropdown__list {
  max-height: 360px;
  overflow-y: auto;
}

.st-notify-dropdown__item {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--st-grey-200);
  text-decoration: none;
  color: var(--st-text);
  transition: background 0.12s;
}

.st-notify-dropdown__item:hover {
  background: var(--st-grey-100);
  color: var(--st-text);
  text-decoration: none;
}

.st-notify-dropdown__item:last-child { border-bottom: 0; }

.st-notify-dropdown__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--st-orange-soft);
  color: var(--st-orange);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}

.st-notify-dropdown__icon--blue { background: var(--st-info-soft); color: var(--st-info); }
.st-notify-dropdown__icon--green { background: var(--st-ok-soft); color: var(--st-ok); }

.st-notify-dropdown__title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 2px;
  color: var(--st-text);
}

.st-notify-dropdown__meta {
  font-size: 11.5px;
  color: var(--st-text-faint);
}

.st-notify-dropdown__foot {
  padding: 10px 14px;
  text-align: center;
  background: var(--st-grey-50);
  border-top: 1px solid var(--st-grey-200);
  font-size: 13px;
}

.st-notify-dropdown__foot a {
  color: var(--st-orange);
  font-weight: 600;
  text-decoration: none;
}

.st-notify-dropdown__foot a:hover { text-decoration: underline; }

.st-header__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

.st-header__user:hover, .st-header__user.show {
  background: #3a3a3a;
  color: #fff;
}

.st-header__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--st-orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.st-header__lang {
  background: transparent;
  border: 1px solid #444;
  border-radius: var(--st-radius);
  color: #fff;
  padding: 4px 10px;
  height: 32px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-header__lang:hover { background: #3a3a3a; color: #fff; }

.st-header__lang .st-flag {
  width: 18px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fff 0 50%, var(--st-danger) 50% 100%);
  display: inline-block;
  border: 1px solid #555;
}

.st-header__hamburger {
  background: transparent;
  border: 0;
  color: #fff;
  width: 36px; height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ---------- 5. Role tabs ---------- */
.st-roletabs {
  background: #d3d3d3;
  padding: 8px 24px 0;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.st-roletab {
  background: transparent;
  border: 0;
  padding: 12px 26px 14px;
  font-weight: 700;
  font-size: 15px;
  color: var(--st-text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  position: relative;
  top: 1px;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}

.st-roletab:hover { text-decoration: none; }

.st-roletab .st-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #b5b5b5;
  display: inline-block;
  flex-shrink: 0;
}

.st-roletab.active {
  background: #fff;
  color: var(--st-text);
  box-shadow: 0 -1px 0 var(--st-grey-200);
}

.st-roletab.active .st-dot {
  background: var(--st-orange);
  box-shadow: 0 0 0 3px rgba(254, 152, 0, 0.18);
}

.st-roletab:not(.active) { color: #4a4a4a; }

.st-roletab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.45);
  color: var(--st-text);
}

/* ---------- 6. Layout shell ---------- */
.st-shell {
  display: flex;
  min-height: calc(100vh - var(--st-header-h));
}

.st-sidebar {
  width: var(--st-sidebar-w);
  flex: 0 0 var(--st-sidebar-w);
  background: var(--st-grey-50);
  border-right: 1px solid var(--st-grey-200);
  padding: 12px 0;
  align-self: stretch;
  position: sticky;
  top: var(--st-header-h);
  height: calc(100vh - var(--st-header-h));
  overflow-y: auto;
  z-index: 100;
}

.st-main {
  flex: 1;
  min-width: 0;
  padding: 24px;
  background: var(--st-grey-100);
}

/* ---------- 7. Sidebar nav ---------- */
.st-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-nav__item {
  position: relative;
}

.st-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  color: var(--st-text);
  font-size: 13.5px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  text-decoration: none;
}

.st-nav__link .bi {
  font-size: 16px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--st-text-muted);
}

.st-nav__link .st-nav__label {
  flex: 1;
}

.st-nav__link:hover {
  background: var(--st-grey-200);
  color: var(--st-text);
  text-decoration: none;
}

.st-nav__link:hover .bi { color: var(--st-text); }

.st-nav__link.active {
  background: var(--st-orange);
  color: #fff;
  border-left-color: #fff;
}

.st-nav__link.active .bi { color: #fff; }

.st-nav__caret {
  font-size: 11px !important;
  width: auto !important;
  transition: transform 0.2s;
}

.st-nav__link[aria-expanded="true"] .st-nav__caret {
  transform: rotate(180deg);
}

.st-nav__badge {
  background: var(--st-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 10px;
  text-align: center;
}

.st-nav__link.active .st-nav__badge {
  background: #fff;
  color: var(--st-orange);
}

/* Sub-nav (accordion children) */
.st-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: 1px solid var(--st-grey-200);
  border-bottom: 1px solid var(--st-grey-200);
}

.st-nav__sub .st-nav__link {
  padding-left: 50px;
  font-size: 13px;
  font-weight: 400;
  color: var(--st-text-muted);
}

.st-nav__sub .st-nav__link:hover {
  color: var(--st-text);
  background: var(--st-grey-100);
}

.st-nav__sub .st-nav__link.active {
  background: var(--st-orange-soft);
  color: var(--st-orange);
  border-left-color: var(--st-orange);
}

.st-nav__sub .st-nav__link.active .bi { color: var(--st-orange); }

/* deeper level */
.st-nav__sub .st-nav__sub .st-nav__link { padding-left: 68px; }

.st-nav__divider {
  border: 0;
  border-top: 1px solid var(--st-grey-200);
  margin: 8px 18px;
}

/* ---------- 8. Page heading ---------- */
.st-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.st-page-head h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.st-page-head__crumbs {
  font-size: 12px;
  color: var(--st-text-faint);
  margin-bottom: 4px;
}

.st-page-head__crumbs a { color: var(--st-text-faint); }

/* ---------- 9. Cards ---------- */
.st-card {
  background: #fff;
  border: 1px solid var(--st-grey-200);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-sm);
  overflow: hidden;
}

.st-card__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--st-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.st-card__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--st-text);
}

.st-card__title .bi {
  color: var(--st-text-muted);
  font-size: 16px;
}

.st-card__body {
  padding: 18px;
}

.st-card__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--st-grey-200);
  background: var(--st-grey-50);
  font-size: 12px;
  color: var(--st-text-muted);
}

/* ---------- 10. Stat cards ---------- */
.st-stat {
  background: #fff;
  border: 1px solid var(--st-grey-200);
  border-radius: var(--st-radius);
  padding: 18px;
  box-shadow: var(--st-shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
}

.st-stat__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--st-orange-soft);
  color: var(--st-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.st-stat--blue .st-stat__icon { background: var(--st-info-soft); color: var(--st-info); }
.st-stat--green .st-stat__icon { background: var(--st-ok-soft); color: var(--st-ok); }
.st-stat--dark .st-stat__icon { background: #ececec; color: var(--st-dark); }

.st-stat__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.st-stat__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--st-text);
  margin-bottom: 4px;
}

.st-stat__delta {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.st-stat__delta--up { color: var(--st-ok); }
.st-stat__delta--down { color: var(--st-danger); }
.st-stat__delta--flat { color: var(--st-text-faint); }

/* ---------- 11. Buttons ---------- */
.btn {
  font-weight: 500;
  font-size: 13px;
  border-radius: var(--st-radius);
  padding: 7px 14px;
}

.btn-primary, .st-btn-primary {
  background: var(--st-orange);
  border-color: var(--st-orange);
  color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .st-btn-primary:hover {
  background: var(--st-orange-hover);
  border-color: var(--st-orange-hover);
  color: #fff;
}

.btn-outline-primary, .st-btn-outline {
  border: 1px solid var(--st-orange);
  color: var(--st-orange);
  background: #fff;
}

.btn-outline-primary:hover, .st-btn-outline:hover {
  background: var(--st-orange);
  color: #fff;
}

.btn-dark { background: var(--st-dark); border-color: var(--st-dark); }
.btn-dark:hover { background: var(--st-dark-soft); border-color: var(--st-dark-soft); }

.btn-danger { background: var(--st-danger); border-color: var(--st-danger); }

.st-btn-ghost {
  background: var(--st-grey-100);
  border: 1px solid var(--st-grey-200);
  color: var(--st-text);
}

.st-btn-ghost:hover { background: var(--st-grey-200); }

.btn-sm { padding: 4px 10px; font-size: 12px; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: var(--st-grey-100);
  border: 1px solid var(--st-grey-200);
  color: var(--st-text-muted);
  border-radius: var(--st-radius-sm);
}

.btn-icon:hover {
  background: var(--st-orange);
  border-color: var(--st-orange);
  color: #fff;
}

/* ---------- 12. Forms ---------- */
.form-control, .form-select {
  font-size: 13.5px;
  padding: 8px 12px;
  border: 1px solid var(--st-grey-300);
  border-radius: var(--st-radius);
  color: var(--st-text);
  background: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: var(--st-orange);
  box-shadow: 0 0 0 3px rgba(254, 152, 0, 0.15);
}

.form-control[readonly] { background: var(--st-grey-100); }

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--st-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.form-label .text-danger { font-weight: 700; }

.form-text { color: var(--st-text-faint); font-size: 12px; }

.form-check-input:checked {
  background-color: var(--st-orange);
  border-color: var(--st-orange);
}

.form-switch .form-check-input {
  width: 2.4em;
  height: 1.3em;
}

.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(254, 152, 0, 0.15); }

/* ---------- 13. Tables ---------- */
.st-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.st-table thead th {
  background: var(--st-grey-100);
  color: var(--st-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--st-grey-200);
  white-space: nowrap;
}

.st-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--st-grey-200);
  vertical-align: middle;
  color: var(--st-text);
}

.st-table tbody tr:hover td { background: var(--st-grey-50); }

.st-table tbody tr:last-child td { border-bottom: 0; }

.st-table__thumb {
  width: 48px; height: 48px;
  border-radius: var(--st-radius-sm);
  border: 1px solid var(--st-grey-200);
  background: var(--st-grey-100);
  object-fit: cover;
}

.st-table__title {
  font-weight: 600;
  color: var(--st-text);
  margin-bottom: 2px;
  font-size: 13px;
}

.st-table__sku {
  font-size: 11px;
  color: var(--st-text-faint);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.st-sort {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.st-sort .bi {
  opacity: 0.4;
  font-size: 11px;
}

.st-sort.active .bi { opacity: 1; color: var(--st-orange); }

/* ---------- 14. Badges ---------- */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--st-grey-200);
  color: var(--st-text);
  line-height: 1.4;
}

.st-badge--stock {
  background: var(--st-orange);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--st-radius-sm);
}

.st-badge--out {
  background: var(--st-grey-300);
  color: var(--st-text-muted);
}

.st-badge--ok { background: var(--st-ok-soft); color: var(--st-ok); }
.st-badge--warn { background: #fff4cf; color: #8c6d00; }
.st-badge--danger { background: var(--st-danger-soft); color: var(--st-danger); }
.st-badge--info { background: var(--st-info-soft); color: var(--st-info); }
.st-badge--neutral { background: var(--st-grey-200); color: var(--st-text-muted); }

/* Marketplace chips — exact match from products screen */
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #c5dffc;
  background: #eaf4ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: uppercase;
  color: #2274c7;
  white-space: nowrap;
}

.st-chip--allegro { border-color: #b9e2c0; background: #e9f7ec; color: #2f8a3e; }
.st-chip--amazon  { border-color: #c5dffc; background: #eaf4ff; color: #2274c7; }
.st-chip--baselinker { border-color: #c5dffc; background: #eaf4ff; color: #2274c7; }
.st-chip--ebay    { border-color: #c5dffc; background: #eaf4ff; color: #2274c7; }
.st-chip--etsy    { border-color: #c5dffc; background: #eaf4ff; color: #2274c7; }
.st-chip--paypal  { border-color: #c5dffc; background: #eaf4ff; color: #2274c7; }

.st-chip__count {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  margin-left: 2px;
}

/* ========================================================================
   PRODUCT ROW — exact match for screenshot 18_24_47
   ======================================================================== */
.st-prod-table {
    background: #fff;
    border: 1px solid var(--st-grey-200);
    border-radius: var(--st-radius);
    overflow: hidden;
}

.st-prod-row {
    display: grid;
    grid-template-columns: 36px 100px 1fr 200px 160px;
    gap: 18px;
    padding: 18px;
    border-bottom: 1px solid var(--st-grey-200);
    align-items: flex-start;
}

.st-prod-row:last-of-type { border-bottom: 0; }

.st-prod-row__cb { padding-top: 6px; }

.st-prod-row__thumb {
    width: 100px;
    height: 100px;
    border-radius: var(--st-radius-sm);
    border: 1px solid var(--st-grey-200);
    background: var(--st-grey-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 16 16'><path fill='%23c5c5c5' d='M4.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M13 14.5V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v12.5l3-4 3 3 2-2z'/></svg>") center/40px no-repeat;
    object-fit: cover;
    flex-shrink: 0;
}

.st-prod-row__body { min-width: 0; }

.st-prod-row__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--st-text);
    margin-bottom: 6px;
    line-height: 1.35;
}

.st-prod-meta {
    font-size: 12.5px;
    color: var(--st-text);
    line-height: 1.75;
}

.st-prod-meta__line { display: block; }

.st-prod-meta strong {
    color: var(--st-text);
    font-weight: 600;
    margin-right: 2px;
}

.st-prod-meta .st-info {
    display: inline-block;
    width: 14px; height: 14px;
    line-height: 14px;
    text-align: center;
    background: var(--st-grey-300);
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    cursor: help;
    vertical-align: 1px;
    margin: 0 2px;
}

.st-prod-meta__more {
    color: var(--st-info);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}
.st-prod-meta__more:hover { color: var(--st-info); text-decoration: underline; }

/* Flag chips for "Kraje dostawy" */
.st-flag-chip {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid var(--st-grey-300);
    border-radius: 3px;
    background: #fff;
    color: var(--st-text);
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin: 0 1px;
}

/* Marketplace brand chips (Eksportowany na / Dostępny na) */
.st-mp-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.st-mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--st-grey-300);
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    background: #fff;
    color: var(--st-text);
    line-height: 1.4;
    text-decoration: none;
}

.st-mp-chip__mark {
    font-weight: 800;
    font-size: 13px;
    font-style: italic;
}

/* Brand colours */
.st-mp-chip--allegro .st-mp-chip__mark { color: var(--st-allegro); }
.st-mp-chip--amazon  .st-mp-chip__mark { color: var(--st-amazon); }
.st-mp-chip--baselinker .st-mp-chip__mark { color: var(--st-baselinker); }
.st-mp-chip--ebay    .st-mp-chip__mark { color: var(--st-ebay); }
.st-mp-chip--etsy    .st-mp-chip__mark { color: var(--st-etsy); }

/* Exported chip — solid orange */
.st-mp-chip--exported {
    background: var(--st-orange);
    color: #fff;
    border-color: var(--st-orange);
}
.st-mp-chip--exported .st-mp-chip__mark { color: #fff; }
.st-mp-chip--exported .st-mp-chip__count {
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    margin-left: 2px;
}

/* Magazyn / cena column — centered text */
.st-prod-row__stock {
    text-align: center;
    font-size: 13px;
    padding-top: 2px;
}

.st-stock__mag {
    color: var(--st-text);
    margin-bottom: 8px;
}

.st-stock__mag strong { font-weight: 600; }

.st-stock__num--zero { color: var(--st-text); font-weight: 700; }
.st-stock__num--in   { color: var(--st-ok); font-weight: 700; }

.st-stock__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--st-text);
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.st-stock__netto {
    font-size: 11.5px;
    color: var(--st-text-muted);
}

/* Action button stack — full-width orange buttons */
.st-action-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.st-action-stack .btn {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: var(--st-orange);
    border-color: var(--st-orange);
    color: #fff;
}

.st-action-stack .btn:hover {
    background: var(--st-orange-hover);
    border-color: var(--st-orange-hover);
    color: #fff;
}

/* Toolbar — section above products list (orange button blocks) */
.st-prod-toolbar {
    background: #fff;
    border: 1px solid var(--st-grey-200);
    border-radius: var(--st-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.st-prod-toolbar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.st-prod-toolbar__row:last-child { margin-bottom: 0; }

/* Pagination footer for products */
.st-prod-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 4px;
    flex-wrap: wrap;
    gap: 12px;
}

.st-prod-pagination__perpage {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--st-text-muted);
}

.st-prod-pagination__perpage select {
    width: auto;
    padding: 4px 26px 4px 10px;
    height: 32px;
    font-size: 13px;
}

.st-prod-pagination__nums { font-size: 13px; }
.st-prod-pagination__nums a {
    padding: 0 6px;
    color: var(--st-text);
    text-decoration: none;
}
.st-prod-pagination__nums a:hover { color: var(--st-orange); }
.st-prod-pagination__nums .current {
    color: var(--st-orange);
    font-weight: 700;
}

/* Row layout collapses on narrow screens */
@media (max-width: 991.98px) {
    .st-prod-row {
        grid-template-columns: 36px 80px 1fr;
        grid-template-areas:
            "cb thumb body"
            ".  .     stock"
            ".  .     actions";
        gap: 12px;
    }
    .st-prod-row__cb { grid-area: cb; }
    .st-prod-row__thumb { grid-area: thumb; width: 80px; height: 80px; }
    .st-prod-row__body { grid-area: body; }
    .st-prod-row__stock { grid-area: stock; text-align: left; margin-top: 8px; }
    .st-prod-row__actions { grid-area: actions; }
    .st-action-stack { flex-direction: row; flex-wrap: wrap; }
    .st-action-stack .btn { width: auto; flex: 1 0 calc(50% - 3px); }
}

/* ========================================================================
   B2B Market — left filter rail + grid view toggles
   ======================================================================== */
.st-b2b-shell { display: flex; gap: 18px; align-items: flex-start; }
.st-b2b-filters {
    width: 240px;
    flex-shrink: 0;
    padding: 16px 0 0 16px;
    position: sticky;
    top: calc(var(--st-header-h) + 16px);
}
.st-b2b-filters__btn {
    display: block;
    width: 100%;
    background: var(--st-orange);
    color: #fff;
    border: 0;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--st-radius);
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.st-b2b-filters__btn:hover { background: var(--st-orange-hover); color: #fff; }
.st-b2b-filters__field { margin-bottom: 10px; }
.st-b2b-filters__field .form-control,
.st-b2b-filters__field .form-select {
    width: 100%;
}
.st-b2b-content { flex: 1; min-width: 0; }

@media (max-width: 991.98px) {
    .st-b2b-shell { flex-direction: column; }
    .st-b2b-filters { width: 100%; position: static; }
}

/* View toggle */
.st-view-toggle {
    display: inline-flex;
    border: 1px solid var(--st-grey-300);
    border-radius: var(--st-radius);
    overflow: hidden;
    background: #fff;
}
.st-view-toggle__btn {
    background: #fff;
    border: 0;
    width: 38px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--st-text-muted);
    cursor: pointer;
    border-right: 1px solid var(--st-grey-200);
    font-size: 16px;
}
.st-view-toggle__btn:last-child { border-right: 0; }
.st-view-toggle__btn:hover { background: var(--st-grey-100); color: var(--st-text); }
.st-view-toggle__btn.is-active { background: var(--st-orange); color: #fff; }

/* Product card (grid view) */
.st-prod-card {
    background: #fff;
    border: 1px solid var(--st-grey-200);
    border-radius: var(--st-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.15s;
}
.st-prod-card:hover { box-shadow: var(--st-shadow-md); }

.st-prod-card__thumb {
    aspect-ratio: 1/1;
    background: var(--st-grey-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 16 16'><path fill='%23c5c5c5' d='M4.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M13 14.5V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v12.5l3-4 3 3 2-2z'/></svg>") center/30% no-repeat;
    border-bottom: 1px solid var(--st-grey-200);
}

.st-prod-card__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.st-prod-card__title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
    color: var(--st-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.st-prod-card__cat {
    font-size: 11px;
    color: var(--st-text-faint);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-prod-card__stock {
    font-size: 12px;
    color: var(--st-text-muted);
}

.st-prod-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--st-text);
    margin-top: auto;
}

.st-prod-card__price small { font-weight: 400; font-size: 11px; color: var(--st-text-muted); display: block; }

.st-prod-card__footer {
    padding: 10px 12px;
    border-top: 1px solid var(--st-grey-200);
    background: var(--st-grey-50);
}

.st-prod-card .btn { width: 100%; font-size: 12px; padding: 6px 8px; }

/* 6-col compact tweaks */
.st-grid-6 .st-prod-card__body { padding: 8px; gap: 4px; }
.st-grid-6 .st-prod-card__title { font-size: 12px; min-height: 2.5em; -webkit-line-clamp: 2; }
.st-grid-6 .st-prod-card__price { font-size: 14px; }
.st-grid-6 .st-prod-card__cat { display: none; }
.st-grid-6 .st-prod-card__footer { padding: 8px; }

/* ========================================================================
   PRODUCT ROW — expanded state (Zobacz więcej)
   ======================================================================== */
.st-prod-row__expanded { display: none; margin-top: 10px; }
.st-prod-row.is-expanded .st-prod-row__expanded { display: block; }

.st-ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.st-ship-card {
    border: 1px solid var(--st-grey-300);
    border-radius: var(--st-radius-sm);
    padding: 10px 12px;
    background: #fff;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.4;
}

.st-ship-card__brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--st-text-muted);
    margin-bottom: 4px;
    text-transform: none;
}

.st-ship-card__brand .st-mp-chip__mark { font-size: 13px; font-style: italic; font-weight: 800; }
.st-ship-card__brand--allegro .st-mp-chip__mark { color: var(--st-allegro); }
.st-ship-card__brand--baselinker .st-mp-chip__mark { color: var(--st-baselinker); }
.st-ship-card__brand--etsy .st-mp-chip__mark { color: var(--st-etsy); }
.st-ship-card__brand--ebay .st-mp-chip__mark { color: var(--st-ebay); }
.st-ship-card__brand--amazon .st-mp-chip__mark { color: var(--st-amazon); }

.st-ship-card__method { font-weight: 600; color: var(--st-text); }
.st-ship-card__price { font-weight: 700; color: var(--st-text); margin-top: 2px; }
.st-ship-card__vat { color: var(--st-text-faint); font-size: 11px; }

/* ========================================================================
   B2B Category modal — 2-col picker (left list, right sub-tree)
   ======================================================================== */
#categoriesModal .modal-dialog { max-width: 1140px; }
#categoriesModal .modal-content { border: 0; border-radius: 8px; }
#categoriesModal .modal-header {
    position: relative;
    border: 0;
    padding: 0;
    min-height: 0;
}
#categoriesModal .modal-header .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    background-color: #fff;
    border: 2px solid var(--st-danger);
    color: var(--st-danger);
    width: 30px; height: 30px;
    border-radius: 4px;
    opacity: 1;
    padding: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b81c23'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
#categoriesModal .modal-body { padding: 0; }

.st-cat-modal {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 540px;
    max-height: 80vh;
}

.st-cat-modal__list {
    list-style: none;
    margin: 0;
    padding: 18px 0;
    border-right: 1px solid var(--st-grey-200);
    overflow-y: auto;
}

.st-cat-modal__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    cursor: pointer;
    font-size: 14px;
    color: var(--st-text);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
}

.st-cat-modal__item:hover { background: var(--st-grey-100); }

.st-cat-modal__dot {
    width: 14px; height: 14px;
    border: 2px solid var(--st-grey-300);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    background: #fff;
}

.st-cat-modal__item.is-active .st-cat-modal__dot {
    border-color: var(--st-orange);
}
.st-cat-modal__item.is-active .st-cat-modal__dot::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: var(--st-orange);
}

.st-cat-modal__item.is-active {
    color: var(--st-orange);
    font-weight: 600;
}

.st-cat-modal__right {
    padding: 24px;
    background: var(--st-grey-100);
    overflow-y: auto;
}

.st-cat-modal__pane { display: none; }
.st-cat-modal__pane.is-active { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; }

.st-cat-sub-card {
    background: var(--st-grey-200);
    border-radius: 6px;
    padding: 14px 16px;
}
.st-cat-sub-card__head {
    font-weight: 700;
    font-size: 14px;
    color: var(--st-text);
    margin-bottom: 8px;
}
.st-cat-sub-card__list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    font-size: 13px;
    color: var(--st-text);
}
.st-cat-sub-card__list li { padding: 2px 0; }
.st-cat-sub-card__list a { color: var(--st-text); text-decoration: none; }
.st-cat-sub-card__list a:hover { color: var(--st-orange); }

.st-cat-modal__empty {
    text-align: center;
    color: var(--st-text-faint);
    padding: 60px 24px;
}

@media (max-width: 767.98px) {
    .st-cat-modal { grid-template-columns: 1fr; }
    .st-cat-modal__list { border-right: 0; border-bottom: 1px solid var(--st-grey-200); max-height: 40vh; }
}

/* ---------- 15. Tabs (in-page) ---------- */
.st-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--st-grey-200);
  margin-bottom: 24px;
}

.st-tabs__item {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--st-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.st-tabs__item:hover { color: var(--st-text); text-decoration: none; }

.st-tabs__item.active {
  color: var(--st-orange);
  border-bottom-color: var(--st-orange);
}

/* ---------- 16. Pagination ---------- */
.pagination {
  --bs-pagination-color: var(--st-text);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--st-grey-200);
  --bs-pagination-hover-color: var(--st-orange);
  --bs-pagination-hover-bg: var(--st-orange-soft);
  --bs-pagination-hover-border-color: var(--st-grey-300);
  --bs-pagination-active-bg: var(--st-orange);
  --bs-pagination-active-border-color: var(--st-orange);
  --bs-pagination-active-color: #fff;
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(254, 152, 0, 0.18);
  font-size: 13px;
}

/* ---------- 17. Notifications list (dashboard right rail) ---------- */
.st-notify {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-notify__item {
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--st-grey-200);
}

.st-notify__item:last-child { border-bottom: 0; }

.st-notify__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--st-orange);
  margin-top: 6px;
  flex-shrink: 0;
}

.st-notify__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--st-text);
  margin-bottom: 2px;
  line-height: 1.35;
}

.st-notify__meta {
  font-size: 11.5px;
  color: var(--st-text-faint);
}

/* ---------- 18. Allegro/Integration cards ---------- */
.st-conn-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.st-conn-status__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--st-ok-soft);
  color: var(--st-ok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.st-conn-status__icon--off { background: var(--st-danger-soft); color: var(--st-danger); }

.st-conn-status__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-text-muted);
  font-weight: 600;
}

.st-conn-status__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--st-text);
}

/* ---------- 19. Toolbar (filters above table) ---------- */
.st-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--st-grey-200);
  background: #fff;
  flex-wrap: wrap;
}

.st-toolbar .st-search {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  position: relative;
}

.st-toolbar .st-search input {
  padding-left: 34px;
}

.st-toolbar .st-search .bi {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-text-faint);
}

.st-toolbar .ms-auto { margin-left: auto; }

/* ---------- 20. Alert info banner (in-page) ---------- */
.st-banner-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-left: 4px solid var(--st-info);
  background: var(--st-info-soft);
  border-radius: var(--st-radius);
  color: #21557d;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.st-banner-info .bi { font-size: 18px; flex-shrink: 0; }

/* ---------- 21. Profile completion bar ---------- */
.st-progress-wrap {
  background: #fff;
  border: 1px solid var(--st-grey-200);
  border-radius: var(--st-radius);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}

.st-progress {
  height: 8px;
  background: var(--st-grey-200);
  border-radius: 999px;
  overflow: hidden;
}

.st-progress__bar {
  height: 100%;
  background: var(--st-orange);
  background-image: linear-gradient(45deg, rgba(255,255,255,0.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, transparent 75%);
  background-size: 14px 14px;
}

/* ---------- 22. Dropdown menu polish ---------- */
.dropdown-menu {
  border: 1px solid var(--st-grey-200);
  box-shadow: var(--st-shadow-md);
  border-radius: var(--st-radius);
  padding: 6px;
  font-size: 13px;
}

.dropdown-item {
  border-radius: var(--st-radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--st-text);
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--st-grey-100);
  color: var(--st-text);
}

.dropdown-item .bi { color: var(--st-text-muted); width: 16px; }

.dropdown-divider { border-color: var(--st-grey-200); margin: 4px 2px; }

/* ---------- 23. Footer ---------- */
.st-footer {
    background: #f1f3f6;
    border-top: 1px solid var(--st-grey-200);
    margin-top: 32px;
}

.st-footer__inner {
    padding: 36px 32px 28px;
}

.st-footer__col h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--st-text);
    margin: 0 0 14px;
    letter-spacing: -0.005em;
}

.st-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.st-footer__list li {
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.st-footer__list li::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--st-orange);
    margin-top: 5px;
    flex-shrink: 0;
}

.st-footer__list a {
    color: var(--st-text);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
}

.st-footer__list a:hover { color: var(--st-orange); text-decoration: none; }

.st-footer__brand-logo { height: 28px; display: block; margin-bottom: 14px; }
.st-footer__tag { font-weight: 700; color: var(--st-text); font-size: 14px; margin-bottom: 12px; }

.st-footer__address {
    font-size: 13px;
    color: var(--st-text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.st-footer__phone {
    font-size: 13.5px;
    color: var(--st-text);
    font-weight: 600;
    margin-bottom: 10px;
}

.st-footer__hours-title {
    font-weight: 700;
    color: var(--st-text);
    font-size: 13px;
    margin-bottom: 2px;
}

.st-footer__hours {
    font-size: 13px;
    color: var(--st-text-muted);
}

.st-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.st-footer__social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--st-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background 0.15s;
    text-decoration: none;
}

.st-footer__social a:hover { background: var(--st-orange-hover); color: #fff; }

.st-footer__bottom {
    background: #fff;
    padding: 16px 32px;
    border-top: 1px solid var(--st-grey-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    color: var(--st-text-muted);
}

.st-footer__langs {
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.st-footer__langs li { display: flex; align-items: center; gap: 6px; }
.st-footer__langs a { color: var(--st-text-muted); text-decoration: none; }
.st-footer__langs a:hover { color: var(--st-orange); }
.st-footer__langs .is-active { color: var(--st-text); font-weight: 600; }
.st-footer__langs .st-flag { width: 18px; height: 14px; border-radius: 2px; background: linear-gradient(to bottom, #fff 0 50%, var(--st-danger) 50% 100%); display: inline-block; border: 1px solid var(--st-grey-300); }

@media (max-width: 767.98px) {
    .st-footer__inner { padding: 24px 16px 18px; }
    .st-footer__bottom { padding: 14px 16px; flex-direction: column; gap: 10px; text-align: center; }
}

/* ---------- 24. Responsive ---------- */
@media (max-width: 991.98px) {
  .st-header__search { display: none; }
}

@media (max-width: 767.98px) {
  .st-header { padding: 0 12px; gap: 10px; }
  .st-header__hamburger { display: inline-flex; }
  .st-header__marketplace { display: none; }
  .st-roletabs { padding: 0 12px; overflow-x: auto; }
  .st-roletab { padding: 12px 14px; font-size: 13px; }
  .st-main { padding: 16px; }
  .st-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
  }
  .st-sidebar.is-open { transform: translateX(0); }

  .st-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
    display: none;
  }
  .st-backdrop.is-open { display: block; }
}

/* ========================================================================
   MOBILE 2.0 — Comprehensive responsive overrides
   Touch-friendly hit targets, drawer nav, stacked toolbars, fluid tables.
   Activates below 992px. Does NOT touch desktop layout.
   ======================================================================== */

/* --- Header (≤991px): minimal — ONLY hamburger + logo --------------- */
@media (max-width: 991.98px) {
  .st-header {
    padding: 0 12px;
    gap: 8px;
    height: 56px;
  }
  :root { --st-header-h: 56px; }

  .st-header__hamburger {
    display: inline-flex;
    width: 44px;
    height: 44px;
    font-size: 26px;
    border-radius: 6px;
  }
  .st-header__hamburger:hover,
  .st-header__hamburger:focus { background: rgba(255,255,255,0.08); }

  .st-header__brand-logo {
    height: 24px;
    max-width: 130px;
  }
  .st-header__beta { font-size: 9px; padding: 2px 5px; }

  /* Hide ALL header chrome on mobile — moved into mobile drawer */
  .st-header__search,
  .st-header__marketplace,
  .st-header__actions,
  .st-roletabs,
  .st-sidebar { display: none !important; }

  .st-shell { display: block; }
  .st-main { padding: 16px; min-height: calc(100vh - var(--st-header-h)); flex: 1 1 100%; }
}

/* ========================================================================
   MOBILE FULL-SCREEN DRAWER (st-mobile-nav)
   Single overlay containing: search, marketplace, role tabs, nav,
   notifications, messages, user menu, language picker.
   Built dynamically by panel.js initMobileNav() on every page.
   ======================================================================== */
.st-mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 1080;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.st-mobile-nav.is-open { transform: translateX(0); }

.st-mobile-nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1075;
  display: none;
}
.st-mobile-nav__backdrop.is-open { display: block; }

.st-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--st-dark);
  color: #fff;
  flex-shrink: 0;
  border-bottom: 3px solid var(--st-orange);
}

.st-mobile-nav__brand img {
  height: 28px;
  display: block;
}

.st-mobile-nav__close {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-mobile-nav__close:hover,
.st-mobile-nav__close:focus { background: rgba(255,255,255,0.1); }

.st-mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 32px;
}

.st-mobile-nav__search {
  position: relative;
  padding: 14px 16px;
  background: var(--st-grey-50);
  border-bottom: 1px solid var(--st-grey-200);
}
.st-mobile-nav__search input {
  padding-left: 36px;
  height: 44px;
  font-size: 14px;
}
.st-mobile-nav__search .bi {
  position: absolute;
  left: 28px; top: 50%;
  transform: translateY(-50%);
  color: var(--st-text-faint);
  font-size: 16px;
  pointer-events: none;
}

.st-mobile-nav__section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--st-grey-200);
}
.st-mobile-nav__section--nav { padding: 0; }

.st-mobile-nav__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--st-text-muted);
  margin: 0 0 10px;
}
.st-mobile-nav__section--nav .st-mobile-nav__label { padding: 14px 16px 8px; }

/* Role tabs as buttons */
.st-mobile-nav__roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.st-mnav-roletab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--st-grey-300);
  border-radius: 6px;
  background: #fff;
  color: var(--st-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.12s;
}
.st-mnav-roletab:hover,
.st-mnav-roletab:focus { background: var(--st-grey-100); color: var(--st-text); text-decoration: none; }
.st-mnav-roletab.is-active {
  background: var(--st-orange-soft);
  border-color: var(--st-orange);
  color: var(--st-orange);
}
.st-mnav-roletab.is-active .st-mnav-dot { background: var(--st-orange); box-shadow: 0 0 0 3px rgba(254,152,0,0.2); }
.st-mnav-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--st-grey-400);
  flex-shrink: 0;
}

/* Sidebar nav inside drawer */
.st-mobile-nav__section--nav .st-nav { padding: 0; }
.st-mobile-nav__section--nav .st-nav__link {
  padding: 14px 16px;
  font-size: 15px;
  min-height: 50px;
  border-left: 0;
}
.st-mobile-nav__section--nav .st-nav__link .bi { font-size: 19px; }
.st-mobile-nav__section--nav .st-nav__link.active {
  background: var(--st-orange-soft);
  color: var(--st-orange);
  border-left: 4px solid var(--st-orange);
  padding-left: 12px;
}
.st-mobile-nav__section--nav .st-nav__link.active .bi { color: var(--st-orange); }
.st-mobile-nav__section--nav .st-nav__sub { background: var(--st-grey-50); }
.st-mobile-nav__section--nav .st-nav__sub .st-nav__link {
  padding: 12px 16px 12px 52px;
  font-size: 14px;
  min-height: 44px;
}
.st-mobile-nav__section--nav .st-nav__sub .st-nav__sub .st-nav__link { padding-left: 76px; }

/* Notifications & messages list */
.st-mobile-nav__notif {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-mobile-nav__notif .st-notify-dropdown__item {
  border: 1px solid var(--st-grey-200);
  border-radius: 6px;
  padding: 12px;
}
.st-mobile-nav__notif .st-notify-dropdown__item:hover { background: var(--st-grey-50); }

/* User block */
.st-mobile-nav__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--st-grey-300);
}
.st-mobile-nav__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--st-orange);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.st-mobile-nav__username {
  font-weight: 700;
  font-size: 15px;
  color: var(--st-text);
}
.st-mobile-nav__usermenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-mnav-userlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  color: var(--st-text);
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  min-height: 44px;
}
.st-mnav-userlink:hover { background: var(--st-grey-100); color: var(--st-text); }
.st-mnav-userlink .bi { font-size: 17px; color: var(--st-text-muted); width: 20px; }

/* Language picker */
.st-mobile-nav__langs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-mnav-lang {
  padding: 12px;
  border: 1px solid var(--st-grey-300);
  border-radius: 6px;
  background: #fff;
  color: var(--st-text);
  text-decoration: none;
  font-size: 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.st-mnav-lang:hover { background: var(--st-grey-100); color: var(--st-text); }

/* Hide drawer entirely on desktop */
@media (min-width: 992px) {
  .st-mobile-nav,
  .st-mobile-nav__backdrop { display: none !important; }
}

/* --- Top alert (≤767px): wrap & stack button below ----------------- */
@media (max-width: 767.98px) {
  .st-topalert {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 8px;
    font-size: 12.5px;
    text-align: center;
  }
  .st-topalert__cta { width: 100%; padding: 10px; font-size: 13px; }
}

/* --- Page head (≤767px): stack title + buttons below -------------- */
@media (max-width: 767.98px) {
  .st-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .st-page-head h1 { font-size: 18px; }
  .st-page-head .d-flex { flex-wrap: wrap; gap: 8px; }
  .st-page-head .d-flex > * { flex: 1 1 auto; min-width: 0; }
  .st-page-head .btn { flex: 1 1 auto; font-size: 13px; padding: 8px 10px; }
}

/* --- Stat cards (≤767px): cleaner spacing ------------------------- */
@media (max-width: 575.98px) {
  .st-stat { padding: 14px; gap: 10px; }
  .st-stat__icon { width: 36px; height: 36px; font-size: 17px; }
  .st-stat__value { font-size: 18px; }
  .st-stat__label { font-size: 11px; }
}

/* --- Cards & tables (≤767px): tighter padding, scroll within ------ */
@media (max-width: 767.98px) {
  .st-card__head {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .st-card__title { font-size: 13px; }
  .st-card__body { padding: 14px; }
  .st-card__foot { padding: 10px 14px; font-size: 11px; }

  .st-table { font-size: 12px; }
  .st-table thead th { padding: 10px 8px; font-size: 10.5px; }
  .st-table tbody td { padding: 10px 8px; }
  .st-table__thumb { width: 40px; height: 40px; }
  .st-table__title { font-size: 12px; }
  .st-table__sku { font-size: 10px; }

  /* tabs in cards: scroll horizontally */
  .st-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .st-tabs::-webkit-scrollbar { display: none; }
  .st-tabs__item { font-size: 12.5px; padding: 10px 14px; flex-shrink: 0; }
}

/* --- Toolbar (≤767px): full-width inputs / wrap buttons ----------- */
@media (max-width: 767.98px) {
  .st-toolbar,
  .st-prod-toolbar {
    padding: 12px;
    gap: 8px;
  }
  .st-prod-toolbar__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .st-toolbar .st-search,
  .st-toolbar .form-select,
  .st-toolbar .form-control,
  .st-prod-toolbar .st-search,
  .st-prod-toolbar .form-select,
  .st-prod-toolbar .form-control {
    flex: 1 1 100%;
    max-width: 100% !important;
    min-width: 0;
    width: 100%;
  }
  .st-toolbar .btn,
  .st-prod-toolbar .btn { width: 100%; }
  .st-toolbar .ms-auto,
  .st-prod-toolbar .ms-auto { margin-left: 0 !important; width: 100%; }
}

/* --- Banner-info (≤767px) ----------------------------------------- */
@media (max-width: 767.98px) {
  .st-banner-info {
    padding: 10px 12px;
    font-size: 12.5px;
    gap: 10px;
  }
  .st-banner-info .bi { font-size: 16px; }
}

/* --- Product rows (≤767px): convert grid → vertical stack --------- */
@media (max-width: 767.98px) {
  .st-prod-row {
    display: block;
    padding: 14px;
    position: relative;
  }
  .st-prod-row__cb {
    position: absolute;
    top: 14px;
    left: 14px;
    padding-top: 0;
    z-index: 1;
  }
  .st-prod-row__thumb {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: var(--st-grey-100);
    margin-bottom: 12px;
    display: block;
  }
  .st-prod-row__body { margin: 0 0 12px; }
  .st-prod-row__name { font-size: 14px; }
  .st-prod-meta { font-size: 12px; }

  .st-prod-row__stock {
    text-align: left;
    padding: 12px;
    background: var(--st-grey-50);
    border-radius: var(--st-radius-sm);
    margin: 12px 0;
  }
  .st-prod-row__stock .st-stock__mag,
  .st-prod-row__stock .st-stock__price,
  .st-prod-row__stock .st-stock__netto {
    display: inline-block;
    margin-right: 10px;
  }
  .st-prod-row__stock .st-stock__price { font-size: 16px; }

  .st-action-stack {
    flex-direction: column;
    min-width: 0;
    gap: 6px;
  }
  .st-action-stack .btn {
    width: 100%;
    padding: 10px;
    font-size: 13.5px;
  }

  /* Marketplace chip row scrolls horizontally if it overflows */
  .st-mp-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .st-mp-chip { font-size: 10px; padding: 2px 6px; }

  /* Shipping cards (expanded view) — fewer columns */
  .st-ship-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .st-ship-card { padding: 8px; font-size: 11.5px; }
}

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

/* --- Product cards grid (B2B Market 4/6 col) ---------------------- */
@media (max-width: 767.98px) {
  .st-prod-card__title { font-size: 12.5px; }
  .st-prod-card__price { font-size: 14px; }
  .st-grid-6 .st-prod-card__price { font-size: 13px; }
}

/* --- B2B Market filter sidebar ------------------------------------ */
@media (max-width: 991.98px) {
  .st-b2b-shell { flex-direction: column; gap: 12px; }
  .st-b2b-filters {
    width: 100%;
    position: static;
    padding: 12px;
    background: var(--st-grey-50);
    border-radius: var(--st-radius);
  }
  .st-b2b-filters__btn { padding: 12px; font-size: 14px; }
}

/* --- View toggle group (≤767px): square buttons ------------------- */
@media (max-width: 767.98px) {
  .st-view-toggle__btn { width: 44px; height: 44px; font-size: 18px; }
}

/* --- Pagination (≤767px): center & wrap --------------------------- */
@media (max-width: 767.98px) {
  .st-prod-pagination {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .st-prod-pagination__perpage,
  .st-prod-pagination__nums { justify-content: center; }
  .pagination { flex-wrap: wrap; justify-content: center; }
}

/* --- Modals (≤767px): edge-to-edge ------------------------------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .modal-content {
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #categoriesModal .modal-dialog { max-width: 100%; }
  #categoriesModal .modal-content { min-height: 100dvh; }
  .st-cat-modal {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .st-cat-modal__list {
    max-height: 35vh;
    border-right: 0;
    border-bottom: 1px solid var(--st-grey-200);
  }
}

/* --- Order rows (orders.html ≤767px): stack table cells ---------- */
@media (max-width: 767.98px) {
  /* Force the orders table into card-style stacked rows */
  table.st-table[style*="table-layout:auto"] thead { display: none; }
  table.st-table[style*="table-layout:auto"] tbody,
  table.st-table[style*="table-layout:auto"] tr {
    display: block;
    width: 100%;
  }
  table.st-table[style*="table-layout:auto"] tbody td {
    display: block;
    width: 100% !important;
    padding: 12px 14px !important;
    border-bottom: 0;
    text-align: left !important;
  }
  table.st-table[style*="table-layout:auto"] tbody tr {
    border: 1px solid var(--st-grey-200);
    border-radius: var(--st-radius);
    margin-bottom: 12px;
    background: #fff;
  }
}

/* --- Accounting / reports / detail layouts ------------------------- */
@media (max-width: 767.98px) {
  .st-conn-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }
  .st-conn-status .d-flex.flex-shrink-0 { width: 100%; }
  .st-conn-status .d-flex.flex-shrink-0 .btn { flex: 1 1 auto; }
}

/* --- Forms (≤767px): label + input fluid -------------------------- */
@media (max-width: 767.98px) {
  .form-label { font-size: 11.5px; }
  .form-control, .form-select { font-size: 14px; padding: 10px 12px; }
  textarea.form-control { font-size: 14px; }
}

/* --- Footer (≤767px) --------------------------------------------- */
@media (max-width: 767.98px) {
  .st-footer__inner { padding: 22px 16px 14px; }
  .st-footer__col h5 { font-size: 14px; margin-bottom: 10px; }
  .st-footer__brand-logo { height: 24px; }
  .st-footer__bottom { padding: 12px 16px; }
  .st-footer__langs { gap: 12px; flex-wrap: wrap; justify-content: center; }
}

/* --- Progress bar / banners (≤767px) ----------------------------- */
@media (max-width: 575.98px) {
  .st-progress-wrap { padding: 12px; }
  .st-progress-row { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; }
}

/* --- Switches stacked (≤575px) ---------------------------------- */
@media (max-width: 575.98px) {
  .form-check.form-switch.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  .form-check.form-switch.d-flex .form-check-input { margin: 0 !important; }
}

/* --- Page heading (≤575px) ---------------------------- */
@media (max-width: 575.98px) {
  .st-page-head__crumbs { font-size: 11px; }
  .st-page-head h1 { font-size: 17px; }
}

/* --- Bigger touch targets on icon-only buttons ------------------- */
@media (max-width: 991.98px) {
  .btn-icon { width: 36px; height: 36px; }
  .btn-sm { min-height: 32px; }
}

/* --- Disable hover-only effects on touch screens ----------------- */
@media (hover: none) and (pointer: coarse) {
  .st-nav__link:hover { background: transparent; color: var(--st-text); }
  .st-nav__link:active { background: var(--st-grey-200); }
  .st-prod-card:hover { box-shadow: var(--st-shadow-sm); }
}

/* --- Top alert (≤767px): wrap & stack button below ----------------- */
@media (max-width: 767.98px) {
  .st-topalert {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 8px;
    font-size: 12.5px;
    text-align: center;
  }
  .st-topalert__cta { width: 100%; padding: 10px; font-size: 13px; }
}

/* --- Role tabs (≤767px): scroll snap + smaller -------------------- */
@media (max-width: 767.98px) {
  .st-roletabs {
    padding: 6px 12px 0;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .st-roletabs::-webkit-scrollbar { display: none; }
  .st-roletab {
    padding: 10px 16px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* --- Page head (≤767px): stack title + buttons below -------------- */
@media (max-width: 767.98px) {
  .st-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .st-page-head h1 { font-size: 18px; }
  .st-page-head .d-flex { flex-wrap: wrap; gap: 8px; }
  .st-page-head .d-flex > * { flex: 1 1 auto; min-width: 0; }
  .st-page-head .btn { flex: 1 1 auto; font-size: 13px; padding: 8px 10px; }
}

/* --- Stat cards (≤767px): cleaner spacing ------------------------- */
@media (max-width: 575.98px) {
  .st-stat { padding: 14px; gap: 10px; }
  .st-stat__icon { width: 36px; height: 36px; font-size: 17px; }
  .st-stat__value { font-size: 18px; }
  .st-stat__label { font-size: 11px; }
}

/* --- Cards & tables (≤767px): tighter padding, scroll within ------ */
@media (max-width: 767.98px) {
  .st-card__head {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .st-card__title { font-size: 13px; }
  .st-card__body { padding: 14px; }
  .st-card__foot { padding: 10px 14px; font-size: 11px; }

  .st-table { font-size: 12px; }
  .st-table thead th { padding: 10px 8px; font-size: 10.5px; }
  .st-table tbody td { padding: 10px 8px; }
  .st-table__thumb { width: 40px; height: 40px; }
  .st-table__title { font-size: 12px; }
  .st-table__sku { font-size: 10px; }

  /* tabs in cards: scroll horizontally */
  .st-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .st-tabs::-webkit-scrollbar { display: none; }
  .st-tabs__item { font-size: 12.5px; padding: 10px 14px; flex-shrink: 0; }
}

/* --- Toolbar (≤767px): full-width inputs / wrap buttons ----------- */
@media (max-width: 767.98px) {
  .st-toolbar {
    padding: 12px;
    gap: 8px;
  }
  .st-toolbar .st-search,
  .st-toolbar .form-select,
  .st-toolbar .form-control {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .st-toolbar .btn { flex: 1 1 calc(50% - 4px); }
  .st-toolbar .ms-auto { margin-left: 0 !important; width: 100%; }
}

/* --- Banner-info (≤767px) ----------------------------------------- */
@media (max-width: 767.98px) {
  .st-banner-info {
    padding: 10px 12px;
    font-size: 12.5px;
    gap: 10px;
  }
  .st-banner-info .bi { font-size: 16px; }
}

/* --- Product rows (≤767px): convert grid → vertical stack --------- */
@media (max-width: 767.98px) {
  .st-prod-row {
    display: block;
    padding: 14px;
    position: relative;
  }
  .st-prod-row__cb {
    position: absolute;
    top: 14px;
    left: 14px;
    padding-top: 0;
    z-index: 1;
  }
  .st-prod-row__thumb {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: var(--st-grey-100);
    margin-bottom: 12px;
    display: block;
  }
  .st-prod-row__body { margin: 0 0 12px; }
  .st-prod-row__name { font-size: 14px; }
  .st-prod-meta { font-size: 12px; }

  .st-prod-row__stock {
    text-align: left;
    padding: 12px;
    background: var(--st-grey-50);
    border-radius: var(--st-radius-sm);
    margin: 12px 0;
  }
  .st-prod-row__stock .st-stock__mag,
  .st-prod-row__stock .st-stock__price,
  .st-prod-row__stock .st-stock__netto {
    display: inline-block;
    margin-right: 10px;
  }
  .st-prod-row__stock .st-stock__price { font-size: 16px; }

  .st-action-stack {
    flex-direction: column;
    min-width: 0;
    gap: 6px;
  }
  .st-action-stack .btn {
    width: 100%;
    padding: 10px;
    font-size: 13.5px;
  }

  /* Marketplace chip row scrolls horizontally if it overflows */
  .st-mp-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .st-mp-chip { font-size: 10px; padding: 2px 6px; }

  /* Shipping cards (expanded view) — fewer columns */
  .st-ship-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .st-ship-card { padding: 8px; font-size: 11.5px; }
}

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

/* --- Product cards grid (B2B Market 4/6 col) ---------------------- */
@media (max-width: 767.98px) {
  .st-prod-card__title { font-size: 12.5px; }
  .st-prod-card__price { font-size: 14px; }
  .st-grid-6 .st-prod-card__price { font-size: 13px; }
}

/* --- B2B Market filter sidebar ------------------------------------ */
@media (max-width: 991.98px) {
  .st-b2b-shell { flex-direction: column; gap: 12px; }
  .st-b2b-filters {
    width: 100%;
    position: static;
    padding: 12px;
    background: var(--st-grey-50);
    border-radius: var(--st-radius);
  }
  .st-b2b-filters__btn { padding: 12px; font-size: 14px; }
}

/* --- View toggle group (≤767px): square buttons ------------------- */
@media (max-width: 767.98px) {
  .st-view-toggle__btn { width: 44px; height: 44px; font-size: 18px; }
}

/* --- Pagination (≤767px): center & wrap --------------------------- */
@media (max-width: 767.98px) {
  .st-prod-pagination {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .st-prod-pagination__perpage,
  .st-prod-pagination__nums { justify-content: center; }
  .pagination { flex-wrap: wrap; justify-content: center; }
}

/* --- Notification dropdown (≤767px) ------------------------------- */
@media (max-width: 575.98px) {
  .st-notify-dropdown {
    width: 100vw;
    max-width: 100vw;
    margin-top: 0 !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    position: fixed !important;
    top: var(--st-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-height: calc(100vh - var(--st-header-h));
    overflow-y: auto;
  }
}

/* --- Modals (≤767px): edge-to-edge ------------------------------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .modal-content {
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #categoriesModal .modal-dialog { max-width: 100%; }
  #categoriesModal .modal-content { min-height: 100dvh; }
  .st-cat-modal {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .st-cat-modal__list {
    max-height: 35vh;
    border-right: 0;
    border-bottom: 1px solid var(--st-grey-200);
  }
}

/* --- Order rows (orders.html ≤767px): stack table cells ---------- */
@media (max-width: 767.98px) {
  /* Force the orders table into card-style stacked rows */
  table.st-table[style*="table-layout:auto"] thead { display: none; }
  table.st-table[style*="table-layout:auto"] tbody,
  table.st-table[style*="table-layout:auto"] tr {
    display: block;
    width: 100%;
  }
  table.st-table[style*="table-layout:auto"] tbody td {
    display: block;
    width: 100% !important;
    padding: 12px 14px !important;
    border-bottom: 0;
    text-align: left !important;
  }
  table.st-table[style*="table-layout:auto"] tbody tr {
    border: 1px solid var(--st-grey-200);
    border-radius: var(--st-radius);
    margin-bottom: 12px;
    background: #fff;
  }
}

/* --- Accounting / reports / detail layouts ------------------------- */
@media (max-width: 767.98px) {
  .st-conn-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }
  .st-conn-status .d-flex.flex-shrink-0 { width: 100%; }
  .st-conn-status .d-flex.flex-shrink-0 .btn { flex: 1 1 auto; }
}

/* --- Forms (≤767px): label + input fluid -------------------------- */
@media (max-width: 767.98px) {
  .form-label { font-size: 11.5px; }
  .form-control, .form-select { font-size: 14px; padding: 10px 12px; }
  textarea.form-control { font-size: 14px; }
}

/* --- Footer (≤767px) --------------------------------------------- */
@media (max-width: 767.98px) {
  .st-footer__inner { padding: 22px 16px 14px; }
  .st-footer__col h5 { font-size: 14px; margin-bottom: 10px; }
  .st-footer__brand-logo { height: 24px; }
  .st-footer__bottom { padding: 12px 16px; }
  .st-footer__langs { gap: 12px; flex-wrap: wrap; justify-content: center; }
}

/* --- Progress bar / banners (≤767px) ----------------------------- */
@media (max-width: 575.98px) {
  .st-progress-wrap { padding: 12px; }
  .st-progress-row { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; }
}

/* --- Tweak buttons on inventories.html -------------------------- */
@media (max-width: 575.98px) {
  /* Stack toggle/switches across full width with label on top */
  .form-check.form-switch.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  .form-check.form-switch.d-flex .form-check-input { margin: 0 !important; }
}

/* --- Page heading actions (Eksport CSV / Drukuj / Sync) ---------- */
@media (max-width: 575.98px) {
  .st-page-head__crumbs { font-size: 11px; }
  .st-page-head h1 { font-size: 17px; }
}

/* --- Bigger touch targets on icon-only buttons ------------------- */
@media (max-width: 991.98px) {
  .btn-icon { width: 36px; height: 36px; }
  .btn-sm { min-height: 32px; }
}

/* --- Disable hover-only effects on touch screens ----------------- */
@media (hover: none) and (pointer: coarse) {
  .st-nav__link:hover { background: transparent; color: var(--st-text); }
  .st-nav__link:active { background: var(--st-grey-200); }
  .st-prod-card:hover { box-shadow: var(--st-shadow-sm); }
}


/* ========================================================================
   MOBILE SECTION BAR — pills below header showing current panel's nav.
   Built dynamically by panel.js initMobileSectionBar().
   ======================================================================== */
.st-mobile-secbar { display: none; }

@media (max-width: 991.98px) {
  .st-mobile-secbar {
    display: block;
    background: #fff;
    border-bottom: 1px solid var(--st-grey-200);
    box-shadow: 0 1px 2px rgba(20,20,20,0.04);
    position: sticky;
    top: var(--st-header-h);
    z-index: 1020;
  }

  .st-mobile-secbar__inner {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .st-mobile-secbar__inner::-webkit-scrollbar { display: none; }

  .st-mobile-secbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text-muted);
    background: var(--st-grey-100);
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
    scroll-snap-align: start;
    min-height: 34px;
    cursor: pointer;
  }

  .st-mobile-secbar__btn:hover,
  .st-mobile-secbar__btn:focus {
    background: var(--st-grey-200);
    color: var(--st-text);
    text-decoration: none;
  }

  .st-mobile-secbar__btn.is-active {
    background: var(--st-orange);
    color: #fff;
    border-color: var(--st-orange);
  }
  .st-mobile-secbar__btn.is-active .bi { color: #fff; }
  .st-mobile-secbar__btn .bi { color: var(--st-text-muted); font-size: 14px; }

  .st-mobile-secbar__badge {
    background: var(--st-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
  }
  .st-mobile-secbar__btn.is-active .st-mobile-secbar__badge {
    background: #fff;
    color: var(--st-orange);
  }

  .st-mobile-secbar__menu {
    font-size: 13px;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    padding: 6px;
  }
  .st-mobile-secbar__menu .dropdown-item {
    padding: 10px 12px;
    min-height: 40px;
    font-size: 14px;
  }
  .st-mobile-secbar__menu .dropdown-item.active {
    background: var(--st-orange-soft);
    color: var(--st-orange);
    font-weight: 600;
  }
}

@media (min-width: 992px) {
  .st-mobile-secbar,
  .st-mobile-secbar__inner { display: none !important; }
}