/* 参照の .collection-card を小さくした構成（画像は正方形、名前はゴシック） */
.mj-acc {
  background-color: rgb(var(--color-background));
}

.mj-acc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 40px;
}

.mj-acc__card {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: block;
}

.mj-acc__media {
  aspect-ratio: 1;
  overflow: hidden;
  margin-block-end: 18px;
  background: rgba(var(--color-text), 0.04);
}

.mj-acc__image,
.mj-acc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.mj-acc__card:hover .mj-acc__image,
.mj-acc__card:hover .mj-acc__media img {
  transform: scale(1.03);
}

.mj-acc__name {
  font-family: var(--mj-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  margin: 0 0 8px;
}

.mj-acc__price {
  font-family: var(--mj-font-figure);
  font-size: 20px;
  color: var(--mj-ink);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.mj-acc__price small {
  font-family: var(--mj-font-body);
  font-size: 12px;
  color: var(--mj-muted);
}

.mj-acc__stock {
  font-size: 13px;
  color: #a4442c;
  margin: 8px 0 0;
}

.mj-acc__note-item {
  font-size: 13px;
  color: var(--mj-muted);
  margin: 8px 0 0;
}

.mj-acc__link {
  display: inline-flex;
  margin-block-start: 35px;
}

.mj-acc__note {
  margin-block-start: 25px;
}

@media (max-width: 760px) {
  .mj-acc__grid { gap: 28px; }
}