.category-photo {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 94%;
  height: 76%;
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: #f4eee6;
  mix-blend-mode: multiply;
  transform-origin: center;
}

/* The lead card is taller, so its image gets a dedicated visual area. */
.collection-card.tall .category-photo {
  top: 5%;
  left: 2%;
  width: 96%;
  height: 78%;
}

/* Fine-tune unusually shaped product photos without cropping the products. */
.collection-card[data-category="dust-covers"] .category-photo,
.collection-card[data-category="bag-pillows"] .category-photo,
.collection-card[data-category="hardware-protectors"] .category-photo {
  top: 2%;
  left: 2%;
  width: 96%;
  height: 78%;
}

.collection-card[data-category="shoulder-straps"] .category-photo {
  top: 2%;
  left: 6%;
  width: 88%;
  height: 79%;
}

.collection-card:has(.category-photo):after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(to bottom, transparent 48%, rgba(232, 223, 212, .25) 68%, #e8dfd4 90%);
}

.collection-card:has(.category-photo)>span,
.collection-card:has(.category-photo)>b,
.collection-card:has(.category-photo)>.card-arrow {
  z-index: 3;
}

.category-view-object.has-photo {
  border-radius: 0;
  background: #f2ebe2;
  overflow: hidden;
}

.category-view-object.has-photo:before {
  display: none;
}

.category-view-object.has-photo img {
  width: 94%;
  height: 94%;
  margin: 3%;
  padding: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}