/* One typographic scale for the three purchase captions, including feedback. */
body button:is([data-buy], [data-add-product]):has([data-buy-label]) {
  font-size:var(--purchase-caption-size,16px) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
}
.product-page .product-description .product-actions, .flow-detail {
  --purchase-caption-size:17px;
}
.product-card {
  --purchase-caption-size:15px;
}
/* The card width, not the caption length, determines the compact scale. */
@container catalog-card (max-width:300px) {
  .buy-button { --purchase-caption-size:14px; }
}
@container catalog-card (max-width:170px) {
  /* Give the caption its own row when a price and button cannot both fit. */
  :is(body.theme-flow.store-page.view-grid .flow-main > [data-flow-feed] > .product-card, body.store-page.view-grid [data-catalog-card], .product-card[data-poster-only]) .card-info {
    grid-template-rows:auto auto auto;
  }
  :is(body.theme-flow.store-page.view-grid .flow-main > [data-flow-feed] > .product-card, body.store-page.view-grid [data-catalog-card], .product-card[data-poster-only]) .card-info .price-line {
    grid-column:1 / -1 !important;
    justify-self:center;
    align-items:center;
  }
  :is(body.theme-flow.store-page.view-grid .flow-main > [data-flow-feed] > .product-card, body.store-page.view-grid [data-catalog-card], .product-card[data-poster-only]) .buy-button {
    --purchase-caption-size:14px;
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    justify-self:stretch;
    width:100% !important;
    max-width:100%;
    margin:0;
  }
}
@media (max-width:760px) {
  .product-page .product-description .product-actions { --purchase-caption-size:16px; }
}