/* ============================================
   SOULWYN - Shop Page Styles
   ============================================ */

/* --- Shop Grid --- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Rank Cards --- */
.rank-card {
  background: var(--obsidian);
  border: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  overflow: hidden;
}

.rank-card:hover {
  transform: translateY(-6px);
}

/* Rank accents */
.rank-supporter {
  border-color: rgba(124,58,237,0.3);
}

.rank-supporter:hover {
  box-shadow: 0 0 40px rgba(124,58,237,0.2);
  border-color: var(--ender);
}

.rank-champion {
  border-color: rgba(251,191,36,0.3);
}

.rank-champion:hover {
  box-shadow: 0 0 40px rgba(251,191,36,0.2);
  border-color: var(--gold);
}

.rank-legend {
  border-color: rgba(220,38,38,0.3);
}

.rank-legend:hover {
  box-shadow: 0 0 40px rgba(220,38,38,0.2);
  border-color: var(--blood);
}

/* Card Header */
.rank-header {
  padding: 32px 24px;
  text-align: center;
  position: relative;
}

.rank-supporter .rank-header {
  background: linear-gradient(180deg, rgba(124,58,237,0.15) 0%, transparent 100%);
}

.rank-champion .rank-header {
  background: linear-gradient(180deg, rgba(251,191,36,0.12) 0%, transparent 100%);
}

.rank-legend .rank-header {
  background: linear-gradient(180deg, rgba(220,38,38,0.12) 0%, transparent 100%);
}

.rank-name {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.rank-supporter .rank-name { color: var(--ender-light); }
.rank-champion .rank-name { color: var(--gold); }
.rank-legend .rank-name { color: var(--blood-light); }

.rank-tagline {
  font-size: 0.85rem;
  color: var(--txt3);
}

/* Price Tag */
.price-tag {
  text-align: center;
  padding: 20px 24px;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}

.price-amount {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--txt);
}

.price-currency {
  font-size: 1.2rem;
  color: var(--txt3);
  vertical-align: super;
}

.price-period {
  font-size: 0.85rem;
  color: var(--txt3);
  display: block;
  margin-top: 4px;
}

/* Feature List */
.rank-features {
  padding: 24px;
  flex: 1;
}

.feature-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.95rem;
  color: var(--txt2);
  line-height: 1.5;
}

.feature-check::before {
  content: '\2713';
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 2px;
}

.rank-supporter .feature-check::before { color: var(--ender-light); }
.rank-champion .feature-check::before { color: var(--gold); }
.rank-legend .feature-check::before { color: var(--blood-light); }

/* Buy Button Area */
.rank-action {
  padding: 0 24px 24px;
}

.rank-action .btn {
  width: 100%;
  justify-content: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .shop-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

@media (max-width: 480px) {
  .rank-header { padding: 24px 20px; }
  .rank-features { padding: 20px; }
  .rank-action { padding: 0 20px 20px; }
  .price-amount { font-size: 2rem; }
}