/* Keep the existing circle, prices, discounts and all purchase behaviour.
   A narrow card gets a full-width reference/discount row and a separate
   sale-price/action row. The circle no longer competes with the metadata. */
body#category.page-category .product-miniature {
  container-type: inline-size;
}

@container (max-width: 200px) {
  @layer utilities {
    :is(body#category.page-category .product-miniature, .product-miniature--unified)
      .product-miniature__prices.d-flex {
      display: grid !important;
      grid-template-areas:
        "regular badge badge"
        "current current action" !important;
      grid-template-columns: max-content minmax(0, 1fr) 48px !important;
      grid-template-rows: minmax(18px, auto) 48px !important;
      column-gap: 6px !important;
      row-gap: 2px !important;
      /* Add 4px of breathing room to the existing 12px card padding. */
      margin-bottom: 4px !important;
      align-items: center;
    }

    :is(body#category.page-category .product-miniature, .product-miniature--unified)
      .product-miniature__discount-badge {
      grid-area: badge;
      justify-self: start;
    }

    :is(body#category.page-category .product-miniature, .product-miniature--unified)
      .product-miniature__actions--inline {
      grid-area: action;
      position: static;
      transform: none;
      align-self: center;
      justify-self: end;
    }
  }
}