/* Announcement bar above the header (festive drops, offers). Shown only while the owner has
   text set in Admin → Settings and it hasn't expired. Tokens only. */
@layer components {
  .announcement {
    background-color: var(--ink-800);
    border-bottom: 1px solid var(--gold-hairline);
    color: var(--gold-200);
    text-align: center;
  }

  .announcement .announcement__text {
    color: var(--gold-200);
    margin: 0;
    padding: var(--space-2) var(--gutter);
    font-weight: 700;
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;

    & a {
      color: inherit;
      text-decoration: none;

      &::after {
        content: " →";
      }

      &:hover {
        color: var(--gold-400);
      }

      &:focus-visible {
        outline: 2px solid var(--gold-400);
        outline-offset: 2px;
      }
    }
  }

  /* Prices everywhere: Cormorant's default old-style figures drop 3/4/5/7/9 below the line
     (owner: "₹510 sucks", 2026-10-08) — use its lining figures, tabular where amounts stack. */
  :is(.card__price, .product__price, .cart-line__price, .cart-total__value, .co-qr__amount, .co-line__total,
      .co-totals, .hamper-box__price, .hamper__price, .reel-product__price, .price-was, .track-result, .account-order) {
    font-variant-numeric: lining-nums;
  }

  :is(.co-totals, .co-line__total, .cart-total__value) {
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* Small marks reused by cards, the product page and the cart. */
  .price-was {
    margin-right: var(--space-1);
    color: var(--ca-muted);
    font-size: 0.75em;
    font-weight: 400;
    text-decoration-thickness: 1px;
  }

  .card__media {
    position: relative;
  }

  .card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background-color: var(--ink-900);
    color: var(--gold-200);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    pointer-events: none;
  }
}