/* wholesale-market-faire.css — the Faire-benchmark layout of the Closo
 * Wholesale home (/wholesale) and the storefront chrome header (2026-09-05).
 *
 * Loaded ONLY when WholesaleHomeFaire::on() (flag or ?layout=faire preview),
 * after wholesale-market.css and wholesale-market-home.css. Class prefixes:
 * `wm-header--f` / `wm-catbar` (chrome), `wsf-` (home sections). Tokens are
 * the storefront's own: ink #1A202C, muted #556070, line #E4E2EE, purple
 * #452B90 (hover #321F69), soft #FAFAFC, wash #F1ECFA. The site gutter is
 * 48px (16px under 960px) — every block here uses it, none carries its own. */

/* ── offer bar above the header (Faire's thin promo line) ─────────────── */
.wm-topbar { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px var(--wm-pad); background: #F1ECFA; color: #321F69; font-size: 13px; line-height: 1.4; }
.wm-topbar b { font-weight: 700; }
.wm-topbar a { color: #452B90; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.wm-topbar a:hover { color: #321F69; }
/* ── header: logo · ONE wide search · doors (the Faire retailer header) ── */
.wm-header--f { gap: 18px; padding: 14px var(--wm-pad); }
.wm-header--f .wm-search { max-width: 640px; padding: 11px 18px; background: #F4F2FA; border-color: #E4E2EE; }
.wm-header--f .wm-search:focus-within { background: #fff; border-color: #452B90; box-shadow: 0 0 0 3px rgba(69,43,144,.12); }
.wm-header--f .wm-header-cta { gap: 6px; }
/* The proxied copy's signed-out CTA, hidden until the viewer chip answers for a viewer it knew (the
   inline script in _chrome.php sets is-pending; wholesale-market.js replaces the node). */
.wm-header-cta.is-pending > * { visibility: hidden; }
.wm-header--f .wm-btn-sell { color: #556070; }
.wm-header--f .wm-btn-sell:hover { color: #1A202C; background: #F4F2FA; }
/* ── Narrow desktop: the header sheds the one link that lives elsewhere ────
   Between 1025 and the width where everything fits, the row ran past the
   screen and the WHOLE PAGE scrolled sideways. The burger that normally
   carries the overflow does not appear until 1024, so nothing was absorbing it.

   ⛔ MEASURE THIS WITH `scrollX`, NOT `scrollWidth`. The header is
   `position: sticky`, and `documentElement.scrollWidth` UNDER-REPORTS because
   of it — at 1025 it says 1021 against a 1025 viewport while the page still
   scrolls 11px. The honest probe is `window.scrollTo(3000,0)` then read
   `window.scrollX`. A first pass at this fix was accepted on the wrong probe
   and left 11px behind; a fresh review caught it.

   Measured on prod with `scrollX`, untreated: 138 at 1025, 103 at 1030, 63 at
   1100, 3 at 1160, clean from 1163.

   Faire's own answer, and the one this header already states above: one wide
   search, then the doors. So the SEARCH and BOTH DOORS stay, and the supplier
   link goes — it is the only item here that is reachable elsewhere at this
   width (`.wsmf` in the footer carries «Sell on Closo»; checked in the DOM).
   «Setup guide» deliberately STAYS: its only other home is the burger, which
   is hidden here, so dropping it would make it unreachable. The divider folds
   with it on the same reasoning the 900px rule below already uses — one
   utility fewer, nothing left to divide.

   Hiding the link alone left 11px at 1025, 6 at 1030, 1 at 1035 — the row still
   needed 1036 of content width. The last of it comes from the header's own flex
   gap, 18 → 14 in the same band: it is the cheapest 12px on the row and it
   touches no gutter, so the header keeps the page's 48px edge and stays aligned
   with the content below it.

   The band ends at 1180 though the untreated row is already clean from 1163 —
   deliberate margin, not a measurement. Note also that this is calibrated
   against a header carrying the 206px «Ask Closo Assistant» pill, which is
   CONDITIONAL (_chrome.php gates it on the assistant's viewer config); without
   it the row fits at 1025 unaided and this rule hides the link for nothing.

   Verified with the scrollX probe, one fresh context per width, 1015→1210 in
   5px steps on /wholesale/lots, a shelf page and the account door: no
   horizontal scroll at any width, two doors visible above 1024 throughout. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .wm-header--f { gap: 14px; }
  .wm-header--f .wm-header-cta .wm-btn-sell,
  .wm-header--f .wm-header-cta .wm-cta-div { display: none; }
}
/* ── category bar under the header (Faire's department row) ──────────── */
.wm-catbar { display: flex; align-items: center; gap: 2px; padding: 0 var(--wm-pad); border-bottom: 1px solid #E4E2EE; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wm-catbar::-webkit-scrollbar { display: none; }
.wm-catbar-item { font-size: 13.5px; font-weight: 500; color: #556070; padding: 13px 11px; border-bottom: 2px solid transparent; white-space: nowrap; }
.wm-catbar-item:hover { color: #1A202C; border-bottom-color: #CBC4E4; }
.wm-catbar-item.is-active { color: #1A202C; font-weight: 600; border-bottom-color: #452B90; }
.wm-catbar-sep { width: 1px; height: 18px; background: #E4E2EE; margin: 0 8px; flex: none; }
/* Hover panels (desktop only): the bar stops scrolling so a panel can hang
   below it; on touch widths the bar scrolls and the panels never paint. */
.wm-catbar-cell { position: relative; flex: none; }
.wm-catbar-cell--end { margin-left: auto; }
.wm-catbar-item--more svg { display: inline-block; vertical-align: -1px; margin-left: 3px; }
/* Every header panel is capped at the viewport it drops into and scrolls
   inside itself below that — a panel taller than the screen puts its own
   content out of reach with nothing to say so (measured at 1366×768,
   2026-09-07). Tall screens are unaffected. */
.wm-catbar-panel { display: none; position: absolute; left: 0; top: 100%; z-index: 40; min-width: 220px; padding: 10px 8px; background: #fff; border: 1px solid #E4E2EE; border-radius: 14px; box-shadow: 0 16px 40px rgba(26,32,44,.14); max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.wm-catbar-cell--end .wm-catbar-panel { left: auto; right: 0; }
.wm-catbar-panel a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: #1A202C; white-space: nowrap; }
.wm-catbar-panel a:hover { background: #F4F2FA; color: #452B90; }
.wm-catbar-panel a.all { font-weight: 600; color: #452B90; border-bottom: 1px solid #F0EEF6; border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.wm-catbar-panel--list { min-width: 200px; }
/* «All lots ▾» mega-menu (grouping spec wave 2, mockup F): four columns, 170px each,
   18px gap, 18/22 padding, 14px radius — the mockup's own values. */
.wm-catbar-item--all svg { margin-left: 2px; vertical-align: -1px; }
.wm-catbar-mega { display: none; grid-template-columns: repeat(4, 170px); gap: 18px; padding: 18px 22px; min-width: 0; }
/* One notch more specific than the generic panel rule below (display: block), or the grid collapses to one column. */
.wm-catbar-cell--all:hover > .wm-catbar-panel.wm-catbar-mega, .wm-catbar-cell--all:focus-within > .wm-catbar-panel.wm-catbar-mega { display: grid; }
.wm-mega-col h6 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #1A202C; }
.wm-mega-col h6 + a { margin-top: 0; }
.wm-mega-col a + h6 { margin-top: 12px; }
.wm-mega-col a { display: block; padding: 2px 0; border-radius: 0; font-size: 12px; color: #3F4756; white-space: nowrap; }
.wm-mega-col a:hover { background: transparent; color: #452B90; }
.wm-mega-col a.more { color: #452B90; font-weight: 600; margin-top: 4px; }
.wm-catbar-panel--why { min-width: 320px; padding: 10px; }
.wm-catbar-panel--why a { display: flex; flex-direction: column; gap: 2px; white-space: normal; padding: 9px 12px; }
.wm-catbar-panel--why b { font-weight: 600; font-size: 13.5px; }
.wm-catbar-panel--why span { font-size: 12.5px; color: #556070; line-height: 1.4; }
@media (min-width: 1025px) {
  .wm-catbar { overflow: visible; flex-wrap: nowrap; }
  /* Inline categories by width; the rest live under "More". */
  .wm-catbar-cell--cat { display: none; }
  /* ONE inline category here, not three. Measured 2026-09-09: the bar's fixed
     furniture (All lots ▾, More ▾, Collections ▾, the separator, three plain
     items, the end cell) is 727px plus 96px of padding, so THREE categories
     need a 1274px viewport — and this block starts at 1025. Between those two
     the row ran 127-202px past the screen and the whole page scrolled sideways,
     because `overflow: visible` above (needed so the dropdown panels can
     escape) means the bar cannot absorb its own overflow. Nothing is lost when
     a chip drops off — every category is under «More ▾».

     ⛔ THE RUNGS ARE NOT LOAD-BEARING, AND MUST NOT BECOME SO. The chips are the
     SAME on every page — one cached top-12 (_chrome.php → topCategories(12)),
     not per-page copy — so the variable is not the page, it is TIME: the ranking
     churns as inventory does, and a longer label set walks the bar back over the
     edge with no code change. Measured slack over the current labels is 65px at
     the thinnest rung, not the ~100 an earlier draft of this comment claimed;
     with the longest names actually in the registry the 1880 and 2120 rungs
     overflow again. The cap below is what makes that impossible; the rungs only
     choose how much fits comfortably. */
  .wm-catbar-cell--c0 { display: block; }
  /* The guard: a chip can never be wide enough to push the document, whatever
     the registry starts calling things. */
  .wm-catbar-item { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
  .wm-catbar-cell:hover > .wm-catbar-item, .wm-catbar-cell:focus-within > .wm-catbar-item { color: #1A202C; border-bottom-color: #452B90; }
  .wm-catbar-cell:hover > .wm-catbar-panel, .wm-catbar-cell:focus-within > .wm-catbar-panel { display: block; }
}
/* 1440, not 1280 (wave 3, 2026-09-07): with «All lots ▾» and «Collections ▾» in the row,
   five inline categories at 1366 pushed the row 132px past the viewport (measured).
   RE-MEASURED 2026-09-09 — that pass moved one rung and left the rest short, so the
   row still overflowed at 1440 (by 27px), at 1600 and at 1800. Minimum viewport that
   fits, measured by binary search on the live labels: 1 → ≤900 · 2 → 1115 · 3 → 1282 ·
   5 → 1529 · 7 → 1809 · 9 → 2021. Every rung below clears its own number, and the
   max-width cap above catches the case where tomorrow's labels do not. */
/* 2026-09-28: the rungs measure the BAR'S COLUMN, not the screen. Since THE COLUMN the bar's content
   is the page column — 1260 on a reading page, 1680 on a lot-grid page — so a screen rung let a 1920
   lot page print seven chips into 1260px and the end items squeezed to «A Su Pa». The bar is its own
   inline-size container; each rung is the old viewport rung minus the 96px of padding it assumed. */
.wm-catbar { container-type: inline-size; }
@container (min-width: 1084px) { .wm-catbar-cell--c1 { display: block; } }
@container (min-width: 1284px) { .wm-catbar-cell--c2 { display: block; } }
@container (min-width: 1524px) { .wm-catbar-cell--c3, .wm-catbar-cell--c4 { display: block; } }
@container (min-width: 1784px) { .wm-catbar-cell--c5, .wm-catbar-cell--c6 { display: block; } }
@container (min-width: 2024px) { .wm-catbar-cell--c7, .wm-catbar-cell--c8 { display: block; } }
@media (max-width: 1024px) { .wm-catbar-cell--end { margin-left: 0; } .wm-catbar-cell--more, .wm-catbar-cell--colls { display: none; } .wm-topbar { padding: 8px var(--wm-pad); font-size: 12.5px; }
  /* The category strip's GUTTER moves with the header above it (2026-09-07).
     Its touch behaviour — sideways scroll, no hover panels — stays at 960,
     because a 1000px laptop still has a mouse. */
  .wm-catbar { padding-left: var(--wm-pad); padding-right: var(--wm-pad); } }
/* Touch widths: the SAME query the burger paints under (wholesale-market.css
   637/643 — "this query MUST match"): wordmark · sign-up door · burger on row
   one, the search on its own full row, then the category bar. The base sheet
   hides every header button ≤1024; the sign-up door is re-shown here on
   purpose — one visible door, as on Faire's phone header. */
@media (max-width: 1024px) {
  .wm-header--f { flex-wrap: wrap; gap: 10px 12px; padding: 12px var(--wm-pad); }
  .wm-header--f .wm-wordmark { order: 0; }
  .wm-header--f .wm-header-spacer { order: 1; flex: 1; display: block; }
  .wm-header--f .wm-header-cta { order: 2; margin-left: auto; }
  .wm-header--f .wm-header-cta .wm-btn-ghost, .wm-header--f .wm-header-cta .wm-cta-div { display: none; }
  .wm-header--f .wm-header-cta .wm-btn-solid { display: inline-flex; align-items: center; align-self: center; height: 36px; padding: 0 14px; font-size: 13px; line-height: 1; }
  .wm-header--f .wmfab { order: 3; margin-left: 0; }
  .wm-header--f .wm-search { order: 4; flex: 1 1 100%; max-width: none; }
}
@media (max-width: 960px) {
  /* Phone: the strip scrolls sideways only. overflow-x:auto alone lets a
     1-2 px vertical overflow (item padding + underline) scroll the strip up
     and down under the thumb (operator 2026-09-06). */
  .wm-catbar { padding: 0 var(--wm-pad); overflow-y: hidden; }
  .wm-catbar-item { padding: 12px 10px; }
  /* No hover panels inside the strip: a touch's sticky :hover opened them
     clipped inside the scrolling bar (operator 2026-09-07). A tap on a
     grouped item opens the full sheet instead (chrome script); a category
     tap goes straight to its shelf. */
  .wm-catbar-cell:hover > .wm-catbar-panel, .wm-catbar-cell:focus-within > .wm-catbar-panel,
  .wm-catbar-cell--all:hover > .wm-catbar-panel.mm-host, .wm-catbar-cell--all:focus-within > .wm-catbar-panel.mm-host,
  .wm-catbar-cell--all:hover > .wm-catbar-panel.wm-catbar-mega, .wm-catbar-cell--all:focus-within > .wm-catbar-panel.wm-catbar-mega { display: none !important; }
}

/* ── home: hero banner (Faire editorial — one photo panel, one message) ── */
.wsf-hero { padding: 28px var(--wm-pad) 8px; }
.wsf-hero-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; background: #F1ECFA; background-image: radial-gradient(900px 480px at 8% 0%, #E8E0FA 0%, rgba(232,224,250,0) 70%); border-radius: 24px; padding: 48px 48px 48px 52px; overflow: hidden; }
.wsf-hero-copy { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.wsf-hero-copy .wsm-h1 { font-size: 46px; }
.wsf-hero-copy .wsm-hero-sub { max-width: 46ch; }
.wsf-hero-trust { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 13px; color: #556070; margin-top: 4px; }
.wsf-hero-trust b { color: #1A202C; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
.wsf-hero-visual { position: relative; min-height: 380px; }
.wsf-hero-photo { position: absolute; inset: 0; 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 12px 32px rgba(26,32,44,0.10); }
.wsf-hero-visual .wsm-hero-card { left: 20px; bottom: 20px; width: 290px; }
/* ── section head shared by the rows ─────────────────────────────────── */
.wsf-row { padding: 40px var(--wm-pad) 0; display: flex; flex-direction: column; gap: 16px; }
.wsf-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Ivan 2026-10-29 («поправь отступы у стрелок справа», Faire benchmark): in a row with an eyebrow the
   right-hand block — «See all» and the carousel arrows — sits on the TITLE line, centred on the H2
   (Faire: arrows + link level with the heading), not on the eyebrow baseline where `baseline` put it
   (measured on prod: arrows top 177 / H2 219–249). 27px = eyebrow line (15px) + its 12px margin;
   30px = one H2 line — a two-line H2 on a phone keeps the block on its first line. Rows without an
   eyebrow already centre on the H2 by baseline and are left alone (:has() — older engines keep the old look). */
.wsf-row-head:has(.wsf-row-eyebrow) { align-items: flex-start; }
.wsf-row-head:has(.wsf-row-eyebrow) > .wsm-cats-all, .wsf-row-head:has(.wsf-row-eyebrow) > .wsf-rail-end { margin-top: 27px; min-height: 30px; display: inline-flex; align-items: center; }
.wsf-row-sub { font-size: 13px; color: #556070; margin: 4px 0 0; }
/* «Tell us where you resell» (P1, ТЗ 2026-09-26 §5) — same rhythm as .wsf-row's
   own gutter, the .wm-search-note caption weight, a link in the site accent. */
.wsf-nudge { margin: 12px var(--wm-pad) 0; font-size: 13px; line-height: 1.5; color: #556070; }
.wsf-nudge a { color: #452B90; font-weight: 600; text-decoration: none; }
.wsf-nudge a:hover { text-decoration: underline; }
@media (max-width: 640px) { .wsf-nudge { margin: 12px var(--wm-pad) 0; } }
/* ── "New this week": the storefront's own lot cards in a 4-up row ─────── */
.wsf-lots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* ── category tiles: ONE scrolling row on a phone (Faire), grid on desktop ─ */
.wsf-cats .wsm-cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* the tile link positions its hidden long label (.wm-sr is absolute): without this the span widens the page at phone width */
.wsf-cats .wsm-cat { position: relative; }
/* ── the promo rail (Why buy) sits right under the hero, as on Faire ───── */
.wsf-promo { padding-top: 32px; }
@media (max-width: 1100px) { .wsf-lots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wsf-cats .wsm-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .wsf-hero { padding: 16px var(--wm-pad) 0; }
  .wsf-hero-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px 18px 18px; border-radius: 20px; }
  .wsf-hero-copy .wsm-h1 { font-size: 32px; }
  .wsf-hero-visual { min-height: 260px; }
  .wsf-hero-visual .wsm-hero-card { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .wsf-row { padding: 32px var(--wm-pad) 0; }
  .wsf-lots, .wm-search-sup .wsf-sups { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .wsf-lots::-webkit-scrollbar, .wm-search-sup .wsf-sups::-webkit-scrollbar { display: none; }
  .wsf-lots > *, .wm-search-sup .wsf-sups > * { flex: 0 0 76%; scroll-snap-align: start; min-width: 0; }
  .wsf-cats .wsm-cat-grid { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .wsf-cats .wsm-cat-grid::-webkit-scrollbar { display: none; }
  .wsf-cats .wsm-cat { flex: 0 0 38%; scroll-snap-align: start; }
}

/* ── suppliers to know (Faire's brand cards): 3 covers, name, live lots ── */
.wsf-sups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wsf-sup { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #E4E2EE; border-radius: 18px; background: #fff; color: #1A202C; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.wsf-sup:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,32,44,.12); }
.wsf-sup-covers { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; aspect-ratio: 3 / 2; margin-bottom: 8px; }
.wsf-sup-covers span { display: block; border-radius: 10px; background: #E9E5DC center/cover no-repeat; min-height: 0; }
.wsf-sup-covers span:first-child { grid-row: 1 / span 2; }
.wsf-sup-covers span.ph { background: #F1ECFA; }
.wsf-sup-covers--1 { grid-template-columns: 1fr; }
.wsf-sup-covers--1 span:first-child { grid-row: 1 / span 2; }
.wsf-sup-covers--2 { grid-template-columns: 1fr 1fr; }
.wsf-sup-covers--2 span { grid-row: 1 / span 2; }
.wsf-sup-name { font-family: "Poppins", Poppins Fallback, "Inter", Inter Fallback, system-ui, sans-serif; font-weight: 600; font-size: 16px; }
.wsf-sup-meta { display: flex; gap: 14px; font-size: 13px; color: #556070; }
.wsf-sup-meta b { color: #1A202C; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
.wsf-sup-rating { color: #1A202C; } .wsf-sup-rating em { font-style: normal; color: #556070; }
.wsf-sup-cta { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: #452B90; }
/* No cover to show (a shop with no lot on the page, a registry-only company):
   the mosaic's frame holds the name's initial — the monogram idiom of the
   supplier page header, at the card's scale. */
.wsf-sup-covers--mono { grid-template-columns: 1fr; }
.wsf-sup-covers--mono span { grid-row: 1 / span 2; display: grid; place-items: center; background: #F1ECFA; font-family: "Poppins", Poppins Fallback, "Inter", Inter Fallback, system-ui, sans-serif; font-weight: 600; font-size: 44px; color: #452B90; }
/* The quiet card: a registry company without a storefront on Closo — a door
   into the directory, visibly secondary to a shop with live lots. */
.wsf-sup--reg { background: #FAFAFC; border-style: dashed; }
.wsf-sup--reg .wsf-sup-covers--mono span { background: #fff; color: #7A7290; }
.wsf-sup--reg .wsf-sup-cta { color: #556070; }
/* ── included with every order (Faire's icon list) ───────────────────── */
.wsf-incl { margin: 48px var(--wm-pad) 0; padding: 40px 0 0; border-top: 1px solid #E4E2EE; gap: 22px; }
.wsf-incl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; }
.wsf-incl-list li { display: flex; gap: 14px; align-items: flex-start; }
.wsf-incl .ic { width: 44px; height: 44px; border-radius: 12px; background: #FAFAFC; border: 1px solid rgba(26,32,44,.06); display: grid; place-items: center; flex: none; }
.wsf-incl .ic svg { width: 18px; height: 18px; stroke: #452B90; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wsf-incl-list li > span:last-child { display: block; font-size: 14px; line-height: 1.5; color: #556070; }
.wsf-incl-list li b { display: block; margin-bottom: 3px; color: #1A202C; font-weight: 600; font-size: 15px; }
.wsf-incl-list li a { color: #452B90; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* ── supplier door: Faire's photo band ───────────────────────────────── */
.wsf-sell { margin: 8px var(--wm-pad) 56px; position: relative; overflow: hidden; border-radius: 24px; min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 52px; background: #1A202C center/cover no-repeat; color: #fff; }
.wsf-sell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,40,.86) 0%, rgba(20,16,40,.62) 55%, rgba(20,16,40,.30) 100%); }
.wsf-sell > * { position: relative; }
.wsf-sell-copy { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.wsf-sell-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.wsf-sell h2 { font-family: "Poppins", Poppins Fallback, "Inter", Inter Fallback, system-ui, sans-serif; font-weight: 600; font-size: 32px; line-height: 1.15; margin: 0; }
.wsf-sell p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.85); }
.wsf-sell-cta { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 12px; background: #fff; color: #452B90; font-weight: 700; font-size: 15px; text-decoration: none; }
.wsf-sell-cta:hover { background: #F1ECFA; }
@media (max-width: 1100px) { .wsf-incl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .wsf-sups, .wsf-incl-list { grid-template-columns: 1fr; }
  .wsf-incl { margin: 36px var(--wm-pad) 0; padding: 28px 0 0; }
  .wsf-sell { margin: 8px var(--wm-pad) 40px; flex-direction: column; align-items: flex-start; padding: 28px 22px; min-height: 0; }
  .wsf-sell h2 { font-size: 26px; }
}

/* ── THE GUTTER — one rule for every top-level block of the Faire home ────
   The classic home centres its sections in a 1200px column with their own
   48px padding (wholesale-market-home.css), which put "Shop by category" at
   x=113 while the hero and the header sat at 48 (operator 2026-09-05:
   «the side spacing differs everywhere»). Under the variant every block reads
   the SAME edge as the header and the category bar: 48px, 16px on a phone.
   Padded sections carry it as padding; boxed bands (dark/photo) as margin.
   A new block joins one of these two lists — it never brings its own. */
.wsf .wsf-hero, .wsf .wsm-promo, .wsf .wsm-cats, .wsf .wsf-row, .wsf .wsm-newsup, .wsf .wsf-formats, .wsf .wsf-collections,
/* The programmatic pages and the price guide joined this list on 2026-09-07.
   They had been carrying their own `padding: … 48px` with their own
   breakpoints, which agreed with the rest of the storefront at 1366 by
   coincidence and stopped agreeing in between: measured at 900 px the
   breadcrumbs sat at 48, the H1 at 16 and the questions at 48 — three gutters
   on one screen. They are listed WITHOUT the `.wsf` scope because those pages
   have no `.wsf` wrapper; the rule is still the one rule. The registry's
   «Browse the registry» band (.rgd, registry/_directory.php) joined on
   2026-09-12 — its predecessor lists had sat on the left edge at 1440.
   The registry's Places pages joined on 2026-09-22 with ONE name: every
   top-level section of every places view is a `.wpl-sec`, so the pages have
   no gutter of their own to drift (archtest registry_places_frame.php).
   The registry index's own sections after the list (door, FAQ, «Are you a
   supplier?» — the Zillow form, 2026-09-23) joined as `.rg-sec`. */
.pg-crumbs, .pg-guide, .pg-grid, .wsf-faq, .wsf-steps, .wsf-related, .wsf-guides, .wsf-prog-head, .wsf-row, .wm-cathead, .wm-brandhead, .wm-about, .rgd, .rg-sec, .wm-shelf-bar, .wpl-sec,
/* 2026-09-27 (Ivan, «проверь все страницы»): the side is THE COLUMN's --wm-pad (wholesale-market.css) —
   48, 16 from 1024 down, and the centred 1260 column's edge on a wide screen, the header's edge on
   every page. Joined the list: the catalogue shell (.wm-layout: rail + column, one padded section —
   its blocks carry no side of their own, wholesale-market-filters.css), and .wm-sec — THE class a new top-level
   section of any storefront view takes instead of a gutter of its own. */
.wm-layout, .wm-sec {
  max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--wm-pad); padding-right: var(--wm-pad); box-sizing: border-box;
}
/* …and a listed block INSIDE a frame that already sits on the column (.hub-wrap, .pgx, the
   registry's .rg2, the landing pages' .wml, the supplier's crumb strip) adds no side of its own:
   the frame carries it. Measured 2026-09-27 at 1440: the es-mx and tool FAQs, the registry
   profile's link rails / About / FAQ / «Similar live lots», the supplier's crumbs — each 83px
   further in than the column, two gutters stacked. (The catalogue shell's own list is in
   wholesale-market-filters.css; `main[class="hub-wrap"] > …` in wholesale-hub.css predates this.)
   Closo Research's main.rs (2026-10-06) is such a frame too: its crumbs sat 82px (1440) / 16px (390) in.
   The registry claim pages' .rg-wrap (claim_style.php, 2026-10-21) is one too: the place claim page's owner
   band (_place_claim.php, a .wpl-sec) sat 475px wide between 640px siblings at 1440 — two gutters stacked. */
:is(.hub-wrap, .pgx, .rg2, .wml, .wm-sup-crumbs, main.rs, .rg-wrap, .blog-root) :is(.pg-crumbs, .pg-guide, .pg-grid, .wsf-faq, .wsf-steps, .wsf-related, .wsf-guides, .wsf-prog-head, .wsf-row, .wm-cathead, .wm-brandhead, .wm-about, .rgd, .rg-sec, .wm-shelf-bar, .wpl-sec, .wm-sec, .wsp-reco, .pg-more) { padding-left: 0; padding-right: 0; } /* a phone swipe rail (.hub-lots) restores its bleed padding in wholesale-hub.css */
.wsf .wsf-sell, .wsf .wsm-auction-band, .wsf-cta { max-width: none; margin-left: var(--wm-pad); margin-right: var(--wm-pad); }
.wsf .wsf-incl { margin-left: var(--wm-pad); margin-right: var(--wm-pad); padding-left: 0; padding-right: 0; padding-bottom: 48px; }
/* ⛔ THE PAGE NARROWS WHEN THE CHROME DOES — 1024, NOT 960. The header
   restructures for touch at 1024 (it wraps, the search takes its own row, the
   burger appears) and drops to a 16px gutter there. The content used to hold
   48 until 960, so between those two widths the header sat at the screen edge
   above a page still inset by 48 — measured on a 1000px window, 2026-09-07,
   and visible on every storefront page. One boundary now — and since
   2026-09-27 it is the token's own (--wm-gutter switches at 1024), so there is
   no 16px twin of the list to keep in step. */
@media (max-width: 1024px) {
  .wsf .wsf-incl { padding-bottom: 32px; }
}

/* ── Faire phone pass (2026-09-05) ─────────────────────────────────────── */
.wm-topbar .wm-topbar-m { display: none; } /* desktop: the long line + link; the phone rule below re-shows it */
@media (max-width: 640px) {
  /* The offer bar is ONE tappable line on a phone (Faire's promo bar). */
  .wm-topbar { padding: 0; }
  .wm-topbar > span, .wm-topbar > a { display: none; }
  .wm-topbar .wm-topbar-m { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: #321F69; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wm-topbar .wm-topbar-m b { font-weight: 700; }
  /* The home hero's doors stack full-width. */
  .wsf-hero .wsm-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .wsf-hero .wsm-hero-ctas a { text-align: center; box-sizing: border-box; width: 100%; display: inline-flex; justify-content: center; }
  .wsf-hero-trust { flex-direction: column; gap: 8px; }
  .wsf-hero-trust > span { display: flex; align-items: center; gap: 8px; }
  .wsf-hero-trust > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #452B90; flex: none; }
}

/* ── Faire's phone menu: a full-height sheet, not a dropdown ─────────────── */
.wmfab-sheet--f { position: fixed; inset: 0; top: 0; right: 0; left: auto; width: min(100vw, 420px); max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 9999; background: #fff; border: 0; border-radius: 0; box-shadow: -12px 0 40px rgba(26,32,44,.18); padding: 0 0 28px; display: flex; flex-direction: column; }
.wmfab-sheet--f[hidden] { display: none; }
html.wmfab-open, html.wmfab-open body { overflow: hidden; }
html.wmfab-open .ca-dock, html.wmfab-open .wm-topbar { display: none; } /* the assistant dock would cover the sheet's foot */
.wmfab-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #E4E2EE; }
.wmfab-brand { font-family: "Poppins", Poppins Fallback, "Inter", Inter Fallback, system-ui, sans-serif; font-weight: 700; font-size: 17px; color: #1A202C; }
.wmfab-brand b { color: #452B90; font-weight: 700; }
.wmfab-close { width: 38px; height: 38px; border-radius: 999px; border: 1px solid #E4E2EE; background: #fff; color: #1A202C; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wmfab-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 6px; }
.wmfab-sheet--f .wmfab-item { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; text-align: center; }
.wmfab-sheet--f .wmfab-item-solid { background: #452B90; color: #fff; }
.wmfab-sheet--f .wmfab-item-outline { border: 1.5px solid #1A202C; color: #1A202C; background: #fff; }
.wmfab-group { padding: 10px 6px 4px; border-bottom: 1px solid #F0EEF6; }
.wmfab-h { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #556070; }
.wmfab-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #1A202C; text-decoration: none; }
.wmfab-row::after { content: ""; width: 8px; height: 8px; border-right: 1.8px solid #9AA0AE; border-bottom: 1.8px solid #9AA0AE; transform: rotate(-45deg); margin-left: 12px; flex: none; }
.wmfab-row:hover, .wmfab-row:active { background: #F4F2FA; color: #452B90; }
.wmfab-foot { padding: 14px 6px 0; margin-top: auto; }
/* Phone burger: the mega-menu as nested native <details> (mockup F). */
.wmfab-mega > summary { list-style: none; cursor: pointer; }
.wmfab-mega > summary::-webkit-details-marker { display: none; }
.wmfab-mega[open] > summary::after { transform: rotate(-135deg); }
.wmfab-mega-body { padding: 2px 0 6px 10px; }
.wmfab-sub { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: #3F4756; text-decoration: none; }
.wmfab-sub--all { color: #452B90; font-weight: 600; }
.wmfab-mega-group > summary { list-style: none; cursor: pointer; font-weight: 600; color: #1A202C; display: flex; align-items: center; justify-content: space-between; }
.wmfab-mega-group > summary::-webkit-details-marker { display: none; }
.wmfab-mega-group > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid #9AA0AE; border-bottom: 1.6px solid #9AA0AE; transform: rotate(45deg); margin-left: 12px; flex: none; }
.wmfab-mega-group[open] > summary::after { transform: rotate(-135deg); }
.wmfab-sub--leaf { padding-left: 22px; }
.wmfab-sub--more { color: #452B90; font-weight: 600; }
.wmfab-sub:hover, .wmfab-sub:active { background: #F4F2FA; color: #452B90; }
.wmfab-row-sell { color: #452B90; font-weight: 600; }
.wmfab-row-sell::after { display: none; }

/* ── Shop by format (grouping spec wave 1, 2026-09-06) — the strip between the
   promo rail and «Shop by category»; joins the centering rule above. ── */
.wsf-formats { padding-top: 8px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; }
.wsf-formats .wsm-cats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wsf-formats-sub { margin: -8px 0 0; color: #556070; font-size: 14px; }
.wsf-format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wsf-format { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; border: 1px solid #E4E2EE; border-radius: 14px; padding: 16px 18px; background: #fff; color: #1A202C; transition: box-shadow .15s ease, transform .15s ease; }
.wsf-format:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26, 32, 44, .12); color: #1A202C; }
.wsf-format b { display: block; font-size: 15px; font-weight: 700; }
.wsf-format p { margin: 2px 0 0; color: #556070; font-size: 12.5px; line-height: 1.35; }
.wsf-format .wsf-format-n { display: block; margin-top: 6px; color: #452B90; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wsf-format-ico { width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, #E9E5DC, #D6D0C2); display: grid; place-items: center; }
.wsf-format-ico svg { width: 36px; height: 36px; color: #5C4B2F; shape-rendering: geometricPrecision; }
@media (max-width: 960px) { .wsf-format-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wsf-format { transition: none; } .wsf-format:hover { transform: none; } }
/* Collections row (grouping spec wave 3, mockup B): cards with a 12px gap, 12px radius,
   14/14/12 padding, 96px min height, title 13.5/700, line 11.5 — the mockup's own values.
   Faire carousel (operator 2026-09-17): ONE row that scrolls sideways, never a stack. The
   tiles keep their design; only the layout changed. The track bleeds to the screen edge
   (margin = −gutter, padding = +gutter, same 48/16 as the centering rule above) so the
   first tile still sits on the gutter and a swipe reads edge to edge — the overflow is
   on the ROW, the page never scrolls sideways. The vertical padding (20 above: the 2px lift + the
   shadow's 18px upward blur; 40 below) hosts the hover lift and its shadow, which
   overflow-x would otherwise clip; the negative margins give it
   back, so the row's footprint stays 0 above / 6 below as before. 5.5 tiles show on a
   desktop (the half tile is the affordance), 3.25 on a tablet, 2.2 on a phone.
   Scrollbar: thin without script; hidden once wholesale-market.js §12 has proven overflow
   and revealed the head arrows (.is-car). The arrows sit right of the H2 (Faire «Shop
   by …»), the .wm-catnav-arrow visual; gone on touch widths — a thumb scrolls the row. */
.wsf-collections { padding-top: 8px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; }
.wsf-collections .wsm-cats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wsf-coll-grid { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 20px 0 40px; margin: -20px 0 -34px; } /* inside the content column at every width, Faire: the row clips at the gutter, never bleeds to the viewport edge (Ivan 2026-10-24); the vertical pad/margin pair only keeps the hover lift unclipped */
.wsf-coll-grid:focus-visible { outline: 2px solid #452B90; outline-offset: -3px; border-radius: 12px; } /* the track is a keyboard scroll region; inset so the ring never widens the row */
.wsf-coll-grid > *:focus-visible { outline-offset: -2px; } /* the row clips at the column edge now (2026-10-24): an inset ring stays whole on the first and last tile */
.wsf-collections.is-car .wsf-coll-grid { scrollbar-width: none; }
.wsf-collections.is-car .wsf-coll-grid::-webkit-scrollbar { display: none; }
.wsf-coll-grid > .wsf-coll { flex: 0 0 calc((100% - 4 * 12px) / 5.5); min-width: 168px; box-sizing: border-box; scroll-snap-align: start; }
.wsf-coll { border-radius: 12px; padding: 14px 14px 12px; min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; color: #1A202C; background: #F1ECFA; transition: box-shadow .15s ease, transform .15s ease; }
.wsf-coll:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26, 32, 44, .12); color: #1A202C; }
.wsf-coll b { font-size: 13.5px; font-weight: 700; }
.wsf-coll span { font-size: 11.5px; color: #556070; margin-top: 3px; }
.wsf-car-nav { display: inline-flex; align-items: center; gap: 8px; align-self: center; height: 0; } /* zero height: the head keeps the H2's height, the 38px arrows centre on it — H2→sub stays 6px like «Shop by format» (measured 2026-09-17) */
.wsf-car-nav[hidden] { display: none !important; }
.wsf-car-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E4E2EE; border-radius: 999px; background: #fff; color: #1A202C; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.wsf-car-btn > svg { width: 17px; height: 17px; display: block; }
.wsf-car-btn:hover:not(:disabled) { border-color: #452B90; color: #452B90; background: #F7F5FC; }
.wsf-car-btn:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; }
.wsf-car-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 1024px) {
  .wsf-coll-grid { scroll-snap-type: x mandatory; }
  .wsf-coll-grid > .wsf-coll { flex-basis: calc((100% - 2 * 12px) / 3.25); }
  .wsf-car-nav { display: none !important; }   /* a thumb scrolls the row on a phone */
}
@media (max-width: 640px) { .wsf-coll-grid > .wsf-coll { flex-basis: calc((100% - 12px) / 2.2); min-width: 148px; } }
@media (prefers-reduced-motion: reduce) { .wsf-coll { transition: none; } .wsf-coll:hover { transform: none; } .wsf-coll-grid { scroll-behavior: auto; } }