/* [04] merch: product cards */
.mc { padding-top: 140px; }
.mc-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.mc-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; margin-top: 44px; }
.mc-card { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
a.mc-card:hover { color: var(--text); }
.mc-ph { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--line-3); background: radial-gradient(60% 55% at 50% 52%, var(--bg-5) 0%, var(--bg-3) 62%, var(--bg) 100%); transition: border-color .2s; }
.mc-ph img { position: relative; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)) saturate(.92); transition: transform .5s; }
.mc-floor { position: absolute; left: 22%; right: 22%; bottom: 15%; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
a.mc-card:hover .mc-ph, a.mc-card:focus-visible .mc-ph { border-color: var(--accent); }
a.mc-card:hover .mc-ph img, a.mc-card:focus-visible .mc-ph img { transform: translateY(-6px) rotate(-1deg); }
.mc-badge { position: absolute; left: 14px; top: 14px; padding: 4px 8px; font-size: 11px; letter-spacing: .2em; background: var(--accent); color: var(--accent-ink); }
.mc-name { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; letter-spacing: .08em; }
.mc-price { color: var(--accent); white-space: nowrap; }
:root[data-theme="flashbang"] .mc-ph img { filter: drop-shadow(0 14px 18px rgba(30, 20, 60, .25)) saturate(.95); }