/* ============================================================================
   YIWU — Inner pages: breadcrumb, listing, filters, product detail, supplier,
   forms, auth, dashboard. Responsive throughout.
   ============================================================================ */

/* ── Page header band ────────────────────────────────────────────────────── */
.page-band { background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding-block: 22px; }
.page-band h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing:-.02em; }
.page-band .sub { color: var(--text-soft); margin-top: 6px; }

.breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.85rem; color: var(--text-muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .bc-sep { color: var(--text-muted); display:inline-flex; }
.breadcrumb .bc-cur { color: var(--text); font-weight:600; }

/* ── Listing layout (sidebar + grid) ─────────────────────────────────────── */
.listing { display:grid; grid-template-columns: 268px 1fr; gap: 28px; align-items:start; padding-block: 28px; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding: 6px 18px 18px; }
.filters .fgroup { padding-block: 16px; border-bottom:1px solid var(--border-soft); }
.filters .fgroup:last-child { border-bottom:0; }
.filters h4 { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--text-muted); margin-bottom:12px; }
.filters label.opt { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.9rem; color: var(--text-soft); cursor:pointer; }
.filters label.opt:hover { color: var(--primary); }
.filters input[type=radio], .filters input[type=checkbox] { accent-color: var(--primary); width:16px; height:16px; }
.filters .price-row { display:flex; gap:8px; align-items:center; }
.filters .price-row input { width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); color:var(--text); }

.listing-main .toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.listing-main .toolbar .count { color: var(--text-soft); font-size:.9rem; }
.listing-main .toolbar .count b { color: var(--text); }
.sort-select { padding:9px 14px; border:1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text); font-weight:600; font-size:.88rem; }

.grid-products { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.grid-suppliers { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap:18px; }

.filters-toggle { display:none; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display:flex; gap:6px; justify-content:center; align-items:center; margin-top:34px; flex-wrap:wrap; }
.pagination .page { min-width:40px; height:40px; padding:0 12px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center; gap:4px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-soft); font-weight:700; font-size:.9rem; transition: all var(--dur) var(--ease); }
.pagination a.page:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.pagination .page.active { background: var(--primary); color:#fff; border-color: var(--primary); }
.pagination .page.disabled { opacity:.4; pointer-events:none; }
.pagination .page.dots { border:0; background:transparent; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding: 70px 20px; color: var(--text-muted); }
.empty-state .ico { width:84px; height:84px; border-radius:24px; background:var(--surface-2); display:grid; place-items:center; margin:0 auto 18px; color: var(--text-muted); }
.empty-state h3 { font-size:1.2rem; font-weight:800; color: var(--text); }
.empty-state p { margin-top:6px; }

/* ── Categories directory ────────────────────────────────────────────────── */
.dir-group { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:18px; }
.dir-group .dg-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border-soft); }
.dir-group .dg-head .glyph { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:22px; color:var(--primary);
  background: linear-gradient(135deg, var(--red-50), var(--red-100)); }
.dir-inds a i, .mega a i, .nav-bar .nav-link i { color: var(--primary); width: 18px; text-align: center; }
.chip i { color: var(--primary); }
html.dark .dir-group .dg-head .glyph { background: linear-gradient(135deg, rgba(193,18,31,.18), rgba(193,18,31,.07)); }
.dir-group .dg-head h2 { font-size:1.2rem; font-weight:800; }
.dir-inds { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:6px 18px; }
.dir-inds a { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r-md); color:var(--text-soft); font-weight:600; font-size:.9rem; }
.dir-inds a:hover { background:var(--surface-2); color:var(--primary); }

/* ── Product detail ──────────────────────────────────────────────────────── */
.pd-grid { display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap:36px; padding-block:28px; align-items:start; }
.pd-gallery .main-img { aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); border:1px solid var(--border); }
.pd-gallery .main-img img { width:100%; height:100%; object-fit:cover; }
.pd-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pd-thumbs button { width:74px; height:74px; border-radius:var(--r-md); overflow:hidden; border:2px solid var(--border); background:var(--surface-2); padding:0; }
.pd-thumbs button.active { border-color: var(--primary); }
.pd-thumbs img { width:100%; height:100%; object-fit:cover; }

.pd-info h1 { font-size: clamp(1.3rem,2.6vw,1.8rem); font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.pd-flags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pd-price-box { background: linear-gradient(135deg, var(--red-50), transparent); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; margin:18px 0; }
html.dark .pd-price-box { background: linear-gradient(135deg, rgba(193,18,31,.12), transparent); }
.pd-price-box .price { font-size:1.8rem; font-weight:900; color:var(--text); letter-spacing:-.02em; }
.pd-price-box .price small { font-size:1rem; font-weight:600; color:var(--text-muted); }
.pd-price-box .moq { color:var(--text-soft); font-size:.9rem; margin-top:4px; }
.tier-table { width:100%; border-collapse:collapse; margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.tier-table th { text-align:start; padding:8px 14px; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--surface-2); border-bottom:1px solid var(--border); }
.tier-table td { padding:9px 14px; font-size:.9rem; border-bottom:1px solid var(--border-soft); }
.tier-table tr:last-child td { border-bottom:0; }
.tier-table td:last-child { text-align:end; }

.pd-attrs { display:grid; grid-template-columns: 1fr 1fr; gap:12px 24px; margin:18px 0; }
.pd-attrs .a { display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.pd-attrs .a .k { color:var(--text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.pd-attrs .a .v { color:var(--text); font-weight:700; }
.pd-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

.pd-section { padding-block:28px; border-top:1px solid var(--border); }
.pd-section h2 { font-size:1.3rem; font-weight:800; margin-bottom:18px; }
.spec-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.spec-table tr { border-bottom:1px solid var(--border-soft); }
.spec-table tr:last-child { border-bottom:0; }
.spec-table td { padding:13px 18px; font-size:.92rem; }
.spec-table td.k { color:var(--text-muted); font-weight:600; width:38%; background:var(--surface-2); }
.spec-table td.v { color:var(--text); }
.pd-desc { color:var(--text-soft); line-height:1.8; font-size:1rem; max-width:75ch; }

/* Supplier mini card (on product page) */
.sup-mini { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; }
.sup-mini .row { display:flex; align-items:center; gap:12px; }
.sup-mini .logo { width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none; }
.sup-mini .cname { font-weight:800; }
.sup-mini .loc { color:var(--text-muted); font-size:.82rem; }
.sup-mini .mini-stats { display:flex; gap:16px; margin:14px 0; font-size:.82rem; }
.sup-mini .mini-stats b { display:block; color:var(--text); font-size:1rem; }

/* ── Supplier profile ────────────────────────────────────────────────────── */
.sp-cover { height: 230px; border-radius: 0 0 var(--r-xl) var(--r-xl); background: linear-gradient(120deg, var(--red-700), var(--red-900)); position:relative; overflow:hidden; }
.sp-cover::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 0%, rgba(255,255,255,.22), transparent 55%); }
.sp-head { display:flex; gap:20px; align-items:flex-end; margin-top:-60px; position:relative; z-index:1; flex-wrap:wrap; }
.sp-head .logo { width:120px; height:120px; border-radius:24px; border:4px solid var(--surface); object-fit:cover; background:var(--surface); box-shadow:var(--shadow-md); }
.sp-head .meta { flex:1; padding-bottom:8px; min-width:240px; }
.sp-head h1 { font-size:clamp(1.4rem,3vw,2rem); font-weight:900; letter-spacing:-.02em; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.3); }
.sp-head .meta.dark h1 { color: var(--text); text-shadow:none; }
.sp-head .badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.sp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin:24px 0; overflow-x:auto; }
.sp-tabs a { padding:12px 18px; font-weight:700; color:var(--text-soft); border-bottom:2px solid transparent; white-space:nowrap; }
.sp-tabs a.active, .sp-tabs a:hover { color:var(--primary); border-color:var(--primary); }
.sp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.sp-stats .s { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; text-align:center; }
.sp-stats .s b { display:block; font-size:1.4rem; font-weight:900; }
.sp-stats .s span { color:var(--text-muted); font-size:.82rem; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.info-grid .i { display:flex; flex-direction:column; gap:2px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.info-grid .i .k { color:var(--text-muted); font-size:.8rem; }
.info-grid .i .v { font-weight:700; }

/* ── Forms / Auth ────────────────────────────────────────────────────────── */
.field-group { margin-bottom:16px; }
.field-group label { display:block; font-weight:700; font-size:.88rem; margin-bottom:7px; }
.field-group .hint { color:var(--text-muted); font-size:.8rem; margin-top:5px; }
.input, .textarea, .select {
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--bg); color:var(--text); font-size:.95rem; font-family:inherit; transition: all var(--dur) var(--ease); }
.input:focus, .textarea:focus, .select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); }
.textarea { min-height:130px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* The red panel takes the larger share of the page. */
.auth-wrap { display:grid; grid-template-columns: 1.18fr 1fr; min-height: calc(100vh - var(--header-h)); }
.auth-side { background: linear-gradient(150deg, var(--red-700), var(--red-900)); color:#fff;
  padding: clamp(48px, 5.5vw, 88px); display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; }
.auth-side::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.18), transparent 50%); }
.auth-side .inner { position:relative; z-index:1; max-width: 560px; }
.auth-side .brand-logo img { height: clamp(64px, 6vw, 92px); width:auto; display:block; }
.auth-side h2 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); font-weight:900; letter-spacing:-.03em; line-height:1.06; }
.auth-side p { opacity:.92; margin-top:18px; font-size: clamp(1.08rem, 1.35vw, 1.3rem); line-height:1.6; }
.auth-side ul { margin-top:34px; display:flex; flex-direction:column; gap:18px; }
.auth-side li { display:flex; align-items:center; gap:14px; font-weight:600; font-size: clamp(1rem, 1.15vw, 1.12rem); }
.auth-side li .ck { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none; }
.auth-form { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.auth-form .box { width:100%; max-width:420px; margin:0 auto; }
.auth-form h1 { font-size:1.7rem; font-weight:900; letter-spacing:-.02em; }
.auth-form .lead { color:var(--text-soft); margin:6px 0 26px; }
.role-pick { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.role-pick label { border:1.5px solid var(--border); border-radius:var(--r-md); padding:14px; cursor:pointer; text-align:center; transition:all var(--dur) var(--ease); }
.role-pick label:hover { border-color:var(--primary); }
.role-pick input { position:absolute; opacity:0; }
.role-pick input:checked + .rp { color:var(--primary); }
.role-pick label:has(input:checked) { border-color:var(--primary); background:var(--red-50); }
html.dark .role-pick label:has(input:checked) { background: rgba(193,18,31,.12); }
.role-pick .rp b { display:block; font-weight:800; }
.role-pick .rp span { font-size:.8rem; color:var(--text-muted); }

.alert { padding:13px 16px; border-radius:var(--r-md); font-size:.9rem; font-weight:600; margin-bottom:18px; }
.alert-error { background:#fdecee; color:#b3151f; border:1px solid #f6c6cb; }
.alert-success { background:#e8f5ee; color:#1a7f4b; border:1px solid #b6e2c8; }
.alert-info { background:#eef2ff; color:#3730a3; border:1px solid #c9d4ff; }
html.dark .alert-error { background:rgba(179,21,31,.16); border-color:rgba(179,21,31,.4); color:#fca5ad; }
html.dark .alert-success { background:rgba(26,127,75,.16); border-color:rgba(26,127,75,.4); color:#7ee0a8; }

/* ── Dashboard (supplier panel) ──────────────────────────────────────────── */
.dash { display:grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - var(--header-h)); }
.dash-side { background:var(--bg-elevated); border-inline-end:1px solid var(--border); padding:20px 14px; position:sticky; top:var(--header-h); align-self:start; height:calc(100vh - var(--header-h)); overflow-y:auto; }
.dash-side .grp { color:var(--text-muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:14px 12px 6px; }
/* Direct children only — the Add Product button and the offer cards bring their own styling. */
.dash-side > a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-md); color:var(--text-soft); font-weight:600; font-size:.92rem; }
.dash-side > a:hover { background:var(--surface-2); color:var(--text); }
.dash-side > a.active { background:var(--red-50); color:var(--primary); }
html.dark .dash-side > a.active { background:rgba(193,18,31,.14); }
.dash-main { padding: 28px 32px; min-width:0; }
.dash-main h1 { font-size:1.6rem; font-weight:900; letter-spacing:-.02em; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:22px 0; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; }
.kpi .label { color:var(--text-muted); font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.kpi .val { font-size:1.9rem; font-weight:900; letter-spacing:-.02em; margin-top:8px; }
.kpi .trend { color:#1a7f4b; font-size:.8rem; font-weight:700; }
.kpi .ico { width:36px; height:36px; border-radius:10px; background:var(--red-50); color:var(--primary); display:grid; place-items:center; margin-inline-start:auto; }
html.dark .kpi .ico { background:rgba(193,18,31,.14); }

.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:22px; }
.panel .ph { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel .ph h3 { font-size:1.05rem; font-weight:800; }
.table { width:100%; border-collapse:collapse; }
.table th { text-align:start; padding:12px 20px; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--surface-2); }
.table td { padding:14px 20px; border-bottom:1px solid var(--border-soft); font-size:.9rem; }
.table tr:last-child td { border-bottom:0; }
.table tr:hover td { background:var(--surface-2); }
.table .pic { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.status-pill { padding:4px 10px; border-radius:999px; font-size:.74rem; font-weight:700; }
.st-new { background:var(--red-50); color:var(--primary); } html.dark .st-new{ background:rgba(193,18,31,.16); }
.st-active, .st-replied { background:#e8f5ee; color:#1a7f4b; } html.dark .st-active,html.dark .st-replied{ background:rgba(26,127,75,.18); color:#7ee0a8; }
.st-read, .st-draft { background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border); }

/* ── Photo upload / manager (dashboard) ──────────────────────────────────── */
.photo-panel { padding:0; overflow:hidden; }
.photo-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 24px 16px; border-bottom:1px solid var(--border-soft); }
.photo-panel-head h3 { font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:8px; }
.photo-panel-head h3 svg { color:var(--primary); }
.photo-panel-head .muted { color:var(--text-muted); font-size:.85rem; margin-top:4px; max-width:52ch; }
.count-badge { flex:none; background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft);
  font-weight:800; font-size:.82rem; padding:5px 12px; border-radius:999px; }
.photo-panel .upload-formats { padding:0 24px 20px; font-size:.8rem; }
.photo-panel > .photo-grid { padding:18px 24px; }

/* Drop zone (create form) */
.dropzone {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:34px 20px; border:2px dashed var(--border); border-radius:var(--r-lg);
  background:var(--surface-2); cursor:pointer; transition:all var(--dur) var(--ease);
}
.dropzone:hover, .dropzone.dragging { border-color:var(--primary); background:var(--red-50); transform:translateY(-1px); }
html.dark .dropzone:hover, html.dark .dropzone.dragging { background:rgba(193,18,31,.10); }
.dropzone.dragging { border-style:solid; box-shadow:0 0 0 4px var(--ring); }
.dropzone .dz-ico { font-size:30px; color:var(--primary); }
.dropzone b { font-weight:800; font-size:.98rem; }
.dropzone small { color:var(--text-muted); font-size:.82rem; }

/* Photo grid + cells */
.photo-grid, .preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.preview-grid { margin-top:14px; }
.preview-grid:empty { display:none; }
.photo-cell {
  position:relative; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  border:2px solid var(--border); background:var(--surface-2); box-shadow:var(--shadow-xs);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.photo-cell:hover { box-shadow:var(--shadow-md); }
.photo-cell.is-main { border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.photo-cell > img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-cell .photo-tag {
  position:absolute; top:8px; inset-inline-start:8px; z-index:3;
  background:var(--primary); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.02em;
  padding:4px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px;
  box-shadow:0 2px 8px rgba(193,18,31,.35);
}
.photo-cell .photo-tag svg { color:#ffd97a; }

/* Action overlay — always slightly visible, full on hover */
.photo-cell .photo-actions {
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-end; gap:6px; padding:8px;
  background:linear-gradient(to bottom, rgba(0,0,0,.42), transparent 42%);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.photo-cell:hover .photo-actions, .photo-cell:focus-within .photo-actions { opacity:1; }
.photo-cell .photo-actions form { margin:0; display:flex; }
.photo-cell .pa-btn {
  width:34px; height:34px; border-radius:10px; border:0; display:grid; place-items:center;
  background:rgba(255,255,255,.95); color:#374151; backdrop-filter:blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,.18); transition:all var(--dur) var(--ease); cursor:pointer;
}
.photo-cell .pa-btn:hover { transform:translateY(-1px); }
.photo-cell .pa-btn:not(.pa-del):hover { background:#fff; color:#f5b50a; }   /* set-main → gold star */
.photo-cell .pa-del:hover { background:var(--primary); color:#fff; }

/* Add tile (inline "+" in the edit grid) */
.add-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;
  border:2px dashed var(--border); background:var(--surface-2); color:var(--text-soft); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.add-tile:hover, .add-tile.dragging { border-color:var(--primary); background:var(--red-50); color:var(--primary); transform:translateY(-2px); }
html.dark .add-tile:hover, html.dark .add-tile.dragging { background:rgba(193,18,31,.10); }
.add-tile .dz-ico { font-size:24px; color:var(--primary); }
.add-tile b { font-weight:800; font-size:.86rem; }
.add-tile small { font-size:.72rem; color:var(--text-muted); }
.add-tile.dragging { border-style:solid; box-shadow:0 0 0 4px var(--ring); }

/* ── Company logo + cover uploaders (profile editor) ─────────────────────── */
.cover-edit {
  position:relative; height:180px; background-color:var(--surface-2);
  background-size:cover; background-position:center;
  background-image:linear-gradient(120deg, var(--red-700), var(--red-900));
  display:flex; align-items:center; justify-content:center;
}
.cover-edit .cover-hint { color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:8px; opacity:.95; }
.cover-upload-btn {
  position:absolute; bottom:14px; inset-inline-end:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--glass-bg); backdrop-filter:blur(8px); border:1px solid var(--glass-border);
  color:var(--text); font-weight:700; font-size:.82rem; padding:8px 14px; border-radius:999px;
  box-shadow:var(--shadow-sm); transition:all var(--dur) var(--ease);
}
.cover-upload-btn:hover { background:#fff; color:var(--primary); transform:translateY(-1px); }
html.dark .cover-upload-btn:hover { background:var(--surface); }
.cover-remove {
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  width:34px; height:34px; border-radius:10px; border:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); color:#fff; cursor:pointer; transition:all var(--dur) var(--ease);
}
.cover-remove:hover { background:var(--primary); }

.logo-edit-row { display:flex; align-items:center; gap:18px; padding:0 24px 22px; margin-top:-44px; position:relative; z-index:1; }
.logo-edit { position:relative; flex:none; }
.logo-edit img {
  width:96px; height:96px; border-radius:20px; object-fit:cover;
  border:4px solid var(--surface); background:var(--surface); box-shadow:var(--shadow-md); display:block;
}
.logo-upload-btn {
  position:absolute; bottom:-4px; inset-inline-end:-4px;
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center; cursor:pointer;
  background:var(--primary); color:#fff; border:3px solid var(--surface);
  box-shadow:var(--shadow-sm); transition:all var(--dur) var(--ease);
}
.logo-upload-btn:hover { background:var(--primary-h); transform:scale(1.08); }
.logo-edit-row .muted { color:var(--text-muted); }
@media (max-width:560px){
  .logo-edit-row { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ── Dynamic key/value rows (specs, price tiers) ─────────────────────────── */
.kv-rows { display:flex; flex-direction:column; gap:10px; }
.kv-row { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; }
.kv-row .kv-del {
  width:40px; height:40px; flex:none; border-radius:var(--r-md); border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); display:grid; place-items:center; cursor:pointer;
  font-size:1rem; transition:all var(--dur) var(--ease);
}
.kv-row .kv-del:hover { border-color:var(--primary); color:#fff; background:var(--primary); }
@media (max-width:560px){
  .kv-row { grid-template-columns:1fr 1fr auto; gap:8px; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px){
  .pd-grid { grid-template-columns:1fr; }
  .auth-wrap { grid-template-columns:1fr; }
  .auth-side { display:none; }
  .dash { grid-template-columns:1fr; }
  .dash-side { display:none; }
}
@media (max-width: 860px){
  .listing { grid-template-columns:1fr; }
  .filters { position:static; display:none; }
  .filters.open { display:block; }
  .filters-toggle { display:inline-flex; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .sp-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .form-row { grid-template-columns:1fr; }
  .pd-attrs { grid-template-columns:1fr; }
  .info-grid { grid-template-columns:1fr; }
  .role-pick { grid-template-columns:1fr; }
  .auth-form { padding:28px 20px; }
  .dash-main { padding:20px 16px; }
  .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; }
}

/* ── Marketing pages (Sell on YIWU.ca / Trade Assurance / Amazon FBA) ─────── */
.feature-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.feat-card { display:flex; flex-direction:column; gap: 12px; padding: 26px 24px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease-out); }
.feat-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.feat-card .glyph { width: 52px; height: 52px; border-radius: 16px; display:grid; place-items:center;
  font-size: 21px; color: var(--primary); background: linear-gradient(135deg, var(--red-50), var(--red-100)); }
html.dark .feat-card .glyph { background: linear-gradient(135deg, rgba(193,18,31,.18), rgba(193,18,31,.08)); }
.feat-card h3 { font-size: 1.06rem; font-weight: 800; letter-spacing:-.01em; }
.feat-card p { color: var(--text-soft); font-size: .93rem; line-height: 1.65; }

.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; list-style:none; padding:0; counter-reset: step; }
.steps li { display:flex; gap: 16px; padding: 22px; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--r-lg); }
.steps li .n { flex:none; width: 38px; height: 38px; border-radius: 50%; display:grid; place-items:center;
  background: var(--primary); color:#fff; font-weight: 900; font-size: .95rem; box-shadow: var(--shadow-red); }
.steps li h3 { font-size: 1rem; font-weight: 800; margin-bottom: 5px; }
.steps li p { color: var(--text-soft); font-size: .9rem; line-height: 1.6; }

/* ── Filter sidebar controls (selects + numeric trade terms) ─────────────── */
.filters .fselect, .filters .finput {
  width: 100%; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: .88rem; font-weight: 600; outline: none;
}
.filters .fselect:focus, .filters .finput:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.filters .opt svg { color: #d9a406; }

/* "Best rated" flag + inline supplier rating on product cards */
.badge-best { background: #e8f5ee; color: #1a7f4b; }
html.dark .badge-best { background: rgba(26,127,75,.2); color: #54d394; }
.product-card .supplier .rate { display:inline-flex; align-items:center; gap:3px; flex:none;
  color:#b07d05; font-weight:800; font-size:.76rem; }
html.dark .product-card .supplier .rate { color:#f0c04a; }
.dg-head .dg-all { margin-inline-start: auto; color: var(--primary); font-weight: 800; font-size: .84rem;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dg-head .dg-all:hover { gap: 10px; }
.dg-head h2 a:hover { color: var(--primary); }

/* Product page: section head with a "view all" link */
.pd-sec-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pd-sec-head h2 { display:inline-flex; align-items:center; gap:9px; }
.pd-sec-head h2 svg { color: var(--primary); }
.pd-sec-head .link-all { color: var(--primary); font-weight:700; font-size:.86rem;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pd-sec-head .link-all:hover { gap: 10px; }

/* ── Members-only trade detail ───────────────────────────────────────────── */
.pd-gated { position: relative; }
.pd-gated.is-locked .pd-attrs .v { color: var(--text-muted); }
.masked { letter-spacing: 2px; user-select: none; }
.pd-gate { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; padding:16px 18px;
  border:1px dashed var(--border); border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--red-50), var(--surface-2)); }
html.dark .pd-gate { background: linear-gradient(135deg, rgba(193,18,31,.14), var(--surface-2)); }
.pd-gate .gate-ico { width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  background: var(--primary); color:#fff; box-shadow: var(--shadow-red); }
.pd-gate .gate-copy { flex:1; min-width: 200px; }
.pd-gate .gate-copy b { display:block; font-size:1rem; font-weight:800; }
.pd-gate .gate-copy p { color: var(--text-soft); font-size:.88rem; margin-top:3px; }
.pd-gate .gate-btns { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Post-signup welcome ─────────────────────────────────────────────────── */
.wel-hero { position: relative; overflow: hidden; min-height: calc(100vh - var(--header-h) - var(--nav-h));
  display: grid; place-items: center; text-align: center; background: var(--bg); }
.wel-bg { position: absolute; inset: 0; pointer-events: none; }
.wel-bg .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.wel-bg .b1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(193,18,31,.45), transparent 70%); top: -160px; inset-inline-end: -120px; }
.wel-bg .b2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(220,20,60,.3), transparent 70%); bottom: -180px; inset-inline-start: -100px; }
.wel-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-block: 60px; }
.wel-check { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem;
  background: var(--primary); color: #fff; box-shadow: var(--shadow-red); animation: floatUp .6s var(--ease-out); }
.wel-pill { padding: 7px 16px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border);
  font-weight: 700; font-size: .8rem; color: var(--text-soft); }
.wel-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; }
.wel-sub { color: var(--text-soft); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 56ch; }
.wel-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.wel-scroll { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 38px;
  color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.wel-scroll svg { animation: floatUp 1.6s var(--ease) infinite alternate; }

.wel-next { padding-block: clamp(40px, 7vw, 80px); background: var(--bg-elevated); border-top: 1px solid var(--border); text-align: center; }
.wel-next h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 26px; }
.wel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wel-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 28px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease-out); }
.wel-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.wel-card .glyph { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 20px;
  color: var(--primary); background: linear-gradient(135deg, var(--red-50), var(--red-100)); }
html.dark .wel-card .glyph { background: linear-gradient(135deg, rgba(193,18,31,.18), rgba(193,18,31,.08)); }
.wel-card b { font-size: 1rem; font-weight: 800; }
.wel-card span:last-child { color: var(--text-soft); font-size: .9rem; }
.wel-enter { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wel-enter .hint { color: var(--text-muted); font-size: .84rem; }

/* ── Category tag picker (supplier product form) ─────────────────────────── */
.tagpick { position: relative; }
.tp-box { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 48px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: text; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tp-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.tp-input { flex: 1; min-width: 140px; border: 0; outline: none; background: transparent;
  color: var(--text); font-size: .92rem; padding: 4px 0; }
.tp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px;
  border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 700; max-width: 100%; }
.tp-tag b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tp-tag.is-primary { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); }
html.dark .tp-tag.is-primary { background: rgba(193,18,31,.16); border-color: rgba(193,18,31,.4); color: var(--red-400); }
.tp-tag button { border: 0; background: transparent; color: inherit; opacity: .6; font-size: 1.05rem;
  line-height: 1; padding: 0 3px; }
.tp-tag button:hover { opacity: 1; }
.tp-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; }
.tp-opt { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: start; border: 0;
  background: transparent; padding: 8px 11px; border-radius: var(--r-sm); color: var(--text); }
.tp-opt b { font-size: .9rem; font-weight: 700; }
.tp-opt small { color: var(--text-muted); font-size: .76rem; }
.tp-opt.is-industry b { color: var(--primary); }
.tp-opt:hover, .tp-opt.is-on { background: var(--surface-2); }
.tp-help { color: var(--text-muted); font-size: .78rem; margin-top: 6px; }

/* ── Dashboard sidebar upgrade offers ────────────────────────────────────── */
.side-offers { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 6px; }
.side-offers .offer { display: grid; gap: 3px; padding: 14px 15px; border-radius: var(--r-lg);
  position: relative; overflow: hidden; color: #fff; font-weight: 600;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); }
.side-offers .offer:hover, .side-offers .offer:focus-visible {
  transform: translateY(-3px); box-shadow: var(--shadow-md); filter: brightness(1.08); color: #fff; }
.side-offers .offer-verify { background: linear-gradient(135deg, #0f766e, #115e59); }
.side-offers .offer-boost  { background: linear-gradient(135deg, var(--red-700), var(--red-900)); }
.side-offers .offer b, .side-offers .offer .sub, .side-offers .offer .go { color: #fff; }
.offer .ico { position: absolute; inset-inline-end: -6px; top: -6px; font-size: 3.1rem; opacity: .16; }
.offer b { font-size: .92rem; font-weight: 800; line-height: 1.25; }
.offer .sub { font-size: .78rem; opacity: .88; line-height: 1.45; }
.offer .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.offer:hover .go { gap: 10px; }

/* ── Repeatable profile rows (contacts / offices) ────────────────────────── */
.rep-head { margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.rep-head h4 { font-size: .95rem; font-weight: 800; }
.rep-head p { font-size: .82rem; margin-top: 3px; }
.rep-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.rep-row { position: relative; padding: 16px 16px 12px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2); }
.rep-row .form-row { margin-bottom: 0; }
.rep-del { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 6px 10px;
  border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-muted);
  font-size: .78rem; font-weight: 700; }
.rep-del:hover { background: var(--red-50); color: var(--primary); }
html.dark .rep-del:hover { background: rgba(193,18,31,.16); }

/* ── Supplier page: contacts + offices ───────────────────────────────────── */
.sp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.sp-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sp-item { display: flex; gap: 12px; padding: 13px 15px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
.sp-item .ico { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--primary); }
.sp-item b { display: block; font-size: .93rem; font-weight: 800; }
.sp-item .role { display: block; color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.sp-item .line { display: block; color: var(--text-soft); font-size: .85rem; margin-top: 3px; }
.sp-item .line a { color: var(--primary); font-weight: 700; }

/* Categories directory: chevron in place of the old item counts */
.dir-inds a .go { margin-inline-start: auto; display: grid; place-items: center; color: var(--text-muted);
  transition: color .2s var(--ease), transform .2s var(--ease); }
.dir-inds a:hover .go { color: var(--primary); transform: translateX(3px); }
html[dir="rtl"] .dir-inds a .go svg { transform: rotate(180deg); }
html[dir="rtl"] .dir-inds a:hover .go { transform: translateX(-3px); }

/* ── Buyer profile page ──────────────────────────────────────────────────── */
.prof-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 20px; align-items: start; }
.prof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.prof-stats > * { padding: 14px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.prof-stats b { display: block; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.prof-stats span { color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.prof-stats a:hover b { color: var(--primary); }
@media (max-width: 900px){ .prof-grid { grid-template-columns: 1fr; } }