/* -------------------------------------------------------------------------
 * "Was" price on a product card.
 *
 * The price cell is capped at 100px and set to nowrap with an ellipsis in the
 * stylesheets that lay these cards out, which is right for a single number but
 * clips the moment a struck-through price is put in front of it. The cap is
 * lifted only for the discounted variant, so an ordinary card keeps the
 * behaviour it has always had.
 *
 * Every selector here is scoped through `.wpbay-product-card__price.has-was-price`
 * rather than the badge class alone. That is not decoration: the listing CSS
 * printed inline by the snippets module carries
 *
 *   .wpbay-global-product-loop .wpbay-product-card__price * { color: inherit !important }
 *
 * which is two classes deep and important, so it repaints the old price in the
 * live price's green unless this file out-specifies it. Two classes on the cell
 * plus the element's own class clears it.
 *
 * The old price is deliberately much smaller than the live one: it shares a row
 * with the star rating, which shrinks to make space, and at full size the pair
 * would push the stars out of the card.
 * ---------------------------------------------------------------------- */

.wpbay-product-card__price.has-was-price {
    display: inline-flex;
    max-width: 165px;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
}

.wpbay-product-card__price.has-was-price .wpbay-product-card__price-was {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #8b909a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    /* The longhand, and important: a shorthand here would be undone by any
       `text-decoration` the card stylesheets set on this element. */
    text-decoration-line: line-through !important;
    text-decoration-color: #8b909a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * wc_price() usually wraps the amount in <span class="amount"><bdi>. Those get
 * the same treatment so the strike is not left painting around differently
 * coloured text. Deliberately no text-decoration here - a line drawn on the
 * <del> already runs through its descendants, and setting it again on the
 * children is what previously inherited `none` from the price cell and erased
 * the strike altogether.
 */
.wpbay-product-card__price.has-was-price .wpbay-product-card__price-was *,
.wpbay-product-card__price.has-was-price .wpbay-product-card__price-was .amount,
.wpbay-product-card__price.has-was-price .wpbay-product-card__price-was bdi {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit;
}

/* Below a phone column the row is too tight for two numbers at this size. */
@media (max-width: 420px) {
    .wpbay-product-card__price.has-was-price {
        gap: 4px;
    }

    .wpbay-product-card__price.has-was-price .wpbay-product-card__price-was {
        font-size: 12px !important;
    }
}