/* TwoDock — dense Alibaba-style B2B marketplace theme.
   Original branding (TwoDock name/logo). Orange-led, card-dense, badge-rich. */
/* Astryx port (2026-11-10): original --brand/--ink vars are one-line
   aliases to astryx-tokens.css. Orange #FA6400 retires. */
/* MWG 2026-11-11 — cross-document view transitions (React-feel, Modern Web
   Guidance): full navigations cross-fade instead of flashing white.
   Pure progressive enhancement — browsers without support ignore the rule
   and navigate exactly as today. Respects reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
:root {
  --brand: var(--color-accent);
  --brand-dark: var(--ax-accent-deep);
  --brand-light: var(--color-accent-muted);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --bg: var(--color-background-surface);
  --card: var(--color-background-card);
  --green: var(--color-success);
  --blue: var(--color-accent);
  --red: var(--color-error);
  --radius: var(--radius-element);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 14px; color: var(--ink); background: var(--bg); line-height: 1.45; }
a { color: #e1e1e1; text-decoration: none; }
a:hover { color: var(--brand-dark); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.page { padding: 16px 0 32px; min-height: 60vh; }

/* ---------- Top utility bar ---------- */
.topbar { background: #404040; color: #cfcfcf; font-size: 12px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px; gap: 12px; }
.topbar a { color: #e8e8e8; margin-left: 12px; }
.topbar a:hover { color: #fff; }
.topbar .lang-switch { color: #767676; }
.topbar .lang-switch a { margin: 0 4px; }
.topbar .lang-switch strong { color: #fff; margin: 0 4px; }

/* ---------- Main header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 16px; }
.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo-mark { background: var(--brand); color: #fff; font-weight: 800; border-radius: 10px; padding: 8px 11px; font-size: 18px; }
.logo-text { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; }
.logo-text em { font-style: normal; color: var(--brand); }
.logo-sub { font-size: 11px; color: var(--muted); display: block; line-height: 1; }
.searchbar { display: flex; flex: 1; max-width: 720px; height: 44px; }
.searchbar select { border: 2px solid var(--brand); border-right: 1px solid var(--line); border-radius: 22px 0 0 22px; padding: 0 8px; font-size: 13px; background: #fafafa; max-width: 150px; }
.searchbar input { flex: 1; border: 2px solid var(--brand); border-left: 0; border-right: 0; padding: 0 12px; font-size: 14px; outline: none; min-width: 0; }
.searchbar button { background: var(--brand); color: #fff; border: 0; border-radius: 0 22px 22px 0; padding: 0 30px; font-size: 15px; font-weight: 700; cursor: pointer; }
.searchbar button:hover { background: var(--brand-dark); }
.searchbar-sm { height: 38px; max-width: 520px; margin-bottom: 8px; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- Category nav strip ---------- */
.catnav { background: var(--brand); }
.catnav-inner { display: flex; align-items: center; gap: 4px; overflow-x: auto; }
.catnav-inner a { color: #fff; font-size: 13.5px; font-weight: 600; padding: 8px 12px; white-space: nowrap; }
.catnav-inner a:hover { background: rgba(64,64,64,.12); color: #fff; text-decoration: none; }

/* ---------- Buttons / badges / forms ---------- */
/* Phase 5 B: early .btn base removed — superseded by polish.css and the
   shared .btn/.pm-btn block at the end of premium.css (same classes, one look). */
.badge-verified { display: inline-block; background: #eeeeee; color: var(--green); border: 1px solid #d2d2d2; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0px 8px; margin-left: 4px; vertical-align: middle; }
.badge-verified::before { content: "✓ "; }
/* Urgent RFQ badge (#33): deep teal accent, near-black-safe contrast. */
.badge-urgent { display: inline-block; background: #0064E0; color: #fff; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0px 8px; margin-left: 4px; vertical-align: middle; letter-spacing: .02em; }
.badge-urgent::before { content: "⚡ "; }
/* NDA badge (#35): near-black outline badge, premium light theme. */
.badge-nda { display: inline-block; background: #161616; color: #fafaf9; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0px 8px; margin-left: 4px; vertical-align: middle; letter-spacing: .02em; }
/* NDA locked-file card + sign modal (#35). */
.nda-locked { border: 1px dashed #b9b9b7; border-radius: 10px; padding: 16px; background: #fafaf9; text-align: center; }
.nda-textbox { max-height: 320px; overflow-y: auto; border: 1px solid #e5e5e4; border-radius: 8px; padding: 12px 16px; background: #fff; font-size: 13px; line-height: 1.6; white-space: pre-wrap; text-align: left; }
.nda-modal { position: fixed; inset: 0; background: rgba(22,22,22,.5); display: flex; align-items: center; justify-content: center; z-index: 1500; padding: 16px; }
.nda-modal-card { background: #fafaf9; border-radius: 12px; max-width: 640px; width: 100%; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.nda-sig-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; }
/* NDA landing trust strip (#35): slim premium card, below the fold. */
.nda-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #e5e5e4; border-radius: 14px; padding: 20px 24px; background: #fff; }
.nda-strip h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
.nda-strip p { margin: 0; color: #555; font-size: 14px; line-height: 1.55; max-width: 660px; }
.nda-strip .btn { white-space: nowrap; }
@media (max-width: 640px) { .nda-strip { flex-direction: column; align-items: flex-start; } }
.rfq-urgent-box { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #e5e5e4; border-radius: 10px; padding: 12px 12px; margin: 12px 0; background: #fafaf9; cursor: pointer; }
.rfq-urgent-box input[type="checkbox"] { margin-top: 4px; accent-color: #0064E0; }
.rfq-urgent-demo { display: inline-block; font-size: 11px; font-weight: 700; color: #0064E0; border: 1px solid rgba(0,100,224,.28); border-radius: 4px; padding: 0 4px; margin-left: 8px; vertical-align: middle; }
.rfq-urgent-owner { color: #0064E0; margin-top: 4px; }
.badge-smart { display: inline-block; background: #f6f6f6; color: #969696; border: 1px solid #e2e2e2; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.badge-shield { display: inline-block; background: #f3f3f3; color: var(--blue); border: 1px solid #dedede; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0px 8px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], select, textarea {
  width: 100%; border: 1px solid #cfcfcf; border-radius: 6px; padding: 8px 8px; font-size: 14px; font-family: inherit; background: #fff; color: #404040; color-scheme: light;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(128,128,128,.15); }
label { display: block; font-size: 13px; font-weight: 600; margin: 8px 0; }
label input, label select, label textarea { font-weight: 400; margin-top: 4px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { background: #f4f4f4; border: 1px solid #d3d3d3; color: #525252; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.flash { border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; font-size: 13.5px; }
.flash-success { background: #eeeeee; border: 1px solid #d2d2d2; color: #404040; }
.flash-error { background: #f4f4f4; border: 1px solid #d3d3d3; color: #525252; }
.flash-list { margin: 6px 0 2px; padding-left: 18px; font-size: 12.5px; }
.flash-list li { margin: 2px 0; }

/* ---------- Homepage hero ---------- */
.hero-grid { display: grid; grid-template-columns: 230px 1fr 250px; gap: 12px; margin-bottom: 16px; }
.cat-sidebar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cat-sidebar h3 { margin: 0; padding: 12px 12px; font-size: 14px; border-bottom: 1px solid var(--line); background: #fafafa; }
.cat-sidebar a { display: block; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f3f3f3; }
.cat-sidebar a:hover { background: var(--brand-light); color: var(--brand-dark); text-decoration: none; }
.hero-banner { background: linear-gradient(115deg, #808080 0%, #9e9e9e 55%, #b2b2b2 100%); border-radius: var(--radius); color: #fff; padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; min-height: 300px; }
.hero-banner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.14); }
.hero-banner::before { content: ""; position: absolute; right: 60px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.10); }
.hero-banner h1 { font-size: 32px; margin: 0 0 8px; max-width: 520px; line-height: 1.25; position: relative; z-index: 1; }
.hero-banner p { font-size: 15px; opacity: .95; margin: 0 0 16px; max-width: 520px; position: relative; z-index: 1; }
.hero-banner .btn { position: relative; z-index: 1; align-self: flex-start; background: #fff; color: var(--brand-dark); border: 0; font-size: 15px; padding: 12px 30px; }
.hero-side { display: flex; flex-direction: column; gap: 12px; }
.welcome-card, .announce-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.welcome-card h3 { margin: 0 0 4px; font-size: 15px; }
.welcome-card p { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.welcome-card .btn { margin-bottom: 8px; }
.announce-card h4 { margin: 0 0 8px; font-size: 13px; }
.announce-card ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--muted); }
.announce-card li { margin-bottom: 4px; }

/* ---------- Sections & product cards ---------- */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 12px; }
.section-title { font-size: 20px; font-weight: 800; margin: 0; padding-left: 8px; border-left: 4px solid var(--brand); }
.section-link { font-size: 13px; }
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.product-card:hover { box-shadow: 0 4px 14px rgba(64,64,64,.10); text-decoration: none; }
.product-img { aspect-ratio: 1/1; background: linear-gradient(135deg, #eaeaea, #d4d4d4); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img span { font-size: 52px; font-weight: 800; color: rgba(128,128,128,.45); }
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-name { font-size: 13px; line-height: 1.35; height: 35px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #444; }
.product-card:hover .product-name { color: var(--brand-dark); }
.product-price { color: var(--brand-dark); font-weight: 800; font-size: 15px; }
.product-meta { font-size: 12px; color: var(--muted); }
.supplier-line { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Trust strip ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 4px; }
.trust-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.trust-item strong { display: block; font-size: 14px; margin-bottom: 4px; }
.trust-item span { font-size: 12.5px; color: var(--muted); }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 8px; text-align: center; }
.cat-card:hover { border-color: var(--brand); text-decoration: none; }
.cat-letter { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); font-size: 22px; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 8px; }
.cat-name { display: block; font-size: 13px; font-weight: 700; }
.cat-count { font-size: 12px; color: var(--muted); }

/* ---------- RFQ banner / how ---------- */
.rfq-banner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 20px 0; }
.rfq-banner h2 { margin: 0 0 4px; font-size: 20px; }
.rfq-banner p { margin: 0; color: var(--muted); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.how-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.how-n { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 8px; }
.how-card h3 { margin: 0 0 4px; font-size: 15px; }
.how-card p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- Shop listing ---------- */
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; position: sticky; top: 120px; }
.filters h3 { margin: 0 0 8px; font-size: 14px; }
.filters .f-group { border-top: 1px solid var(--line); padding: 8px 0; }
.filters .f-group:first-of-type { border-top: 0; }
.filters .f-title { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.filters a { display: block; font-size: 13px; padding: 4px 0; color: #444; }
.filters a.active { color: var(--brand-dark); font-weight: 700; }
.sortbar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sortbar select { width: auto; padding: 4px 8px; font-size: 13px; }
.empty { background: #fff; border: 1px dashed #c9c9c9; border-radius: var(--radius); padding: 32px; text-align: center; color: var(--muted); }

/* ---------- Product detail ---------- */
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.detail-layout { display: grid; grid-template-columns: 380px 1fr 280px; gap: 16px; align-items: start; }
.detail-gallery { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.detail-img { aspect-ratio: 1/1; background: linear-gradient(135deg, #eaeaea, #d4d4d4); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.detail-img span { font-size: 96px; font-weight: 800; color: rgba(128,128,128,.4); }
.detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-info { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; }
.detail-info h1 { font-size: 19px; margin: 0 0 8px; line-height: 1.4; }
.tier-table { border: 1px solid var(--line); border-radius: 6px; margin: 12px 0; overflow: hidden; }
.tier-head, .tier-row { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 12px; font-size: 13.5px; }
.tier-head { background: #fafafa; font-weight: 700; border-bottom: 1px solid var(--line); }
.tier-row:nth-child(even) { background: #fdfdfd; }
.tier-row span:last-child { color: var(--brand-dark); font-weight: 700; }
.detail-meta { display: flex; gap: 24px; font-size: 13.5px; margin: 8px 0 16px; color: #444; }
.buy-box { display: flex; gap: 8px; align-items: flex-end; margin: 12px 0; flex-wrap: wrap; }
.buy-box label { margin: 0; }
.buy-box input { width: 110px; }
.detail-info h3 { font-size: 15px; margin: 20px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.desc { font-size: 13.5px; color: #444; white-space: pre-line; }
.protect-box { background: #f0f7ff; border: 1px solid #dadada; border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.protect-box strong { color: #626262; display: block; margin-bottom: 4px; font-size: 14px; }
.protect-box p { margin: 0; font-size: 13px; color: #616161; }
.protect-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.protect-points div { background: #fff; border: 1px solid #e7e7e7; border-radius: 6px; padding: 8px; font-size: 12.5px; }
.protect-points strong { display: block; color: #626262; margin-bottom: 0px; }

/* Supplier card (detail right rail) */
.supplier-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 120px; }
.supplier-card h3 { margin: 0 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.supplier-card .co-name { font-size: 16px; font-weight: 800; margin: 4px 0; }
.supplier-card .co-loc { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.sup-stats { border-top: 1px solid var(--line); margin: 8px 0; }
.sup-stats div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid #f2f2f2; }
.sup-stats span:last-child { font-weight: 700; }
.supplier-card .btn { margin-top: 8px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13.5px; }
.table th, .table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { background: #fafafa; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.table tr:last-child td { border-bottom: 0; }
.status { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0px 8px; background: #eee; color: #555; text-transform: capitalize; }
.status-pending { background: #ebebeb; color: #545454; }
.status-confirmed { background: #f3f3f3; color: #6f6f6f; }
.status-shipped { background: #f4f4f4; color: #6c6c6c; }
.status-delivered, .status-active { background: #eeeeee; color: #404040; }
.status-cancelled, .status-inactive, .status-closed { background: #f4f4f4; color: #626262; }
.status-open { background: #eeeeee; color: #404040; }
.status-sent { background: #f3f3f3; color: #6f6f6f; }
.status-changes_requested { background: #ebebeb; color: #545454; }
.status-superseded { background: #f1f1f1; color: #777; }
.status-accepted { background: #eeeeee; color: #404040; }
.status-declined { background: #f4f4f4; color: #626262; }
.status-terminated { background: #f4f4f4; color: #626262; }
.status-expired { background: #f1f1f1; color: #777; }
/* PHASE-2 #15 — inquiry pipeline stage badges (muted editorial palette). */
.status-stg-new { background: #ebebeb; color: #545454; }
.status-stg-contacted { background: #e8f0ee; color: #0064E0; }
.status-stg-quoted { background: #f3f3f3; color: #6f6f6f; }
.status-stg-won { background: #eeeeee; color: #404040; }
.status-stg-lost { background: #f4f4f4; color: #626262; }

/* ---------- Auth / forms ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 30px 0; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; width: 100%; max-width: 480px; }
.auth-card.wide { max-width: 720px; }
.auth-card h2 { margin: 0 0 4px; font-size: 22px; }
.auth-card .muted { font-size: 13px; }
.auth-switch { text-align: center; font-size: 13.5px; margin-top: 16px; }
.demo-box { background: #fafafa; border: 1px dashed #c9c9c9; border-radius: 6px; padding: 12px; margin-top: 16px; font-size: 12.5px; }
.demo-box div { margin-top: 4px; font-family: monospace; }

/* ---------- RFQ ---------- */
.rfq-list { display: flex; flex-direction: column; gap: 8px; }
.rfq-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px; display: block; }
.rfq-card:hover { border-color: var(--brand); text-decoration: none; }
.rfq-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.rfq-card:hover .rfq-title { color: var(--brand-dark); }
.rfq-meta { font-size: 12.5px; color: var(--muted); }
.rfq-quotes { margin-top: 8px; font-size: 12.5px; color: var(--brand-dark); font-weight: 700; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.page-head .section-title { margin: 0; }

/* ---------- Cart / checkout / orders ---------- */
.cart-total { text-align: right; font-size: 17px; margin: 12px 0; }
.checkout-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.checkout-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; }
.checkout-form h3 { margin: 4px 0 4px; font-size: 15px; }
.pay-box { background: #fafafa; border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin: 8px 0 16px; font-size: 13px; }
.order-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 120px; }
.order-summary h3 { margin: 0 0 8px; font-size: 14px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #f2f2f2; }
.summary-row.total { font-weight: 800; font-size: 15px; border-bottom: 0; }
.track { display: flex; margin-top: 12px; }
.track-step { flex: 1; text-align: center; font-size: 11px; color: #767676; padding-top: 12px; position: relative; text-transform: capitalize; }
.track-step::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #ddd; }
.track-step.done { color: var(--green); font-weight: 700; }
.track-step.done::before { background: var(--green); }

/* ---------- Supplier storefront (minisite) ---------- */
.store-banner { background: linear-gradient(115deg, #404040, #404040); color: #fff; border-radius: var(--radius); padding: 30px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.store-banner h1 { margin: 0 0 4px; font-size: 26px; }
.store-banner .muted { color: #ccc; }
.store-stats { display: flex; gap: 24px; margin-top: 12px; }
.store-stats div { text-align: center; }
.store-stats strong { display: block; font-size: 20px; }
.store-stats span { font-size: 12px; color: #ccc; }
.store-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.store-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 120px; }
.store-side h3 { margin: 0 0 8px; font-size: 14px; }
.store-side p { font-size: 13px; color: #555; margin: 4px 0; }

/* ---------- Dashboards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat-n { display: block; font-size: 26px; font-weight: 800; color: var(--brand-dark); }
.stat-l { font-size: 13px; color: var(--muted); }
.admin-links { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
/* ---------- Market trends (Alibaba gap #15) ---------- */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.trend-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.trend-cat { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.trend-dir { font-size: 13.5px; font-weight: 600; }
.trend-rising { color: #0064E0; }
.trend-falling { color: #b3261e; }
.trend-steady { color: var(--muted); }
.trend-pct { font-weight: 400; color: var(--muted); margin-left: 4px; }
.trend-band { margin-top: 4px; }
.inline-form { display: flex; gap: 8px; margin-bottom: 16px; max-width: 520px; }
.inline-form input { flex: 1; }

/* ---------- AI panel ---------- */
.ai-panel { background: #f8fafc; border: 1px dashed #a6a6a6; border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.ai-panel h3 { margin: 0 0 4px; font-size: 15px; }
.ai-panel .muted { margin: 0 0 12px; font-size: 13px; }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
@media (max-width: 640px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-notice { background: #f5f5f5; border: 1px solid #a4a4a4; color: #505050; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-weight: 700; display: none; font-size: 13.5px; }
.ai-notice.show { display: block; }
.img-preview { margin-top: 8px; max-width: 220px; }
.img-preview img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 8px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 20px; padding: 32px 16px 20px; }
.footer-grid h4 { margin: 0 0 8px; font-size: 13.5px; }
.footer-grid a { display: block; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.footer-grid a:hover { color: var(--brand-dark); }
.footer-bottom { border-top: 1px solid var(--line); padding: 12px 16px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.logo-sm .logo-mark { font-size: 14px; padding: 4px 8px; }
.logo-sm .logo-text { font-size: 18px; }

.empty-page { text-align: center; padding: 70px 20px; }
.empty-page h2 { font-size: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-grid { grid-template-columns: 200px 1fr; }
  .hero-side { display: none; }
  .detail-layout { grid-template-columns: 320px 1fr; }
  .supplier-card { grid-column: 1 / -1; position: static; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .header-inner { flex-wrap: wrap; }
  .searchbar { order: 3; flex-basis: 100%; max-width: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .cat-sidebar { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout, .checkout-layout, .store-layout, .detail-layout { grid-template-columns: 1fr; }
  .filters, .order-summary, .store-side { position: static; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .form-row-2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .rfq-banner { flex-direction: column; align-items: flex-start; }
}

/* Language dropdown (53 languages, searchable) */
.lang-dd { position: relative; display: inline-block; }
.lang-dd-btn {
  background: #404040; color: #e8e8e8; border: 1px solid #555; border-radius: 4px;
  padding: 4px 8px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.lang-dd-btn:hover { background: #404040; color: #fff; }
.lang-dd-caret { font-size: 10px; opacity: 0.7; }
.lang-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(64,64,64,0.18); width: 260px; overflow: hidden;
}
.lang-dd-search {
  width: 100%; box-sizing: border-box; padding: 8px 8px; font-size: 13px;
  border: none; border-bottom: 1px solid #eee; outline: none; color: #444;
}
.lang-dd-list { max-height: 320px; overflow-y: auto; }
.lang-dd-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; font-size: 13px; color: #444; text-decoration: none; margin: 0;
}
.lang-dd-item:hover { background: #ebebeb; color: #444; }
.lang-dd-item.active { background: #eaeaea; font-weight: 700; }
.lang-dd-item .lang-code { font-size: 11px; color: #767676; }

/* RTL support: flex/grid follow dir automatically; fix physical offsets */
[dir="rtl"] .topbar a { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .lang-dd-menu { left: auto; right: 0; }
[dir="rtl"] .lang-dd-item .lang-code { direction: ltr; }
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; }
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="email"] { text-align: left; direction: ltr; }

/* AI buying assistant widget */
.aiw-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 2000;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.aiw-fab:hover { background: #000; }
.aiw-panel {
  position: fixed; bottom: 88px; right: 22px; z-index: 2000;
  width: 340px; max-width: calc(100vw - 44px); height: 460px; max-height: 70vh;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 16px 48px rgba(64,64,64,0.22); display: flex; flex-direction: column; overflow: hidden;
}
.aiw-panel[hidden] { display: none; }
.aiw-head {
  background: #1a1a1a; color: #fff; padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center; font-size: 14px;
}
.aiw-x { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
.aiw-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fafafa; }
.aiw-msg { display: flex; }
.aiw-user { justify-content: flex-end; }
.aiw-bubble {
  max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  background: #fff; border: 1px solid #e5e5e5; color: #444;
}
.aiw-user .aiw-bubble { background: #808080; border-color: #808080; color: #fff; }
.aiw-typing { opacity: 0.7; font-style: italic; }
.aiw-src { margin-top: 4px; font-size: 10.5px; opacity: 0.65; }
.aiw-links { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.aiw-links a { color: #666666; font-size: 12.5px; margin: 0; text-decoration: underline; }
.aiw-chips { display: flex; gap: 4px; padding: 8px 12px; flex-wrap: wrap; border-top: 1px solid #eee; background: #fff; }
.aiw-chips button {
  font-size: 11.5px; padding: 4px 8px; border-radius: 16px; cursor: pointer;
  border: 1px solid #dcdcdc; background: #fff7f0; color: #5a5a5a;
}
.aiw-chips button:hover { background: #eaeaea; }
.aiw-form { display: flex; border-top: 1px solid #eee; background: #fff; }
.aiw-form input { flex: 1; border: none; padding: 12px; font-size: 13px; outline: none; color: #444; }
.aiw-form button {
  border: none; background: #1a1a1a; color: #fff; padding: 0 16px; cursor: pointer;
  display: flex; align-items: center;
}
.aiw-form button:hover { background: #000; }
[dir="rtl"] .aiw-fab { right: auto; left: 22px; }
[dir="rtl"] .aiw-panel { right: auto; left: 22px; }

/* ===== Quotation-first flow: inquiries, quotations, AI Mode ===== */

.inquiry-product {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 12px;
}
.inquiry-list { display: flex; flex-direction: column; gap: 8px; }
.inquiry-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; text-decoration: none; color: inherit;
}
.inquiry-row:hover { border-color: var(--brand); }
.inquiry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.chat-thread { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.chat-msg { max-width: 75%; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.chat-body {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; white-space: pre-wrap; word-break: break-word;
}
.chat-msg.mine .chat-body { background: var(--brand-light); border-color: #dcdcdc; }
/* WhatsApp-style presence + unsend (2026-10-06). */
.presence-online { color: #16a34a; font-weight: 600; }
.presence-offline { color: var(--muted); }
.chat-unsent .chat-body { background: transparent; border-style: dashed; }
.chat-deleted { color: var(--muted); font-style: italic; }
/* Ticks (2026-10-06, Maan's design): subtle and small. ✓ sent (grey),
   ✓✓ read (blue), ✓✓ + very small "downloaded" for fetched files. */
.chat-read { text-align: right; margin-top: 2px; line-height: 1; }
.chat-read .tk { font-size: 11px; color: var(--muted); }
.chat-read .tk-read { color: #0064E0; }
.chat-read .tk-dl { font-size: 10px; color: var(--muted); margin-left: 2px; }
.chat-att { display: inline-flex; align-items: center; gap: 4px; }
.chat-att-del { display: inline; }
.chat-att-del .btn { padding: 1px 6px; font-size: 12px; }
.chat-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; resize: vertical; }
[dir="rtl"] .chat-msg.mine { align-self: flex-start; }
[dir="rtl"] .chat-msg.theirs { align-self: flex-end; }

.quote-doc {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; max-width: 860px;
}
.quote-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.quote-doc-brand { font-weight: 800; font-size: 20px; }
.quote-doc-brand::before { content: "CB"; display: inline-block; background: var(--brand); color: #fff; border-radius: 6px; padding: 0px 8px; margin-right: 8px; font-size: 16px; }
.quote-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; padding: 12px; background: var(--bg); border-radius: 10px; }
.quote-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 16px; }
.quote-terms div { display: flex; flex-direction: column; gap: 0px; }
.quote-terms strong { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.quote-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.quote-actions form { display: inline; }

/* ===== AI Mode workspace ===== */
.aimode { display: flex; gap: 0; min-height: calc(100vh - 220px); margin: 0 -16px; }
.aimode-side {
  width: 240px; flex-shrink: 0; border-right: 1px solid var(--line);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.aimode-history { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.am-hist { font-size: 13px; padding: 8px 8px; background: var(--bg); border-radius: 8px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aimode-main { flex: 1; display: flex; flex-direction: column; padding: 16px 24px; max-width: 900px; margin: 0 auto; width: 100%; }
.aimode-welcome { text-align: center; padding: 40px 0 20px; }
.aimode-logo { font-size: 44px; }
.aimode-welcome h1 { margin: 8px 0; font-size: 28px; }
.aimode-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0; }
.am-chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; cursor: pointer; color: var(--ink);
}
.am-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.aimode-suggest { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; text-align: left; }
.am-suggest {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 12px 12px; font-size: 14px; cursor: pointer; color: var(--ink); text-align: left;
}
.am-suggest:hover { border-color: var(--brand); }
.aimode-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.am-msg { display: flex; }
.am-user { justify-content: flex-end; }
.am-user .am-bubble { background: var(--brand-light); border: 1px solid #dcdcdc; border-radius: 14px; padding: 8px 16px; max-width: 80%; white-space: pre-wrap; }
.am-ai .am-bubble { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; width: 100%; }
.am-ai-label { font-size: 12px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; }
.am-user-img { max-height: 90px; border-radius: 8px; margin-right: 8px; }
.am-table { margin-top: 12px; font-size: 13px; }
.am-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.am-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.am-card img, .am-card-noimg { width: 100%; height: 110px; object-fit: cover; }
.am-card-noimg { display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--bg); color: var(--muted); }
.am-card-body { padding: 8px 12px; font-size: 13px; }
.am-card-price { font-weight: 800; color: var(--brand-dark); margin: 4px 0; }
.am-card-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.am-actions { margin-top: 12px; }
.am-dots span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin-right: 4px; animation: amblink 1.2s infinite; }
.am-dots span:nth-child(2) { animation-delay: .2s; } .am-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes amblink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.aimode-inputbar {
  display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card); padding: 8px 12px; margin-top: 12px;
}
.aimode-inputbar textarea { flex: 1; border: none; outline: none; resize: none; font: inherit; background: transparent; }
.am-attach { cursor: pointer; font-size: 20px; padding: 4px; }
.am-send {
  border: none; background: var(--brand); color: #fff; border-radius: 50%;
  width: 40px; height: 40px; font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.am-send:disabled { opacity: .5; }
.am-attach-preview { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.am-attach-preview img { height: 44px; border-radius: 6px; }
.ai-mode-link { font-weight: 700; color: var(--brand-dark) !important; }
@media (max-width: 820px) {
  .aimode-side { display: none; }
  .aimode-suggest { grid-template-columns: 1fr; }
  .quote-parties, .quote-terms { grid-template-columns: 1fr; }
}

/* Quotation revision + demo payment additions */
.form-note { background: #ebebeb; border: 1px solid #bebebe; border-radius: var(--radius); padding: 12px 12px; font-size: 13px; color: #424242; margin-bottom: 12px; }
.demo-banner { background: #ebebeb; border: 1px dashed #929292; border-radius: var(--radius); padding: 12px 12px; margin-bottom: 16px; font-size: 13px; color: #444444; }
.demo-banner strong { color: #5e5e5e; }
.revise-box { margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px; }
.revise-box summary { cursor: pointer; display: inline-block; }
.revise-box textarea { width: 100%; }


/* ---- added 2026-09-26: cb_css_reviews.css ---- */
/* ---------- Reviews & ratings ---------- */
.stars { color: #6b6b6b; letter-spacing: 1px; }
.stars-off { color: #d8d8d8; }
.card-rating { font-size: 12px; color: var(--ink); margin: 0px 0; }
.card-rating.muted { color: var(--muted); }
.detail-rating { font-size: 14px; margin: 4px 0 4px; }
.detail-rating.muted { color: var(--muted); }
.reviews-section { margin: 28px 0; }
.review-summary { display: flex; gap: 36px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 24px; margin-bottom: 12px; }
.review-score { text-align: center; min-width: 110px; }
.review-big { font-size: 34px; font-weight: 700; line-height: 1.1; }
.review-big .muted { font-size: 16px; font-weight: 400; }
.review-dist { flex: 1; max-width: 420px; }
.dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; }
.dist-label { width: 34px; }
.dist-track { flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.dist-bar { height: 100%; background: #8c8c8c; border-radius: 4px; }
.dist-n { width: 30px; text-align: right; }
.review-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px; }
.review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.review-title { font-weight: 700; margin: 0px 0; }
.review-body { margin: 4px 0 4px; }
.review-verified { color: var(--green); }
.review-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 16px 0; max-width: 640px; }
.review-form h3 { margin: 0 0 4px; }
@media (max-width: 640px) {
  .review-summary { flex-direction: column; gap: 12px; align-items: stretch; }
  .review-score { text-align: left; }
}


/* ---- added 2026-09-26: cb_css_favorites.css ---- */
/* Favorite toggle button */
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid #c5c5c5;
  border-radius: 20px;
  background: #fffdf8;
  color: #5e5e5e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fav-btn:hover {
  background: #ebebeb;
  border-color: #a6a6a6;
}
.fav-btn.fav-on {
  background: #fff1f2;
  border-color: #d0d0d0;
  color: #686868;
}


/* ---- added 2026-09-26: cb_css_disputes.css ---- */
/* ---------- Dispute / refund-claim flow ---------- */
.dispute-box { background: #fff8f0; border: 1px solid #d6d6d6; border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.dispute-box strong { color: #5a5a5a; display: block; margin-bottom: 4px; font-size: 14px; }
.dispute-box p { margin: 0 0 8px; font-size: 13px; color: #444444; }
.dispute-box p:last-child { margin-bottom: 0; }
.dispute-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
.dispute-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.dispute-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; align-self: start; }
.dispute-side h3 { margin: 0 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.dstatus { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; }
.dstatus-open { background: #ebebeb; color: #545454; }
.dstatus-supplier_replied { background: #f3f3f3; color: #6f6f6f; }
.dstatus-resolved { background: #eeeeee; color: #404040; }
.dstatus-refunded { background: #eeeeee; color: #404040; }
.dstatus-rejected { background: #f4f4f4; color: #525252; }
@media (max-width: 800px) { .dispute-grid { grid-template-columns: 1fr; } }

/* ---- AI-ops wave (2026-09-29): triage card, moderation queue, precheck chips ---- */
.triage-card { background: #f7f7f5; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
.triage-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.triage-conf { font-size: 12px; font-weight: 700; color: var(--muted); }
.triage-rec { margin: 8px 0 4px; }
.triage-reasons { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--muted); }
.triage-reasons li { margin: 0px 0; }
.mod-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mod-table th, .mod-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.risk-pill { display: inline-block; min-width: 44px; text-align: center; font-weight: 800; font-size: 13px; padding: 4px 8px; border-radius: 999px; }
.risk-high { background: #161616; color: #fff; }
.risk-med { background: #e8e8e8; color: #161616; }
.risk-low { background: #f4f4f4; color: #6f6f6f; }
.signal-list { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--muted); }
.hold-badge { display: inline-block; font-size: 11px; font-weight: 700; background: #161616; color: #fff; border-radius: 4px; padding: 0px 4px; margin-left: 4px; }
.precheck-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pcheck { font-size: 11px; font-weight: 700; padding: 0px 8px; border-radius: 999px; border: 1px solid var(--line); }
.pcheck-pass { background: #eef4f3; color: #0064E0; border-color: #cfe3e0; }
.pcheck-fail { background: #161616; color: #fff; border-color: #161616; }
.pcheck-manual { background: #f4f4f4; color: #6f6f6f; }
.mod-actions { display: flex; gap: 4px; flex-wrap: wrap; }


/* ---- added 2026-09-26: cb_css_tradeprot.css ---- */
.tprot-demo { background: #ebebeb; border: 1px solid #b5b5b5; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.tprot-hero { background: linear-gradient(120deg, #424242, #777777); color: #fff; border-radius: 12px; padding: 40px 28px; margin-bottom: 24px; text-align: center; }
.tprot-hero h1 { margin: 0 0 8px; font-size: 32px; }
.tprot-hero p { max-width: 640px; margin: 0 auto 20px; opacity: 0.92; }
.tprot-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tprot-ctas .btn:not(.btn-primary) { background: #fff; }
@media (max-width: 640px) {
  .tprot-hero { padding: 28px 16px; }
  .tprot-hero h1 { font-size: 24px; }
}

/* ---- Brand logo + imagery + complete-site colors (2026-09-26) ---- */
.logo-img { height: 40px; width: auto; display: block; }
.logo-img-sm { height: 28px; width: auto; display: block; }
.logo-sub { font-size: 11px; color: var(--muted); margin-top: 0px; display: block; }

/* Hero with photo background */
.hero-banner { background-size: cover; background-position: center; padding: 0; }
.hero-banner .hero-overlay { background: linear-gradient(100deg, rgba(64,64,64,.82) 0%, rgba(64,64,64,.55) 55%, rgba(64,64,64,.15) 100%); border-radius: var(--radius); padding: 44px 38px; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.hero-banner h1, .hero-banner p { color: #fff; text-shadow: 0 1px 6px rgba(64,64,64,.35); }

/* Category image tiles */
.cat-card-img { position: relative; background-size: cover; background-position: center; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 12px; border: 0; overflow: hidden; text-align: left; }
.cat-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(64,64,64,0) 30%, rgba(64,64,64,.72) 100%); }
.cat-card-img .cat-name { position: relative; color: #fff; font-weight: 800; font-size: 14px; text-shadow: 0 1px 4px rgba(64,64,64,.5); }
.cat-card-img .cat-count { position: relative; color: rgba(255,255,255,.85); font-size: 12px; }

/* RFQ banner with photo background */
.rfq-banner-img { background-size: cover; background-position: center; border: 0; color: #fff; }
.rfq-banner-img .hero-overlay { background: linear-gradient(100deg, rgba(64,64,64,.78), rgba(64,64,64,.35)); border-radius: var(--radius); padding: 24px 30px; flex: 1; }
.rfq-banner-img h2, .rfq-banner-img p { color: #fff; }
.rfq-banner-img p { color: rgba(255,255,255,.85); }

/* Complete-site background colors */
body { background: #f6f6f6; }
.container { background: transparent; }
.site-header { background: #fff; }
.hero-grid { background: #fff; border-radius: var(--radius); padding: 12px; margin-top: 12px; }
.trust-strip { background: #fff; border-radius: var(--radius); padding: 16px; }
.trust-item { background: #fafbfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.section-head { background: #fff; border-radius: var(--radius); padding: 12px 12px; margin: 16px 0 12px; }
.product-grid { background: transparent; }
.product-card { background: #fff; }
.rfq-banner { margin: 20px 0; }
.protect-points { background: #fff; border-radius: var(--radius); padding: 16px; }
.protect-points > div { background: #fafbfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.how-grid .how-card { background: #fff; border-top: 3px solid var(--brand); }
.site-footer { background: #404040; color: #d4d4d4; margin-top: 30px; }
.site-footer a { color: #d4d4d4; }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; }
.detail-gallery { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }

/* Trade protection hero with photo background */
.tprot-hero { background-size: cover; background-position: center; padding: 0; }
.tprot-hero .hero-overlay { background: linear-gradient(180deg, rgba(64,64,64,.78), rgba(64,64,64,.45)); border-radius: 12px; padding: 48px 28px; }
.tprot-hero h1, .tprot-hero p { color: #fff; }

/* Info pages (about, help, terms, privacy, sourcing, logistics) */
.page-hero { text-align: center; padding: 44px 20px 30px; }
.page-hero h1 { font-size: 2rem; margin: 0 0 8px; }
.page-hero .lead { font-size: 1.08rem; color: #666666; max-width: 720px; margin: 0 auto; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 24px 0; }
.info-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 20px; }
.info-card h3,.info-card h2 { margin: 0 0 8px; font-size: 1.08rem; }
.info-card p { margin: 0; color: #585858; line-height: 1.6; }
.steps { margin: 32px 0; }
.steps h2 { text-align: center; margin-bottom: 16px; }
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: step; }
.steps-list li { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 16px 16px 16px 64px; position: relative; }
.steps-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: #808080; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps-list strong { display: block; margin-bottom: 4px; }
.steps-list span { color: #585858; line-height: 1.55; }
.cta-band { text-align: center; background: #f6f8fb; border: 1px solid #ececec; border-radius: 14px; padding: 32px 20px; margin: 30px 0; }
.cta-band h2 { margin: 0 0 8px; }
.cta-band p { color: #666666; margin: 0 0 16px; }
.cta-band .btn { margin: 0 4px; }
.faq { max-width: 820px; margin: 8px auto 30px; display: grid; gap: 8px; }
.faq-item { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 4px 16px; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.faq-item p { margin: 0 0 16px; color: #585858; line-height: 1.6; }
.legal { max-width: 860px; margin: 0 auto 32px; background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 28px; }
.legal h2 { font-size: 1.12rem; margin: 20px 0 8px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: #585858; line-height: 1.65; margin: 0; }
/* Phase 5 B: early .btn-ghost removed — see shared ghost rule in premium.css. */

/* ================= Alibaba-style theme (2026-09-26) ================= */

/* slim announcement bar */
.pm-announce{background:var(--pm-dark);color:#e4e4e4;font-size:12.5px;letter-spacing:.02em;text-align:center;padding:9px 16px}
.pm-announce b{color:#fff;font-weight:600}
.pm-announce .dot{color:var(--pm-gold);margin:0 10px}

/* header */
.pm-logo img{height:50px;display:block}
.pm-nav{display:flex;gap:24px;margin-inline-start:8px}
.pm-nav a{color:var(--pm-ink);text-decoration:none;font-size:14.5px;font-weight:500;opacity:.82;transition:opacity .15s}
.pm-nav a:hover{opacity:1}
.pm-nav a.on{opacity:1;box-shadow:inset 0 -2px 0 var(--pm-accent)}
.pm-search{display:flex;align-items:center;background:#eeeeee;border:1px solid #8a8a8a;border-radius:999px;height:42px;padding:0 4px 0 16px;transition:.18s}
.pm-search:focus-within{background:#fff;border-color:var(--pm-ink);box-shadow:var(--pm-shadow)}
.pm-search input{flex:1;border:0;background:transparent;outline:0;font-size:14px;color:var(--pm-ink);font-family:inherit}
.pm-search input::placeholder{color:var(--pm-faint)}
.pm-search button{border:0;background:var(--pm-ink);color:#fff;border-radius:999px;height:32px;padding:0 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}

/* Landing-only centered logo: burger pinned left, controls pinned right */
/* Logged-in: the account cluster is too wide to keep the logo truly centered,
   so fall back to the normal flow — nothing overlaps, nothing is lost. */
/* Desktop landing header search (Alibaba-style): logo | search bar | controls.
   Hidden below desktop widths; the mobile search pill (.pm-msearch) covers phones/tablets. */
.pm-dsearch{display:none}
@media(min-width:1021px){
                }

/* Desktop landing (logged out): classic left-aligned logo, controls right —
   the centered-logo treatment is retired on desktop. Flow layout, so the
   logo and the control cluster can never overlap. */
@media(min-width:1021px){
        }
/* Mobile search pill (landing only): hidden everywhere until the <=1020px landing rules show it.
   The burger lives inside this row on the landing page — the guard below beats the old
   absolute-pinning rules by specificity so the burger can never overlap the pill. */
.pm-msearch{display:none}
/* Compact language code (phones): full name on desktop, "EN" style code on mobile */
.lang-dd-code{display:none;font-weight:700}
@media(max-width:1020px){
  /* Landing: keep controls compact so the centered logo never collides */
     /* Sign in lives in the drawer */
    }
@media(max-width:640px){
  .lang-dd-fullname{display:none}
  .lang-dd-code{display:inline}
  .lang-dd-btn{padding:8px 10px !important}
      /* Landing: responsive edge offsets keep burger + controls tappable */
      }
.pm-signin{font-size:14px;font-weight:500;color:var(--pm-ink);text-decoration:none;opacity:.82}
.pm-signin:hover{opacity:1}

/* buttons */
/* Phase 5 B: early .pm-btn group removed — see shared .btn/.pm-btn block
   at the end of premium.css. Accent keeps its later rules (unchanged). */

/* hero */
.pm-hero{max-width:1280px;margin:0 auto;padding:72px 24px 64px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.pm-hero::before{content:'';position:absolute;inset:-40px 0;background:radial-gradient(640px 340px at 18% 22%,rgba(84,84,84,.10),transparent 65%),radial-gradient(520px 300px at 85% 80%,rgba(120,120,120,.08),transparent 65%);pointer-events:none}
.pm-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pm-accent);margin-bottom:20px}
.pm-eyebrow::before{content:'';width:24px;height:2px;background:var(--pm-accent);display:inline-block}
.pm-hero h1{font-size:clamp(38px,4.6vw,60px);line-height:1.06;letter-spacing:-.025em;font-weight:750;margin:0 0 20px}
.pm-hero h1 em{font-style:normal;color:var(--pm-accent)}
.pm-hero p.lead{font-size:17.5px;line-height:1.65;color:var(--pm-muted);margin:0 0 32px;max-width:480px}
.pm-hero-search{display:flex;background:#fff;border:1px solid var(--pm-line);border-radius:999px;padding:4px;box-shadow:var(--pm-shadow-lg);max-width:520px;margin-bottom:14px}
.pm-hero-search input{flex:1;border:0;outline:0;background:transparent;padding:0 8px 0 20px;font-size:15px;font-family:inherit;color:var(--pm-ink)}
.pm-hero-search button{border:0;background:var(--pm-ink);color:#fff;border-radius:999px;padding:12px 30px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.pm-hero-search button:hover{background:#444}
.pm-hero-links{display:flex;gap:16px;font-size:13.5px;color:var(--pm-muted);margin-bottom:36px}
.pm-hero-links a{color:var(--pm-muted);text-decoration:underline;text-decoration-color:var(--pm-line);text-underline-offset:2px}
.pm-hero-links a:hover{color:var(--pm-accent);text-decoration-color:var(--pm-accent)}
.pm-stats{display:flex;gap:40px}
.pm-stat b{display:block;font-size:26px;letter-spacing:-.02em;font-weight:750}
.pm-stat span{font-size:13px;color:var(--pm-muted)}
.pm-hero-visual{position:relative}
.pm-hero-visual .main{width:100%;height:520px;object-fit:cover;border-radius:24px;box-shadow:var(--pm-shadow-lg)}
.pm-float{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:16px;box-shadow:var(--pm-shadow-lg);padding:12px 16px;display:flex;align-items:center;gap:12px}
.pm-float .ic{width:40px;height:40px;border-radius:12px;background:var(--pm-accent-soft);display:flex;align-items:center;justify-content:center;font-size:20px}
.pm-float b{display:block;font-size:14.5px}
.pm-float span{font-size:12.5px;color:var(--pm-muted)}
.pm-float.f1{top:36px;left:-28px}
.pm-float.f2{bottom:44px;right:-16px}

/* sections */
.pm-section{max-width:1280px;margin:0 auto;padding:110px 24px}
.pm-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.pm-sec-head h2{font-size:30px;letter-spacing:-.02em;font-weight:700;margin:0}
.pm-sec-head p{color:var(--pm-muted);font-size:15px;margin:6px 0 0}
.pm-link{font-size:14px;font-weight:600;color:var(--pm-ink);text-decoration:none;border-bottom:2px solid var(--pm-accent);padding-bottom:2px;white-space:nowrap}
.pm-link:hover{color:var(--pm-accent)}

/* category tiles */
.pm-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pm-cat{position:relative;border-radius:var(--pm-r);overflow:hidden;height:190px;display:block;text-decoration:none;box-shadow:var(--pm-shadow);background:linear-gradient(135deg,#e8f1fd,#d5e6fb)}
.pm-cat img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pm-cat:hover img{transform:scale(1.06)}
.pm-cat span{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 12px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(transparent,rgba(64,64,64,.72))}
.pm-cat.no-img span{position:static;display:flex;align-items:center;justify-content:center;height:100%;padding:16px;color:#0A1317;background:none;text-align:center}

/* product cards */
.pm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pm-card{background:var(--pm-card);border-radius:var(--pm-r);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--pm-shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.pm-card:hover{transform:translateY(-4px);box-shadow:var(--pm-shadow-lg)}
/* Short product video — play badge on card, form section, detail player (2026-09-29). */
/* Card badges overlay the image top-left (hallmark gate 73): same rule
   frag-search.css already applies on search pages; without it the badges
   flow below the image and the card body paints over them. */
.pm-card-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;z-index:2}
.pm-vid-badge{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(22,22,22,.82);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pv-section{margin-top:16px;padding:16px;border:1px solid var(--pm-border,#e5e2dc);border-radius:12px;background:#fff}
.pv-title{font-size:15px;font-weight:600;margin:0 0 6px}
.pv-preview{width:100%;max-width:420px;max-height:240px;border-radius:10px;background:#111;margin-top:8px}
.pdp-video{margin-top:18px}
.pdp-video h3{font-size:16px;font-weight:600;margin:0 0 10px}
.pdp-video-el{width:100%;max-height:480px;border-radius:12px;background:#111}
.pm-card-body{padding:16px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pm-card-title{font-size:14.5px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.pm-tr{font-size:10px;font-weight:600;color:#0064E0;border:1px solid #bfe3e0;border-radius:4px;padding:1px 5px;white-space:nowrap;vertical-align:1px}
.pm-card-price{font-size:19px;font-weight:750;letter-spacing:-.01em}
.pm-card-fresh{font-size:11.5px;color:var(--pm-muted);letter-spacing:.01em}
.pm-fresh-line{font-size:12.5px;color:var(--pm-muted);margin:8px 0 0px;letter-spacing:.01em}
.pm-card-meta{font-size:12.5px;color:var(--pm-muted)}
.pm-card-sup{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--pm-muted);margin-top:auto;padding-top:8px;border-top:1px solid #eeeeee}
.pm-vcheck{color:var(--pm-accent);font-weight:700}

/* dark band */
.pm-band{background:var(--pm-dark);color:#f0f0f0;border-radius:24px;margin:56px auto;max-width:1280px;padding:64px 56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.pm-band::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(84,84,84,.28),transparent 65%);top:-160px;right:-120px}
.pm-band h2{font-size:34px;letter-spacing:-.02em;margin:0 0 12px;font-weight:700}
.pm-band p{color:#b6b6b6;font-size:15.5px;line-height:1.65;margin:0 0 28px;max-width:420px}
.pm-feats{display:flex;flex-direction:column;gap:16px;position:relative}
.pm-feat{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:18px 20px}
.pm-feat .ic{width:44px;height:44px;flex:none;border-radius:14px;background:rgba(84,84,84,.18);display:flex;align-items:center;justify-content:center;font-size:22px}
.pm-feat b{display:block;font-size:15px;margin-bottom:4px}
.pm-feat span{font-size:13.5px;color:#b6b6b6;line-height:1.55}

/* rfq strip */
.pm-rfq{max-width:1280px;margin:0 auto 72px;padding:0 24px}
.pm-rfq-inner{border:1px solid var(--pm-line);background:#fff;border-radius:24px;padding:44px 48px;display:flex;align-items:center;gap:32px;box-shadow:var(--pm-shadow)}
.pm-rfq-inner h3{font-size:24px;margin:0 0 8px;letter-spacing:-.015em}
.pm-rfq-inner p{margin:0;color:var(--pm-muted);font-size:15px;max-width:560px}
.pm-rfq-inner .pm-btn{margin-inline-start:auto;flex:none}

/* listing */
.pm-list-head{margin:8px 0 20px}
.pm-list-head h1{font-size:32px;letter-spacing:-.02em;margin:0 0 4px;font-weight:700}
.pm-list-head p{color:var(--pm-muted);font-size:14.5px;margin:0}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.pm-chip{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--pm-line);font-size:13.5px;font-weight:500;color:var(--pm-ink);text-decoration:none;transition:.15s}
.pm-chip:hover{border-color:var(--pm-ink)}
.pm-chip.on{background:var(--pm-ink);color:#fff;border-color:var(--pm-ink)}
.pm-toolbar{display:flex;align-items:center;justify-content:space-between;margin:18px 0 22px}
.pm-toolbar select{border:1px solid var(--pm-line);border-radius:999px;padding:8px 16px;font-size:13.5px;background:#fff;font-family:inherit;color:var(--pm-ink)}

/* detail */
.pm-detail{display:grid;grid-template-columns:1.05fr 1fr .85fr;gap:44px;margin-top:8px}
.pm-gallery-main{border-radius:20px;overflow:hidden;background:#eeeeee;box-shadow:var(--pm-shadow)}
.pm-gallery-main img{width:100%;aspect-ratio:1;display:block;object-fit:cover}
.pm-thumbs{display:flex;gap:8px;margin-top:12px}
.pm-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:12px;cursor:pointer;border:2px solid transparent;opacity:.7}
.pm-thumbs img.on{border-color:var(--pm-accent);opacity:1}
.pm-detail h1{font-size:30px;letter-spacing:-.02em;line-height:1.25;margin:0 0 12px;font-weight:700}
.pm-detail-meta{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--pm-muted);margin-bottom:20px;flex-wrap:wrap}
.pm-stars{color:var(--pm-gold);letter-spacing:2px}
.pm-tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--pm-line);border-radius:16px;overflow:hidden;margin-bottom:20px;background:#fff}
.pm-tier{padding:16px 16px;text-align:center}
.pm-tier+.pm-tier{border-inline-start:1px solid var(--pm-line)}
.pm-tier b{display:block;font-size:21px;letter-spacing:-.01em;margin-bottom:4px}
.pm-tier span{font-size:12.5px;color:var(--pm-muted)}
.pm-tier.hl{background:var(--pm-accent-soft)}
.pm-tier.hl b{color:var(--pm-accent-deep)}
.pm-spec{display:flex;justify-content:space-between;padding:11px 0px;border-bottom:1px solid var(--pm-line);font-size:14px}
.pm-spec dt{color:var(--pm-muted)}
.pm-spec dd{margin:0;font-weight:600}
.pm-supcard{margin-top:20px;border:1px solid var(--pm-line);border-radius:16px;padding:20px;background:#fff}
.pm-supcard .row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pm-avatar{width:52px;height:52px;border-radius:16px;background:var(--pm-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:none}
.pm-order{position:sticky;top:96px;background:#fff;border:1px solid var(--pm-line);border-radius:20px;padding:24px;box-shadow:var(--pm-shadow);align-self:start}
.pm-order h3{font-size:17px;margin:0 0 6px}
.pm-order .note{font-size:13px;color:var(--pm-muted);line-height:1.6;margin:0 0 16px}
.pm-protect{display:flex;gap:8px;align-items:flex-start;background:var(--pm-accent-soft);border-radius:14px;padding:12px 16px;font-size:13px;line-height:1.55;margin-bottom:18px}
.pm-payrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pm-payrow span{font-size:11.5px;font-weight:700;color:var(--pm-muted);border:1px solid var(--pm-line);border-radius:8px;padding:4px 8px;letter-spacing:.03em}
.pm-attrs{margin-top:56px}
.pm-attrs h2,.pm-reviews h2{font-size:24px;letter-spacing:-.015em;margin:0 0 18px}
.pm-desc{font-size:15.5px;line-height:1.75;color:#404040;max-width:760px}

/* footer */
.pm-footer{background:var(--pm-dark);color:#b6b6b6;margin-top:88px}
.pm-footer-inner{max-width:1280px;margin:0 auto;padding:64px 24px 32px}
.pm-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.pm-foot-brand p{font-size:14px;line-height:1.7;margin:0;max-width:280px}
.pm-footer h4,.pm-footer .f-col-title{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
.pm-footer a.f{color:#b6b6b6;text-decoration:none;font-size:14px;display:block;margin-bottom:12px}
.pm-footer a.f:hover{color:#fff}
.pm-foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;gap:24px;font-size:13px;align-items:center}
.pm-foot-bottom a{color:#b6b6b6;text-decoration:none}
.pm-foot-bottom a:hover{color:#fff}
.pm-foot-bottom span{margin-inline-start:auto}

/* about page refresh */

/* responsive */
@media(max-width:1020px){
  .pm-hero{grid-template-columns:1fr;padding:48px 20px}
  .pm-hero-visual .main{height:380px}
  .pm-float.f1{left:8px}.pm-float.f2{right:8px}
  .pm-cats{grid-template-columns:repeat(3,1fr)}
  .pm-grid{grid-template-columns:repeat(2,1fr)}
  .pm-band{grid-template-columns:1fr;padding:44px 28px}
  .pm-detail{grid-template-columns:1fr}
  .pm-order{position:static}
  .pm-nav{display:none}
  .pm-foot-grid{grid-template-columns:1fr 1fr}
  .pm-rfq-inner{flex-direction:column;align-items:flex-start}
  .pm-rfq-inner .pm-btn{margin-inline-start:0}
}
@media(max-width:640px){
      .pm-cats{grid-template-columns:repeat(2,1fr)}
  .pm-stats{gap:24px;flex-wrap:wrap}
  .pm-section{padding:28px 16px}
  .pm-hero{padding:40px 16px}
}
/* data tables scroll horizontally on small screens (admin/supplier/orders) */
@media(max-width:760px){
  table.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================
   Alibaba-style hover & motion system — snappy, tactile, premium
   ============================================================ */

/* A. Global: every link/button animates smoothly; buttons press */
a{transition:color .18s ease}
button{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .15s ease,box-shadow .18s ease}
.btn{transition:background .18s,border-color .18s,color .18s,transform .15s,box-shadow .18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(64,64,64,.10)}
.btn:active{transform:scale(.97);box-shadow:none}
.pm-btn:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--pm-accent);outline-offset:2px;border-radius:6px}

/* B. Product cards (Alibaba signature: lift + image zoom + ember glow + title shift) */
.product-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.product-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(84,84,84,.16);border-color:#c7c7c7;text-decoration:none}
.product-img img{transition:transform .4s ease}
.product-card:hover .product-img img{transform:scale(1.08)}
.pm-card{transition:transform .22s ease,box-shadow .22s ease}
.pm-card:hover{box-shadow:0 16px 34px rgba(84,84,84,.16)}

/* C. Category tiles: lift + deeper zoom */
.pm-cat{transition:transform .22s ease,box-shadow .22s ease}
.pm-cat:hover{transform:translateY(-5px);box-shadow:var(--pm-shadow-lg)}
.pm-cat img{transition:transform .4s ease}
.pm-cat:hover img{transform:scale(1.09)}
.cat-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(84,84,84,.12)}
.cat-letter{transition:transform .2s ease,background .2s ease}
.cat-card:hover .cat-letter{transform:scale(1.12);background:#e0e0e0}

/* D. Nav: Alibaba-style sliding underline */
.pm-nav a{position:relative;transition:opacity .18s,color .18s}
.pm-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;background:var(--pm-accent);transition:right .24s ease}
.pm-nav a:hover{color:var(--pm-accent-deep)}
.pm-nav a:hover::after{right:0}
.pm-catnav-link{position:relative;transition:color .18s}
.pm-catnav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:var(--pm-accent-deep);transition:right .24s ease}
.pm-catnav-link:hover::after{right:0}

/* E. Mega menu: items glide, tiles lift + zoom */
.pm-mega-cat{transition:background .16s,color .16s,transform .16s}
.pm-mega-cat:hover,.pm-mega-cat.on{transform:translateX(4px)}
.pm-mega-links a{transition:color .16s,padding-left .16s}
.pm-mega-links a:hover{padding-left:6px}
.pm-mega-tile{transition:transform .2s ease,box-shadow .2s ease}
.pm-mega-tile:hover{transform:translateY(-4px)}
.pm-mega-tile img{transition:transform .35s ease}
.pm-mega-tile:hover img{transform:scale(1.06)}

/* F. Tables: warm row highlight */
table.table tbody tr{transition:background .15s ease}
table.table tbody tr:hover{background:#f7f7f7}

/* G. Buttons: lift on hover */
.pm-btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.pm-btn:hover{transform:translateY(-2px)}
.pm-chip{transition:border-color .18s,transform .15s}
.pm-chip:hover{transform:translateY(-2px)}

/* H. Footer links: brighten */
.pm-footer a.f{transition:color .18s}

/* I. Marquee pauses on hover */
.pm-marquee:hover .pm-marquee-track{animation-play-state:paused}

/* J. Hero floating cards: gentle idle float */
@keyframes pmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.pm-float.f1{animation:pmfloat 5.5s ease-in-out infinite}
.pm-float.f2{animation:pmfloat 6.5s ease-in-out 1.2s infinite}

/* K. Stat tiles + trust items + steps: lift */
.trust-item{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.trust-item:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(84,84,84,.10);border-color:#c7c7c7}

/* L. RFQ / inquiry cards: lift + ember border */
.rfq-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.rfq-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(84,84,84,.10)}
.inquiry-row{transition:border-color .18s,transform .18s,box-shadow .18s}
.inquiry-row:hover{transform:translateX(3px);box-shadow:0 6px 16px rgba(64,64,64,.07)}

/* M. Form inputs: hover glow on border */
input[type="text"]:hover,input[type="email"]:hover,input[type="password"]:hover,input[type="tel"]:hover,input[type="number"]:hover,input[type="url"]:hover,select:hover,textarea:hover{border-color:#c4c4c4}

/* N. Section "view all" links: arrow nudge */
.pm-link{transition:color .18s,gap .18s;display:inline-flex;align-items:center;gap:4px}
.pm-link:hover{gap:9px}
.section-link{transition:color .18s}

/* O. Old Alibaba-style cards: lift + zoom */

/* P. Verify panel + empty states: subtle life */
.verify-panel{transition:transform .2s ease,box-shadow .2s ease}
.verify-panel:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(74,74,74,.12)}

/* Q. Favorite + icon buttons: pop */
.fav-btn{transition:transform .15s,background .15s,border-color .15s}
.fav-btn:hover{transform:scale(1.06)}
.fav-btn:active{transform:scale(.94)}
.aiw-fab{transition:transform .18s,background .18s}
.aiw-fab:hover{transform:scale(1.1) rotate(8deg)}

/* R. Hero search button: glow */
.pm-hero-search button{transition:background .18s,transform .15s,box-shadow .18s}
.pm-hero-search button:hover{box-shadow:0 6px 18px rgba(64,64,64,.28)}
.pm-hero-search button:active{transform:scale(.96)}
.pm-hero-search{transition:box-shadow .2s}
.pm-hero-search:focus-within{box-shadow:0 10px 34px rgba(84,84,84,.18)}

/* S. Dropdown items: glide */
.lang-dd-item{transition:background .14s,color .14s,padding-left .14s}
.lang-dd-item:hover{padding-left:16px}

/* T. Supplier storefront cards */
.pm-avatar{transition:transform .2s ease}
.pm-card:hover .pm-avatar{transform:scale(1.08)}

/* ===== flawless pass: previously unstyled components ===== */
.pm-btn-lg{padding:16px 36px;font-size:16px}
.pm-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.pm-steps.cols-3{grid-template-columns:repeat(3,1fr)}
.pm-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.pm-steps.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){.pm-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pm-steps.cols-3{grid-template-columns:1fr}}
.form-card{background:#fff;border:1px solid var(--pm-line);border-radius:20px;padding:28px;box-shadow:var(--pm-shadow);max-width:720px;margin:0 auto}
.form-card label{margin:14px 0}
.empty-box{background:#fff;border:1px dashed #c9c9c9;border-radius:var(--radius);padding:32px;text-align:center;color:var(--muted)}
.verify-panel{background:#f6f6f6;border:1px solid #d9d9d9;border-radius:14px;padding:12px 16px;margin:12px 0}
.verify-panel strong{color:#4a4a4a}
.aimode-side-note{margin-top:12px}
.trs-status:empty{display:none}
@media(max-width:640px){.form-card{padding:20px 16px}}

/* ============ ULTRA PREMIUM LAYER ============ */
::selection{background:var(--pm-accent);color:#fff}
html{scroll-behavior:smooth}

/* editorial serif display */
.pm-hero h1{font-family:'DM Sans','Manrope',sans-serif;font-weight:560;font-size:clamp(44px,5.2vw,72px);line-height:1.02;letter-spacing:-.015em}
.pm-hero h1 em{font-style:italic;font-weight:500}
.pm-sec-head h2,.pm-band h2,.pm-detail h1,.pm-rfq-inner h3{font-family:'DM Sans','Manrope',sans-serif;font-weight:600;letter-spacing:-.015em}
.pm-sec-head h2{font-size:34px}
.pm-band h2{font-size:38px}
.pm-detail h1{font-size:34px}

/* richer hero atmosphere */
.pm-hero::before{background:radial-gradient(700px 380px at 15% 20%,rgba(84,84,84,.13),transparent 65%),radial-gradient(560px 320px at 88% 78%,rgba(120,120,120,.10),transparent 65%),radial-gradient(400px 260px at 60% 10%,rgba(84,84,84,.06),transparent 60%)}
.pm-hero .lead{font-size:18.5px}
.pm-hero-search{box-shadow:0 2px 6px rgba(64,64,64,.06),0 24px 60px rgba(64,64,64,.12);border-color:#dedede}
.pm-hero-search button{letter-spacing:.01em}

/* announcement bar refinement */

/* buttons: finer */
.pm-btn{letter-spacing:.015em}
.pm-btn-dark{background:#404040}
.pm-btn-dark:hover{background:#444;box-shadow:0 12px 28px rgba(64,64,64,.22);transform:translateY(-1px)}
.pm-btn-accent:hover{transform:translateY(-1px)}

/* cards: gallery feel */
.pm-card{border:1px solid rgba(64,64,64,.05)}
.pm-card:hover{transform:translateY(-6px)}
.pm-card-price{font-family:'DM Sans','Manrope',sans-serif;font-size:22px;font-weight:600}
.pm-cat{border:1px solid rgba(64,64,64,.06)}
.pm-cat span{font-size:15px;letter-spacing:.01em}

/* country marquee */
.pm-marquee{overflow:hidden;background:#fff;border-top:1px solid var(--pm-line);border-bottom:1px solid var(--pm-line)}
.pm-marquee-track{display:inline-flex;gap:0;white-space:nowrap;animation:pmq 30s linear infinite;padding:15px 0}
.pm-marquee-track span{display:inline-flex;align-items:center;gap:12px;padding:0 28px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--pm-muted);font-weight:600}
.pm-marquee-track i{color:var(--pm-gold);font-style:normal;font-size:10px}
@keyframes pmq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pm-marquee-track{animation:none}}

/* how it works steps */
.pm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pm-step{background:#fff;border:1px solid var(--pm-line);border-radius:20px;padding:30px 24px;box-shadow:var(--pm-shadow);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pm-step:hover{transform:translateY(-4px);box-shadow:var(--pm-shadow-lg)}
.pm-step .n{font-family:'DM Sans','Manrope',sans-serif;font-size:44px;font-weight:600;color:var(--pm-accent);opacity:.9;display:block;margin-bottom:12px;line-height:1}
.pm-step b{display:block;font-size:16.5px;margin-bottom:8px;letter-spacing:-.01em}
.pm-step p{margin:0;font-size:13.5px;line-height:1.65;color:var(--pm-muted)}
.pm-step::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pm-accent),var(--pm-gold));opacity:0;transition:opacity .2s}
.pm-step:hover::after{opacity:1}

/* scroll reveal */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.6,.24,1)}
.rv.in{opacity:1;transform:none}
html.js .rv-d1{transition-delay:.08s}html.js .rv-d2{transition-delay:.16s}html.js .rv-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}

/* detail page polish */
.pm-tier b{font-family:'DM Sans','Manrope',sans-serif;font-weight:600}
.pm-order{border-color:#dedede}
.pm-protect{background:linear-gradient(135deg,#ebebeb,#e4e4e4)}

/* footer refinement */
.pm-footer{background:linear-gradient(180deg,#404040,#404040)}
.pm-foot-brand p{color:#8c8c8c}
.pm-footer h4{letter-spacing:.14em}

@media(max-width:1020px){.pm-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pm-steps{grid-template-columns:1fr}}

/* ===== unified mega menu (All categories / Verified manufacturers / Dropshipping) ===== */
.pm-mega-trig{display:flex;align-items:center;height:100%;flex-shrink:0}
.pm-mega-trig.on .pm-cats-btn{color:var(--pm-accent-deep)}
.pm-mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--pm-line);box-shadow:var(--pm-shadow-lg);z-index:80}
.pm-mega-inner{max-width:1280px;margin:0 auto;padding:28px 24px}
.pm-mega-cats{display:grid;grid-template-columns:300px 1fr;gap:28px}
.pm-mega-cats-left{max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:0px;padding-inline-end:8px}
.pm-mega-cat{display:flex;align-items:center;gap:12px;background:none;border:0;font-family:inherit;font-size:14px;color:var(--pm-ink);text-align:start;padding:8px 8px;border-radius:10px;cursor:pointer;width:100%}
.pm-mega-cat img{width:34px;height:34px;object-fit:cover;border-radius:8px;flex-shrink:0}
.pm-mega-cat span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-mega-cat em{font-style:normal;color:var(--pm-muted);font-size:18px}
.pm-mega-cat:hover,.pm-mega-cat.on{background:var(--pm-accent-soft);color:var(--pm-accent-deep)}
.pm-mega-empty{padding:44px 20px;text-align:center;color:var(--pm-muted);font-size:15px}
.pm-mega-cats-right{position:relative;border-radius:18px;overflow:hidden;min-height:380px;background:#efefef}
.pm-mega-cats-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm-mega-cats-cta{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.94);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:16px;box-shadow:var(--pm-shadow)}
.pm-mega-cats-cta h3,.pm-mega-cats-cta p{margin:0;font-size:18px;font-weight:500}
.pm-mega-split{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:36px;align-items:start}
.pm-mega-card h3,.pm-mega-card p{margin:0 0 16px;font-size:26px;font-weight:500;letter-spacing:-.01em}
.pm-mega-stats{display:flex;gap:28px;margin-bottom:24px}
.pm-mega-stats div{display:flex;flex-direction:column;gap:4px}
.pm-mega-stats b{font-size:24px;color:var(--pm-accent-deep)}
.pm-mega-stats span{font-size:13px;color:var(--pm-muted)}
.pm-mega-actions{display:flex;gap:12px;flex-wrap:wrap}
.pm-mega-links{display:flex;flex-direction:column;gap:4px}
.pm-mega-links h4,.pm-mega-links p{margin:0 0 8px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--pm-muted)}
.pm-mega-links a{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid var(--pm-line);font-size:15px;font-weight:600;color:var(--pm-ink);text-decoration:none}
.pm-mega-links a:hover{color:var(--pm-accent-deep)}
.pm-mega-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pm-mega-tile{display:block;text-decoration:none;color:var(--pm-ink);border:1px solid var(--pm-line);border-radius:14px;overflow:hidden;background:#fff}
.pm-mega-tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pm-mega-tile .t{display:block;font-size:13px;padding:8px 12px 0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-mega-tile b{display:block;font-size:13px;color:var(--pm-accent-deep);padding:0 12px 12px}
.pm-mega-tile:hover{box-shadow:var(--pm-shadow)}
.pm-cats-dd{position:relative;height:100%;display:flex;align-items:center;flex-shrink:0}

@media(max-width:980px){
  .pm-mega-cats{grid-template-columns:1fr}
  .pm-mega-cats-right{min-height:240px}
  .pm-mega-split{grid-template-columns:1fr}
  .pm-mega-tiles{grid-template-columns:repeat(2,1fr)}
  .pm-logo img{height:40px}
}

/* ===== two-row premium header: search tabs + category nav ===== */
.pm-search-wrap{flex:1;max-width:660px;display:flex;flex-direction:column;gap:2px}
.pm-search-tabs{display:flex;align-items:center;gap:0px;padding-inline-start:16px}
.pm-stab{background:none;border:0;font-family:inherit;font-size:13px;font-weight:600;color:var(--pm-muted);padding:8px 12px;cursor:pointer;border-radius:9px 9px 0 0;position:relative;text-decoration:none;transition:color .15s}
.pm-stab:hover{color:var(--pm-ink)}
.pm-stab.on{color:var(--pm-ink)}
.pm-stab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-3px;height:4px;border-radius:4px;background:var(--pm-accent-deep)}
.pm-stab-ai{color:var(--pm-accent-deep)}
/* AI Mode tooltip (Alibaba-style "Meet Your AI Sourcing Agent" card) */
.pm-ai-wrap{position:relative;display:inline-flex}
.pm-ai-tip{position:absolute;top:calc(100% + 12px);inset-inline-start:-6px;transform:translateY(6px);width:min(300px,calc(100vw - 48px));background:#404040;color:#fff;border-radius:14px;padding:16px 16px;box-shadow:0 18px 44px rgba(64,64,64,.28);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:95;text-align:start}
.pm-ai-tip::before{content:"";position:absolute;top:-6px;inset-inline-start:34px;width:12px;height:12px;background:#404040;transform:rotate(45deg)}
.pm-ai-tip b{display:block;font-size:15px;margin-bottom:6px}
.pm-ai-tip span{font-size:13px;line-height:1.55;color:#dadada}
.pm-ai-wrap:hover .pm-ai-tip,.pm-ai-wrap:focus-within .pm-ai-tip{opacity:1;transform:translateY(0)}

.pm-catnav{border-top:1px solid var(--pm-line);background:rgba(255,255,255,.78)}
.pm-catnav-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;height:46px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.pm-catnav-inner::-webkit-scrollbar{display:none}
.pm-catnav-link{font-size:14px;font-weight:500;color:var(--pm-ink);text-decoration:none;flex-shrink:0}
.pm-catnav-link:hover{color:var(--pm-accent-deep)}
.pm-catnav-spacer{flex:1 0 8px}
.pm-cats-btn{background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--pm-ink);cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 2px}
.pm-cats-btn:hover{color:var(--pm-accent-deep)}

@media(max-width:980px){
  .pm-search-wrap{display:none}
  .pm-catnav-inner{gap:16px;padding:0 16px}
}


/* ============ Alibaba-style big search tabs + hero search box ============ */
.pm-bigtabs{display:flex;align-items:center;gap:24px;padding:0px 8px;margin-bottom:12px}
.pm-bigtab{position:relative;background:none;border:0;font-family:inherit;font-size:26px;font-weight:800;letter-spacing:-.015em;color:var(--pm-ink);cursor:pointer;text-decoration:none;padding:0px;line-height:1.3;transition:color .18s ease,transform .18s ease;white-space:nowrap}
.pm-bigtab:hover{color:var(--pm-accent-deep);transform:translateY(-1px)}
.pm-bigtab:active{transform:translateY(0) scale(.98)}
.pm-bigtab.on{color:var(--pm-accent-deep)}
.pm-bigtab.on::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:4px;border-radius:4px;background:var(--pm-accent-deep);box-shadow:0 2px 10px rgba(84,84,84,.45)}
.pm-bigtab-sep{width:1px;height:26px;background:var(--pm-line);flex:none}
.pm-bigtab-spark{display:inline-block;margin-right:8px;font-size:22px;line-height:1;background:linear-gradient(135deg,#cfcfcf,#8f8f8f 60%,#545454);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 4px rgba(130,130,130,.35))}
.pm-bigtab-ai:hover .pm-bigtab-spark{transform:scale(1.15) rotate(12deg)}
.pm-bigtab-spark{transition:transform .25s ease}
/* bigger Alibaba-like search box */
.pm-search-wrap{max-width:680px}
@media(max-width:980px){
  .pm-bigtabs{gap:16px;overflow-x:auto;padding-bottom:12px;margin-bottom:8px;scrollbar-width:none}
  .pm-bigtabs::-webkit-scrollbar{display:none}
  .pm-bigtab{font-size:19px}
  .pm-bigtab-spark{font-size:17px;margin-right:6px}
  .pm-bigtab-sep{height:20px}
}
@media(max-width:640px){
  .pm-bigtabs{gap:12px;padding:2px 2px 12px}
  .pm-bigtab{font-size:16.5px}
  .pm-bigtab.on::after{bottom:-8px;height:3px}
}

/* ============ AI Mode page (Alibaba AI-style workspace) ============ */
.ai2{display:flex;min-height:calc(100vh - 210px);margin:0 -16px;background:#fff;border-top:1px solid var(--pm-line)}
.ai2-side{width:266px;flex:none;background:#fbfaf7;border-inline-end:1px solid var(--pm-line);padding:24px 16px;display:flex;flex-direction:column;gap:14px}
.ai2-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.ai2-spark{display:inline-block;background:linear-gradient(135deg,#cfcfcf,#8f8f8f 60%,#545454);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:20px;filter:drop-shadow(0 1px 4px rgba(130,130,130,.35))}
.ai2-new{border:0;border-radius:999px;background:#404040;color:#fff;font:inherit;font-size:14px;font-weight:700;padding:12px;cursor:pointer;transition:.18s}
.ai2-new:hover{background:var(--pm-accent-deep);transform:translateY(-1px);box-shadow:0 8px 20px rgba(84,84,84,.3)}
.ai2-hist-label{font-size:12.5px;font-weight:700;color:var(--pm-muted);text-transform:uppercase;letter-spacing:.06em}
.ai2-history{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;min-height:70px;max-height:38vh}
.ai2-history .am-hist{font-size:13.5px;padding:8px 12px;border-radius:10px;color:var(--pm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.ai2-history .am-hist:hover{background:#ededed;color:var(--pm-ink)}
.ai2-promo{background:linear-gradient(135deg,#f4f4f4,#eaeaea);border:1px solid #d4d4d4;border-radius:16px;padding:16px}
.ai2-promo-t{font-weight:800;font-size:14px;margin-bottom:6px}
.ai2-promo-d{font-size:13px;color:#404040;line-height:1.5;margin-bottom:10px}
.ai2-promo-cta{font-size:13.5px;font-weight:700;color:var(--pm-accent-deep);text-decoration:none}
.ai2-promo-cta:hover{text-decoration:underline}
.ai2-side-foot{border-top:1px solid var(--pm-line);padding-top:14px}
.ai2-signin{display:block;text-align:center;border:1.5px solid var(--pm-line);border-radius:999px;padding:8px;font-weight:700;font-size:14px;color:var(--pm-ink);text-decoration:none;transition:.18s}
.ai2-signin:hover{border-color:var(--pm-accent-deep);color:var(--pm-accent-deep)}
.ai2-user{font-size:14px;font-weight:600}
.ai2-main{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:880px;margin:0 auto;padding:36px 28px 22px}
.ai2-welcome{text-align:center;width:100%}
.ai2-toplink{display:inline-flex;align-items:center;gap:8px;color:var(--pm-accent-deep);font-weight:600;font-size:14.5px;text-decoration:none}
.ai2-toplink:hover{text-decoration:underline}
.ai2-welcome h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:16px 0 28px;line-height:1.2}
.ai2-thread{width:100%;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:4px 0px 16px;min-height:120px}
.ai2-promptbox{width:100%;background:#fff;border:1.5px solid var(--pm-line);border-radius:20px;box-shadow:0 14px 44px rgba(64,64,64,.09);padding:4px 8px 8px 20px;transition:border-color .2s,box-shadow .2s}
.ai2-promptbox:focus-within{border-color:var(--pm-accent-deep);box-shadow:0 16px 48px rgba(84,84,84,.16)}
.ai2-promptbox textarea{width:100%;border:0;outline:0;resize:none;font:inherit;font-size:15.5px;line-height:1.55;background:transparent;padding:12px 4px 4px;min-height:66px;color:var(--pm-ink)}
.ai2-promptbox textarea::placeholder{color:var(--pm-faint)}
.ai2-promptbar{display:flex;align-items:center;gap:8px;padding:2px 2px 0}
.ai2-attach{width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--pm-line);display:grid;place-items:center;cursor:pointer;font-size:19px;color:var(--pm-muted);transition:.18s;line-height:1}
.ai2-attach:hover{border-color:var(--pm-accent-deep);color:var(--pm-accent-deep);transform:scale(1.06)}
.ai2-auto-wrap{position:relative}
.ai2-auto{border:1.5px solid var(--pm-line);background:#fff;border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;font-weight:600;color:var(--pm-ink);cursor:pointer;transition:.18s}
.ai2-auto:hover{border-color:var(--pm-accent-deep);color:var(--pm-accent-deep)}
.ai2-auto-menu{position:absolute;bottom:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--pm-line);border-radius:14px;box-shadow:0 18px 44px rgba(64,64,64,.16);padding:4px;min-width:210px;z-index:60}
.ai2-auto-menu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:10px;cursor:pointer;color:var(--pm-ink);text-align:start}
.ai2-auto-menu button:hover{background:#f4f4f4;color:var(--pm-accent-deep)}
.ai2-spacer{flex:1}
.ai2-send{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:#404040;color:#fff;font-size:19px;cursor:pointer;transition:.18s;line-height:1}
.ai2-send:hover:not(:disabled){background:var(--pm-accent-deep);transform:scale(1.07);box-shadow:0 8px 20px rgba(84,84,84,.35)}
.ai2-send:disabled{opacity:.45;cursor:default}
.ai2-extra{width:100%}
.ai2-feats{display:flex;align-items:center;gap:12px;margin-top:24px;width:100%}
.ai2-feats-label{font-size:13px;font-weight:700;color:var(--pm-muted);flex:none}
.ai2-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0px;flex:1}
.ai2-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--pm-line);background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-size:13.5px;font-weight:600;color:var(--pm-ink);cursor:pointer;white-space:nowrap;transition:.18s}
.ai2-chip:hover{border-color:var(--pm-accent-deep);color:var(--pm-accent-deep);transform:translateY(-1px);box-shadow:0 6px 16px rgba(84,84,84,.14)}
.ai2-chip.active{border-color:var(--pm-accent-deep);color:var(--pm-accent-deep);background:#f4f4f4;box-shadow:0 4px 14px rgba(84,84,84,.16)}
.ai2-suggest{width:100%;margin-top:12px;display:flex;flex-direction:column;gap:9px}
.ai2-sug{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:start;background:#fbfaf7;border:1px solid var(--pm-line);border-radius:14px;padding:12px 16px;font:inherit;font-size:14px;color:var(--pm-ink);cursor:pointer;transition:.18s}
.ai2-sug i{font-style:normal;color:var(--pm-faint);font-size:16px;flex:none}
.ai2-sug:hover{border-color:var(--pm-accent-deep);background:#f4f4f4;transform:translateX(3px)}
.ai2-sug:hover i{color:var(--pm-accent-deep)}
.ai2-disc{margin-top:16px;font-size:12px;color:var(--pm-faint);text-align:center}
@media(max-width:900px){
  .ai2-side{display:none}
  .ai2-welcome h1{font-size:26px}
  .ai2-main{padding:26px 16px 18px}
}

/* ============ Worldwide page ============ */
.ww{padding:34px 0 10px}
.ww-hero{text-align:center;max-width:760px;margin:0 auto;padding:10px 20px 6px}
.ww-hero h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.ww-sub{font-size:16px;color:var(--pm-muted);margin:0 0 18px}
.ww-trust{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--pm-ink)}
.ww-trust i{font-style:normal;color:var(--pm-accent-deep);font-weight:800;margin-right:6px}
.ww-circles{display:flex;gap:24px;justify-content:flex-start;overflow-x:auto;padding:30px 20px 8px;max-width:1100px;margin:0 auto;scrollbar-width:thin}
.ww-circle{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--pm-ink);transition:transform .2s ease}
.ww-circle:hover{transform:translateY(-4px)}
.ww-flag{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:36px;background:#fff;border:2px solid var(--pm-line);box-shadow:0 6px 18px rgba(64,64,64,.08);transition:.2s}
.ww-circle:hover .ww-flag{border-color:var(--pm-accent-deep);box-shadow:0 10px 26px rgba(84,84,84,.2)}
.ww-circle.on .ww-flag{border-color:var(--pm-accent-deep);box-shadow:0 0 0 4px rgba(84,84,84,.18),0 10px 26px rgba(84,84,84,.25)}
.ww-cname{font-size:13px;font-weight:600;max-width:92px;text-align:center;line-height:1.35}
.ww-circle.on .ww-cname{color:var(--pm-accent-deep);font-weight:800}
@media(max-width:640px){
  .ww-hero h1{font-size:26px}
  .ww-flag{width:62px;height:62px;font-size:30px}
  .ww-circles{gap:18px}
}

/* ============ Worldwide: all-countries search + India exports ============ */
.ww-searchrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.ww-search{border:1.5px solid var(--pm-line);border-radius:999px;height:42px;padding:0 16px;font-size:14px;font-family:inherit;min-width:240px;background:#fff;color:var(--pm-ink);outline:0}
.ww-search:focus{border-color:var(--pm-accent-deep);box-shadow:0 0 0 3px rgba(84,84,84,.12)}
.ww-circle{position:relative}
.ww-dot{position:absolute;top:6px;right:8px;width:11px;height:11px;border-radius:50%;background:#5c5c5c;border:2px solid #fff;box-shadow:0 1px 4px rgba(64,64,64,.25)}
.ww-corr{background:#404040;color:#f2f2f2;margin-top:32px;padding:54px 0 46px}
.ww-corr .pm-section{max-width:1280px}
.ww-corr h2{color:#fff;font-size:30px;letter-spacing:-.02em;margin:8px 0 6px}
.ww-corr .muted{color:#a6a6a6}
.ww-eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d7d7d7;margin:0}
.ww-corr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
.ww-corr-card{position:relative;background:#404040;border:1px solid #404040;border-radius:16px;padding:20px 16px 16px;display:flex;gap:12px;align-items:flex-start;transition:transform .18s,border-color .18s,box-shadow .18s}
.ww-corr-card:hover{transform:translateY(-4px);border-color:#545454;box-shadow:0 14px 34px rgba(84,84,84,.22)}
.ww-corr-rank{position:absolute;top:10px;right:12px;font-size:11px;font-weight:800;color:#767676}
.ww-corr-flags{flex:none;display:flex;align-items:center;gap:6px}
.ww-corr-flags img{width:34px;height:24px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px rgba(64,64,64,.4)}
.ww-corr-arrow{color:#909090;font-size:14px;font-weight:700}
.ww-corr-goods{font-size:12px;color:#a6a6a6;line-height:1.5}
.ww-corr-goods em{font-style:normal;font-weight:700;color:#d6d6d6}
.ww-corr-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ww-corr-body b{font-size:14.5px;color:#fff}
.ww-corr-val{font-size:13px;font-weight:800;color:#d7d7d7}
.ww-growing{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px;font-size:14px;color:#e6e6e6}
.ww-growing b{color:#fff}
.ww-grow-chip{background:#404040;border:1px solid #404040;border-radius:999px;padding:8px 16px;font-size:13px;color:#f2f2f2}
.ww-source{margin-top:16px;font-size:12px;color:#767676}
@media(max-width:1100px){.ww-corr-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.ww-corr-grid{grid-template-columns:repeat(2,1fr)}.ww-corr h2{font-size:24px}}

/* ============ Homepage "Frequently searched" row ============ */
.pm-freq{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.pm-freq-label{color:var(--pm-faint);font-weight:600}
.pm-freq a{color:var(--pm-muted);text-decoration:none;transition:color .15s}
.pm-freq a:hover{color:var(--pm-accent-deep);text-decoration:underline}

/* ============ Manufacturers landing hero ============ */
.mfr-hero{text-align:center;padding:44px 20px 8px;max-width:860px;margin:0 auto}
.mfr-hero h1{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.mfr-checks{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:14px;font-weight:600;margin-bottom:20px}
.mfr-checks i{font-style:normal;color:var(--pm-accent-deep);font-weight:800;margin-right:6px}
.mfr-quick{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px}
.mfr-welcome{color:var(--pm-muted)}
.mfr-quick a{color:var(--pm-accent-deep);font-weight:700;text-decoration:none}
.mfr-quick a:hover{text-decoration:underline}
@media(max-width:640px){.mfr-hero h1{font-size:25px}}

/* ===== Black cinematic supplier storefront ===== */
.store-hero{position:relative;background:#444;color:#fff;overflow:hidden;min-height:78vh;display:flex;align-items:flex-end}
.store-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.store-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,64,64,.55) 0%,rgba(64,64,64,.25) 35%,rgba(64,64,64,.88) 100%),radial-gradient(80% 60% at 20% 80%,rgba(84,84,84,.28),transparent 60%)}
.store-hero-inner{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:88px 24px 56px}
.store-hero-tags{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.store-ai-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e2e2e2;background:rgba(84,84,84,.22);border:1px solid rgba(130,130,130,.55);padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.store-hero-name{font-size:clamp(34px,5.2vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 12px;text-shadow:0 4px 30px rgba(64,64,64,.6)}
.store-hero-meta{font-size:15.5px;color:#e3e3e3;margin:0 0 12px;font-weight:500}
.store-hero-rating{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:15px}
.store-hero-rating .stars{color:#cfcfcf;font-size:19px;letter-spacing:2px}
.store-hero-rating strong{font-size:19px}
.store-hero-satisfied{color:#cdcdcd;font-weight:600}
.store-hero-reviews{color:#b2b2b2}
.store-caps{margin-bottom:28px}
.store-caps-title{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c0c0c0;margin-bottom:10px}
.store-caps ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.store-caps li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;backdrop-filter:blur(6px);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.store-caps li:hover{transform:translateY(-2px);border-color:rgba(130,130,130,.7);background:rgba(84,84,84,.18)}
.store-caps li span{color:#949494;font-weight:800}
.store-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.store-cta-primary{display:inline-block;background:linear-gradient(135deg,#8f8f8f,#545454);color:#fff;font-weight:700;font-size:15px;padding:12px 32px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(84,84,84,.45);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.store-cta-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 40px rgba(84,84,84,.6)}
.store-cta-primary:active{transform:translateY(0) scale(.98)}
.store-cta-ghost{display:inline-block;color:#fff;font-weight:600;font-size:15px;padding:12px 28px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.store-cta-ghost:hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.08)}
.store-dark{background:#404040;color:#eeeeee}
.store-dark-inner{padding-top:44px;padding-bottom:64px}
.store-stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:44px}
.store-stats-band>div{background:#404040;border:1px solid #404040;border-radius:16px;padding:20px;text-align:center;transition:transform .25s ease,border-color .25s ease}
.store-stats-band>div:hover{transform:translateY(-3px);border-color:rgba(130,130,130,.6)}
.store-stats-band strong{display:block;font-size:30px;font-weight:800;color:#fff}
.store-stats-band span{font-size:13px;color:#a1a1a1}
.store-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0}
.store-facts>div{background:#404040;border:1px solid #404040;border-radius:12px;padding:12px 16px}
.store-facts dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:#828282;margin-bottom:4px}
.store-facts dd{margin:0;font-size:14.5px;font-weight:600;color:#eeeeee}
.empty-dark{background:#404040;border:1px dashed #444;color:#a1a1a1}
/* Dark product cards on the store page */
.store-product-grid .pm-card{background:#404040;border-color:#404040}
.store-product-grid .pm-card:hover{border-color:rgba(130,130,130,.6);box-shadow:0 18px 44px rgba(64,64,64,.55),0 0 0 1px rgba(130,130,130,.25)}
.store-product-grid .pm-card-title{color:#eeeeee}
.store-product-grid .pm-card:hover .pm-card-title{color:#d7d7d7}
.store-product-grid .pm-card-price{color:#d7d7d7}
.store-product-grid .pm-card-meta{color:#828282}
@media(max-width:860px){.store-stats-band{grid-template-columns:repeat(2,1fr)}.store-facts{grid-template-columns:1fr}}
@media(max-width:640px){.store-hero{min-height:88vh}.store-hero-inner{padding:64px 18px 40px}}
@media(prefers-reduced-motion:reduce){.store-hero-video{display:none}}

/* ===== RFQ page: navy hero + composer (matches reference) ===== */
.rfq-hero{background:linear-gradient(120deg,#404040 0%,#404040 55%,#535353 100%);color:#fff;overflow:hidden}
.rfq-hero-inner{max-width:1200px;margin:0 auto;padding:56px 24px 120px;display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.rfq-kicker{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;margin-bottom:16px}
.rfq-badge{background:linear-gradient(135deg,#8f8f8f,#8f8f8f);font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:6px}
.rfq-hero h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;color:#fff}
.rfq-hero-sub{color:#d7d7d7;font-size:15.5px;margin:0 0 26px}
.rfq-learn{color:#fff;font-weight:600;margin-left:8px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rfq-learn:hover{color:#d7d7d7}
.rfq-count-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:8px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .25s ease,background .25s ease}
.rfq-count-pill:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.rfq-cust-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rfq-cust{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;color:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.rfq-cust:hover{transform:translateY(-3px);border-color:rgba(136,136,136,.75);background:rgba(136,136,136,.14)}
.rfq-cust svg{flex:none;opacity:.92}
.rfq-cust b{display:block;font-size:15.5px;margin-bottom:2px}
.rfq-cust span span{font-size:12.5px;color:#cacaca}
.rfq-composer-wrap{position:relative}
.rfq-composer{background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(64,64,64,.20);padding:28px;margin-top:-84px;position:relative;z-index:2}
.rfq-composer h2{margin:0 0 16px;font-size:19px;letter-spacing:-.01em}
.rfq-upload-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--pm-line);background:#fff;border-radius:10px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:12px;font-family:inherit;transition:transform .2s ease,border-color .2s ease,color .2s ease}
.rfq-upload-btn:hover{border-color:#545454;color:#545454;transform:translateY(-1px)}
.rfq-file-chips{margin-bottom:4px}
.rfq-chip{display:inline-block;background:#f4f4f4;border:1px solid var(--pm-line);border-radius:999px;padding:4px 12px;font-size:12.5px;margin:0 6px 10px 0}
.rfq-composer textarea{width:100%;border:1px solid var(--pm-line);border-radius:12px;padding:12px;font:inherit;font-size:14.5px;resize:vertical;min-height:110px;box-sizing:border-box}
.rfq-composer textarea:focus{outline:2px solid rgba(84,84,84,.35);border-color:#545454}
.rfq-composer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap}
.rfq-ai-check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;cursor:pointer}
.rfq-ai-check input{width:17px;height:17px;accent-color:#545454}
.ai-spark{color:#949494;font-weight:800}
.rfq-write-btn{background:linear-gradient(135deg,#8f8f8f,#8f8f8f);color:#fff;border:0;border-radius:999px;padding:12px 40px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 10px 26px rgba(130,130,130,.42);transition:transform .25s ease,filter .25s ease,box-shadow .25s ease}
.rfq-write-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 34px rgba(130,130,130,.5)}
.rfq-write-btn:active{transform:translateY(0) scale(.98)}
.rfq-write-btn:disabled{opacity:.6;cursor:wait;transform:none}
.rfq-details{background:#fff;border:1px solid var(--pm-line);border-radius:20px;padding:28px;margin-top:24px;margin-bottom:8px}
.rfq-details h2{margin:0 0 16px;font-size:19px;letter-spacing:-.01em}
@media(max-width:900px){.rfq-hero-inner{grid-template-columns:1fr;padding-bottom:110px;gap:30px}}
@media(max-width:640px){.rfq-composer-row{flex-direction:column;align-items:stretch}.rfq-write-btn{width:100%}}

/* ===== Manufacturers hero v2 (matches reference) ===== */
.mfr-hero2{background:linear-gradient(180deg,#fff8f1 0%,#fdfdfb 75%);padding:46px 24px 12px;text-align:center}
.mfr-tabs{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,28px);margin-bottom:28px;flex-wrap:wrap}
.mfr-tab{background:none;border:0;font:inherit;font-size:clamp(20px,3vw,29px);font-weight:800;color:var(--pm-ink);cursor:pointer;padding:4px 0px;letter-spacing:-.01em;text-decoration:none}
.mfr-tab .pm-bigtab-spark{color:#545454}
.mfr-tab.on{color:#545454;box-shadow:inset 0 -3px 0 #545454}
.mfr-tab:not(.on):hover{color:#545454}
.mfr-tab-sep{color:#d0d0d0;font-size:22px}
.mfr-search-form{max-width:880px;margin:0 auto 36px;text-align:left}
.mfr-search-box{display:flex;align-items:stretch;gap:8px;border:2px solid transparent;border-radius:20px;padding:12px 12px 12px 24px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#8f8f8f,#cfcfcf) border-box;box-shadow:0 18px 44px rgba(84,84,84,.13)}
.mfr-search-main{flex:1;display:flex;flex-direction:column;min-width:0;justify-content:center}
.mfr-search-main input{border:0;outline:0;font:inherit;font-size:17px;padding:8px 0;background:transparent;width:100%;color:var(--pm-ink)}
.mfr-search-sub{display:flex;align-items:center;gap:8px;padding:8px 0 2px}
.mfr-search-sub button{background:#fff;border:0;font:inherit;font-size:13.5px;font-weight:600;color:#404040;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 2px}
.mfr-search-sub button:hover{color:#545454}
.mfr-sub-sep{color:#d0d0d0}
.mfr-search-btn{background:linear-gradient(135deg,#cfcfcf,#8f8f8f 60%,#8f8f8f);border:0;color:#fff;font:inherit;font-size:16.5px;font-weight:700;border-radius:999px;padding:0 38px;cursor:pointer;box-shadow:0 10px 24px rgba(130,130,130,.35);align-self:center;min-height:58px;transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;white-space:nowrap}
.mfr-search-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 32px rgba(130,130,130,.45)}
.mfr-search-btn:active{transform:translateY(0) scale(.98)}
.mfr-connect{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:var(--pm-ink)}
.mfr-v{font-family:'DM Sans','Manrope',sans-serif;font-style:italic;color:#7a7a7a;font-weight:600}
.mfr-checks{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:36px;font-size:14.5px;color:#404040}
.mfr-checks i{color:#5c5c5c;font-style:normal;font-weight:800;margin-right:6px}
.mfr-welcome-row{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:16px 4px 8px;flex-wrap:wrap;text-align:left}
.mfr-welcome{font-size:16.5px;color:var(--pm-ink)}
.mfr-links{display:flex;gap:24px;flex-wrap:wrap}
.mfr-links a{color:#404040;text-decoration:none;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.mfr-links a:hover{color:#545454}
@media(max-width:640px){.mfr-search-box{flex-direction:column}.mfr-search-btn{min-height:50px;width:100%}.mfr-welcome-row{flex-direction:column;align-items:flex-start}}

/* ===== Header camera (image search) button ===== */
.pm-search .pm-cam-btn{background:transparent!important;border:0!important;box-shadow:none!important;height:36px;padding:0 8px;color:#767676;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;flex:none}
.pm-search .pm-cam-btn:hover{color:#545454;background:rgba(84,84,84,.09)!important;transform:translateY(-1px)}
.pm-cam-label{font-size:13.5px;font-weight:600;white-space:nowrap}
@media(max-width:1150px){.pm-cam-label{display:none}}

/* ===== Visual search result banners ===== */
.pm-visual-banner{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--pm-line);border-radius:16px;padding:12px 16px;margin-bottom:16px;box-shadow:var(--pm-shadow)}
.pm-visual-banner img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.pm-visual-banner-t{display:flex;flex-direction:column;gap:0px;flex:1;min-width:0}
.pm-visual-banner-t b{font-size:15px}
.pm-visual-banner-t span{font-size:13px;color:var(--pm-muted)}
.pm-error-banner{background:#fef2f2;border:1px solid #e4e4e4;color:#6a6a6a;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:14px}

/* ===== Alibaba-style image/file search panel ===== */
.pm-isw{position:relative}
.img-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--pm-line);border-radius:18px;box-shadow:0 24px 60px rgba(64,64,64,.22);padding:20px;z-index:80;text-align:left}
.img-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.img-panel-head b{font-size:16px;letter-spacing:-.01em}
.img-panel-x{background:#f4f4f4;border:0;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px;color:#565656;font-family:inherit}
.img-panel-x:hover{background:#e6e6e6;color:#404040}
.img-panel-tabs{display:flex;gap:8px;margin:12px 0 14px}
.img-panel-tabs button{flex:1;border:1px solid var(--pm-line);background:#fafafa;border-radius:10px;padding:8px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:#404040;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}
.img-panel-tabs button.on{background:#404040;color:#fff;border-color:#404040}
.img-panel-tabs button:not(.on):hover{border-color:#545454;color:#545454}
.img-drop{border:2px dashed #d0d0d0;border-radius:14px;padding:30px 16px;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.img-drop:hover{border-color:#545454;background:#f8f8f8}
.img-drop.over{border-color:#545454;background:#f4f4f4;transform:scale(1.01)}
.img-drop-ic{font-size:36px;display:block;margin-bottom:10px}
.img-drop-empty p{margin:0 0 4px;font-size:14.5px;color:#404040}
.img-drop-empty p u{color:#545454;cursor:pointer}
.img-drop-hint{font-size:12.5px;color:var(--pm-muted)}
.img-drop-prev{display:flex;align-items:center;gap:12px;text-align:left}
.img-drop-prev img{width:72px;height:72px;object-fit:cover;border-radius:12px;flex:none}
.img-prev-doc{font-size:44px;flex:none}
.img-prev-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.img-prev-meta b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-prev-meta span{font-size:12.5px;color:var(--pm-muted)}
.img-prev-x{background:#f4f4f4;border:0;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:12px;color:#565656;flex:none;font-family:inherit}
.img-prev-x:hover{background:#e4e4e4;color:#6a6a6a}
.img-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.img-panel-note{font-size:13px;color:var(--pm-muted)}
.img-panel-go{background:linear-gradient(135deg,#8f8f8f,#8f8f8f);color:#fff;border:0;border-radius:999px;padding:12px 36px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(130,130,130,.35);transition:transform .2s ease,filter .2s ease,opacity .2s ease}
.img-panel-go:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
.img-panel-go:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
@media(max-width:640px){.img-panel{position:fixed;top:auto;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;max-height:82vh;overflow:auto}}

/* ---------- Sell on TwoDock (supplier onboarding) ---------- */
.sell-hero{background:linear-gradient(135deg,#404040 0%,#404040 55%,#404040 100%);color:#fff;padding:72px 24px 64px;position:relative;overflow:hidden}
.sell-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 20%,rgba(130,130,130,.25),transparent 60%);pointer-events:none}
.sell-hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;position:relative}
.sell-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d7d7d7;border:1px solid rgba(184,184,184,.4);border-radius:999px;padding:4px 12px;margin-bottom:18px}
.sell-hero-copy h1{font-size:clamp(34px,4.6vw,58px);line-height:1.08;margin:0 0 16px;font-weight:800;letter-spacing:-.02em}
.sell-sub{color:#cecece;font-size:17px;line-height:1.6;margin:0 0 28px;max-width:520px}
.sell-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.sell-mini-stats{display:flex;gap:36px}
.sell-mini-stats div{display:flex;flex-direction:column}
.sell-mini-stats b{font-size:24px;font-weight:800}
.sell-mini-stats span{font-size:13px;color:#767676}
.sell-hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px;backdrop-filter:blur(8px)}
.sell-hero-card-head{font-weight:800;font-size:17px;margin-bottom:16px}
.sell-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:16px}
.sell-steps li{display:flex;gap:12px;align-items:flex-start}
.sell-step-n{flex:0 0 34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8f8f8f,#8f8f8f);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.sell-steps b{display:block;font-size:15px;margin-bottom:2px}
.sell-steps p{margin:0;font-size:13.5px;color:#c1c1c1;line-height:1.5}
.sell-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sell-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sell-feat{background:#fff;border:1px solid var(--pm-line);border-radius:18px;padding:24px;transition:transform .25s ease,box-shadow .25s ease}
.sell-feat:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(64,64,64,.1)}
.sell-feat-ic{font-size:30px;margin-bottom:12px}
.sell-feat b{display:block;font-size:16px;margin-bottom:6px}
.sell-feat p{margin:0;font-size:14px;color:var(--pm-muted);line-height:1.6}
.sell-opt{display:block;background:#fff;border:1px solid var(--pm-line);border-radius:18px;padding:24px;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sell-opt:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(130,130,130,.14);border-color:#d4d4d4}
.sell-opt-ic{font-size:32px;margin-bottom:12px}
.sell-opt b{display:block;font-size:16.5px;margin-bottom:6px}
.sell-opt p{margin:0 0 8px;font-size:14px;color:var(--pm-muted);line-height:1.6}
.sell-opt-go{font-weight:700;color:var(--pm-accent,#545454);font-size:14px}
.sell-opt-big{padding:30px}
.sell-final-cta{text-align:center;background:linear-gradient(135deg,#404040,#404040);color:#fff;border-radius:24px;padding:56px 32px;margin:64px 0 40px}
.sell-final-cta h2{margin:0 0 8px;font-size:30px}
.sell-final-cta p{color:#cecece;margin:0 0 26px}
/* wizard */
.wiz-wrap{max-width:720px;margin:40px auto 64px}
.wiz-progress{display:flex;align-items:flex-start;justify-content:center;margin-bottom:32px}
.wiz-dot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px}
.wiz-dot span{width:38px;height:38px;border-radius:50%;border:2px solid var(--pm-line);display:flex;align-items:center;justify-content:center;font-weight:800;background:#fff;color:var(--pm-muted)}
.wiz-dot label{font-size:12.5px;color:var(--pm-muted);font-weight:600}
.wiz-dot.now span{border-color:#8f8f8f;background:#8f8f8f;color:#fff;box-shadow:0 6px 18px rgba(130,130,130,.35)}
.wiz-dot.now label{color:#404040}
.wiz-dot.done span{border-color:#5c5c5c;background:#5c5c5c;color:#fff}
.wiz-bar{flex:1;height:2px;background:var(--pm-line);margin-top:19px;max-width:120px}
.wiz-bar.done{background:#5c5c5c}
.wiz-card{margin-top:8px}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.wiz-verify-note{display:flex;gap:12px;background:#f4f4f4;border:1px solid #d4d4d4;border-radius:14px;padding:16px 16px;margin-bottom:18px}
.wiz-verify-ic{font-size:26px}
.wiz-verify-note b{display:block;margin-bottom:4px}
.wiz-verify-note p{margin:0;font-size:14px;color:#5b5b5b;line-height:1.55}
.wiz-drafts-note{background:#f6f6f6;border:1px solid #d9d9d9;border-radius:14px;padding:12px 16px;margin-top:24px;text-align:center;font-size:14.5px}
.sell-done-check{width:76px;height:76px;border-radius:50%;background:#5c5c5c;color:#fff;font-size:38px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 12px 30px rgba(92,92,92,.35)}
.sell-done-stats{display:flex;gap:16px;justify-content:center;margin-top:24px}
.sell-done-stats div{background:#fff;border:1px solid var(--pm-line);border-radius:16px;padding:16px 32px;display:flex;flex-direction:column}
.sell-done-stats b{font-size:28px}
.sell-done-stats span{font-size:13px;color:var(--pm-muted)}
/* drafts review */
.draft-list{display:flex;flex-direction:column;gap:12px}
.draft-card{display:flex;gap:16px;background:#fff;border:1px solid var(--pm-line);border-radius:16px;padding:12px;align-items:center;transition:box-shadow .2s ease,transform .2s ease}
.draft-card:hover{box-shadow:0 10px 28px rgba(64,64,64,.08);transform:translateY(-2px)}
.draft-img{flex:0 0 76px;width:76px;height:76px;border-radius:12px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:30px}
.draft-img img{width:100%;height:100%;object-fit:cover}
.draft-body{flex:1;min-width:0}
.draft-body b{display:block;font-size:15px;margin-bottom:2px}
.draft-desc{margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.draft-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pm-catnav-sell{font-weight:700;color:var(--pm-accent,#545454)!important}
@media(max-width:900px){
  .sell-hero-inner{grid-template-columns:1fr}
  .sell-grid-3{grid-template-columns:1fr 1fr}
  .sell-grid-2{grid-template-columns:1fr}
}
@media(max-width:640px){
  .sell-grid-3{grid-template-columns:1fr}
  .sell-hero{padding:48px 18px}
  .draft-card{flex-wrap:wrap}
  .draft-actions{width:100%;justify-content:flex-start}
  .wiz-dot{min-width:70px}
}

/* ===== Clean static hero (minimal premium) ===== */
.fx-hero.hero-clean{background:#f7f9fc;color:#0A1317;min-height:auto;border-bottom:1px solid #e5e9f0}
.fx-hero.hero-clean .cb-cine-inner{padding:110px 24px 96px}
.fx-hero.hero-clean .cb-cine-eyebrow{color:#0064E0;background:none;border:none;font-size:11px;font-weight:700;letter-spacing:.24em;padding:0;margin-bottom:20px;backdrop-filter:none}
.fx-hero.hero-clean h1{color:#0A1317;text-shadow:none;letter-spacing:-.045em;line-height:1.05}
.fx-hero.hero-clean h1 em{font-style:normal;color:#0064E0;background:none;-webkit-text-fill-color:#0064E0}
.fx-hero.hero-clean .cb-cine-sub{color:#5b6b82;font-weight:500}
/* ===== Black cinematic theme: homepage video hero + supplier showcase ===== */
.cb-cine{position:relative;background:#444;color:#fff;overflow:hidden;min-height:94vh;display:flex;align-items:center}
.cb-cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.cb-cine-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,64,64,.62) 0%,rgba(64,64,64,.30) 40%,rgba(64,64,64,.94) 100%),radial-gradient(70% 55% at 75% 20%,rgba(84,84,84,.22),transparent 60%)}
.cb-cine-inner{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:110px 24px 70px}
.cb-cine-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e2e2e2;background:rgba(84,84,84,.22);border:1px solid rgba(130,130,130,.55);padding:8px 16px;border-radius:999px;backdrop-filter:blur(6px)}
.cb-cine h1{font-size:clamp(40px,6.4vw,84px);font-weight:800;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase;margin:20px 0 16px;text-shadow:0 4px 30px rgba(64,64,64,.65)}
.cb-cine h1 em{font-style:normal;color:#cfcfcf}
.cb-cine-sub{font-size:17px;color:#e3e3e3;max-width:640px;margin:0 0 24px;line-height:1.55}
.cb-cine-search{display:flex;max-width:640px;background:rgba(255,255,255,.97);border-radius:999px;padding:4px;box-shadow:0 12px 40px rgba(64,64,64,.45)}
.cb-cine-search input{flex:1;min-width:0;border:0;background:transparent;padding:12px 20px;font-size:15px;color:#444;outline:none;font-family:inherit}
.cb-cine-search button{background:#545454;color:#fff;border:0;border-radius:999px;padding:12px 36px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:.18s}
.cb-cine-search button:hover{background:#585858;box-shadow:0 6px 20px rgba(84,84,84,.5)}
.cb-cine-freq{margin-top:16px}
.cb-cine-freq .pm-freq-label{color:#b2b2b2}
.cb-cine-freq a{color:#ececec;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.cb-cine-freq a:hover{border-color:#cfcfcf;color:#cfcfcf}
.cb-cine-stats{display:flex;gap:36px;margin-top:32px;flex-wrap:wrap}
/* (2026-10-15: wrap on desktop too — 5 stats at gap:48px overflowed the
   hero's overflow:hidden on narrower windows, clipping stats 3-5) */
.cb-cine-stats b{font-size:32px;display:block;letter-spacing:-.02em}
.cb-cine-stats span{color:#b2b2b2;font-size:13px}
.cb-cine-links{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}
.cb-cine-links a{color:#e2e2e2;font-weight:600;text-decoration:none;font-size:14.5px}
.cb-cine-links a:hover{color:#cfcfcf}

.cb-band{background:#404040;color:#fff}
.cb-band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:30px}
.cb-band-head h1,.cb-band-head h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;text-transform:uppercase}
.cb-band-head p{color:#b2b2b2;margin:0;font-size:15px}
.cb-link-light{color:#cfcfcf;font-weight:700;text-decoration:none;white-space:nowrap}
.cb-link-light:hover{color:#808080}
.cb-muted{color:#b2b2b2}

.cb-sup-grid{display:flex;flex-direction:column;gap:22px}
.cb-sup-row{background:#404040;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px;display:grid;grid-template-columns:1fr 340px;gap:28px;transition:border-color .2s,box-shadow .2s}
.cb-sup-row:hover{border-color:rgba(144,144,144,.45);box-shadow:0 18px 44px rgba(64,64,64,.5)}
.cb-sup-id{min-width:0}
.cb-sup-headrow{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.cb-sup-logo{flex:none;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#cfcfcf,#545454);color:#404040;font-weight:800;font-size:22px;display:grid;place-items:center}
.cb-sup-titles{min-width:0;flex:1}
.cb-sup-name{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em;line-height:1.25}
.cb-sup-name a{color:#fff;text-decoration:none}
.cb-sup-name a:hover{color:#cfcfcf}
.cb-sup-badges{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:13.5px;color:#e3e3e3}
/* T2 trim (2026-10-03): priority signal badges — max 3 visible, rest behind "+N more". */
.cb-sup-prisig{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 0;font-size:12px}
.cb-sup-prisig .cb-sup-vac{color:#8a6d1a}
.cb-sup-prisig .cb-sup-resp{color:#6e6e6e}
.cb-sup-prisig .cb-sup-active{color:#4a7c59}
.cb-sup-prisig .cb-sup-sla{color:#1a6b4a}
.cb-sup-prisig .cb-sup-lang{color:#6b6b6b}
.cb-badge-more{font-size:11.5px;font-weight:600;color:#6e6e6e;background:#eee;border-radius:999px;padding:4px 8px;white-space:nowrap;cursor:help}
/* N5 (2026-10-03): per-quote expiry countdown on RFQs. */
.rfq-quote-exp{font-size:12px;color:#6e6e6e;margin-top:6px}
.rfq-quote-exp.soon{color:#8a6d1a;font-weight:600}
.rfq-quote-exp.exp{color:#a33;font-weight:600}
.cb-badge-ver{font-size:11.5px;font-weight:700;color:#404040;background:#bcbcbc;border-radius:999px;padding:4px 11px;white-space:nowrap}
.cb-spec-type{font-weight:800;color:#fff}
.cb-spec-dot{color:#767676}
.cb-sup-loc{color:#595959;font-size:13px;margin:6px 0 0}
.cb-sup-actions{flex:none;display:flex;gap:10px}
.cb-btn-outline{white-space:nowrap;border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:999px;text-decoration:none;transition:.18s}
.cb-btn-outline:hover{border-color:#cfcfcf;color:#cfcfcf;transform:translateY(-1px)}
.cb-btn-solid{white-space:nowrap;background:#fff;color:#404040;font-weight:800;font-size:13.5px;padding:11px 20px;border-radius:999px;text-decoration:none;transition:.18s}
.cb-btn-solid:hover{background:#cfcfcf;transform:translateY(-1px)}
.cb-sup-micro{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#595959;margin:14px 0 6px}
.cb-sup-rating{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;flex-wrap:wrap}
.cb-star{color:#cfcfcf;font-size:16px}
.cb-sup-rating strong{font-size:17px;color:#fff}
.cb-sup-sat{color:#595959;font-weight:600}
.cb-sup-rcount{color:#595959}
.cb-sup-caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cb-sup-caps li{font-size:13.5px;color:#d1d1d1;padding-left:16px;position:relative}
.cb-sup-caps li::before{content:"·";position:absolute;left:6px;color:#cfcfcf;font-weight:800}
.cb-sup-more{display:inline-block;margin-top:12px;color:#cfcfcf;font-weight:700;font-size:13.5px;text-decoration:none}
.cb-sup-more:hover{color:#808080}
.cb-sup-carousel{position:relative;border-radius:14px;overflow:hidden;background:#404040;min-height:280px}
.cb-car-track{position:absolute;inset:0}
.cb-car-slide{position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none}
.cb-car-slide.on{opacity:1;pointer-events:auto}
.cb-car-slide img{width:100%;height:100%;object-fit:cover}
.cb-car-count{position:absolute;left:12px;bottom:12px;background:rgba(64,64,64,.62);color:#fff;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.cb-car-count b{color:#cfcfcf}
.cb-car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(64,64,64,.55);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;transition:.18s}
.cb-car-arrow:hover{background:#cfcfcf;color:#404040}
.cb-car-prev{left:10px}
.cb-car-next{right:10px}
@media (max-width:1024px){.cb-sup-row{grid-template-columns:1fr}.cb-sup-carousel{min-height:240px;height:240px;position:relative}}
@media (max-width:640px){
  .cb-cine{min-height:100svh}
  .cb-cine-inner{padding:96px 20px 56px}
  .cb-cine-stats{gap:24px;flex-wrap:wrap}
  .cb-band-head{flex-direction:column;align-items:flex-start}
  .cb-sup-headrow{flex-wrap:wrap}
  .cb-sup-actions{width:100%;flex-wrap:wrap}
  .cb-btn-outline,.cb-btn-solid{flex:1;text-align:center}
}

/* Landing uses the same white theme as every page (dark homepage overrides removed 2026-09-27). */
/* ============ Big header tabs (AI Mode | Products | Manufacturers | Worldwide) ============ */
.pm-maintabs{display:flex;align-items:center;justify-content:center;gap:40px;padding:20px 24px 16px;background:transparent;flex-wrap:wrap}
.pm-maintab{font-size:27px;font-weight:800;color:var(--pm-ink);text-decoration:none;letter-spacing:-.015em;position:relative;padding-bottom:8px;line-height:1.2;transition:color .15s}
.pm-maintab:hover{color:var(--pm-accent-deep)}
.pm-maintab .pm-maintab-spark{color:#cfcfcf;font-size:19px;margin-right:8px;vertical-align:2px}
.pm-maintab.on{color:#545454}
.pm-maintab.on::after{content:'';position:absolute;left:2px;right:2px;bottom:0;height:4px;border-radius:4px;background:linear-gradient(90deg,#cfcfcf,#808080)}
.pm-maintab-sep{width:2px;height:26px;background:var(--pm-line);flex-shrink:0}
@media(max-width:760px){.pm-maintabs{gap:20px;padding:14px 16px 10px}.pm-maintab{font-size:19px}.pm-maintab-sep{height:20px}}

/* ============ Welcome strip (below hero) ============ */
.cb-welcome{max-width:1280px;margin:0 auto;padding:24px 24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cb-welcome-t{font-size:21px;font-weight:700;color:var(--pm-ink);letter-spacing:-.01em}
.cb-welcome-links{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cb-welcome-links a{font-size:14.5px;font-weight:600;color:var(--pm-muted);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .15s}
.cb-welcome-links a:hover{color:#cfcfcf}
@media(max-width:760px){.cb-welcome-t{font-size:18px}.cb-welcome-links{gap:18px}}

/* ============ GLOBAL BLACK PREMIUM THEME ============ */
/* Dark header everywhere */
.pm-catnav{background:rgba(64,64,64,.88);border-top:1px solid rgba(255,255,255,.1)}
.pm-cats-btn,.pm-catnav-link{color:#f0f0f0}
.pm-cats-btn:hover,.pm-catnav-link:hover{color:#cfcfcf}
.pm-mega{background:#404040;border-top:1px solid rgba(255,255,255,.1)}
.pm-mega-cat{color:#f0f0f0}
.pm-mega-empty{color:#a1a1a1}
/* Cards, panels, forms: dark surfaces */
.pm-rfq-inner,.pm-chip,.pm-tiers,.pm-supcard,.pm-order,.form-card,.empty-box,
.pm-marquee,.pm-step,.pm-mega-tile,.rfq-composer,.rfq-details,.img-panel,
.sell-feat,.sell-opt,.draft-card,.ai2-promptbox,.ai2-auto-menu,.ww-search,
.pm-visual-banner,.ai2-chip,.pm-toolbar select,.sell-done-stats div{background:#404040}
.pm-toolbar select,.ww-search input,.ai2-promptbox textarea,.form-card input,.form-card select,.form-card textarea{color:#f0f0f0;color-scheme:dark}
/* Legacy component surfaces */
.site-header,.cat-sidebar,.welcome-card,.announce-card,.product-card,.trust-item,
.cat-card,.rfq-banner,.how-card,.filters,.sortbar,.empty,.detail-gallery,.detail-info,
.supplier-card,.rfq-card,.checkout-form,.order-summary,.store-side,.stat,
.auth-card,.site-footer{background:var(--card)}
.table{background:var(--card);color:var(--ink)}
.table th{background:#f5f5f4;color:#161616}
.table td{border-color:var(--line)}
/* Buttons keep contrast */
.btn{background:#fff;color:#161616;border-color:var(--line)}
.btn-danger{background:#fff}
/* Form inputs dark */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{background:#404040;color:#f0f0f0;border-color:var(--line);color-scheme:dark}
/* Search bars stay white for contrast (premium accent) */
.pm-search, .pm-hero-search{background:#fff}
.pm-search input, .pm-hero-search input{background:#fff;color:#404040}
/* Light buttons stay light */
.pm-btn-light{background:#f0f0f0;color:#404040}
/* Status pills: keep readable */
.status-pending,.status-changes_requested{background:#404040;color:#cfcfcf}
.ai-notice{background:#404040;border-color:#808080;color:#cfcfcf}
/* Wizard + misc */
.wiz-dot.now label{color:#f0f0f0}
.img-panel-tabs button.on{background:#f0f0f0;color:#404040;border-color:#f0f0f0}
.rfq-upload-btn{background:#404040;color:#f0f0f0;border-color:var(--line)}

/* ============ Header auth buttons: locked side-by-side ============ */
/* Dark-theme button contrast fixes */
.pm-btn-dark{background:#f0f0f0;color:#404040}
.pm-btn-dark:hover{background:#ffffff;box-shadow:var(--pm-shadow)}
.pm-btn-ghost{color:#f0f0f0;border-color:rgba(255,255,255,.28)}
.pm-btn-ghost:hover{border-color:#f0f0f0}

/* ============================================================
   APPLE-GRADE ULTRA PREMIUM LAYER (2026-09-26)
   Typography-first, cinematic black, buttery motion.
   ============================================================ */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Typography: confident Apple-scale headlines ---------- */
.pm-sec-head{margin:0 auto 54px;max-width:860px;text-align:center}
.pm-sec-head h2{font-size:clamp(34px,4.4vw,58px)!important;font-weight:700;letter-spacing:-.035em;line-height:1.04;color:#f2f2f2}
.pm-sec-head p{font-size:18px;color:#a1a1a1;max-width:640px;margin:16px auto 0;line-height:1.65}
.pm-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.pm-band h2{font-size:clamp(30px,3.6vw,48px)!important;letter-spacing:-.03em;font-weight:700}
.pm-detail h1{letter-spacing:-.02em}

/* ---------- Sections breathe ---------- */
.pm-section{padding:110px 24px;max-width:1280px;margin:0 auto}

/* ---------- Header: floating glass ---------- */
.pm-catnav{background:rgba(64,64,64,.6)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid var(--hair)}
.pm-catnav-link,.pm-cats-btn{font-size:14.5px;font-weight:500;letter-spacing:-.01em;padding:12px 4px;position:relative;transition:color .3s var(--apple-ease)}
.pm-catnav-link::after,.pm-cats-btn::after{content:'';position:absolute;left:0;right:100%;bottom:8px;height:2px;background:var(--gold);border-radius:2px;transition:right .35s var(--apple-ease)}
.pm-catnav-link:hover::after,.pm-cats-btn:hover::after{right:0}
.pm-catnav-link:hover,.pm-cats-btn:hover{color:#fff!important}

/* ---------- Big tabs: Apple segmented refinement ---------- */
.pm-maintabs{gap:8px}
.pm-maintab{font-size:clamp(19px,2.4vw,27px);font-weight:600;letter-spacing:-.025em;color:#8b8b8b;padding:12px 24px;border-radius:999px;transition:all .35s var(--apple-ease);position:relative}
.pm-maintab:hover{color:#f0f0f0;background:rgba(255,255,255,.06);transform:translateY(-1px)}
.pm-maintab.on{color:#fff}
.pm-maintab.on::after{content:'';position:absolute;left:26px;right:26px;bottom:4px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--gold),#d6d6d6)}

/* ---------- Cinematic video hero ---------- */
.pm-video-hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;background:#444}
.pm-video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.04);animation:heroSettle 8s var(--apple-ease) forwards}
@keyframes heroSettle{to{transform:scale(1)}}
.pm-video-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,64,64,.55) 0%,rgba(64,64,64,.15) 40%,rgba(64,64,64,.82) 100%);pointer-events:none}
.pm-video-hero-inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:120px 24px 90px;text-align:center}
.pm-video-hero h1{font-size:clamp(44px,7.2vw,96px);font-weight:700;letter-spacing:-.045em;line-height:1; color:#fff;margin:0 0 20px;text-wrap:balance}
.pm-video-hero h1 .gold{background:linear-gradient(100deg,#d6d6d6,var(--gold) 60%,#8f8f8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-video-hero .sub{font-size:clamp(17px,2vw,22px);color:rgba(255,255,255,.72);max-width:680px;margin:0 auto 44px;line-height:1.6;letter-spacing:-.01em}
/* glass search */
.pm-video-search{display:flex;align-items:center;max-width:720px;margin:0 auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 8px 8px 28px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 70px rgba(64,64,64,.45);transition:border-color .3s,box-shadow .3s}
.pm-video-search:focus-within{border-color:rgba(166,166,166,.65);box-shadow:0 24px 70px rgba(64,64,64,.45),0 0 0 4px rgba(166,166,166,.18)}
.pm-video-search input{flex:1;background:transparent!important;border:0!important;color:#fff!important;font-size:17px;outline:none;box-shadow:none!important}
.pm-video-search input::placeholder{color:rgba(255,255,255,.5)}
.pm-video-search button{background:#fff;color:#404040;border:0;border-radius:999px;padding:15px 38px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .3s var(--apple-ease),box-shadow .3s}
.pm-video-search button:hover{transform:scale(1.04);box-shadow:0 8px 30px rgba(255,255,255,.25)}
/* scroll cue */
.pm-scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.32em;text-transform:uppercase;animation:cueFloat 2.6s ease-in-out infinite}
@keyframes cueFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Welcome strip ---------- */
.pm-welcome{background:linear-gradient(180deg,#404040,#404040);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:center;padding:84px 24px}
.pm-welcome h2{font-size:clamp(30px,4vw,52px);font-weight:700;letter-spacing:-.035em;color:#fff;margin:0 0 16px}
.pm-welcome p{color:#a1a1a1;font-size:18px;max-width:620px;margin:0 auto}
.pm-welcome-links{display:flex;gap:16px;justify-content:center;margin-top:36px;flex-wrap:wrap}

/* ---------- Product cards: gallery grade ---------- */
.pm-grid{gap:28px}
.pm-card{background:var(--card2);border:1px solid var(--hair);border-radius:24px;overflow:hidden;transition:transform .5s var(--apple-ease),box-shadow .5s var(--apple-ease),border-color .5s}
.pm-card:hover{transform:translateY(-10px);box-shadow:0 34px 70px rgba(64,64,64,.55),0 0 0 1px rgba(166,166,166,.22);border-color:rgba(166,166,166,.35)}
.pm-card-body{padding:22px 22px 24px}
.pm-card-title{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:#f0f0f0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:48px}
.pm-card:hover .pm-card-title{color:#fff}
.pm-card-price{font-size:21px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-top:10px}
.pm-card-price small{font-size:13px;color:#8b8b8b;font-weight:500}
.pm-card-meta{font-size:13px;color:#8b8b8b;margin-top:8px}
.pm-card .pm-verified{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}

/* ---------- Supplier rows: cinematic ---------- */
.pm-supcard{background:linear-gradient(135deg,#404040,#404040);border:1px solid var(--hair);border-radius:24px;overflow:hidden;transition:transform .5s var(--apple-ease),box-shadow .5s,border-color .5s}
.pm-supcard:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(64,64,64,.6);border-color:rgba(166,166,166,.3)}
.pm-supcard .sup-carousel img{transition:transform .8s var(--apple-ease)}
.pm-supcard:hover .sup-carousel img{transform:scale(1.05)}

/* ---------- Category tiles ---------- */
.pm-cats{gap:22px}
.pm-cat{background:var(--card2);border:1px solid var(--hair);border-radius:20px;overflow:hidden;transition:transform .5s var(--apple-ease),box-shadow .5s,border-color .5s}
.pm-cat:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 26px 60px rgba(64,64,64,.5);border-color:rgba(166,166,166,.3)}
.pm-cat img{transition:transform .8s var(--apple-ease)}
.pm-cat:hover img{transform:scale(1.08)}

/* ---------- Buttons: tactile ---------- */
.pm-btn{transition:transform .35s var(--apple-ease),box-shadow .35s,background .3s,border-color .3s}
.pm-btn:hover{transform:translateY(-2px)}
.pm-btn:active{transform:translateY(0) scale(.98)}
.pm-btn-dark{background:#f0f0f0!important;color:#404040!important;font-weight:700}
.pm-btn-dark:hover{box-shadow:0 14px 40px rgba(240,240,240,.22)}
.pm-btn-accent{background:linear-gradient(135deg,#878787,#545454);box-shadow:0 10px 30px rgba(84,84,84,.35)}
.pm-btn-accent:hover{box-shadow:0 16px 44px rgba(84,84,84,.5)}
.pm-btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- Mega menu: refined dropdown ---------- */
.pm-mega{background:rgba(64,64,64,.97)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--hair);box-shadow:0 40px 90px rgba(64,64,64,.6);border-radius:0 0 24px 24px;overflow:hidden}
.pm-mega-cat{transition:transform .3s var(--apple-ease),background .3s;border-radius:12px}
.pm-mega-cat:hover{background:rgba(255,255,255,.06);transform:translateX(6px)}
.pm-mega-tile{transition:transform .4s var(--apple-ease),box-shadow .4s}
.pm-mega-tile:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(64,64,64,.5)}

/* ---------- Forms on dark ---------- */
.form-card{background:var(--card2);border:1px solid var(--hair);border-radius:24px;box-shadow:0 30px 80px rgba(64,64,64,.45)}
.form-card input,.form-card select,.form-card textarea{border-radius:14px;padding:12px 16px;font-size:15.5px;transition:border-color .3s,box-shadow .3s}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(166,166,166,.16);outline:none}
.auth-card{background:var(--card2);border:1px solid var(--hair);border-radius:24px;box-shadow:0 40px 100px rgba(64,64,64,.55)}

/* ---------- Tables ---------- */
.table{border-radius:18px;overflow:hidden;border:1px solid var(--hair)}
.table th{letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:#a1a1a1;background:#404040}
.table tbody tr{transition:background .25s}
.table tbody tr:hover{background:rgba(166,166,166,.06)}

/* ---------- Footer ---------- */
.pm-footer{background:#404040;border-top:1px solid var(--hair);padding:90px 24px 40px}
.pm-footer h4{color:#fff;font-size:13px;letter-spacing:.22em}
.pm-footer a{color:#8b8b8b;transition:color .3s,transform .3s;display:inline-block}
.pm-footer a:hover{color:#fff;transform:translateX(3px)}

/* ---------- Marquee: subtler ---------- */
.pm-marquee{background:transparent;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pm-marquee-track span{color:#6b6b6b}

/* ---------- Scroll reveal: Apple timing ---------- */
.rv{transition:opacity 1s var(--apple-ease),transform 1s var(--apple-ease)}

/* ---------- Mobile menu button + drawer ---------- */
.pm-burger{display:none;background:none;border:1px solid var(--hair);border-radius:12px;width:44px;height:44px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0}
.pm-burger span{display:block;width:20px;height:2px;background:#f0f0f0;border-radius:2px;transition:transform .3s var(--apple-ease),opacity .3s}
.pm-mobile-drawer{position:fixed;inset:0;z-index:950;background:rgba(64,64,64,.98);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s var(--apple-ease)}
.pm-mobile-drawer.open{opacity:1;pointer-events:auto}
.pm-mobile-drawer a{color:#f0f0f0;font-size:20px;font-weight:600;letter-spacing:-.02em;text-decoration:none;padding:8px 12px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--apple-ease),transform .5s var(--apple-ease),color .3s}
.pm-mobile-drawer.open a{opacity:1;transform:none}
.pm-mobile-drawer a:hover{color:var(--gold)}
.pm-mobile-drawer .pm-drawer-close{position:absolute;top:24px;right:24px;background:none;border:1px solid var(--hair);color:#f0f0f0;border-radius:50%;width:48px;height:48px;font-size:20px;cursor:pointer}

/* ---------- Responsive: tablet ---------- */
@media(max-width:1020px){
  .pm-section{padding:72px 20px}
  .pm-burger{display:flex;order:-1}
    /* Landing: search row with the burger beside the pill (also keeps the drawer reachable on tablets) */
    .pm-maintabs{overflow-x:auto;max-width:100%;padding:4px 4px;scrollbar-width:none}
  .pm-maintabs::-webkit-scrollbar{display:none}
  .pm-maintab{white-space:nowrap;font-size:19px;padding:10px 20px}
  .pm-video-hero-inner{padding:100px 20px 70px}
  .pm-video-search{flex-direction:column;border-radius:24px;padding:12px;gap:10px}
  .pm-video-search input{width:100%;text-align:center;padding:12px}
  .pm-video-search button{width:100%}
  .pm-welcome{padding:60px 20px}
  .pm-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .pm-supcard{flex-direction:column}
}
/* ---------- Responsive: phone ---------- */
@media(max-width:640px){
  body{font-size:15.5px}
  .pm-section{padding:56px 16px}
  .pm-sec-head{margin-bottom:36px}
  .pm-video-hero h1{letter-spacing:-.03em}
  .pm-video-hero .sub{font-size:16.5px}
  .pm-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pm-card{border-radius:18px}
  .pm-card-body{padding:14px 14px 16px}
  .pm-card-title{font-size:14px;min-height:40px}
  .pm-card-price{font-size:17px}
  .pm-cats{grid-template-columns:repeat(2,1fr);gap:12px}
    .pm-welcome-links .pm-btn{width:100%}
  .pm-maintab{font-size:17px}
  .pm-scroll-cue{display:none}
}
@media(max-width:400px){
  .pm-grid{grid-template-columns:1fr 1fr;gap:10px}
  }
@media(prefers-reduced-motion:reduce){
  .pm-video-hero video{animation:none;transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   APPLE-GRADE REFINEMENTS — real homepage classes (2026-09-26)
   ============================================================ */
/* Cinematic hero: settle zoom, grander type, gold gradient accent */
.cb-cine-video{opacity:.72;transform:scale(1.06);animation:cineSettle 9s cubic-bezier(.16,.6,.24,1) forwards}
@keyframes cineSettle{to{transform:scale(1)}}
.cb-cine h1{font-size:clamp(46px,7vw,98px);font-weight:800;letter-spacing:-.045em;line-height:.98;text-transform:none;margin:26px 0 20px}
.cb-cine h1 em{font-style:normal;background:linear-gradient(100deg,#d9d9d9,#a6a6a6 55%,#555555);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-cine-eyebrow{font-size:11.5px;letter-spacing:.3em;color:#d9d9d9;background:rgba(166,166,166,.12);border:1px solid rgba(166,166,166,.4);padding:10px 20px}
.cb-cine-sub{font-size:clamp(16.5px,1.8vw,20px);color:rgba(255,255,255,.75);max-width:660px;line-height:1.65;letter-spacing:-.01em;margin:0 0 32px}
/* hero search: floating glass */
.cb-cine-search{background:rgba(255,255,255,.96);padding:8px;box-shadow:0 24px 70px rgba(64,64,64,.5),0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .4s cubic-bezier(.16,.6,.24,1),transform .4s cubic-bezier(.16,.6,.24,1)}
.cb-cine-search:focus-within{box-shadow:0 24px 70px rgba(64,64,64,.5),0 0 0 4px rgba(166,166,166,.35);transform:translateY(-2px)}
.cb-cine-search input{font-size:16px;padding:15px 24px}
.cb-cine-search button{background:#404040;color:#fff;padding:15px 40px;font-size:15.5px;transition:transform .3s cubic-bezier(.16,.6,.24,1),background .3s,box-shadow .3s}
.cb-cine-search button:hover{background:#a6a6a6;color:#404040;box-shadow:0 10px 30px rgba(166,166,166,.4);transform:scale(1.03)}
/* freq pills */
.cb-cine-freq a{border-radius:999px;padding:8px 16px;font-size:13.5px;transition:all .3s cubic-bezier(.16,.6,.24,1)}
.cb-cine-freq a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(166,166,166,.25)}
/* stats */
.cb-cine-stats b{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#c0c0c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-cine-stats span{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
/* quick links with arrow nudge */
.cb-cine-links a{position:relative;padding-bottom:3px}
.cb-cine-links a::after{content:'→';margin-left:4px;transition:margin .3s cubic-bezier(.16,.6,.24,1)}
.cb-cine-links a:hover::after{margin-left:11px}

/* Welcome strip: centered premium */
.cb-welcome{max-width:none;justify-content:center;text-align:center;padding:70px 24px 30px;flex-direction:column;gap:26px}
.cb-welcome-t{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.035em;color:#fff}
.cb-welcome-links{gap:14px}
.cb-welcome-links a{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:12px 28px;font-size:14.5px;color:#e3e3e3;transition:all .35s cubic-bezier(.16,.6,.24,1)}
.cb-welcome-links a:hover{border-color:rgba(166,166,166,.6);color:#d9d9d9;transform:translateY(-2px);box-shadow:0 12px 30px rgba(64,64,64,.4)}

/* Supplier rows: Apple motion */
.cb-sup-row{border-radius:24px;transition:transform .5s cubic-bezier(.16,.6,.24,1),box-shadow .5s,border-color .5s}
.cb-sup-row:hover{transform:translateY(-6px);border-color:rgba(166,166,166,.4);box-shadow:0 30px 70px rgba(64,64,64,.6)}
.cb-sup-name{font-size:21px}
.cb-car-slide img{transition:transform .9s cubic-bezier(.16,.6,.24,1)}
.cb-sup-row:hover .cb-car-slide.on img{transform:scale(1.06)}
.cb-btn-solid,.cb-btn-outline{transition:all .35s cubic-bezier(.16,.6,.24,1)}
.cb-btn-solid:hover{background:#d9d9d9;box-shadow:0 10px 28px rgba(166,166,166,.35)}

/* Section band heads */
.cb-band-head h1,.cb-band-head h2{text-transform:none;letter-spacing:-.035em;font-size:clamp(30px,4vw,50px)}
.cb-link-light{position:relative}
.cb-link-light::after{content:'';position:absolute;left:0;bottom:-3px;height:2px;width:0;background:#d9d9d9;transition:width .35s cubic-bezier(.16,.6,.24,1)}
.cb-link-light:hover::after{width:100%}

/* Big tabs responsive scroll (real class) */
.pm-maintabs{display:flex;justify-content:center;align-items:center;gap:4px;padding:20px 16px;flex-wrap:wrap}
@media(max-width:760px){.pm-maintabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.pm-maintabs::-webkit-scrollbar{display:none}}


/* ===== QA fixes: demo-box, filter pills, worldwide polish ===== */
.demo-box{background:#404040!important;border:1px dashed rgba(166,166,166,.45);border-radius:14px;padding:16px;color:#d1d1d1}
.demo-box strong{color:#d9d9d9}
.demo-box div{color:#a1a1a1}
/* products filter pills readable on black */
.pm-toolbar{background:transparent}
.pm-filter-pill{background:#404040;border:1px solid rgba(255,255,255,.14);color:#d1d1d1}
.pm-filter-pill:hover{border-color:rgba(166,166,166,.5);color:#fff}
.pm-filter-pill.on{background:#f0f0f0;color:#404040;border-color:#f0f0f0}
/* worldwide: ensure dark readability */
.ww-circle .ww-cname{color:#d1d1d1}
.ww-flag{background:#404040;border-color:rgba(255,255,255,.14)}

/* ===== QA fix: pm-chip dark readability (was white-on-white) ===== */
.pm-chip{background:#404040;border:1px solid rgba(255,255,255,.14);color:#d1d1d1}
.pm-chip:hover{border-color:rgba(166,166,166,.55);color:#fff;transform:translateY(-2px)}
.pm-chip.on{background:#f0f0f0;border-color:#f0f0f0;color:#404040;font-weight:700}

/* ===== New brand lockup: gold mark + refined wordmark ===== */
.pm-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.pm-logo-mark{height:46px;width:46px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(166,166,166,.35),0 6px 20px rgba(64,64,64,.5);transition:transform .4s cubic-bezier(.16,.6,.24,1),box-shadow .4s}
.pm-logo:hover .pm-logo-mark{transform:rotate(-8deg) scale(1.05);box-shadow:0 0 0 1px rgba(166,166,166,.6),0 8px 28px rgba(166,166,166,.25)}
/* footer brand uses the mark too */
.pm-foot-brand .pm-logo-mark{height:52px;width:52px}

/* ============================================================
   WHITE MINIMAL TRANSFORMATION — Muse-AI-grade premium (2026-09-26)
   Warm paper white, ink typography, deep-gold accents.
   Placed last: wins over every dark rule above.
   ============================================================ */
/* Astryx port (2026-11-10): live --pm-* vars are one-line aliases to
   astryx-tokens.css — single source of truth. Teal #0e7c74 is retired;
   accent is now #0064E0 (DESIGN.md §1). */
:root{
  --pm-ink:var(--color-text-primary); --pm-muted:var(--color-text-secondary); --pm-faint:var(--color-text-disabled);
  --pm-bg:var(--color-background-body); --pm-card:var(--color-background-surface); --pm-line:var(--color-border); --pm-line-soft:var(--color-border);
  --pm-accent:var(--color-accent); --pm-accent-deep:var(--ax-accent-deep); --pm-accent-soft:var(--color-accent-muted);
  --pm-accent-ghost:var(--color-accent-muted);
  --pm-dark:var(--color-text-primary); --pm-gold:var(--color-accent);
  --pm-shadow:var(--shadow-low);
  --pm-shadow-lg:var(--shadow-high);
  --pm-shadow-sm:var(--shadow-low);
  --pm-radius:var(--radius-container); --pm-radius-sm:var(--radius-element); --pm-radius-lg:var(--radius-page);
  --pm-ease:var(--ease-standard);
  --gold:var(--color-accent); --gold-soft:var(--color-accent-muted);
  --hair:var(--color-border); --card2:var(--color-background-card); --card3:var(--color-background-muted);
  --apple-ease:var(--ease-standard);
}
body{background:var(--color-background-body)!important;color:var(--color-text-primary)}
.pm-section,.container.page,main{color:var(--color-text-primary)}
::selection{background:var(--color-accent);color:var(--color-on-accent)}

.pm-logo{transition:transform .35s cubic-bezier(.16,.6,.24,1)}
.pm-logo:hover{transform:translateY(-1px)}

/* ---------- header: white glass ---------- */
.pm-catnav{background:rgba(250,249,247,.72)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid var(--hair)}
.pm-catnav-link,.pm-cats-btn{color:#404040}
.pm-catnav-link:hover,.pm-cats-btn:hover{color:#404040!important}
.pm-catnav-link::after,.pm-cats-btn::after{background:var(--gold)}
.pm-announce{background:linear-gradient(90deg,#404040,#404040 50%,#404040);color:#eaeaea}

/* ---------- big tabs: light segmented ---------- */
.pm-maintab{color:#6b6b6b}
.pm-maintab:hover{color:#404040;background:rgba(64,64,64,.05)}
.pm-maintab.on{color:#404040}
.pm-maintab.on::after{background:linear-gradient(90deg,#b8b8b8,#6e6e6e)}

/* ---------- cinematic WHITE hero ---------- */
.cb-cine{background:#f2f2f2;color:#161616}
.cb-cine-video{opacity:.9}
.cb-cine-shade{background:linear-gradient(180deg,rgba(250,249,247,.88) 0%,rgba(250,249,247,.35) 42%,rgba(250,249,247,.94) 100%)}
.cb-cine h1{color:#161616;text-shadow:none}
.cb-cine h1 em{background:linear-gradient(100deg,#8a8a8a,#6e6e6e 60%,#4d4d4d);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-cine-sub{color:#555555}
.cb-cine-eyebrow{color:#4d4d4d;background:rgba(110,110,110,.10);border:1px solid rgba(110,110,110,.4)}
.cb-cine-search{background:#fff;box-shadow:0 18px 50px rgba(64,64,64,.14);border:1px solid var(--hair)}
.cb-cine-search button{background:#6e6e6e}
.cb-cine-search button:hover{background:#4d4d4d;box-shadow:0 10px 28px rgba(110,110,110,.4)}
.cb-cine-freq .pm-freq-label{color:#595959}
.cb-cine-freq a{color:#404040;border:1px solid var(--hair);background:#fff}
.cb-cine-freq a:hover{border-color:#6e6e6e;color:#4d4d4d;box-shadow:0 8px 20px rgba(110,110,110,.18)}
.cb-cine-stats b{background:linear-gradient(180deg,#404040,#686868);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-cine-stats span{color:#a1a1a1}
.cb-cine-links a{color:#4d4d4d}
.cb-cine-links a:hover{color:#6e6e6e}

/* ---------- welcome strip: white ---------- */
.pm-welcome{background:#fafafa;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pm-welcome h2{color:#404040}
.pm-welcome p{color:#686868}
.cb-welcome-t{color:#404040}
.cb-welcome-links a{border:1px solid var(--hair);color:#404040;background:#fff}
.cb-welcome-links a:hover{border-color:rgba(110,110,110,.55);color:#4d4d4d;box-shadow:0 12px 30px rgba(64,64,64,.12)}

/* ---------- section heads ---------- */
.pm-sec-head h2{color:#404040!important}
.pm-sec-head p{color:#686868}
.cb-band{background:#fff;color:#404040;border:1px solid var(--hair);box-shadow:var(--pm-shadow)}
.cb-band-head p{color:#686868}
.cb-link-light{color:#4d4d4d}
.cb-link-light:hover{color:#6e6e6e}
.cb-link-light::after{background:#b8b8b8}
.cb-muted{color:#595959}

/* ---------- cards: gallery white ---------- */
.pm-card{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow)}
.pm-card:hover{box-shadow:0 30px 60px rgba(64,64,64,.14),0 0 0 1px rgba(110,110,110,.25);border-color:rgba(110,110,110,.35)}
.pm-card-title{color:#404040}
.pm-card:hover .pm-card-title{color:#444}
.pm-card-price{color:#404040}
.pm-card-price small,.pm-card-meta{color:#595959}
.pm-card .pm-verified{color:#6e6e6e}
.pm-cat{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow)}
.pm-cat:hover{box-shadow:0 24px 50px rgba(64,64,64,.13);border-color:rgba(110,110,110,.35)}
.pm-cat span{color:#404040}
.pm-supcard{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow)}
.pm-supcard:hover{box-shadow:0 28px 64px rgba(64,64,64,.14);border-color:rgba(110,110,110,.3)}

/* ---------- supplier rows: white ---------- */
.cb-sup-row{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow)}
.cb-sup-row:hover{border-color:rgba(110,110,110,.4);box-shadow:0 24px 54px rgba(64,64,64,.13)}
.cb-sup-name a{color:#404040}
.cb-sup-name a:hover{color:#4d4d4d}
.cb-sup-badges{color:#404040}
.cb-spec-type{color:#404040}
.cb-sup-loc{color:#595959}
.cb-btn-outline{border-color:rgba(64,64,64,.25);color:#404040}
.cb-btn-outline:hover{border-color:#6e6e6e;color:#4d4d4d}
.cb-btn-solid{background:#404040;color:#fff}
.cb-btn-solid:hover{background:#6e6e6e;box-shadow:0 10px 28px rgba(110,110,110,.35)}
.cb-sup-rating strong{color:#404040}
.cb-sup-caps li{color:#404040}
.cb-sup-caps li::before{color:#6e6e6e}
.cb-sup-more{color:#4d4d4d}
.cb-sup-more:hover{color:#6e6e6e}
.cb-sup-micro,.cb-sup-rcount{color:#595959}

/* ---------- buttons ---------- */
.pm-btn-dark{background:#404040!important;color:#fff!important}
.pm-btn-dark:hover{background:#444!important;box-shadow:0 14px 34px rgba(64,64,64,.25)}
.pm-btn-ghost{border-color:var(--hair);color:#404040}
.pm-btn-ghost:hover{background:rgba(64,64,64,.05)}
.pm-video-search{background:#fff;border:1px solid var(--hair);box-shadow:0 24px 60px rgba(64,64,64,.16)}
.pm-video-search input{color:#404040!important}
.pm-video-search input::placeholder{color:#a1a1a1}
.pm-video-search button{background:#404040;color:#fff}
.pm-video-search button:hover{box-shadow:0 8px 28px rgba(64,64,64,.28)}
.pm-video-hero{background:#f2f2f2}
.pm-video-hero::after{background:linear-gradient(180deg,rgba(250,249,247,.8),rgba(250,249,247,.3) 45%,rgba(250,249,247,.92))}
.pm-video-hero h1{color:#404040}
.pm-video-hero h1 .gold{background:linear-gradient(100deg,#b8b8b8,#6e6e6e 60%,#4d4d4d);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-video-hero .sub{color:#555555}
.pm-scroll-cue{color:#a1a1a1}

/* ---------- mega menu: white ---------- */
.pm-mega{background:rgba(255,255,255,.98)!important;border-top:1px solid var(--hair);box-shadow:0 40px 80px rgba(64,64,64,.16)}
.pm-mega-cat{color:#404040}
.pm-mega-cat:hover{background:rgba(64,64,64,.045)}
.pm-mega-cat.on{background:var(--pm-accent-soft);color:var(--pm-accent-deep)}
.pm-mega-tile{background:#fff;border-color:var(--hair)}
.pm-mega-tile:hover{box-shadow:0 18px 44px rgba(64,64,64,.13)}
.pm-mega-links a{color:#404040;border-bottom-color:var(--hair)}
.pm-mega-cats-cta{background:rgba(255,255,255,.96)}

/* ---------- forms ---------- */
.form-card{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow-lg)}
.form-card input,.form-card select,.form-card textarea{background:#fff;border:1px solid var(--hair);color:#404040}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:#6e6e6e;box-shadow:0 0 0 4px rgba(110,110,110,.14)}
.auth-card{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow-lg)}

/* ---------- tables ---------- */
.table{border-color:var(--hair)}
.table th{background:#f4f4f4;color:#686868}
.table td{color:#404040}
.table tbody tr:hover{background:rgba(110,110,110,.06)}

/* ---------- footer: ivory ---------- */
.pm-footer{background:#f4f4f4;border-top:1px solid var(--hair)}
.pm-footer h4{color:#404040}
.pm-footer a{color:#686868}
.pm-footer a:hover{color:#404040}
.pm-foot-brand p{color:#686868}
.pm-footer .pm-fine{color:#a1a1a1}

/* ---------- marquee / misc ---------- */
.pm-marquee{background:#fff}
.pm-marquee-track span{color:#a1a1a1}
.pm-step{background:#fff;border-color:var(--hair);box-shadow:var(--pm-shadow)}
.pm-step .n{color:#6e6e6e}
.pm-step p{color:#686868}
.pm-protect{background:linear-gradient(135deg,#f6f6f6,#eaeaea);border:1px solid var(--hair)}

/* ---------- pills, chips, filters ---------- */
.pm-chip{background:#fff;border:1px solid var(--hair);color:#404040}
.pm-chip:hover{border-color:rgba(110,110,110,.55);color:#404040}
.pm-chip.on{background:#404040;border-color:#404040;color:#fff}
.pm-filter-pill{background:#fff;border:1px solid var(--hair);color:#404040}
.pm-filter-pill:hover{border-color:rgba(110,110,110,.5);color:#404040}
.pm-filter-pill.on{background:#404040;color:#fff;border-color:#404040}
.demo-box{background:#fffdf6!important;border:1px dashed rgba(110,110,110,.5);color:#555555}
.demo-box strong{color:#4d4d4d}
.demo-box div{color:#686868}
.ww-circle .ww-cname{color:#404040}
.ww-flag{background:#fff;border-color:var(--hair)}

/* ---------- mobile drawer: white ---------- */
.pm-burger{border-color:var(--hair);background:#fff}
.pm-burger span{background:#404040}
.pm-mobile-drawer{background:rgba(250,249,247,.98)}
.pm-mobile-drawer a{color:#404040}
.pm-mobile-drawer a:hover{color:#4d4d4d}
.pm-mobile-drawer .pm-drawer-close{border-color:var(--hair);color:#404040;background:#fff}

/* ---------- search tabs / inputs on white ---------- */
.pm-stab{color:#a1a1a1}
.pm-stab:hover,.pm-stab.on{color:#404040}
.pm-stab.on::after{background:#6e6e6e}
.pm-stab-ai{color:#4d4d4d}
.pm-search-input{background:#fff!important;border:1px solid var(--hair)!important;color:#404040!important}
.pm-lang{border-color:var(--hair);color:#404040;background:#fff}

/* ============================================================
   RESPONSIVENESS BOOST — more breakpoints, no overflow (2026-09-26)
   ============================================================ */
html,body{overflow-x:clip}
img,video,svg{max-width:100%}
.pm-catnav-inner, .pm-section{max-width:1280px}
/* large tablet */
@media(max-width:1180px){
  .pm-grid{grid-template-columns:repeat(3,1fr)}
  .pm-cats{grid-template-columns:repeat(3,1fr)}
  .pm-mega-tiles{grid-template-columns:repeat(3,1fr)}
}
/* small tablet */
@media(max-width:860px){
  .pm-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .pm-cats{grid-template-columns:repeat(2,1fr);gap:14px}
  .pm-sec-head h2{font-size:clamp(26px,5vw,38px)!important}
  .cb-cine-stats{gap:28px}
  .cb-cine-inner{padding:96px 20px 60px}
  .pm-footer{padding:64px 20px 32px}
  .pm-foot-grid{grid-template-columns:repeat(2,1fr)!important;gap:28px}
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pm-welcome-links{gap:10px}
}
/* phone */
@media(max-width:640px){
    .pm-announce{font-size:10px}
  .cb-cine h1{font-size:clamp(34px,9.5vw,52px)}
  .cb-cine-search{flex-direction:column;border-radius:20px;padding:8px;gap:8px}
  .cb-cine-search input{width:100%;text-align:center}
  .cb-cine-search button{width:100%;padding:14px}
  .cb-cine-freq{justify-content:center}
  .pm-card-body{padding:14px}
  .pm-foot-grid{grid-template-columns:1fr!important}
  .pm-maintabs{padding:14px 10px}
  .pm-maintab{font-size:16px;padding:9px 16px}
  .form-card{padding:24px 16px!important;border-radius:20px}
  .auth-card{border-radius:20px;margin:16px}
  .pm-btn,.pm-btn-dark,.pm-btn-accent,.pm-btn-ghost{min-height:44px}
  .cb-sup-row{padding:16px;gap:18px}
  .pm-mega-inner{padding:20px 14px}
  .pm-mega-cats-right{min-height:200px}
}
/* small phone */
@media(max-width:400px){
  .pm-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pm-card-title{font-size:13px}
  .pm-card-price{font-size:16px}
  .cb-cine-stats{gap:18px}
  .pm-maintab{font-size:14.5px;padding:8px 13px}
}

/* ============================================================
   WHITE CLEANUP — kill remaining dark leftovers (2026-09-26)
   QA found: dark inputs, dark RFQ panel, dark select, dark
   empty-states, invisible links, orange buttons, faint footer.
   ============================================================ */
/* 1. Form inputs: light everywhere */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=tel],input[type=search],select,textarea{
  background:#fff!important;color:#404040!important;border-color:#8a8a8a!important;color-scheme:light!important}
input::placeholder,textarea::placeholder{color:#6b6b6b!important}
.cb-cine-search input{color:#404040!important}
.pm-video-search input{color:#404040!important}
.pm-video-search input::placeholder{color:#6b6b6b!important}
input:focus,select:focus,textarea:focus{border-color:#6e6e6e!important;box-shadow:0 0 0 3px rgba(110,110,110,.14)!important;outline:none}

/* 2. Global links visible on white */
a{color:#4d4d4d}
a:hover{color:#6e6e6e}

/* 3. RFQ panel: white */
.pm-rfq-inner{background:#fff!important;box-shadow:var(--pm-shadow)}
.pm-rfq-inner h3{color:#404040}
.pm-rfq-inner p{color:#686868}

/* 4. Empty states: white */
.empty-box{background:#fff!important;color:#686868;border:1px dashed var(--hair)}
.empty{background:#fff;color:#686868;border:1px dashed var(--hair);border-radius:16px;padding:32px;text-align:center}
.empty a{color:#4d4d4d;font-weight:600}

/* 5. Toolbar select: white */
.pm-toolbar select{background:#fff!important;color:#404040!important}

/* 6. Supplier media box: light */
.cb-sup-carousel{background:#eaeaea!important}

/* 7. Login: visible switch link, gold button */
.auth-switch{color:#686868}
.auth-switch a{color:#4d4d4d;font-weight:700}
.auth-switch a:hover{color:#6e6e6e}
.btn-primary,.btn.btn-primary{background:linear-gradient(135deg,#b8b8b8,#6e6e6e 70%,#4d4d4d)!important;border-color:#6e6e6e!important;color:#fff!important;box-shadow:0 10px 26px rgba(110,110,110,.32)}
.btn-primary:hover,.btn.btn-primary:hover{background:linear-gradient(135deg,#878787,#606060)!important;box-shadow:0 14px 32px rgba(110,110,110,.4)}

/* 8. Brand accent buttons: gold, not orange */
.pm-btn-accent{background:linear-gradient(135deg,#b8b8b8,#6e6e6e 70%,#4d4d4d);color:#fff;border:1px solid transparent;box-shadow:0 10px 26px rgba(110,110,110,.3)}
.pm-btn-accent:hover{background:linear-gradient(135deg,#878787,#606060);color:#fff;box-shadow:0 14px 34px rgba(110,110,110,.42)}

/* 9. Announcement bar: white minimal */
.pm-announce{background:#fff!important;color:#404040!important;border-bottom:1px solid var(--hair)}
.pm-announce b,.pm-announce strong{color:#4d4d4d}

/* 10. Footer links: readable */
.pm-footer a{color:#404040}
.pm-footer a:hover{color:#404040}
.pm-foot-bottom a{color:#686868!important}

/* 11. Product card CTA + misc dark leftovers */
.pm-card .pm-btn,.pm-card .btn{background:#404040;color:#fff}
.pm-card .btn:hover{background:#6e6e6e;color:#fff}
.cb-cine-links a{color:#4d4d4d;font-weight:600}

/* FINAL accent consistency (2026-09-26) */
.mfr-search-btn{background:linear-gradient(135deg,#b8b8b8,#6e6e6e 70%,#4d4d4d)!important;box-shadow:0 10px 24px rgba(110,110,110,.35)}
.mfr-search-btn:hover{box-shadow:0 14px 32px rgba(110,110,110,.45)}
.pm-footer a.f{color:#404040}
.pm-footer a.f:hover{color:#404040}

/* Rich search box: gold accents for white theme (2026-09-27) */
.mfr-search-box{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#dcdcdc,#6e6e6e) border-box!important;box-shadow:0 18px 44px rgba(110,110,110,.13)}
.mfr-search-sub button{color:#404040;background:#fff}
.mfr-search-sub button:hover{color:#4d4d4d}
.mfr-sub-sep{color:#d0d0d0}
/* Manufacturers hero: single headline spacing (tabs + page search removed) */
.mfr-hero2{padding:56px 24px 20px}
.mfr-connect{margin:0 0 18px}

/* ---- Real flag images on Worldwide page (emoji flags don't render on Windows) ---- */
.ww-flag{position:relative;overflow:hidden}
.ww-flag-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ww-corr-flag{width:54px;height:38px;flex:none;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 2px 8px rgba(64,64,64,.12);font-size:34px;line-height:1;display:grid;place-items:center;background:#fff}
.ww-corr-flag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ww-grow-chip{background:#fff;border:1px solid var(--pm-line);border-radius:999px;padding:8px 16px;font-size:13px;color:var(--pm-ink);display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(64,64,64,.05)}
.ww-grow-chip img{width:22px;height:16px;object-fit:cover;border-radius:4px}

/* ============================================================
   2026-09-27 — Maan feedback: AI Mode tab on landing + ink buttons
   ============================================================ */
/* Landing shows the tab row once, in the hero (not twice via header) */
.is-home .pm-maintabs{display:none}

/* Prominent hero tabs on the landing page */
.cb-htags{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,34px);margin:4px 0 24px;flex-wrap:wrap}
.cb-htag{position:relative;background:none;border:0;font-family:inherit;font-size:clamp(21px,2.6vw,30px);font-weight:800;letter-spacing:-.015em;color:var(--pm-ink);cursor:pointer;text-decoration:none;padding:0px;line-height:1.3;transition:color .18s ease,transform .18s ease;white-space:nowrap}
.cb-htag:hover{color:#4d4d4d;transform:translateY(-1px)}
.cb-htag.on{color:var(--pm-ink)}
.cb-htag.on::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:4px;border-radius:4px;background:linear-gradient(90deg,#b8b8b8,#6e6e6e)}
.cb-htag-sep{width:1px;height:26px;background:var(--pm-line);flex:none}
.cb-htag-spark{display:inline-block;margin-right:8px;font-size:.82em;line-height:1;background:linear-gradient(135deg,#c6c6c6,#6e6e6e 60%,#4d4d4d);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:640px){.cb-htags{gap:16px;margin-bottom:18px}.cb-htag{font-size:19px}}

/* Ink-black buttons replace gold gradients (premium minimal) */
.btn-primary,.btn.btn-primary{background:#161616!important;border-color:#161616!important;color:#fff!important;box-shadow:0 10px 26px rgba(22,22,22,.28)}
.btn-primary:hover,.btn.btn-primary:hover{background:#2e2e2e!important;border-color:#2e2e2e!important;box-shadow:0 14px 32px rgba(22,22,22,.36)}
.pm-btn-accent{background:#404040;color:#fff;border:1px solid transparent;box-shadow:0 10px 26px rgba(64,64,64,.28)}
.pm-btn-accent:hover{background:#444;color:#fff;box-shadow:0 14px 34px rgba(64,64,64,.36)}
.mfr-search-btn{background:#404040!important;box-shadow:0 10px 24px rgba(64,64,64,.28)}
.mfr-search-btn:hover{box-shadow:0 14px 32px rgba(64,64,64,.36);filter:none}
.pm-card .btn:hover{background:#444}

/* ============================================================
   2026-09-27 — Maan: whole website white + grey only.
   Flip every remaining dark section to light; monochrome text.
   ============================================================ */

/* ---- Footer: light grey ---- */
.pm-footer{background:#fff!important;color:#6b6b6b;border-top:1px solid #ececea}
.pm-footer h4{color:#404040}
.pm-footer a{color:#6e6e6e}
.pm-footer a:hover{color:#404040}
.pm-foot-bottom{border-top:1px solid #e0e0e0;color:#8a8a8a}

/* ---- Mobile drawer: light ---- */
.pm-mobile-drawer{background:rgba(255,255,255,.98)}
.pm-mobile-drawer a{color:#404040}
.pm-mobile-drawer a:hover{color:#6e6e6e}
.pm-mobile-drawer .pm-drawer-close{color:#404040;border-color:#d4d4d4}
.pm-burger span{background:#6e6e6e}

/* ---- Homepage supplier band: light ---- */
.cb-band{background:#f4f4f4!important;color:#404040}
.cb-band-head h1,.cb-band-head h2{color:#404040}
.cb-band-head p{color:#6e6e6e}
.cb-link-light{color:#6b6b6b}
.cb-link-light:hover{color:#404040}
.cb-sup-row{background:#fff!important;border:1px solid #e2e2e2!important;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.cb-sup-row:hover{border-color:#c9c9c9!important;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.cb-sup-name a{color:#404040}
.cb-sup-name a:hover{color:#6e6e6e}
.cb-sup-badges{color:#6e6e6e}
.cb-badge-ver{background:#e8e8e8!important;color:#404040!important}
.cb-muted{color:#8a8a8a}
.cb-sup-logo{background:#e8e8e8!important;color:#404040!important}
.cb-carousel-btn{background:rgba(255,255,255,.9);color:#404040;border:1px solid #e2e2e2}
.cb-cap-dot{background:#c9c9c9}
.cb-cap-dot.on{background:#0064E0}
.cb-cap-item{color:#6e6e6e}

/* ---- Worldwide corridors band: light ---- */
.ww-corr{background:#f4f4f4!important;color:#404040}
.ww-corr h2{color:#404040}
.ww-corr .muted{color:#6e6e6e}
.ww-eyebrow{color:#8a8a8a!important}
.ww-corr-card{background:#fff!important;border:1px solid #e2e2e2!important}
.ww-corr-card:hover{border-color:#c9c9c9!important;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.ww-corr-rank{color:#767676}
.ww-corr-body b{color:#404040}
.ww-corr-goods{color:#6e6e6e}
.ww-corr-goods em{color:#404040}
.ww-corr-arrow{color:#8a8a8a}
.ww-grow-chip{background:#fff!important;border:1px solid #e2e2e2!important;color:#404040!important}
.ww-growing{color:#6e6e6e}
.ww-growing b{color:#404040}

/* ---- Supplier store hero: light ---- */
.store-hero{background:linear-gradient(180deg,#f7f7f7,#e9e9e9)!important;color:#404040}
.store-hero-video{display:none}
.store-hero-shade{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(244,244,244,.4) 60%,rgba(244,244,244,.92) 100%)!important}
.store-hero-name{color:#404040;text-shadow:none}
.store-hero-meta{color:#6e6e6e}
.store-hero-rating .stars{color:#8a8a8a}
.store-hero-satisfied{color:#5a5a5a}
.store-hero-reviews{color:#8a8a8a}
.store-dark{background:#f4f4f4!important;color:#404040}
.store-stats-band>div{background:#fff!important;border:1px solid #e2e2e2!important;color:#404040}
.store-facts>div{background:#fff!important;border:1px solid #e2e2e2!important;color:#404040}
.empty-dark{background:#fff!important;border:1px dashed #c9c9c9!important;color:#6e6e6e}
.store-product-grid .pm-card{background:#fff!important;border-color:#e2e2e2!important}
.store-product-grid .pm-card-title{color:#404040!important}
.store-product-grid .pm-card:hover .pm-card-title{color:#404040!important}
.store-product-grid .pm-card-price{color:#404040!important}
.store-product-grid .pm-card-meta{color:#8a8a8a!important}

/* ---- RFQ hero: light ---- */
.rfq-hero{background:linear-gradient(120deg,#f7f7f7 0%,#efefef 55%,#e7e7e7 100%)!important;color:#404040}
.rfq-hero h1{color:#404040}
.rfq-hero-sub{color:#6e6e6e!important}
.rfq-badge{background:#dcdcdc!important;color:#404040!important}
.rfq-learn{color:#404040}
.rfq-learn:hover{color:#6e6e6e}
.rfq-count-pill{border:1px solid #c9c9c9;color:#404040}
.rfq-count-pill:hover{background:#ececec}

/* ---- AI tooltip + chat dark bits: light ---- */
.pm-ai-tip{background:#fff!important;color:#404040;border:1px solid #e2e2e2}
.pm-ai-tip::before{background:#fff!important;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2}
.ai2-new{background:#0064E0!important;color:#fff;border-color:#0064E0!important}
.ai2-send{background:#0064E0!important;color:#fff}
.ai2-chip{background:#f0f0f0!important;color:#404040;border:1px solid #e2e2e2}
.pm-visual-banner{background:#f0f0f0!important}
.sell-done-stats div{background:#f0f0f0!important}

/* ---- Misc dark leftovers: light ---- */
.pm-video-hero{background:#f4f4f4!important;color:#404040}
.pm-video-hero h1{color:#404040}
.pm-video-hero .sub{color:#6e6e6e!important}
.site-footer{background:#fff!important;color:#6b6b6b}
.img-panel-tabs button.on{background:#0064E0!important;border-color:#0064E0!important;color:#fff}
.pm-btn-dark{background:#161616!important;color:#fff;border-color:#161616!important}
.pm-btn-dark:hover{background:#2e2e2e!important;color:#fff}
.ww-dot{background:#8a8a8a!important;border-color:#fff}
.sell-done-check{background:#0064E0!important}
.wiz-dot.done span{border-color:#0064E0!important;background:#0064E0!important}
.wiz-bar.done{background:#0064E0!important}
.track-step.done{color:#0064E0!important}
.track-step.done::before{background:#0064E0!important}
.badge-verified{background:rgba(0,100,224,.08)!important;color:#0064E0!important;border-color:rgba(0,100,224,.22)!important}
.badge-shield{background:#ececec!important;color:#5a5a5a!important;border-color:#d4d4d4!important}
.review-verified{color:#5a5a5a!important}
.btn-danger{color:#5a5a5a!important;border-color:#d4d4d4!important}
.btn-danger:hover{background:#ececec!important;border-color:#8a8a8a!important;color:#404040!important}
.pm-stars{color:#595959!important}
.store-hero-rating .stars{color:#8a8a8a}

/* ---- Global monochrome text/buttons ---- */
.btn-primary, .btn.btn-primary, .pm-btn-accent, .mfr-search-btn{background:#161616!important;border-color:#161616!important;color:#fff!important;box-shadow:0 8px 20px rgba(22,22,22,.18)}
.btn-primary:hover, .btn.btn-primary:hover, .pm-btn-accent:hover, .mfr-search-btn:hover{background:#2e2e2e!important;border-color:#2e2e2e!important;color:#fff!important;box-shadow:0 12px 28px rgba(22,22,22,.24)}
::selection{background:#c9c9c9;color:#404040}
.store-facts dd{color:#404040!important}
.store-facts dt{color:#8a8a8a!important}
.store-stats-band>div b,.store-stats-band>div strong{color:#404040!important}
.store-stats-band>div span{color:#6e6e6e!important}

/* ---- Sell page hero + CTA: light ---- */
.sell-hero{background:linear-gradient(135deg,#f7f7f7 0%,#efefef 55%,#e7e7e7 100%)!important;color:#404040}
.sell-hero::before{background:radial-gradient(600px 300px at 80% 20%,rgba(150,150,150,.18),transparent 60%)}
.sell-hero-copy h1{color:#404040}
.sell-hero-copy .lead,.sell-hero-copy p{color:#6e6e6e}
.sell-eyebrow{color:#6e6e6e!important;border-color:#c9c9c9!important}
.sell-hero-card{background:#fff!important;border:1px solid #e2e2e2!important;color:#404040}
.sell-steps p{color:#6e6e6e!important}
.sell-final-cta{background:linear-gradient(135deg,#f4f4f4,#e9e9e9)!important;color:#404040}
.sell-final-cta h2{color:#404040}
.sell-final-cta p{color:#6e6e6e!important}

/* ---- Store hero ghost CTA: visible on light ---- */
.store-cta-ghost{color:#404040!important;border-color:#b8b8b8!important;background:rgba(255,255,255,.5)}
.store-cta-ghost:hover{border-color:#6e6e6e!important;background:#fff!important}

/* ---- RFQ customer cards: light ---- */
.rfq-cust{background:#fff!important;border:1px solid #e2e2e2!important;color:#404040!important}
.rfq-cust:hover{border-color:#b8b8b8!important;background:#f7f7f7!important}
.rfq-cust small,.rfq-cust .muted{color:#6e6e6e!important}

/* ---- Supplier card outline buttons: visible on light band ---- */
/* Scoped to .cb-sup-actions (was global + !important, which leaked onto
   the dark cookie banner's Decline button and made it dark-on-dark). */
.cb-sup-actions .cb-btn-outline{border-color:#b8b8b8;color:#404040}
.cb-sup-actions .cb-btn-outline:hover{border-color:#6e6e6e;color:#404040;background:#fff}
.pm-catnav-link:hover,.pm-cats-btn:hover{color:#404040!important}
.pm-cat span{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* ---- Recommended for your business: Alibaba-style ruled divider ---- */
.rec-divider{display:flex;align-items:center;gap:16px;margin:6px 0 4px}
.rec-divider::before,.rec-divider::after{content:"";flex:1;height:1px;background:#d9d9d9}
.rec-divider span{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.015em;color:#404040;white-space:nowrap}
.rec-sub{text-align:center;color:#6e6e6e;font-size:14.5px;margin:0 0 22px}
/* ---- Regional picks: light lanes with horizontal product strips ---- */
.region-wrap{background:#f4f4f4;border-radius:24px;padding:32px clamp(16px,3vw,40px)!important;margin-top:10px}
.region-lane{margin-top:22px}
.region-lane:first-of-type{margin-top:6px}
.region-lane-head{margin-bottom:12px}
.region-pill{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#404040;background:#fff;border:1px solid #d9d9d9;border-radius:999px;padding:7px 18px}
.region-strip{display:flex;gap:16px;overflow-x:auto;padding:4px 0px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.region-strip::-webkit-scrollbar{height:8px}
.region-strip::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:8px}
.region-strip .pm-card{flex:0 0 230px;scroll-snap-align:start}
@media(max-width:640px){
  .region-strip .pm-card{flex-basis:180px}
  .rec-divider span{white-space:normal;text-align:center}
}

/* QA fix 2026-09-27: flip remaining dark surfaces to light (white/grey only) */
.pm-tiers{background:#fff!important}
.pm-order,.rfq-composer,.rfq-details,.sell-feat,.sell-opt,.draft-card,.img-panel,
.ai2-auto-menu,.sell-done-stats div{background:#fff!important}
.ai2-promptbox{background:#fff!important}
.ai2-promptbox textarea{color:#404040!important}
.tprot-ctas .btn:not(.btn-primary){background:#fff;color:#404040}

/* Alibaba-style listing filter bar */
.pm-filterbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;background:#fff;border:1px solid var(--hair);border-radius:14px;padding:12px 16px;margin:12px 0;box-shadow:var(--pm-shadow)}
.pm-fb-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#686868;font-weight:600}
.pm-fb-field>span:first-child{text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.pm-fb-range{display:flex;align-items:center;gap:6px}
.pm-fb-range em{font-style:normal;color:#a1a1a1}
.pm-fb-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#404040;font-weight:600;cursor:pointer;white-space:nowrap}
.pm-fb-check input[type=checkbox]{width:17px;height:17px;accent-color:#0064E0;cursor:pointer}
.pm-filterbar input[type=number],.pm-filterbar select{border:1px solid var(--hair);border-radius:10px;padding:8px 8px;font:inherit;font-size:13.5px;color:#404040;background:#fafafa;min-width:0}
.pm-filterbar input[type=number]{width:104px}
.pm-filterbar select{max-width:190px}
.pm-filterbar input:focus,.pm-filterbar select:focus{outline:2px solid #c9c9c9;border-color:#a1a1a1;background:#fff}

/* RFQ popular requests (Alibaba-style) */
.rfq-popular{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 26px}
.rfq-pop-card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--pm-shadow)}
.rfq-pop-card b{font-size:14.5px;color:#404040}
.rfq-pop-card span{font-size:12.5px;color:#8a8a8a}
.rfq-pop-card .pm-btn{align-self:flex-start;margin-top:6px}
@media(max-width:900px){.rfq-popular{grid-template-columns:repeat(2,1fr)}}

/* Instant-quote product cards (Alibaba gap #4, 2026-10-04) */
.rfq-iq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 26px}
.rfq-iq-card{background:#fff;border:1px solid var(--hair);border-radius:14px;overflow:hidden;box-shadow:var(--pm-shadow);display:flex;flex-direction:column}
.rfq-iq-img{display:block;aspect-ratio:16/9;background:#f4f4f2;overflow:hidden}
.rfq-iq-img img{width:100%;height:100%;object-fit:cover;display:block}
.rfq-iq-body{padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.rfq-iq-name{font-size:14.5px;font-weight:600;color:#404040;text-decoration:none}
.rfq-iq-name:hover{text-decoration:underline}
.rfq-iq-sup{font-size:12.5px;color:#8a8a8a}
.rfq-iq-body .pm-btn{align-self:flex-start;margin-top:4px}
@media(max-width:900px){.rfq-iq-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rfq-iq-grid{grid-template-columns:1fr}}

/* Inspection page steps */
.how-section{max-width:860px;margin:8px auto 30px;padding:0 20px}
.how-section h2{font-size:21px;color:#404040;margin:0 0 16px}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.how-steps li{background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px 16px;color:#5a5a5a;font-size:14.5px;box-shadow:var(--pm-shadow)}
.how-steps{counter-reset:step}
.how-steps li{counter-increment:step;position:relative;padding-left:58px}
.how-steps li::before{content:counter(step);position:absolute;left:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#5a5a5a;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Product detail: shipping estimator + sample */
.pm-shipest{background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px;margin-top:12px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.pm-shipest b{color:#404040;font-size:13px}
.pm-shipest select{border:1px solid var(--hair);border-radius:10px;padding:8px 8px;font:inherit;font-size:13.5px;color:#404040;background:#fafafa}
.pm-ship-result{font-size:13.5px;color:#404040;background:#f4f4f4;border-radius:8px;padding:8px 12px}
.pm-share{cursor:pointer}

/* Dead-selector safety: keep any legacy dark banners light */
.store-banner{background:linear-gradient(115deg,#f4f4f4,#e9e9e9)!important;color:#404040!important}
.topbar{background:#f4f4f4!important;color:#6e6e6e!important}

.badge-sample{display:inline-block;background:#eeeeee;border:1px solid #d2d2d2;color:#404040;font-size:11.5px;font-weight:700;border-radius:20px;padding:0px 8px;white-space:nowrap}

/* Header search suggestions */
.pm-search{position:relative}
.pm-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:0 18px 40px rgba(64,64,64,.14);overflow:hidden;z-index:120;text-align:left}
.pm-sug-row{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:0;font:inherit;font-size:14px;color:#404040;cursor:pointer}
.pm-sug-row:hover,.pm-sug-row.on{background:#f4f4f4}
.pm-sug-recent{color:#6e6e6e}

.rfq-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.rfq-row2{grid-template-columns:1fr}}

/* Freight calculator */
.freight-calc{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:28px;margin:32px auto;max-width:900px}
.freight-calc h2{margin:0 0 4px;font-size:22px;color:#404040}
.freight-form{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:16px 0;align-items:end}
.freight-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:#404040}
.freight-form select,.freight-form input{border:1px solid var(--hair);border-radius:10px;padding:8px 8px;font:inherit;font-size:14px;color:#404040;background:#fafafa}
.freight-result{font-size:16px;color:#404040;background:#f4f4f4;border-radius:10px;padding:12px 16px;margin-bottom:10px}
@media(max-width:860px){.freight-form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.freight-form{grid-template-columns:1fr}}

.review-sort select{border:1px solid var(--hair);border-radius:8px;padding:4px 8px;font:inherit;font-size:13px;color:#404040;background:#fff}

/* Header mini switchers (currency + ship-to) and unread badge */
.hdr-mini-form{display:inline-block;margin:0}
.hdr-mini-select{background:#fff;border:1px solid #8a8a8a;border-radius:999px;padding:8px 8px;font-size:13px;font-weight:600;color:#404040;cursor:pointer;font-family:inherit;max-width:104px}
/* PREVIEW-ONLY INR SWITCH — remove at launch. Segmented ₹ / $ pill in the
   header, same height as the mini-selects beside it; active side is the
   Astryx accent, matching the site's primary buttons. */
.hdr-inr-switch{display:inline-flex;margin:0 0 0 6px;border:1px solid #8a8a8a;border-radius:999px;overflow:hidden;background:#fff}
.hdr-inr-btn{border:0;background:transparent;padding:0 10px;height:30px;font-size:14px;font-weight:700;color:#404040;cursor:pointer;font-family:inherit}
.hdr-inr-btn.is-active{background:#0064E0;color:#fff}
.hdr-currency-select{max-width:132px;text-overflow:ellipsis}
.hdr-shipto{max-width:128px}
.pm-unread{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:#404040;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:0 4px;margin-left:4px;vertical-align:1px}

/* Product card quick-add + toast (Alibaba gap #6, 2026-10-04) */
.pm-card{position:relative}
.pm-card-quickadd{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;background:#161616;color:#fff;border:1px solid #161616;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:2;padding:0}
.pm-card-quickadd:hover{background:#000}
.pm-card-quickadd:disabled{opacity:.5;cursor:default}
.pm-card-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#161616;color:#fff;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .25s,transform .25s;z-index:9999;pointer-events:none}
.pm-card-toast.show{opacity:1;transform:translate(-50%,0)}
.pm-card-badge{position:absolute;top:10px;left:10px;background:#404040;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.pm-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px 12px 12px;border-top:1px solid #eeeeee}
.pm-act-inq{grid-column:1/-1}
.pm-card-link{display:flex;align-items:center;justify-content:center;min-width:0;text-align:center;font-size:12px;font-weight:600;color:#404040;text-decoration:none;border:1px solid #e2e2e2;border-radius:999px;padding:8px 4px;transition:all .15s;cursor:pointer;background:#fff;font-family:inherit;appearance:none;-webkit-appearance:none}
.pm-card-link>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-card-link:hover{border-color:#404040;background:#f4f4f4}
.pm-card-link.on{background:#161616;color:#fff;border-color:#161616}
.pm-card-link.on:hover{background:#000;color:#fff;border-color:#000}
.pm-act-inq{background:#161616;color:#fff;border-color:#161616}
.pm-act-inq:hover{background:#000;color:#fff;border-color:#000}
@media(max-width:700px){
.pm-card-actions{grid-template-columns:1fr;padding:10px 14px 14px}
.pm-act-inq{grid-area:auto}
.pm-act-sim{grid-area:auto}
.pm-act-cmp{grid-area:auto}
.pm-card-link{font-size:12.5px;padding:11px 8px;white-space:normal}
}

/* Product detail: promo ladder, chips, transactions */
.pm-promos{margin:14px 0 4px}
.pm-promos-t{font-size:13px;font-weight:700}
.pm-promos-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pm-promo{font-size:12.5px;font-weight:600;background:#f1f1f1;border:1px solid #e2e2e2;border-radius:8px;padding:4px 8px;color:#404040}
.pm-chiplet{display:inline-block;font-size:12px;font-weight:600;background:#f4f4f4;border:1px solid #e4e4e4;border-radius:999px;padding:4px 8px;margin:0px 4px 0px 0;color:#404040}
.pm-txn-table-wrap{overflow-x:auto;border:1px solid #e8e8e8;border-radius:12px}
.pm-txn-table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.pm-txn-table th,.pm-txn-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #f0f0f0}
.pm-txn-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#777;background:#fafafa}
.pm-txn-table tr:last-child td{border-bottom:none}

/* Storefront: trade profile + in-store search */
.store-search{display:flex;gap:8px;align-items:center}
.store-search input[type=search]{background:#fff;border:1px solid #dcdcdc;border-radius:999px;padding:8px 16px;font-size:13.5px;min-width:220px;color:#404040}
.pm-checks{border:1px solid #e4e4e4;border-radius:10px;padding:8px 12px;margin:10px 0}
.pm-checks legend{font-size:13px;font-weight:700;padding:0 6px}
.pm-check{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;margin:4px 12px 4px 0;font-weight:400}

/* RFQ quote comparison */
.rfq-compare .rfq-best{background:#f7f7f7}
.rfq-best-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#404040;color:#fff;border-radius:999px;padding:4px 8px;margin-left:6px}
.rfq-target{font-size:12.5px;font-weight:700;white-space:nowrap}
.rfq-target.under{color:#555}
.rfq-target.over{color:#767676}

/* Reviews: dimension ratings */
.review-dims{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.review-dim{font-size:12.5px;color:#555;background:#f4f4f4;border:1px solid #e4e4e4;border-radius:999px;padding:4px 11px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:640px){.form-row-3{grid-template-columns:1fr}}

/* Trade Protection: stats band */
.tprot-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 12px}
.tprot-stat{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:16px;text-align:center}
.tprot-stat strong{display:block;font-size:26px;font-weight:800;letter-spacing:-.01em}
.tprot-stat span{font-size:12.5px;color:#777}
@media (max-width:760px){.tprot-stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   TWODOCK PREMIUM IDENTITY
   Refined light theme: soft white, near-black ink, one teal accent.
   Layout/structure untouched — visual language only.
   ============================================================ */

/* Typography refinement */
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.pm-hero h1,.section-title{letter-spacing:-.022em;font-weight:700;color:#161616}
p,.pm-hero p,.pm-sub{color:#4a4a4a;line-height:1.65}

/* Elegant primary buttons — the accent, used sparingly */
.pm-btn-accent{background:#0064E0;color:#fff;border:1px solid #0064E0;border-radius:12px;font-weight:600;letter-spacing:-.01em;transition:background .22s var(--pm-ease),transform .22s var(--pm-ease),box-shadow .22s var(--pm-ease)}
.pm-btn-accent:hover{background:#0053b3;border-color:#0053b3;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,100,224,.22)}
.pm-btn-accent:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,100,224,.18)}

/* Refined secondary buttons */
.pm-btn,.btn{background:#fff;border:1px solid #e4e4e3;color:#161616;border-radius:12px;font-weight:600;transition:border-color .2s var(--pm-ease),background .2s var(--pm-ease),transform .2s var(--pm-ease),box-shadow .2s var(--pm-ease)}
.pm-btn:hover,.btn:hover{border-color:#d4d4d2;background:#fafaf9;transform:translateY(-1px);box-shadow:var(--pm-shadow-sm)}

/* Cards: lightweight, soft depth */
.pm-card,.card{background:#fff;border:1px solid #ececea;border-radius:var(--pm-radius);box-shadow:var(--pm-shadow-sm);transition:box-shadow .25s var(--pm-ease),transform .25s var(--pm-ease),border-color .25s var(--pm-ease)}
.pm-card:hover,.card:hover{box-shadow:var(--pm-shadow);border-color:#e2e2e0}

/* Product cards: gentle lift */
.pm-pcard{background:#fff;border:1px solid #ececea;border-radius:var(--pm-radius);overflow:hidden;transition:transform .28s var(--pm-ease),box-shadow .28s var(--pm-ease),border-color .28s var(--pm-ease)}
.pm-pcard:hover{transform:translateY(-3px);box-shadow:var(--pm-shadow);border-color:#e0e0de}

/* Inputs: clean, calm focus */
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="url"],input[type="search"],input[type="date"],select,textarea{border:1px solid #e2e2e0;border-radius:10px;background:#fff;color:#161616;transition:border-color .2s var(--pm-ease),box-shadow .2s var(--pm-ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#0064E0;box-shadow:0 0 0 3px rgba(0,100,224,.10)}

/* Header: frosted, featherweight */

/* Section eyebrows: quiet confidence */
.pm-eyebrow{color:#0064E0}
.pm-eyebrow::before{background:#0064E0}

/* Links: understated */
a{transition:color .18s ease}
.pm-link{border-bottom-color:rgba(0,100,224,.35)}
.pm-link:hover{color:#0064E0}

/* Pills & chips: soft neutral */
.pm-chip,.badge-smart{background:#f5f5f4;border:1px solid #e8e8e7;color:#4a4a4a;border-radius:999px}

/* Tables: airy */
table{border-color:#ececea}
th{color:#6b6b6b;font-weight:600;letter-spacing:.02em}
td{border-color:#f0f0ef}

/* Scrollbar: whisper-quiet */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:8px;border:2px solid #fafaf9}
::-webkit-scrollbar-thumb:hover{background:#c4c4c4}

/* Focus visibility: accent ring */
:focus-visible{outline:2px solid #0064E0;outline-offset:2px;border-radius:6px}

/* Motion: calm and fluid */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   TWODOCK EDITORIAL — ultra-premium minimalist technology aesthetic
   Extreme whitespace · typographic hierarchy · quiet surfaces ·
   cinematic imagery · sophisticated motion. Layout untouched.
   ============================================================ */

/* ---- Editorial type scale ---- */
.cb-cine h1{font-size:clamp(48px,7.2vw,104px);font-weight:750;letter-spacing:-.028em;line-height:.98;text-transform:none;margin:28px 0 20px;text-shadow:none;color:#161616}
.cb-cine h1 em{font-style:normal;color:#0064E0;opacity:1}
.cb-cine-sub{font-size:clamp(16px,1.6vw,19px);color:#4a4a4a;max-width:620px;line-height:1.7;font-weight:400}
.cb-cine-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#161616;background:rgba(255,255,255,.72);border:1px solid rgba(22,22,22,.12);padding:10px 20px}

.pm-hero h1{font-size:clamp(44px,5.6vw,80px)!important;letter-spacing:-.03em!important;line-height:1!important;font-weight:750}
.pm-sec-title,.section-title{font-size:clamp(30px,3.4vw,46px)!important;letter-spacing:-.024em!important;line-height:1.08!important;font-weight:700}
.pm-sec-sub,.section-sub{font-size:16.5px;color:#6b6b6b;line-height:1.7;max-width:640px}

/* Extremely clean small labels */
.pm-eyebrow,.cb-cine-eyebrow,.section-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}

/* ---- Generous but not cavernous whitespace ---- */
.pm-section{padding:clamp(48px,6vw,84px) 24px!important}
.cb-cine-inner{padding:clamp(90px,12vh,150px) 24px clamp(60px,8vh,100px)}

/* ---- Quiet surfaces: rely on whitespace, not boxes ---- */
.pm-card,.card{border:1px solid #f0f0ef;box-shadow:none;border-radius:18px;padding:clamp(24px,3vw,40px)}
.pm-card:hover,.card:hover{box-shadow:0 12px 40px rgba(20,30,30,.07);border-color:#e8e8e6;transform:none}
.pm-pcard{border:1px solid #f0f0ef;box-shadow:none;border-radius:18px}
.pm-pcard:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(20,30,30,.08);border-color:#e6e6e4}

/* ---- Editorial buttons ---- */
.pm-btn-accent{background:#161616;border-color:#161616;color:#fff;border-radius:10px;font-weight:600;letter-spacing:-.01em;padding:12px 32px;font-size:15px;transition:background .22s var(--pm-ease),transform .22s var(--pm-ease),box-shadow .22s var(--pm-ease)}
.pm-btn-accent:hover{background:#2e2e2e;border-color:#2e2e2e;transform:translateY(-1px);box-shadow:0 10px 24px rgba(22,22,22,.18)}
.pm-btn-accent:active{transform:translateY(0)}
.pm-btn,.btn{border-radius:10px;padding:12px 28px;font-weight:600;border-color:#e4e4e2}
.mfr-search-btn{background:#161616!important;border-radius:0 14px 14px 0!important}

/* Teal accent: small brand moments only */
.pm-eyebrow{color:#0064E0}
.pm-eyebrow::before{background:#0064E0}
a:hover{color:#0064E0}

/* ---- Quiet navigation ---- */
.pm-nav a{font-size:13.5px;font-weight:500;letter-spacing:.02em;color:#4a4a4a;padding:10px 14px}
.pm-nav a:hover{color:#161616}
.pm-nav a.on{color:#161616}
.pm-nav a::after{background:#0064E0;height:2px}

/* ---- Cinematic imagery ---- */
.pm-pcard img,.pm-cat-card img,.cb-cine-video{border-radius:0}
.pm-cat-card{border-radius:20px;overflow:hidden;border:1px solid #f0f0ef}
img{image-rendering:auto}

/* ---- Sophisticated motion: fast, subtle, natural ---- */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--pm-ease),transform .7s var(--pm-ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-d1{transition-delay:.06s}html.js .rv-d2{transition-delay:.12s}html.js .rv-d3{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ---- Dividers instead of boxes ---- */
.pm-hr{border:none;border-top:1px solid #f0f0ef;margin:0}

/* ---- Responsive: same character at every size ---- */
@media(max-width:640px){
  .pm-section{padding:56px 18px!important}
  .pm-card,.card{padding:20px;border-radius:14px}
  .pm-btn-accent,.pm-btn,.btn{padding:12px 20px;font-size:14px}
}

/* ============================================================
   MOBILE EXPERIENCE PASS (2026-09-27) — app-style mobile UX
   ============================================================ */
.pm-bottomnav{display:none}

/* ---------- Mobile bottom tab bar (phones + small tablets) ---------- */
@media(max-width:860px){
  .pm-bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1200;
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--hair);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .pm-bottomnav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:8px 0px 4px;text-decoration:none;color:#8a8a8a;
    font-size:10.5px;font-weight:600;letter-spacing:.01em;min-height:52px;justify-content:center;
  }
  .pm-bottomnav a svg{width:22px;height:22px}
  .pm-bottomnav a.on{color:var(--pm-accent,#0064E0)}
  .pm-bottomnav a:active{opacity:.7}
  .pm-bottomnav .pm-bn-cta{color:#404040}
  .pm-bn-cta-btn{
    width:44px;height:44px;border-radius:50%;background:#161616;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:400;line-height:1;
    margin-top:-22px;box-shadow:0 8px 20px rgba(22,22,22,.28);border:3px solid #fff;
  }
  .pm-bottomnav .pm-bn-cta span:last-child{margin-top:2px}
  /* keep page content clear of the fixed bar */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}

/* ---------- Declutter the top bar on phones ---------- */
@media(max-width:640px){
  /* language stays in the top bar as a compact button (was hidden here when it lived in the drawer) */
      .pm-mobile-drawer .drawer-prefs{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--hair);margin-top:6px}
  .pm-mobile-drawer .drawer-prefs .lang-switch{display:block}
  .pm-mobile-drawer .drawer-prefs .shipto-wrap{display:block}
  /* Landing: Alibaba-style mobile header — row 1: logo left + language/currency right;
     row 2: burger beside the search pill (camera + search buttons) */
      /* currency switcher stays in the top bar on phones (compact), ship-to lives in the drawer */
        .pm-msearch-pill{display:flex;align-items:center;background:#efefec;border:1px solid #8a8a8a;border-radius:999px;height:46px;padding:0 4px 0 16px;gap:6px}
  .pm-msearch-pill:focus-within{background:#fff;border-color:var(--pm-ink)}
  .pm-msearch-pill input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;outline:none;font-family:inherit;color:#161616;-webkit-appearance:none}
  .pm-msearch-pill input::placeholder{color:var(--pm-faint)}
  .pm-msearch-cam{background:none;border:0;cursor:pointer;padding:8px;color:#161616;display:flex;align-items:center}
  .pm-msearch-cam svg{width:22px;height:22px}
  .pm-msearch-go{background:#161616;color:#fff;border:0;border-radius:999px;min-width:44px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 10px}
  .pm-msearch-go svg{width:18px;height:18px}
  /* hero: less towering on phones */
  .cb-cine{min-height:0}
  .cb-cine-inner{padding:72px 18px 52px}
  .cb-cine-stats{gap:20px;flex-wrap:wrap}
  .cb-cine-stats b{font-size:24px}
  /* section breathing room */
  .pm-section{padding-left:12px;padding-right:14px}
  /* product cards: comfortable 2-col */
  .pm-card-title{min-height:0}
}

/* ---------- Ads console performance chart ---------- */
.ads-perf{margin-bottom:24px;padding:20px 20px 14px}
.ads-chart{width:100%;height:auto;display:block}
.ads-chart .grid{stroke:#ececea;stroke-width:1}
.ads-chart .line-imp{stroke:#b9b9b6;stroke-width:2}
.ads-chart .line-clk{stroke:#0064E0;stroke-width:2}
.ads-chart .dot-clk{fill:#0064E0}
.ads-chart .lbl{font-size:9px;fill:#6b6b6b}
.ads-legend{display:flex;gap:16px;align-items:center;margin-top:8px;font-size:12px;color:#3a3a3a}
.ads-legend .sw{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle}
.ads-legend .sw-imp{background:#b9b9b6}
.ads-legend .sw-clk{background:#0064E0}
.ads-legend .muted{margin-left:auto}

/* ============ layout audit fixes + reply chip (2026-09-27) ============ */
.grid-2r{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.grid-3r{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:700px){
  .grid-2r{grid-template-columns:1fr}
  .grid-3r{grid-template-columns:1fr}
  .grid-collapse{grid-template-columns:1fr!important}
}
.pm-mobile-drawer{overflow-y:auto}
/* video-call split button (call now / schedule) */
.vid-menu{position:relative;display:inline-block}
.vid-menu summary{list-style:none;cursor:pointer}
.vid-menu summary::-webkit-details-marker{display:none}
.vid-menu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:#fff;border:1px solid #ececea;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:4px;display:none;z-index:50}
.vid-menu[open] .vid-menu-list{display:block}
.vid-menu-list button,.vid-menu-list a{display:flex;width:100%;align-items:center;gap:8px;padding:8px 12px;border:0;background:none;font:inherit;font-size:14px;color:#161616;border-radius:8px;cursor:pointer;text-decoration:none;text-align:left;box-sizing:border-box}
.vid-menu-list button:hover,.vid-menu-list a:hover{background:#f4f4f2}
/* "typically replies" chip */
.reply-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:#0064E0;background:rgba(0,100,224,.08);border:1px solid rgba(0,100,224,.22);border-radius:999px;padding:4px 12px;white-space:nowrap}
/* logged-in account links relocated into the mobile drawer */
.drawer-acct:empty{display:none}
.pm-mobile-drawer .hdr-acct{display:flex;flex-direction:column;gap:0px;width:100%;max-width:360px;padding:8px 0 16px;margin-bottom:8px;border-bottom:1px solid #ececea}
.pm-mobile-drawer .hdr-acct .hdr-hi{font-size:13px;color:#8a8a8a;font-weight:600;padding:4px 12px}
.pm-mobile-drawer .hdr-acct .pm-signin{display:block;color:#404040!important;font-size:19px;font-weight:600;padding:8px 12px;text-decoration:none}

/* ============ back-to-top button (2026-09-27) ============ */
.to-top{position:fixed;right:24px;bottom:24px;z-index:1100;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #e4e4e1;box-shadow:0 10px 26px rgba(0,0,0,.10);color:#161616;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease,visibility .28s;pointer-events:none;padding:0}
.to-top.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:0 14px 32px rgba(0,0,0,.14);transform:translateY(-2px);color:#0064E0}
.to-top:focus-visible{outline:2px solid #0064E0;outline-offset:3px}
@media(max-width:860px){
  .to-top{right:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:44px;height:44px}
}

/* Unified back link (2026-10-05 polish): ONE shared premium style for all
   role back buttons. Subtle text link with arrow in a hairline circle;
   arrow fills deep teal on hover. Always links to a real parent page,
   never history.back(). Placed top-left of content, below the header. */
.back-link{display:inline-flex;align-items:center;gap:10px;margin:16px 0 4px;padding:6px 0;font-size:14px;font-weight:600;color:#6b6b6b;text-decoration:none;line-height:1}
.back-link .back-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e2e2e0;border-radius:50%;font-size:15px;color:#161616;background:#fff;transition:border-color .18s ease,background .18s ease,color .18s ease}
.back-link:hover{color:#161616;text-decoration:none}
.back-link:hover .back-arrow{background:#0064E0;border-color:#0064E0;color:#fff}
.back-link:focus-visible{outline:2px solid #0064E0;outline-offset:3px;border-radius:6px}
/* Role back buttons share the unified premium treatment. */
.admin-back{display:inline-flex;align-items:center;gap:10px;margin:16px 0 4px;padding:6px 0;font-size:14px;font-weight:600;color:#6b6b6b;text-decoration:none;line-height:1}
.admin-back .back-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e2e2e0;border-radius:50%;font-size:15px;color:#161616;background:#fff;transition:border-color .18s ease,background .18s ease,color .18s ease}
.admin-back:hover{color:#161616;text-decoration:none}
.admin-back:hover .back-arrow{background:#0064E0;border-color:#0064E0;color:#fff}
.supplier-back{display:inline-flex;align-items:center;gap:10px;margin:16px 0 4px;padding:6px 0;font-size:14px;font-weight:600;color:#6b6b6b;text-decoration:none;line-height:1}
.supplier-back .back-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e2e2e0;border-radius:50%;font-size:15px;color:#161616;background:#fff;transition:border-color .18s ease,background .18s ease,color .18s ease}
.supplier-back:hover{color:#161616;text-decoration:none}
.supplier-back:hover .back-arrow{background:#0064E0;border-color:#0064E0;color:#fff}
.buyer-back{display:inline-flex;align-items:center;gap:10px;margin:16px 0 4px;padding:6px 0;font-size:14px;font-weight:600;color:#6b6b6b;text-decoration:none;line-height:1}
.buyer-back .back-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e2e2e0;border-radius:50%;font-size:15px;color:#161616;background:#fff;transition:border-color .18s ease,background .18s ease,color .18s ease}
.buyer-back:hover{color:#161616;text-decoration:none}
.buyer-back:hover .back-arrow{background:#0064E0;border-color:#0064E0;color:#fff}

/* ============================================================
   ULTRA-PREMIUM MINIMALIST TECHNOLOGY AESTHETIC (2026-09-27)
   Pure visual theme pass. Layout, sections, content and
   functionality untouched — styling and responsive behavior only.
   Tokens: white/soft-neutral surfaces, #161616 ink, one deep
   teal accent (#0064E0) used sparingly.
   ============================================================ */

/* ---- 1. Design tokens: single source of truth ---- */
/* Astryx port (2026-11-10): live --ux-* vars are one-line aliases to
   astryx-tokens.css. Teal #0064E0 is retired; accent is #0064E0. */
:root{
  --ux-bg:var(--color-background-surface); --ux-bg-soft:var(--color-background-body); --ux-bg-warm:var(--color-background-muted);
  --ux-ink:var(--color-text-primary); --ux-muted:var(--color-text-secondary); --ux-faint:var(--color-text-disabled);
  --ux-line:var(--color-border); --ux-line-soft:var(--color-border);
  --ux-accent:var(--color-accent); --ux-accent-deep:var(--ax-accent-deep); --ux-accent-soft:var(--color-accent-muted);
  --ux-ease:var(--ease-standard);
  --ux-shadow-sm:var(--shadow-low);
  --ux-shadow:var(--shadow-med);
  --ux-shadow-lg:var(--shadow-high);
  --ux-r-sm:var(--radius-element); --ux-r:var(--radius-container); --ux-r-lg:var(--radius-page); --ux-pill:var(--radius-full);
}

/* ---- 2. Sophisticated typography scale ----
   Display: large, elegant, tight tracking. Body: 15-17px/1.6. */
.page h1,.pm-page-title{font-size:clamp(34px,4.2vw,56px);font-weight:700;letter-spacing:-.026em;line-height:1.06;color:var(--ux-ink);margin:0 0 16px;text-wrap:balance}
.page h2,.pm-page-sub{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.022em;line-height:1.12;color:var(--ux-ink);margin:0 0 12px;text-wrap:balance}
.page h3{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ux-ink)}
/* SEO fixes 2026-11-11 (R15): the home trust-card titles are H2s now but
   must keep the exact .page h3 look — .page h2 above would otherwise
   restyle them (34px/700/1.12/12px). Higher specificity than .page h2;
   only the two home cards match (ax-trust-card is used nowhere else). */
.page .ax-trust-card h2{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ux-ink);margin:0 0 var(--spacing-2)}
/* SEO fixes 2026-11-11 (R15): .info-card headings on /buyer-protection and
   /ranking-factors are H2s now but must keep the exact .page h3 look —
   .page h2 above (same specificity, later) would otherwise make them
   24-34px/700. Margin matches the .info-card rule at line 745. */
.page .info-card h2{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ux-ink);margin:0 0 8px}
/* SEO fixes 2026-11-11 (R15): /verification-explained badge-card headings
   are H2s now (top-level sections under the H1) but keep the exact
   .page h3 look — .page h2 above would otherwise make them 24-34px/700.
   Margin stays inline (0 0 8px) on the headings themselves. */
.verif-expl h2{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ux-ink)}
/* SEO fixes 2026-11-11 (R15): /services + /services/bundles card headings
   are H2s now (top-level sections under the H1) but keep the exact
   .page h3 look. Card headings with inline font-size/margin are
   unaffected (inline wins); this covers weight/line-height/spacing and
   the empty-state + bundle-card headings' size. */
.svc-page h2{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ux-ink);margin:0}
.page .lead,.pm-lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7;color:var(--ux-muted);max-width:680px;font-weight:400}
h1,h2,h3{font-weight:700}
strong,b{font-weight:600}

/* ---- 3. Generous whitespace: pages breathe ---- */
.page{padding:clamp(56px,7vw,104px) 0 clamp(72px,9vw,128px)}
.pm-band{margin:clamp(48px,6vw,88px) auto}

/* ---- 4. Buttons: pill geometry, calm tactile motion ---- */
.btn,.pm-btn,.pm-btn-accent{border-radius:var(--ux-pill);transition:background .22s var(--ux-ease),border-color .22s var(--ux-ease),transform .22s var(--ux-ease),box-shadow .22s var(--ux-ease)}
.btn:hover,.pm-btn:hover{transform:translateY(-1px);box-shadow:var(--ux-shadow-sm)}
.btn-primary,.btn.btn-primary{box-shadow:0 6px 18px rgba(22,22,22,.14)}
.btn-primary:hover,.btn.btn-primary:hover{box-shadow:0 10px 26px rgba(22,22,22,.16);transform:translateY(-1px)}
.btn-primary:active,.btn.btn-primary:active{transform:translateY(0);box-shadow:0 3px 10px rgba(22,22,22,.12)}

/* ---- 5. Cards: quiet surfaces, featherweight elevation ---- */
.pm-card,.card{box-shadow:var(--ux-shadow-sm);border-radius:var(--ux-r-lg)}
.pm-card:hover,.card:hover{box-shadow:var(--ux-shadow);transform:translateY(-2px)}
.pm-pcard{box-shadow:var(--ux-shadow-sm);border-radius:var(--ux-r-lg)}
.pm-pcard:hover{box-shadow:var(--ux-shadow);transform:translateY(-3px)}
.pm-band{box-shadow:none}

/* ---- 6. Chips & pills: soft neutral geometry ---- */
.pm-chip,.badge-smart,.pm-cb-badge{border-radius:var(--ux-pill)}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="url"],input[type="search"],input[type="date"],select,textarea{border-radius:var(--ux-r-sm)}

/* ---- 7. Fluid micro-animations, one easing language ---- */
a,.pm-link{transition:color .18s var(--ux-ease),border-color .18s var(--ux-ease),background .18s var(--ux-ease)}
.pm-cat-card,.cb-rank-col{transition:transform .24s var(--ux-ease),box-shadow .24s var(--ux-ease),border-color .24s var(--ux-ease)}
.pm-cat-card:hover,.cb-rank-col:hover{transform:translateY(-3px);box-shadow:var(--ux-shadow)}
img{transition:transform .5s var(--ux-ease)}
.pm-pcard:hover img{transform:scale(1.025)}

/* ---- 8. Quiet hierarchy helpers ---- */
.ux-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ux-accent)}
.ux-meta{font-size:13px;color:var(--ux-muted);line-height:1.6}
.ux-divider{border:none;border-top:1px solid var(--ux-line-soft);margin:clamp(40px,5vw,72px) 0}

/* ---- 9. Soften remaining heavy shadows ---- */
.pm-bn-cta-btn{box-shadow:0 6px 18px rgba(22,22,22,.18)}
.vid-menu-list{box-shadow:0 16px 40px rgba(0,0,0,.08)}
.to-top{box-shadow:0 8px 22px rgba(0,0,0,.08)}
.to-top:hover{box-shadow:0 12px 28px rgba(0,0,0,.10)}

/* ---- 10. Tablet refinement (701-1024px): calmer density ---- */
@media(min-width:701px) and (max-width:1024px){
  .pm-section{padding:80px 24px}
  .page{padding:64px 0 88px}
  .cb-cine h1{font-size:clamp(44px,6vw,72px)}
  .pm-sec-title,.section-title{font-size:clamp(28px,3.4vw,40px)}
  .pm-card,.card{padding:28px}
}

/* ---- 11. Ultra-wide (>1920px): elegant cap, never stretched ---- */
@media(min-width:1600px){
  .container, main.container.page, .pm-catnav-inner, .pm-footer-inner, .cb-welcome, .cb-camp, .pm-mega-inner{max-width:1440px}
}
@media(min-width:1920px){
  .pm-section{max-width:1440px}
  .cb-cine-inner{max-width:1440px;margin-left:auto;margin-right:auto}
}

/* ---- 12. Mobile (<=700px): comfortable touch targets, calm density ---- */
@media(max-width:700px){
  .btn,.pm-btn,.pm-btn-accent{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pm-card-link{min-height:44px}
  .pm-nav a{min-height:44px;display:inline-flex;align-items:center}
  .page h1,.pm-page-title{font-size:clamp(30px,8.5vw,40px)}
  .page{padding:48px 0 72px}
  .ux-divider{margin:40px 0}
}

/* ---- 13. Motion safety: honor reduced-motion everywhere ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pm-pcard:hover img{transform:none}
  .pm-card:hover,.card:hover,.pm-pcard:hover,.pm-cat-card:hover,.cb-rank-col:hover{transform:none}
}

/* Supplier type marking: Manufacturer vs Trading company badges + filters */
.cb-type-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid;border-radius:999px;padding:4px 8px;white-space:nowrap;vertical-align:middle}
.cb-type-mfr{background:#eef7f5;border-color:#cfe7e3;color:#0064E0}
.cb-type-trader{background:#f4f4f2;border-color:#e2e2de;color:#6b6b6b}
.cb-type-audited{background:#0064E0;border-color:#0064E0;color:#fff;box-shadow:0 2px 8px rgba(0,100,224,.25)}
.cb-sup-badges .cb-type-badge{margin-left:6px}
.st-tags .cb-type-badge{margin-left:6px}
/* Manufacturers directory: type filter chips */
.mfr-type-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.mfr-type-chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid #e2e2e2;background:#fff;color:#404040;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .18s}
.mfr-type-chip:hover{border-color:#161616;color:#161616}
.mfr-type-chip.on{background:#161616;border-color:#161616;color:#fff}
/* Seller onboarding wizard: business-type radio cards */
.suptype-field{border:0;padding:0;margin:14px 0}
.suptype-field legend{font-size:14px;font-weight:600;color:#161616;padding:0;margin-bottom:10px}
.suptype-field .req{color:#0064E0}
.suptype-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.suptype-opt{cursor:pointer}
.suptype-opt input{position:absolute;opacity:0;pointer-events:none}
.suptype-card{display:flex;flex-direction:column;gap:4px;border:1px solid #e2e2e2;border-radius:16px;padding:12px 16px;background:#fff;transition:all .18s}
.suptype-card strong{font-size:15px;color:#161616}
.suptype-card small{font-size:12.5px;color:#6b6b6b;line-height:1.45}
.suptype-opt:hover .suptype-card{border-color:#bdbdbd}
.suptype-opt input:checked + .suptype-card{border-color:#0064E0;box-shadow:0 0 0 2px rgba(0,100,224,.15);background:#fbfefe}
.suptype-opt input:focus-visible + .suptype-card{outline:2px solid #0064E0;outline-offset:2px}
@media(max-width:700px){.suptype-opts{grid-template-columns:1fr}}

/* Toggle switch (team alert routing + anywhere else) */
.tgl{position:relative;display:inline-block;width:46px;height:26px;vertical-align:middle;cursor:pointer}
.tgl input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tgl .tk{position:absolute;inset:0;background:#dcdcdc;border-radius:999px;transition:background .18s ease;pointer-events:none}
.tgl .tk::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s ease}
.tgl input:checked + .tk{background:#0064E0}
.tgl input:checked + .tk::after{left:23px}
.tgl input:focus-visible + .tk{outline:2px solid #0064E0;outline-offset:2px}
.tgl input:disabled + .tk{opacity:.45;cursor:default}
.tgl-saved{font-size:12px;color:#0064E0;font-weight:600;margin-left:8px;opacity:0;transition:opacity .3s}
.tgl-saved.show{opacity:1}

/* ---------- F4: dispute SLA protection clock + evidence pack ---------- */
.pclock { background: #fff; border: 1px solid #ececea; border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(22,22,22,.04); }
.pclock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pclock-head strong { font-size: 15px; letter-spacing: -0.01em; color: #161616; }
.pclock-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pclock-chip { border: 1px solid #ececea; border-radius: 12px; padding: 12px 12px; background: #fafaf9; display: flex; flex-direction: column; gap: 4px; }
.pclock-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6b6b6b; }
.pclock-time { font-size: 16px; font-weight: 700; color: #161616; }
.pclock-chip.pclock-done { border-color: #0064E0; }
.pclock-chip.pclock-done .pclock-time { color: #0064E0; }
.pclock-chip.pclock-breach { border-color: #b3261e; background: #fdf3f2; }
.pclock-chip.pclock-breach .pclock-time { color: #b3261e; }
.sla-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; border: 1px solid #e2e2e0; background: #f4f4f3; color: #525252; white-space: nowrap; }
.sla-ontrack { background: #eef6f5; border-color: #cde3e0; color: #0064E0; }
.sla-supplier_overdue, .sla-admin_overdue { background: #fdf3f2; border-color: #f0c6c2; color: #b3261e; }
.sla-resolved { background: #eee; color: #404040; }
tr.sla-breach-row td { background: #fdf8f7; }
.ev-card { border: 1px solid #ececea; border-radius: 12px; padding: 12px 16px; margin: 8px 0; background: #fff; }
.ev-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ev-head strong { color: #161616; font-size: 14px; }
.ev-kind { font-size: 11px; font-weight: 700; color: #0064E0; text-transform: uppercase; letter-spacing: .05em; }
.ev-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: #3d3d3d; }
@media (max-width: 700px) { .pclock-chips { grid-template-columns: 1fr; } }

/* ===== Multi-currency price display (fxd): USD primary + muted approx conversion ===== */
.fxd { display: inline-flex; flex-direction: column; line-height: 1.3; }
.fxd-sub { font-size: 0.78em; color: var(--muted, #6b6b6b); font-weight: 400; margin-top: 0px; white-space: nowrap; }
.fxd-sub em { font-style: normal; }

/* ===== Category taxonomy: breadcrumb + subcategory strip (2026-09-29) ===== */
.pm-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0px 0 8px;font-size:13px;color:#6b6b6b}
.pm-crumb a{color:#0064E0;text-decoration:none;font-weight:500}
.pm-crumb a:hover{text-decoration:underline}
.pm-crumb-sep{color:#b9b9b7}
.pm-crumb-cur{color:#161616;font-weight:600}
.pm-subcats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:12px 12px;background:#f6f6f4;border:1px solid #ececea;border-radius:12px}
.pm-subcats-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b6b6b;margin-right:2px}
.pm-chip-sm{padding:4px 12px;font-size:12.5px}
.pm-chip-n{font-size:11px;opacity:.65;font-weight:600}

/* ===== Mega-menu subcategory flyout (2026-09-29) ===== */
.pm-mega-subs{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 12px;max-width:420px}
.pm-mega-subs a{font-size:13px;color:#3d3d3b;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px}
.pm-mega-subs a:hover{color:#0064E0;text-decoration-color:#0064E0}

/* ---- Lazy-load fade-in: JS-opt-in (footer adds .lz when it can watch the
   image). Native loading="lazy" alone never hides an image — unwired images
   (e.g. ones injected later by JS) stay visible by default. ---- */
img.lz{opacity:0;transition:opacity .45s ease}
img.lz.lz-done{opacity:1}
@media (prefers-reduced-motion: reduce){img.lz{opacity:1;transition:none}}

/* ---- Profile completeness card (Maan approved 2026-09-30) ---- */
.pc-card{background:#fff;border:1px solid var(--pm-line);border-radius:16px;padding:20px 20px;margin:24px auto;max-width:640px;text-align:left}
.pc-done{display:flex;gap:12px;align-items:center;border-color:#cfe8e4;background:#f4faf9}
.pc-done-ic{width:44px;height:44px;border-radius:50%;background:#0064E0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.pc-ring{flex:none;width:64px;height:64px;border-radius:50%;border:5px solid #0064E0;color:#0e1413;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.pc-bar{height:8px;background:#efeeea;border-radius:999px;overflow:hidden;margin-bottom:10px}
.pc-bar span{display:block;height:100%;background:#0064E0;border-radius:999px;transition:width .4s ease}
.pc-missing{font-size:13px;color:var(--pm-muted);margin:0 0 8px}
.pc-list{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.pc-list li{font-size:14px}
.pc-list li::before{content:"○";color:#0064E0;margin-right:8px}
.pc-list a{color:#0e1413;text-decoration:underline;text-underline-offset:3px}

/* ---- Seller CRM kanban (Maan approved 2026-10-02) ---- */
.crm-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.crm-stat{background:#fff;border:1px solid var(--pm-line);border-radius:12px;padding:8px 16px;min-width:120px}
.crm-stat b{display:block;font-size:20px;color:#0e1413}
.crm-stat span{font-size:12px;color:var(--pm-muted)}
.crm-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.crm-col{flex:0 0 270px;background:#f7f6f3;border:1px solid var(--pm-line);border-radius:14px;padding:8px;max-height:70vh;overflow-y:auto}
.crm-col h3{font-size:13px;margin:0px 4px 8px;display:flex;justify-content:space-between;align-items:center;color:#0e1413}
.crm-col h3 .n{background:#0e1413;color:#fff;border-radius:999px;font-size:11px;padding:1px 8px}
.crm-card{background:#fff;border:1px solid var(--pm-line);border-radius:10px;padding:8px 12px;margin-bottom:8px;display:block;color:inherit;text-decoration:none}
.crm-card:hover{border-color:#0064E0}
.crm-card .t{font-weight:600;font-size:14px;margin:0 0 4px;color:#0e1413}
.crm-card .b{font-size:12px;color:var(--pm-muted);margin:0 0 6px}
.crm-card .meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:11px;color:var(--pm-muted)}
.score{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px}
.score-hot{background:#fdecec;color:#b3261e}
.score-warm{background:#fff4e0;color:#9a6a00}
.score-cold{background:#eef1f4;color:#5b6b7a}
.stage-pill{display:inline-block;font-size:11px;border-radius:999px;padding:0px 8px;background:#eef1f4;color:#0e1413;text-transform:capitalize}
.stage-pill.won{background:#e6f4ef;color:#0064E0}
.stage-pill.lost{background:#f3f0ec;color:#8a8178}
.crm-detail{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.crm-detail{grid-template-columns:2fr 1fr}}
.crm-panel{background:#fff;border:1px solid var(--pm-line);border-radius:14px;padding:18px}
.crm-panel h3{font-size:14px;margin:0 0 12px;color:#0e1413}
.crm-note{border-left:3px solid #0064E0;padding:4px 12px;margin-bottom:8px;background:#f8faf9;border-radius:0 8px 8px 0}
.crm-note p{margin:0 0 4px;font-size:14px}
.crm-note small{color:var(--pm-muted);font-size:11px}
.crm-hist{font-size:13px;color:var(--pm-muted);margin:0 0 6px}
.crm-hist b{color:#0e1413;text-transform:capitalize}
.crm-stage-btns{display:flex;flex-wrap:wrap;gap:8px}
.reason-list{margin:8px 0 0;padding:0;list-style:none}
.reason-list li{font-size:13px;color:var(--pm-muted);margin-bottom:4px}
.reason-list li::before{content:"✓";color:#0064E0;margin-right:8px;font-weight:700}

/* Z4 ROUND-3 (2026-10-03): moderation state badges (media queue + supplier form). */
.badge-pending { display:inline-block; background:#fff8e6; color:#8a6d1a; border:1px solid #ecd27a; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:700; }
.badge-hidden { display:inline-block; background:#fdeaea; color:#a33; border:1px solid #efb9b9; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:700; }

/* B1 (2026-10-03): MANDATORY AI photo approval gate — manager UI. */
.photo-gate-manager{margin:12px 0}
.pg-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.pg-urlrow{display:flex;gap:8px;align-items:center;flex:1;min-width:240px}
.pg-url{flex:1;padding:8px 8px;border:1px solid var(--pm-line);border-radius:8px;font-size:13px}
.pg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:10px 0}
.pg-card{border:1px solid var(--pm-line);border-radius:12px;overflow:hidden;background:#fff;position:relative}
.pg-card.pg-main{border-color:#0064E0;box-shadow:0 0 0 1px #0064E0}
.pg-card img{width:100%;height:150px;object-fit:contain;background:#f7f7f7;display:block}
.pg-badge{position:absolute;top:8px;left:8px;background:rgba(14,20,19,.85);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 10px}
.pg-main .pg-badge{background:#0064E0}
.pg-status{padding:8px 8px;font-size:12px;min-height:34px}
.pg-ok{color:#0064E0;font-weight:700}
.pg-warn{color:#8a6d1a;font-weight:600}
.pg-err{color:#b3261e;font-weight:600;margin-bottom:2px}
.pg-fix{color:#5b6b7a;font-size:11px;margin-bottom:8px;line-height:1.4}
.pg-warnline{color:#8a6d1a;font-size:11px;margin-top:4px}
.pg-btns{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 10px}
.pg-btns .btn{font-size:12px;padding:5px 10px}
.pg-type{font-size:12px;padding:4px 8px;border:1px solid var(--pm-line);border-radius:8px}
.pg-submit-err{margin-bottom:10px}
.pg-cover-hint{margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pg-count{margin-top:6px}

/* ---------- Returns / RMA timeline (Alibaba gap #13) ---------- */
.rma-timeline { max-width: 640px; margin: 4px 0 0; padding-left: 8px; }
.rma-step { display: flex; gap: 12px; padding: 8px 0; border-left: 2px solid var(--line); padding-left: 16px; position: relative; }
.rma-dot { width: 10px; height: 10px; border-radius: 50%; background: #0064E0; position: absolute; left: -6px; top: 16px; }

/* OSS Batch B: sanitized rich-text (Editor.js) descriptions. */
.rich-desc{font-size:15.5px;line-height:1.75;color:#404040;max-width:760px;overflow-wrap:break-word}
.rich-desc h2{font-size:21px;margin:1em 0 .5em;color:#16181d}
.rich-desc h3{font-size:18px;margin:1em 0 .5em;color:#16181d}
.rich-desc h4{font-size:16px;margin:1em 0 .4em;color:#16181d}
.rich-desc p{margin:.6em 0}
.rich-desc ul,.rich-desc ol{margin:.6em 0 .6em 1.4em;padding:0}
.rich-desc li{margin:.3em 0}
.rich-desc blockquote{margin:.8em 0;padding:.6em 1em;border-left:3px solid #0064E0;background:#f7faf9;border-radius:0 8px 8px 0}
.rich-desc blockquote cite{display:block;font-size:13px;color:#6b6b6b;font-style:normal;margin-top:4px}
.rich-desc table{border-collapse:collapse;width:100%;margin:.8em 0;font-size:14px}
.rich-desc td,.rich-desc th{border:1px solid #e4e1d9;padding:8px 12px;text-align:left}
.rich-desc th{background:#f7f6f3}
.rich-desc hr{border:0;border-top:1px solid #e4e1d9;margin:1.2em 0}
.rich-desc a{color:#0064E0}

/* ---------- Lucide icons (DEEP-CHECK 2026-10-04, Phase 4) ----------
   One crisp line-icon set, exact sizes, inherits text color. */
.lucide { display: inline-block; vertical-align: -2px; flex: none; }
.btn .lucide { vertical-align: -3px; margin-right: 4px; }
.btn .lucide:last-child { margin-right: 0; margin-left: 4px; }
.badge .lucide { vertical-align: -2px; margin-right: 4px; }

/* ---------- Voice search mic (2026-10-25, competitor-scan item 11) ----------
   Mic buttons render with `hidden` and are only revealed where the browser
   supports speech recognition. The !important beats the cam-button
   display:flex rules so `hidden` always wins until JS reveals the button. */
[data-voice-btn][hidden]{display:none !important}
.vs-mic{background:none;border:0;cursor:pointer;padding:8px;color:#161616;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:none}
.vs-mic svg{width:22px;height:22px}
.vs-mic-sub{background:none;border:0;cursor:pointer;padding:4px 2px;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:4px}
[data-voice-btn].is-listening,.vs-mic.is-listening,.vs-mic-sub.is-listening{color:#d32f2f;animation:vs-pulse 1s ease-in-out infinite}
@keyframes vs-pulse{0%,100%{box-shadow:0 0 0 0 rgba(211,47,47,.35)}50%{box-shadow:0 0 0 6px rgba(211,47,47,0)}}

/* Dead-feature hunt cycle 1, item 12 (revised): header search typing
   suggestions dropdown. Anchored to the search form (JS sets the form
   position:relative); hidden unless JS populates it, so no-JS pages are
   visually unchanged. */
.pm-suggest{position:absolute;top:100%;left:0;right:0;z-index:60;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);margin-top:6px;overflow:hidden}
.pm-suggest[hidden]{display:none}
.pm-suggest-head{padding:8px 14px 4px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#666;text-transform:uppercase}
.pm-suggest-item{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:14px;color:#1a1a1a;text-decoration:none}
.pm-suggest-item.on,.pm-suggest-item:hover,.pm-suggest-item:focus{background:#eaf2ff}
.pm-suggest-thumb{width:36px;height:36px;object-fit:cover;border-radius:6px;flex:none}
.pm-suggest-name{flex:1;min-width:0}
.pm-suggest-name mark{background:#fff3b0;padding:0 1px;border-radius:2px}
.pm-suggest-cat{font-size:12px;color:#666;white-space:nowrap}
.pm-suggest-price{font-size:13px;white-space:nowrap}
.pm-suggest-moq{font-size:12px;color:#666;white-space:nowrap}
.pm-suggest-foot{display:block;padding:10px 14px;font-size:14px;font-weight:600;color:#123a6d;text-decoration:none;border-top:1px solid #eee}
.pm-suggest-foot.on,.pm-suggest-foot:hover{background:#eaf2ff}

/* MWG 2026-11-11 — native <progress> for the group-buy bar (was a custom
   <div role="progressbar"> in views/partials/groupbuy_box.ejs). Vendor
   pseudos paint the fill; the track keeps the old #e3ecfa background
   and 10px height. */
.gb-progress{display:block;width:100%;height:10px;border:0;border-radius:6px;background:#e3ecfa;margin-bottom:8px;-webkit-appearance:none;appearance:none;overflow:hidden}
.gb-progress::-webkit-progress-bar{background:#e3ecfa;border-radius:6px}
.gb-progress::-webkit-progress-value{background:linear-gradient(90deg,#1B73E8,#2A35A6);border-radius:6px}
.gb-progress::-moz-progress-bar{background:linear-gradient(90deg,#1B73E8,#2A35A6);border-radius:6px}