/* F137: Cash Shop op telefoon liggend: <= 88 % van de breedte, kop één rij, tabs tweede rij, knoppen binnen de kaart (spec 4.4).
   Vervangt het oude @media (max-height:420px)-blok in index.html. */
@media (max-height:520px) {
  .cashPanel { container-type: inline-size; width: min(88vw, 760px); height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); }
  .cashPanel .cwPanelHead { min-height: var(--cw-tap); flex-wrap: nowrap; }
  .cashHead, .cashSub { display: none; }
  .cashPanel .cwTabs { min-height: var(--cw-tap); }
  .cashBody { overflow-y: auto; min-height: 0; gap: 3px; }
  .cashGearGrid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(96px, 1fr); grid-template-rows: auto; flex: 0 0 auto; overflow-x: auto; overflow-y: hidden; }
  /* De rij krijgt zijn eigen hoogte; de body scrolt naar de pass-gear eronder, zodat naam en prijs nooit worden dichtgedrukt. */
  .cashGearCard { max-height: 100%; padding: 4px 6px; gap: 2px; }
  .cashGearArt { width: 40px; height: 40px; }
  .cashGearInfoArt { width: 36px; height: 36px; }
  .cashGearCard b, .cashGearCard .cwRowSub { font-size: var(--cw-fs-label); line-height: 1.2; overflow-wrap: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .cashPassCardFoot { padding: 2px 4px 4px; gap: 1px; }
  .cashPassCardFoot .hubStatValue, .cashPassPrice { font-size: var(--cw-fs-body); }
  .cashGemIcon img { width: 20px; height: 20px; }
  .cashGemCard { padding-bottom: calc(var(--cw-tap) + 6px); }
  .cashGemCard .cwBtn { position: static; min-height: var(--cw-tap); }
  /* Pass-indeling: onder 520 px hoogte bepaalt alleen de paneelbreedte (container) of het een rij wordt. De basis is gestapeld
     en zet terug wat de viewport-regel in index.html (min-width:640px, landscape) zou zetten; dit bestand laadt na de inline stijl. */
  .cashPassLayout { flex-direction: column; align-items: normal; gap: 6px; }
  .cashPassHero { flex: 0 0 auto; min-width: auto; height: auto; grid-template-columns: repeat(3, minmax(0, 120px)); justify-content: center; align-items: normal; }
  .cashPassCard { height: auto; align-self: auto; width: auto; justify-content: normal; }
  /* Art begrensd op één tikdoel (44 px, de oude vaste hoogte) zodat het detailpaneel ruimte voor PERKS houdt. */
  .cashPassCard img { width: auto; height: var(--cw-tap); max-height: none; object-fit: contain; }
  .cashPassDetail { flex: 1; min-width: auto; height: auto; }
  .cashPassCols { gap: 8px; }
  .cashPassFoot { flex-direction: row; align-items: center; gap: 8px; }
  @container (min-width: 640px) {
    .cashPassLayout { flex-direction: row; align-items: stretch; gap: 8px; }
    .cashPassHero { flex: 0 0 55%; min-width: 0; height: 100%; grid-template-columns: repeat(3, 1fr); justify-content: stretch; align-items: center; }
    .cashPassCard { align-self: center; width: 100%; justify-content: center; }
    .cashPassCard img { width: 100%; height: auto; }
    .cashPassDetail { flex: 0 0 45%; min-width: 0; height: 100%; }
    .cashPassCols { gap: 6px; }
    .cashPassFoot { flex-direction: column; align-items: stretch; gap: 4px; }
  }
}