/* ════════════════════════════════════════════════════════════════════
   css/agora-store.css — Agora Surfers: η σελίδα του καταστήματος
   (js/agora-store.js · #/agora-store). Μόνο σημασιολογικά tokens
   (--card, --fg, --terra …), άρα ακολουθεί κάθε θέμα της πλατφόρμας.
   ════════════════════════════════════════════════════════════════════ */
.ast { display:flex; flex-direction:column; gap:14px; }
.ast-play { padding:10px 18px; border:0; border-radius:999px; cursor:pointer;
  background:var(--terra); color:#fff; font:700 14px/1 var(--sans); letter-spacing:.3px; }
.ast-play:hover { background:var(--terra-dk); }
.ast-play:focus-visible, .ast-cta:focus-visible, .ast-buy:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

.ast-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--sink);
  font:500 14px/1.45 var(--sans); color:var(--fg); }
.ast-banner.is-sub { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, var(--card)); }
.ast-banner.is-ok { color:var(--muted); font-size:13px; }
.ast-cta { flex:none; padding:9px 16px; border:0; border-radius:999px; cursor:pointer;
  background:var(--terra); color:#fff; font:700 13px/1 var(--sans); }
.ast-cta:hover { background:var(--terra-dk); }
.ast-ret, .ast-err { margin:0; padding:10px 14px; border-radius:0 10px 10px 0; font:500 14px/1.45 var(--sans);
  border-left:3px solid var(--gold); background:var(--sink); color:var(--fg); }
.ast-ret.is-done { border-left-color:var(--sage); }
.ast-err { border-left-color:var(--terra); }

.ast-h { margin:10px 0 0; font:700 12px/1 var(--sans); letter-spacing:2px; color:var(--muted); }
.ast-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px; }
.ast-grid--packs { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }

.ast-card { position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--card); }
.ast-card.is-own { border-color:color-mix(in srgb, var(--sage) 55%, var(--line)); }
.ast-pv { position:relative; aspect-ratio:1 / 1; background:linear-gradient(160deg, var(--sink), color-mix(in srgb, var(--gold) 14%, var(--sink))); }
.ast-pv > img { width:100%; height:100%; object-fit:cover; display:block; }
.ast-mos { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:var(--line); }
.ast-mos img { width:100%; height:100%; min-height:0; object-fit:cover; display:block; }
.ast-mos.n1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.ast-mos.n2 { grid-template-rows:1fr; }
.ast-mos.n3 img:first-child { grid-row:span 2; }
.ast-more { display:grid; place-items:center; background:var(--sink); color:var(--muted); font:800 16px/1 var(--sans); }
.ast-own, .ast-save { position:absolute; top:8px; z-index:1; border-radius:999px; font:800 11px/1 var(--sans); color:#fff; }
.ast-own { right:8px; width:24px; height:24px; display:grid; place-items:center; background:var(--sage); }
.ast-save { left:8px; padding:5px 8px; background:var(--terra); }

.ast-cap { display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; flex:1; }
.ast-kind { font:600 10.5px/1.2 var(--sans); letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
.ast-nm { font:800 14px/1.2 var(--sans); letter-spacing:.4px; color:var(--fg); }
.ast-en { font:500 12px/1.35 var(--sans); color:var(--muted); }
.ast-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.ast-chip { padding:3px 7px; border-radius:999px; background:var(--sink); color:var(--fg); font:700 10px/1.2 var(--sans); letter-spacing:.4px; }
.ast-chip.is-new { background:var(--terra); color:#fff; }
.ast-chip.is-season { background:color-mix(in srgb, var(--gold) 22%, var(--card)); }
.ast-inpack { font:500 11px/1.3 var(--sans); color:var(--muted); }
.ast-have { margin-top:auto; padding-top:6px; font:800 12px/1 var(--sans); letter-spacing:1px; color:var(--sage); }
.ast-buy { margin-top:auto; align-self:flex-start; display:inline-flex; gap:6px; align-items:baseline;
  padding:8px 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--terra); color:#fff; font:800 13px/1 var(--sans); }
.ast-buy:hover { background:var(--terra-dk); }
.ast-buy s { opacity:.7; font-weight:600; }
.ast-buy.is-locked { background:var(--sink); color:var(--fg); border:1px solid var(--line); }
.ast-buy.is-locked:hover { background:var(--card); }
.ast-buy:disabled { opacity:.6; cursor:progress; }
.ast-fine, .ast-empty { margin:6px 0 0; font:500 12.5px/1.5 var(--sans); color:var(--muted); }

@media (max-width: 520px) {
  .ast-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .ast-grid--packs { grid-template-columns:1fr; }
  .ast-grid--packs .ast-card { flex-direction:row; }
  .ast-grid--packs .ast-pv { width:42%; flex:none; aspect-ratio:auto; min-height:150px; }
  .ast-cap { padding:9px 10px 11px; }
}