/* ═══ THE TIER CAROUSEL — shop.html ONLY ═══════════════════════════════════════════════

   app/shop/css/tier.css's `.tier-grid` is a VERTICAL stack, and it is SHARED with
   system/system.html's embedded Shop tab (system.html links this exact file — see the comment
   at its own link tag). Restyling `.tier-grid` itself would have carouselled the cockpit's Shop
   tab too, which nobody asked for and which behaves differently inside a tab than on a
   dedicated scrolling page.

   So every rule here is scoped under `#tier-carousel-wrap`, an id ONLY shop.html's markup
   carries (system.html's tier-grid has no such ancestor). Same mechanism as
   app/index/css/carousel.css's `.carousel-track` / `.carousel-card`, restated against
   `.tier-grid` / `.tier`'s own class names rather than duplicating those classes onto elements
   `render.js` builds — render.js is ALSO shared with system.html, and it stays exactly as it
   was; this file is the only thing that knows the tiers are inside a carousel. */

#tier-carousel-wrap.carousel-container .tier-grid {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0;
  margin: 0;
  cursor: grab;
  /* the same restyled-scrollbar affordance app/index/css/carousel.css uses in place of a peek. */
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.55) transparent;
}
#tier-carousel-wrap.carousel-container .tier-grid::-webkit-scrollbar { height: 3px; }
#tier-carousel-wrap.carousel-container .tier-grid::-webkit-scrollbar-track {
  background: rgba(192, 192, 192, 0.08);
  border-radius: 2px;
}
#tier-carousel-wrap.carousel-container .tier-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent-red), var(--accent-gold));
  border-radius: 2px;
}
#tier-carousel-wrap.carousel-container .tier-grid:active { cursor: grabbing; }

/* the tier card becomes the column width — same arithmetic app/index/css/carousel.css's own
   comment measured out: 100% of the TRACK's content box, not a vw guess that only matches one
   screen width. */
#tier-carousel-wrap.carousel-container .tier-grid .tier {
  flex: 0 0 auto;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: center;
  box-sizing: border-box;
}
/* the "reading the live price list…" / error states render as plain text nodes inside
   `.tier-grid`, not `.tier` cards — they still need the same full-width column while the
   real cards have not landed yet, or the pending line sits squeezed in a sliver. */
#tier-carousel-wrap.carousel-container .tier-grid > *:not(.tier) {
  flex: 0 0 auto;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}