/* 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; }
.auc-lot-card__media {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: var(--jd-charcoal-raised); overflow: hidden;
}
.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); }

/* ---- 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;
}

.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;
}