/* ==========================================================================
   Boxes — Image Stack Component
   ========================================================================== */

.image-stack {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

.image-stack__item {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-weak-50);
}

.image-stack__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Order variant — square thumbnails
   -------------------------------------------------------------------------- */

.image-stack--order {
  height: auto;
  gap: 4px;
}

.image-stack--order .image-stack__item {
  width: 45px;
  height: 45px;
  border-radius: 6px;
}

.image-stack--order .image-stack__overflow {
  width: 45px;
  height: 45px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Category variant — round thumbnails
   -------------------------------------------------------------------------- */

.image-stack--category {
  height: 40px;
  gap: 6px;
}

.image-stack--category .image-stack__item {
  width: 45px;
  height: 45px;
  border-radius: 9999px;  /* ← stays fully round */
  border: 2px solid var(--stroke-soft-200);
}

/* --------------------------------------------------------------------------
   Overflow badge
   -------------------------------------------------------------------------- */

.image-stack__overflow {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub-600);
  background: var(--bg-weak-50);
}