/*
 * A promo set's shop page (the SV Black Star Promos): products grouped by
 * kind, event promos sold on their own, and the promos that live in other
 * sets' boxes. The product rows themselves are styled in css/pages/packs.css;
 * this sheet adds the kind headings and the cross-set card strips. Promo
 * faces mount only near the screen (windowFaces() in js/app.js), so each
 * holder keeps the card's shape while it is empty.
 */
.promo-kind-head {
  grid-column: 1 / -1;
  margin: 30px 0 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  font-variation-settings: normal;
}
.promo-kind-head:first-child { margin-top: 0; }

.promo-elsewhere { margin-top: 52px; }
.elsewhere-set { padding: 16px 0 6px; border-top: 1px solid var(--line); }
.elsewhere-set header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.elsewhere-set header b { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.elsewhere-set header span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.elsewhere-set header .ghost { margin-left: auto; min-height: 34px; padding: 6px 12px; font-size: 13px; }
.elsewhere-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.elsewhere-card {
  display: block; aspect-ratio: 63 / 88; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.elsewhere-card:empty { border-radius: 3.97% / 2.84%; background: rgb(255 255 255 / 0.03); }
.elsewhere-card.missing { opacity: 0.38; filter: grayscale(0.7); }
.elsewhere-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }

@media (max-width: 860px) {
  .elsewhere-cards { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  .elsewhere-set header { flex-wrap: wrap; }
}
/* On a phone each set is one row that scrolls sideways, edge to edge. The
   max-width caps the row's min-content width, or the shop's grid column
   would grow to fit every card and push the page sideways. */
@media (max-width: 600px) {
  .elsewhere-cards {
    max-width: 100vw; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84px; gap: 8px;
    margin: 0 -16px; padding: 2px 16px 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .elsewhere-cards::-webkit-scrollbar { display: none; }
  .elsewhere-card { scroll-snap-align: start; }
}