.product-visual.has-photo::before {
  display: none;
}

.product-visual.has-photo {
  background: var(--cream) !important;
}

/*
 * Take the photo out of the frame's grid flow and pin it to the frame's edges.
 *
 * .product-visual is display:grid with an implicit auto-sized row, so a
 * percentage height on the image is a cyclic reference and resolves to auto:
 * the image laid out at its full aspect height (439px in a 320px frame) and
 * overflow:hidden cropped the bottom off. Absolute positioning against the
 * already-relative frame gives a definite box, so object-fit can letterbox the
 * photo inside it instead.
 */
.product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: var(--cream);
}

.product-meta {
  display: flex;
  flex-direction: column;
}

.product-copy {
  width: 100%;
  min-height: 74px;
}

.product-copy h3 {
  text-wrap: balance;
}

.product-price-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.product-price-row span {
  color: #73776f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.product-price-row strong {
  color: var(--green);
  font-size: 18px;
}

.product-meta .add-button {
  width: 100%;
}

@media (max-width: 580px) {
  .product-copy {
    min-height: 0;
  }
}

.cart-photo {
  object-fit: contain;
  object-position: center;
  background: var(--cream);
}