/* wholesale-market-lot.css — public marketplace lot page (Stream S2).
 * Values transcribed 1:1 from the approved design set (Lot.dc.html,
 * LotMember.dc.html, Sold.dc.html, States.dc.html): Poppins for headings,
 * Inter for text, JetBrains Mono for every number, brand purple #452B90.
 * The shared realm chrome ships in wholesale-market.css (parallel stream);
 * the .wsl-header block below is this page's standalone fallback only. */

* { box-sizing: border-box; }
body {
  margin: 0; background: #fff; color: #1A202C;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  max-width: 1240px; margin-left: auto; margin-right: auto; /* operator 2026-08-19 rev 2: the Faire product-page width; the catalog stays full-bleed */
}
a { color: #452B90; text-decoration: none; }
a:hover { color: #321F69; }
a, button { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; }
.mono { font-family: "JetBrains Mono", monospace; }

/* ── fallback header ── */
.wsl-header { display: flex; align-items: center; gap: 20px; padding: 18px 48px; border-bottom: 1px solid #E4E2EE; }
.wsl-logo { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: #1A202C; }
.wsl-logo span { color: #452B90; }
.wsl-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; }
.wsl-spacer { flex: 1; }
.wsl-login { font-size: 13.5px; font-weight: 600; padding: 10px 16px; color: #1A202C; }
.wsl-signup { font-size: 13.5px; font-weight: 600; padding: 10px 20px; background: #452B90; color: #fff; border-radius: 999px; }
.wsl-signup:hover { color: #fff; background: #321F69; }
.wsl-me { font-size: 13px; font-weight: 600; color: #556070; }

/* ── breadcrumb ── */
.wsl-breadcrumb { padding: 16px 48px 0; font-size: 12.5px; color: #556070; }
.wsl-breadcrumb a { color: #556070; }
.wsl-breadcrumb a:hover { color: #1A202C; }
.wsl-breadcrumb .here { color: #1A202C; }

/* ── main split ── */
.wsl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 18px 48px 8px; align-items: start; max-width: 1240px; margin: 0 auto; }
@media (max-width: 900px) {
  /* ⛔ `minmax(0, 1fr)`, NEVER a bare `1fr`. A bare `1fr` is
     `minmax(auto, 1fr)`, so the track refuses to go below its content's
     min-content width — the thumbnail strip's six columns held this single
     column at 568px inside a 390px phone and the whole page scrolled
     sideways by 194px (measured 2026-08-20). The two-column rule above
     already knew this; the mobile override dropped it. */
  .wsl-split { grid-template-columns: minmax(0, 1fr); }
  .wsl-gallery, .wsl-buycol { min-width: 0; }
}

.wsl-gallery { display: flex; flex-direction: column; gap: 10px; }
.wsl-hero { aspect-ratio: 4/3; border-radius: 16px; position: relative; background-size: cover; background-position: center; background-color: #F1EFE9; }
.wsl-photocount { position: absolute; right: 12px; bottom: 12px; background: #fff; font-size: 11.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; box-shadow: 0 1px 4px rgba(26,32,44,0.15); }
.wsl-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
/* Thumbs are real <img> (1x/2x srcset) in a fixed-aspect box; the kraft
   gradient on the box is the loading fallback under the image. */
.wsl-thumbbox { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.wsl-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; cursor: pointer; background-color: #F1EFE9; transition: box-shadow 0.15s ease, opacity 0.15s ease; }
.wsl-thumb:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #B9A8E8; }
.wsl-thumb.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #452B90; }

.wsl-buycol { display: flex; flex-direction: column; }
.wsl-title { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.wsl-facts { font-size: 13px; color: #556070; margin-top: 6px; }

.wsl-pricerow { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.wsl-price { font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.wsl-strike { font-size: 14px; color: #556070; text-decoration: line-through; }
.wsl-pricesub { font-size: 13px; color: #556070; }
.wsl-offpill { font-size: 12px; font-weight: 700; color: #B02E68; background: #FBE3EE; border-radius: 999px; padding: 4px 10px; }

.wsl-teaser { font-size: 13px; font-weight: 500; color: #452B90; margin-top: 10px; }
.wsl-teaser-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wsl-memberbanner { display: flex; align-items: center; gap: 8px; margin-top: 10px; background: #EDE8F8; border-radius: 10px; padding: 9px 13px; font-size: 12.5px; font-weight: 500; color: #452B90; }

.wsl-freight { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.wsl-freight .lbl { font-size: 13px; font-weight: 600; }
.wsl-zip { border: 1px solid #E4E2EE; border-radius: 10px; padding: 9px 12px; font-size: 13px; width: 72px; }
.wsl-zipgo { border: 1px solid #E4E2EE; background: #FAFAFC; border-radius: 10px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.wsl-zipgo:hover { background: #F4F2FA; border-color: #452B90; color: #452B90; box-shadow: inset 0 0 0 1px #452B90; }
.wsl-zipout { background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 600; min-width: 40px; }
.wsl-zipout:empty { display: none; }
.wsl-zipnote { font-size: 12px; color: #556070; }
/* Canon skeleton pulse (platform Design Rule 12: skPulse + #EEF2F7, 1.5s)
   on the estimate slot while the live carrier call runs. */
@keyframes skPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.wsl-zipout.quoting { background: #EEF2F7; border-color: #EEF2F7; color: #556070; font-weight: 500; animation: skPulse 1.5s ease-in-out infinite; }

.wsl-supplier { font-size: 13px; color: #556070; margin-top: 14px; }

.wsl-ctarow { display: flex; gap: 10px; margin-top: 18px; }
/* Faire-benchmark hover (2026-08-20): the border DOUBLES via an inset ring
 * (no geometry shift), the ground holds; the tint is the press. Same
 * language as .wm-btn-* in wholesale-market.css. */
.wsl-heart { display: inline-flex; align-items: center; justify-content: center; width: 48px; flex-shrink: 0; background: #fff; border: 1px solid #1A202C; border-radius: 999px; color: #1A202C; cursor: pointer; padding: 0; }
.wsl-heart:hover { background: #fff; color: #B02E68; border-color: #B02E68; box-shadow: inset 0 0 0 1px #B02E68; }
.wsl-heart.on { background: #FBE3EE; border-color: #B02E68; color: #B02E68; }
.wsl-heart.on:hover { box-shadow: inset 0 0 0 1px #B02E68; }
.wsl-heart.on svg { fill: #B02E68; }
.wsl-cta.bag { display: block; width: 100%; margin-top: 10px; background: #fff; border: 1px solid #452B90; color: #452B90; padding: 13px; font-family: inherit; font-size: 14px; cursor: pointer; }
.wsl-cta.bag:hover { background: #fff; color: #452B90; box-shadow: inset 0 0 0 1px #452B90; }
.wsl-cta.bag:active { background: #F4F2FA; }
.wsl-cta.bag.on { background: #EDE8F8; }
.wsl-cta { display: inline-block; text-align: center; padding: 14px 24px; background: #452B90; color: #fff; border-radius: 999px; font-size: 14.5px; font-weight: 600; }
.wsl-cta:hover { color: #fff; background: #321F69; box-shadow: inset 0 0 0 1px #170D3E; }
.wsl-cta:active { background: #2A1A58; }
.wsl-cta.ghost { flex: 1; background: #fff; border: 1px solid #1A202C; color: #1A202C; padding: 14px; }
.wsl-cta.ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px #1A202C; }
.wsl-cta.ghost:active { background: #F4F2FA; }
.wsl-cta.wide { flex: 1.4; padding: 14px; }
.wsl-cta.self-start { align-self: flex-start; font-size: 13.5px; padding: 12px 24px; }
.wsl-ctasub { font-size: 12px; color: #556070; margin-top: 10px; text-align: center; }

.wsl-chips { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.wsl-chips .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #556070; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 999px; padding: 6px 12px; }
.wsl-chips .chip.purple { color: #452B90; background: #EDE8F8; border: none; }

/* ── lot details accordion ── */
.wsl-details { margin: 22px 48px 0; border: 1px solid #E4E2EE; border-radius: 16px; padding: 0 26px; background: #fff; }
.wsl-details-summary { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 16px; padding: 18px 0; cursor: pointer; list-style: none; position: relative; }
.wsl-details-summary::-webkit-details-marker { display: none; }
.wsl-details-summary::after { content: ""; position: absolute; right: 4px; top: 24px; width: 8px; height: 8px; border-right: 2px solid #556070; border-bottom: 2px solid #556070; transform: rotate(45deg); transition: transform 0.15s ease; }
.wsl-details[open] > .wsl-details-summary::after { transform: rotate(225deg); top: 28px; }
.wsl-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0 0 18px; }
@media (max-width: 700px) { .wsl-details-grid { grid-template-columns: 1fr; } }
.wsl-details-grid .drow { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #F1F0F7; font-size: 13px; }
.wsl-details-grid .drow:last-child { border-bottom: none; }
.wsl-details-grid dt { color: #556070; font-weight: 500; margin: 0; }
.wsl-details-grid dd { color: #1A202C; font-weight: 600; margin: 0; text-align: right; }

/* ── resale data module ── */
.wsl-resale { margin: 22px 48px 0; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 16px; padding: 22px 26px; }
.wsl-resale-head { display: flex; align-items: center; gap: 10px; }
.wsl-resale-head b { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 16px; }
.beta-pill { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A5A00; background: #FDF3E0; border-radius: 6px; padding: 4px 7px; }
.wsl-resale-cov { margin-left: auto; font-size: 11.5px; color: #556070; }
.wsl-resale-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
@media (max-width: 700px) { .wsl-resale-cards { grid-template-columns: 1fr; } }
.rcard { background: #fff; border: 1px solid #E4E2EE; border-radius: 12px; padding: 14px 18px; }
.rcard .k { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #556070; }
.rcard .v { font-weight: 700; font-size: 21px; margin-top: 5px; }
.rcard .v.green { color: #186A3B; }
.rcard .s { font-size: 11.5px; color: #556070; margin-top: 4px; }
.wsl-resale-foot { font-size: 12px; color: #556070; margin-top: 14px; padding-top: 12px; border-top: 1px solid #E4E2EE; }

/* ── manifest ── */
.wsl-manifest { padding: 24px 48px 30px; }
.mfx-title { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 17px; }
.mfx-sub { font-size: 12px; color: #556070; margin-top: 2px; margin-bottom: 12px; }
.mfx-titlebar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.mfx-access { font-size: 11.5px; font-weight: 600; color: #186A3B; background: #E8F5EC; border-radius: 999px; padding: 3px 10px; }
.mfx-note { margin-left: auto; font-size: 12px; color: #556070; }
.mfx-repr { font-size: 12px; color: #8A5A00; background: #FDF3E0; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }

.mfx-table { border: 1px solid #E4E2EE; border-radius: 14px; overflow: hidden; }
/* ⛔ EVERY TRACK IS `minmax(0, …)`. A bare `Nfr` is `minmax(auto, Nfr)`, so
   each grid sizes its tracks from its OWN content — and the head's uppercase
   labels wrap differently from the rows' ellipsised cells, which made the two
   grids disagree on every column at the same width (measured 2026-08-20:
   head 74.97/149.95, rows 84.38/168.77). Zeroed minimums make the tracks
   pure ratios, so head and rows line up by construction. */
.mfx-head, .mfx-row { display: grid; grid-template-columns:
  minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 0.7fr) minmax(0, 0.7fr)
  minmax(0, 0.5fr) minmax(0, 0.8fr) minmax(0, 1.3fr); }
.mfx-head.full, .mfx-row.full { grid-template-columns:
  minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 0.45fr)
  minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.8fr); }
.mfx-head { background: #FAFAFC; border-bottom: 1px solid #E4E2EE; }
.mfx-head .h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #556070; padding: 10px 14px; }
.mfx-row { border-bottom: 1px solid #E4E2EE; font-size: 13px; }
.mfx-row.full { font-size: 12.5px; }
.mfx-row:last-of-type { border-bottom: none; }
.mfx-row .c { padding: 10px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfx-row.full .c { padding: 9px 12px; }
.mfx-row .c.mono { font-size: 12px; }
.est-val { font-weight: 700; color: #186A3B; }
.comps, .insuf { color: #556070; }
.pill-lock { display: inline-block; background: #FAFAFC; border: 1px dashed #B9C2CE; border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-weight: 500; color: #556070; }

.mfx-cliff { height: 64px; background: linear-gradient(rgba(255,255,255,0), #fff 90%); margin-top: -64px; position: relative; }
.mfx-ctawrap { text-align: center; margin-top: -30px; position: relative; padding-bottom: 4px; }
.mfx-cta { display: inline-block; background: #452B90; color: #fff; border-radius: 999px; padding: 13px 28px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(69,43,144,0.25); }
.mfx-cta:hover { color: #fff; background: #321F69; }
.mfx-ctasub { font-size: 12px; color: #556070; margin-top: 9px; }
.mfx-footrow { display: flex; align-items: center; margin-top: 10px; }
.mfx-count { font-size: 12.5px; font-weight: 600; color: #452B90; }
.mfx-honesty { margin-left: auto; font-size: 12px; color: #556070; }

/* ── description fallback (assortment lots have no manifest) ── */
.wsl-desc { padding: 24px 48px 30px; }
.wsl-desc-body { font-size: 13.5px; color: #1A202C; line-height: 1.6; margin-top: 10px; max-width: 720px; }

/* ── sold state ── */
.wsl-sold-banner { display: flex; align-items: center; gap: 14px; padding: 15px 48px; background: #FBE3EE; border-bottom: 1px solid #E4E2EE; }
.wsl-sold-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #B02E68; border-radius: 999px; padding: 5px 12px; }
.wsl-sold-line { font-size: 14px; font-weight: 600; color: #B02E68; }
.wsl-sold-line .big { font-weight: 700; font-size: 15px; }
.wsl-sold-when { margin-left: auto; font-size: 12px; color: #556070; }
.wsl-sold-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; padding: 26px 48px; align-items: start; }
@media (max-width: 900px) { .wsl-sold-split { grid-template-columns: 1fr; } }
.wsl-sold-photo { aspect-ratio: 4/3; border-radius: 16px; position: relative; background-size: cover; background-position: center; background-color: #F1EFE9; }
.veil { position: absolute; inset: 0; background: rgba(255,255,255,0.45); border-radius: inherit; }
.wsl-sold-col { display: flex; flex-direction: column; gap: 14px; }
.wsl-sold-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .wsl-sold-cards { grid-template-columns: 1fr; } }
.scard { background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 12px; padding: 13px 16px; }
.scard .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #556070; }
.scard .v { font-weight: 700; font-size: 19px; margin-top: 4px; }
.scard .v.pink { color: #B02E68; }
.scard .v.green { color: #186A3B; font-size: 16px; }
.scard .s { font-size: 11.5px; color: #556070; margin-top: 3px; }
.wsl-sold-note { font-size: 12.5px; color: #556070; line-height: 1.55; }

/* ── similar strip ── */
.wsl-similar { padding: 6px 48px 32px; }
.wsl-similar-title { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 18px; }
.wsl-similar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
@media (max-width: 900px) { .wsl-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsl-simcard { border: 1px solid #E4E2EE; border-radius: 14px; overflow: hidden; color: #1A202C; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wsl-simcard:hover { color: #1A202C; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,32,44,0.12); }
.simphoto { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: #F1EFE9; }
.simbody { padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.simbody b { font-size: 13px; }
.simprice { display: flex; align-items: baseline; gap: 7px; }
.simprice .mono { font-weight: 700; font-size: 15px; }
.simprice .strike { font-size: 11.5px; color: #556070; text-decoration: line-through; }
.wsl-similar-empty { font-size: 13px; color: #556070; margin-top: 12px; }
/* explicit: body.wm sets `a { color: inherit }` on the whole document */
.wsl-similar-empty a { color: #452B90; }
.wsl-similar-empty a:hover { color: #321F69; }

/* ── related searches ── */
.wsl-relsearch { padding: 6px 48px 34px; }
.wsl-relsearch-title { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 15px; }
.wsl-relsearch-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.relchip { display: inline-block; font-size: 12.5px; font-weight: 600; color: #452B90; background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 999px; padding: 8px 16px; }
.relchip:hover { background: #F4F2FA; border-color: #452B90; color: #452B90; }

/* ── sticky door bar (anonymous, appears past the buy column) ── */
.wsl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 12px 48px; background: #fff; border-top: 1px solid #E4E2EE; box-shadow: 0 -8px 24px rgba(26, 32, 44, 0.08); }
.wsl-sticky[hidden] { display: none; }
.wsl-sticky-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.wsl-sticky-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsl-sticky-price { font-weight: 700; font-size: 16px; flex-shrink: 0; }
.wsl-sticky .wsl-cta { flex-shrink: 0; padding: 12px 22px; font-size: 13.5px; }
@media (max-width: 640px) {
  /* 40px of padding inside a card that already sits at the 16px gutter leaves
     278px for the text on a 390px screen. The card keeps its edge; the copy
     gets room. */
  .wsl-statecard.center { padding: 34px 20px; }
}

@media (max-width: 640px) {
  /* ── The manifest is a GRID, and it was clipping its own columns ───────
     `.mfx-head` and `.mfx-row` share `fr` tracks, and an `fr` track has an
     AUTO minimum — so the head's uppercase labels pushed that grid to 435px
     inside a 358px box whose `overflow: hidden` then hid the RETAIL column
     with no way to reach it. The rows measured 356 instead, because their
     cells ellipsis to nothing, so head and rows did not even line up.
     Measured at 390px, 2026-08-20.

     One shared min-width makes both grids agree on their tracks, and the box
     scrolls sideways instead of hiding what it cannot fit — the page itself
     still does not scroll, only this box. */
  .mfx-table { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  /* Wide enough that every COLUMN LABEL fits — a header ellipsised to "SI…"
     tells the reader nothing, and the columns are reachable by swiping
     anyway. Tighter cell padding buys the room without shrinking the type. */
  .mfx-head, .mfx-row { min-width: 700px; }
  .mfx-head.full, .mfx-row.full { min-width: 900px; }
  .mfx-head .h, .mfx-row .c { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 640px) { .wsl-sticky { padding: 10px 16px; } .wsl-sticky-title { display: none; } }

/* ── withdrawn / 404 states ── */
.wsl-statewrap { padding: 26px 48px; }
.wsl-statecard { background: #fff; border: 1px solid #E4E2EE; border-radius: 16px; overflow: hidden; }
.wsl-statecard.center { padding: 48px 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wsl-404 { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 40px; color: #E4E2EE; letter-spacing: 0.05em; }
.wsl-stateheadline { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 18px; }
.wsl-statesub { font-size: 13.5px; color: #556070; }
.wsl-withdrawn-banner { display: flex; align-items: center; gap: 12px; padding: 13px 24px; background: #FDF3E0; border-bottom: 1px solid #E4E2EE; font-size: 13.5px; font-weight: 600; color: #8A5A00; }
.wsl-withdrawn-row { display: flex; gap: 20px; align-items: center; padding: 18px 24px; }
.wsl-withdrawn-thumb { width: 88px; height: 66px; border-radius: 10px; position: relative; flex-shrink: 0; background-size: cover; background-position: center; }
.wsl-withdrawn-thumb .veil { background: rgba(255,255,255,0.55); }
.wsl-withdrawn-body { flex: 1; }
.wsl-withdrawn-body b { font-size: 14.5px; color: #556070; }
.wsl-withdrawn-sub { font-size: 12px; color: #A8B0BC; margin-top: 2px; }
.wsl-withdrawn-row .wsl-cta { font-size: 13px; padding: 11px 20px; }

/* ── mobile gutter, unified with the shared chrome (16px) ── */
@media (max-width: 640px) {
  .wsl-breadcrumb, .wsl-split, .wsl-manifest, .wsl-desc, .wsl-similar,
  .wsl-statewrap, .wsl-sold-banner, .wsl-sold-split, .wsl-relsearch { padding-left: 16px; padding-right: 16px; }
  .wsl-resale, .wsl-details { margin-left: 16px; margin-right: 16px; }
}

/* 1240px shell (Faire PDP width): two equal columns read right at every
 * desktop size — the wide-shell 1.45fr override retired with the shell. */

/* Manifest fold (operator 2026-08-19): long manifests open at ~25%. */
.mfx-expand {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 10px; padding: 11px;
  background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #452B90; cursor: pointer;
}
.mfx-expand:hover { border-color: #452B90; background: #F4F2FA; }
.mfx-expand[data-open="1"] svg { transform: rotate(180deg); }

/* [hidden] must WIN over the explicit display:grid above — without this the
 * folded manifest rows were visible from load and the Show-all button looked
 * dead (operator 2026-08-19, same class as the search-dropdown bug). */
.mfx-row[hidden] { display: none; }