@import url("../base/normalize.css");
@import url("../base/tokens.css");
@import url("../base/base.css");
@import url("../components/header.css");
@import url("../components/nav.css");
@import url("../components/footer.css");
@import url("../components/hero.css");
@import url("../components/cards.css");
@import url("../components/call-to-action.css");
@import url("../components/gradient.css");
@import url("../components/ripple.css");

/* Store Hub Styles */
.store-page .rc-h1 {
  font-weight: 900;
  color: #111;
  text-transform: capitalize;
}

.store-hero {
  background:
    radial-gradient(
      980px 360px at 8% -4%,
      rgba(251, 146, 60, 0.24),
      transparent 62%
    ),
    radial-gradient(
      860px 340px at 94% 14%,
      rgba(59, 130, 246, 0.16),
      transparent 64%
    ),
    radial-gradient(
      620px 260px at 50% 88%,
      rgba(244, 63, 94, 0.12),
      transparent 72%
    ),
    linear-gradient(128deg, #fff7f1 0%, #eef6ff 48%, #fff1f6 100%);
}

.store-hero .store-hero__content .rc-kicker,
.store-hero .store-hero__content .rc-h1,
.store-hero .store-hero__content .rc-lead {
  color: #111;
}

.store-hero__media {
  display: grid;
  place-items: center;
}

.store-hero__img {
  width: min(100%, 420px);
  max-height: 420px;
  object-fit: contain;
  display: block;
}

.store-hero__img--merch {
  width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  padding: 1.5rem;
  background: linear-gradient(145deg, #ffffff 0%, #f4f7fb 100%);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 10px 18px rgba(59, 130, 246, 0.16);
}

section[aria-labelledby="featured-title"] .rc-kicker,
section[aria-labelledby="featured-title"] .rc-h2 {
  color: #fff;
}

.store-featured-band {
  background: var(--rc-background-twilight-steel);
}

.store-categories,
.store-featured-items,
.store-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.store-category-card,
.store-featured-card,
.store-cta-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.store-category-card:hover,
.store-featured-card:hover,
.store-cta-card:hover {
  transform: translateY(-4px);
  border-color: #3b82f6;
  box-shadow: 0 18px 40px rgba(59, 130, 246, 0.08);
}

.store-category-card__media,
.store-featured-card__media {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: #f3f4f6;
}

.store-category-card__media--logo {
  object-fit: contain;
  object-position: center;
  padding: 1rem;
}

.store-category-card__content,
.store-featured-card__content,
.store-cta-card__content {
  padding: 1.75rem;
}

.store-category-card__label,
.store-featured-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.store-category-card__title,
.store-featured-card__title,
.store-cta-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.85rem;
}

.store-category-card__text,
.store-featured-card__text,
.store-cta-card__text {
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.store-note {
  background: #f9fafb;
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 2rem;
  border: 1px solid #e5e7eb;
}

.store-note h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  color: #111;
}

.store-note p {
  color: #4b5563;
  line-height: 1.8;
}

.store-cta-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

.store-cta-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fb923c;
  margin-bottom: 1rem;
}

.store-cta-card__footer {
  margin-top: auto;
}

@media (max-width: 768px) {
  .store-hero .rc-hero__inner {
    flex-direction: column;
  }

  .store-hero__img {
    width: min(100%, 320px);
    max-height: 320px;
  }

  .store-categories,
  .store-featured-items,
  .store-cta-grid {
    grid-template-columns: 1fr;
  }
}