.shop-gem-packs {
  --gem-gold: #f7a402;
  --gem-violet: #924ff7;
  --gem-pink: #c56ab1;
  padding: 28px 8px 36px;
  scroll-margin-top: 136px;
}

.shop-gem-packs .gem-pack-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-bottom: 112px;
}

.shop-gem-packs .gem-pack-heading h2 { margin: 0; }
.shop-gem-packs .gem-pack-motion-toggle {
  padding: 8px 14px;
  color: #f3d47c;
  background: rgba(73, 24, 99, .65);
  border: 1px solid rgba(235, 204, 91, .3);
  border-radius: 999px;
  font-size: .875rem;
  cursor: pointer;
}
.shop-gem-packs .gem-pack-motion-toggle:focus-visible { outline: 2px solid #ebcc5b; outline-offset: 4px; }
.shop-gem-packs .gem-pack-motion-toggle:disabled { cursor: default; opacity: .65; }
.shop-gem-packs .gem-pack-grid { gap: 112px 32px; margin-top: 0; overflow: visible; }
.shop-gem-packs .gem-pack-card { padding-top: 156px; overflow: visible; isolation: isolate; }
.shop-gem-packs .gem-pack-art {
  position: absolute;
  top: -88px;
  left: 50%;
  transform: translateX(-50%);
  width: 224px;
  max-width: calc(100% - 24px);
  height: 224px;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
}
.shop-gem-packs .gem-pack-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  z-index: 1;
}
.shop-gem-packs .gem-pack-halo {
  position: absolute;
  inset: -8%;
  background: radial-gradient(ellipse closest-side at 50% 56%,
    rgba(255, 231, 181, .90) 0%,
    color-mix(in srgb, var(--gem-gold) 45%, transparent) 35%,
    color-mix(in srgb, var(--gem-gold) 15%, transparent) 65%,
    color-mix(in srgb, var(--gem-gold) 3%, transparent) 85%, transparent 100%);
  opacity: clamp(0, var(--gem-strength), 1);
}
.shop-gem-packs .gem-pack-core {
  position: absolute;
  inset: 4% -8% -4%;
  background: radial-gradient(ellipse closest-side at 50% 45%,
    rgba(255, 231, 181, .95) 0%,
    color-mix(in srgb, var(--gem-gold) 30%, transparent) 45%,
    color-mix(in srgb, var(--gem-gold) 6%, transparent) 75%, transparent 100%);
  opacity: calc(var(--gem-level) * .4);
}
.shop-gem-packs .gem-pack-art--coffre .gem-pack-image {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gem-gold) 44.8%, transparent));
}
.shop-gem-packs .gem-pack-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: clamp(0, calc(var(--gem-strength) * 1.2), 1);
}
.shop-gem-packs .gem-pack-particle {
  --gem-spark: var(--gem-violet);
  position: absolute;
  left: var(--gem-x);
  bottom: var(--gem-y);
  width: var(--gem-size);
  height: var(--gem-size);
  background: var(--gem-spark);
  box-shadow: 0 0 6px color-mix(in srgb, var(--gem-spark) 75%, transparent);
  opacity: .65;
  animation: gem-pack-rise var(--gem-duration) linear infinite;
  animation-delay: var(--gem-delay);
}
.shop-gem-packs .gem-pack-particle:nth-child(3n + 1) { --gem-spark: var(--gem-pink); }
.shop-gem-packs .gem-pack-particle:nth-child(3n) { --gem-spark: color-mix(in srgb, var(--gem-violet) 50%, var(--gem-pink)); }
.shop-gem-packs[data-effects-paused="true"] .gem-pack-particle,
.shop-gem-packs .gem-pack-art[data-visible="false"] .gem-pack-particle { animation-play-state: paused; }

@keyframes gem-pack-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .95; }
  75% { opacity: .65; }
  100% { transform: translate(var(--gem-drift), -65px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-gem-packs .gem-pack-particle { animation: none; }
}

.shop-gem-packs .gem-pack-heading { margin-bottom: 0; }
.shop-gem-packs .gem-section-divider,
.shop-gem-packs .gem-card-divider { display: flex; align-items: center; justify-content: center; gap: 10px; }
.shop-gem-packs .gem-section-divider { max-width: 280px; margin: 24px auto 112px; }
.shop-gem-packs .gem-card-divider { width: 110px; margin: 22px auto; }
.shop-gem-packs .gem-section-divider::before,
.shop-gem-packs .gem-section-divider::after,
.shop-gem-packs .gem-card-divider::before,
.shop-gem-packs .gem-card-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(235, 204, 91, .32)); }
.shop-gem-packs .gem-section-divider::after,
.shop-gem-packs .gem-card-divider::after { transform: rotate(180deg); }
.shop-gem-packs .gem-section-divider span,
.shop-gem-packs .gem-card-divider span { width: 5px; height: 5px; transform: rotate(45deg); background: rgba(235, 204, 91, .45); }
.shop-gem-packs .gem-pack-card { position: relative; display: flex; flex-direction: column; padding: 156px 28px 28px; border-radius: 24px; transition: transform 220ms ease; }
.shop-gem-packs .gem-pack-card-surface { position: absolute; inset: 0; z-index: 0; border: 1px solid rgba(177, 115, 195, .35); border-radius: inherit; overflow: hidden; background: linear-gradient(145deg, rgba(38, 14, 58, .95), rgba(22, 9, 38, .94)); transition: border-color 220ms ease, box-shadow 220ms ease; }
.shop-gem-packs .gem-pack-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; text-align: center; }
.shop-gem-packs .gem-pack-art { z-index: 2; }
.shop-gem-packs .gem-pack-content h3 { margin-bottom: 12px; }
.shop-gem-packs .gem-pack-description { color: #d3bce2; line-height: 1.65; }
.shop-gem-packs .gem-pack-amount { font-size: 2.25rem; font-weight: 700; line-height: 1.25; margin-bottom: 28px; }
.shop-gem-packs .gem-pack-purchase { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(177, 115, 195, .16); }
.shop-gem-packs .gem-pack-unavailable,
.shop-gem-packs .gem-pack-buy { display: block; width: 100%; padding: 14px 12px; border-radius: 12px; font-size: .95rem; line-height: 1.5; font-weight: 600; }
.shop-gem-packs .gem-pack-unavailable { color: #c7aedb; border: 1px solid rgba(177, 115, 195, .22); background: rgba(177, 115, 195, .08); cursor: not-allowed; }
.shop-gem-packs .gem-pack-buy { color: #fff; background: linear-gradient(110deg, #7b24bc, #b81ddf); cursor: pointer; }
.shop-gem-packs .gem-pack-price { color: #e4b136; font-size: 1.5rem; margin-bottom: 16px; }
.shop-gem-packs .gem-pack-bed { position: absolute; inset: -8%; background: radial-gradient(ellipse closest-side at 50% 56%, rgba(13, 6, 26, .85), rgba(13, 6, 26, .45) 45%, transparent 100%); opacity: clamp(.18, calc(var(--gem-level) * .45), .62); }
.shop-gem-packs .gem-pack-halo,
.shop-gem-packs .gem-pack-core { mix-blend-mode: screen; }
.shop-gem-packs .gem-pack-sheen { position: absolute; top: -30%; left: 0; width: 58%; height: 160%; transform: translateX(-180%) skewX(-18deg); background: linear-gradient(90deg, transparent 0%, rgba(255, 245, 221, .03) 30%, rgba(255, 245, 221, .13) 50%, rgba(255, 245, 221, .03) 70%, transparent 100%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .shop-gem-packs .gem-pack-card:hover { transform: translateY(-3px); }
  .shop-gem-packs .gem-pack-card:hover .gem-pack-card-surface { border-color: rgba(220, 184, 233, .6); box-shadow: 0 12px 32px rgba(12, 4, 23, .25); }
  .shop-gem-packs:not([data-effects-paused="true"]) .gem-pack-card:hover .gem-pack-sheen { transform: translateX(280%) skewX(-18deg); transition: transform 950ms cubic-bezier(.2, .6, .3, 1); }
}
.shop-gem-packs:not([data-effects-paused="true"]) .gem-pack-card:focus-within .gem-pack-sheen { transform: translateX(280%) skewX(-18deg); transition: transform 950ms cubic-bezier(.2, .6, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .shop-gem-packs .gem-pack-card,
  .shop-gem-packs .gem-pack-card-surface { transition: none; transform: none; }
  .shop-gem-packs .gem-pack-sheen { display: none; }
}