/* Pack row background: faded featured card + diagonal deck-colour overlay */

.pack-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.pack-bg__card {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.95);
  width: 28%;
  max-width: 180px;
  min-width: 90px;
  opacity: 0.18;
  filter: saturate(0.85);
  aspect-ratio: 5 / 7;
  display: flex;
}

.pack-bg__card .card {
  width: 100%;
  height: 100%;
}

/* 45° diagonal deck-colour overlay — gradient set inline per row. */
.pack-bg__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: screen;
}

/* Ensure pack row containers can host the absolute background. */
.pack-selector__item,
.designer__pack-item {
  position: relative;
  overflow: hidden;
}

/* Keep row content above the background layer. */
.pack-selector__item > *:not(.pack-bg),
.designer__pack-item > *:not(.pack-bg) {
  position: relative;
  z-index: 1;
}