/* Картинки записи в инспекторе.
   Сетка, а не список: у товара их бывает десяток, и колонкой они
   вытеснили бы остальные поля за экран. */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--native-gap-small, 8px);
  margin-block-end: var(--native-gap, 12px);
}

.image-cell {
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.image-cell img {
  inline-size: 100%;
  /* Квадрат при разных пропорциях: карточки в ряду держат общую линию,
     а картинка вписывается целиком, без обрезки краёв. */
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--native-fill-quaternary, #f2f2f7);
  border-radius: var(--native-radius-small, 6px);
}

/* Подпись удаления показывается только на наведении и у отмеченной:
   галочка у каждой картинки постоянно тянула бы взгляд. */
.image-remove {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--native-font-caption, 11px);
  color: var(--native-label-secondary, #6e6e73);
  opacity: 0;
  transition: opacity 0.15s;
}

.image-cell:hover .image-remove,
.image-cell:focus-within .image-remove,
.image-remove:has(:checked) {
  opacity: 1;
}

/* Отмеченная к удалению гасится: видно, что уйдёт после сохранения. */
.image-cell:has(:checked) img {
  opacity: 0.35;
}