.price {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
}

.price > * {
  display: inline-block;
  vertical-align: top;
}

.price.price--unavailable {
  visibility: hidden;
}

.price--end {
  text-align: right;
}

.price .price-item {
  display: inline-block;
  margin: 0 1rem 0 0;
}

.price__regular .price-item--regular {
  margin-right: 0;
}

.price:not(.price--show-badge) .price-item--last:last-of-type {
  margin: 0;
}

@media screen and (min-width: 750px) {
  .price {
    margin-bottom: 0;
  }
}

.price--large {
  font-size: 1.6rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.13rem;
}

@media screen and (min-width: 750px) {
  .price--large {
    font-size: 1.8rem;
  }
}

.price--sold-out .price__availability,
.price__regular {
  display: block;
}

.price__sale,
.price__availability,
.price .price__badge-sale,
.price .price__badge-sold-out,
.price--on-sale .price__regular,
.price--on-sale .price__availability {
  display: none;
}

.price--sold-out .price__badge-sold-out,
.price--on-sale .price__badge-sale,
.volume-pricing--sale-badge .price__badge-sale {
  display: inline-block;
}

.volume-pricing--sale-badge .price__badge-sale {
  margin-left: 0.5rem;
}

.price--on-sale .price__sale {
  display: initial;
  flex-direction: row;
  flex-wrap: wrap;
}

.price--center {
  display: initial;
  justify-content: center;
}

/* 取り消し線の付いた元値。値段の一部なので本文と同じ 1.4rem（14px）を下限にし、
 * 薄さも 0.75 → 0.85 に上げる（線が引かれているぶん、ただでさえ読みにくい）。 */
.price--on-sale .price-item--regular {
  text-decoration: line-through;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 1.4rem;
}

.unit-price {
  display: block;
  font-size: 1.4rem;
  letter-spacing: 0.04rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  margin-top: 0.2rem;
  color: rgba(var(--color-foreground), 0.8);
}

/* セール中の「元値 → 売値 ○%OFF」。
 *
 * 値段が固定の商品はサーバが組み立て（woocommerce/content-single-product.php）、
 * 選択で合計が動く組み合わせ商品は assets/composite-price.js が組み立てる。
 * どちらも同じ形にして、商品によって見え方が変わらないようにする。
 *
 * 売値は他の商品の値段と同じ大きさ（.price--large＝1.8rem）で、取り消し線は付けない。
 * 元値はそれより小さくして取り消し線を付ける。テーマの .price--on-sale は
 * 「.price-item--regular＝元値」という前提の作りなので、こちらでは使わない。 */
.price--compare-at {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.8rem;
}

/* バッジだけは文字の下端ではなく、売値の高さの真ん中に合わせる。
 * ベースラインに揃えると枠の下端が数字より下がって、ぶら下がって見える。 */
.price--compare-at .price__off {
  align-self: center;
}

.price--compare-at .price__compare,
.price--compare-at .price__arrow {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.85);
}

.price--compare-at .price__compare {
  text-decoration: line-through;
}

.price--compare-at .price__current {
  text-decoration: none;
}

.price--compare-at .price__off {
  padding: 0.2rem 1rem;
  border: 1px solid var(--astra-cyan, #4ec3e1);
  border-radius: 9999px;
  color: var(--astra-cyan, #4ec3e1);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}