/* Price number typography (mono, tabular, tight, bold). Shared by the deal
   page, hero, and feed row. Size AND color stay with the consumer (the hero
   price inherits light text on the pine surface), so adopting .price never
   changes them. */

@layer components {
  .price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    font-weight: 700;
  }

  /* The cents fraction, em-relative so it shrinks proportionally on every price
     surface from one rule. */
  .price__cents {
    font-size: 0.62em;
  }

  .price-line {
    display: flex;
    align-items: baseline;
    gap: 0.75ch;
    flex-wrap: wrap;
  }
}