/** * Closo Wholesale Marketplace — public catalog chrome + cards (S1). * Tokens are the approved artboards' own (wsmk Main.dc / Home.dc / * MobileCatalog.dc): #452B90 accent · #1A202C ink · #556070 muted · * #E4E2EE lines · #FAFAFC card bg · pill buttons · 14px card radius · * kraft photo placeholder gradient. Fonts: Poppins (display), Inter (text), * JetBrains Mono (numbers) — linked from _chrome.php. * * Mobile per MobileCatalog.dc: single column under 640px, filter chips in * one horizontal-scroll row. */ /* Scrollbar appearance must never shift the layout between pages. */ html { scrollbar-gutter: stable; } .wm { margin: 0 auto; /* ONE page container across every marketplace page (catalog, home, sold, * lot, auctions) — same max-width the lot/auctions documents center at, * so tab navigation never jumps in width. Widened 1280 -> 1720 (operator * 2026-08-19: Faire-width surface); wide viewports add grid columns below. */ max-width: none; background: #fff; color: #1A202C; font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; } :where(.wm) a { color: inherit; text-decoration: none; } :where(.wm) a:hover { color: #321F69; } /* ── wm-* components are SELF-SUFFICIENT ───────────────────────────────── * The lot/auctions documents render this chrome after their OWN ; no * component may depend on a `.wm` ancestor for its text color or link * decoration — every base class below carries its own. */ .wm-wordmark, .wm-btn-ghost, .wm-btn-solid, .wm-btn-outline, .wm-tab, .wm-chip, .wm-drop-panel a, .wm-footer a, .wm-card-cta, .wm-find-similar, .wm-heart, .wm-teaser-cta, .wm-card-link, .wm-week-title { text-decoration: none; } .wm-btn-ghost, .wm-btn-solid, .wm-btn-outline, .wm-tab, .wm-chip, .wm-card-cta, .wm-teaser-cta, .wm-footer a, .wm-drop-panel a, .wm-find-similar, .wm-heart, .wm-wordmark { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* Keyboard focus — every interactive element on the surface. */ .wm a:focus-visible, .wm button:focus-visible, .wm summary:focus-visible, .wm input:focus-visible, a[class*="wm-"]:focus-visible, button[class*="wm-"]:focus-visible, summary[class*="wm-"]:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; } /* ── header ─────────────────────────────────────────────────────────── */ .wm-header { display: flex; align-items: center; gap: 20px; padding: 18px 48px; border-bottom: 1px solid #E4E2EE; } .wm-wordmark { font-family: "Poppins", "Inter", sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: #1A202C; white-space: nowrap; } .wm-wordmark span { color: #452B90; } .wm-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; } .wm-search input { flex: 1; border: 0; background: transparent; font: inherit; color: #1A202C; outline: none; padding: 0; min-width: 0; } .wm-search input::placeholder { color: #556070; } .wm-header-spacer { flex: 1; } .wm-header-cta { display: flex; align-items: center; gap: 10px; } .wm-btn-ghost { font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 999px; color: #1A202C; white-space: nowrap; } .wm-btn-supply { color: #556070; } .wm-btn-supply:hover { color: #1A202C; background: #F4F2FA; } @media (max-width: 900px) { .wm-btn-supply { display: none; } } .wm-btn-ghost:hover { background: #F4F2FA; color: #1A202C; box-shadow: inset 0 0 0 1px #E4E2EE; } /* Button chrome, Faire benchmark (operator 2026-08-20): a real 1px ink * border at rest; on hover the border DOUBLES via an inset ring — the * box-shadow trick keeps the geometry byte-identical, so nothing shifts. * The ground stays white on hover (the ring is the event); the tint is the * PRESS (:active), one step later, exactly Faire's order. */ .wm-btn-outline { border: 1px solid #1A202C; border-radius: 999px; padding: 10px 22px; color: #1A202C; background: #fff; } .wm-btn-outline:hover { background: #fff; color: #1A202C; box-shadow: inset 0 0 0 1px #1A202C; } .wm-btn-outline:active { background: #F4F2FA; } .wm-btn-solid { font-size: 13.5px; font-weight: 600; padding: 10px 20px; background: #452B90; color: #fff; border-radius: 999px; white-space: nowrap; border: 0; cursor: pointer; } .wm-btn-solid:hover { background: #321F69; color: #fff; box-shadow: inset 0 0 0 1px #170D3E; } .wm-btn-solid:active { background: #2A1A58; } /* Header CTAs — Stripe / Airbnb secondary-button benchmark (operator * 2026-08-20): a ghost button with NO border at rest reads as text, and the * three header doors (Setup guide / Apply to sell / Log in) were exactly * that — nothing said they were pressable until the pointer was already on * them. Each now carries a 1px hairline at rest. Hover takes the border to * ink while the ground stays white (Airbnb's move, and the same order * .wm-btn-outline already codifies above); the tint is the PRESS, one step * later. Geometry is byte-identical: the 1px border is subtracted from the * padding, and the solid gets a same-colour border so all four pills share * one height. Scoped to .wm-header-cta on purpose — the in-page ghost links * (auction guides, CTA bands) keep their flat look. */ .wm-header-cta .wm-btn-ghost { border: 1px solid #DDDBE7; background: #fff; padding: 9px 15px; box-shadow: 0 1px 1px rgba(16, 24, 40, .03); transition: border-color .15s ease, background-color .15s ease; } .wm-header-cta .wm-btn-ghost:hover { background: #fff; color: #1A202C; border-color: #1A202C; box-shadow: 0 1px 1px rgba(16, 24, 40, .03); } .wm-header-cta .wm-btn-ghost:active { background: #F4F2FA; } .wm-header-cta .wm-btn-ghost:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; } .wm-header-cta .wm-btn-solid { border: 1px solid #452B90; padding: 9px 19px; } /* …and a RANK inside that cluster (operator 2026-08-20: "они сейчас все * одинаковые"). One border for four buttons is affordance without hierarchy — * the eye cannot tell the main door from a help link. Three tiers, the Stripe * / Airbnb / Faire split, every one of them still visibly pressable: * solid Sign up free — the action the page wants * outline Log in — the second door, for people who have one * tonal Setup guide / Apply to sell — utilities: a soft ground carries the * click, no border competes with the doors. * A hairline divider separates the two utilities from the two doors, so the * cluster reads as two groups instead of a row of four. */ .wm-header-cta .wm-btn-guide, .wm-header-cta .wm-btn-supply { border-color: transparent; background: #F4F2FA; color: #4A5262; box-shadow: none; } .wm-header-cta .wm-btn-guide:hover, .wm-header-cta .wm-btn-supply:hover { background: #EBE7F7; color: #1A202C; border-color: transparent; box-shadow: none; } .wm-header-cta .wm-btn-guide:active, .wm-header-cta .wm-btn-supply:active { background: #E2DCF3; } .wm-cta-div { width: 1px; height: 22px; background: #E4E2EE; flex: 0 0 auto; } @media (max-width: 900px) { .wm-cta-div { display: none; } } /* ── section nav ────────────────────────────────────────────────────── */ .wm-nav { display: flex; align-items: center; gap: 6px; padding: 0 48px; border-bottom: 1px solid #E4E2EE; } .wm-tab { font-size: 14px; font-weight: 500; color: #556070; padding: 15px 14px; border-bottom: 2px solid transparent; white-space: nowrap; } .wm-tab:hover { color: #1A202C; } .wm-tab.is-active { font-weight: 600; color: #1A202C; border-bottom-color: #452B90; } .wm-nav-count { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 12px; color: #556070; white-space: nowrap; } /* ── filters ────────────────────────────────────────────────────────── */ .wm-applied { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 16px 48px 0; } .wm-applied-label { font-size: 12.5px; color: #556070; } .wm-filters { display: flex; align-items: center; gap: 9px; padding: 18px 48px 4px; } .wm-chip { display: inline-block; font-size: 12.5px; font-weight: 500; border: 1px solid #E4E2EE; border-radius: 999px; padding: 8px 15px; cursor: pointer; list-style: none; white-space: nowrap; background: #fff; color: #1A202C; } .wm-chip span { color: #556070; } .wm-chip b { font-weight: 700; margin-left: 2px; } .wm-chip.is-on { font-weight: 600; color: #452B90; background: #EDE8F8; border-color: #452B90; } .wm-chip:hover { border-color: #452B90; color: #452B90; } .wm-chip.is-on span { color: #452B90; } .wm-drop { position: relative; } .wm-drop summary::-webkit-details-marker { display: none; } .wm-drop summary { list-style: none; } .wm-drop-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 170px; background: #fff; border: 1px solid #E4E2EE; border-radius: 12px; box-shadow: 0 12px 36px rgba(26, 32, 44, 0.14); padding: 6px; display: flex; flex-direction: column; } .wm-drop-panel a { font-size: 13px; padding: 8px 12px; border-radius: 8px; color: #1A202C; } .wm-drop-panel a:hover { background: #FAFAFC; color: #452B90; } .wm-sort { margin-left: auto; font-size: 12.5px; color: #556070; white-space: nowrap; } .wm-sort b { color: #1A202C; font-weight: 600; } /* ── grid + cards ───────────────────────────────────────────────────── */ .wm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 20px 48px 28px; } .wm-card { position: relative; border: 1px solid #E4E2EE; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .wm-card:hover, .wm-card:focus-within { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26, 32, 44, 0.12); } .wm-card:hover .wm-card-cta { color: #321F69; } .wm-card-link { position: absolute; inset: 0; z-index: 1; } .wm-card-photo { aspect-ratio: 4 / 3; position: relative; background: linear-gradient(135deg, #E9E5DC, #D6D0C2); /* kraft placeholder */ overflow: hidden; } /* Composed cover (COVER wave). The drawn SVG is set inline by _card.php as a background-image LAYERED OVER the kraft gradient, so a cover that fails to fetch degrades to exactly the placeholder this file already painted. The cover is authored 4:3 — the same ratio as the frame — so `cover` sizing crops nothing. Only ever present on a card with no printable photo. */ .wm-card-photo.has-cover { background-size: cover, auto; background-position: center, 0 0; background-repeat: no-repeat, no-repeat; } .wm-card-photo img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; } .wm-photo-count { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; background: rgba(26, 32, 44, 0.82); color: #fff; border-radius: 5px; padding: 2px 8px; } .wm-find-similar { position: absolute; z-index: 2; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.94); color: #1A202C; border-radius: 999px; padding: 6px 11px; box-shadow: 0 1px 4px rgba(26, 32, 44, 0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, color 0.15s ease; } .wm-find-similar:hover { color: #452B90; } .wm-card:hover .wm-find-similar, .wm-card:focus-within .wm-find-similar { opacity: 1; pointer-events: auto; } .wm-heart { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(26, 32, 44, 0.18); display: flex; align-items: center; justify-content: center; color: #556070; } .wm-heart:hover { color: #B02E68; } .wm-card-body { padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; flex-grow: 1; } .wm-badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; } .wm-badge-manifested { color: #186A3B; background: #E8F5EC; } .wm-badge-assortment { color: #1D5FBF; background: #DCEAFB; } .wm-badge-unmanifested { color: #8A5A00; background: #FDF3E0; } .wm-card-title { font-size: 15px; line-height: 1.3; } .wm-card-meta { font-size: 12.5px; color: #556070; } .wm-card-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; } .wm-price { font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; } .wm-msrp { font-size: 12.5px; color: #556070; text-decoration: line-through; } .wm-msrp-plain { text-decoration: none; } .wm-off { margin-left: auto; font-size: 11px; font-weight: 700; color: #B02E68; background: #FBE3EE; border-radius: 99px; padding: 2px 8px; } .wm-card-cta { display: block; text-align: center; padding: 10px 0 12px; font-size: 13.5px; font-weight: 600; color: #452B90; border-top: 1px solid #E4E2EE; } .wm-card-cta:hover { color: #321F69; } /* ── empty state · pager · teaser ───────────────────────────────────── */ .wm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 72px 48px; text-align: center; } .wm-empty b { font-size: 16px; } .wm-empty span { font-size: 13.5px; color: #556070; } .wm-empty .wm-btn-outline { margin-top: 10px; } .wm-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 48px 28px; } .wm-pager-count { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #556070; } .wm-teaser { display: flex; gap: 16px; align-items: center; margin: 0 48px 28px; padding: 16px 22px; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 14px; font-size: 13px; color: #556070; } .wm-teaser svg { flex-shrink: 0; } .wm-teaser b { color: #1A202C; font-weight: 600; } .wm-teaser-cta { margin-left: auto; font-size: 13px; font-weight: 600; color: #452B90; white-space: nowrap; } .wm-teaser-cta:hover { color: #321F69; } /* ── footer ─────────────────────────────────────────────────────────── */ .wm-footer { display: flex; gap: 26px; align-items: center; padding: 18px 48px; border-top: 1px solid #E4E2EE; font-size: 12px; color: #556070; } .wm-footer a { color: #556070; } .wm-footer a:hover { color: #321F69; } .wm-footer .wm-wordmark { font-size: 12px; font-weight: 600; color: #1A202C; } .wm-footer .wm-wordmark:hover { color: #321F69; } .wm-footer-right { margin-left: auto; } /* ── responsive ─────────────────────────────────────────────────────── */ @media (max-width: 980px) { .wm-header, .wm-nav, .wm-applied, .wm-filters, .wm-grid, .wm-pager, .wm-footer { padding-left: 24px; padding-right: 24px; } .wm-teaser { margin-left: 24px; margin-right: 24px; } .wm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 640px) { .wm-header { flex-wrap: wrap; gap: 10px; padding: 14px 16px; } .wm-search { order: 3; flex-basis: 100%; max-width: none; } .wm-header-spacer { display: none; } .wm-btn-ghost { padding: 10px 8px; } .wm-header-cta .wm-btn-ghost { padding: 9px 7px; } .wm-nav { padding: 0 16px; overflow-x: auto; } .wm-nav-count { display: none; } .wm-applied { padding: 12px 16px 0; } .wm-filters { padding: 12px 16px 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wm-filters::-webkit-scrollbar { display: none; } .wm-sort { display: none; } .wm-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 16px 24px; } .wm-find-similar { opacity: 1; pointer-events: auto; } .wm-heart { width: 44px; height: 44px; } .wm-pager { padding: 0 16px 24px; } .wm-teaser { margin: 0 16px 24px; flex-wrap: wrap; } .wm-footer { padding: 16px; gap: 14px; flex-wrap: wrap; } } /* ── S1 polish: catnav · computed badges · quick add · saved heart ────── * Appended as a self-contained section (base rules first, own mobile * overrides last) — nothing above is reflowed. */ /* Category row — a slim strip of the top-6 categories under the nav. */ .wm-catnav { display: flex; align-items: center; gap: 8px; padding: 14px 48px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wm-catnav::-webkit-scrollbar { display: none; } .wm-catnav-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1A202C; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 999px; padding: 7px 14px; white-space: nowrap; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .wm-catnav-item span { font-weight: 500; color: #556070; } .wm-catnav-item:hover { border-color: #452B90; color: #452B90; } .wm-catnav-item.is-active { color: #452B90; background: #EDE8F8; border-color: #452B90; } .wm-catnav-item.is-active span { color: #452B90; } /* Badge row — the manifest badge plus the computed New / Selling fast. */ .wm-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .wm-badge-new { color: #452B90; background: #EDE8F8; } .wm-badge-fast { color: #B02E68; background: #FBE3EE; } /* RECO behavioural badges — only ONE of the four ever prints on a card * (PalletMarketFeedService::signalBadge). Bestseller is the accent itself, * Trending sits one step down the same family. */ .wm-badge-bestseller { color: #FFFFFF; background: #452B90; } .wm-badge-trending { color: #452B90; background: #FFFFFF; box-shadow: inset 0 0 0 1px #452B90; } /* Quick add pill — top-right of the photo box; hover-revealed on desktop * (mirrors .wm-find-similar), persistent on mobile below. */ .wm-bag-add { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.94); color: #1A202C; border-radius: 999px; padding: 6px 11px; box-shadow: 0 1px 4px rgba(26, 32, 44, 0.15); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .wm-bag-add:hover { color: #452B90; box-shadow: 0 1px 4px rgba(26, 32, 44, 0.15), inset 0 0 0 1px #452B90; } .wm-card:hover .wm-bag-add, .wm-card:focus-within .wm-bag-add { opacity: 1; pointer-events: auto; } .wm-bag-add.is-on { background: #452B90; color: #fff; } .wm-bag-add.is-on:hover { background: #321F69; color: #fff; } /* Saved heart — active state is the filled /w/ storefront red. */ .wm-heart.is-on { color: #B3261E; } .wm-heart.is-on svg path { fill: #B3261E; stroke: #B3261E; } /* Load-more counter label inside the anchor. */ .wm-lm-n { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; color: #556070; margin-left: 8px; } @media (max-width: 980px) { .wm-catnav { padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { .wm-catnav { padding: 10px 16px 0; } /* No hover on touch — the pill is a persistent small control. */ .wm-bag-add { opacity: 1; pointer-events: auto; padding: 5px 9px; } } /* ── W1 mobile audit (360-430px pass) ──────────────────────────────────── * Appended, self-contained: touch tap targets ≥44px on the shared chrome * controls, iOS-zoom-proof inputs, and a header cluster that holds one row * at 360px. Nothing above is reflowed on desktop. */ @media (max-width: 640px) { /* Tap targets: chips / category pills / door buttons reach ≥44px tall. */ .wm-chip { padding: 11px 15px; } .wm-catnav-item { padding: 11px 14px; } .wm-btn-ghost { padding-top: 12px; padding-bottom: 12px; } .wm-btn-solid { padding: 12px 16px; } .wm-header-cta .wm-btn-ghost { padding-top: 11px; padding-bottom: 11px; } .wm-header-cta .wm-btn-solid { padding: 11px 15px; } .wm-btn-outline { padding-top: 12px; padding-bottom: 12px; } .wm-tab { padding-top: 14px; padding-bottom: 14px; } /* Header cluster: tighter gaps so wordmark + Log in + Sign up hold one * row at 360px (the search box already wraps to its own full row). */ .wm-header { gap: 8px; } .wm-header-cta { gap: 6px; } /* 16px input font — iOS Safari must not zoom the page on focus. */ .wm-search { padding: 11px 16px; } .wm-search input { font-size: 16px; } } /* ── Faire-width viewports (operator 2026-08-19): the 1720px shell adds grid * columns instead of stretching three cards. ── */ @media (min-width: 1200px) { .wm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Rail hidden -> the freed width is a fifth card, not fatter cards. */ .wm-layout.filters-off .wm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1600px) { .wm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } } /* ── Rich category header (operator 2026-08-19, Faire frame; rev 4 — * «дорого»: label BELOW the photo, no scrim, cohesive studio photo set, * generous whitespace. DOM unchanged: .wm-cattile-ph, , . ── */ .wm-cathead { padding: 28px 48px 0; } .wm-cathead-title { margin: 0; font-family: "Poppins", "Inter", sans-serif; font-weight: 600; font-size: 27px; letter-spacing: -0.01em; color: #1A202C; } .wm-cathead-sub { margin: 6px 0 0; font-size: 14px; color: #556070; max-width: 72ch; } .wm-catnav.is-rich { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 20px; padding: 20px 48px 6px; overflow: visible; } .wm-cattile { display: block; text-decoration: none; color: #1A202C; } .wm-cattile-ph { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; border: 1px solid #ECEAF2; background: linear-gradient(135deg, #F1EFE9, #E7E3D9); background-size: cover; background-position: center; transition: box-shadow 0.18s ease, transform 0.18s ease; } .wm-cattile:hover .wm-cattile-ph { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26, 32, 44, 0.13); } .wm-cattile b { display: block; margin-top: 10px; font-family: "Poppins", "Inter", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #1A202C; } .wm-cattile span { display: block; margin-top: 1px; font-size: 12px; color: #556070; } .wm-cattile:hover b { color: #452B90; } .wm-cattile.is-active .wm-cattile-ph { box-shadow: 0 0 0 2.5px #452B90; } .wm-cattile.is-active b { color: #452B90; } @media (max-width: 640px) { .wm-cathead { padding: 18px 16px 0; } .wm-cathead-title { font-size: 21px; } .wm-catnav.is-rich { padding: 14px 16px 4px; gap: 14px; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wm-cattile { min-width: 150px; flex-shrink: 0; } } } /* ═══ PROMO STRIP — SHARED (moved out of wholesale-market-home.css, * 2026-08-20). The operator asked for the same band on the catalogue, and * the catalogue does not load the home sheet, so the component lives in the * one sheet BOTH surfaces load. WIDTH IS DELIBERATELY NOT SET HERE: the home * sheet caps it at 1200px alongside its siblings, while the catalogue is * full-bleed and the 48px padding below already matches .wm-grid's gutter. */ /* ── promo rail (operator 2026-08-19 rev 2: marketplace promo panels, NOT * SaaS chips — a tinted panel each, oversized display type, a watermark * glyph, an underlined CTA. Still by default; arrows move it. ── */ .wsm-promo { padding: 30px 48px 6px; } .wsm-promo-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .wsm-promo-nav { display: flex; gap: 8px; } .wsm-promo-nav[hidden] { display: none !important; } .wsm-promo-arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #E4E2EE; border-radius: 999px; background: #fff; color: #1A202C; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .wsm-promo-arrow:hover:not(:disabled) { border-color: #452B90; color: #452B90; background: #F7F5FC; } .wsm-promo-arrow:disabled { opacity: 0.35; cursor: default; } .wsm-promo-rail { /* A SHELF the reader moves with the arrows (operator 2026-08-20: "как раньше со стрелочками"). The band is the same 48px gutter every other home section uses — verified against the DOM, not assumed — and the card width below is derived FROM this container so a whole number of cards fills it exactly. That is what keeps the row flush with the page: nothing is ever half-visible at the right edge, which is what made earlier revisions read as wider than the page. */ display: flex; gap: 16px; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .wsm-promo-rail::-webkit-scrollbar { display: none; } .wsm-promo-card { /* Four cards plus their three 16px gaps equal the band exactly, at any viewport. A FIXED pixel width cannot do that -- five fixed cards overflow a narrower band and the fifth is sliced at the gutter. min-width:0 is the other half: a flex item defaults to min-width:auto, so long copy could still push a card past its basis. */ /* ⛔ BORDER-BOX, AND THE calc ABOVE IS WHY. Without it the card's own 20px side padding is ADDED to the computed basis — 288 becomes 328 — so four cards need 1360 of a 1200 band and the fourth is sliced at the edge. Measured on a headless render: cards 328px wide, gaps 16px, band 1200px. */ box-sizing: border-box; flex: 0 0 calc((100% - 48px) / 4); min-width: 0; max-width: 100%; scroll-snap-align: start; position: relative; overflow: hidden; min-height: 136px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 18px 20px; border-radius: 16px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .wsm-promo-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(26, 32, 44, 0.10), 0 14px 30px -16px rgba(26, 32, 44, 0.30); } /* The watermark: oversized, low-contrast, bleeding off the corner — the panel carries the art so the type can stay quiet. */ .wsm-promo-mark { position: absolute; top: -14px; right: -12px; width: 96px; height: 96px; opacity: 0.15; pointer-events: none; } .wsm-promo-mark svg { width: 100%; height: 100%; } .wsm-promo-title { position: relative; font-family: "Poppins", "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; max-width: 18ch; } .wsm-promo-cta { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding-bottom: 1px; border-bottom: 1.5px solid currentColor; align-self: flex-start; } .wsm-promo-cta svg { width: 13px; height: 13px; } /* Five tints, cycled by position — adjacent panels never repeat. */ .wsm-promo-a { background: linear-gradient(150deg, #EDE8F8 0%, #DCD3F2 100%); color: #2B1A5E; } .wsm-promo-a .wsm-promo-mark { color: #452B90; } .wsm-promo-b { background: linear-gradient(150deg, #E4F3EC 0%, #CDE9DC 100%); color: #14432F; } .wsm-promo-b .wsm-promo-mark { color: #186A3B; } .wsm-promo-c { background: linear-gradient(150deg, #E6EEFA 0%, #D2E1F6 100%); color: #163458; } .wsm-promo-c .wsm-promo-mark { color: #1D5FBF; } .wsm-promo-d { background: linear-gradient(150deg, #F6EFE4 0%, #EBDCC6 100%); color: #4A3720; } .wsm-promo-d .wsm-promo-mark { color: #8A5A2B; } .wsm-promo-e { background: linear-gradient(150deg, #FBE9F1 0%, #F4D3E2 100%); color: #5C1F3B; } .wsm-promo-e .wsm-promo-mark { color: #B02E68; } @media (max-width: 760px) { /* Phones: one card at a time, snapped, still fixed-scale. */ .wsm-promo-card { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 640px) { .wsm-promo { padding: 22px 16px 2px; } .wsm-promo-card { flex-basis: 86%; } .wsm-promo-card { min-height: 128px; padding: 16px 18px; } .wsm-promo-title { font-size: 15px; } } /* ── Card tag row (operator 2026-08-20): free-shipping eligibility, the * supplier's own sale, and the supplier's rating. Each element renders only * when the service stamped the field behind it, so an empty row never draws. */ .wm-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #F0EEF6; } .wm-tag { font-size: 11px; font-weight: 600; line-height: 1.35; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .wm-tag-ship { background: #EAF6EE; color: #1B6B3A; } .wm-tag-sale { background: #FDECEC; color: #B42318; } /* The rating moved up to the supplier line (2026-08-20): it describes the * SUPPLIER, and sitting among the lot's own tags made it read as a fact about * the lot. */ .wm-card-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #556070; white-space: nowrap; } .wm-card-rating svg { color: #E8A33D; flex: none; } .wm-card-rating b { color: #1A202C; font-weight: 600; } @media (max-width: 640px) { .wm-tag { font-size: 10.5px; padding: 3px 7px; } } /* ── Supplier line (operator 2026-08-20): who is selling, above the price. */ .wm-card-supplier { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; min-width: 0; } .wm-supplier-link, .wm-supplier-name { font-size: 12.5px; font-weight: 600; color: #556070; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ⛔ ABOVE THE CARD'S STRETCHED OVERLAY LINK, or the click never lands here. * .wm-card-link is position:absolute; inset:0; z-index:1. */ .wm-supplier-link { position: relative; z-index: 2; text-decoration: none; } .wm-supplier-link:hover { color: #452B90; text-decoration: underline; } .wm-card-supplier .wm-card-rating { margin-left: auto; } /* ── Card strips on the lot page (2026-08-20). They render `_card`, the same * partial the catalogue renders, so they need only a track count — every other * rule the card carries itself. Four across, because a lot page is narrower * than the catalogue once its own column is accounted for. */ .wsp-reco-grid, .wsl-similar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; gap: 18px; } @media (max-width: 1100px) { .wsp-reco-grid, .wsl-similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .wsp-reco-grid, .wsl-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .wsp-reco-grid, .wsl-similar-grid { grid-template-columns: minmax(0, 1fr); } } /* ── Header that comes back when you scroll up (operator 2026-08-20) ─────── The top-tier marketplace pattern, Faire's included: scrolling DOWN gets out of the way, scrolling UP brings the bar straight back, so search and the bag are one gesture away from anywhere on a long catalogue. ⛔ `transform` HERE MAKES THIS ELEMENT THE CONTAINING BLOCK FOR ANY `position: fixed` DESCENDANT. The confirmation panel is one, so it is moved to when it opens — otherwise it would ride the header out of view mid-scroll. If anything else fixed is ever added inside the header, it needs the same treatment. A background is mandatory: the header declared none, which is invisible while it sits in the flow and shows the page through it once it sticks. */ .wm-header { position: sticky; top: 0; z-index: 45; background: #fff; transition: transform 0.24s ease; } .wm-header.is-tucked { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .wm-header { transition: none; } }