/* 種類ごとに個数を指定してまとめて買う表（assets/variation-multi-add.js）。
 *
 * 選択肢が少ない商品（DEVICE の DARK / CLEAN）でだけ出る。
 * 標準の選択フォームは JS が動いたときだけ隠れる。 */

.astra-multi-add {
  margin-block: 1.6rem;
}

.astra-multi-add__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.astra-multi-add__row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.astra-multi-add__name {
  flex: 1 1 auto;
  color: #fff;
  font-family: var(--astra-source-code-pro), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 16px;
}

.astra-multi-add__price {
  flex: 0 0 auto;
  color: #CBCBCB;
  font-family: var(--astra-source-code-pro), sans-serif;
  font-size: 16px;
}

/* 数量の枠は商品ページの単品と同じ見た目にする。 */
.astra-multi-add .quantity {
  flex: 0 0 auto;
  width: 142px;
  height: 48px;
  justify-content: center;
}

.astra-multi-add__soldout {
  flex: 0 0 auto;
  width: 142px;
  text-align: center;
  color: #8C8C8C;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
}

.astra-multi-add__row.is-unavailable .astra-multi-add__name,
.astra-multi-add__row.is-unavailable .astra-multi-add__price {
  opacity: 0.4;
}

/* 上下の線（最後の行の下罫線と、次のアコーディオンの上罫線）の中央に置く。
 *
 * 下側の余白は 25px になる。メッセージが出ていないあいだは高さが 0 で、
 * その上余白 12px は隣り合うアコーディオンの上余白 25px と相殺され、
 * 大きい方だけが残るため（隣接するマージンの相殺）。上側もそれに合わせる。 */
/* WooCommerce 本体の `.woocommerce button.button`（クラス2つ・要素1つ）が
 * margin: 0 と display: inline-block を当ててくる。クラス1つの指定では負けるので、
 * こちらもクラスを重ねて書く。 */
.woocommerce .astra-multi-add__submit.button {
  width: 100%;
  height: 56px;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.woocommerce .astra-multi-add__submit.button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 結果メッセージ。出ていないあいだは場所を取らない。
 * 高さを確保しておくと、その分だけボタンが上へ寄って見えるため。 */
.astra-multi-add__message {
  margin: 12px 0 0;
  min-height: 0;
  color: #CBCBCB;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
}

/* 表を出したときは、標準の選択フォームを隠す。
 * WooCommerce 側の指定に勝てるようクラスを重ねている。 */
.woocommerce div.product form.cart.astra-multi-add-active {
  display: none;
}