/* Stocks for holders, on the Rewards tab (stockpay.js): a card with the basket as a box set of five tapes. Built from
   the shop's own pieces (card, facts, help); only what they lack is here. */

.sp-card { margin-top: 24px; }
.sp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-head h2 { margin-bottom: 4px; }
.sp-sticker {
  display: inline-block; font-family: var(--hand); font-size: 20px; line-height: 1.1; color: var(--ink);
  background: var(--sticker); border-radius: 999px; padding: 6px 14px; transform: rotate(-3deg);
  box-shadow: 0 2px 0 rgba(22, 22, 43, .25);
}

/* The box set: five tapes side by side, a strap across them. */
.sp-box {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  margin: 18px 0 20px; padding: 12px; background: var(--tape); border-radius: 8px;
}
.sp-box::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px;
  background: var(--neon); opacity: .85; pointer-events: none;
}
.sp-tape {
  position: relative; z-index: 1; display: grid; gap: 6px; align-content: space-between; min-height: 132px;
  background: var(--tape-edge); border-radius: 4px; padding: 8px;
}
.sp-label {
  display: grid; gap: 1px; background: var(--label); color: var(--ink); border-radius: 3px; padding: 6px 8px;
  border-left: 8px solid var(--neon); min-width: 0;
}
.sp-tape:nth-child(3n+2) .sp-label { border-left-color: var(--mint); }
.sp-tape:nth-child(3n) .sp-label { border-left-color: var(--sticker); }
.sp-label b { font-size: 18px; font-stretch: 112%; letter-spacing: .02em; }
.sp-label small { font-size: 12px; color: #5d5a73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-out {
  position: relative; z-index: 2; font-family: var(--hand); font-size: 16px; line-height: 1.15; color: var(--label);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .sp-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-box::after { display: none; }
  .sp-tape { min-height: 0; }
  .sp-tape:last-child { grid-column: 1 / -1; }
}