/* astra-woo-checkout.css — カート / チェックアウト / マイアカウントの意匠。
 *
 * Shopify の cart は Dawn 標準（背景だけ透明化）で、checkout は Shopify 側の
 * 固定 UI だった。つまり「再現すべき独自デザイン」は存在しない。
 * ここでの目的は、購入導線がサイトの他の部分と地続きに見えるようにすること。
 *
 * WooCommerce のクラシック（ショートコード）マークアップが対象。
 * ブロック版はテーマのテンプレート上書きが効かないため使っていない。
 */

:root {
  --astra-line: rgba(255, 255, 255, 0.15);
  --astra-line-strong: rgba(255, 255, 255, 0.3);
  --astra-cyan: #4ec3e1;
  --astra-field-bg: rgba(255, 255, 255, 0.04);
}

/* --- 全体の器 ---------------------------------------------------------- */

.woocommerce-cart .astra-wc-content,
.woocommerce-checkout .astra-wc-content,
.woocommerce-account .astra-wc-content {
  max-width: 1200px;
  margin-inline: auto;
  padding: 4rem 2rem 8rem;
  color: #fff;
  font-family: var(--astra-notosansjp), sans-serif;
  /* 安全策: これまで何度か数px単位の横はみ出しが再発したため（明細テーブル・
   * クーポン欄など要因はその都度潰しているが）、最後の保険として横スクロール
   * 自体を封じる。中の要素はどれも100%幅を前提にしているので、正当な内容が
   * 隠れる心配はない。 */
  overflow-x: hidden;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .astra-wc-content > h1,
.woocommerce-checkout .astra-wc-content > h1 {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-thin);
  font-size: 64px;
  text-align: center;
  color: var(--astra-gray);
  margin: 0 0 4rem;
}

@media screen and (max-width: 768px) {
  .woocommerce-cart .entry-title,
  .woocommerce-checkout .entry-title,
  .woocommerce-account .entry-title {
    font-size: 36px;
    margin-bottom: 2.4rem;
  }
}

/* --- 表組み（カート明細・注文内容） ------------------------------------ */

.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  color: #fff;
  background: transparent;
}

.woocommerce table.shop_table th {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--astra-gray);
  text-align: left;
  padding: 1.2rem 1rem;
  border-bottom: 1px solid var(--astra-line-strong);
}

/* カートの表の見出し（商品・金額・数量・小計）だけ太字にする。
 * 12px の大文字＋広い字間で medium(500) だと、下に並ぶ値より弱く見えていた。
 * カート合計や注文明細の見出しは「小計」「合計」などの行ラベルで役割が違うので
 * 巻き込まない。 */
.woocommerce-cart table.shop_table.cart thead th {
  font-weight: var(--astra-font-weight-bold);
}

.woocommerce table.shop_table td {
  padding: 2rem 1rem;
  border-bottom: 1px solid var(--astra-line);
  vertical-align: middle;
  background: transparent;
}

.woocommerce table.shop_table .product-thumbnail img {
  width: 90px;
  height: auto;
  border-radius: 2px;
}

/* カートの表の並べ方（PC幅のみ・列の順番は変えない）。
 *
 * ×・画像・商品名・金額・数量・小計をひとかたまりと見て、そのかたまりを
 * 画面の中央に置く。見出しは値の真上に中央で載せる。
 *
 * table-layout: fixed にすると width がそのまま列幅になる（既定の auto だと
 * width は目安にしかならず、余りが各列にばらばらに配られる）。
 *
 * 表の幅は 100% ではなく列の合計（108rem）で固定する。100% のままだと
 * 余りが列に配られてしまい、かたまりを中央に寄せられない。
 * 画面が狭くて 108rem 入らないときは max-width で縮める（横スクロールは出さない）。
 *
 * 対象はカートのみ。決済画面の注文明細は列構成が違うので巻き込まない。
 * 768px 以下は astra-woo.css がセルを縦積みにするため当てない。 */
@media screen and (min-width: 769px) {
  .woocommerce-cart table.shop_table.cart {
    table-layout: fixed;
    /* 4 + 11 + 30 + 27 + 18 + 18 = 108rem */
    width: 108rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 「カートの合計」も表と同じ帯に収める。表だけ中央に寄せると、
   * 合計ブロックの右端だけが表の右端から 40px はみ出して見える。 */
  .woocommerce-cart .cart-collaterals {
    width: 108rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* × は画像のすぐ隣に置く。列幅は × の字とセルの左右の余白ぶんだけにして、
   * 画像との間は他の列と同じ 2rem（左右 1rem ずつ）にとどめる。
   * 広く取ると × だけ離れて、どの商品の削除なのか結び付きにくい。 */
  .woocommerce-cart table.shop_table th.product-remove,
  .woocommerce-cart table.shop_table td.product-remove {
    width: 4rem;
    text-align: center;
  }

  /* 画像の 90px にセルの左右の余白（1rem ずつ）を足す。fixed では列幅に余白も
   * 含まれるので、90px にすると中身が 70px になり画像が縮む。 */
  .woocommerce-cart table.shop_table th.product-thumbnail,
  .woocommerce-cart table.shop_table td.product-thumbnail {
    width: calc(90px + 2rem);
  }

  /* 商品名は長い名前でも折り返さずに済むよう広く取る（数量・小計の 1.5 倍）。 */
  .woocommerce-cart table.shop_table th.product-name,
  .woocommerce-cart table.shop_table td.product-name {
    width: 30rem;
  }

  /* 金額も商品名と同じく 1.5 倍。 */
  .woocommerce-cart table.shop_table th.product-price,
  .woocommerce-cart table.shop_table td.product-price {
    width: 27rem;
  }

  /* 数量・小計は同じ幅で等間隔に。見出しも値も中央に置いて縦で揃える。 */
  .woocommerce-cart table.shop_table th.product-quantity,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table th.product-subtotal,
  .woocommerce-cart table.shop_table td.product-subtotal {
    width: 18rem;
  }

  .woocommerce-cart table.shop_table th.product-price,
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table th.product-quantity,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table th.product-subtotal,
  .woocommerce-cart table.shop_table td.product-subtotal {
    text-align: center;
  }

  /* 「カートを更新」はクーポン欄と同じ行の右端に置く。td.actions を
   * table-cell に戻したことで WooCommerce 本体の float がそのまま効く。 */
}

.woocommerce table.shop_table .product-name a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.woocommerce table.shop_table .product-name a:hover {
  color: var(--astra-cyan);
}

.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .amount {
  font-family: var(--astra-source-code-pro), monospace;
  color: #fff;
}

.woocommerce table.shop_table td.product-remove a.remove {
  color: var(--astra-gray) !important;
  font-size: 20px;
  line-height: 1;
  background: transparent !important;
}

.woocommerce table.shop_table td.product-remove a.remove:hover {
  color: var(--astra-cyan) !important;
}

/* 数量入力。
 * Dawn は .quantity::before で背景を塗るため、入力欄自体は透過にして
 * 枠いっぱいに広げる。以前は入力が枠の半分ほどしか伸びておらず、
 * 背景もまっ黒の塗りつぶしになっていた。 */
/* 枠の形は商品ページと同じ（丸いピル）。同じ操作なのに画面ごとに見た目が
 * 違うと迷うため。−/＋ ボタンは inc/woocommerce.php が入れている。 */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  width: 14.2rem;
  height: 48px;
  max-width: 100%;
  border: 1px solid var(--astra-line-strong);
  border-radius: 9999px;
  overflow: hidden;
}

/* 数量を変えられない商品（スターターキットは1個まで）は、WooCommerce が
 * 入力欄ではなく数字だけを出す。その数字を他の文字と揃える。 */
.woocommerce td.product-quantity {
  color: #CBCBCB;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 16px;
}

.woocommerce .quantity::before {
  background-color: rgba(255, 255, 255, 0.06);
}

.woocommerce .quantity input.qty {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0.8rem;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: center;
  font-family: var(--astra-source-code-pro), monospace;
  appearance: textfield;
  -moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* クーポン欄を開くとチェックアウトのグリッドが 67px まで潰れていた。
 * astra-woo.css が .woocommerce の clearfix 擬似要素を無効にしているため
 * クーポン周りのフロートが内包されず、後続のグリッドが押し潰されていた。
 * グリッド側でフロートを解除する。 */
.woocommerce-checkout .woocommerce > form.checkout {
  clear: both;
}

/* --- カートの下部（クーポン・更新・合計） ------------------------------ */

.woocommerce .cart .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 2.4rem;
}

/* クーポン行の下の横線は引かない。
 * `.woocommerce table.shop_table td` の border-bottom が最後の行にも付くが、
 * 表はここで終わりで、下に続く「カートの合計」は別のブロック。線があると
 * 合計まで表の続きに見える。商品どうしの区切り線はそのまま残す。 */
.woocommerce-cart table.shop_table.cart td.actions {
  border-bottom: 0;
}

/* PC幅ではこのセルを table-cell のままにする。
 *
 * クーポン行は <td class="actions" colspan="6"> の1セル。ここに display:flex を
 * 当てると要素がテーブルセルでなくなり、ブラウザは colspan を無視して
 * 「1列ぶんの匿名セル」で包む。するとクーポン欄の最小幅（約400px）が
 * そのまま1列目＝× の列幅になり、table-layout:fixed と width:4rem の指定を
 * 押しのけて × が商品画像から400px近く離れていた。
 *
 * table-cell に戻すと colspan が効き、× の列は指定どおり 4rem に戻る。
 * 中身は WooCommerce 本体の float（クーポンが左・更新ボタンが右）で並ぶので
 * 見た目は変わらない。むしろ幅が足りず下へ折り返していた更新ボタンが
 * 本来の右端に収まる。
 *
 * 768px 以下は当てない。セルが縦積みになり列そのものが無くなるため、
 * flex のままでよい。 */
@media screen and (min-width: 769px) {
  .woocommerce-cart table.shop_table.cart td.actions {
    display: table-cell;
  }
}

/* クーポン欄。入力とボタンを同じ高さの丸いピルにして、商品ページの
 * 数量やバリエーション選択と同じ形に揃える。 */
.woocommerce .cart .actions .coupon {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1 1 auto;
  max-width: 46rem;
}

/* WooCommerce 本体が
 * `.woocommerce-cart table.cart td.actions .coupon .input-text`（クラス4つ・要素2つ）
 * で float と細かい padding を当ててくる。こちらも同じ形で書いて上書きする。
 * 文字は中央に置く（入力欄というより、押せる場所として見せたいため）。 */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
  float: none;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 2.4rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder,
.woocommerce-checkout table.cart td.actions .coupon .input-text::placeholder {
  color: #8C8C8C;
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.woocommerce-checkout table.cart td.actions .coupon .input-text:focus {
  outline: none;
  border-color: #4EC3E1;
}

/* 入力中は「クーポンコード」の案内を消す。入力欄は text-align:center で
 * 文字がプレースホルダと同じ位置から出るため、残っていると重なって読みづらい。 */
.woocommerce-cart table.cart td.actions .coupon .input-text:focus::placeholder,
.woocommerce-checkout table.cart td.actions .coupon .input-text:focus::placeholder {
  color: transparent;
}

/* ボタンの色と丸みは astra-woo.css の副次ボタンの指定が当たる。
 * ここでは入力欄と高さを合わせ、文字を折り返さないようにするだけ。 */
.woocommerce .cart .actions .coupon button.button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
}

/* クーポン欄がSPで横に溢れる問題。
 * 入力欄（flex:1、両側2.4rem paddingで最低幅を持つ）とボタン
 * （flex-shrink:0＋white-space:nowrapで縮まない）を1行に並べたままだと、
 * 幅の狭い画面では2つの最低幅の合計がコンテナ幅を超える。
 * 縦積みにして、それぞれ横いっぱいに広げる。 */
@media screen and (max-width: 480px) {
  .woocommerce .cart .actions .coupon {
    flex-wrap: wrap;
  }

  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce-checkout table.cart td.actions .coupon .input-text,
  .woocommerce .cart .actions .coupon button.button {
    flex: 1 1 100%;
  }
}

/* 合計ブロックは商品テーブルの下の横線のすぐ下に置く。
 *
 * 空きは2つあった。ここの margin-top（4rem）と、WooCommerce の
 * table.shop_table が持つ margin-bottom（24px）。両方を 0 にしないと
 * 線との間が空いたままになるので、テーブル側もカートに限って打ち消す。 */
.woocommerce-cart .woocommerce-cart-form table.shop_table {
  margin-bottom: 0;
}

.woocommerce .cart_totals {
  margin-top: 0;
  margin-left: auto;
  max-width: 46rem;
}

.woocommerce .cart_totals h2 {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--astra-gray);
  margin-bottom: 1.6rem;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: 1.4rem 0;
  text-transform: none;
  font-size: 14px;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-bottom: 0;
  border-top: 1px solid var(--astra-line-strong);
  font-size: 18px;
  color: #fff;
}

/* 「リキッド合計」の行と、上限超過時の見せ方は
 * プラグイン astra-purchase-limit-ml が自分の CSS で持つ（マークアップも
 * あちらが出すため。assets/astra-purchase-limit-ml.css）。 */

.woocommerce .wc-proceed-to-checkout {
  padding-top: 2rem;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
}

/* 「お届け先は日本国内のみ」の注記（inc/woocommerce.php の
 * astra_cart_domestic_only_note）。
 *
 * ボタンの直上に来る。押せない注記なので、枠も色も持たせない
 * ——すぐ上に astra-shipping-nicotine の薄い枠、すぐ下にシアンの丸枠ボタンが
 * 並ぶ場所で、3枚目の面を作ると押せるものが増えたように見える。 */
.woocommerce .wc-proceed-to-checkout .astra-cart-domestic-only {
  margin: 0 0 1.2rem;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--astra-gray);
  text-align: left;
}

/* 空のカート */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
  text-align: center;
  font-size: 20px;
  color: var(--astra-gray);
  padding-block: 6rem 2rem;
}

.woocommerce .return-to-shop {
  text-align: center;
  padding-bottom: 8rem;
}

/* --- チェックアウト ---------------------------------------------------- */

/* 「クーポンをお持ちですか？」を開いたときの入力欄。
 *
 * 素の WooCommerce は入力欄とボタンをそれぞれ幅47%の <p> に入れ、左右へ float
 * させる。テーマ側は float を前提にしていないので、
 *   ・囲みの <form>（WooCommerce 既定の薄紫の枠）が float を含めず高さ42px
 *     ＝padding だけに潰れ、中身が枠から溢れる
 *   ・入力欄（高さ48.5px）とボタン（高さ45px）の高さが揃わない
 *   ・ボタンが右カラムの左端に付き、入力欄との間が半端に空く
 * という3点が重なって崩れて見えていた（実機で確認済み）。
 *
 * float をやめて flex の1行に組み直し、枠と丸みも他の入力欄に合わせる。 */
.woocommerce-checkout form.checkout_coupon {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 1.6rem 0 3rem;
  padding: 1.6rem;
  border: 1px solid var(--astra-line);
  border-radius: 8px;
}

.woocommerce-checkout form.checkout_coupon .form-row {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
  flex: 0 0 auto;
}

/* 入力欄とボタンの高さを揃える。ボタンの色と丸みは astra-woo.css の指定に任せる。 */
.woocommerce-checkout form.checkout_coupon .form-row input.input-text {
  height: 48px;
  padding: 0 1.6rem;
}

.woocommerce-checkout form.checkout_coupon .form-row button.button {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* float を清算するためのテンプレート側の <div class="clear">。
 * flex にすると幅0の項目として gap のぶんだけ右に空きを作るので消す。 */
.woocommerce-checkout form.checkout_coupon .clear {
  display: none;
}

/* 幅が狭いと入力欄の最小幅とボタン（縮まない）の合計が収まらない。縦積みにする。 */
@media screen and (max-width: 480px) {
  .woocommerce-checkout form.checkout_coupon {
    flex-wrap: wrap;
  }

  .woocommerce-checkout form.checkout_coupon .form-row-first,
  .woocommerce-checkout form.checkout_coupon .form-row-last {
    flex: 1 1 100%;
  }

  .woocommerce-checkout form.checkout_coupon .form-row button.button {
    width: 100%;
  }
}

.woocommerce-checkout .woocommerce > form.checkout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  /* 2行目に余りを逃がす（下の #order_review の指定を参照）。 */
  grid-template-rows: auto 1fr;
  /* 縦の間隔は 0。「ご注文」の見出しと注文明細は別の行なので、gap を縦にも
   * 効かせると見出しの下だけ広く空き、左の「請求先の詳細」と揃わない。
   * 見出しの下の間隔は見出し自身の margin-bottom / padding-bottom が持つ。 */
  column-gap: 4rem;
  row-gap: 0;
  align-items: start;
}

/* PC/SP共通の余白バグの本体。
 * form.checkout の直接の子は customer_details / order_review_heading /
 * order_review の3つだけではなく、WooCommerceが出す
 * <wc-order-attribution-inputs>（隠しinputしか持たない空のカスタム要素）が
 * customer_details の直後・order_review_heading の直前にもう1個ある
 * （実際のHTMLで確認済み）。display:grid のグリッド子要素は display の
 * 既定値（未知のカスタム要素は inline）では auto-placement 対象から外れず、
 * 列指定の無いこの要素が auto-placement で customer_details と同じ行の
 * 2列目（order_review_heading の本来の位置）に入ってしまい、
 * customer_details の高さぶんだけ order_review 側に空白ができる
 * （PCで発生。実機で確認済み）。
 * 中身は隠しinputだけで見た目は不要なので display:none にしてグリッドの
 * 配置対象から外す。 */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
  display: none;
}

/* SPで「ご注文」見出しと明細表の間に大きな空白ができる問題（上と同根）。
 * 900px以下でも display:grid のまま grid-column:1 を当てるだけだと、
 * 上のカスタム要素を非表示にしてもなお auto-placement の行の数え方に
 * 依存してしまう。グリッドのまま列だけ潰すのではなく、この幅からは
 * display:block に戻して普通の縦積みにする（auto-placementの余地自体を
 * 無くす）。 */
@media screen and (max-width: 900px) {
  .woocommerce-checkout .woocommerce > form.checkout {
    display: block;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading {
    margin-bottom: 3rem;
  }
}

/* 行も明示する。列だけ決めて行を自動配置に任せると、
 *   1行目: #customer_details（左） / #order_review_heading（右）
 *   2行目: #order_review（右）
 * となり、1行目の高さが左の入力フォーム全体の高さになるため、
 * 「ご注文」の見出しと注文明細の間に画面1つぶんの空白ができていた。
 *
 * 左の入力フォームを2行にまたがらせ、右は見出し=1行目・明細=2行目に固定する。
 * 2行目を 1fr にするのは、左が右より高いときに余りを2行目へ逃がすため
 * （1行目に配分されると見出しの下がまた空く）。 */
.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / 3;
}

.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
}

.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--astra-gray);
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--astra-line);
}

/* フォーム項目（Dawn の .field に寄せる） */
.woocommerce form .form-row {
  padding: 0;
  margin-bottom: 1.6rem;
}

.woocommerce form .form-row label {
  display: block;
  font-size: 14px;
  color: var(--astra-gray);
  margin-bottom: 0.6rem;
}

.woocommerce form .form-row .required {
  color: var(--astra-cyan);
  text-decoration: none;
}

/* textarea は WooCommerce 側が .woocommerce form .form-row .input-text（0,3,0）で
 * 白背景を当ててくるため、こちらも .input-text を含めて specificity を並べる。
 * 含めないと注文メモだけ白地に黒文字のまま残る。 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 1.2rem;
  background: var(--astra-field-bg);
  border: 1px solid var(--astra-line-strong);
  /* ボタンはピルだが、入力欄は文字が長いので控えめな丸みにする。 */
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--astra-cyan);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* select2（国・都道府県）を暗い配色へ */
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff;
  line-height: 1.4;
  padding: 0;
}

.woocommerce .select2-dropdown {
  background: #111;
  border-color: var(--astra-line-strong);
  color: #fff;
}

.woocommerce .select2-container .select2-results__option--highlighted[aria-selected] {
  background: var(--astra-cyan);
  color: #000;
}

/* 注文内容 */
.woocommerce-checkout #order_review {
  border: 1px solid var(--astra-line);
  padding: 2.4rem;
}

.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
  padding: 1.2rem 0;
}

/* 支払い方法 */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin-top: 2rem;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--astra-line);
  padding: 0 0 1.6rem;
  margin: 0 0 1.6rem;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods label {
  color: #fff;
  font-size: 15px;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--astra-field-bg);
  color: var(--astra-gray);
  font-size: 14px;
  border-radius: 0;
  margin-top: 0.8rem;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--astra-field-bg);
}

.woocommerce-checkout #payment .place-order {
  padding: 0;
}

.woocommerce-checkout #place_order {
  width: 100%;
}

/* 注文するボタンの直後に出すクーポン欄（inc/woocommerce.php で
   woocommerce_review_order_after_submit に付け替えている）。
   ボタンにくっつくと押し間違いを誘うため間隔を空ける。 */
.woocommerce-checkout #payment .woocommerce-form-coupon-toggle {
  margin-top: 1.6rem;
}

/* 適用済みクーポンの明示（inc/woocommerce.php の astra_checkout_applied_coupons）。
 * 入力欄の直前に置く。合計欄の「クーポン: ...」と違い、ここは入力欄と対で
 * 見えることに意味があるので、シアンの枠で「効いている」ことを分かる形にする。 */
.woocommerce-checkout #payment .astra-applied-coupons {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.woocommerce-checkout #payment .astra-applied-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  margin: 0;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--astra-cyan);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* コードは入力したものと突き合わせるので等幅。長いコードでも枠を割らないよう
 * 折り返させる（min-width:0 が無いと flex 項目は縮まない）。 */
.woocommerce-checkout #payment .astra-applied-coupon__code {
  font-family: var(--astra-source-code-pro), monospace;
  min-width: 0;
  overflow-wrap: anywhere;
}

.woocommerce-checkout #payment .astra-applied-coupon__amount {
  white-space: nowrap;
  color: var(--astra-cyan);
  font-weight: var(--astra-font-weight-medium);
}

/* 「[削除]」は WooCommerce が金額の後ろに出すリンク。押し間違いを避けるため
 * 金額より弱く、離して置く。 */
.woocommerce-checkout #payment .astra-applied-coupon__amount .woocommerce-remove-coupon {
  margin-left: 1rem;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 12px;
  font-weight: var(--astra-font-weight-thin);
  color: var(--astra-gray);
  text-decoration: underline;
}

/* --- 注文完了（サンキュー） -------------------------------------------- */

.woocommerce .woocommerce-thankyou-order-received {
  text-align: center;
  font-size: 22px;
  color: #fff;
  padding-block: 2rem 3rem;
}

.woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  margin: 0 0 4rem;
  padding: 2rem 0;
  border-block: 1px solid var(--astra-line);
}

.woocommerce ul.woocommerce-order-overview li {
  border: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--astra-gray);
  text-align: center;
}

.woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.6rem;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
}

/* --- マイアカウント ---------------------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  /* 左のメニューは中身に合わせて広げる。22rem 固定では「お支払い方法」など
   * 長い項目が入りきらず、折り返すか見切れていた。max-content なら
   * 一番長い項目がそのまま1行で収まる幅になる。 */
  grid-template-columns: max-content 1fr;
  gap: 4rem;
  align-items: start;
}

@media screen and (max-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ログインフォームは1カラムで中央に置く */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 48rem;
  margin-inline: auto;
}

/* 区切り線は列の幅いっぱいに引く。列は max-content なので、幅は一番長い項目
 * （「アカウント詳細」）ぴったりになり、線もその右端まで伸びる。
 * nav / ul / li の幅を明示するのは、どれかが中身に合わせて縮むと線だけ
 * 短くなり、項目名が線からはみ出して見えるため。 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-account .woocommerce-MyAccount-navigation li {
  width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--astra-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  display: block;
  border-bottom: 1px solid var(--astra-line);
}

/* 「お支払い方法」などの長い項目も折り返さず1行で出す。
 * 幅は左カラム側（max-content）が中身に合わせるので、省略記号は使わない。
 * 省略すると項目名が読めなくなるため。
 *
 * 左右の余白は同じ値にする。列は max-content で幅がこの余白ぶんだけ文字より
 * 広くなるので、左右を揃えると区切り線が文字の両側へ均等にはみ出す。
 * 片側だけ 0 にすると線が左に寄って見える。 */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 1.2rem 0.4rem;
  color: var(--astra-gray);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--astra-cyan);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 1px solid var(--astra-line);
  border-radius: 16px;
  padding: 3.2rem;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register button {
  width: 100%;
  margin-top: 1.6rem;
  height: 52px;
}

/* --- メール配信の同意 ------------------------------------------------------
 * 会員登録とアカウント設定の両方で同じ見た目にする。 */
.astra-newsletter-row {
  margin-top: 1.6rem;
}

.astra-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: #CBCBCB;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* WooCommerce は checkbox を form-row の外に押し出す指定を持つので、戻す。 */
.astra-checkbox input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #4EC3E1;
}

/* メール登録欄の下の注記。#6B6B6B は黒地に対して 3:1 を切っていて、
 * 12px と合わさってほぼ読めなかった。本文の下限に合わせて明るくする。 */
.astra-newsletter-note {
  display: block;
  margin-top: 6px;
  color: #A8A8A8;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
}

.astra-account-fieldset {
  margin-top: 2.4rem;
  padding: 2rem 2.4rem;
  border: 1px solid var(--astra-line);
  border-radius: 16px;
}

.astra-account-fieldset legend {
  padding: 0 0.8rem;
  color: var(--astra-gray);
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* --- 購入完了画面のアカウント案内 -----------------------------------------
 * 買った直後は会員化の動機がいちばん高い。注文内容の下に、目に入る形で置く。 */
.astra-account-cta {
  margin-top: 4rem;
  padding: 3.2rem;
  border: 1px solid var(--astra-line);
  border-radius: 16px;
}

.astra-account-cta h2 {
  margin: 0 0 1.2rem;
  color: #fff;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 18px;
  letter-spacing: 0.04em;
}

.astra-account-cta p {
  margin: 0 0 1.6rem;
  color: #CBCBCB;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
  line-height: 1.8;
}

.astra-account-cta .astra-newsletter-note {
  margin-top: 1.2rem;
}

.astra-account-cta__form .button {
  width: 100%;
  max-width: 36rem;
  height: 52px;
  margin-top: 1.6rem;
}

/* --- カート：SP版のレイアウト（768px以下） ---------------------------------
 *
 * astra-woo.css は shop_table_responsive を table/tbody/tr/td すべて display:block
 * にして、テーブルレイアウトを完全に無効化している（長い商品名が分割不可能な
 * トークンとして扱われ、表そのものがビューポートより広くなる事故を止めるため）。
 * その上に、行ごとにグリッドを敷き直して1件を「3列2段」に組む。
 *
 *   1段目： 画像 | 商品名          | 小計
 *   2段目： 金額 | 数量           | ×
 *
 * 列は 72px / minmax(0,1fr) / auto。1fr ではなく minmax(0,1fr) なのが肝で、
 * これがないと商品名の最小幅が列を押し広げ、上記の横溢れがぶり返す。
 *
 * 商品名は align-self:center で画像に対して縦中央に置く。1行でも2行でも
 * 画像の中心と揃う。
 *
 * 文字サイズは clamp(10px, 3vw, 14px)。ストア最長の商品名
 * 「【Starter Kit】CHERRY SPICE COLA＋DEVICE」を 320px〜430px のどの幅でも
 * 2行に収めるための値（Chromium 実測。固定 12px だと 360px 以下で3行になる）。 */
@media screen and (max-width: 768px) {
  /* ---- 見出し（商品 / 小計）---- */
  .woocommerce-cart table.shop_table.cart thead { display: block; }
  .woocommerce-cart table.shop_table.cart thead tr {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap: 1.2rem;
    align-items: end;
    border-bottom: 1px solid var(--astra-line-strong);
    padding-bottom: 1.2rem;
  }
  .woocommerce-cart table.shop_table.cart thead th {
    display: none;
    padding: 0;
    border: 0;
  }
  .woocommerce-cart table.shop_table.cart thead th.product-name {
    display: block; grid-column: 1 / 3; text-align: left;
  }
  .woocommerce-cart table.shop_table.cart thead th.product-subtotal {
    display: block; grid-column: 3; text-align: right;
  }

  /* ---- 商品1件 = 3列2段のグリッド ---- */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap: 1.2rem;
    row-gap: 1.2rem;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 0;
  }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item:not(.component_table_item)
    ~ tr.cart_item:not(.component_table_item) {
    border-top: 1px solid var(--astra-line);
  }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td {
    display: block;
    padding: 0;
    border: 0;
    max-width: none;
  }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td::before { content: none; }

  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-thumbnail { grid-area: 1 / 1; line-height: 0; }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-name      { grid-area: 1 / 2; align-self: center; }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-subtotal  { grid-area: 1 / 3; text-align: right !important; white-space: nowrap; }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-price     { grid-area: 2 / 1; white-space: nowrap; }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-quantity  { grid-area: 2 / 2; justify-self: center; }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-remove    { grid-area: 2 / 3; justify-self: start; }

  /* 画像を block にする。inline のままだとベースライン下の隙間ぶん
   * セルが 5px 高くなり、縦中央に揃えた商品名が同じだけ下にずれる。 */
  .woocommerce-cart table.shop_table.cart .product-thumbnail img {
    width: 72px;
    display: block;
    margin-bottom: 0;
  }

  .woocommerce-cart table.shop_table.cart tbody tr.cart_item > td.product-name a {
    font-size: clamp(10px, 3vw, 14px);
    line-height: 1.4;
  }

  /* ---- クーポン行 ----
   * 1段目に「クーポンコード」と「クーポンを適用」、2段目に「カートを更新」。
   * 入力欄は残り幅を全部取るので、PC版と同じく適用ボタンより広くなる。
   *
   * .coupon を flex-wrap: wrap にしてあるのは、未入力／存在しないコードのときに
   * WooCommerce が入れる <p class="coupon-error-notice">（flex-basis: 100%）を
   * 入力欄の下の段に落とすため。エラーはクーポン行と「カートを更新」の間に出て、
   * 更新ボタンをそのぶん下へ押す。 */
  .woocommerce-cart table.shop_table.cart td.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    padding-top: 2rem;
  }
  .woocommerce-cart table.shop_table.cart td.actions .coupon {
    display: flex;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    flex-wrap: wrap;
    align-content: flex-start;
    /* gap は使わず margin で空ける。gap だとエラー文が増えたときに
     * 空きの数が変わり、入力欄の幅が 8px 動いてしまう。 */
    gap: 0;
  }

  /* 読み上げ用のラベルを flex アイテムから外す。display:block が当たっていて
   * 幅 1px の項目として並びに残り、そのぶん入力欄が狭くなっていた。 */
  .woocommerce-cart table.shop_table.cart td.actions .coupon > label.screen-reader-text {
    position: absolute;
  }

  .woocommerce-cart table.shop_table.cart td.actions .coupon .coupon-error-notice {
    flex-basis: 100%;
    margin-top: 0.8rem;
  }
  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce-cart table.shop_table.cart td.actions .coupon button.button,
  .woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] {
    height: 40px;
    padding: 0 1rem;
    /* ★ここだけ本文の下限（14px）まで上げていない。狭い画面でクーポン欄と
     * ボタン2つを1行に並べる場所で、nowrap のまま字を大きくすると横に溢れる。
     * 11px → 13px に留める。 */
    font-size: 13px;
    white-space: nowrap;
  }
  /* flex-basis を 0 にして、適用ボタンを置いた残りを全部受け取らせる。
   * auto（＝中身の幅）のままだと入力欄が折り返しの判定を押し上げ、
   * 適用ボタンが下の段に落ちる。高さと丸みは変えない。 */
  .woocommerce-cart table.cart td.actions .coupon .input-text {
    flex: 1 1 0%;
    min-width: 0;
    margin-right: 0.8rem;
  }
  .woocommerce-cart table.shop_table.cart td.actions .coupon button.button,
  .woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  /* ---- カートの合計：見出しと値を左右に並べる ---- */
  .woocommerce-cart .cart_totals table.shop_table tbody tr {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.6rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--astra-line);
  }
  .woocommerce-cart .cart_totals table.shop_table tbody tr:last-child {
    border-bottom: 0;
  }
  .woocommerce-cart .cart_totals table.shop_table tbody th,
  .woocommerce-cart .cart_totals table.shop_table tbody td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left !important;
  }
  .woocommerce-cart .cart_totals table.shop_table tbody th {
    white-space: nowrap;
  }
  .woocommerce-cart .cart_totals table.shop_table tbody td::before { content: none; }
}