/*
 * Sale pricing, in its own sheet because prices render on two stylesheet
 * families that share nothing else: the landing page (styles-content.css)
 * shows featured-card prices, while the catalog, product poster, size picker
 * and cart all come through catalog.css. Both link this so a markdown looks
 * the same wherever a shopper meets it.
 *
 * The struck original always sits inline with the price that replaced it, so
 * the two read as one pair rather than as two separate numbers.
 */

.catalog-price-pair {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
}

/*
 * .catalog-price is a grid, and styles its <span> children as the small
 * uppercase "Dispensary prices may vary." note that shares the box. The price
 * pair is not that note, so it takes the container's own type back — two
 * classes, to outrank a rule of one class and one element.
 */
.catalog-price .catalog-price-pair,
.catalog-price .catalog-price-was,
.catalog-price .catalog-price-now {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Quieter and smaller than the price that replaced it, wherever it lands.
   Listed after the reset above so it survives it. */
.catalog-price-was,
.catalog-price .catalog-price-was {
  opacity: .55;
  font-size: .68em;
  font-weight: inherit;
  text-decoration-thickness: .08em;
}

.catalog-price-now,
.catalog-price .catalog-price-now { color: inherit; }

/*
 * A strikethrough is not announced by screen readers, so the price pair ships
 * with "Was"/"Now" text that only assistive tech reads. Without it the pair is
 * voiced as "thirty-five dollars twenty-nine dollars".
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}