/* Catalog sale price - templates/fragments/price.html.
   Theme-agnostic: the sale price inherits the colour and size of the price it replaces, the regular price is the
   same colour faded and struck through, the badge is the site's amber accent with dark text. Wraps instead of
   overflowing, so it holds at 360 px. */

.vp-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1em 0.55em;
  max-width: 100%;
  vertical-align: baseline;
}

.vp-price__regular {
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.65;
  text-decoration: line-through;
  white-space: nowrap;
}

.vp-price__now {
  white-space: nowrap;
}

.vp-price__badge {
  align-self: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #ffc34d;
  color: #1b1400;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.vp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A price shown on its own line next to a sentence that names it (e.g. the /pro title), only while a sale runs. */
.vp-price-callout {
  margin: 0.25rem 0 0.75rem;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.3;
}