/* wholesale-market-home.css — the public Closo Wholesale Marketplace home
 * (/wholesale) and sold archive (/wholesale/sold). S4, 2026-08-19.
 *
 * Design source: the wsmk canvas artboards Home.dc.html / SoldArchive.dc.html
 * — composition and copy are reproduced 1:1 in the views; this sheet carries
 * their inline styles as classes.
 *
 * Tokens (from the canvas): ink #1A202C, muted #556070, line #E4E2EE,
 * purple #452B90 (hover #321F69), soft #FAFAFC. Type: Poppins for display
 * (falls back to Inter — the shop realm self-hosts Inter + JetBrains Mono in
 * shop-storefront.css and no Poppins face; the stack keeps the design intent
 * without a third-party font host), Inter for text, JetBrains Mono for
 * numerals.
 *
 * Loaded via <link> from the market views with a DirectAssetPin `?v=` (pin is
 * derived from bytes — never hand-bumped). Class prefix `wsm-` so nothing
 * here can collide with shop-storefront.css. */
.wsm { background: #fff; color: #1A202C; font-family: "Inter", system-ui, -apple-system, sans-serif; }
:where(.wsm) a { color: inherit; text-decoration: none; }
:where(.wsm) a:hover { color: #321F69; }
.wsm a, .wsm button { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.wsm a:focus-visible, .wsm button:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; }
.wsm-display { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; }
.wsm-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
/* ── header ──────────────────────────────────────────────────────────────── */
.wsm-header { display: flex; align-items: center; gap: 20px; padding: 18px 48px; border-bottom: 1px solid #E4E2EE; }
.wsm-logo { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: #1A202C; }
.wsm-logo em { font-style: normal; color: #452B90; }
.wsm-search { flex: 1; max-width: 480px; display: flex; align-items: center; gap: 9px; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 999px; padding: 10px 18px; color: #556070; font-size: 13.5px; }
.wsm-header-spacer { flex: 1; }
.wsm-header-auth { display: flex; align-items: center; gap: 10px; }
.wsm-btn-ghost { font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 999px; color: #1A202C; }
.wsm-btn-ghost:hover { background: #F4F2FA; color: #1A202C; }
.wsm-btn-solid { font-size: 13.5px; font-weight: 600; padding: 10px 20px; background: #452B90; color: #fff; border-radius: 999px; }
.wsm a.wsm-btn-solid:hover { color: #fff; background: #321F69; }
/* ── section nav (sold archive) ──────────────────────────────────────────── */
.wsm-nav { display: flex; align-items: center; gap: 6px; padding: 0 48px; border-bottom: 1px solid #E4E2EE; }
.wsm-nav-item { font-size: 14px; font-weight: 500; color: #556070; padding: 15px 14px; }
.wsm-nav-item.is-active { font-weight: 600; color: #1A202C; border-bottom: 2px solid #452B90; }
.wsm-nav-window { margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #556070; }
/* ── hero ────────────────────────────────────────────────────────────────── */
.wsm-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; padding: 64px 48px 56px; }
.wsm-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.wsm-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #452B90; }
.wsm-h1 { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 44px; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.wsm-hero-sub { font-size: 16.5px; line-height: 1.6; color: #556070; max-width: 480px; }
.wsm-hero-ctas { display: flex; gap: 12px; margin-top: 6px; }
.wsm-cta-primary { font-size: 15px; font-weight: 600; padding: 14px 28px; background: #452B90; color: #fff; border-radius: 999px; }
.wsm a.wsm-cta-primary:hover { color: #fff; background: #321F69; }
.wsm-cta-secondary { font-size: 15px; font-weight: 600; padding: 14px 28px; border: 1.5px solid #1A202C; border-radius: 999px; }
.wsm a.wsm-cta-secondary:hover { color: #1A202C; background: #F4F2FA; }
.wsm-hero-stats { display: flex; gap: 22px; margin-top: 14px; font-size: 13px; color: #556070; }
.wsm-hero-stats b { color: #1A202C; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
/* hero visual: two gradient blocks + the floating live-lot card */
.wsm-hero-visual { position: relative; height: 420px; }
/* The two hero panels render REAL lot photos when the controller has them
 * (inline background-image: url(photo), gradient — the kraft gradient stays
 * as the bottom layer while the photo loads / when there is none). */
.wsm-hero-block-a { position: absolute; left: 0; top: 0; width: 62%; height: 300px; border-radius: 18px; background: linear-gradient(135deg, #E9E5DC, #D6D0C2); background-size: cover; background-position: center; box-shadow: 0 1px 2px rgba(26,32,44,0.06), 0 8px 24px rgba(26,32,44,0.07); }
.wsm-hero-block-b { position: absolute; right: 0; top: 48px; width: 46%; height: 240px; border-radius: 18px; background: linear-gradient(135deg, #DDD6E9, #C8BEDC); background-size: cover; background-position: center; box-shadow: 0 1px 2px rgba(26,32,44,0.06), 0 8px 24px rgba(26,32,44,0.07); }
.wsm-hero-card { position: absolute; left: 36px; bottom: 0; width: 300px; background: #fff; border: 1px solid #E4E2EE; border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 36px rgba(26,32,44,0.14); display: flex; flex-direction: column; gap: 5px; }
.wsm-badge-manifested { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #186A3B; background: #E8F5EC; border-radius: 99px; padding: 2px 8px; }
.wsm-hero-card-title { font-size: 14.5px; line-height: 1.3; font-weight: 700; }
.wsm-hero-card-est { font-size: 12px; color: #556070; }
.wsm-hero-card-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.wsm-hero-card-price .wsm-price { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 18px; }
.wsm-hero-card-price .wsm-retail { font-size: 12px; color: #556070; text-decoration: line-through; }
/* ── categories ──────────────────────────────────────────────────────────── */
.wsm-cats { padding: 8px 48px 48px; display: flex; flex-direction: column; gap: 18px; }
.wsm-h2 { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 20px; margin: 0; }
.wsm-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.wsm-cat { display: flex; flex-direction: column; gap: 8px; }
.wsm-cat-tile { aspect-ratio: 1; border-radius: 14px; background-size: cover; background-position: center; background-color: #E9E5DC; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wsm-cat:hover .wsm-cat-tile { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,32,44,0.12); }
.wsm-cat:hover .wsm-cat-name { color: #321F69; }
.wsm-cat-name { font-size: 13px; font-weight: 700; }
.wsm-cat-count { font-size: 11.5px; color: #556070; margin-top: -6px; }
/* the artboard's six tile gradients, cycled by position — background-image
 * (not the shorthand) so a photo tile's cover-sizing survives, and an inline
 * photo simply outranks the gradient while keeping it as the load fallback */
.wsm-cat:nth-child(6n+1) .wsm-cat-tile { background-image: linear-gradient(135deg, #E9E5DC, #D6D0C2); }
.wsm-cat:nth-child(6n+2) .wsm-cat-tile { background-image: linear-gradient(135deg, #DCE3DC, #C4D0C4); }
.wsm-cat:nth-child(6n+3) .wsm-cat-tile { background-image: linear-gradient(135deg, #E4DCE9, #CFC2DA); }
.wsm-cat:nth-child(6n+4) .wsm-cat-tile { background-image: linear-gradient(135deg, #E9DEDA, #D8C6BE); }
.wsm-cat:nth-child(6n+5) .wsm-cat-tile { background-image: linear-gradient(135deg, #DCE4E9, #C2D2DC); }
.wsm-cat:nth-child(6n+6) .wsm-cat-tile { background-image: linear-gradient(135deg, #E6E2D8, #D2CCBC); }
/* ── value props ─────────────────────────────────────────────────────────── */
.wsm-props { margin: 0 48px; border-top: 1px solid #E4E2EE; padding: 44px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.wsm-prop { display: flex; flex-direction: column; gap: 8px; }
.wsm-prop-title { font-size: 15px; font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; }
.wsm-prop-body { font-size: 13.5px; line-height: 1.55; color: #556070; }
/* ── auction band ────────────────────────────────────────────────────────── */
.wsm-auction-band { margin: 4px 48px 48px; background: #1A202C; border-radius: 18px; padding: 32px 36px; display: flex; align-items: center; gap: 28px; color: #fff; }
.wsm-auction-copy { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wsm-auction-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #B7A2F2; }
.wsm-auction-title { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 22px; }
.wsm-auction-sub { font-size: 13.5px; color: #A8B0BC; }
.wsm-auction-chip { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 20px; }
.wsm-auction-dot { width: 8px; height: 8px; border-radius: 50%; background: #F87171; }
.wsm-auction-chip-name { font-size: 13px; font-weight: 600; }
.wsm-auction-chip-clock { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 16px; }
.wsm-auction-cta { font-size: 14px; font-weight: 600; padding: 12px 24px; background: #fff; color: #1A202C; border-radius: 999px; white-space: nowrap; }
.wsm a.wsm-auction-cta:hover { color: #1A202C; background: #E4E2EE; }
/* ── liquidator CTA ──────────────────────────────────────────────────────── */
.wsm-liq-band { margin: 0 48px 56px; border: 1px solid #E4E2EE; border-radius: 18px; padding: 30px 36px; display: flex; align-items: center; gap: 24px; background: #FAFAFC; }
.wsm-liq-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.wsm-liq-title { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 18px; }
.wsm-liq-sub { font-size: 13.5px; color: #556070; }
.wsm-liq-cta { font-size: 14px; font-weight: 600; padding: 12px 24px; border: 1.5px solid #1A202C; border-radius: 999px; white-space: nowrap; }
/* ── footer ──────────────────────────────────────────────────────────────── */
.wsm-footer { display: flex; gap: 26px; align-items: center; padding: 18px 48px; border-top: 1px solid #E4E2EE; font-size: 12px; color: #556070; }
.wsm-footer .wsm-logo { font-size: 12px; }
.wsm-footer-tail { margin-left: auto; }
/* ── sold archive: stats band ────────────────────────────────────────────── */
.wsm-sold-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 48px 6px; }
.wsm-stat-tile { background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 14px; padding: 15px 18px; }
.wsm-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #556070; }
.wsm-stat-value { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 22px; margin-top: 4px; }
.wsm-stat-value.is-accent { color: #B02E68; }
.wsm-stat-note { font-size: 11px; color: #556070; margin-top: 2px; }
.wsm-sold-lede { padding: 10px 48px 4px; font-size: 12.5px; color: #556070; }
/* ── sold archive: table ─────────────────────────────────────────────────── */
.wsm-sold-table { margin: 14px 48px 30px; border: 1px solid #E4E2EE; border-radius: 16px; overflow: hidden; }
.wsm-sold-row { display: grid; grid-template-columns: 76px 2.2fr 1fr 1fr 1fr 0.9fr; align-items: center; border-bottom: 1px solid #E4E2EE; }
.wsm-sold-row:last-child { border-bottom: 0; }
.wsm-sold-head { background: #FAFAFC; }
.wsm-sold-th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #556070; padding: 10px 14px; }
.wsm-sold-thumb { width: 56px; height: 42px; border-radius: 8px; margin: 10px 0 10px 14px; background: linear-gradient(135deg, #E9E5DC, #D6D0C2); object-fit: cover; }
.wsm-sold-lot { padding: 10px 14px; }
.wsm-sold-lot b { font-size: 13.5px; }
.wsm-sold-lot-meta { font-size: 11.5px; color: #556070; }
.wsm-sold-price { padding: 10px 14px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 14px; }
.wsm-sold-retail { padding: 10px 14px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; color: #556070; text-decoration: line-through; }
.wsm-sold-retail.is-empty { text-decoration: none; }
.wsm-sold-cleared { padding: 10px 14px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; }
.wsm-sold-channel { padding: 10px 14px; }
.wsm-chip { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 99px; padding: 2px 9px; }
.wsm-chip-buynow { color: #452B90; background: #EDE8F8; }
.wsm-chip-auction { color: #B02E68; background: #FBE3EE; }
.wsm-sold-empty { padding: 26px 14px; font-size: 13.5px; color: #556070; text-align: center; }
/* ── sold archive: save-search CTA ───────────────────────────────────────── */
.wsm-save-band { display: flex; gap: 16px; align-items: center; margin: 0 48px 30px; padding: 16px 22px; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 14px; font-size: 13px; color: #556070; }
.wsm-save-band b { color: #1A202C; font-weight: 600; }
.wsm-save-cta { margin-left: auto; font-size: 13px; font-weight: 600; color: #452B90; white-space: nowrap; }
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Mobile gutter unified with the shared chrome: 16px. */
  .wsm-header, .wsm-nav, .wsm-sold-lede { padding-left: 16px; padding-right: 16px; }
  .wsm-hero { grid-template-columns: 1fr; gap: 32px; padding: 36px 16px 32px; }
  .wsm-h1 { font-size: 32px; }
  .wsm-hero-visual { height: 320px; }
  .wsm-cats { padding: 8px 16px 32px; }
  .wsm-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wsm-props { margin: 0 16px; grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .wsm-auction-band { margin: 4px 16px 32px; flex-wrap: wrap; }
  .wsm-liq-band { margin: 0 16px 36px; flex-wrap: wrap; }
  .wsm-footer { padding: 18px 16px; flex-wrap: wrap; gap: 14px; }
  .wsm-sold-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 16px 6px; }
  .wsm-sold-table, .wsm-save-band { margin-left: 16px; margin-right: 16px; }
  .wsm-sold-table { overflow-x: auto; }
  .wsm-sold-row { min-width: 720px; }
  .wsm-search { display: none; }
}
/* ── W1 mobile audit (360-430px pass) ────────────────────────────────────
 * Tap targets ≥44px on the touch controls; the section nav scrolls inside
 * itself instead of widening the page; narrow-phone tuning for the hero
 * card and category tiles. */
@media (max-width: 960px) {
  .wsm-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wsm-nav::-webkit-scrollbar { display: none; }
  .wsm-nav-item { white-space: nowrap; }
  .wsm-nav-window { white-space: nowrap; }
  .wsm-btn-ghost { padding-top: 12px; padding-bottom: 12px; }
  .wsm-btn-solid { padding-top: 12px; padding-bottom: 12px; }
  .wsm-header { gap: 10px; }
  .wsm-header-auth { gap: 6px; }
}
@media (max-width: 480px) {
  /* Two category tiles per row — three at 360px squeezes the labels. */
  .wsm-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* The floating hero card spans the phone width instead of a fixed 300px
   * box hanging off a 36px inset. */
  .wsm-hero-card { left: 12px; right: 12px; width: auto; }
  .wsm-hero-visual { height: 290px; }
  .wsm-hero-ctas { flex-wrap: wrap; }
  .wsm-cta-primary, .wsm-cta-secondary { padding: 13px 22px; font-size: 14px; }
  .wsm-hero-stats { flex-wrap: wrap; gap: 10px 16px; }
  .wsm-h1 { font-size: 28px; }
  .wsm-auction-band { padding: 22px 20px; }
  .wsm-liq-band { padding: 22px 20px; }
}
/* ── Operator 2026-08-19: the HOME page reads at closo.co's width; the
 * catalog keeps the full-bleed shell. Top-level home sections centered at
 * 1200px — the footer and chrome stay full-width. ── */
.wsm-hero, .wsm-cats, .wsm-props, .wsm-sold, .wsm-auction-band,
.wsm-steps, .wsm-liq-band, .wsm-promo { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ── Mobile gutter, restored (operator 2026-08-20) ─────────────────────────
   The centering rule above (`max-width:1200px; margin-left:auto;
   margin-right:auto`) was added later in this file than the mobile
   `margin: 0 16px` overrides, so ON PHONES IT WON AND FLATTENED THE GUTTER:
   measured at 390px the props band's text started at x=0 and the two card
   bands at 20-21px, while every other band on the page starts at 16.

   ⛔ ORDER IS THE WHOLE FIX. These declarations must stay LAST in the file —
      moved above the centering rule they lose again, silently, and only on a
      phone. Desktop is untouched: above 960px the auto margins still centre
      the 1200px column. */
@media (max-width: 960px) {
  .wsm-props,
  .wsm-sold,
  .wsm-auction-band,
  .wsm-steps,
  .wsm-liq-band {
    margin-left: 16px;
    margin-right: 16px;
  }
  /* ⛔ NOT `.wsm-promo`: it carries its OWN 16px padding at this width, so a
     margin here doubles its gutter to 32 — measured after the first pass. */
}

/* ── Bands that read as a sentence on a phone (operator 2026-08-20) ────────
   Both bands are a flex row of copy + CTA, and the copy carried `flex: 1`
   — basis 0, so it never asks for room. The ~137px button took the row and
   the heading was squeezed into 153px: "Liquidator auctions, open to watch"
   came out one word per line, a 298px tall band (measured at 390px).
   A real basis makes the button wrap to its own line and gives the sentence
   the full width. Same failure, same fix as the lot page's insider banner. */
@media (max-width: 640px) {
  .wsm-auction-copy,
  .wsm-liq-copy { flex: 1 1 240px; }
  .wsm-auction-cta,
  .wsm-liq-cta { flex: 0 0 auto; }
}

/* The category band's heading row: the tiles show the whole vocabulary today
   and this is the way out to everything once it outgrows two rows. */
.wsm-cats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.wsm-cats-all {
  font-size: 13.5px;
  font-weight: 600;
  color: #452B90;
  text-decoration: none;
  white-space: nowrap;
}
.wsm-cats-all:hover { text-decoration: underline; }