/*
 * Price tag (Tts\Ui\PriceTag\PriceTag): the price of the unit a product is
 * sold in, large, with what it is per; above it a named reference price
 * ("Adviesprijs € 16,95") where there is one - quiet, and not struck through,
 * which would claim it as our own earlier price; the quieter lines under it
 * (excl. VAT, per m²).
 * Decision 23.
 */

.price-tag {
    display: grid;
    gap: var(--shop-space-1);
}

.price-tag p {
    margin: 0;
}

.price-tag__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--shop-space-2);
    line-height: var(--shop-leading-tight);
}

/* The same colour as the cards' price (owner's choice; see the contrast note
   in the design system). */
.price-tag__amount {
    color: var(--shop-price);
    font-size: var(--shop-text-3xl);
    font-weight: var(--shop-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.price-tag__unit {
    color: var(--shop-text);
    font-size: var(--shop-text-md);
}

.price-tag__reference {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-snug);
}

.price-tag__reference {
    font-variant-numeric: tabular-nums;
}

.price-tag__note {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-snug);
    font-variant-numeric: tabular-nums;
}