/* Product sales: a "−20%" badge and the list price struck through before the price the
   buyer pays, on product cards, the product page, cart lines and order lines. */
.product-sale-badge { display: inline-flex; align-items: center; padding: 3px 6px; margin: 0 0 7px; border-radius: 4px; background: #eaf4eb; color: #32623c; font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-list-price { color: #888; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.portal-workspace-shell .product-card .product-list-price, .cart-row-description .product-list-price { font-size: 11px; }

/* Cards: the badge sits on the photo's top-left corner (the cart count takes the right). */
.portal-workspace-shell .grid-view .product-card { position: relative; }
.portal-workspace-shell .grid-view .product-sale-badge { position: absolute; top: 10px; left: 10px; z-index: 1; margin: 0; }
.portal-workspace-shell .grid-view .product-price { flex-wrap: wrap; gap: 5px; }

/* The product page: badge, struck list price and price on one line, the end date below. */
.product-detail-price .product-sale-badge { margin: 0; padding: 4px 8px; font-size: 12px; }
.product-detail-price .product-list-price { font-size: 17px; color: #777; }
.product-detail-price .product-sale-ends { display: block; flex-basis: 100%; margin: -4px 0 0; color: #32623c; font-size: 13px; line-height: 20px; letter-spacing: 0; }

.cart-row-description .product-sale-badge { margin-bottom: 5px; }
.cart-row-price .product-list-price { margin-right: 6px; }

/* Order lines: compactly under the price paid. */
.order-line-sale .product-list-price { color: inherit; }
.order-line-sale .product-sale-badge { margin: 0 0 0 2px; padding: 1px 5px; }

@media (max-width: 760px) {
  .product-sale-badge { padding: 3px 5px; font-size: 9px; }
  .portal-workspace-shell .product-card .product-list-price, .cart-row-description .product-list-price { font-size: 10px; }
  .portal-workspace-shell .grid-view .product-sale-badge { top: 8px; left: 8px; }
}