/* Editions: section-level hooks on top of the ported design CSS.

   misfit/css/landing.css draws .editions and both torn-paper card frames, and
   misfit/css/offers.css carries the art-sizing rules that keep a render of any
   shape inside its frame — which is why the card art must stay a direct
   `> img` child of .edition-card with the copy in the `> div` that follows it.
   Both files already read the surfaces and the two frame plates through
   var(--mm-surface-*) / var(--mm-img-edition-frame-*), which the section root
   sets inline from its own settings.

   Left here: the desktop ratio the design locks the band to, so it can follow a
   replacement backdrop. offers.css releases that ratio between 901 and 1120px
   with a `section.editions` selector, which stays more specific than this rule
   on purpose, so that fix survives. */

@media (min-width: 901px) {
  .editions {
    aspect-ratio: var(--mm-editions-ratio, 1760/624);
  }
}

/* product/price renders its amount in a nested element carrying the theme's
   typography class, so the design's .price type has to be handed down. */
.edition-card .price .product-price__item {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.edition-card .price.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}