/*
 * assets/public/components/tax-math.css
 *
 * Styles the " + IVA" suffix appended to headline prices.
 *
 * The suffix is wrapped in <span class="price-tax-suffix"> by both
 * the server-side formatter (Taxes.headline + ProductsController._formatHeadline,
 * detail.view.js formatHeadlineSSR) and the client-side formatter
 * (TaxMath.formatHeadline in tax-math.js). One CSS rule covers every
 * placement (card .pcard__price, popup .qadd-price, detail
 * .pdetail-price) because we use em-relative sizing — the suffix
 * sizes itself relative to whatever its parent price element does.
 *
 * Design intent: the suffix should read as informational/secondary,
 * not compete with the headline number for attention. That means
 * smaller, lighter weight, and slightly muted color.
 */

.price-tax-suffix {
    font-size: 0.6em;        /* 60% of the parent's price font size */
    font-weight: 500;        /* lighter than the price (which is typically 700/800) */
    color: var(--color-secondary-grey);
    margin-left: 0.15em;
    letter-spacing: 0.02em;
    /* The space character before "+ IVA" is part of the suffix string,
       so no left padding is needed beyond the small margin above. */
}

/* Strikethrough (old) prices already render at a smaller, muted size,
   so the suffix needs to be relatively closer to the parent's size or
   it disappears. Bump it up here. */
.pcard__price-old .price-tax-suffix,
.qadd-price-old   .price-tax-suffix,
.pdetail-price-old .price-tax-suffix {
    font-size: 0.85em;
}