/**
 * wholesale-market-supplier.css — the supplier's public storefront page
 * (Stream I2; design canon: the "Supplier storefront" artboard,
 * wsmk/Brand.dc.html). OWN file by stream contract — wholesale-market.css
 * (chrome/cards) is not edited here. Same design language as the rest of
 * the marketplace: Poppins headings, Inter text, JetBrains Mono numbers,
 * accent #452B90, #E4E2EE hairlines, generous whitespace, no scrims.
 */

.wm-sup-banner {
  height: 210px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 640px) { .wm-sup-banner { height: 130px; } }

/* ── identity row ─────────────────────────────────────────────────────── */
.wm-sup-identity {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 0 48px;
  margin-top: -44px;
  position: relative;
}
.wm-sup-logo {
  width: 108px;
  height: 108px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #E4E2EE;
  box-shadow: 0 2px 10px rgba(26, 32, 44, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.wm-sup-logo img { width: 100%; height: 100%; object-fit: cover; }
.wm-sup-monogram {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #452B90;
}
.wm-sup-id-main {
  flex: 1;
  padding-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.wm-sup-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm-sup-name {
  margin: 0;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: #1A202C;
}
.wm-sup-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #186A3B;
  background: #E8F5EC;
  border-radius: 99px;
  padding: 4px 10px;
  white-space: nowrap;
}
.wm-sup-metaline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #556070;
  flex-wrap: wrap;
}
.wm-sup-metaline .mono, .wm-sup-ratingline .mono,
.wm-sup-axes .mono, .wm-sup-tab .mono, .wm-sup-cat .mono {
  font-family: "JetBrains Mono", monospace;
}
.wm-sup-ratingline { display: inline-flex; align-items: center; gap: 6px; color: #556070; }
.wm-sup-ratingline b { color: #1A202C; }
.wm-sup-stars { letter-spacing: 1px; font-size: 14px; }
.wm-sup-stars .on { color: #B7791F; }
.wm-sup-stars .off { color: #D8DCE2; }
.wm-sup-id-cta { display: flex; align-items: center; gap: 10px; padding-top: 56px; }
@media (max-width: 900px) {
  .wm-sup-identity { flex-wrap: wrap; gap: 14px; padding: 0 16px; }
  .wm-sup-id-main { padding-top: 46px; }
  .wm-sup-id-cta { padding-top: 0; width: 100%; }
}

/* ── tabs ─────────────────────────────────────────────────────────────── */
.wm-sup-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 48px 0;
  border-bottom: 1px solid #E4E2EE;
  margin-top: 10px;
  overflow-x: auto;
}
.wm-sup-tab {
  font-size: 14px;
  font-weight: 500;
  color: #556070;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.wm-sup-tab .mono { font-size: 12px; }
.wm-sup-tab:hover { color: #1A202C; }
.wm-sup-tab.is-active {
  font-weight: 600;
  color: #1A202C;
  border-bottom-color: #452B90;
}
@media (max-width: 640px) { .wm-sup-tabs { padding: 12px 16px 0; } }

/* ── body: category rail + grid ───────────────────────────────────────── */
.wm-sup-layout { display: flex; gap: 28px; padding: 22px 48px 30px; }
.wm-sup-rail {
  width: 218px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}
.wm-sup-rail-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #556070;
  padding: 4px 10px 8px;
}
.wm-sup-rail-gap { padding-top: 18px; }
.wm-sup-cat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #1A202C;
  text-decoration: none;
}
.wm-sup-cat .mono { font-size: 12px; color: #556070; }
.wm-sup-cat:hover { background: #F4F2FA; }
.wm-sup-cat.is-active { background: #EDE8F8; color: #452B90; font-weight: 600; }
.wm-sup-cat.is-active .mono { color: #452B90; }
.wm-sup-axes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 10px;
  font-size: 12.5px;
  color: #556070;
}
.wm-sup-axes span { display: flex; justify-content: space-between; }
.wm-sup-axes b { color: #1A202C; }
.wm-sup-main { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .wm-sup-layout { flex-direction: column; padding: 16px; }
  .wm-sup-rail { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wm-sup-rail-title { width: 100%; }
  .wm-sup-axes { flex-direction: row; gap: 14px; }
  .wm-sup-axes span { gap: 6px; }
}

/* ── sections (auctions / reviews / about tabs) ───────────────────────── */
.wm-sup-section { padding: 22px 48px 34px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 640px) { .wm-sup-section { padding: 16px; } }

.wm-sup-auction {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #E4E2EE;
  border-radius: 12px;
  padding: 15px 17px;
  color: #1A202C;
  text-decoration: none;
  flex-wrap: wrap;
}
.wm-sup-auction:hover { border-color: #452B90; }
.wm-sup-auction-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #556070;
  background: #FAFAFC;
  border: 1px solid #E4E2EE;
  border-radius: 99px;
  padding: 3px 9px;
}
.wm-sup-auction-state.is-live { color: #fff; background: #B02E68; border-color: #B02E68; }
.wm-sup-auction-meta { font-size: 12.5px; color: #556070; }

/* ── "Popular from this supplier" (stream RECO) ───────────────────────── */
.wm-sup-popular { padding: 6px 48px 10px; }
@media (max-width: 640px) { .wm-sup-popular { padding: 6px 16px 8px; } }
.wm-sup-popular-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wm-sup-popular-head h2 {
  margin: 0;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 19px;
}
.wm-sup-popular-sub { font-size: 12.5px; color: #556070; }
/* The rail reuses the catalog card verbatim; only the column count and the
 * section's own padding differ from the grid it sits under. */
.wm-sup-popular .wm-grid { padding: 0; }
.wm-sup-popular .wm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .wm-sup-popular .wm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wm-sup-popular .wm-grid-4 { grid-template-columns: 1fr; } }

/* ── reviews module ───────────────────────────────────────────────────── */
.wm-sup-reviews { padding: 6px 48px 34px; }
@media (max-width: 640px) { .wm-sup-reviews { padding: 6px 16px 24px; } }
.wm-sup-reviews-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wm-sup-reviews-head h2 {
  margin: 0;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 19px;
}
.wm-sup-reviews-sub { font-size: 12.5px; color: #556070; }
.wm-sup-reviews-summary { font-size: 14px; }
.wm-sup-noreviews {
  border: 1px dashed #E4E2EE;
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  font-size: 13.5px;
  color: #556070;
}
.wm-sup-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 800px) { .wm-sup-review-grid { grid-template-columns: 1fr; } }
.wm-sup-review {
  border: 1px solid #E4E2EE;
  border-radius: 12px;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wm-sup-review-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: #556070;
  flex-wrap: wrap;
}
.wm-sup-review-head b { color: #1A202C; }
.wm-sup-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #186A3B;
  background: #E8F5EC;
  border-radius: 99px;
  padding: 2px 8px;
}
/* Imported-review source chip — same seat as the verified pill, muted:
   an imported card must never read as a verified purchase. */
.wm-sup-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #64707D;
  background: #EEF0F3;
  border-radius: 99px;
  padding: 2px 8px;
}
.wm-sup-review-when { margin-left: auto; }
.wm-sup-review-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: #1A202C; }
.wm-sup-review-axes {
  font-size: 11.5px;
  color: #556070;
  font-family: "JetBrains Mono", monospace;
}
.wm-sup-allreviews {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #452B90;
  text-decoration: none;
}
.wm-sup-allreviews:hover { color: #321F69; }

.wm-sup-about {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
  color: #1A202C;
}

/* ── LK shop banner presets — THE SAME eight gradients the /w/ storefront
 * paints (windex.php preset map); a liquidator picking a preset in the
 * cabinet gets it on both surfaces. ── */
.wm-sup-banner-p1 { background: linear-gradient(115deg, #4A3468, #7A6396 46%, #C0A98A); }
.wm-sup-banner-p2 { background: linear-gradient(115deg, #123B47, #2E7D6E 52%, #D6C39A); }
.wm-sup-banner-p3 { background: linear-gradient(115deg, #3B1F2B, #8A4257 50%, #E0A87E); }
.wm-sup-banner-p4 { background: linear-gradient(115deg, #1D2440, #4B5B8C 50%, #B9C6E0); }
.wm-sup-banner-p5 { background: linear-gradient(115deg, #5C2340, #A34D74 50%, #E8C2D2); }
.wm-sup-banner-p6 { background: linear-gradient(115deg, #16324F, #3D6DA8 50%, #BFD5EE); }
.wm-sup-banner-p7 { background: linear-gradient(115deg, #5A431F, #8A5A2B 50%, #EBD9BC); }
.wm-sup-banner-p8 { background: linear-gradient(115deg, #23222B, #4B4956 50%, #C9C7D4); }

/* ── message-supplier modal (operator 2026-08-19) ─────────────────────── */
.wm-msg-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 32, 44, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* [hidden] must WIN over the display:flex above — this surface's known
   display-beats-hidden defect class (search panel, guide overlay, manifest
   rows all needed the same rule). */
.wm-msg-overlay[hidden] { display: none !important; }
.wm-msg-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(26, 32, 44, 0.35);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wm-msg-modal > b { font-family: "Poppins", "Inter", sans-serif; font-size: 17px; font-weight: 600; }
.wm-msg-sub { margin: 0; font-size: 13px; color: #556070; }
.wm-msg-modal textarea {
  width: 100%;
  border: 1px solid #E4E2EE;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.wm-msg-modal textarea:focus { outline: 2px solid #452B90; outline-offset: 1px; }
.wm-msg-close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border: 0; background: none;
  font-size: 24px; line-height: 1; color: #556070; cursor: pointer; border-radius: 8px;
}
.wm-msg-close:hover { background: #F4F2FA; color: #1A202C; }
.wm-msg-note { margin: 0; font-size: 12.5px; color: #556070; min-height: 16px; }
.wm-sup-id-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Supplier reply under a review (Parity wave B) */
.wm-sup-review-reply { margin: 8px 0 0 14px; padding: 8px 12px; border-left: 3px solid #A64B1E; background: #F6F5F1; border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.5; color: #1A202C; }
.wm-sup-review-reply .wm-sup-review-when { margin-left: 8px; }

/* The shop's tagline, mirrored under the name (2026-08-20) */
.wm-sup-tagline { margin: 4px 0 0; font-size: 13.5px; color: #5A6474; line-height: 1.5; max-width: 62ch; }

/* Program badges + header actions (2026-08-20, Faire parity).
 * SAME gutter as .wm-sup-identity (0 48px, full width) — the old
 * `max-width: 1280px; margin: auto` centered this row on a page that is
 * Faire-width, drifting the badge ~200px off the left edge on wide screens
 * (operator report 2026-08-20). One container system per page. */
.wm-sup-badges { margin: 10px 0 0; padding: 0 48px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .wm-sup-badges { padding: 0 16px; } }
.wm-sup-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: #F1F5F9; color: #1A202C; text-decoration: none; border: 1px solid #E2E8F0; }
.wm-sup-badge.is-sale { background: #FDF0E7; color: #A64B1E; border-color: #F0D9C8; }
.wm-sup-badge-more { color: #452B90; font-weight: 700; margin-left: 2px; }
a.wm-sup-badge:hover { border-color: #CBD5E1; }
#wmSupFollow.is-on { background: #452B90; border-color: #452B90; color: #fff; }
#wmSupFollow.is-on:hover { background: #321F69; border-color: #321F69; box-shadow: inset 0 0 0 1px #170D3E; }
#wmSupFollow svg, #wmSupShare svg { vertical-align: -1px; }

/* Rich share sheet (2026-08-20) — cabinet mShare anatomy on wm styling */
.wm-share-ovl { position: fixed; inset: 0; background: rgba(20, 20, 28, .5); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wm-share-ovl[hidden] { display: none; }
.wm-share-modal { background: #fff; border-radius: 14px; max-width: 460px; width: 100%; padding: 20px 22px; box-shadow: 0 24px 60px rgba(15, 20, 40, .28); }
.wm-share-modal h3 { margin: 0 0 12px; font-size: 17px; }
.wm-share-prev { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.wm-share-prev img { border-radius: 10px; object-fit: cover; flex: none; }
.wm-share-mono { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #452B90; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.wm-share-prev b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-share-meta { display: block; font-size: 12px; color: #5A6474; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-share-text { width: 100%; box-sizing: border-box; border: 1px solid #E2E8F0; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.5; color: #1A202C; resize: vertical; }
.wm-share-text:focus { outline: 2px solid #452B90; outline-offset: 1px; }
.wm-share-nets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.wm-shnet { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #1A202C; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.wm-shnet:hover { border-color: #CBD5E1; background: #fff; box-shadow: inset 0 0 0 1px #CBD5E1; }
.wm-shnet .ic { flex: none; width: 22px; height: 22px; border-radius: 6px; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wm-shnet .ic svg { width: 13px; height: 13px; }
.wm-share-hint { margin-top: 10px; font-size: 11.5px; color: #5A6474; line-height: 1.45; }
.wm-share-acts { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.wm-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); background: #1A202C; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 95; max-width: 90vw; }
.wm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px) { .wm-share-nets { grid-template-columns: repeat(2, 1fr); } }