/* ═══════════════════════════════════════════════════════════════
   CATALOG — shared chrome for the inner listing pages (Products,
   Suppliers, About). Page header/breadcrumb/stats are used by all
   three; the sidebar shell, search box, filter pills, topbar, and
   empty-state are used by Products and Suppliers.
   ═══════════════════════════════════════════════════════════════ */

/* ─── PAGE HEADER ─── */
#pageHeader {
  background: linear-gradient(135deg, #0f1724 0%, #1a2540 60%, #0d2057 100%);
  padding: 120px 0 60px;
  position: relative;
  overflow: hidden;
}
#pageHeader canvas {
  position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  pointer-events: none; opacity: 0.55;
}
.page-header-content { position: relative; z-index: 2; }
.breadcrumb-custom {
  display: flex; align-items: center; gap: 8px;
  font-size: calc(0.78rem * var(--km-scale, 1)); color: rgba(255,255,255,0.45);
  margin-bottom: 1.2rem; flex-wrap: wrap;
}
.breadcrumb-custom a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }
.breadcrumb-custom a:hover { color: rgba(255,255,255,0.85); }
.breadcrumb-custom .sep { color: rgba(255,255,255,0.2); font-size: calc(0.65rem * var(--km-scale, 1)); }
.breadcrumb-custom .current { color: rgba(255,255,255,0.8); font-weight: 500; }
.page-title {
  font-size: calc(clamp(1.9rem, 4vw, 3rem) * var(--km-scale, 1));
  font-weight: 800;
  color: white;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.page-title .accent {
  background: linear-gradient(135deg, var(--logo-blue), var(--primary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-subtitle { color: rgba(255,255,255,0.55); font-size: calc(0.95rem * var(--km-scale, 1)); max-width: 480px; }
.page-header-stats { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.ph-stat strong { font-family: var(--font-heading); font-size: calc(1.6rem * var(--km-scale, 1)); font-weight: 800; color: white; display: block; line-height: 1; }
.ph-stat span { font-size: calc(0.72rem * var(--km-scale, 1)); color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }

/* ─── MAIN LAYOUT ─── */
#mainContent { padding: 50px 0 80px; }

/* ─── SIDEBAR SHELL ─── */
.sidebar { position: sticky; top: 90px; }
.sidebar-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

/* Search box */
.sidebar-search { padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); }
.search-input-wrap { position: relative; }
.search-input-wrap input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  font-size: calc(0.82rem * var(--km-scale, 1));
  color: var(--text);
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,110,253,0.1); }
.search-input-wrap i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: calc(0.78rem * var(--km-scale, 1)); }

/* Category / country filter */
.cat-filter { padding: 1rem 1.4rem; }
.cat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: calc(0.72rem * var(--km-scale, 1));
  font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 4px 6px 0;
  background: none;
  font-family: var(--font-body);
}
.cat-pill:hover, .cat-pill.active { background: var(--primary); border-color: var(--primary); color: white; }

/* ─── LISTING TOPBAR ─── */
.products-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.8rem; flex-wrap: wrap; gap: 1rem;
}
.products-topbar-left { display: flex; align-items: center; gap: 10px; }
.result-count { font-size: calc(0.82rem * var(--km-scale, 1)); color: var(--text-muted); }

/* ─── EMPTY STATE ─── */
.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-state i { font-size: calc(3rem * var(--km-scale, 1)); color: var(--text-light); margin-bottom: 1rem; display: block; }
.empty-state h5 { font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem; }
.empty-state p { font-size: calc(0.85rem * var(--km-scale, 1)); color: var(--text-light); }

@media (max-width: 991px) {
  .sidebar { position: static; margin-bottom: 2rem; }
}
@media (max-width: 575px) {
  #pageHeader { padding: 100px 0 40px; }
  .page-header-stats { gap: 1.5rem; }
}