/* Product photography fills its card frame. Source proportions stay intact. */
body[data-page] :is(.product-card > .product-media, .product-card > .product-card__media, .accessory-card > .accessory-card__media) {
  --hh-card-photo-inset: 12px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background-color: #fff !important;
}

body[data-page] :is(.product-card > .product-media, .product-card > .product-card__media, .accessory-card > .accessory-card__media) > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #fff;
}

body[data-page] :is(.product-card > .product-media, .product-card > .product-card__media, .accessory-card > .accessory-card__media) img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  object-fit: contain !important;
  object-position: center;
  background-color: #fff;
  box-shadow: none !important;
  transform: none !important;
}

/* Insets apply to overlays only, never to the photograph or the card body. */
body[data-page] .product-card > :is(.product-media, .product-card__media) > :is(.product-badge, .badge),
body[data-page] .accessory-card > .accessory-card__media > .accessory-card__badges {
  top: var(--hh-card-photo-inset) !important;
  left: var(--hh-card-photo-inset) !important;
}

body[data-page] .product-card > :is(.product-media, .product-card__media) > .product-badge--discount ~ .product-badge--label {
  top: calc(var(--hh-card-photo-inset) + 30px) !important;
}

body[data-page] :is(.product-card > .product-media, .product-card > .product-card__media, .accessory-card > .accessory-card__media) > :is(.wish-btn, .wishlist-btn) {
  top: var(--hh-card-photo-inset) !important;
  right: var(--hh-card-photo-inset) !important;
  left: auto !important;
}

@media (max-width: 700px) {
  body[data-page] :is(.product-card > .product-media, .product-card > .product-card__media, .accessory-card > .accessory-card__media) {
    --hh-card-photo-inset: 8px;
  }
}