/* ============================================================
   cards.css — Product grid, product cards, rarity chips,
   "Coming Soon" card.
   ============================================================ */

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.p-card{border-radius:20px;overflow:hidden;position:relative;transition:transform .3s var(--ease), box-shadow .3s var(--ease);box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px rgba(0,0,0,.28);}
.p-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 26px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(176,92,255,.18);}
.p-card-inner{padding:18px;}
.p-media{position:relative;border-radius:14px;height:190px;overflow:hidden;margin-bottom:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#191227,#0d0d18);border:1px solid rgba(255,255,255,.06);}
.p-media .glow-shape{width:120px;height:120px;border-radius:50%;filter:blur(2px);background:radial-gradient(circle,var(--shape-a,#7B2EFF),transparent 70%);position:absolute;animation:pulse 4s ease-in-out infinite;}
.p-icon{font-size:54px;position:relative;z-index:2;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));}
.p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .6s var(--ease);}
.p-card:hover .p-img{transform:scale(1.07);}
.discount-badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:8px;z-index:3;}
.rarity-badge-top{position:absolute;top:14px;left:16px;z-index:3;}
.coming-soon-card{grid-column:1/-1;border-radius:22px;padding:80px 30px;text-align:center;position:relative;overflow:hidden;}
.coming-soon-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 400px 250px at 50% 0%, rgba(123,46,255,.18), transparent 70%);}
.coming-soon-icon{font-size:42px;margin-bottom:16px;filter:drop-shadow(0 0 20px rgba(123,46,255,.6));animation:pulse 3s ease-in-out infinite;}
.coming-soon-card h3{font-size:21px;margin-bottom:8px;position:relative;z-index:1;}
.coming-soon-card p{color:var(--text-2);font-size:14px;position:relative;z-index:1;max-width:360px;margin:0 auto;}
.coming-soon-badge{display:inline-block;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:20px;background:rgba(63,140,255,.14);color:var(--secondary);border:1px solid rgba(63,140,255,.3);position:relative;z-index:1;}
.fav-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;background:rgba(7,7,13,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:15px;z-index:3;transition:.25s;border:1px solid rgba(255,255,255,.1);}
.fav-btn.active,.fav-btn:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.08);}
.quick-view{position:absolute;left:0;right:0;bottom:-46px;text-align:center;padding:10px;font-size:12px;font-weight:600;background:rgba(17,17,27,.85);backdrop-filter:blur(8px);transition:bottom .3s var(--ease);z-index:3;letter-spacing:.03em;}
.p-media:hover .quick-view{bottom:0;}
.p-name{font-size:15px;font-weight:600;margin-bottom:6px;transition:color .2s;}
.p-card:hover .p-name{color:var(--secondary);}
.p-rating{font-size:12px;color:var(--r-legendary);margin-bottom:10px;}
.p-rating span{color:var(--text-2);}
.p-price-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.p-price{font-family:var(--head-font);font-size:19px;}
.p-price .old{font-size:13px;color:var(--text-2);text-decoration:line-through;margin-right:8px;font-family:var(--body-font);}
.p-actions{display:flex;gap:8px;}
.p-actions .btn{flex:1;padding:12px;justify-content:center;font-size:12.5px;}

/* ============ RARITY CHIPS ============ */
.rarity-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;}
.rarity-chip::before{content:'';width:6px;height:6px;border-radius:50%;}
.rarity-common{color:var(--r-common);background:rgba(154,163,178,.12);}
.rarity-common::before{background:var(--r-common);}
.rarity-rare{color:var(--r-rare);background:rgba(63,140,255,.12);}
.rarity-rare::before{background:var(--r-rare);}
.rarity-epic{color:var(--r-epic);background:rgba(176,92,255,.14);}
.rarity-epic::before{background:var(--r-epic);}
.rarity-legendary{color:var(--r-legendary);background:rgba(255,178,62,.14);}
.rarity-legendary::before{background:var(--r-legendary);}
.rarity-mythic{color:var(--r-mythic);background:rgba(255,61,119,.14);}
.rarity-mythic::before{background:var(--r-mythic);}
.p-card[data-rarity="Legendary"] .p-media, .p-card[data-rarity="Mythic"] .p-media{box-shadow:inset 0 0 40px rgba(255,178,62,.08);}

/* Rarity label at the top of a card: plain bold white text, no pill/dot —
   the colored pill styling above is still used wherever a rarity chip
   appears inline elsewhere. Two classes = higher specificity, so this wins
   over the per-rarity color rules regardless of source order. */
.rarity-chip.rarity-badge-top{
  background:none;
  padding:0;
  border-radius:0;
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.rarity-chip.rarity-badge-top::before{content:none;}