/* ============================================================================
   upsell.css — styling for the post-buy "You might also want…" overlay.
   ----------------------------------------------------------------------------
   Every rule is scoped `up-`. Colour, ink and hairlines come entirely from
   market.css :root theme vars (dark / light / hashtag skins) so this surface
   re-tints for free. Sits above the item modal (iv-backdrop = 8000).
   Animations are motion-reduce aware.
   ============================================================================ */

.up-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px;
  background: rgba(4, 6, 10, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: up-fade .16s ease;
}
@keyframes up-fade { from { opacity: 0 } to { opacity: 1 } }

.up-card {
  position: relative;
  width: min(720px, 96vw);
  max-height: 82vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 30px 90px var(--shadow-card, rgba(0, 0, 0, .5));
  animation: up-rise .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes up-rise {
  from { transform: translateY(18px) scale(.99); opacity: 0 }
  to   { transform: none; opacity: 1 }
}

/* centre the card on wider screens, keep it bottom-sheet-ish on phones */
@media (min-width: 620px) {
  .up-backdrop { align-items: center; }
}

.up-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--raised); color: var(--ink-mid);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.up-x:hover { background: var(--hover); color: var(--ink-hi); }
.up-x:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.up-head {
  padding: 20px 22px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.up-title {
  color: var(--ink-hi);
  font-size: 18px; font-weight: 800; line-height: 1.2;
  padding-right: 40px;   /* clear the × */
}
.up-sub {
  color: var(--ink-lo);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* horizontal rail — one row that scrolls on narrow screens, wraps to a tidy
   grid when there's room. */
.up-rail {
  display: flex; gap: 12px;
  padding: 4px 22px 18px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.up-rail::-webkit-scrollbar { height: 8px; }
.up-rail::-webkit-scrollbar-thumb {
  background: var(--hairline-2); border-radius: 8px;
}

.up-item {
  flex: 0 0 auto;
  width: 148px;
  display: flex; flex-direction: column;
  text-align: left;
  padding: 0;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.up-item:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-2);
  box-shadow: 0 12px 28px var(--shadow-card, rgba(0, 0, 0, .4));
}
.up-item:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
  border-color: var(--p400, var(--p300));
}

.up-art {
  position: relative;
  width: 100%; height: 148px;
  display: flex; align-items: center; justify-content: center;
  background: var(--well);
  border-bottom: 1px solid var(--hairline);
}
.up-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;
}
/* CSS placeholder when the remote image 404s / is absent */
.up-noimg::before {
  content: "◇";
  color: var(--ink-faint);
  font-size: 40px; line-height: 1;
}

.up-chip {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center;
  border-radius: 5px; padding: 1px 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p700); background: var(--panel);
  border: 1px solid var(--p500);
}

.up-meta {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.up-name {
  color: var(--ink-hi);
  font-size: 13px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-priceline { display: flex; align-items: baseline; gap: 5px; }
.up-price {
  color: var(--ink-hi);
  font-size: 15px; font-weight: 800;
}
.up-price.is-unknown { color: var(--ink-lo); font-size: 13px; font-weight: 700; }
.up-cur {
  color: var(--ink-lo);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.num { font-variant-numeric: tabular-nums lining-nums; }

.up-foot {
  padding: 12px 22px 18px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: center;
}
.up-later {
  background: transparent; border: 0;
  color: var(--ink-lo);
  font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.up-later:hover { color: var(--ink-hi); background: var(--hover); }
.up-later:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* respect the user's motion preference — no rise, no fade, no hover lift */
@media (prefers-reduced-motion: reduce) {
  .up-backdrop, .up-card { animation: none; }
  .up-item, .up-x, .up-later { transition: none; }
  .up-item:hover { transform: none; }
}