/* ──────────────────────────────────────────────────────────────
 * Walkthroughs Shop — theming for the Catalog card on the
 * theme's /shop page (page-shop.php).
 *
 * Loaded site-wide (cheap: only ~1KB and only matches when the
 * .sh-product-card--catalog class is present in the markup).
 *
 * Color identity: emerald — distinct from Steam (red) and
 * Genshin (gold/purple) so the three cards read as a set.
 * ────────────────────────────────────────────────────────────── */

/* Top emerald gradient stripe (matches Steam/Genshin pattern) */
.sh-product-card--catalog { position: relative; isolation: isolate; }
.sh-product-card--catalog::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
  opacity: .9;
  z-index: 1;
}

/* Icon tile — emerald gradient. Matches the Steam red tile + Genshin
   pink/purple tile. We size + center the SVG in the tile here in case
   the theme's base .sh-product-card__icon styling doesn't apply to
   our --catalog modifier. */
.sh-product-card__icon--catalog {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #fff !important;
  box-shadow:
    0 8px 22px rgba(16, 185, 129, .32),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* "KEYS & WALLETS" label pill — emerald-tinted */
.sh-product-card--catalog .sh-product-card__label {
  color: #34d399 !important;
  background: rgba(16, 185, 129, .10) !important;
  border: 1px solid rgba(16, 185, 129, .32) !important;
}

/* CTA color */
.sh-product-card--catalog .sh-product-card__cta {
  color: #34d399 !important;
  transition: color .15s, letter-spacing .15s;
}
.sh-product-card--catalog:hover .sh-product-card__cta {
  color: #6ee7b7 !important;
  letter-spacing: .015em;
}

/* Hover glow (uses the existing .sh-product-card__glow element) + lift */
.sh-product-card--catalog .sh-product-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(16, 185, 129, .18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 0;
}
.sh-product-card--catalog:hover .sh-product-card__glow { opacity: 1; }
.sh-product-card--catalog {
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.sh-product-card--catalog:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, .4) !important;
  box-shadow: 0 18px 40px rgba(16, 185, 129, .18);
}

/* Keep all card content above the radial glow */
.sh-product-card--catalog > *:not(.sh-product-card__glow) {
  position: relative;
  z-index: 1;
}