/* =========================================================================
   TYPOGRAPHY — headings, eyebrows, shared text patterns.
   Layout properties (margin, padding) belong in the owning section/component.
   ========================================================================= */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  line-height:1.05;
  letter-spacing:-.01em;
}

/* Cormorant Garamond ships with old-style figures by default — the "1"
   is drawn like a Roman numeral I, and digits sit at varying heights so
   they blend into body text. That's beautiful in prose and confusing on
   prices ("1 sachet" reads as "I sachet", "₹1,499" as "₹I,499"). Force
   lining figures on every display-font element that renders numbers so
   prices, counts, and quantities read unambiguously. */
:where(.dot, .box .amt, .facts b, .fb-price, .num b){
  font-variant-numeric: lining-nums;
}

.eyebrow{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--green);
}
.eyebrow.light{color:var(--on-dark-2)}   /* was #C7D9C0 */