/* Everheim Online Idle - Crown Shop costumes (cosmetic offers, set banner, try-on cards). Uses the tokens from style.css
   (light + dark), the Crown colours from liveops.css and the costume rarity colours from costume.css. Previews are static
   <img>s (no clipping). Prices are violet Crown numbers, never gold text. */
:root {
  --shop-tag-bg: var(--primary);
  --shop-tag-text: var(--white);
}
:root[data-theme="dark"] {
  --shop-tag-bg: var(--sky-5);
  --shop-tag-text: var(--white);
}

/* ------------------------------------------------------------------ head note */
.shop-hint { margin: 0 0 var(--s-3); }

/* ------------------------------------------------------------------ badges and prices */
.shop-price { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--money-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-price.is-premium { color: var(--crown-text); }
.shop-price .crown-ico { width: 15px; height: 15px; }
.shop-tag {
  position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-micro);
  font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: var(--shop-tag-bg); color: var(--shop-tag-text);
}

/* ------------------------------------------------------------------ featured set */
.shop-set {
  display: flex; gap: var(--s-3); align-items: flex-start; border-color: var(--r-costume-line);
  background: linear-gradient(160deg, var(--r-costume-tint), var(--surface-2) 55%);
}
.shop-set-art { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.shop-set-art figcaption { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }
.shop-set-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shop-set-body .h3 { margin: 0; color: var(--text-title); }
.shop-set-body .eyebrow { margin: 0; }
.shop-desc { margin: 0; color: var(--text-soft); }
.shop-note { margin: 0; }
.shop-set-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.shop-set-pieces li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text); }
.shop-set-pieces .costume-ico { width: 30px; height: 30px; }
.shop-set-acts { align-items: center; margin-top: 2px; }

/* ------------------------------------------------------------------ item cards */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.shop-card {
  display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--surface-2); box-shadow: inset 0 1px 0 var(--frame-hi), var(--shadow-1);
}
.shop-card:hover { border-color: var(--r-costume-line); }
.shop-card.is-owned { background: linear-gradient(180deg, var(--r-costume-tint), var(--surface-2) 45%); }
.shop-card-art { position: relative; display: flex; justify-content: center; padding: 10px 8px 4px; }
.shop-card-art .costume-preview { width: 104px; height: 122px; }
.shop-card-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; flex: 1; }
.shop-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shop-card-title b { display: block; line-height: 1.25; }
.shop-card-title .costume-ico { width: 36px; height: 36px; }
.shop-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.shop-foot { margin: 2px 2px var(--s-3); }

@media (max-width: 520px) {
  .shop-set { flex-direction: column; align-items: center; }
  .shop-set-body { width: 100%; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}