/* =============================================================================
   market-auctions.css — styling for the two live bands market-auctions.js
   self-mounts at the TOP of #view-gifts (LIVE AUCTIONS + BUY IT NOW). NEW file:
   it adds nothing to market.css and edits nothing there.

   THEME-AWARE. It uses ONLY the custom properties market.css already defines on
   :root per theme (--void/--panel/--raised/--hover/--well, --hairline(-2),
   --ink-hi/mid/lo/faint, --p300/400/500/700, --on-accent, --sweep, --gain/loss,
   --tint/--tint-weak/--ring/--shadow-card, --font-num). No new colours, no
   external assets. Every class is ma- scoped so nothing collides with market.css.

   MOTION is decoration only: the auction window auto-advances via a JS timer
   (killed under reduced motion) and the slide transform eases here; §MOTION
   below strips every transition/animation under prefers-reduced-motion.
   ========================================================================== */

/* full-bleed band rhythm, matching #hotnow/#hotdeals in market.css */
.ma-wrap { width: 100%; }
.ma-sec { padding: 24px clamp(16px, 2vw, 40px) 8px; }

/* ---- shared band header — mirrors .sec-head / .sec-tag / .sec-sub ---------- */
.ma-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ma-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.ma-tag-auction { color: var(--sweep); }
.ma-tag-bin     { color: var(--p500); }
.ma-sub { color: var(--ink-lo); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* pulsing "live" dot — same treatment as market.css .tt-dot */
.ma-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sweep); box-shadow: 0 0 8px rgba(242,166,25,.8);
  animation: ma-pulse 2.4s ease-in-out infinite;
}
@keyframes ma-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* honest empty / loading state shared by both bands */
.ma-empty {
  color: var(--ink-lo); font-size: 13px;
  padding: 22px 16px; text-align: center;
  background: var(--panel);
  border: 1px dashed var(--hairline-2); border-radius: 12px;
}

/* ---------------------------------------------------------------------------
   SECTION 1 · LIVE AUCTIONS — the cycling window. A viewport clips a flex track
   of full-width slides; JS translates the track by whole slides. Arrows overlay
   the sides; a dots+counter foot sits below.
   ------------------------------------------------------------------------ */
.ma-stage { position: relative; }

.ma-viewport {
  overflow: hidden;
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 10px 28px -18px var(--shadow-card);
}
.ma-track {
  display: flex;
  transition: transform .45s cubic-bezier(.16,.8,.24,1);
  will-change: transform;
}
.ma-slide { flex: 0 0 100%; min-width: 100%; }

/* the prominent card: art beside the info on wide screens, stacked on narrow */
.ma-card {
  display: flex; align-items: stretch; gap: clamp(14px, 2vw, 26px);
  padding: clamp(14px, 1.6vw, 22px);
  background:
    radial-gradient(120% 90% at 12% -10%, var(--tint-weak) 0%, transparent 55%),
    var(--raised);
  color: var(--ink-mid); text-align: left;
  cursor: pointer;
  transition: border-color .16s ease;
}
.ma-card:focus-visible { outline: 2px solid var(--p500); outline-offset: -2px; border-radius: 16px; }

.ma-card-art {
  flex: 0 0 auto;
  width: clamp(120px, 20vw, 220px);
  aspect-ratio: 1;
  border-radius: 14px; overflow: hidden;
  background: var(--well);
  border: 1px solid var(--hairline);
}
.ma-card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.ma-card:hover .ma-card-art img { transform: scale(1.05); }

.ma-card-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
}

.ma-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* chips ride the same visual system as market.css .chip */
.ma-chip {
  display: inline-flex; align-items: center;
  border-radius: 5px; padding: 2px 7px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--hover); color: var(--ink-lo);
  border: 1px solid var(--hairline-2);
}
.ma-chip-auction { color: var(--sweep); border-color: rgba(242,166,25,.35); }
.ma-chip-rare    { color: var(--p700); border-color: var(--p500); }

.ma-card-name {
  color: var(--ink-hi); font-weight: 800;
  font-size: clamp(18px, 2.4vw, 26px); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-card-coll {
  color: var(--ink-lo); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-offer {
  margin-top: 2px;
  color: var(--ink-hi); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-num);
}
.ma-offer-none { color: var(--ink-faint); font-weight: 500; }

/* prev/next arrows overlaying the viewport edges */
.ma-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  color: var(--ink-hi); font-size: 22px; line-height: 1;
  box-shadow: 0 6px 18px -8px var(--shadow-card);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ma-arrow:hover { background: var(--hover); border-color: var(--p500); }
.ma-arrow:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.ma-prev { left: 10px; }
.ma-next { right: 10px; }

/* foot: dots + counter */
.ma-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 12px;
}
.ma-dots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ma-dot-btn {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: var(--hairline-2); border: 0; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.ma-dot-btn:hover { background: var(--ink-lo); }
.ma-dot-btn.is-on { background: var(--p400); transform: scale(1.35); }
.ma-dot-btn:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.ma-counter {
  color: var(--ink-lo); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; font-family: var(--font-num);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   SECTION 2 · BUY IT NOW — a horizontal scroll rack of fixed-price cards. The
   rack scrolls in its OWN overflow-x container so the page body never scrolls
   sideways; faded edges so cards slide in/out rather than hard-cutting.
   ------------------------------------------------------------------------ */
.ma-rack {
  display: flex; gap: clamp(10px, 1vw, 16px);
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
}
.ma-rack::-webkit-scrollbar { display: none; }
.ma-rack:focus-visible { outline: 2px solid var(--p500); outline-offset: 3px; border-radius: 12px; }
/* the empty state should not be masked/clipped like a card row */
.ma-rack > .ma-empty { flex: 1 1 auto; -webkit-mask-image: none; mask-image: none; }

.ma-rcard {
  flex: 0 0 auto; width: clamp(150px, 16vw, 200px);
  display: flex; flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: 16px; overflow: hidden;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ma-rcard:hover {
  border-color: var(--p500);
  transform: translateY(-4px);
  box-shadow: 0 18px 42px var(--shadow-card);
}
.ma-rcard:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }

.ma-rcard-art { position: relative; aspect-ratio: 1; background: var(--well); overflow: hidden; }
.ma-rcard-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ma-rcard:hover .ma-rcard-art img { transform: scale(1.05); }

.ma-rcard-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px 12px; }
.ma-rcard-name {
  color: var(--ink-hi); font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-priceline { display: flex; align-items: baseline; gap: 4px; }
.ma-price {
  color: var(--ink-hi); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums lining-nums; font-family: var(--font-num);
}
.ma-price-unknown { color: var(--ink-faint); font-weight: 400; font-size: 14px; }
.ma-cur { color: var(--ink-lo); font-size: 10px; letter-spacing: .04em; }
.ma-rchips { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------------------
   RESPONSIVE — on narrow screens the auction card stacks and the rack cards
   shrink. Mirrors market.css §8 rhythm.
   ------------------------------------------------------------------------ */
@media (max-width: 719px) {
  .ma-sec { padding: 18px 10px 6px; }
  .ma-card { flex-direction: column; align-items: stretch; }
  .ma-card-art { width: 100%; max-width: 260px; margin: 0 auto; }
  .ma-card-info { text-align: center; align-items: center; }
  .ma-arrow { width: 34px; height: 34px; font-size: 19px; }
  .ma-prev { left: 6px; } .ma-next { right: 6px; }
  .ma-rcard { width: clamp(140px, 44vw, 170px); }
}

/* ---------------------------------------------------------------------------
   §MOTION — reduced motion: the JS timer never starts (no auto-advance) and
   every transition/animation in this scope is killed. Nothing is lost — motion
   here is decoration, never data.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ma-wrap *, .ma-wrap { transition: none !important; animation: none !important; }
  .ma-rack { scroll-behavior: auto; }
}