/*
 * Shared chrome for the redesigned catalog (Lots.php) and lot page
 * (ItemShow.php): the pieces that exist so the two pages can host each other -
 * the lot layer the catalog opens in place, the phone drawer, the preview
 * pane loading state - plus a handful of patches to the two extracted
 * stylesheets (lotx-list.css, lotx-lot.css).
 */

.lx-hide{display:none!important}
.d-n{display:none}

/* Material Symbols base. Declared here, not only in the list stylesheet: the
   lot page draws the odd msy glyph too (empty states, the drawer bar), and
   without this the ligature renders as its raw name ("search_off"). */
/* `width:1em` is the second half of the icon-font fix, and it is about LAYOUT
   rather than about what you can see. While the font is still coming the span
   still holds its ligature text, and "arrow_back" in a fallback face is 108px
   wide where the glyph is 21. Measured on the catalog: 80 of the 103 icons sit
   in pills that size to their contents - every card's timer chip and photo
   count - so they were all bulging and then snapping back. Every glyph in this
   set is exactly 1em, verified across all 103, so this is the icon's own width
   and not a guess. No overflow:hidden with it: the glyph fills its em box, and
   clipping it would cost a row of pixels off every icon to tidy a case that
   only happens if the font never arrives at all. */
.msy{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:20px;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
  word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;width:1em}

/* ------------------------------------------------------- the status chip */
/* Top bidder / Outbid / Reserve not met: ONE chip, on both pages. On a
   catalog card it sits on the photograph (.bd-shot__status, lotx-list.css
   places it); on the lot it sits beside Current Bid (.fm-status,
   lotx-lot.css places it). The owner asked for exactly this, 2026-09-29:
   "it needs to be the same color and shape like how we show it on the lot
   list". So the look lives here, in the one stylesheet both pages load,
   under .lx-status, and the two containers only say where it goes.
   Written out in full rather than leaning on lotx-list.css's base .lx-chip,
   which the lot page does not load: this is the computed style of a card's
   chip, property for property. The accent keeps Top bidder in a white label
   seller's own colour; the white under its 14% tint is what stops a photo
   showing through it. */
/* .fm-res is the lot page's "Reserve not met" beside the price, which every
   visitor sees. It wears the card's amber chip too (owner, 2026-09-29: "the
   reserve not met color in lot detail does not appear to be same as the one
   in lot list"). It was a small grey pill. Listed in the same two rules
   rather than copied, so the two cannot drift; the element and its class
   stay as they were because the realtime handler writes into .status. */
/* inline-block, not inline-flex: a chip too wide for its photograph ends in
   dots ("Reserve not..."), which the owner chose on 2026-09-29 over wrapping
   onto two lines. text-overflow only draws the dots on a BLOCK container
   holding the text itself; inside a flex box the text sits in an anonymous
   flex item that the property never reaches, so as inline-flex the chip
   was silently clipped to "Reserve not m" with no dots at all. */
.lx-status .lx-chip,
.fm-res{display:inline-block;vertical-align:top;border-radius:20px;padding:5px 12px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.5;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;box-shadow:0 2px 8px rgba(16,19,23,.14)}
.lx-status .lx-chip.is-win{color:var(--acc);
  background:linear-gradient(rgba(var(--acc-rgb),.14),rgba(var(--acc-rgb),.14)),#fff}
.lx-status .lx-chip.is-lose{background:var(--bad-bg);color:var(--bad-ink)}
.lx-status .lx-chip.is-reserve,
.fm-res{background:var(--warn-bg);color:var(--warn-ink)}
/* "Bidding has closed": where a closed lot's Bid button would be, on a catalog
   card (lx_bid_block()) and on the lot page (cvf/ajax/item.php) alike - the
   owner asked for the lot page to show it "like in the lot list" (2026-09-30),
   so it is one rule here rather than a copy per page. It lived in
   lotx-list.css, which the standalone lot page does not load. */
.lx-bid__flat{text-align:center;padding:13px;border-radius:10px;background:var(--wash);color:var(--mut);
  font-size:13.5px;font-weight:600}

/* ------------------------------------------------------------------ skeleton */
.fm-skel{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:36px;padding:28px 0 60px}
@media (max-width:1100px){.fm-skel{grid-template-columns:minmax(0,1fr)}}
.fm-skel__stage{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(100deg,#ececea 40%,#f5f5f3 50%,#ececea 60%);background-size:200% 100%;animation:lx-sheen 1.2s linear infinite}
.fm-skel__panel{height:420px;border-radius:14px;background:linear-gradient(100deg,#ececea 40%,#f5f5f3 50%,#ececea 60%);background-size:200% 100%;animation:lx-sheen 1.2s linear infinite}
@keyframes lx-sheen{to{background-position:-200% 0}}
.is-loading{position:relative}
.is-loading::after{content:"";position:absolute;inset:0;background:rgba(247,247,245,.55);z-index:5;
  backdrop-filter:saturate(.9);pointer-events:none;opacity:0;animation:lx-fadein .18s ease .12s forwards}
@keyframes lx-fadein{to{opacity:1}}

/* The same skeleton, now in the three places the catalog mounts a lot without
   a page load: the split pane, the phone drawer and the full-width layer.
   LXItem.load() puts it in (skelHTML() in scripts/lotx-item.js emits the markup
   above verbatim), so the wait is no longer either a blank box or the previous
   lot sitting under a veil.

   The pane asks its OWN width and not the window's, which is the whole point of
   .lx-pane__scroll already being a named container. On a 1400px desktop the
   viewport query above never fires, so the 376px second column would be asked
   to stand in a pane around 380px wide and would hang straight out of it. */
@container lxpane (max-width:1100px){
  .fm-skel{grid-template-columns:minmax(0,1fr);gap:20px}
}
.lx-pane .fm-skel{padding:8px 0 40px}
.lx-pane .fm-skel__panel{height:340px}

/* The phone drawer and the phone generally. One column is already settled by
   the window query; what is not is that a 420px panel under a 4:3 photograph is
   taller than the screen it is waiting on, so the placeholder would be a grey
   column you have to scroll. Shorter panel, tighter gap, and the sheet's own
   top padding rather than the page's. */
.lx-drawer__body .fm-skel{gap:18px;padding:16px 0 40px}
@media (max-width:700px){
  .fm-skel{gap:18px;padding:16px 0 44px}
  .fm-skel__panel{height:300px}
}

/* The ~90ms hold that stops a fast answer showing a grey blink lives in
   LXItem.load(), not here. A CSS animation delay would have to start this at
   opacity:0 and trust the animation to bring it back, which makes the
   placeholder invisible anywhere animations do not tick. See the note there. */

/* Dimming a placeholder only makes it harder to read. See the is-skel note in
   LXItem.load(). */
.is-loading.is-skel::after{content:none}

@media (prefers-reduced-motion:reduce){
  .fm-skel__stage,.fm-skel__panel{animation:none;background:#ececea}
}

/* -------------------------------------------------- the in-catalog lot view */
/* The full-width lot layer the Grid view opens without leaving the page. It is
   the same .fm document ItemShow.php shows, mounted under the catalog bar. */
.lx-lot-layer{display:none;background:var(--bg,#F7F7F5)}
.bd.is-lot-open .lx-lot-layer{display:block}
.bd.is-lot-open > .bd-shell{display:none}
/* The catalog's own bar belongs to the list. While a lot fills the page the
   view reads as ItemShow.php - same address, same chrome - so the bar stands
   down and comes back with the list. */
.bd.is-lot-open .bd-bar{display:none}
.lx-lot-layer .fm-in{padding-top:22px}

/* The preview pane of the four split layouts: the same document, one column,
   scaled to live in a sidebar. */
.rls-pane, .lx-pane{background:var(--card,#fff)}
.lx-pane{display:none;border-radius:14px;border:1px solid var(--line,#E7E7E3);overflow:hidden;
  position:sticky;top:calc(var(--hdr) + var(--bar) + 16px);height:calc(100vh - var(--hdr) - var(--bar) - 32px);
  margin-top:16px}
.lx-pane__scroll{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  container-type:inline-size;container-name:lxpane}
/* The lot inside the pane is a narrow COLUMN in a wide WINDOW, and the design
   sheet sizes itself by the window. Everything keyed to a viewport breakpoint
   therefore thinks it has the whole screen. The Details table is where that
   showed: two columns of `132px label + value`, side by side with a 60px
   gutter, needs about 380px, and in a split layout on a tablet the pane is
   nearer 295 - so the two halves printed over each other ("Ehli Auctions"
   through "Bid increment"), reported 2026-09-16.

   A container query rather than another viewport one, because the pane's width
   has nothing to do with the window's: it is asked at the same 640px and 560px
   the design already uses, just of the right box. A pane wide enough for two
   columns - which it is on a large desktop - still gets them. Anything else
   inside the pane that sizes by the window belongs here too. */
@container lxpane (max-width:640px){
  .fm-facts{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .fm-facts::before{display:none}
}
/* Same one-line fact row as the phone's, asked of the PANE's width - a narrow
   pane is narrower than the phone this was sized for and no viewport query
   ever fires for it. See the note in lotx-lot.css for why one line is safe. */
@container lxpane (max-width:560px){
  .fm-fact{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:9px 0}
  /* The label never wraps: it comes from a short fixed set in PHP, and
     "Total" / "Bid" broken over two lines reads worse than a value that
     wraps. The value takes whatever is left and wraps inside its own
     right-aligned box. */
  .fm-fact dt{flex:0 0 auto;white-space:nowrap}
  .fm-fact dd{flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
}
/* The tabbed card's own narrow treatment, for the same reason: at a 344px pane
   the desktop padding (26px on the card and 26px again on the panel inside it)
   left the Details table 200px to live in. These are the design's own values
   from its max-width:700px block, asked of the pane. */
@container lxpane (max-width:700px){
  .fm-tabs.is-ready .fm-tabbar{padding:0 6px}
  .fm-tab{padding:14px 11px;font-size:14.5px}
  .fm-pan{padding:20px 18px}
  /* The signed-out pair, for the same reason and with the design's own phone
     values - the pane is narrower than the phone it was sized for, and a
     viewport query never fires for it. See the note in lotx-lot.css. */
  .fm-signin{gap:8px}
  .fm-signin .fm-go{font-size:15px;line-height:1.25;padding:14px}
  .fm-signin__r{font-size:14px;line-height:1.25;padding:14px}
}
.lx-pane .fm-in{padding:18px 18px 40px}
.lx-pane .fm-cols{grid-template-columns:minmax(0,1fr);gap:18px}
/* One column, but not a phone: the pane is a desktop preview beside the
   list, so its head stays above the photograph where it was. This beats
   the max-width:1000px rule on specificity, not on order. */
.lx-pane .fm-cols>.fm-head{order:-1;padding-top:0}
.lx-pane .fm-side{position:static}
.lx-pane .fm-panel{position:static;max-height:none}
.lx-pane .fm-head{padding-top:0}
/* The head's desktop grid is `calc(100% - the bidding panel - the gutter) auto`,
   so the title lines up with the photograph beside it. In the pane there is no
   panel beside anything - .fm-cols above is one column here - and that formula
   turns into 100% minus 412px of nothing: at a 499px pane it left the title a
   51px column and ran "Men's Luxury Automatic Dive Watch" down five lines. The
   pane is a narrow column at every window width, so it states its own two
   tracks instead: everything the title can have, and whatever the buttons
   beside it actually need.

   The actions used to go on a row of THEIR own under the title, because the
   only one that ever reached the pane was Edit Lot and the way back was
   hidden. Share arrived in that row on 2026-09-28, and one 46px button does
   not need a line to itself - in the pane a line is the scarce thing.

   It SPANS both rows, for the same reason the page's own head does: a 43px
   button sharing row one with a 24px title makes row one 43px tall and the
   meta line under it pays the difference. Putting it in row 1 alone opened a
   34px gap between the title and the auction and seller line here, which is
   the exact defect that span fixed on the full page (owner, 2026-09-28).

   6px, not the 12 this used to carry: that was separating the actions ROW
   from the meta line above it, and there is no such row any more. The title
   and its own subtitle now sit the same 6px apart here as on the page. */
.lx-pane .fm-head{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
.lx-pane .fm-head__r{grid-row:1/span 2;grid-column:2;justify-self:end;justify-content:flex-end}
/* The pane is a narrow column at any window width, so it takes its own title
   sizes rather than the ones a media query would hand it from the window. The
   two long-title steps come down with it, keeping the same proportions
   cvf/ajax/item.php picks them for. */
.lx-pane .fm-name{font-size:22px}
.lx-pane .fm-name--long{font-size:19px}
.lx-pane .fm-name--xlong{font-size:17.5px}
.lx-pane .fm-sub{font-size:13.5px}
/* The pane gets the floating bar too (owner, 2026-09-24). It was hidden outright
   here, on the grounds that a fixed bar belongs to a lot that fills the page;
   but the pane is its own scroll container and its bid button leaves the top of
   it exactly the way the layer's does, so the reader loses the control in the
   same way and for the same reason.

   position:ABSOLUTE, and that is the whole trick. Two things rule out leaving it
   fixed:

     - a fixed bar is laid out against the WINDOW here, measured at 1500px wide
       on a 1500px window. Left alone it lies across the catalog list beside it,
       which never went anywhere, and at `top:var(--navh)` it lands exactly on
       the catalog's own black bar and hides the pager, the view switch and
       Filters. Grid gets away with a window-wide bar because it hides that bar
       (.bd.is-lot-open .bd-bar) and has no list on screen;
     - container-type:inline-size on .lx-pane__scroll does NOT make that box the
       containing block for a fixed child, which was the first guess and was
       wrong on measurement.

   Absolute resolves against .lx-pane instead, which is position:sticky and so a
   containing block, and which sits OUTSIDE the scroller - so the bar pins to the
   top of the pane and does not travel with the content. .lx-pane's overflow:
   hidden clips the hidden state, which is what lets it slide away. */
.lx-pane .fm-bar{position:absolute;top:0;left:0;right:0;bottom:auto;
  padding:10px 14px;border-top:0;border-bottom:1px solid var(--line);
  transform:translateY(-110%)}
.lx-pane .fm-bar.is-up{transform:none}.lx-pane .fm-rails{display:none}
.lx-pane .fm-foot .fm-up{display:none}
/* Both ways back to the catalog go, because in a split layout the catalog is
   the other half of the screen - it never went anywhere, and the lot beside it
   is a preview of a row in it (owner, 2026-09-16). The same two controls are
   hidden on a phone for the opposite reason: there the black bar's arrow is
   always on screen. They stay in the full-width layer, which Grid opens OVER
   the list, and on the standalone lot page - in both of those the catalog
   really is somewhere else.

   The ROW itself used to go with them, because a row holding nothing but a
   hidden link still pays the grid's row-gap, and the --edit marker said when
   Edit Lot was in there to keep. That is over: Share moved into this row on
   2026-09-28 and the pane is desktop-only, so there is always something in it
   now. Taking the row out as well would have been the one place on a desktop
   with no way to share a lot. */
.lx-pane .fm-back,
.lx-pane .fm-pager__a--wide{display:none}

/* A video inside PhotoSwipe. It arrives as an `html` slide (see pswpItems in
   scripts/lotx-item.js) because a video has no intrinsic width and height to
   hand the viewer, so the fitting is done here instead: fill the slide, keep
   the aspect, and leave the viewer's own padding alone. */
.lx-pswp .lx-pswp__v{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center}
/* `width:auto` leaves the element at its INTRINSIC size, and with preload=none
   a video has not got one yet - it fell back to the poster's, which came out
   333x500 in a 1280 viewport. Filling the slide and containing is what an
   image slide does, so the video does the same and letterboxes itself. */
.lx-pswp .lx-pswp__v video{width:100%;height:100%;object-fit:contain;
  background:#000;outline:0}

/* ------------------------------------------------------- the phone drawer */
/* On a phone the lot slides in over the list, and a left-to-right swipe puts
   the list back, as if it had been there all along - which it has. */
.lx-drawer{position:fixed;inset:0;z-index:1050;background:var(--bg,#F7F7F5);
  transform:translateX(100%);will-change:transform;overscroll-behavior:contain;
  display:flex;flex-direction:column;visibility:hidden}
.lx-drawer.is-open{transform:translateX(0);visibility:visible}
.lx-drawer.is-anim{transition:transform .27s cubic-bezier(.32,.72,.34,1),visibility 0s}
.lx-drawer.is-dragging{transition:none}
/* The sheet's own header is the shared .lx-topbar - see "the two top bars" at
   the foot of this file. It is lifted out of the drawer's flow so that riding
   up and down with the site header costs a transform and not a layout, and the
   scroller beneath is padded for both bars at their resting height instead. It
   never resizes, which is why the lot does not lurch under the finger when the
   green header leaves. */
.lx-drawer__bar{position:absolute;left:0;right:0;top:0;z-index:3;
  transform:translateY(var(--lx-top));
  transition:transform .26s cubic-bezier(.32,.72,.34,1)}
/* The scroller is a stacking context of its own (z-index:0 on a positioned
   box). Without it the lot's own layered pieces - the photograph's arrows sit
   at z-index 3 - are siblings of the bar in the drawer's stacking order and
   paint straight over it once the lot has scrolled under it. */
.lx-drawer__body{position:absolute;inset:0;z-index:0;overflow:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;padding-top:calc(var(--hdr,70px) + var(--lx-bar))}
.lx-drawer__body .fm-in{padding-top:16px}
/* The sheet's own bar is the same .lx-topbar, and below 700 the stage runs
   full bleed in that bar's colour, so this padding would leave the same pale
   seam the standalone page just lost. */
@media(max-width:700px){ .lx-drawer__body .fm-in{padding-top:0} }
/* The list peeking from behind while the drawer is dragged. */
.lx-drawer-scrim{position:fixed;inset:0;z-index:1040;background:rgba(16,19,23,.34);opacity:0;
  pointer-events:none;transition:opacity .25s}
.lx-drawer-scrim.is-on{opacity:1}
body.lx-drawer-lock{overflow:hidden;touch-action:none;overscroll-behavior:none}

/* ------------------------------------------------------------- CSS patches */
/* The pinned bid bar hides itself when the panel has nothing to offer (not
   open yet, no right to bid). Its own media queries set display:flex, so
   [hidden] needs to say so louder. */
.fm-bar[hidden]{display:none!important}

/* ------------------------------------------------- clickable means pointer
   A browser only hands out the pointer cursor for `a[href]`, and Bootstrap
   adds it for `button`. These designs make plenty of other things clickable -
   a whole lot card, pager anchors that carry `p` instead of an href, the
   layout switches, a styled select - and every one of those was still showing
   the arrow, so nothing invited the click. Audited element by element on both
   pages rather than guessed at: the list below is what actually came back
   wrong.

   One thing is deliberately NOT pointer, because it already says something
   more precise: the photograph and its Enlarge button say zoom-in, and the
   lightbox ground behind them says zoom-out. */
.bd-card,
.bd-pages a[p],
select.lx-sort-select,
select.lx-max-select,
.bd-field label[for],
.bd-jump label[for],
.fm-pro input[type="checkbox"],
.fm-modal__label[for]{cursor:pointer}

/* A card's bid box is stopped from opening the lot, so it must not promise
   that it will. What it contains says what it is. The watch star carries the
   same marker and IS a control, hence the :not() - caught in the audit. */
.bd-card [data-lx-stop]:not(button):not(a):not(label){cursor:default}
.bd-card [data-lx-stop] a,
.bd-card [data-lx-stop] button,
.bd-card [data-lx-stop] label{cursor:pointer}
.bd-card [data-lx-stop] input[type="text"]{cursor:text}

/* The surfaces you click to get OUT of something. These three close on a click
   on the ground itself, so the ground says so; the photograph lightbox says
   zoom-out instead, which is the other half of the zoom-in on the photograph
   that opened it. Their CONTENT is not a control, and cursor inherits, so it
   is put back.

   Not here on purpose: the drawer's scrim, which has no handler at all, and
   the two Bootstrap dialogs, which are data-backdrop="static" and do not close
   on an outside click either. Neither should claim otherwise. */
.fm-lb{cursor:zoom-out}
.fm-lb.is-plain,
#lotConfirm,
#bd-scrim{cursor:pointer}
.fm-lb__body,
.fm-modal__box,
.lx-dlg__box{cursor:auto}

/* And nothing that cannot be pressed should look as though it can. Bootstrap
   puts `cursor:pointer` on every button, disabled ones included. Two registers,
   consistently: a control you are barred from using says not-allowed (the
   design's own `.fm-go:disabled` already did), while a link that is simply
   inert - the page you are already on, the previous lot when there isn't one -
   says nothing at all. */
.bd button[disabled],.fm button[disabled],
.fm-go.is-off,.lx-bid__go.is-off{cursor:not-allowed}
.bd-pages a.selected,
.fm-pager__a.is-off{cursor:default}

/* --------------------------------------------- controls that are links
   Several controls in these designs are real anchors on purpose: the card's
   bid button, the rail cards, the catalog's back arrow. They work without any
   script and a crawler can follow them.

   The design sheets undo Bootstrap's `a:focus,a:hover{color:#23527c}` for
   links in general (see the :where(a):hover reset at the top of
   lotx-{list,lot}.css, which restores `color:inherit`). These are the controls
   that paint their own text rather than inheriting it, and whose hover is only
   a background or border change - so they have to name their colour again or
   the reset would hand them their parent's ink. This file loads last, so these
   win. */
/* The bid button is the one the site owner caught, so it is pinned rather than
   merely corrected: `a.lx-bid__go` is (0,1,1), which TIES Bootstrap's a:hover
   and wins by loading later, and it holds in every state and on every page -
   including one that does not load lotx-list.css, where the design's own
   `.lx-bid__go{color:...}` would not be there to be beaten in the first place. */
a.lx-bid__go{color:var(--acc-ink)}
a.lx-bid__go.is-quiet{color:var(--ink)}
a.lx-bid__go.is-off{color:var(--mut)}
.lx-bid__go:hover,.lx-bid__go:focus{color:var(--acc-ink)}
.lx-bid__go.is-quiet:hover,.lx-bid__go.is-quiet:focus{color:var(--ink)}
.lx-bid__go.is-off:hover,.lx-bid__go.is-off:focus{color:var(--mut)}
.fm-maxbid:hover,.fm-maxbid:focus,
.single-item-enter-max-bid .fm-go2:hover,
.single-item-enter-max-bid .fm-go2:focus{color:var(--mb-mut,var(--mut))}
.fm-bidsignin:hover,.fm-bidsignin:focus{color:var(--acc)}
.bd-empty a:hover,.bd-empty a:focus{color:var(--acc)}

/* The Board watch star renders the live page's FontAwesome star so the
   existing watch endpoints keep their markup contract. */
.bd-star i.fa{font-size:18px;line-height:1}
.bd-star.is-on i.fa{color:#ffc000}

/* ------------------------------------------------------------- the pager
   The design's pager is in lotx-list.css. These are the four things that only
   go wrong in production, where the row carries legacy class names and sits
   inside Bootstrap and the site's own form styles.

   1. `.pagination` is a Bootstrap class (it is on the row because global.js
      reads `.controls .pagination .selected`), and Bootstrap gives it
      `margin:20px 0` plus a padding-left. That margin is what pushed the
      numbers 20px below the "Go to page" cluster beside them.
   2. `.bd-jump` is a <form>, and the site's form rules give every form a
      bottom margin, which lifted it off the same line from the other side.
   3. The design marks the current page with a bare <b>. Here it has to stay an
      anchor carrying `p`, because that is what the click handlers and
      lx_current_page() read - so the dark treatment follows `.selected`, and
      the generic anchor hover must not repaint it.
   4. lx_icon() emits a <span>, and `.bd-pages span` was written for the
      ellipsis - so the chevrons were being given the ellipsis's 20px min-width
      and muted colour inside their own button, making them 56px wide and grey
      next to 38px numbers. */
.bd-pages .lx-hide{display:none!important}

.bd-pages.pagination{margin:0;padding-left:0;border-radius:0}
.bd-jump{margin:0!important}
/* "Go to page" is a <label> so the words focus the box. Bootstrap makes every
   label bold, block and 5px tall at the bottom, which took it off the line. */
.bd-jump label{display:inline;margin:0;font-weight:inherit;font-size:inherit;color:inherit;
  cursor:pointer}

.bd-pages a.selected{background:var(--ink,#101317);border-color:var(--ink,#101317);color:#fff;
  font-weight:650;cursor:default}
.bd-pages a.selected:hover{background:var(--ink,#101317);border-color:var(--ink,#101317);color:#fff}

.bd-pages .msy{min-width:0;height:auto;padding:0;border:0;background:none;color:inherit;
  font-size:20px;line-height:1}
.bd-pages a.pprev,.bd-pages a.pnext{padding:0;width:38px;min-width:38px}

/* The ellipsis is a gap in the sequence, not a control: no box, and out of the
   tab order's way. */
.bd-pages .bd-gap{min-width:16px;padding:0 2px;-webkit-user-select:none;user-select:none}

/* These are links that do not move the page, so a keyboard user needs to see
   where they are. */
.bd-pages a:focus-visible,.bd-jump input:focus-visible{outline:2px solid var(--acc,#00a65a);
  outline-offset:2px}

@media(max-width:600px){
  /* A phone gets a shorter window of numbers from the endpoint (lx_pager's
     third argument) so the row and the jump form are one line each instead of
     three.

     The controls used to be made SMALLER here to help that fit, which got the
     trade the wrong way round: 34px is well under the ~44px a thumb needs, and
     the owner could not reliably hit a page number (2026-09-16, "it's a bit too
     small and hard to press with a thumb"). Height is what a thumb is short of
     on a row like this, so every control is 44px tall now and the width is what
     gives: 38px a number, a hairline ellipsis, 4px between. That is 330px of the
     351px a 375px phone has for it, so the row still holds one line down to
     about 360px and wraps - already allowed for - below that. */
  .bd-pager{gap:12px 14px;margin-top:18px}
  .bd-pages{flex-wrap:wrap;justify-content:center;gap:4px}
  .bd-pages a,.bd-pages span{min-width:38px;height:44px;font-size:15px;padding:0 6px;
    border-radius:11px}
  .bd-pages a.pprev,.bd-pages a.pnext{width:44px;min-width:44px}
  .bd-pages .msy{font-size:22px}
  .bd-pages .bd-gap{min-width:10px;padding:0}
  .bd-jump{font-size:14px;gap:8px}
  .bd-jump input{height:44px;width:64px;font-size:15px}
  /* 44px here too - the same thumb that could not reliably hit a 34px page
     number cannot hit a 38px button either. Square, so both sides grow. */
  .bd-top{width:44px;height:44px;border-radius:11px}
  .bd-top .msy{font-size:22px}
}

/* ------------------------------------------- the foot of the catalog, phone
 * Two stretches of nothing under the pager, reported 2026-09-16 as "this big
 * gap before and after the footer".
 *
 * Before: .bd carries a 60px bottom padding from the prototype, which was
 * drawn against a dark page where it read as breathing room. On the phone list,
 * which is white to its edges now, it is just white under white.
 *
 * After: `body.override{padding-bottom:84px}` in lotx-lot.css reserves the
 * height of the phone's pinned bid bar. That bar belongs to a LOT, and
 * lotx-lot.css is loaded by both pages, so the catalog was reserving 84px for
 * something it never shows. `#lx-lot-root` exists only on ItemShow.php, which
 * makes it the honest test for "is there a bar to clear". If a browser cannot
 * do :has(), the whole selector is dropped and the reserve simply stays, which
 * is exactly today's behaviour.
 */
@media (max-width:1000px){
  body.override:not(:has(#lx-lot-root)){padding-bottom:0}
  .bd{padding-bottom:20px}
}

/* An empty state, either page. */
.bd-empty{padding:70px 20px;text-align:center;color:var(--mut,#6A7078)}
.bd-empty .msy{font-size:44px;opacity:.5}
.bd-empty h3{font-size:20px;font-weight:650!important;color:var(--ink,#101317);margin:12px 0 6px!important}
.bd-empty p{font-size:14.5px;max-width:52ch;margin:0 auto!important}
.bd-empty a{color:var(--acc);font-weight:600;text-decoration:underline;cursor:pointer}

/* ---- lot page extras the fragment introduced ---- */
/* Upcoming auction: the two dates where the bid button would be.
   Set in the type of the Bid Increment / Buyer's Premium block under it
   (.fm-terms, lotx-lot.css) - 13px labels, 13.5px values at 600 in --ink-2 with
   tabular figures - so the two read as one family (owner, 2026-10-02: "update
   the font and font size so it's similar to Bid Increment, Buyer's Premium").
   They were 14px, the values in full ink, and the Opens date bold on top of
   that through the old page's .f-b. */
.fm-when2{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;
  background:var(--wash,#F4F4F1)}
.fm-when2 > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fm-when2 dt{font-size:13px;color:var(--mut,#6A7078)}
.fm-when2 dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink-2,#3D444E);text-align:right;
  font-variant-numeric:tabular-nums}

/* The pro one-click button under the main one. */
.fm-go2--pro{display:flex;align-items:center;justify-content:center;gap:8px}
.fm-go2--pro[disabled]{opacity:.55;cursor:not-allowed}
.fm-prolabel{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:#D9534F;color:#fff;border-radius:5px;padding:2px 6px}

/* The card-requirement notice. The link is the way out of it, so it wraps as
   one phrase rather than breaking its underline across two lines. */
.fm-card{margin:0 0 10px!important;padding:11px 13px;border-radius:10px;background:var(--bad-bg,#FDF0EC);
  color:var(--bad-ink,#A8341C);font-size:13.5px;line-height:1.55}
.fm-card a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}

/* View All Bids, under the top-bid table. */
.fm-allbids{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;
  border:1px solid var(--mut,#6A7078);border-radius:9px;font-size:14px;font-weight:600;
  color:var(--ink,#101317);transition:.15s}
.fm-allbids:hover{border-color:var(--acc);color:var(--acc)}

/* The ACL timer chip inside the panel clock: the clock IS the chip here, so it
   inherits the clock's size and only takes the state colour as ink. */
.fm-clock__t{font-variant-numeric:tabular-nums}
/* The urgency colours, as CHIP fills now that the countdown is a chip.

   These replace three rules that did the opposite - `background:none` plus a
   tinted text colour - which was right when the countdown was bare text on
   the panel and would now strip the chip's own fill. They have to live at
   this specificity to beat it: `.fm-clock__v .lot-correct-closing-time.bg-*`
   is three classes against the chip rule's two.

   Matched to the catalog card: solid #1B33A3 at rest, soft warn/bad washes
   for the last 30 minutes and the last 2. `:hover` is pinned too, because
   styles/override.css paints the legacy `bg-blue` class site-wide and shifts
   it to #1134A9 under the pointer - see the note in lotx-list.css. */
.fm-clock--live .fm-clock__v .lot-correct-closing-time.bg-blue,
.fm-clock--live .fm-clock__v .lot-correct-closing-time.bg-blue:hover{background:none;border-color:transparent;color:#1B33A3}
.fm-clock--live .fm-clock__v .lot-correct-closing-time.bg-yellow,
.fm-clock--live .fm-clock__v .lot-correct-closing-time.bg-yellow:hover{background:none;border-color:transparent;color:var(--warn-ink)}
.fm-clock--live .fm-clock__v .lot-correct-closing-time.bg-red,
.fm-clock--live .fm-clock__v .lot-correct-closing-time.bg-red:hover{background:none;border-color:transparent;color:var(--bad-ink)}
/* and the band behind it takes the wash, the same way the card's does */
.fm-clock--live:has(.bg-yellow){background:var(--warn-bg);border-color:#F0DFB0}
.fm-clock--live:has(.bg-red){background:var(--bad-bg);border-color:#F3D9CF}
[data-lx-barclock]:empty{display:none}

/* The rails are the design's own markup now (lx_rail_html), so the Swiper
   stand-in styling that used to dress the old endpoint output is gone. The
   heading size is the one thing the design sets on .fm-rails h2, and both
   rails sit in their own blocks here. */
[data-lx-rail-other]:empty,[data-lx-rail-recent]:empty{display:none}

/* Bootstrap modal polish so the live bid dialogs sit comfortably on the new
   pages without rewriting their markup. */
.override .modal-content{border-radius:14px;border:0;box-shadow:0 24px 70px rgba(10,14,20,.35)}
.override .modal-header{border-bottom:1px solid var(--line-2,#F0F0EC)}
.override #bid-modal .modal-title,.override #current_bids_modal .modal-title,
.override #lotQAModal .modal-title{font-weight:650}

/* One tap target can hold the whole card on touch screens without stealing
   text selection on desktop. */
@media (hover:none){
  .bd-card{cursor:pointer}
}

/* A page whose answer has no rail (closed auction, webcast pointer, not
   found): the message takes the full width. */
.bd.is-railless .bd-shell{grid-template-columns:minmax(0,1fr)}
/* ...and no black bar either (owner, 2026-10-01: "When auction has closed,
   no need to show the black bar that contains the filters, views, etc.").
   Every control on it - My list, the view and column switches, Filters, the
   pager - acts on a list, and these answers have none. The same class the rail
   goes by, set from the answer in lx_render(), so it also goes the moment an
   auction closes under a reader and the next refresh brings the closed
   answer. The loading screen is still up when that first answer is drawn, so
   a closed auction never shows the bar even for a frame. */
.bd.is-railless .bd-bar{display:none}

/* ------------------------------------------------ bid history (was AllBids) */
/* The tab carries every bid on the lot, so it needs what a list needs: a way
   to sort it, a way to page it, and a way to say how many at a time. Set in
   the table's own quiet register - the bids are the content, these are not. */
.fm-bidsort{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut,#6A7078);font-weight:600;
  display:inline-flex;align-items:center;gap:5px}
.fm-bidsort:hover{color:var(--ink,#101317)}
.fm-bidsort i.fa{font-size:10px;opacity:0;transition:.15s}
.fm-bidsort.is-on{color:var(--ink,#101317)}
.fm-bidsort.is-on i.fa{opacity:1}
.fm-bidsort.is-asc i.fa{transform:rotate(180deg)}
.fm-bids th.fm-bids__amt .fm-bidsort{justify-content:flex-end;width:100%}

/* The one thing the winning row's colour cannot say. */
.fm-bidtop{display:inline-block;margin-left:9px;padding:2px 7px;border-radius:999px;font-size:10.5px;
  font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  background:var(--warn-bg,#FFF8E6);color:var(--warn-ink,#8A6100)}

/* A quiet line under the table, in the register of the table's own headers. */
.fm-bidfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line-2,#F0F0EC)}
.fm-bidper{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:400;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut,#6A7078)}
.fm-bidper select{height:30px;border:1px solid var(--line,#E7E7E3);border-radius:8px;
  background:var(--card,#fff);padding:0 6px;font-family:inherit;font-size:13px;letter-spacing:normal;
  text-transform:none;color:var(--ink,#101317)}
.fm-bidcount{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--mut,#6A7078);font-variant-numeric:tabular-nums}
.fm-bidpager{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;
  color:var(--mut,#6A7078);font-variant-numeric:tabular-nums}
.fm-bidpager button{width:32px;height:32px;border:1px solid var(--line,#E7E7E3);border-radius:8px;
  background:var(--card,#fff);color:var(--ink-2,#3D444E);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:.15s}
.fm-bidpager button:hover{border-color:var(--ink,#101317);color:var(--ink,#101317)}
.fm-bidsignin{color:var(--acc);font-weight:600;text-decoration:underline}

/* The standing maximum on the Adjust button, when there is one. */
.fm-go2__v{font-variant-numeric:tabular-nums}
/* The current maximum comes off the Adjust button on a phone (owner, 2026-09-22:
   "Adjust your maximum ($1,500.00)" was too long for the sticky bar). 1000px is
   where .fm-bar takes over as the bid control, so the two agree by construction.
   The span stays in the DOM rather than being dropped server side: the bidding
   code writes the new figure into .max-bid-<id> when a maximum changes, and a
   desktop still has room to show it. */
@media(max-width:1000px){ .fm-go2__v{display:none} }

/* A bid button the server has already ruled out. */
.fm-go.is-off,.fm-go[disabled]{opacity:.55;cursor:not-allowed}

/* The dialog carries the same inline messages the old popup did. */
.fm-modal .bid-popup-messages:empty{display:none}
.fm-modal .bid-popup-messages{margin-top:14px}
.fm-modal .bid-popup-messages .alert-danger,
.fm-modal .bid-popup-messages .alert-warning{border-radius:9px;font-size:13.5px}
.fm-modal__bad{margin:12px 0 0!important;font-size:13px;color:var(--bad-ink,#A8341C);font-weight:600}

/* The pro checkbox sits directly under the green bid button - it is that
   button's setting, so it belongs with it (owner, 2026-09-15). The design put
   it after the second button, which is why the stylesheet's own
   `.fm-pro + .fm-maxbid` gap no longer lands: the adjust wrapper is between
   them now. These restore the breathing room on whichever of the two second
   controls is the visible one. */
.fm-pro + .single-item-enter-max-bid > .fm-go2,
.fm-pro + .single-item-enter-max-bid + .fm-maxbid{margin-top:22px}

/* The design wraps the reading - the tabs, the lot pager, the rails - in a
   block with padding-top:28px. This port renders them as siblings of
   .fm-cols instead, so the gap goes on the first of them; without it the
   amber note at the foot of the bidding panel butts straight into the top of
   the tabs card. */
.fm-cols + .fm-sec{margin-top:28px}

/* ===========================================================================
 * Ask a question / My Notes
 *
 * Both are Bootstrap modals, and both stay that way: global.js and the lot
 * markup open them with data-toggle / data-dismiss, and #itemNotesModal lives
 * in includes/footer.php where Current Bids and the Watch List open it too.
 * So this is a restyle, not a rebuild, and it is scoped to body.lx-page - the
 * marker scripts/lotx-item.js puts on the two redesigned pages - so the pages
 * that have not been redesigned keep the dialog they have today.
 *
 * The values below are the confirmation dialog's, to the pixel (see
 * .fm-modal__* in lotx-lot.css), so the lot page has one kind of dialog.
 * ======================================================================== */
body.lx-page #lotQAModal .modal-dialog,
body.lx-page #itemNotesModal .modal-dialog{max-width:440px;width:calc(100% - 48px);margin:24px auto}

/* Bootstrap 3 clears .modal-header and .modal-footer with :before/:after
   pseudo-elements. Turning those rows into flex containers promotes the
   pseudo-elements to flex items, and with a gap they were pushing the heading
   32px in from the padding edge - out of line with the body beneath it. */
body.lx-page #lotQAModal .modal-header::before,
body.lx-page #lotQAModal .modal-header::after,
body.lx-page #lotQAModal .modal-footer::before,
body.lx-page #lotQAModal .modal-footer::after,
body.lx-page #itemNotesModal .modal-header::before,
body.lx-page #itemNotesModal .modal-header::after,
body.lx-page #itemNotesModal .modal-footer::before,
body.lx-page #itemNotesModal .modal-footer::after{display:none}

body.lx-page #lotQAModal .modal-content,
body.lx-page #itemNotesModal .modal-content{background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);overflow:hidden}

/* Head. Bootstrap floats .close right, which is what left the title stranded
   beside a column of empty space; a flex row puts it back on the title's line. */
body.lx-page #lotQAModal .modal-header,
body.lx-page #itemNotesModal .modal-header{display:flex;align-items:flex-start;
  justify-content:flex-start;text-align:left;gap:16px;
  padding:26px 26px 22px;border-bottom:1px solid var(--line-2);min-height:0}
body.lx-page #lotQAModal .modal-title,
body.lx-page #itemNotesModal .modal-title{font-size:20px;font-weight:700;letter-spacing:-.01em;
  line-height:1.3;margin:0!important;color:var(--ink)}
body.lx-page .lx-dlg__titles{min-width:0}
body.lx-page .lx-dlg__sub{margin:7px 0 0!important;font-size:13.5px;color:var(--mut);line-height:1.55}
/* order:2 as well as margin-left:auto - #itemNotesModal (includes/footer.php)
   puts .close BEFORE the title in the markup, and in a flex row that would
   otherwise leave the cross sitting to the LEFT of the heading. */
body.lx-page #lotQAModal .close,
body.lx-page #itemNotesModal .close{order:2;margin-left:auto;background:none;border:0;float:none;
  font-size:26px;line-height:1;color:var(--mut);cursor:pointer;padding:0 2px;opacity:1;
  text-shadow:none;font-weight:400}
/* The heading takes the row and the cross sits off its end. Bootstrap's
   .modal-title is centred by the legacy stylesheet, which left it floating in
   the middle of the header rather than starting on the body's left edge. */
body.lx-page #lotQAModal .modal-title,
body.lx-page #itemNotesModal .modal-title,
body.lx-page .lx-dlg__titles{order:1;flex:1 1 auto;min-width:0;text-align:left}
body.lx-page #lotQAModal .close:hover,
body.lx-page #itemNotesModal .close:hover{color:var(--ink);opacity:1}

/* Body. */
body.lx-page #lotQAModal .modal-body,
body.lx-page #itemNotesModal .modal-body{padding:24px 26px 4px}
body.lx-page #itemNotesModal .modal-body .form-group{margin:0}

/* The lot being asked about.
   Was a bordered thumbnail beside "(Lot #5)" and the name, both bold, stacked
   on two lines - heavy, and nothing else on the page reads that way. It is now
   a context panel in the same wash the confirmation dialog uses for its
   summary, with the lot number set as the catalog cards set theirs (small,
   uppercase, tracked) over the name in ink. The eye lands on the lot, and the
   question field below is the only thing asking to be filled in. */
body.lx-page .lx-dlg__lot{display:flex;align-items:center;gap:14px;margin-bottom:22px;
  padding:12px;background:var(--wash);border-radius:11px}
body.lx-page .lx-dlg__lot .qa-lot-image{width:56px;height:56px;flex:0 0 56px;border-radius:8px;
  object-fit:cover;background:var(--line-2);border:0;padding:0;display:block}
body.lx-page .lx-dlg__lot-t{min-width:0}
body.lx-page .lx-dlg__lot-n{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);font-weight:600;line-height:1.4}
body.lx-page .lx-dlg__lot .qa-lot-title{display:block;font-size:14.5px;line-height:1.4;
  color:var(--ink);font-weight:600;margin:3px 0 0;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Field. The design's label register, and its focus ring. */
body.lx-page .lx-dlg__label,
body.lx-page #itemNotesModal .modal-body label{display:block;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:9px}
body.lx-page .lx-dlg__field,
body.lx-page #itemNotesModal .modal-body textarea{display:block;width:100%;border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;background:var(--card);font-family:inherit;font-size:14.5px;
  line-height:1.6;color:var(--ink);resize:vertical;min-height:132px;box-shadow:none;height:auto}
body.lx-page .lx-dlg__field:focus,
body.lx-page #itemNotesModal .modal-body textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16)}
body.lx-page .lx-dlg__field::placeholder,
body.lx-page #itemNotesModal .modal-body textarea::placeholder{color:var(--mut)}

/* What the endpoints answer with. */
body.lx-page .submit-lot-question-response:empty,
body.lx-page .submit-item-notes-response:empty{display:none}
body.lx-page .submit-lot-question-response,
body.lx-page .submit-item-notes-response{margin-bottom:16px!important;border-radius:9px;
  font-size:13.5px;line-height:1.55}
body.lx-page .submit-lot-question-response > div,
body.lx-page .submit-item-notes-response > div{border-radius:9px;padding:11px 14px!important}

/* Foot: one solid action, one quiet way out. */
body.lx-page #lotQAModal .modal-footer,
body.lx-page #itemNotesModal .modal-footer{display:flex;align-items:center;gap:12px;
  padding:22px 26px 24px;border-top:0;margin:0;text-align:left}
body.lx-page .lx-dlg__go,
body.lx-page #itemNotesModal .modal-footer input[type="submit"]{flex:1;border:0;border-radius:10px;
  background:var(--acc);color:var(--acc-ink);font-size:15.5px;font-weight:700;padding:15px 20px;
  cursor:pointer;transition:.15s;font-family:inherit;text-shadow:none;box-shadow:none;
  -webkit-appearance:none;appearance:none}
body.lx-page .lx-dlg__go:hover,
body.lx-page #itemNotesModal .modal-footer input[type="submit"]:hover{filter:brightness(1.06);
  background:var(--acc);color:var(--acc-ink)}
body.lx-page .lx-dlg__cancel,
body.lx-page #itemNotesModal .modal-footer .btn-link{flex:0 0 auto;background:none;border:0;
  padding:15px 14px;cursor:pointer;color:var(--mut);font-size:14.5px;font-weight:400;
  font-family:inherit;text-decoration:none}
body.lx-page .lx-dlg__cancel:hover,
body.lx-page #itemNotesModal .modal-footer .btn-link:hover{color:var(--ink);text-decoration:none}
/* Bootstrap paints .btn-link with its own link blue from several directions
   (.btn-link, a.btn-link, .override .btn-link); this is the one place the
   colour has to be stated outright. */
body.lx-page #itemNotesModal .modal-footer .btn-link,
body.lx-page #itemNotesModal .modal-footer .btn-link:focus{color:var(--mut)!important}
body.lx-page #itemNotesModal .modal-footer .btn-link:hover{color:var(--ink)!important}

@media (max-width:520px){
  body.lx-page #lotQAModal .modal-header,
  body.lx-page #itemNotesModal .modal-header{padding:22px 20px 18px}
  body.lx-page #lotQAModal .modal-body,
  body.lx-page #itemNotesModal .modal-body{padding:20px 20px 4px}
  body.lx-page #lotQAModal .modal-footer,
  body.lx-page #itemNotesModal .modal-footer{padding:18px 20px 20px}
}

/* ==========================================================================
 * The auction's first-visit note (#modalAuctionPopupInfo, Lots.php)
 *
 * The seller's own "read this first" HTML, shown once per browser per auction.
 * Owner, 2026-10-01: "Improve the design of this popup". It was Bootstrap's
 * modal-lg - 900px of white with a 300px floor, the seller's text in the
 * site's Roboto top left, and a lone green button in a footer across the
 * bottom - in the middle of a page whose every other dialog had been
 * redesigned. It is now the same kind of dialog as Ask and My Notes above
 * (the card, the radius, the shadow, the head, one solid accent button), at
 * a width a paragraph reads well at, centred in the window.
 *
 * The body is the seller's HTML, which across the 329 auctions that set one
 * runs from a five line list to 145KB of pasted terms, with Word's inline
 * font sizes, tables and pictures. So it SCROLLS ON ITS OWN inside a dialog
 * capped at the window's height, and the button stays in reach however long
 * the text is; and it gets the lot page's own guards for pasted markup
 * (nothing wider than the box, a pasted line-height or nowrap undone) and
 * nothing more - a seller's headings and emphasis are theirs.
 *
 * Scoped by the id, not body.lx-page: this markup exists on Lots.php only,
 * and ViewCurrentAuction.php's older copy of the same id never loads this
 * stylesheet.
 * ======================================================================== */
#modalAuctionPopupInfo.in{display:flex!important;align-items:center;justify-content:center}
#modalAuctionPopupInfo .modal-dialog{width:calc(100% - 32px);max-width:580px;margin:24px auto}
#modalAuctionPopupInfo .modal-content{display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  background:#fff;border:0;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,19,23,.06),0 30px 80px -24px rgba(16,19,23,.5);
  font-family:var(--sans);color:var(--ink-2);-webkit-font-smoothing:antialiased}
/* Bootstrap 3's clearfix pseudo-elements become flex items in a flex row. */
#modalAuctionPopupInfo .modal-header::before,#modalAuctionPopupInfo .modal-header::after,
#modalAuctionPopupInfo .modal-footer::before,#modalAuctionPopupInfo .modal-footer::after{display:none}

/* Head: the auction it welcomes the reader to, behind the gavel, in a tint of
   the seller's own accent. */
#modalAuctionPopupInfo .modal-header{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:22px 26px 19px;border-bottom:1px solid var(--line);text-align:left;min-height:0}
.lx-pop__ico{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;background:rgba(var(--acc-rgb),.12);color:var(--acc)}
#modalAuctionPopupInfo .lx-pop__ico .msy{font-size:25px}
.lx-pop__titles{min-width:0;flex:1 1 auto}
#modalAuctionPopupInfo .lx-pop__eyebrow{margin:0 0 2px!important;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);line-height:1.5}
/* !important against the theme's `.override h4{color:...!important}`: the
   heading is ink here, as every heading in the redesigned pages is. */
#modalAuctionPopupInfo .modal-title{margin:0!important;font-family:var(--sans);font-size:19px;
  font-weight:700;letter-spacing:-.012em;line-height:1.3;color:var(--ink)!important;text-align:left;
  overflow-wrap:anywhere;text-wrap:balance}

/* Body: the seller's note. */
#modalAuctionPopupInfo .lx-pop__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:22px 26px 20px;font-size:15.5px;line-height:1.65;
  color:var(--ink-2);overflow-wrap:anywhere}
.lx-pop__body p{margin:0 0 12px}
.lx-pop__body ul,.lx-pop__body ol{margin:0 0 14px;padding-left:22px}
.lx-pop__body li{margin:0 0 8px;padding-left:3px}
.lx-pop__body li::marker{color:var(--acc)}
.lx-pop__body :where(b,strong){color:var(--ink);font-weight:700}
.lx-pop__body a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.lx-pop__body a:hover{color:var(--acc)}
.lx-pop__body :where(*){max-width:100%}
.lx-pop__body img[width],.lx-pop__body img[style*="width"]{height:auto!important}
.lx-pop__body table{width:100%!important;border-collapse:collapse}
.lx-pop__body [style*="line-height"]{line-height:inherit!important}
.lx-pop__body [style*="nowrap"]{white-space:normal!important}
.lx-pop__body>:last-child,.lx-pop__body>:last-child>:last-child{margin-bottom:0}

/* Foot: one way on, the full width, in the accent - the arrow is the only
   motion in the dialog, a nudge on the pointer. */
#modalAuctionPopupInfo .modal-footer{flex:0 0 auto;display:block;margin:0;padding:16px 26px 22px;
  border-top:1px solid var(--line);text-align:center}
.lx-pop__go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 20px;border:0;border-radius:11px;background:var(--acc);color:var(--acc-ink);
  font-family:var(--sans);font-size:15.5px;font-weight:700;line-height:1.3;cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(var(--acc-rgb),.75);transition:filter .15s,box-shadow .15s}
.lx-pop__go .msy{font-size:20px;transition:transform .18s ease}
.lx-pop__go:hover{filter:brightness(1.06);box-shadow:0 10px 24px -10px rgba(var(--acc-rgb),.9)}
.lx-pop__go:hover .msy{transform:translateX(3px)}
.lx-pop__go:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .lx-pop__go .msy{transition:none} }

@media (max-width:520px){
  #modalAuctionPopupInfo .modal-header{padding:18px 20px 16px;gap:12px}
  .lx-pop__ico{width:40px;height:40px;border-radius:11px}
  #modalAuctionPopupInfo .lx-pop__ico .msy{font-size:22px}
  #modalAuctionPopupInfo .modal-title{font-size:17.5px}
  #modalAuctionPopupInfo .lx-pop__body{padding:18px 20px 16px;font-size:15px}
  #modalAuctionPopupInfo .modal-footer{padding:14px 20px 18px}
}

/* ==========================================================================
 * The phone list, edge to edge
 *
 * On a phone the catalog dropped a rounded, bordered panel around every lot
 * and put a gap between them, which is most of a column's width spent on
 * furniture rather than on lots. The site owner asked for the panels gone and
 * hairlines in their place (2026-09-15).
 *
 * So below the width where the column switch takes over, the cards stop being
 * cards: no panel, no radius, no gap, white ground, and one shared grid of
 * 1px lines - the vertical between the two columns, the horizontal under every
 * row. The grid bleeds through the shell's side gutter so the lines reach both
 * screen edges, while the strip above and the pager below keep theirs.
 *
 * The padding INSIDE a lot stays. It is already down to 10-11px at this size,
 * and taking it out would leave the name and the figure touching the lines
 * that now separate them from the next lot.
 * ======================================================================= */
@media (max-width:1000px){
  .bd{background:#fff}

  /* Full bleed: out through the gutter .bd-shell holds. */
  .bd-lots{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .bd.is-cols-1 .bd-lots,
  .bd.is-cols-2 .bd-lots{gap:0!important}

  .bd-card{background:#fff;border:0;border-radius:0;overflow:hidden;
    border-bottom:1px solid var(--line-2)}
  .bd-card:hover{border-color:transparent;box-shadow:none}

  /* The line between the columns. The right-hand card is already against the
     screen edge and needs nothing. */
  .bd.is-cols-2 .bd-lots > .bd-card:nth-child(odd){border-right:1px solid var(--line-2)}

  /* Below 1000px a card has no border to thicken and runs to the screen edge,
     so the ring goes INSIDE it: an inset shadow is drawn within the card's own
     box and needs no border and no room outside one. Same job as the 3px ring
     on a desktop (owner, 2026-09-28), which the .06 tint on its own was too
     quiet to do. */
  .bd-card.is-active{border-color:var(--line-2);
    box-shadow:inset 0 0 0 2px var(--acc);
    background:rgba(var(--acc-rgb),.07)}

  /* The photograph needs a margin of its own now. Its ground is a blurred
     copy of the picture, so run it to the cell edge and two photographs meet
     with nothing between them - the dividing line is there, but invisible
     against them, which is the one thing these lines exist to do. Inset it and
     the line runs clean from top to bottom of the row. The line the design put
     UNDER the photograph goes: inside a panel it closed the picture off, on an
     open page it is just another rule competing with the real ones.

     No ground of its own around the picture: the card's shows through. The
     open lot's ring above is an INSET shadow, which paints under the card's
     children, so a white frame here painted over it and over the tint all the
     way round the photograph - the ring and the green started at the lot band
     (owner, 2026-09-30: "the selected lot doesnt show the green border
     properly"). Every other card is white underneath anyway. */
  .bd-shot{border-radius:0;border-bottom:0;background:none;padding:10px 10px 0}
  .bd.is-cols-1 .bd-shot{padding:12px 12px 0}
}

/* --------------------------------------------------- a tap leaves no ring
 * The lot card is focusable on purpose - arrow keys walk the list in a split
 * layout - so tapping it focuses it, and a phone browser then draws its own
 * focus ring and leaves it there. Coming back from the drawer, the card the
 * visitor had tapped was still wearing it (reported 2026-09-15: "this blue
 * border ... happening due to focusing").
 *
 * The ring is not removed, it is narrowed to :focus-visible, which is keyboard
 * focus only - taking it away altogether would strand anyone navigating the
 * list by keyboard with no idea where they are. It is drawn INSIDE the card
 * (a negative offset) because the card clips its own overflow, which is what
 * turned the ring into a stray line down one edge rather than a box.
 */
/* A card named by the address's #fragment must not land underneath the two
   sticky bars. Two different things scroll to one: this page, through
   lx_scroll_to_card(), and the BROWSER, which re-runs the fragment when the
   card it names is only rendered after the feed arrives. Telling the card how
   much room it needs above it means both land in the same place, instead of
   the later one winning - which is why the old code got away with animating
   for 600ms (it simply finished last) and why taking the animation away
   exposed this. Matches lx_sticky_top() + 16. */
.bd-card{scroll-margin-top:calc(var(--hdr,70px) + var(--bar,58px) + 16px)}

.bd-card{-webkit-tap-highlight-color:transparent}
.bd-card:focus,
.bd-card a:focus,
.bd-card button:focus{outline:none}
.bd-card:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.bd-card a:focus-visible,
.bd-card button:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}

/* ------------------------------------------------- the rail card's lot name
 * A rail is a flex row, so every card stretches to the tallest one. The lot
 * name in a rail card was not clamped, so a single lot with a real estate
 * agent's idea of a title - this site has one at 160 characters - took eleven
 * lines, made its own card 459px instead of 286, and left every other card in
 * the rail carrying 173px of empty white space under its price. Reported
 * 2026-09-16 as "the panel is too long with big empty space".
 *
 * Two lines, the same treatment .bd-name already has on the catalog card, with
 * the min-height so a one-line name and a two-line name still come out level.
 * The whole name stays reachable: lx_rail_html() puts it on the card's title.
 */
.fm-card2__t{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.84em}

/* =========================================================== the two top bars
 * A phone had two different headers over the same lot. Opened from the catalog
 * it came up as a drawer with its own black bar - the lot's name and the way
 * back - covering the site header completely. Opened from a link or a reload,
 * the very same lot showed the green site header and no black bar at all.
 * Reported 2026-09-16: "we seem to have 2 different top bar design on mobile
 * view ... let's use both the green and the black".
 *
 * Both doors now show both bars, and they behave the way a native app's do:
 *
 *   - the BLACK bar belongs to the lot - who you are looking at and the way
 *     out - and is there at every scroll position, always;
 *   - the GREEN bar belongs to the site, and gets out of the way while the
 *     reading goes down the page, coming back the instant it goes up.
 *
 * --lx-top is the one number the whole arrangement turns on: how much of the
 * green header is on screen right now. Everything pinned under it - the black
 * bar on a lot, the catalog's own dark bar, the sticky columns in the tablet
 * band - reads that and rides with it.
 *
 * The green header slides on a transform and the black bars on a transform, so
 * a phone repaints two bars per gesture rather than re-laying-out a lot. The
 * one exception is the catalog's .bd-bar, which is position:sticky and can
 * only be moved by its own offset.
 *
 * lx_topbar_js() (cvf/inc/functions_lot_ui.php) drives it and explains the
 * scroll rules; lx_topbar_html() renders both black bars from one place so
 * they cannot drift apart again.
 */
/* --lx-bar is the lot bar's FULL height, border included, because it is also
   what the content below is padded by (#lx-lot-root, .lx-drawer__body) to clear
   a bar that is fixed.
   The two numbers are the CATALOG bar's measured heights, so the black bar is
   the same depth whether you are looking at the list or a lot (owner,
   2026-09-17). There it is derived rather than set - min-height 52 on a tablet,
   and 8 + 44 + 8 on a phone - plus the 1px rule underneath:
     tablet  52 + 1 = 53
     phone   60 + 1 = 61
   If .bd-bar__in's padding or --bar ever move, these move with them. */
:root{--lx-bar:53px}
@media(max-width:640px){ :root{--lx-bar:61px} }
/* --lx-top is declared on the three elements that READ it, and never on body.
 *
 * It used to live on body, which is the obvious place for a number three
 * things share - and it was the most expensive line in these stylesheets. A
 * custom property is INHERITED, so changing one on body invalidates the
 * computed style of every element beneath it; and this one changes on every
 * scroll direction change, because that is how the green header hides. On a
 * lot page that is 800 elements re-styled, mid-gesture, over and over, which
 * a phone shows as the page stalling and repainting (owner, 2026-09-17: "as I
 * scroll down the long page it would cut the content and show blank then
 * renders the content").
 *
 * Measured on the lot page, toggling .lx-hdr-off on body and forcing the
 * recalc: 0.9ms median and 3.6ms at worst with the property on body, 0.0ms
 * with it here - against 0.0ms for a class toggle that nothing matches at all.
 * Multiply by a phone.
 *
 * Declaring it on the consumers keeps the whole thing working exactly as
 * before - each of them still reads var(--lx-top) - while the invalidation
 * from .lx-hdr-off shrinks to the two or three elements that carry these
 * classes. Anything new that wants to ride the header must add itself to BOTH
 * lists below rather than move the property back up the tree. */
.lx-drawer__bar,
.lx-layer__bar,
.lx-lotbar,
.bd-bar{--lx-top:var(--hdr,70px)}

/* --barbtn, the same one the catalog's bar uses and the same two values, so a
   reader moving between the list and a lot sees controls of one size. The lot
   bar only exists below 1000px, so 40 is its tablet size and 44 its phone one. */
/* The bar's colour, named once. It lives on :root in THIS sheet because this
   is the only one both pages load - the catalog's own `--shell` is the same
   value but is declared in lotx-list.css, which the lot page never sees. The
   phone stage borrows it to go full bleed under the bar (lotx-lot.css), so
   the two can no longer drift apart. */
:root{--lx-shell:#12161C}
/* Its raised tone (the catalog's --shell-2), and with it the pro mode Bid
   button's two colours on both pages: at rest the bar's own near-black, under
   the pointer this (lotx-list.css .lx-bid__go.is-pro, lotx-lot.css .fm-go). */
:root{--lx-shell-2:#1D242E}
.lx-topbar{display:flex;align-items:center;gap:8px;padding:0 14px;height:var(--lx-bar);
  box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--lx-shell,#12161C);color:#fff;--barbtn:40px}
@media(max-width:700px){ .lx-topbar{--barbtn:44px;padding:0 10px} }
/* Pushes the actions to the far side. The lot's NAME used to sit here; it is
   in the page heading just below, and the room is better spent on the two
   controls (owner, 2026-09-17). */
.lx-topbar__sp{flex:1 1 auto;min-width:0}
.lx-topbar__back,.lx-topbar__act{display:inline-flex;align-items:center;justify-content:center;
  width:var(--barbtn);height:var(--barbtn);
  border-radius:9px;background:rgba(255,255,255,.09);border:0;color:#fff;cursor:pointer;flex:0 0 auto;
  text-decoration:none;padding:0;transition:background .15s,color .15s}
/* An <a> on the lot page, a <button> in the drawer. Bootstrap repaints any
   anchor blue on hover and focus at (0,1,1), so these are pinned at (0,2,0). */
.lx-topbar__back:hover,.lx-topbar__back:focus,.lx-topbar__back:active,
.lx-topbar__act:hover,.lx-topbar__act:focus,.lx-topbar__act:active{
  background:rgba(255,255,255,.18);color:#fff;text-decoration:none}
.lx-topbar__back:focus-visible,.lx-topbar__act:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.lx-topbar__back .msy,.lx-topbar__act .msy{font-size:20px}
/* The back control is a chevron here (owner, 2026-09-22) and arrow_back_ios_new
   fills 0.80 of its em where arrow_back filled 0.65, so 20px would come out a
   quarter taller than everything else in the bar. 17px lands its ink on 13.6px,
   which is where the arrow's was. */
.lx-topbar__back .msy{font-size:17px}
.lx-topbar__act .fa{font-size:17px;line-height:1}
.lx-topbar__acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* It ships hidden until LXItem knows which lot it is watching, and a <span>
   needs telling. */
.lx-topbar__act[hidden]{display:none}
/* Watching: the STAR goes yellow, the button does not change colour (owner,
   2026-09-21). It used to take the green accent as a fill, which made a
   watched lot shout louder than the share button beside it and said nothing
   about what had been turned on.
   #FFC000 is the yellow the catalog's own star paints, confirmed by building
   a `.bd-star.is-on` in the live cascade and reading it: the button there
   carries #FFC94D but `.bd-star.is-on i.fa` at (0,3,1) overrides it, so the
   colour an eye actually sees on a card is this one. Set on the icon here too,
   for the same reason it had to be set on the icon there.
   The chip keeps its own background and its own hover, so the only thing that
   changes between watching and not is the star. */
.lx-topbar__act.is-on{background:rgba(255,255,255,.09);color:#FFC000}
.lx-topbar__act.is-on i.fa{color:#FFC000}
.lx-topbar__act.is-on:hover,.lx-topbar__act.is-on:focus{background:rgba(255,255,255,.18);color:#FFC000}
.lx-topbar__act.is-on:hover i.fa,.lx-topbar__act.is-on:focus i.fa{color:#FFC000}

/* The standalone lot page's copy: pinned to the window, under the green header
   while it is showing and at the top of the screen once it has gone. */
/* The catalog's full-width lot layer gets the same bar on the same terms. Its
   parent is display:none unless a lot is open, so nothing else is needed to
   keep it off the list. */
.lx-lotbar,
.lx-layer__bar{position:fixed;left:0;right:0;top:0;z-index:1030;display:none;
  transform:translateY(var(--lx-top));
  transition:transform .26s cubic-bezier(.32,.72,.34,1)}

@media (max-width:1000px){
  .lx-lotbar,
  .lx-layer__bar{display:flex}
  /* The layer clears its own bar exactly as #lx-lot-root does on the
     standalone page, and its 22px opening margin goes: that margin is for a
     lot sitting under the CATALOG's bar on a desktop, and under a bar of its
     own it is just a strip of page between the two. .fm-cols supplies what
     spacing is wanted below 1000, and none at all below 700 where the stage
     runs full bleed in the bar's own colour. */
  #lx-layer-lot{padding-top:var(--lx-bar)}
  .lx-lot-layer .fm-in{padding-top:0}
  /* The lot clears its own bar. styles-bootstrap.css clears the green header
     with a round body padding that overshoots the real header, so --hdrgap
     (what lx_header_measure_js measured that overshoot to be) comes off again
     here - the same trick .bd uses - and the lot starts exactly under the bar
     instead of a stripe of page background below it. */
  #lx-lot-root{padding-top:var(--lx-bar);margin-top:calc(var(--hdrgap,0px) * -1)}

  body.override .navbar-fixed-top{transition:transform .26s cubic-bezier(.32,.72,.34,1);
    will-change:transform}
  body.override.lx-hdr-off .navbar-fixed-top{transform:translateY(-100%)}
  /* While the window is being dragged the bars must not animate: see
     onWindowResize() in lx_topbar_js(). Without this they ease toward a target
     that keeps moving and read as flickering or missing. */
  body.lx-no-anim .navbar-fixed-top,
  body.lx-no-anim .lx-lotbar,
  body.lx-no-anim .lx-layer__bar,
  body.lx-no-anim .bd-bar,
  body.lx-no-anim .lx-drawer__bar{transition:none!important}

  /* Scoped to the consumers, not set on body - see --lx-top above.
     `body.override` on purpose, matching the rule that hides the green header
     three lines up. The two have to agree: this one pulls the black bar to the
     top of the screen and that one lifts the green header out of the way, and
     if only one of them applied the black bar would slide up UNDER a header
     that is still showing and disappear behind it. They used to differ - the
     header rule asked for .override and this one did not - so any page that
     lost that class would have parked the bar out of sight. */
  body.override.lx-hdr-off .lx-drawer__bar,
  body.override.lx-hdr-off .lx-layer__bar,
  body.override.lx-hdr-off .lx-lotbar,
  body.override.lx-hdr-off .bd-bar{--lx-top:0px}

  /* The catalog's dark bar is sticky, so it follows by its offset rather than
     by a transform: a transform would push it down the page at scroll 0 too,
     where it is still in flow and the header is always showing anyway. */
  .bd-bar{top:var(--lx-top);transition:top .26s cubic-bezier(.32,.72,.34,1)}

  /* While the drawer is up it is the site header, not the drawer, that has to
     be on top - the drawer covers the whole screen and would otherwise bury
     it. The lot's own dialogs (1100 / 1200) and the toast (1300) clear it
     without help. */
  body.lx-drawer-lock .navbar-fixed-top{z-index:1051}

  /* A Bootstrap modal opened from inside the drawer has to clear the DRAWER,
     not just the page (owner, 2026-09-21: the header's search "doesnt show on
     top of the lot detail ... it shows this white space").
     `.modal` and `.lx-drawer` both sit at 1050, so which one won came down to
     document order, and the drawer is written later - so the drawer buried the
     search field, while the only part of the modal's white panel still on show
     was the 50px strip above the drawer's own bar. That strip is the white
     space in the report: it is the modal, not a gap.
     Measured while broken: the point at the middle of the search input hit
     `.lx-drawer__bar`. So the modal goes over the drawer, its backdrop with
     it, and both stay under the lot's own dialogs.
     The navbar no longer has to dive to z-index 40 to stay out of a modal's
     way, which is what left the green header buried under the drawer and the
     strip looking empty: at 1051 it is above the drawer and below the backdrop,
     so it stays put and dims with everything else, the way it does on a page
     with no drawer. This also covers Ask a question, which is a Bootstrap
     modal opened from inside the drawer too. */
  body.lx-drawer-lock .modal-backdrop{z-index:1080}
  body.lx-drawer-lock .modal{z-index:1090}
}

/* ------------------------------------------- the lot's ends, on a phone
 * Two places on a lot spent height on a phone without earning it, both
 * reported 2026-09-16 ("these sections are a bit space consuming on mobile
 * view ... the back to catalog button is unnecessary since we already have the
 * float black header with a back button").
 *
 * 1. The way back is said three times - the bar's arrow, a button under the
 *    title, a button under the page. On a phone the bar's arrow is always on
 *    screen, so the other two are repetition that costs 55px and 62px. They
 *    stay on a desktop, which has no bar. Nothing is lost for a reader who
 *    came from the watch list or Current Bids either: the arrow is mirrored
 *    from that same link (§5.6), label and destination included.
 * 2. The paging cluster was three stacked rows hard against the right edge,
 *    with the left half of each row empty. Prev and Next share the width in
 *    one row now and the jump to the top keeps its square at the end.
 *
 * 198px of footer becomes 66, and the head loses 55: about 190px off a phone
 * lot, which is a quarter of the screen.
 */
@media (max-width:1000px){
  .fm-back,
  .fm-pager__a--wide{display:none}
  /* A row with nothing but the hidden link in it still costs the grid's
     row-gap, so it comes out of the grid altogether. The marker is on the row
     when something else (Edit Lot) is in there to keep. */
  .fm-head__r:not(.fm-head__r--edit){display:none}

  .fm-foot{margin-top:0;padding-top:16px;gap:10px;flex-wrap:nowrap;align-items:stretch}
  .fm-foot__nav{width:auto;flex:1 1 auto;min-width:0;gap:10px;flex-wrap:nowrap}
  .fm-pager{width:100%;gap:10px}
  .fm-pager__a{flex:1 1 0;min-width:0;justify-content:center;padding:12px 10px;gap:6px}
  .fm-up{flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .lx-lotbar,.lx-layer__bar,.lx-drawer__bar,.bd-bar,body.override .navbar-fixed-top{transition:none}
}

/* ===================================================== PhotoSwipe, dressed
 * The lot page had PhotoSwipe before the redesign and the owner asked for it
 * back (2026-09-16). It arrives with its own dark chrome, which is close to
 * this design's already - the lightbox it replaces was rgba(10,11,13,.97) with
 * controls at 70% white - so this is a handful of its own custom properties
 * set to the values .fm-lb used, rather than a re-skin. `lx-pswp` is the
 * mainClass LXItem opens it with, so nothing here reaches any other PhotoSwipe
 * on the site (the admin panel runs its own).
 */
.lx-pswp{
  --pswp-bg:#0a0b0d;
  /* The ground behind a picture that has not arrived. It should be the
     viewer's own, so that if it is ever seen it reads as the viewer opening
     rather than as an empty box (see msrc in lotx-item.js, which is what
     stops it being seen at all). */
  --pswp-placeholder-bg:#0a0b0d;
  --pswp-icon-color:#fff;
  --pswp-icon-color-secondary:#0a0b0d;
  --pswp-icon-stroke-color:transparent;
  --pswp-icon-stroke-width:0;
}
/* Its own buttons at the same weight as the ones on the stage underneath. */
.lx-pswp .pswp__button{opacity:.7;transition:opacity .15s}
.lx-pswp .pswp__button:hover,
.lx-pswp .pswp__button:focus-visible{opacity:1}
.lx-pswp .pswp__counter{opacity:.7;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
/* PhotoSwipe puts itself at 100000, which is above everything this page has to
   say. Brought down to sit over the lot's own dialogs and the catalog's filter
   sheet (1200 / 1250) but under the toast (1300), so "Added to your watch list"
   still reaches the reader while a photograph is open. */
.lx-pswp{z-index:1290}

/* =========================================== no blurring on a phone
 * Scrolling the lot page on a phone emptied the screen: content cut off
 * mid-card with page background below it, for about a second, on a quick
 * swipe (owner, 2026-09-17). It took six rounds and an A/B on the owner's own
 * device to pin down, and the answer was singular: `blur()`.
 *
 * A blur is charged in DEVICE pixels, so at 3x a modest-looking radius over a
 * modest-looking box is enormous, and the rasteriser cannot keep up with a
 * fling. Nothing makes it cheap - not a smaller box, not a compositor layer of
 * its own (see .fm-stage__bg in lotx-lot.css for both dead ends). The only fix
 * is not to do it.
 *
 * So below 1000px nothing blurs. `backdrop-filter` is the one dealt with here,
 * because it is the worst of its kind: it blurs whatever is BEHIND an element,
 * so anything fixed over moving content re-blurs on every frame of every
 * scroll, and the pinned bid bar is full width with the whole page sliding
 * under it. A slightly more opaque flat colour is indistinguishable at this
 * size. The stage's own wash is dealt with in lotx-lot.css.
 *
 * A desktop keeps all of it, and so do the shadows and rounded corners
 * everywhere - those were measured and are NOT what caused this.
 */
@media (max-width:1000px){
  .fm-bar,
  .fm-stage__z,
  .fm-arw i.fa,
  .lx-chip,
  .bd-shot__n{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* The bar loses its blur, so it stops being see-through instead. */
  .fm-bar{background:rgba(255,255,255,.98)}
  .fm-stage__z{background:rgba(12,13,16,.72)}
  .fm-arw i.fa{background:rgba(12,13,16,.68)}
}

/* =========================================== every width, 250px and up
 * Owner, 2026-10-01: "double check the design of lot list and lot detail in
 * all device sizes, I want to make sure that the pages works well in any
 * device screen no matter what the size is. But for really small screens like
 * 250px and below I understand if there's nothing we can do about it."
 *
 * A measured sweep of both pages at 29 widths from 250 to 2560 (every view,
 * signed out, signed in, pro mode, the drawer, the Grid layer, the bid dialog,
 * the filter sheet, the pager) found the page wider than the window in only
 * two places: the black bar's pager at 250, and a seller's embedded video at
 * every phone width. What it found everywhere else was text clipped inside a
 * box that had become too narrow for it: the four-across Grid between 1001
 * and about 1200px (cards of 146-187px beside the 288px rail), the two column
 * phone list under 330px, and the foot of the lot under 300px.
 *
 * Everything below is a no-op wherever the layout already fitted, so the
 * widths the owner has signed off look exactly as they did.
 */

/* THE LOT BAND WRAPS INSTEAD OF CLIPPING. The plate and the countdown share
   one line whenever they fit, as before; when they do not, the countdown drops
   under the plate instead of being cut off at the card's edge. It was cut by
   up to 44px in Grid at 1001-1180 ("2d 20:20" with the seconds gone), on a
   phone under 330px, and at any width for a four digit lot beside a day count.
   min-height keeps the band at --band-h on one line, so the 3px of padding
   only shows on two. margin-left:auto comes off because the band's own
   space-between does the same job on a shared line and, unlike the margin,
   lets a wrapped countdown start at the left, under the plate. The two
   selectors are long enough to beat the phone and Dense band rules, whose
   padding shorthand would otherwise put the vertical padding back to 0. */
.bd .bd-card .bd-lotline{flex-wrap:wrap;height:auto;min-height:var(--band-h);
  padding-top:3px;padding-bottom:3px;row-gap:1px}
.bd .bd-card .bd-lotline__t{margin-left:0}
/* 85px of line under a 250px phone's plate: "2d 20:14:36" is 73 of it, and
   the glyph and its gap would make 91. */
@media (max-width:279px){
  .bd .bd-card .bd-lotline__t .lx-chip .msy{display:none}
}

/* A CARD'S BUTTON IN A NARROW CARD steps its type down rather than cutting its
   label short. Grid between 1001 and about 1240px is the case: 114-155px of
   button, where "Bid $1,900.00" read "Bid $1,9...", "Adjust Max Bid" lost its
   last letters, "You are winning this lot" ran to three lines and out of its
   52px, and "Open the live app" to five. Measured in Inter 700:
     "You are winning"   113px at 14.5, 105 at 13.5
     "Adjust Max Bid"    106          99
     "Bid $10,500.00"    108         101
   so 14.5px with 10px sides holds them all down to a 139px button (1100), and
   13.5px with 6px sides down to 114 (1001). From 1280 up nothing changes, and
   the phone, Dense and the pro tiers above keep their own rules, which are
   more specific than these. */
@container lxbid (max-width:175px){
  .lx-bid__go{font-size:14.5px;padding-left:10px;padding-right:10px}
}
@container lxbid (max-width:135px){
  .lx-bid__go{font-size:13.5px;padding-left:6px;padding-right:6px;line-height:1.2}
  .lx-bid__x{font-size:11px}
}
/* The 1001-1020 sliver: a 112px button lost the last 3-5px of a five figure
   "Bid $88,888.00" at 13.5. */
@container lxbid (max-width:121px){
  .lx-bid__go{font-size:13px}
}

/* "Sign in to bid $1,900.00" breaks between the words and the amount, never
   inside either. It is two spans now (lx_bid_block()) on a wrapping row: one
   line when there is room, "Sign in to bid" over "$1,900.00" when there is
   not. It used to break wherever the text ran out, three lines deep in Grid
   at 1001-1100 and out through the bottom of its own button. */
.lx-bid__go--in{flex-wrap:wrap;align-content:center;column-gap:.28em;row-gap:0}
.lx-bid__go--in>span{white-space:nowrap}

/* The pro card's "Or your maximum $100.00 increments", and the leader's "Your
   maximum $1,800.00", put the figure on a second line when the two will not
   share one, instead of cutting it: in Grid at 1280 it read "Or your maximum
   $1..." and at 1440 "$100.00 in...", and at 1001-1024 the words alone were
   wider than the label, so the figure was squeezed out entirely and the words
   clipped. Where both fit, nothing moves; Grid at 1920 is still one line.
   The second selector is the joined pro frame's own (0,4,1) rule, whose 8px
   gap would otherwise open between the lines. In a narrow card its 12px sides
   leave 113px of a 139px box (1100) for the 113px of "Or your maximum", so
   they come in to 10; under 136px (1001-1050) even the words need two lines,
   and the increments go, as they already do in Dense, the narrower card - the
   bid dialog states them in full. The leader's own maximum always stays. */
.lx-bid__max>label{flex-wrap:wrap;row-gap:1px;white-space:normal}
/* Its own rule: a browser without :has() drops a whole selector list. */
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__max>label{row-gap:1px}
.lx-bid__max>label>span,.lx-bid__max>label>b{white-space:nowrap}
@container lxbid (max-width:175px){
  .bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__max>label{padding-left:10px;padding-right:10px}
}
@container lxbid (max-width:135px){
  .lx-bid__max>label{line-height:1.3}
  .lx-bid__max>label>span{display:none}
}

/* The black bar's pager on the narrowest phones: "of 65" goes, the arrows and
   the page field stay. At 250 the bar was 18px wider than the window and the
   whole page scrolled sideways; the pager under the lots still says how many
   pages there are. */
@media (max-width:279px){
  .bd-pgm__of,.bd-pgm__last{display:none}
}

/* Prev Lot / Next Lot under a lot keep their words on one line. A 280px phone
   gave each button 47px for "Prev Lot" and it printed "Prev" over "Lot". The
   spacing gives way first, then, under 280, the chevrons, which only repeat
   what the words say. */
@media (max-width:359px){
  .fm-pager__a{padding-left:6px;padding-right:6px;gap:4px}
  .fm-pager__a span{white-space:nowrap}
  /* Watch / Ask / My Notes: "My Notes" was 3px wider than its tile at 250. */
  .fm-acts button,.fm-acts .btn-watch{padding-left:3px;padding-right:3px}
  /* The dialog's Bid keeps its amount on one line down to 280: Cancel's 26px
     sides were leaving it 120px for "Bid $1,800.00". */
  .fm-modal__cancel{padding:0 14px}
  .fm-modal__go{padding-left:10px;padding-right:10px}
}
@media (max-width:279px){
  .fm-pager__a i{display:none}
  /* Four tiles of 53px at 250: "My Notes" takes two lines rather than 57px. */
  .fm-acts button,.fm-acts .btn-watch{white-space:normal;text-align:center}
}

/* A SELLER'S EMBED STAYS INSIDE THE CARD. LXItem strips the inline styles a
   pasted embed arrives with (the old page did the same), and that strips the
   responsive wrapper sellers paste around a player too, so the player fell
   back to its width attribute: a 1062px video on a real estate lot pushed a
   320px phone 795px sideways. LXItem gives each embed the shape its width and
   height attributes describe (an aspect-ratio, in lotx-item.js), so capping
   the width here brings the height down with it. A video maps its attributes
   to a ratio by itself, so it only needs height:auto. */
.fm-body iframe,.fm-body video,.fm-body embed,.fm-body object{max-width:100%}
.fm-body video{height:auto}

/* SELLER TABLES AND PICTURES FIT THE CARD. Measured by putting 555 real
   descriptions that carry markup, one at a time, into a lot page at 320px:
   24 of the first 200 made the page scroll sideways, by up to 100px, and every
   one of them was a table pasted from Word (class MsoNormalTable). The table
   itself was already held to 100% above; its CELLS were not, and they arrive
   with fixed widths that add up to 300-360px, so a two column spec table with
   a 17 character VIN in it would not go under that in a 214px box. Without
   the pasted widths the columns share the room by their content, which is how
   the design's own tables already behave. A table that is still too wide after
   that - genuinely many columns - scrolls inside its own box (.fm-tablewrap,
   added by LXItem) rather than taking the page with it.

   Pictures keep their shape: max-width narrows a picture that carries width
   and height attributes, and without height:auto the height stayed where the
   attribute put it, squashing it by up to 70% in the same sweep.

   A 17 character VIN that the seller has set at 21px is 210px of one word, so
   even a fluid table cannot put a label beside it in 214px. overflow-wrap:
   anywhere lets a string that long break, and only when nothing else will
   fit: ordinary words still wrap between words, and a table with room is laid
   out exactly as before, because only its narrowest possible width changes.
   It is what took the last 24 tables of that sweep off their scrollbars.
   Not in a table's first column, which is where a spec table keeps its
   labels: there a word keeps its own width, so "Transmission:" is never cut
   to "Transmissio" over "n:" and the long value beside it breaks instead.
   Only where there IS a column beside it - a one-cell table is a seller's
   layout box around the whole text, and its signature lines and domain names
   still have to be able to break. */
.fm-body{overflow-wrap:anywhere}
.fm-body table td:first-child:not(:last-child),
.fm-body table th:first-child:not(:last-child){overflow-wrap:break-word}
.fm-body table td,.fm-body table col{width:auto!important}
.fm-tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fm-body img[width],.fm-body img[style*="width"]{height:auto!important}

/* NO TEXT DRAWN OVER TEXT. Word writes `line-height:107%` onto a 15px
   paragraph, which the browser turns into a FIXED 16px and hands down as
   16px, so a 24px span inside it gets 16px lines. On a desktop the paragraph
   is one line and nothing shows; on a phone it wraps and every line is drawn
   8px into the one above it ("Documentary Service Fee:" through "$ 175" on a
   vehicle lot, at 375px). Anything a seller gave a line-height takes the
   design's own instead, which is a ratio and so follows each line's own
   type size. */
.fm-body [style*="line-height"]{line-height:inherit!important}

/* NOTHING A SELLER PASTES IS WIDER THAN THE CARD. The same replay over the
   auctions' own terms (the Location And Payment tab, 735 of them with markup)
   found four more ways out, all in older auctions: 850px pictures drawn as
   <input type="image">, a box fixed at width:21em, preformatted lines, and a
   street address a seller had set white-space:nowrap at a large size.
   :where() keeps the width cap at the specificity of .fm-body alone, so any
   rule above that sizes something on purpose still wins; inline elements
   ignore it. */
.fm-body :where(*){max-width:100%}
.fm-body input[type="image"]{height:auto}
.fm-body pre{white-space:pre-wrap}
.fm-body [style*="nowrap"]{white-space:normal!important}