/* Auction pages, bidder account, and auth — composes the brand tokens and
   jd-card/jd-btn/jd-input components; nothing here redefines brand basics. */

/* Auction pages ride the same responsive system as the homepage: the fluid
   clamp() type scale and the dynamic zoom sweep come free from base.html;
   what this block does is opt out of .jd-simple-page's narrow 760px reading
   column (right for legal text, wrong for lot grids) and give these pages
   the site's full container width, like the homepage sections. Prose still
   gets readable caps per-element (.auc-desc, .auc-lot-desc). */
.auc-page {
  max-width: var(--jd-max-width);
  padding-bottom: var(--jd-space-6, 3rem);
}

.auc-breadcrumb { margin-bottom: var(--jd-space-3, 1rem); font-size: var(--jd-size-small); }
.auc-breadcrumb a { color: var(--jd-gold); }

.auc-when { color: var(--jd-white-dim); margin-bottom: var(--jd-space-3, 1rem); max-width: 70ch; }
.auc-desc { max-width: 70ch; }

.auc-section-title { margin: var(--jd-space-5, 2rem) 0 var(--jd-space-3, 1rem); }
.auc-section-title--live { color: var(--jd-gold); }
.auc-section-title--alert { color: var(--jd-red); }

.auc-empty { text-align: center; padding: var(--jd-space-5, 2rem); }
.auc-empty .jd-btn { margin-top: var(--jd-space-3, 1rem); }
.auc-empty__icon { font-size: 2.6rem; line-height: 1; margin: 0 0 var(--jd-space-2, .5rem); }
.auc-empty__hint {
  color: var(--jd-white-dim); font-size: var(--jd-size-small);
  max-width: 46ch; margin: var(--jd-space-2, .5rem) auto 0;
}

/* ---- Auction index rows ---------------------------------------------- */
.auc-auction-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; /* phones: side info drops below the title, no squeeze */
  gap: var(--jd-space-3, 1rem) var(--jd-space-4, 1.5rem);
  padding: var(--jd-space-4, 1.5rem);
  margin-bottom: var(--jd-space-3, 1rem); text-decoration: none; color: inherit;
}
.auc-auction-row__main { min-width: min(100%, 34ch); flex: 1; }
@media (max-width: 639px) {
  .auc-auction-row__side { flex-direction: row; align-items: center; gap: var(--jd-space-3, 1rem); }
}
.auc-auction-row:hover h3 { color: var(--jd-gold); }
.auc-auction-row__when { color: var(--jd-white-dim); font-size: var(--jd-size-small); }
.auc-auction-row__desc { color: var(--jd-white-dim); font-size: var(--jd-size-small); margin-top: .25rem; }
.auc-auction-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.auc-auction-row__count { font-weight: 700; }

/* ---- Status badges ---------------------------------------------------- */
.auc-badge {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--jd-charcoal-raised); color: var(--jd-gold);
  border: 1px solid var(--jd-charcoal-line);
}
.auc-badge--ok { color: #7ddb8a; }
.auc-badge--due { color: var(--jd-red); }

/* ---- Lot grid + cards ------------------------------------------------- */
/* Phones show two lots per row (HiBid/eBay-style): a single 240px column meant
   one giant card per screen, so a 40-lot catalog scrolled forever and nothing
   below the first card was ever seen. Above 640px the grid goes back to
   auto-filling as many 240px columns as fit. */
.auc-grid {
  display: grid; gap: var(--jd-space-3, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--jd-space-5, 2rem);
}
@media (min-width: 640px) {
  .auc-grid {
    gap: var(--jd-space-4, 1.5rem);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
.auc-lot-card { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
/* No overflow clip here: the img can't escape (object-fit sizes it) and the
   share menu needs to drop past the photo's bottom edge. The card's own
   overflow:hidden still rounds the photo's top corners. */
.auc-lot-card__media {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: var(--jd-charcoal-raised);
}
.auc-lot-card__media-link { display: block; width: 100%; height: 100%; }
.auc-lot-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auc-lot-card__nophoto { display: grid; place-items: center; height: 100%; font-size: 3rem; opacity: .4; }
.auc-lot-card__number {
  position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem;
  background: rgba(0, 0, 0, .65); color: var(--jd-white); font-size: .75rem;
  font-weight: 700; border-radius: var(--jd-radius);
}
.auc-lot-card__media .auc-badge { position: absolute; top: .5rem; right: .5rem; }
.auc-lot-card__body { padding: var(--jd-space-3, 1rem); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.auc-lot-card__title { font-size: 1rem; margin: 0; }
/* Two lines of title max — keeps the price/bid rows level across a row of cards. */
.auc-lot-card__title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.auc-lot-card__title a { color: inherit; text-decoration: none; }
.auc-lot-card__title a:hover { color: var(--jd-gold); }
.auc-lot-card__price { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.auc-lot-card__retail { color: var(--jd-white-dim); font-size: var(--jd-size-small); }
.auc-lot-card__meta { margin: 0; color: var(--jd-white-dim); font-size: var(--jd-size-small); }
.auc-lot-card[data-auc-status="sold"] .auc-lot-card__media,
.auc-lot-card[data-auc-status="passed"] .auc-lot-card__media { opacity: .55; }

.auc-price { font-weight: 800; color: var(--jd-gold); font-variant-numeric: tabular-nums; }
.auc-price--big { font-size: 2rem; line-height: 1; }
.auc-price.auc-price--bumped { animation: auc-bump var(--jd-duration-standard, .3s) var(--jd-ease-standard, ease); }
@keyframes auc-bump { 40% { transform: scale(1.15); color: var(--jd-white); } }

.auc-countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.auc-countdown--closing { color: var(--jd-red); }

/* ---- Lot detail ------------------------------------------------------- */
.auc-lot-layout { display: grid; gap: var(--jd-space-5, 2rem); grid-template-columns: 1fr; margin-bottom: var(--jd-space-5, 2rem); }
@media (min-width: 900px) { .auc-lot-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); } }
.auc-lot-photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--jd-charcoal-raised); border-radius: var(--jd-radius); display: block;
}
.auc-lot-photo--empty { display: grid; place-items: center; font-size: 4rem; opacity: .4; }
.auc-lot-thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.auc-lot-thumb {
  width: 64px; height: 64px; padding: 0; border: 2px solid var(--jd-charcoal-line);
  border-radius: var(--jd-radius); overflow: hidden; cursor: pointer; background: none;
}
.auc-lot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auc-lot-thumb:hover, .auc-lot-thumb:focus-visible { border-color: var(--jd-gold); }
.auc-lot-meta { color: var(--jd-white-dim); }
.auc-lot-desc { margin-top: var(--jd-space-4, 1.5rem); }
.auc-lot-terms { margin-top: var(--jd-space-3, 1rem); color: var(--jd-white-dim); font-size: var(--jd-size-small); }

/* ---- Bid box ---------------------------------------------------------- */
.auc-bid-box { padding: var(--jd-space-4, 1.5rem); }
.auc-bid-box__price-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .25rem; }
.auc-bid-box__label { color: var(--jd-white-dim); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.auc-bid-box__meta { color: var(--jd-white-dim); font-size: var(--jd-size-small); margin: 0 0 var(--jd-space-3, 1rem); }
.auc-bid-box__lead-note { color: #7ddb8a; font-weight: 700; margin: 0 0 var(--jd-space-3, 1rem); }
.auc-bid-box__form { display: flex; flex-direction: column; gap: .5rem; }
.auc-bid-box__form label { font-weight: 700; }
/* Full-width input + button, like the homepage's stacked CTAs — comfortable
   thumb targets on phones, and it reads deliberate in the desktop column. */
.auc-bid-box__form .jd-input,
.auc-bid-box__form .jd-btn,
.auc-bid-box__cta { width: 100%; box-sizing: border-box; text-align: center; }
.auc-bid-box__help { color: var(--jd-white-dim); font-size: var(--jd-size-small); margin: .25rem 0 0; }
.auc-bid-box__closed { font-weight: 700; color: var(--jd-white-dim); margin: 0; }
.auc-bid-box__cta { display: inline-block; }

/* ---- Bid history / invoice tables ------------------------------------- */
/* Tables scroll inside their card on narrow phones — the page itself must
   never scroll horizontally (site-wide rule; see the Galaxy S10 fix). */
.auc-history { padding: var(--jd-space-4, 1.5rem); overflow-x: auto; }
/* rem, not px: core.tests pins every `min-width: *px` to the breakpoint set. */
.auc-history__table { width: 100%; min-width: 26rem; border-collapse: collapse; }
.auc-history__table th, .auc-history__table td {
  text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--jd-charcoal-line);
}
.auc-history__table th { color: var(--jd-white-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.auc-history__note { color: var(--jd-white-dim); font-size: var(--jd-size-small); margin: var(--jd-space-3, 1rem) 0 0; }

.auc-invoice { padding: var(--jd-space-4, 1.5rem); margin-bottom: var(--jd-space-4, 1.5rem); overflow-x: auto; }
.auc-invoice .auc-history__table { min-width: 0; } /* two columns — fits any phone */
.auc-invoice__amount { text-align: right; font-variant-numeric: tabular-nums; }
.auc-invoice__total td { font-weight: 800; color: var(--jd-gold); border-top: 2px solid var(--jd-charcoal-line); }
.auc-invoice-pickup { padding: var(--jd-space-4, 1.5rem); }

/* ---- Register nudge --------------------------------------------------- */
.auc-register-nudge {
  display: flex; justify-content: space-between; align-items: center; gap: var(--jd-space-4, 1.5rem);
  padding: var(--jd-space-4, 1.5rem); margin-bottom: var(--jd-space-4, 1.5rem); flex-wrap: wrap;
}

/* ---- Account pages (My Bids / My Invoices) ---------------------------- */
/* The page used to open with three loose links in a row — the two page links
   and Log out reading as equals. Now: who you are on the left, Log out as a
   quiet outline pill on the right, and the two pages below as a tab strip, so
   there is one obvious way to move between them. */
.auc-account-head {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--jd-space-3, 1rem); margin-bottom: var(--jd-space-3, 1rem);
}
.auc-account-head h1 { margin: 0; }
.auc-account-head__id {
  margin: .4rem 0 0; color: var(--jd-white-dim); font-size: var(--jd-size-small);
}
.auc-account-head__id b { color: var(--jd-gold); font-weight: 700; }
.auc-account-head form { margin-left: auto; }

.auc-logout {
  background: none; border: 1px solid var(--jd-charcoal-line); border-radius: 999px;
  color: var(--jd-white-dim); cursor: pointer; font: inherit;
  font-size: var(--jd-size-small); font-weight: 600; padding: .45rem 1.1rem;
  transition: color var(--jd-duration-fast) var(--jd-ease-standard),
              border-color var(--jd-duration-fast) var(--jd-ease-standard);
}
.auc-logout:hover { color: var(--jd-red); border-color: var(--jd-red); }

.auc-account-nav {
  display: flex; gap: var(--jd-space-2, .5rem);
  align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--jd-charcoal-line);
  margin-bottom: var(--jd-space-4, 1.5rem);
}
.auc-account-nav a {
  color: var(--jd-white-dim); text-decoration: none; font-weight: 700;
  padding: .55rem 1.1rem; margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  border-radius: var(--jd-radius) var(--jd-radius) 0 0;
  transition: color var(--jd-duration-fast) var(--jd-ease-standard),
              background var(--jd-duration-fast) var(--jd-ease-standard);
}
.auc-account-nav a:hover { color: var(--jd-white); background: rgba(247, 247, 245, .06); }
.auc-account-nav a.is-active { color: var(--jd-gold); border-bottom-color: var(--jd-gold); }

/* Each group of cards gets a shelf label: emoji, heading, a count chip, then a
   hairline out to the right edge. Scoped to .auc-account so the auctions list
   keeps its plain headings. The tighter top margin overrides .jd-simple-page's
   4rem h2 gap, which left the groups floating apart. */
.auc-account .auc-section-title {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: var(--jd-space-5, 2.5rem);
}
.auc-account .auc-section-title::after {
  content: ""; flex: 1; min-width: 2rem; height: 1px; background: var(--jd-charcoal-line);
}
.auc-count {
  font-family: var(--jd-font-body); font-size: .8rem; font-weight: 700;
  line-height: 1.7; padding: 0 .6rem; border-radius: 999px;
  background: rgba(247, 247, 245, .1); color: var(--jd-white-dim);
}
.auc-section-title--alert .auc-count { background: rgba(212, 23, 31, .22); color: var(--jd-white); }
.auc-section-title--win { color: var(--jd-gold); }
.auc-section-title--win .auc-count { background: rgba(245, 166, 35, .18); color: var(--jd-gold); }

.auc-account__lede {
  color: var(--jd-white-dim); font-size: var(--jd-size-small);
  margin: 0 0 var(--jd-space-4, 1.5rem);
}
.auc-account__lede b { color: var(--jd-white); }

.auc-section-more { margin: calc(-1 * var(--jd-space-3, 1rem)) 0 0; font-weight: 700; }
.auc-section-more a { color: var(--jd-gold); text-decoration: none; }
.auc-section-more a:hover { text-decoration: underline; }

/* ---- Auth pages ------------------------------------------------------- */
.auc-auth { display: grid; place-items: center; padding: var(--jd-space-6, 3rem) var(--jd-space-3, 1rem); }
.auc-auth__card { width: 100%; max-width: 420px; padding: var(--jd-space-5, 2rem); }
.auc-auth__lede { color: var(--jd-white-dim); margin-bottom: var(--jd-space-4, 1.5rem); }
.auc-auth__submit { width: 100%; margin-top: var(--jd-space-3, 1rem); }
.auc-auth__alt { margin-top: var(--jd-space-3, 1rem); font-size: var(--jd-size-small); text-align: center; }

.auc-field { margin-bottom: var(--jd-space-3, 1rem); }
.auc-field label { display: block; font-weight: 700; margin-bottom: .3rem; }
.auc-field input:not([type="checkbox"]) { width: 100%; }
.auc-field__check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.auc-field__check input { margin-top: .25rem; }
.auc-field__help { color: var(--jd-white-dim); font-size: var(--jd-size-small); margin: .3rem 0 0; }
.auc-field__error { color: var(--jd-red); font-size: var(--jd-size-small); margin: .3rem 0 0; }
.auc-field--error input { border-color: var(--jd-red); }

/* Pickup-only acknowledgement at signup: called out, not another grey line. */
.auc-pickup {
  background: var(--jd-charcoal-raised);
  border: 1px solid var(--jd-charcoal-line);
  border-left: 3px solid var(--jd-gold);
  border-radius: 8px;
  padding: var(--jd-space-3, 1rem);
}
.auc-pickup__map {
  margin-top: .75rem;
  border: 1px solid var(--jd-charcoal-line);
  border-radius: 6px;
  overflow: hidden;
}
.auc-pickup__map iframe { display: block; width: 100%; height: 200px; border: 0; }

/* ---- Live toasts ------------------------------------------------------ */
.auc-toast-stack {
  position: fixed; bottom: 1rem; right: 1rem; left: 1rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; z-index: 100;
}
.auc-toast {
  background: var(--jd-charcoal-raised); color: var(--jd-white);
  border: 1px solid var(--jd-gold); border-radius: var(--jd-radius);
  padding: .75rem 1rem; max-width: min(320px, 100%);
  box-shadow: var(--jd-pop-shadow, 0 4px 16px rgba(0,0,0,.4));
}
.auc-toast a { color: var(--jd-gold); }

.auc-history__own-max { color: var(--jd-white-dim); font-size: var(--jd-size-small); font-weight: 400; }

/* ---- Savings badge, condition chip, watch star, lot facts --------------- */

/* Owner's ask: savings vs retail in the TOP-RIGHT corner of each item.
   The status chip moves to the bottom-right of the photo to make room. */
.auc-lot-card__media .auc-badge { top: auto; bottom: .5rem; right: .5rem; }

.auc-save {
  position: absolute; top: .5rem; right: .5rem; padding: .15rem .55rem;
  background: var(--jd-gold); color: var(--jd-black); font-size: .8rem;
  font-weight: 800; border-radius: var(--jd-radius); letter-spacing: .02em;
}

.auc-save--inline {
  position: static; margin-left: .35rem; padding: .05rem .45rem;
  font-size: .85rem;
}

.auc-condition {
  display: inline-block; padding: 0 .45rem; border: 1px solid currentColor;
  border-radius: var(--jd-radius); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Every lot is pickup only, so every card says so — same tag shape as the
   condition chip, gold so it reads as information rather than a warning. */
.auc-noship {
  display: inline-block; padding: 0 .45rem; border: 1px solid currentColor;
  border-radius: var(--jd-radius); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--jd-gold);
}

/* The same message on the photo itself. Bottom-left is the one free corner —
   lot number takes top-left, the savings badge top-right, the status chip
   bottom-right. */
.auc-noship-icon {
  position: absolute; bottom: .5rem; left: .5rem; line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.auc-noship-icon svg { display: block; }

.auc-watch { display: inline-block; margin-left: .4rem; }
.auc-watch button, .auc-watch--login {
  background: none; border: 0; cursor: pointer; font-size: 1.35rem;
  line-height: 1; color: var(--jd-gold); text-decoration: none;
  padding: 0 .15rem; vertical-align: middle;
}
.auc-watch button:hover, .auc-watch--login:hover { transform: scale(1.15); }

.auc-lot-facts {
  list-style: none; margin: var(--jd-space-3) 0; padding: var(--jd-space-3);
  display: grid; gap: .45rem; font-size: var(--jd-size-small);
}
.auc-lot-facts li strong {
  display: inline-block; min-width: 8.5rem; color: var(--jd-gold);
  text-transform: uppercase; font-size: .75rem; letter-spacing: .05em;
}

.auc-watch__label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; vertical-align: middle;
}

/* Quick-bid button on lot cards (auction grid + My Bids + watchlist). */
.auc-lot-card__bid { margin-top: auto; padding-top: .6rem; }
.auc-lot-card__bid-btn {
  display: block; width: 100%; text-align: center;
  padding: .5rem .75rem; font-size: .95rem;
}

/* Two-up on a phone leaves each card ~160px wide — trim the paddings and type
   so the title, price and bid amount still fit without wrapping to shreds. */
@media (max-width: 639px) {
  .auc-lot-card__body { padding: .6rem; gap: .3rem; }
  .auc-lot-card__title { font-size: .9rem; }
  .auc-lot-card__meta { font-size: .75rem; }
  .auc-lot-card__number { font-size: .68rem; }
  .auc-lot-card__media .auc-badge { font-size: .7rem; padding: .1rem .45rem; }
  .auc-lot-card .auc-save { font-size: .7rem; padding: .1rem .4rem; }
  .auc-lot-card__bid-btn { padding: .5rem .3rem; font-size: .8rem; }
  .auc-lot-card .auc-watch { margin-left: .2rem; }
  .auc-lot-card .auc-watch button { font-size: 1.2rem; }
  /* Star only on the cards at this width — the label wraps the price row. */
  .auc-lot-card .auc-watch__label { display: none; }

  /* Shelf labels shrink so "You're the high bidder" stays on one line next to
     its count chip instead of pushing the chip onto a row of its own. */
  .auc-account .auc-section-title { font-size: 1.4rem; }
  .auc-account .auc-section-title [aria-hidden="true"] { font-size: .85em; }
}

/* Bid confirmation modal (grid-card bids). */
.auc-modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.auc-modal {
  max-width: 22rem; width: 100%; padding: var(--jd-space-4);
  text-align: center;
}
.auc-modal__photo {
  width: 100%; max-height: 12rem; object-fit: cover;
  border-radius: var(--jd-radius); margin-bottom: .75rem;
}
.auc-modal__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.auc-modal__amount { margin: 0 0 .35rem; font-size: 1.2rem; }
.auc-modal__note { margin: 0 0 1rem; font-size: .85rem; color: var(--jd-white-dim); }
.auc-modal__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Big friendly pill back to the catalog on lot pages — thumb-sized on
   phones, where the browser back gesture is easy to miss mid-auction. */
.auc-back-btn {
  display: inline-block; margin: 0 0 var(--jd-space-3);
  padding: .55rem 1.3rem; font-weight: 700;
  border-radius: 2rem;
  border: 2px solid var(--jd-gold);
  color: var(--jd-gold);
  background: transparent;
}
.auc-back-btn:hover {
  background: var(--jd-gold);
  color: var(--jd-black);
}
@media (min-width: 640px) {
  .auc-back-btn { padding: .45rem 1.2rem; }
}

/* Catalog toolbar (search / sort / page size) + pager + lot prev-next. */
.auc-toolbar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  padding: var(--jd-space-3); margin-bottom: var(--jd-space-3);
}
.auc-toolbar__search { flex: 1 1 14rem; min-width: 0; }
.auc-toolbar__field {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.auc-toolbar__count { margin: 0 0 var(--jd-space-3); color: var(--jd-white-dim); }
.auc-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: var(--jd-space-4); flex-wrap: wrap;
}
.auc-pager__where { color: var(--jd-white-dim); }
.auc-lot-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.auc-lot-nav__pager { display: flex; gap: .6rem; }

/* Soft-close "Extended" flash on countdowns. */
.auc-countdown--extended { color: var(--jd-gold); font-weight: 800; }
.auc-extended-chip {
  display: inline-block; margin-left: .35rem; padding: 0 .45rem;
  background: var(--jd-gold); color: var(--jd-black); font-size: .72rem;
  font-weight: 800; border-radius: var(--jd-radius); text-transform: uppercase;
}

/* ---- Catalog layout switch: grid / list / single ----------------------- */

.auc-viewswitch { display: flex; }
.auc-viewswitch__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .65rem; border: 1px solid var(--jd-charcoal-line);
  background: var(--jd-charcoal-raised); color: var(--jd-white-dim);
  text-decoration: none; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.auc-viewswitch__btn + .auc-viewswitch__btn { border-left: 0; }
.auc-viewswitch__btn:first-child { border-radius: var(--jd-radius) 0 0 var(--jd-radius); }
.auc-viewswitch__btn:last-child { border-radius: 0 var(--jd-radius) var(--jd-radius) 0; }
.auc-viewswitch__btn:hover { color: var(--jd-white); }
.auc-viewswitch__btn[aria-current] {
  background: var(--jd-gold); border-color: var(--jd-gold); color: var(--jd-black);
}
.auc-viewswitch__btn svg { display: block; flex: none; }
/* Icons alone on phones, where the toolbar is already tight. */
.auc-viewswitch__label { display: none; }

/* List: one lot per row, photo beside the details. The media is a flex item
   here, so it stretches to the card's height and the 4/3 ratio becomes a
   floor rather than a fixed box. */
.auc-grid--list { grid-template-columns: minmax(0, 1fr); }
.auc-grid--list .auc-lot-card { flex-direction: row; }
.auc-grid--list .auc-lot-card__media { flex: 0 0 38%; max-width: 240px; }
.auc-grid--list .auc-lot-card__body { flex: 1; min-width: 0; }
/* A row is wide, and a bid button stretched across all of it reads as a
   banner rather than a button. */
.auc-grid--list .auc-lot-card__bid,
.auc-grid--list .auc-lot-card__bid-btn { max-width: 18rem; }

/* Single: one lot at a time, big photo, capped so it doesn't sprawl across a
   desktop monitor. */
.auc-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 620px; margin-left: auto; margin-right: auto;
}

@media (min-width: 640px) {
  .auc-viewswitch__label { display: inline; }
}

/* ---- Share a lot ------------------------------------------------------- */

/* The Save badge and the Share button share the photo's top-right corner, in
   one stack so neither has to know whether the other is there. */
.auc-lot-card__overlay {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
}
.auc-lot-card__overlay .auc-save { position: static; }

.auc-share { position: relative; }
.auc-share__btn {
  display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
  padding: .2rem .45rem; border-radius: var(--jd-radius);
  background: rgba(0, 0, 0, .65); color: var(--jd-white);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; list-style: none;
}
/* Safari still draws the disclosure triangle without this. */
.auc-share__btn::-webkit-details-marker { display: none; }
.auc-share__btn:hover { color: var(--jd-gold); }
/* Drops DOWN over the photo rather than out of the card: the card clips to
   its rounded corners, so a menu escaping upward or sideways would be cut in
   half. Four short rows fit inside the photo at every card size. */
.auc-share__menu {
  position: absolute; top: calc(100% + .3rem); right: 0; z-index: 3;
  display: flex; flex-direction: column; gap: .2rem; min-width: 8.5rem;
  padding: .3rem; border: 1px solid var(--jd-charcoal-line);
  border-radius: var(--jd-radius); background: var(--jd-charcoal);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.auc-share__item {
  padding: .3rem .5rem; border: 0; border-radius: var(--jd-radius);
  background: none; color: var(--jd-white); font-size: .75rem; font-weight: 700;
  text-align: left; text-decoration: none; cursor: pointer; font-family: inherit;
}
.auc-share__item:hover { background: var(--jd-charcoal-raised); color: var(--jd-gold); }

@media (max-width: 639px) {
  .auc-share__label { display: none; }
}