/* 「本数」トグルに足す割引率バッジ。
   既存の SALE バッジ（assets/mymoods-overrides.css の .product__badge-sale、
   #e60023）と同じ赤にして「お得」であることが一目でわかるようにする。
   赤は選択中ピル（黒背景）の上でも十分視認できるため、状態による色の
   反転は不要。 */
.mm-pen-set-discount {
  display: inline-block;
  margin-left: 6px;
  background-color: #e60023;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: middle;
}

/* 「1個」はバッジが付かない分だけ他より狭く見えるため、4つとも同じ幅に揃える。
   min-width（floor）だけでは、選択中（li.selected）側に基本CSSがより強い
   width/flex 指定を持っていた場合に上書きしきれず、選択中のピルだけ幅が
   合わないままだった。width を固定値にし、!important で基本CSSに勝たせる。
   display も同様の理由で !important にする
   （min-width は display:inline に効かない／inline-block だとテキストと
   バッジがベースライン基準で並び縦位置がバラつくため、必ず inline-flex を
   維持させる）。
   PC表示では以前の 112px 幅に「本数＋バッジ」が収まりきらず、基本CSS側の
   flex-wrap を継承して2行に折り返っていた。flex-wrap / white-space を
   nowrap で明示して折り返しを止め、幅も 130px に広げて収まる余裕を持たせた。 */
.mmcui-page-toggle[data-axis="size"] .mmcui-page-toggle__options li > a,
.mmcui-page-toggle[data-axis="size"] .mmcui-page-toggle__options li > span[aria-current] {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 130px !important;
  box-sizing: border-box;
  text-align: center;
}