/**
 * craftcos-checkout.css ── CRAFT・COS クラシックチェックアウト着せ替え
 * Version: 20261003_v81（司令塔パッチ: カゴの合計欄の 🎟 クーポンの行を、ほかの割引の行と同じ並びに）
 * 【v81 変更点（20261003・司令塔パッチ）】★ファイルの末尾に §40 を足しただけ（ほかの行は1バイトも変えていません）。
 *   ・カゴ（.woocommerce-cart .cart_totals）の tr.cart-discount だけ。お会計（#order_review）には1つも当たらない。
 *   ・行の上下のすき間を 🎀（tr.fee）と同じ 2px に／割引の行のすぐ下に続くときは上の線なし／金額はこいピンク・太字。
 *   ・820px 以下（合計欄がスマホの並びになる幅）: 金額をほかの行と同じ右はしの列に。［削除］は金額の左に小さく（モック 小パッチ2つ v1 の①案B が正）。
 *   ・金額・並び順・［削除］の動き（リンク先）には触っていない＝見た目だけ。
 * (旧)Version: 20261001_v80（指示書AK 検品の直し①: お会計のクーポン欄を 390px でも1行に）
 * 【v80 変更点（20261001・指示書AK 検品の直し）】§39 の中だけ（ほかの行は1バイトも変えていません）。
 *   ・入力（p.form-row-first）を flex:1 1 auto; min-width:0 に（v79 の flex:1 1 150px の基準をやめた）。
 *   ・480px 以下: 入力とボタンの p の左右の余白 3px → 0／入力の左右の内側の余白 → 10px（390px でも「クーポンコード」が欠けずに1行）。
 *   ・折り返すのは 381px 以下だけ（入力が1段目いっぱい・ボタンが下の段・右寄せ・高さ 44px）。382px 以上は1行。
 *   ・本番の写しで測った結果: 320／375px＝2段・枠の中、382／390／414／480px＝1行・枠の中、1280px＝1行・v79 と同じ。
 * (旧)Version: 20261001_v79（指示書AK AK-4(c): お会計（スマホ）のクーポンの「適用」ボタンが枠からはみ出すのを直す／cc-sc-warn の行を消す）
 * 【v79 変更点（20261001・指示書AK）】★ファイルの末尾に §39 を足し、§31 の cc-sc-warn の1ルールを消しただけ（ほかの行は1バイトも変えていません）。
 *   ・§39: .cc-coupon-wrap（craftcos.php v12 の JS が作る）の中で、入力（p.form-row-first）＝ flex:1 1 150px; min-width:0、
 *     ボタン（p.form-row-last の button）＝ flex:0 0 auto; white-space:nowrap; padding:0 14px; 幅は文字ぶん。
 *     480px 以下で入りきらないとき（390px など）は折り返す＝ボタンが下の行・右寄せ（margin-left:auto）。#order_review の枠の中に収まる。
 *     （今まで: 入力の min-width が 0 でなく、ボタンが padding 16px のまま縮まない → 390px で枠の右に約11px はみ出していた）
 *   ・§31 ②（tr.cc-sc-note.cc-sc-warn を出すルール）を消した: samecolor-discount v7 で同色まとめ割引とクーポンが併用OK になり、
 *     「クーポン利用中は同色まとめ割引は適用されません」の行（cc-sc-warn）が無くなったため（コメントは残した）。
 * (旧)Version: 20261001_v78（指示書AJ AJ-4(d): カゴのセミオーダーの行のピンクの札／セミオーダー料の箱）
 * 【v78 変更点（20261001・指示書AJ）】★ファイルの末尾に §38 を足しただけ（既存の行は1バイトも変えていません）。
 *   ・.cc-grp-note--semi（craftcos.php v68 §28-2 がセミオーダーの行の「5cm・厚み2.2mm」の札に付ける）＝ #FFEAF2／#b8446a。
 *   ・.cc-semi-feebox（同じく §28-2 が作る・サムネ無し）＝ 背景 #FFF7FA・点線 #F3C9D9・角丸 12px・padding 7px 8px 7px 10px。
 *     2行目は 9.5px・letter-spacing -.035em・1行（352px 以下だけ折り返し可）。スマホ（td.cc-bo-slot）・PC（.cc-bo-pc）とも同じ箱。
 *     加工の箱より上（間は 6px＝加工の箱どうしと同じ）。
 * (旧)Version: 20260927_v77（指示書AH AH-2／AH-4: PC（821px 以上）のカゴをスマホと同じ「商品ごとのカード」に／¥0 の加工の箱を少し薄く）
 * 【v77 変更点（20260927・指示書AH）】★ファイルの末尾に §37 を足しただけ（既存の行は1バイトも変えていません）。
 *   ・AH-2: 821px 以上で、まとめカード（craftcos.php v67 §28-2 の JS が PC でも作る）があるときだけ（:has(tr.cc-grp-head)）
 *     表を解体して「見出し行（写真56px＋商品名）→ 行（サイズ・色｜数量・削除・保存｜金額）→ 加工の箱（全幅）→ まとめ行」のカードに。
 *     820px 以下（§18・§23・§25 のスマホのカード）は1行も変えていない（そこから写して PC 用の値にした）。
 *     ✕ は body.cc-cr-on（cart-row v3 が「削除」を出せたとき）のときだけ隠す。単価の列・表の見出しは出さない。
 *   ・AH-4: ¥0 の加工の箱（.cc-bo-opt.cc-bo-zero）＝背景 #FBFAFC・枠 #ECE6F0・金額 #b5a9c4（PC・スマホ共通）。
 *   ・まとめ行の「（商品＋加工）」（.cc-grp-foot__inc）は PC のカードだけ見せる（スマホは display:none＝今のまま）。
 * (旧)Version: 20260925_v76（指示書AB AB-2: PC のカゴの表を「お買い物カゴの合計」と同じ白いカードに／合計の割引の行どうしの線を消す）
 * 【v76 変更点（20260925・指示書AB AB-2）】★ファイルの末尾に §36 を足しただけ（既存の行は1バイトも変えていません）。
 *   PC（821px 以上）のお買い物カゴだけ。スマホのカゴ（820px 以下のカード型）・お会計ページ・金額は無変更。
 *   ・table.shop_table.cart ＝ 白・--cc-line 1px・角丸18・うすい影・border-collapse separate（合計の箱と同じ）。
 *   ・セルは縦の線なし・行の間だけ細いピンクの線（border-top）・背景は透明（テーマ Hello の灰色の線・しましま・行に触れたら灰色 に勝つ）。
 *     見出しの行は生成り色（線なし）。td.actions（クーポン・更新の行）は上の線なし。
 *   ・合計の箱: まとめ買い割引／同色まとめ割引／その内訳／割引合計 の行が続けて並ぶとき、後ろの行の上の線を消す
 *     （PC の合計の箱は線をセルに持っているので、セルの border-top を 0 に。§30-H の tr の線はスマホ用のまま）。
 *     「商品代金」の下（＝最初の割引の行の上）と「合計」の上の線は残る。
 * (旧)Version: 20260924_v75（司令塔パッチ: PC のカゴで「合計」の下の注記2行に出ていた線を消す）
 * 【v75 変更点（20260924・司令塔パッチ）】★ファイルの末尾に §35 を足しただけ（既存の行は1バイトも変えていません）。
 *   PC（769px〜）で §24 の「tr + tr > td { border-top:1px #F7E7ED !important }」（詳細度 0,3,4）が
 *   §27-③ の「tr.cc-cs-hint-row > td { border-top:0 !important }」（0,3,2）に勝っていた。
 *   → 同じ強さ＋α（html body …）で「※送料は〜」の上の線と、そのすぐ下の「※表示価格は〜」の上の線だけ消す。
 *   送料の要らない買い物（※送料は〜が出ない）の「※表示価格は〜」の上の線は今までどおり（スマホと同じ決まり）。
 * (旧)Version: 20260924_v74
 * 【v74 変更点（20260924・指示書R）】★ファイルの末尾に §34 を足しただけ（既存の行は1バイトも変えていません）。
 *   ・.cc-bo-band--gq（craftcos-options v25 の一体行JSが作る）＝モック v5 のカゴの .ci__box.g（実線・#EAD9E0・#FFFBFC）。
 *     「📦 丸カン 8mm / ゴールド [−] 4 [＋] ¥20 × 4 ＝ ¥80」。−＋は 26px・押せる範囲 44px。更新中（is-busy）は薄く。
 *   ・.cc-bo-ask ＝「丸カンを外しますか？」の確認（購入シートと同じ見た目）。
 * (旧)Version: 20260924_v73（指示書Q ⑦: お会計の配送の ○ と文字のあいだを 8px に）
 * 【v73 変更点（20260924・指示書Q ⑦）】★§30-M の2行だけ（li に gap:8px を足す／label の margin-left 6px → 0）。
 *   空白は「li の gap 10px（§V9-③）＋ label の margin-left 6px（§30-M）」の足し算でした（::before・label の padding は 0）。
 *   それ以外の行は1バイトも変えていません。
 * (旧)Version: 20260922_v72（司令塔パッチ・検品: §33-D の色を変数から直書きへ。読めない文字色を修正）
 * 【v72 変更点（20260922・司令塔パッチ）】★§33-D の色の指定だけ。
 *   ・var(--cc-pink, #B8446A) → #B8446A（このサイトの --cc-pink は #F58BB6 で、
 *     実物ではコントラスト 1.96 の読みにくい色になっていました）
 *   ・選ばれている行の背景 #FBEAF1 → #FCEFF4（コントラスト 4.61 に）
 *   ・--cc-line / --cc-ink も直書きにそろえた（見た目は変わりません）
 *   それ以外の行は1バイトも変えていません。
 * (旧)Version: 20260922_v71（指示書 実機FB第7弾 C / D: 末尾に §33 を追記）
 * 【v71 変更点（20260922・実機FB第7弾）】★末尾に §33 を足しただけ。それより上の行は1バイトも変えていません。
 *   C. 都道府県のプルダウンを開くとページが横にはみ出す（390px → 592px）のを止めた。
 *      隠し select（.select2-hidden-accessible）を 1px に戻し、body直下の .select2-container を auto 幅に。
 *   D. プルダウンの枠を #F0DCE4・角丸12px、選んでいる行をうすいピンク（#FDF0F5 / #FBEAF1）に。
 * (旧)Version: 20260921_v70（司令塔パッチ・ななみちゃん判断: カゴの詰め具合を --cc-d-subgap 3px → 6px）
 * 【v70 変更点（20260921・司令塔パッチ）】★§32-D の【1行だけ】。
 *   --cc-d-subgap: 3px → 6px（小計→🎁 がモックとぴったり同じ詰まり具合になります）。
 *   他の行は1バイトも変えていません。
 * (旧)Version: 20260921_v69（指示書J・実機FB第6弾: B お会計の合計欄を案Aへ／D カゴの小計→🎁 を12pxに／E 都道府県の拡大）
 *   ★v68 からの差分は【2種類だけ】です。
 *     ① 6か所のセレクタ並びに `tr.cc-dsub-row,` を1行ずつ追記（970/1030/1640/3652/3665/3795行）
 *     ② 末尾に §32 を追記
 *     それ以外の行は1バイトも変えていません。
 * (旧)Version: 20260921_v68（司令塔パッチ・指示書I検品: §31 を追記。①小計→🎁 の詰まりすぎ ②クーポン利用中のご案内が消える）
 * (旧)Version: 20260921_v67（指示書I・実機FB第5弾: E 都道府県の拡大／F お会計の内訳と⌄／G 並べかえ／H カゴの線／I･J 余白／L 割引合計の行／M 配送カードの左余白／末尾に §30 を追記しただけ）
 * (旧)Version: 20260921_v66（指示書H・実機FB第4弾: A 請求先の余白／B カードの厚み／C カゴの🎁と内訳／E 都道府県の拡大／末尾に §29 を追記しただけ）
 * (旧)Version: 20260921_v65（指示書G: 実機FB第3弾11点 ①②④⑥⑦⑧⑨／末尾に §28 を追記しただけ）
 * (旧)Version: 20260921_v64（司令塔パッチ・§27-② 配送のカードと注記の間を詰める＝指示書Dに書き漏れていた分／§27-③ カゴの「※送料は〜」の左を「※表示価格は〜」にそろえる）
 * (旧)Version: 20260921_v63（指示書D: お会計とカゴの仕上げ8点 20260921_v1 ①③④⑤）
 * 【v63 変更点（20260921）】末尾に §27 を【追記だけ】。§26 までの既存セレクタは1バイトも編集していません。
 *   ① お会計: 合計カードとクーポンの箱のあいだの区切り線を消して、空きを 32px → 8px に。
 *      1560行付近の元ブロックはそのまま。同じセレクタを §27 にあとから書いて3プロパティだけ打ち消す。
 *   ③ カゴ: 合計の下へ移した「※送料はお会計ページで計算されます🌸」を 12px・#9a8d90 に。
 *      上の線を消して上4px・下0。スマホ（≤768px）は v39/v40 の「html body …」ブロックが
 *      tr に線と padding 19px を !important で当てているので、cc-ship-note-row と同じ作法で同強度の指定を置いた。
 *      ★あわせて「※送料は〜」の【すぐ下に来たときだけ】の「※表示価格はすべて税込です。」の線と空きも外す
 *        （モック v6 ③が正＝2行が1かたまりに見える）。送料の要らない買い物では当たらない＝今までどおり。
 *      ★あわせて「※表示価格はすべて税込です。」の色を、その注記が自分で書いている #9a8d90 にもどす
 *        （カゴのみ。td の色指定 #6B5A60 のほうが強く、実測では色が違っていたため）。
 *   ④ カゴの上のお知らせ（.woocommerce-message / .woocommerce-info）のフェード。
 *      JS（cart-simplify v3）は .cc-cs-notice-hide を付けるだけ。.woocommerce-error には当たらない書き方。
 *   ⑤ 削除の確認ポップに出す「一緒に消えるオプション」（.cc-cr-opt）の見た目。
 *   ★お会計・カゴ以外のページ（商品ページ・マイページ）に当たるセレクタは1つもありません。
 * (旧)Version: 20260920_v62（司令塔パッチ・お会計の合計の上の線が2本）
 * 【v62 変更点（20260920・司令塔パッチ）】§26 の末尾に ⑧ を追記だけ。
 *   合計の上に、すぐ上の行の下線（うすい #F0DCE4）と 合計の上線（ピンク #FBC3D8）が 4px ちがいで2本出ていた。
 *   ⑧で「合計のすぐ上の行」の下線だけ消す（内訳の行は閉じていても兄弟なので、1〜2行はさまる形も見る）。
 *   合計のピンクの線・行の間隔・ほかの行の下線は今までどおり。
 * (旧)Version: 20260920_v61（司令塔パッチ・お会計の 🎁 まとめ買い割引の行が崩れる）
 * 【v61 変更点（20260920・司令塔パッチ）】§26 の末尾に ⑦ を追記だけ。
 *   お会計の注文概要は3列（cc-col-name / qty / total）を flex に組み直していて、その指定が
 *   tr.cart-subtotal / cart-discount / fee / tax-total / tax-rate / order-total を【名指し】している。
 *   qty-discount v9 が足した tr.cc-qd-row / tr.cc-qd-note はその名簿に入っていないので table-row のまま残り、
 *   ラベルと金額が縦に分かれて大きく空き、内訳は1文字ずつ折り返していた（再現ページで確認・実機と同じ）。
 *   ⑦で 🎁 の行を tr.fee と、🎁 の内訳を tr.cc-sc-note と同じ並びにする。既存セレクタは編集していない。
 * (旧)Version: 20260920_v60（司令塔パッチ・カゴの合計欄で 🎁🎀 の金額を右はしに）
 * 【v60 変更点（20260920・司令塔パッチ）】§26 の ② の数値1つ＋1ルール追記、§26 の末尾に ⑥ を追記。
 *   ②: 利用規約の上の間隔は「p.form-row の padding 16」だけでなく「それを包む div.form-row.place-order の padding-top 16」
 *      も Woo標準で残っていて、v59 のままだと約30px（再現ページで実測 38px）。place-order の padding-top を 0 に、
 *      p.form-row の margin-top を 8→0 にして、上の payment_box の margin-bottom 8px だけが間隔になるようにした。
 *   スマホ幅（≤768px）のカゴの合計欄は、小計・合計の td だけ右寄せ（3208行付近）で、fee 行の td は左寄せのまま
 *   ＝「🎀 同色まとめ割引 ⌄ −¥2,000 ［空き］」とラベルの直後に金額が来ていた（実機スクショ④の空白の正体）。
 *   モック v4（正）は 🎁🎀 の金額も 小計・合計と同じ右はし。fee 行と 🎁 行の td を同じ書き方で右寄せにする。
 *   お会計（3列テンプレ）は元から右寄せなので触らない。ほかは v59 と1バイトも変えていない。
 * (旧)Version: 20260920_v59（指示書C: 実機フィードバック7点 20260920_v1 ②④⑤＋③の色）
 * 【v59 変更点（20260920）】末尾に §26 を【追記だけ】。既存のセレクタは1つも編集していません。
   ② お会計の「利用規約」チェックの上の余白（約30px → 約8px）。Woo標準 #payment div.form-row{padding:1em} の
      上下ぶんを 0 にして、margin-top 8px を持たせる（form-row の margin-bottom 14px は触らない）。
   ③ 合計欄の色: 割引（🎀 fee・🎁 cc-qd-row）の金額をピンク #B8446A・太字／合計（order-total）を
      #F58BB6 → こい色 #5F5054（大きさは今のまま）／小計の取り消し線 .cc-sub-list（うすい #DCC8D0・1px・字は #9c8891）。
   ⑤ 同じ加工でまとめた色の2行目以降（tr.cc-grp--cont ＝ craftcos.php v60 が付ける）の上の点線を消す（padding-top 10px → 2px）。
   ★カゴの「⌄」（④）は cart-display v7 の <style id="cc-cd-css"> が出します（このファイルでは何もしていません）。
   ★PC幅（821px以上）のカゴの行・ミニカートは無改修。③の色はカゴ・お会計の【合計欄】なので PC でも同じ色になります。
 * (旧)Version: 20260920_v58（司令塔パッチ・在庫バッジをカラーの【1行目】に合わせる）
 * 【v58 変更点（20260920・司令塔パッチ）】§25 ④ B-1 の2行だけ。
 *   Woo の cart-item-data.php は dd の中身を <p> で包む（<dd><p>黒</p></dd>）。テーマは dd を display:inline に
 *   しているので、inline の中に block の p が入り、dl.variation は「文字1行＋空の1行」の2行ぶんの高さになる（実測 34.5px）。
 *   v57 の align-items:center はその2行ぶんの真ん中にバッジを置く＝カラーの文字より 8〜9px 下にずれる。
 *   → 上そろえ（flex-start）にして、バッジ（高さ22px）を1行目（17.25px）の中心に −2px で合わせる（実測 ±0.4px）。
 *   dd が1行でも2行でも同じ位置に来る。ほかは v57 と1バイトも変えていない。
 * (旧)Version: 20260920_v57（指示書A 20260920_v1／モック v4.4 ＋ 指示書B v6 からの申し送り）
 * 【v57 変更点（20260920）】§25 の ④（指示書Bの当たり判定）だけ【なおし】。他は v56 のまま。
 *   ★なおした理由：Bの現物（stock-limit v6）では 在庫バッジが
 *     td.product-name の【商品名のすぐあと】＝ dl.variation（サイズ／色）より【前】に出ます
 *     （フック woocommerce_after_cart_item_name 22・「あとで買う」20 のあと）。
 *     v56 は「バッジが dl.variation のあと」のつもりで margin-left:auto だけを当てていたので、
 *     そのままだと バッジがカラーの【左】に出てしまいます。order で並べ替えて右はしに寄せます。
 *   ① バッジ：order で「サイズ／色 → バッジ」の順に並べ替え（DOMの順番に左右されない）。
 *      色・背景・大きさは B の <style id="cc-sl-css"> が持つので、A は【置き場所と高さだけ】を !important で。
 *   ② 在庫不足の1行（.cc-sl-rowwarn）が v5/v6 で <p>（商品名の中）→ <span>（小計欄の先頭）に変わったので、
 *      span でも同じに効く書き方に（display:block を当てない・flex の子として並べる）。
 * (旧)Version: 20260920_v56（指示書A: お買い物カゴの見た目と文言 20260920_v1／モック v4.4）
 * 【v56 変更点（20260920）】末尾に §25 を【追記】したのみ。v55 までの既存セレクタは1行も編集していません。
 *  ① まとめカードの中の【数量・削除・保存・金額の行】だけ 74px 字下げ（写真64px＋すき間10px）。
 *     サイズ／色の行と加工の箱は カードの左はしから右はしまで。
 *  ② 加工の箱（.cc-bo-band＝既存の .cc-bo-opt）の枠は 単品・まとめ・実物（丸カン）で完全に同じ。
 *  ③ 丸カンの帯と加工の帯のあいだに点線の仕切りは出さない（同じ器の中に縦に並ぶだけ）。
 *  ④ 指示書B（在庫の見せ方）が置くもの（.cc-sl-badge / tr.cc-sl-over）の当たり判定だけ先に用意。
 *     B未設置でも何も起きません（そのクラスが付いた時だけ効く書き方）。
 *  ★PC幅（821px以上）・お会計・ミニカートのCSSは無改修。
 * (旧)Version: 20260919_v55
 * 【v55 変更点（20260919）】実機FB（ななみちゃん）。§23 の3か所だけ【なおし】。
 *  ① 見出し行（tr.cc-grp-head）の商品名が【右に寄っていた】。
 *     tr.cart_item td には text-align:left !important があるが、見出し行は
 *     tr.cart_item では【ない】ので、その恩恵から漏れてテーマの右寄せを拾っていた。
 *  ② まとめカードの中の行が、出さない写真の列（64px＋すき間）のぶん【右に字下げ】されていた。
 *     → 写真の列だけ 0 にする（cart-row v1 の 64px !important より1段くわしい書き方で勝たせる）。
 *  ③ ②で字下げが無くなったので、在庫不足のお知らせの逃がし（-74px）を
 *     まとめカードの中だけ 0 に戻す。ふつうの行（写真あり）は -74px のまま。
 * (旧)Version: 20260918_v54
 * 【v54 変更点（20260918）】§23 に追記【のみ】。
 *  ① まとめカードの見出し行（tr.cc-grp-head＝写真＋商品名）の見た目を追加。
 *  ② どの行も 写真・商品名は出さない（見出しに1回だけ）／行の余白をそろえる。
 *  ③ お買い物カゴの「その行」に出す 在庫不足のお知らせ（.cc-sl-rowwarn・§24 新設）。
 * (旧)Version: 20260917_v53
 * 【v53 変更点（20260917）】実機FB：v52 は金額を左に 30px ずらして重なりを避けたが、
 *   それだと まとめカードの2つめ以降だけ金額の右端がズレて、列が揃わなくなっていた。
 *   → 横にはずらさず、【縦】で逃がす形に変更。
 *     ・金額の右余白（v52 の 30px）は取り消し ＝ どのカードも金額の右端が同じ位置に揃う
 *     ・そのかわり 2つめ以降の行の「サイズの行」と「数量・金額の行」のすき間を 4px → 10px に広げ、
 *       ✕（行の右上・高さ24px）の【下】に金額が来るようにした。
 *   ★行の高さは 6px だけ増える（60px → 66px）。金額・✕ の大きさは変えていない。
 * (旧)Version: 20260917_v52
 * 【v52 変更点（20260917）】実機FB：カゴのまとめカードで、金額に ✕ ボタンが重なっていた。
 *   まとめカードの2つめ以降の行は 写真と商品名を隠しているので、行の中身が「数量」と「金額」だけになる。
 *   ✕ は行の右上（v51 で top:6px に寄せた）にあるので、低くなった行では金額とちょうど同じ高さに来ていた。
 *   金額の右に ✕ のぶんの場所（24px＋すき間6px＝30px）を空けて、重ならないようにする。
 *   ★金額の文字も ✕ も大きさは変えていない。場所を空けるだけ。
 * (旧)Version: 20260917_v51
 * 【v51 変更点（20260917・司令塔パッチ・実機FB）】§23 に追記【のみ】。
 *  ① まとめカードの2つめ以降の行に「🕒 あとで買う」が残っていた。v50 は .cc-sfl-link を
 *     隠していたが、本物のクラスは .cc-sfl-itemact（中のボタンが .cc-sfl-stash）だった＝一度も当たっていなかった。
 *     正しいクラスで隠し、あわせて行の上下の余白を 10px→6px に詰めた（縦をすっきり）。
 *  ③ 「あとで買う」欄の「カゴに戻す」「削除」が大きすぎたので、44px → 32px に。
 *     文字も 12.5px→12px、左右の余白も詰めた（押せる範囲は確保）。
 * (旧)Version: 20260917_v50
 * 【v50 変更点（20260917・司令塔パッチ・実機FB）】末尾に §23 を追記【のみ】。スマホカート（820px以下）。
 *  ① 同じ商品の色ちがい・サイズちがいを1枚のカードに（craftcos.php v57 §28-2 のJSがクラスを付ける）。
 *     線のきまり：カードの外わく＝ふつうの線、カードの中の仕切り＝点線だけ。
 *  ② 数量の −＋ を 24px に（枠ごと小さく）。v42② の 28px 指定は同じファイルの後ろの 34px 指定に
 *     負けていて効いていなかった（実機は 34px のまま）。末尾に置いて必ず勝つようにした。
 *  ③ 商品の × に下線が出ないように（テーマのリンク装飾の保険）。
 * (旧)Version: 20260823_v49
 * 【v49 変更点（20260823・司令塔パッチ・実機FB）】末尾に §22 を追記【のみ】。
 *  ① ご注文テーブルの縦線は「小計」の行まで（同色まとめ割引・合計の行には出さない）
 *  ② 商品名の下の「単価 ¥◯◯」（.cc-rv-unit・review-order v4 が出力）の見た目
 *  ③ 利用規約チェックの左はじを「支払い情報を保存」チェックとそろえる
 * (旧)【v48 変更点（20260822・司令塔パッチ／A9・C案①）】末尾に §21 を追記【のみ】。
 *   ★お会計（/checkout/）の「ご注文」テーブルだけを整える。
 *     ・数量列／小計列に縦の境界線（#F0DCE4）。thead・tbody・tfoot を貫通。
 *     ・数量列は見出しも数字も中央（横も縦も）。
 *     ・加工行（tr.cc-opt-child）は商品名を字下げ＋左上かぎ線（#DCC9E8）。
 *     ・子を持つ親行（tr.cc-rv-haschild・review-order v3 が付与）は下の横線を消して
 *       親子をひとかたまりに見せる。
 *     ・加工の金額 .cc-rv-opt-amt は薄紫の太字（#8a6bb5）。
 *   ・スコープは #order_review .woocommerce-checkout-review-order-table 限定。
 *     このIDとテーブルclassはお会計にしか無いため、お買い物カゴには一切効かない。
 *   ・CSSルールは1行も削除・変更していない（既存の値は全部そのまま／後勝ちで足すだけ）。
 *   ・§1〜§20（カートA案§18・B案§19・PC一体表示）は無傷。
 * (旧)Version: 20260821_v47
 * 【v47 変更点（20260821・司令塔パッチ／ななみちゃん決定）】§19 にPCブロックを追記。
 *   ★B案・一体カードを【PC幅（821px以上）にも】適用（組み替えは options v13 のJS）。
 *     ・一体行は親行の商品名セル内の .cc-bo-pc に入る（表の列は崩さない）。
 *     ・「小計（商品＋加工）」は親行の小計セルの金額の下（.cc-bo-sum-pc）。
 *     ・組み替えできた子行はPCでも非表示。JSが動かない環境ではA案のまま。
 *   ・既存セレクタの値は1つも変更していない（追記のみ）。
 * (旧)Version: 20260821_v46
 * 【v46 変更点（20260821・司令塔パッチ／ななみちゃん決定）】§19 に1点だけ追記＋1点削除。
 *   ★オプション（加工）行の「×」を出さない。加工を外すときは親カードの×を押す
 *     （＝商品ごと消える・連鎖削除は従来どおり）。本体は craftcos-options.php v12 の
 *     §A8-⑤ が Woo標準の削除リンクごと外している。ここは A案フォールバック（td.product-remove）
 *     の枠が残らないようにする保険。
 *   ・使わなくなった .cc-bo-x（一体行の小さい×）のCSSは削除。
 * (旧)Version: 20260821_v45
 * 【v45 変更点（20260821・司令塔パッチ／A8・B案「一体カード」）】末尾に §19 を追記。
 *   スマホカート（820px以下）で、オプション行を親カードの中の「薄紫の一体行」として
 *   見せる（craftcos-options.php v11 のJSがDOMを組み替える）。
 *   ・クラスは cc-bo- プレフィックスで新設（既存クラスの見た目は1つも変えていない）。
 *   ・既存の cc-opt-child（A案・v41〜v44）のCSSは【そのまま残す】＝JSが動かない環境の
 *     フォールバック表示として機能する（プログレッシブエンハンスメント）。
 *   ・PC幅（821px以上）は従来のまま（一体行の器 td.cc-bo-slot は非表示）。
 *   ・お会計ページ（#order_review）には一切影響しない（.woocommerce-cart スコープ）。
 * (旧)Version: 20260821_v44
 * 【v44 変更点（20260821・司令塔パッチ／実機FB）】v43①（セット行をサムネ下へ引き出す）を
 *   撤回（実機で見て元の位置が良い、のななみちゃん判断）。②③（小計の中央寄せ・注記余白）は残す。
 * 【v43 変更点（20260821・司令塔パッチ／実機FB・スマホカートのオプション行）】
 *   ① 「〇〇とセット」の行をサムネの下・カード左端から全幅で表示（名前列に押し込まれて
 *      不自然に折り返していたのを解消）。
 *   ② 注記（※加工費は…）と小計（¥30）の高さを揃えた（小計を注記に対して中央寄せ）。
 *   ③ 「1」の数字は craftcos-options.php v9 が出さなくなったため、注記の上余白を0に。
 * 【v42 変更点（20260821・司令塔パッチ／実機FB3点・スマホカートのみ）】
 *   ① つなぎ線が親カードに食い込んでいたのを修正（開始位置を親カードの外＝すき間内に）。
 *   ② 数量ステッパーをひと回り小さく（34px→28px・ピル全体と文字も縮小。スマホカート限定）。
 *   ③ オプション行の数量「1」の横に「加工費は1回ぶんだけ」の注記
 *      （文字はCSSでなく craftcos-options.php v8 が出す。ここでは見た目だけ）。
 * (旧)Version: 20260821_v41
 * 【v41 変更点（20260821・司令塔パッチ／A案）】カートの「セット感」。追記のみ・既存行は不変。
 *   オプション行（craftcos-options.php v7 が付ける tr.cart_item.cc-opt-child）を
 *   親カードから【ぶら下がる小さめカード】に：インデント＋ピンクのつなぎ線＋
 *   サムネ44px＋文字小さめ。PC表示は商品名セルのインデント＋└マークだけの控えめ版。
 *   金額・数量・構造は一切変更なし（CSSのみ）。
 * ───────────────────────────────────────────────
 * 【v40 変更点（20260710）】小計の上・合計の上の空白を少し圧縮＋経緯の記録
 *  ・小計の上: 1行目(tr:first-child)の上パディング 19→10px
 *    （テーブル内側の12pxと合わせて実質31px→22px）
 *  ・合計の上: 注記行の下 19→12px ＋ 合計行の上 20→14px
 *    （線を挟んで実質39px→26px）
 *  ・v33〜v39の余白問題の原因と再発時の直し方を「余白問題の記録」として
 *    v40ブロック直前にコメントで整理（数値の調整箇所一覧つき）。
 * ───────────────────────────────────────────────
 * 【v39 変更点（20260710）】モバイル合計テーブルを最強詳細度で完全固定
 *  ・v37/v38の値が実機で部分的にしか効いていなかった（配送thのmarginだけ
 *    反映され、行のpaddingが反映されない）原因は、同じ!importantを持つ
 *    外部CSS（ShopEngine/Elementor系）が読み込み順で後勝ちしていたため。
 *    !important同士は「詳細度→読み込み順」で決まるので、
 *    html body.woocommerce-cart プレフィックスで詳細度を最大級に上げ、
 *    読み込み順に関係なく必ず勝つ統合ブロックを末尾に追加（値はv38と同一）。
 *  ・tr自体の ::before/::after 擬似要素も明示的に無効化
 *    （これまでth/tdの擬似要素しか殺しておらず、行内の余分な高さの
 *      発生源になり得た。今回で全て封鎖）。
 * ───────────────────────────────────────────────
 * 【v38 変更点（20260710）】モバイル合計ボックスにゆとりを戻す
 *  ・v37の余白リセットで行間が均等な14pxだけになり窮屈になったため、
 *    対称性はそのままに数値を増量: 行の上下19px／テーブル内側の上下12px／
 *    配送カードの間隔10px／説明文・注記まわりの余白も少し広めに。
 *    （実測で「小計→線」「線→配送」とも19pxの対称を維持）
 * ───────────────────────────────────────────────
 * 【v37 変更点（20260710）】モバイル合計ボックスの余白を完全固定＋−ボタンのグレーアウト
 *  ・【モバイルのみ】合計テーブルのth/tdに残っていた外部CSS（テーマ/ShopEngine/
 *    Woo標準）のmargin・float・::before擬似要素を全て明示リセット。
 *    「小計と線の間だけ広い」「線が配送に張り付く」といった行間の
 *    不均等をなくし、全行が同じ上下パディング（線は行の上辺1本）になるよう固定。
 *    ※ローカルのレンダリング検証で左右端の一致（全行±0px）は確認済み。
 *  ・数量ステッパー: 下限（1個）のとき − を、在庫上限のとき ＋ を
 *    グレーアウト（craftcos.php v25 §28のdisabled制御とセット・PC/スマホ共通）
 * ───────────────────────────────────────────────
 * 【v36 変更点（20260710）】ズレ対策＋数量ステッパー＋送料を計算の右寄せ
 *  ・区切り線と配送カードの幅ズレ対策: td/ul/li の width・box-sizing・
 *    左右marginを明示して、線（trのボーダー）とカードの左右端を一致させる
 *  ・カート数量の −＋ ステッパー（craftcos.php v24 §28）の見た目:
 *    白ピルの左右にピンクの −＋、中央に数字。スピナーの名残も完全除去
 *  ・「送料を計算」を右寄せに変更（金額列と同じ右端の“操作ゾーン”に揃える。
 *    説明文「配送設定は…」は左のまま＝読み物は左・操作は右）
 * ───────────────────────────────────────────────
 * 【v35 変更点（20260710）】枠内の区切り線の統一＋ラジオボタンをピンク×白丸に
 *  ・【区切り線】スマホではth/tdが縦積みになるため、v33のセル別ボーダーが
 *    「thの幅だけの短い線」と「tdの全幅線」に分裂して見えていた。
 *    モバイルでは行(tr)をflex化してセルのボーダーを全て外し、
 *    区切り線は行の上辺1本（淡ピンク）に統一。合計行だけ2pxで強調。
 *  ・【ラジオボタン】配送方法のラジオがOS標準描画（黒リング）だったのを
 *    appearance:none の自前描画に変更: 未選択=白丸＋ベージュ枠／
 *    選択=ピンク枠＋ピンクの中心ドット。カート・チェックアウト共通（PC/スマホ）。
 * ───────────────────────────────────────────────
 * 【v34 変更点（20260710）】v33のやりすぎ修正（DevToolsのDOM確認済み）
 *  ・【枠復活】v33の背景透明化が table.shop_table 本体まで巻き込み、
 *    合計ボックスの白カード（枠線・角丸・影）ごと消していた。
 *    テーブル本体に白カードを明示的に再指定（セルの透明化はそのまま）。
 *  ・【下線の幅】タイトルh1はflex親の子で display:inline-block が効かず
 *    全幅のままだった（＝下線が文字より長い）。width:fit-content に変更し、
 *    「お買い物カゴ」の文字幅ぴったりに。
 * ───────────────────────────────────────────────
 * 【v33 変更点（20260710）】スマホ実機フィードバック2回目（ルールは末尾に追記）
 *  ・タイトルのアクセントバーを固定36px→テキストと同じ幅に
 *    （「お買い物カゴ」の「ゴ」まで伸びる。h1をinline-block化＋width:100%）
 *  ・カート合計テーブルの背景まだら（合計行のグレー帯・th白/tdグレーの継ぎ目）を
 *    解消: セル背景を全て透明化し、行区切りは淡ピンクの細線で統一。
 *    合計行は上に太めの区切り線＋金額をピンク大きめで強調し直した。
 * ───────────────────────────────────────────────
 * 【v32 変更点（20260710）】スマホ実機フィードバック反映（ルールは末尾に追記）
 *  ・ページタイトル「お買い物カゴ」「購入手続き」を縮小・かわいく
 *    （ピンク→ラベンダーのアクセントバー付き。PC24px/スマホ20px）
 *  ・「お買い物カゴの合計」(h2)も縮小＋ピンクドット付きに
 *  ・カートの配送方法を白カード化（チェックアウトと同じ世界観）・左寄せ。
 *    グレー背景と「送料無 料」の変な右寄せ折り返しを解消
 *  ・「配送設定は…」「送料を計算」を左寄せ・控えめに。
 *    「送料を計算」クリック時の黒いフォーカス枠→ピンクの柔らかい枠に
 *  ・遠方負担分の注記行(craftcos.php v21 §25)をモバイルで全幅・左寄せに
 * ───────────────────────────────────────────────
 * 【v31 変更点（20260710）】更新ボタンの非表示を撤回（無限リロードの一因）
 *  ・v30で「更新」ボタンを display:none にしていたが、隠した要素をJSでclickする
 *    実装と競合し、カートが無限リロードする原因の一つになった。ボタンは残す。
 *    （都道府県を選べばJSが自動計算するので普段は押さなくてよい。JSが動かない
 *      環境でも押せば計算できる保険になる。）
 *  ・国セレクトは【CSSでのみ】非表示。PHPで無効化すると選んだ都道府県が
 *    デフォルト所在地（東京都）で上書きされるため（craftcos.php §20-1 参照）。
 * ───────────────────────────────────────────────
 * 【v30 変更点（20260710）】送料計算=都道府県のみ ＋ スマホの残課題2件を修正
 *  ・送料計算フォームは craftcos.php §20 で「都道府県プルダウンのみ」になったため、
 *    国/郵便番号/市区町村のCSS非表示を保険として残し、更新ボタンは非表示に。
 *    （都道府県を選んだ瞬間に再計算されるのでボタン不要）
 *  ・スマホ: 数量が中央に浮く件を修正。Gridを3カラム(thumb/qty/sub)に分け、
 *    同一セル重ね置き＋justify-self をやめて確実に左右へ配置。
 *  ・スマホ: 合計ボックスのラベル(小計/配送/合計)が消えていた件を修正。
 *    Wooは「thを隠し td::before にラベルを出す」ため、v29の td::before 打ち消しで
 *    ラベルが全消滅していた。th を表示に戻し、重複する td::before だけ消す。
 * ───────────────────────────────────────────────
 * 【v29 変更点（20260708）】スマホのカート商品行をカード風に（§18追加）
 *  ・Woo標準のレスポンシブ（tdを縦積みし td::before に「商品:」等のラベルを出す）を
 *    打ち消し、tr.cart_item を CSS Grid のカードに（サムネ左・情報右・×は右上）。
 *  ・サムネを復活（テーマがスマホで隠す場合に備え display:block !important）。
 *  ・数量入力を appearance:none で丸ピル型に統一（ネイティブのスピナーを除去）。
 *  ・単価(product-price)はスマホでは小計と重複するため非表示。
 *  ・クーポン欄を横並び、「お買い物カゴを更新」をフル幅に。
 *  ・配送は「送料を計算」で促す現行仕様のまま（送料の実額は推測せずWoo標準に任せる）。
 *  ★DOMがShopEngine独自だと効かない箇所が出るのでDevToolsで要確認。
 * ───────────────────────────────────────────────
 * 【v28 変更点（20260708）】タイトルの左端揃え＋更新ボタンを最下部へ
 *  ・「お買い物カゴ」(h1.entry-title)の親 .page-header がフル幅(1140px)で
 *    左にはみ出ていたため、本体と同じ 900px 中央寄せにして左端を一致。
 *  ・送料計算フォームの並びを 郵便番号 → 都道府県 → 市区町村 → 更新ボタン に。
 *    更新ボタン(id無しp)を order:4 で最下部・右寄せに移動（DevToolsでDOM確認済み）。
 * ───────────────────────────────────────────────
 * 【v27 変更点（20260708）】送料計算フォームの更新ボタンのズレを解消
 *  ・送料計算フォームを横並び(flex-wrap)→縦積み(flex-direction:column)に変更。
 *    郵便番号欄(ラベル＋入力の2段)とボタンの高さが合わずボタンが浮く問題を解消。
 *  ・更新ボタンは郵便番号のすぐ下に右寄せ。補完ステータスが出ても崩れない。
 *  ・「東京都 に配送します。住所を変更」→「配送設定は～。送料を計算」への文言固定は
 *    PHP側（craftcos.php v15・§18 gettext差し替え）で対応。
 * ───────────────────────────────────────────────
 * 【v26 変更点（20260708）】カート全体の幅を「ちょうどいい中央寄せ」に
 *  ・カートコンテナ(.woocommerce-cart .woocommerce)の max-width を 1080px→900px に。
 *    v25で合計を全幅化したら横に伸びすぎたため、商品テーブル・合計とも中央寄せの
 *    見やすい幅に。狭く/広くしたい時はこの数字(900px)だけ変更すればOK。
 *  ・送料計算フォームの「住所を変更/送料を計算」の出し分けと郵便番号補完は
 *    CSSではなくPHP側（craftcos.php v14）で対応。
 * ───────────────────────────────────────────────
 * 【v25 変更点（20260708）】カートページ着せ替え（合計ボックス全幅化＋送料計算並び替え）
 *  ・「お買い物カゴの合計」を上の商品テーブルと同じ全幅に（float:right/width:48%を解除）。
 *  ・合計ボックスの枠をチェックアウトと同じ世界観に（白枠・radius18・淡い影・合計行強調）。
 *  ・送料計算フォームを 郵便番号（＋更新）→ 都道府県 → 市区町村 に並び替え、
 *    「国または地域（日本）」を非表示（値は日本固定で送信＝送料計算/決済は壊れない）。
 *  ・追加ルールは全て .woocommerce-cart スコープに限定（チェックアウトに影響なし）。
 *  ・DOMは標準WooCommerce/ShopEngine構造を前提。効かない箇所はDevToolsで要確認。
 * ───────────────────────────────────────────────
 * 【v24 変更点（20260708）】注文テーブルの列をpx固定で確実化（商品名を最大化）
 *  ・数量・小計をpx固定(PC:46/66px, スマホ:40/60px)にし商品名列に確実にスペースを回す。
 *  ・セレクタを product-* / cc-col-* / nth-child すべて網羅し取りこぼしを防止。
 *  ・「数量」と「1」も同一px幅で確実に縦整列。
 * ───────────────────────────────────────────────
 * 【v23 変更点（20260708）】注文テーブルの列を完全統一（「1」を数量に揃える）
 *  ・旧cc-col-*クラスとnth-childの指定を1本化し、thead/tbodyの列幅を完全一致。
 *    →「数量」ヘッダーと数値「1」が縦に揃う。
 *  ・スマホで数量12%・小計17%にし商品名列を最大化、商品名を13pxに（改行しにくく）。
 * ───────────────────────────────────────────────
 * 【v22 変更点（20260708）】数量列の厳密な整列＋商品名列をさらに広く
 *  ・商品名列を flex 1 1 0 にして列幅を内容非依存で固定→「数量」と「1」が縦に揃う。
 *  ・スマホで数量13%・小計18%にし、商品名列をさらに広げた（改行しにくく）。
 * ───────────────────────────────────────────────
 * 【v21 変更点（20260708）】スマホの注文テーブル: 商品名列を広げて改行しにくく
 *  ・スマホで数量列(15%)・小計列(20%)を狭め、商品名列(flex auto)を広げて
 *    「ハートチャーム（テスト）」等が1行に収まりやすくした。数量列も右寄りに。
 * ───────────────────────────────────────────────
 * 【v20 変更点（20260708）】スマホの左右ぐらつき（横スクロール）を停止
 *  ・v19の overflow-x:hidden が .woocommerce-checkout 内のみだったため、
 *    body/htmlレベルまで効かせて横スクロールを封じた。
 *  ・全幅要素(G Pay/区切り/各ブロック)を max-width:100% で画面内に収めた。
 * ───────────────────────────────────────────────
 * 【v19 変更点（20260708）】スマホ横幅対応（はみ出し防止・左右余白の統一）
 *  ・枠やpaddingで幅がはみ出す問題をbox-sizing徹底で解消。
 *  ・スマホ(<=820px)で左右余白16pxを付け、各要素を全幅で画面内に収める。
 *  ・G Pay/「もしくは」区切り/入力欄も画面幅に収める。
 * ───────────────────────────────────────────────
 * 【v18 変更点（20260708）】保存チェック余白・配送ラジオのカスタム・クーポン横並び
 *  ・保存チェックの上余白はカード欄(#wc-stripe-upe-form)のmargin-bottomで確実に。
 *  ・配送ラジオをappearance:noneで描き直し、全ブラウザで「ピンク円＋白丸」に統一
 *    （PCでaccent-colorが効かず黒丸になる問題の解決）。
 *  ・クーポン入力＋適用ボタンを .cc-coupon-wrap でflex横並びに（JSはcraftcos.php v12）。
 * ───────────────────────────────────────────────
 * 【v17 変更点（20260708）】クーポン開時の余白詰め・保存チェックの上余白
 *  ・クーポンを開いた時、ShopEngineのinfo(margin-bottom:32px)が広すぎたので詰めた。
 *  ・保存チェックの上余白は、親fieldsetとのmargin collapseで効かなかったため
 *    paddingで確実に入れ直した。
 * ───────────────────────────────────────────────
 * 【v16 変更点（20260708）】クーポン開閉のターゲット修正・保存チェックの位置
 *  ・クーポン入力欄はShopEngine構造（#order_review直下のp.form-row-first/last）
 *    だったため、そちらを初期非表示に修正（v15の.checkout_coupon指定は空振りしていた）。
 *  ・「支払い情報を保存します」の□＋文章ブロックを少し下にずらした（margin-top）。
 * ───────────────────────────────────────────────
 * 【v15 変更点（20260708）】列の内側寄せ・数量列の整列・クーポン開閉・保存チェック整列
 *  ・注文テーブルの項目列/金額列の左右余白を増やして内側に寄せた。
 *  ・「数量」ヘッダーと商品行の数値をnth-childで厳密に同じ列幅にし縦に整列。
 *  ・クーポン入力欄を初期非表示に（「ここをクリック」で開閉／JSはcraftcos.php v10）。
 *  ・「支払い情報を保存します」の□と文章の行ずれを解消（□は動かさず上端揃え）。
 * ───────────────────────────────────────────────
 * 【v14 変更点（20260708）】見出しとクーポンを「枠の中」に（請求先枠と同じ）
 *  ・v13で見出しを枠の外に出したのを撤回。#order_reviewを1つの白枠にし、
 *    ｜ご注文・テーブル・合計・クーポン・｜支払い・カードを全部その中に内包。
 *  ・クーポンは合計の下（枠の中）に。｜支払いは区切り線付きのセクション見出しに。
 * ───────────────────────────────────────────────
 * 【v13 変更点（20260708）】「ご注文」「支払い」を独立した白枠に統一
 *  ・#order_review を透明コンテナにし、注文概要テーブルと payment_box(カード)に
 *    それぞれ白枠。見出し（｜ご注文／｜支払い）は枠の外に（左の請求先枠と同じ体裁）。
 *  ・クーポン欄が合計の下に移動（craftcos.php v9のフックとセット）した際の体裁調整。
 *  ・GPay/ApplePay（上部Express）には触れていない。
 * ───────────────────────────────────────────────
 * 【v12 変更点（20260708）】決済見出しの整形
 *  ・決済方法ラベル「支払いオプション」を「｜支払い」（ご注文と同じピンクバー
 *    付き見出し）に置換。正体は <label for="payment_method_stripe">。
 *  ・ページ上部の大見出し「支払い」を非表示（テーマ/Elementor候補を広めに）。
 *    ※ もしElementorで手動配置した見出しなら、Elementor側で削除 or 非表示に。
 * ───────────────────────────────────────────────
 * 【v11 変更点（20260708）】v10スクショ確認後の仕上げ
 *  ・保存チェックの黒枠 = 支払い欄内の <fieldset> デフォルト枠だったので除去
 *    （DevToolsで確認）。□と文字も同じ行に。
 *  ・「ご希望サイズ・寸法:」等の商品メタ文字を小さく（.variation/.wc-item-meta）。
 *  ・合計の上の二重線をピンク細線1本に（配送行の下線を消し、ピンクは1pxで残す）。
 *  ・「ご注文」見出しを枠の中へ（請求先情報の詳細と同じ体裁に連結）。
 * ───────────────────────────────────────────────
 * 【v10 変更点（20260708）】v9スクショ確認後の細部詰め
 *  ・注文概要「配送」ラベルの左端を商品・小計と揃えた（全セルの左右paddingを0にし
 *    行(tr)の左右padding=4pxに一本化）。
 *  ・配送ラジオの○と方法名が同じ行に乗らなかった件を修正
 *    （旧v7の高詳細度 li{display:block} を撤去し §V9-③ を効かせた）。
 *  ・カード欄が二重枠だった件を修正（Stripe入力欄ラッパの枠を撤去し、枠は
 *    決済方法カード1枚だけに。Payment Element環境の二重枠を解消）。
 *  ・「支払い情報を保存します」周りの黒枠を除去（候補セレクタを拡張）。
 *  ・請求/配送フォームの並び順を確定（§V10）:「国または地域」を非表示にし、
 *    郵便番号／都道府県を姓名の直下へ、メールは下段フル幅に。
 *  ・「別の住所へ配送しますか？」の□と文字を縦中央で揃えた。
 *  ⚠ 「国」を隠すので WooCommerce → 設定 → 一般 → 販売する国＝『日本』のみ を確認。
 * ───────────────────────────────────────────────
 * 【v9 変更点（20260708）】注文概要・配送・カード欄の総整理
 *  ※ v2〜v8で同じ要素にルールを継ぎ足した結果、注文テーブル/配送/カード枠の
 *    指定が衝突して崩れていた。末尾の v8 §①〜③を撤去し、
 *    「§V9 決定版」1ブロックに統合して後勝ちで確定させる。
 *  ① 注文テーブルの線: セル個別の破線をやめ、行(tr)単位のきれいな1本線に
 *  ② 配送行: 左に寄りすぎを解消（商品行と左端を揃える）
 *  ③ 配送ラジオ: ○とラベル文字を縦中央で同じ行に（行ずれ解消）
 *  ④ カード欄: 何重にもなった枠を1枚のカードに整理（Stripe入力欄のみ枠を残す）
 *  基盤（v7のテーブルblock/flex化・姓名整列等）はそのまま活用。
 * ───────────────────────────────────────────────
 * 【v3 変更点】細部の整列修正
 *  - 姓・名の間にメール欄が割り込む問題 → 姓名を隣同士に整列
 *  - 目次(TOC)を確実に非表示（追加セレクタ）
 *  - 注文概要テーブル: 列幅・金額右寄せ・配送ラジオの整列
 * 設置: テーマ直下（hello-elementor-child/craftcos-checkout.css）
 */

/* ===== 全体トーン ===== */
.woocommerce-checkout,
.woocommerce-cart {
	color: var(--cc-ink, #6B5A60);
}
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
	max-width: 900px; /* v26: 1080px→900px（横に伸びすぎを解消・ちょうどいい中央寄せ）。狭く/広くはこの数字だけ変更 */
	margin: 0 auto;
}

/* 見出し */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: 15px;
	font-weight: 700;
	color: #5f5054;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.woocommerce-checkout h3::before,
.woocommerce-checkout #order_review_heading::before {
	content: "";
	width: 4px;
	height: 16px;
	background: var(--cc-pink, #F58BB6);
	border-radius: 2px;
}

/* ===== フォーム欄 ===== */
.woocommerce form .form-row label,
.woocommerce-checkout label {
	font-size: 12px;
	font-weight: 600;
	color: #6b5a60;
	margin-bottom: 5px;
}
.woocommerce form .form-row .required { color: var(--cc-pink, #F58BB6); border: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container .select2-selection {
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-radius: 10px !important;
	padding: 11px 14px;
	font-size: 14px;
	color: #5f5054;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
	line-height: 1.4;
	height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
	outline: none;
	border-color: var(--cc-pink, #F58BB6) !important;
	box-shadow: 0 0 0 3px rgba(245,139,182,.15);
}
/* select2（都道府県ドロップダウン）の高さ調整 */
.select2-container--default .select2-selection--single {
	height: 44px !important;
	display: flex;
	align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	color: #5f5054;
	padding-left: 4px;
}

/* ===== カード風のセクション枠 ===== */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 6px 22px rgba(201,164,106,.10);
	margin-bottom: 20px;
}

/* ===== 2カラムレイアウト（float方式・構造に依存しない） ===== */
/* チェックアウト内に紛れ込む目次(TOC)を隠す */
.woocommerce-checkout .lwptoc,
.woocommerce-checkout #lwptoc,
.woocommerce-checkout .ez-toc-container,
.woocommerce-checkout .toc_widget { display: none !important; }

@media (min-width: 821px) {
	.woocommerce-checkout form.checkout { display: block; }
	.woocommerce-checkout form.checkout::after { content: ""; display: table; clear: both; }
	/* 左：お客さま情報 */
	.woocommerce-checkout #customer_details {
		float: left;
		width: 57%;
		margin: 0;
	}
	/* 右：注文内容＋支払い */
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		float: right;
		width: 40%;
		margin: 0;
		clear: right;
	}
	.woocommerce-checkout #order_review_heading { margin-bottom: 12px; }
	.woocommerce-checkout #order_review { position: sticky; top: 20px; }
	/* customer_details内の請求/配送は縦積み（横並びにさせない） */
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		float: none;
		width: 100%;
		max-width: 100%;
	}
}

/* ===== 注文サマリー ===== */
.woocommerce-checkout .shop_table {
	border: none;
	border-radius: 0;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
	border: none;
	border-bottom: 1px dashed var(--cc-line, #F0DCE4);
	padding: 12px 0;
	font-size: 13px;
}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
	border-bottom: none;
	border-top: 1px solid var(--cc-line, #F0DCE4);
	padding-top: 14px;
	font-size: 16px;
	font-weight: 700;
	color: #5f5054;
}
.woocommerce-checkout .shop_table .order-total .amount {
	color: var(--cc-pink, #F58BB6);
	font-weight: 700;
}
.woocommerce-checkout .cart_item .product-name { color: #5f5054; }
.woocommerce-checkout .cart_item .product-total .amount { font-weight: 600; }

/* ===== 配送方法（ラジオ） ===== */
.woocommerce-checkout #shipping_method li,
.woocommerce-checkout ul.woocommerce-shipping-methods li {
	list-style: none;
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
	transition: border-color .15s, background .15s;
}
.woocommerce-checkout #shipping_method li:hover {
	border-color: var(--cc-pink-soft, #FBC3D8);
}
.woocommerce-checkout #shipping_method label {
	font-size: 13px;
	color: #5f5054;
	font-weight: 500;
}
.woocommerce-checkout #shipping_method input[type="radio"] { accent-color: var(--cc-pink, #F58BB6); }
.woocommerce-checkout #shipping_method .amount {
	color: var(--cc-pink, #F58BB6);
	font-weight: 700;
}

/* ===== 決済ボタン ===== */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	background: linear-gradient(135deg, var(--cc-pink, #F58BB6), #f7a3c4) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 15px 30px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	width: 100%;
	box-shadow: 0 6px 18px rgba(245,139,182,.35);
	transition: transform .15s;
	cursor: pointer;
}
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
	transform: translateY(-2px);
}

/* ===== クーポン欄 ===== */
.woocommerce-checkout .checkout_coupon,
.woocommerce-form-coupon {
	background: var(--cc-ivory, #FFF9F5);
	border: 1px dashed var(--cc-beige, #EBCFB7);
	border-radius: 12px;
	padding: 16px;
}
.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--cc-pink, #F58BB6);
	background: var(--cc-ivory-2, #FDEEF3);
	border-radius: 10px;
}

/* ===== 支払い欄 ===== */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: none;
	padding: 0;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--cc-ivory-2, #FDEEF3);
	border-radius: 10px;
	font-size: 12px;
	color: #6b5a60;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* 「カードを保存」チェックの見やすさ */
.woocommerce-checkout .woocommerce-SavedPaymentMethods,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew { font-size: 12.5px; }

/* ===== 郵便番号補完のステータス表示（craftcos.phpが挿入する要素） ===== */
.cc-zip-status { font-size: 11px; margin-top: 5px; min-height: 1.2em; }
.cc-zip-status.loading { color: var(--cc-lavender, #CDB8EA); }
.cc-zip-status.ok { color: #7bb389; }
.cc-zip-status.err { color: #e8629b; }

/* ===== レスポンシブ ===== */
@media (max-width: 820px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout #order_review { padding: 18px; }
}

/* ===== v2 追補: 崩れ・薄さの補強 ===== */

/* フォーム欄の枠をはっきり＆余白確保（薄すぎ対策） */
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce form .form-row input.input-text,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
	border: 1px solid var(--cc-beige, #EBCFB7) !important;
	background: #fff !important;
	width: 100%;
}

/* 請求先/配送先セクションのカード枠を確実に付ける */
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-account-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
	background: #fff;
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 6px 22px rgba(201,164,106,.10);
	margin-bottom: 18px;
}

/* 「別の住所へ配送しますか？」等の細かいラッパの余白 */
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { margin-top: 8px; }

/* 注文概要テーブルを右カラム幅にフィット */
.woocommerce-checkout #order_review .shop_table { width: 100%; }

/* 支払いカード枠（Stripeのカード入力）を優しい枠に */
.woocommerce-checkout #payment {
	background: var(--cc-ivory, #FFF9F5);
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 14px;
	padding: 16px;
	margin-top: 14px;
}

/* モバイル: floatを解除して1カラムに */
@media (max-width: 820px) {
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		float: none !important;
		width: 100% !important;
		position: static !important;
	}
}

/* ═══════════════════════════════════════════════
 * v3 追補: 姓名の整列・目次確実非表示・注文概要の整列
 * ═══════════════════════════════════════════════ */

/* ── 目次(TOC)を確実に消す（あらゆるTOCプラグイン/ブロックに対応） ── */
.woocommerce-checkout [class*="toc"],
.woocommerce-checkout [id*="toc"],
.woocommerce-checkout .wp-block-table-of-contents,
.woocommerce-checkout nav[aria-label*="目次"],
.woocommerce-checkout .rank-math-toc,
.woocommerce-checkout details.wp-block-details { display: none !important; }

/* ── 姓名整列・フォーム並び順は §V10 決定版に一本化（旧v3 @mediaブロックは撤去） ──
   ※ v3の :not() セレクタが超高詳細度で email を中段に固定していたため削除。 */

/* ── 注文概要テーブルの整列 ── */
.woocommerce-checkout #order_review .shop_table { width: 100%; table-layout: fixed; }
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
	padding: 12px 10px;
	vertical-align: top;
	word-break: break-word;
}
/* 商品名列は広め、金額列は右寄せ */
.woocommerce-checkout #order_review .shop_table thead th:first-child,
.woocommerce-checkout #order_review .shop_table .cart_item td:first-child,
.woocommerce-checkout #order_review .shop_table .cart-subtotal th,
.woocommerce-checkout #order_review .shop_table .order-total th { text-align: left; width: 62%; }
.woocommerce-checkout #order_review .shop_table thead th:last-child,
.woocommerce-checkout #order_review .shop_table .cart_item td:last-child,
.woocommerce-checkout #order_review .shop_table .cart-subtotal td,
.woocommerce-checkout #order_review .shop_table .order-total td {
	text-align: right; width: 38%; white-space: nowrap;
}
/* 配送行のラジオリストは左寄せ・全幅で見やすく */
.woocommerce-checkout #order_review .shop_table .woocommerce-shipping-totals td { width: 100%; }
.woocommerce-checkout #order_review #shipping_method {
	margin: 0; padding: 0;
}
.woocommerce-checkout #order_review #shipping_method li {
	display: block; width: 100%; margin-bottom: 8px;
}
.woocommerce-checkout #order_review #shipping_method li label {
	display: inline; font-size: 12.5px; line-height: 1.6;
}
/* 合計行を強調 */
.woocommerce-checkout #order_review .order-total .amount { font-size: 17px; }


/* ═══════════════════════════════════════════════
 * v4 追補: 配送ラジオを全幅に・数量列の体裁
 * ═══════════════════════════════════════════════ */

/* 配送行: ラベルセルを潰してラジオを全幅で使う */
.woocommerce-checkout #order_review .shop_table .woocommerce-shipping-totals th {
	display: block;
	width: 100%;
	padding-bottom: 6px;
	text-align: left;
}
.woocommerce-checkout #order_review .shop_table .woocommerce-shipping-totals td {
	display: block;
	width: 100%;
	text-align: left;
	padding-top: 0;
}
.woocommerce-checkout #order_review #shipping_method li {
	display: block;
	width: 100%;
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.woocommerce-checkout #order_review #shipping_method li:hover {
	border-color: var(--cc-pink-soft, #FBC3D8);
}
.woocommerce-checkout #order_review #shipping_method li label {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	color: #5f5054;
}
.woocommerce-checkout #order_review #shipping_method .amount {
	color: var(--cc-pink, #F58BB6);
	font-weight: 700;
}

/* 数量表示（craftcos.phpが商品名の下に「数量: N」を出す）の体裁 */
.woocommerce-checkout #order_review .cart_item .cc-qty {
	display: block;
	font-size: 11.5px;
	color: var(--cc-ink-soft, #A3928F);
	margin-top: 2px;
}


/* ═══════════════════════════════════════════════
 * v5 追補: モバイル対応（姓名整列・配送全幅）＋個数の仕切り
 * ═══════════════════════════════════════════════ */

/* ── 姓名並べ替えを全幅（スマホ含む）に適用 ──
   v3では561px以上だけだったのをブレイクポイント無しに */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
}
.woocommerce-checkout #billing_last_name_field  { order: 1; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_first_name_field { order: 2; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_email_field      { order: 3; width: 100% !important; }
.woocommerce-checkout #billing_country_field    { order: 4; width: 100% !important; }
.woocommerce-checkout #billing_postcode_field   { order: 5; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_state_field       { order: 6; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_city_field        { order: 7; width: 100% !important; }
.woocommerce-checkout #billing_address_1_field   { order: 8; width: 100% !important; }
.woocommerce-checkout #billing_address_2_field   { order: 9; width: 100% !important; }
.woocommerce-checkout #billing_phone_field       { order: 10; width: 100% !important; }
/* shipping側も姓名を並べる */
.woocommerce-checkout #shipping_last_name_field  { order: 1; width: calc(50% - 6px) !important; }
.woocommerce-checkout #shipping_first_name_field { order: 2; width: calc(50% - 6px) !important; }
/* Wooのfloat/幅指定を打ち消し */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-checkout .form-row-wide {
	float: none !important;
	margin-right: 0 !important;
}

/* ── 配送ラジオをスマホでも全幅に ── */
@media (max-width: 820px) {
	.woocommerce-checkout #order_review .shop_table .woocommerce-shipping-totals th,
	.woocommerce-checkout #order_review .shop_table .woocommerce-shipping-totals td {
		display: block;
		width: 100% !important;
		text-align: left;
	}
	.woocommerce-checkout #order_review #shipping_method li {
		width: 100%;
		box-sizing: border-box;
	}
}

/* ── 商品行に「数量」列の仕切りを作る ──
   craftcos.php v8 が商品名下に .cc-qty を出すので、区切り線を付けて見やすく */
.woocommerce-checkout #order_review .cart_item td:first-child {
	line-height: 1.5;
}
.woocommerce-checkout #order_review .cart_item .cc-qty {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	background: var(--cc-ivory, #FFF9F5);
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 999px;
	font-size: 11px;
	color: var(--cc-ink, #6B5A60);
}


/* ═══════════════════════════════════════════════
 * v6 追補: tfoot構造に正しく対応した配送全幅化＋数量列
 *   （DevToolsで tfoot{display:table-footer-group} が原因と判明）
 * ═══════════════════════════════════════════════ */

/* 配送行だけをテーブル流し込みから外して全幅ブロックにする。
   tfoot/tr/th/td の user-agent display を明示的に上書き（!important） */
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping {
	display: block !important;
	width: 100% !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping th,
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping td {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	padding: 6px 12px !important;
}
/* 配送ラジオリスト全幅 */
.woocommerce-checkout #order_review #shipping_method {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-checkout #order_review #shipping_method li {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 10px !important;
	list-style: none;
}
.woocommerce-checkout #order_review #shipping_method li label {
	display: block !important;
	font-size: 13px;
	line-height: 1.6;
	color: #5f5054;
}
.woocommerce-checkout #order_review #shipping_method .amount {
	color: var(--cc-pink, #F58BB6);
	font-weight: 700;
}

/* ── 数量列（craftcos.php v8 が thead/tbody に「数量」列を追加）── */
.woocommerce-checkout #order_review .shop_table thead th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table .cart_item td.cc-col-qty {
	width: 14%;
	text-align: center !important;
	white-space: nowrap;
	font-size: 12.5px;
}
/* 3列になるので商品名・小計の幅を再配分 */
.woocommerce-checkout #order_review .shop_table thead th.cc-col-name,
.woocommerce-checkout #order_review .shop_table .cart_item td.cc-col-name { width: 56%; }
.woocommerce-checkout #order_review .shop_table thead th.cc-col-total,
.woocommerce-checkout #order_review .shop_table .cart_item td.cc-col-total { width: 30%; text-align: right !important; }
/* 旧: 商品名下のピルバッジ数量は列表示にしたので隠す */
.woocommerce-checkout #order_review .cart_item .cc-qty { display: none; }


/* ═══════════════════════════════════════════════
 * v7 追補: 配送tdの幅213px問題を全ブレイクポイントで強制解決
 *   （右カラム40%指定＋table-cell幅が配送tdに残っていたのが原因）
 * ═══════════════════════════════════════════════ */

/* 注文概要テーブル自体をブロック化して table-cell幅計算を無効化する
   （配送を全幅にするための土台。thead/tbody/tfootもblockに） */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .shop_table thead,
.woocommerce-checkout #order_review .shop_table tbody,
.woocommerce-checkout #order_review .shop_table tfoot,
.woocommerce-checkout #order_review .shop_table tr {
	display: block !important;
	width: 100% !important;
}
/* 商品行（thead/tbody）は3列を保ちたいので flex で横並びに */
.woocommerce-checkout #order_review .shop_table thead tr,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
}
.woocommerce-checkout #order_review .shop_table thead th.cc-col-name,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-name { flex: 1 1 56%; text-align: left !important; }
.woocommerce-checkout #order_review .shop_table thead th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-qty { flex: 0 0 14%; text-align: center !important; }
.woocommerce-checkout #order_review .shop_table thead th.cc-col-total,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-total { flex: 0 0 26%; text-align: right !important; }

/* 小計・合計などtfootの行も flex で「ラベル｜空｜金額」 */
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal,
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dsub-row,
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total,
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount,
.woocommerce-checkout #order_review .shop_table tfoot tr.fee,
.woocommerce-checkout #order_review .shop_table tfoot tr.tax-total,
.woocommerce-checkout #order_review .shop_table tfoot tr.tax-rate {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
}
.woocommerce-checkout #order_review .shop_table tfoot tr .cc-col-qty { display: none !important; }
.woocommerce-checkout #order_review .shop_table tfoot tr .cc-col-name { text-align: left !important; }
.woocommerce-checkout #order_review .shop_table tfoot tr .cc-col-total { text-align: right !important; }

/* ★配送行の縦積み・ラジオ整列は §V9-②③ に一本化（旧v7ブロックは撤去）
   ※ 旧v7の高詳細度 li{display:block!important} が §V9-③ の flex を打ち消して
      ○と方法名がずれていたため削除。 */


/* ═══════════════════════════════════════════════════════════════
 * §V9 決定版（20260708）── 注文概要・配送・カード欄の総整理
 *   v2〜v8で継ぎ足したルールが衝突して崩れていた4点を、ここで確定させる。
 *   このブロックはファイル末尾に置き「後勝ち」で前の指定を上書きする。
 *   ① 注文テーブルの線: セル個別の破線 → 行(tr)単位のきれいな1本線
 *   ② 配送行: 左寄りすぎ解消（商品行と左端を揃える）
 *   ③ 配送ラジオ: ○とラベルを縦中央で同じ行に（行ずれ解消）
 *   ④ カード欄: 何重もの枠を1枚に整理（入力欄だけ枠を残す）
 *   ※ v7のテーブルblock/flex化を土台として活用している。
 * ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────
 * §V9-① 注文テーブルの線をきれいに
 *   セルごとの破線を全撤去し、線は「行(tr)」に1本だけ引く。
 *   tr側にpaddingを持たせることで各行の左端も自然に揃う。
 * ─────────────────────────────── */

/* まずセル個別の枠線を全撤去（前バージョンの border-bottom:dashed を無効化）。
   併せてセルの左右paddingも0にし、余白は行(tr)の左右padding=4pxに一本化する。
   → 商品名・数量・小計・「配送」ラベルの左端がすべて揃う（配送の左寄りすぎ解消）。 */
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ヘッダー行（商品｜数量｜小計）: 下に区切り線 */
.woocommerce-checkout #order_review .shop_table thead tr {
	border-bottom: 1.5px solid var(--cc-line, #F0DCE4) !important;
	padding: 0 4px 10px !important;
}

/* 商品行: 下に薄い区切り線 */
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
	border-bottom: 1px solid var(--cc-line, #F0DCE4) !important;
	padding: 12px 4px !important;
}

/* 小計・割引・手数料・税など: 下に薄い区切り線 */
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal,
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dsub-row,
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount,
.woocommerce-checkout #order_review .shop_table tfoot tr.fee,
.woocommerce-checkout #order_review .shop_table tfoot tr.tax-total,
.woocommerce-checkout #order_review .shop_table tfoot tr.tax-rate {
	border-bottom: 1px solid var(--cc-line, #F0DCE4) !important;
	padding: 10px 4px !important;
}

/* 合計行: 上に強めの線＋余白で強調（下線は無し） */
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	border-top: 2px solid var(--cc-pink-soft, #FBC3D8) !important;
	border-bottom: none !important;
	padding: 14px 4px 4px !important;
	margin-top: 4px !important;
}

/* 商品行のグレー背景/ゼブラ/hoverを除去（透明で統一） */
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td,
.woocommerce-checkout #order_review .shop_table tbody tr:nth-child(2n) td,
.woocommerce-checkout #order_review .shop_table tbody tr:hover td,
.woocommerce-checkout #order_review .cart_item {
	background: transparent !important;
	background-color: transparent !important;
}

/* ───────────────────────────────
 * §V9-② 配送行を左に寄せすぎない
 *   th/tdのpaddingは0にして余白を tr 側へ寄せ、
 *   「配送」ラベルの左端を商品行・小計行と揃える。
 * ─────────────────────────────── */
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping {
	display: block !important;
	width: 100% !important;
	border-bottom: 1px solid var(--cc-line, #F0DCE4) !important;
	padding: 12px 4px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping th,
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping td {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	text-align: left !important;
}
/* 「配送」ラベル: 下に少し余白 */
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping th {
	margin-bottom: 8px !important;
	font-weight: 600;
	color: #5f5054;
}

/* ───────────────────────────────
 * §V9-③ 配送ラジオ: ○とラベルを縦中央で同じ行に
 *   liをflex（align-items:center）にし、inputのabsolute/marginを打ち消して
 *   ○とテキストの行ずれをなくす。
 * ─────────────────────────────── */
.woocommerce-checkout #order_review #shipping_method,
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping ul#shipping_method {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.woocommerce-checkout #order_review #shipping_method li {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	width: 100% !important;
	box-sizing: border-box;
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	margin: 0 0 10px !important;
	background: #fff !important;
	list-style: none;
}
.woocommerce-checkout #order_review #shipping_method li:last-child {
	margin-bottom: 0 !important;
}
.woocommerce-checkout #order_review #shipping_method li:hover {
	border-color: var(--cc-pink-soft, #FBC3D8) !important;
}
/* ○（ラジオ）: absolute/上マージンを打ち消して中央に固定 */
.woocommerce-checkout #order_review #shipping_method li input[type="radio"] {
	flex: 0 0 auto !important;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	position: static !important;
	accent-color: var(--cc-pink, #F58BB6);
	vertical-align: middle;
}
/* ラベル: ○の隣に。方法名と金額(¥)を横並びで中央に */
.woocommerce-checkout #order_review #shipping_method li label {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	font-size: 13px;
	font-weight: 500;
	color: #5f5054;
}
.woocommerce-checkout #order_review #shipping_method li label .amount {
	color: var(--cc-pink, #F58BB6);
	font-weight: 700;
}

/* ───────────────────────────────
 * §V9-④ カード欄: 何重もの枠を1枚に整理
 *   #payment と payment_methods の枠を消し、
 *   「決済方法カード(li)」1枚だけに枠を持たせる。
 *   Stripeの入力欄ラッパも枠を消して溶け込ませ、
 *   実際のカード入力フィールドだけ薄い枠を1枚残す。
 * ─────────────────────────────── */

/* #payment 自体は枠・背景なしで素通し（上の見出しとの余白だけ残す） */
.woocommerce-checkout #payment {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	margin-top: 14px !important;
}
/* payment_methods（決済方法リスト）の余白はリセット */
.woocommerce-checkout #payment ul.payment_methods {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* 決済方法カード（＝唯一「枠のあるカード」） */
.woocommerce-checkout #payment ul.payment_methods > li {
	list-style: none;
	background: #fff !important;
	border: 1px solid var(--cc-pink-soft, #FBC3D8) !important;
	border-radius: 14px !important;
	padding: 16px !important;
	margin: 0 0 12px !important;
	box-shadow: 0 4px 14px rgba(245,139,182,.10) !important;
}
.woocommerce-checkout #payment ul.payment_methods > li:last-child {
	margin-bottom: 0 !important;
}

/* Stripe入力欄のラッパ（payment_box / form / form-row）は枠・背景を消して溶け込ませる
   → これが「白枠が何重にも重なる」現象の解消 */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box .wc-stripe-card-form,
.woocommerce-checkout #payment div.payment_box form,
.woocommerce-checkout #payment div.payment_box .form-row,
.woocommerce-checkout #payment div.payment_box .wc-payment-form {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
}
/* payment_box は上に区切りだけ入れて「カード」タブと入力欄を仕切る */
.woocommerce-checkout #payment div.payment_box {
	margin-top: 12px !important;
	padding-top: 18px !important;
	border-top: 1px dashed var(--cc-line, #F0DCE4) !important;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }

/* 入力欄ラッパも枠・背景なしで溶け込ませる。
   Stripe Payment Element はカード番号/期限/CVCの各入力ボックスをStripe側で
   枠付き描画するため、外側コンテナに枠を足すと二重になる。ここは枠を持たせない
   → カードは「決済方法カード(li)」の1枚だけに枠が付く状態になる。 */
.woocommerce-checkout #payment div.payment_box .wc-stripe-elements-field,
.woocommerce-checkout #payment div.payment_box .wc-stripe-elements-container,
.woocommerce-checkout #payment div.payment_box .wc-stripe-upe-element,
.woocommerce-checkout #payment div.payment_box .wc-card-form-inner,
.woocommerce-checkout #payment div.payment_box .StripeElement {
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	margin-bottom: 0 !important;
}

/* 「今後の購入に…支払い情報を保存します」周りの黒枠を除去（すっきり）
   環境によりクラス名が異なるため候補を広めにカバー。checkbox本体には触れない。 */
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout #payment .wc-stripe-new-methods,
.woocommerce-checkout #payment .wc-stripe-save-source,
.woocommerce-checkout #payment .wc-stripe-upe-save-payment-method,
.woocommerce-checkout #payment .payment_box + p,
.woocommerce-checkout #payment li.payment_method_stripe > label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox.checkbox {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 6px 0 0 !important;
	margin: 6px 0 0 !important;
}
/* 保存チェックのラベルは□と文字を縦中央で同じ行に */
.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox.checkbox,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew label {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	line-height: 1.5 !important;
}
.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"],
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	flex: 0 0 auto !important;
	margin: 0 !important;
	position: static !important;
}

/* ═══════════════════════════════════════════════════════════════
 * §V10 決定版（20260708）── フォーム項目の並び順・国非表示・チェック整列
 *   要望対応:
 *   ・「国または地域」を非表示（日本のみ販売の前提。選択値JPは送信される）
 *   ・郵便番号／都道府県を姓名の直下へ（メールは下段フル幅に）
 *   ・「別の住所へ配送しますか？」の□と文字を縦中央で揃える
 *   ⚠ WooCommerce → 設定 → 一般 →「販売する国」を『日本』のみにしておくこと。
 *      未設定だと国を隠したときに未入力扱いでエラーになる場合がある。
 * ═══════════════════════════════════════════════════════════════ */

/* 「国または地域」フィールドを非表示（値は保持され送信される） */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field {
	display: none !important;
}

/* 請求先・配送先の入力欄ラッパを flex に（並び替えの土台・確実化） */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 12px !important;
}

/* ── 請求先の並び順:
      姓 / 名 → 郵便番号 / 都道府県 → 市区町村 → 番地 → 建物 → 電話 → メール ── */
.woocommerce-checkout #billing_last_name_field  { order: 1 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_first_name_field { order: 2 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_postcode_field   { order: 3 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_state_field      { order: 4 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #billing_city_field       { order: 5 !important; width: 100% !important; }
.woocommerce-checkout #billing_address_1_field  { order: 6 !important; width: 100% !important; }
.woocommerce-checkout #billing_address_2_field  { order: 7 !important; width: 100% !important; }
.woocommerce-checkout #billing_phone_field      { order: 8 !important; width: 100% !important; }
.woocommerce-checkout #billing_email_field      { order: 9 !important; width: 100% !important; }

/* ── 配送先（別の住所へ配送 ON時）も同じ並び順 ── */
.woocommerce-checkout #shipping_last_name_field  { order: 1 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #shipping_first_name_field { order: 2 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #shipping_postcode_field   { order: 3 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #shipping_state_field      { order: 4 !important; width: calc(50% - 6px) !important; }
.woocommerce-checkout #shipping_city_field       { order: 5 !important; width: 100% !important; }
.woocommerce-checkout #shipping_address_1_field  { order: 6 !important; width: 100% !important; }
.woocommerce-checkout #shipping_address_2_field  { order: 7 !important; width: 100% !important; }
.woocommerce-checkout #shipping_phone_field      { order: 8 !important; width: 100% !important; }

/* ── 「別の住所へ配送しますか？」の□と文字を縦中央で揃える ── */
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout #ship-to-different-address .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	margin: 0 !important;
	line-height: 1.5 !important;
	cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
	flex: 0 0 auto !important;
	margin: 0 !important;
	position: static !important;
	vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════
 * §V11 決定版（20260708）── v10スクショ確認後の仕上げ
 *   ① 保存チェックの黒枠 = <fieldset> のデフォルト枠だったので除去
 *      （DevToolsで #payment 内の無名 fieldset と判明）
 *   ② 「ご希望サイズ・寸法:」等の商品メタ文字を小さく
 *   ③ 合計の上の二重線をピンク細線1本に（配送行の下線を消し、ピンクは1pxで残す）
 *   ④ 「ご注文」見出しを枠の中へ（請求先情報の詳細と同じ体裁）
 * ═══════════════════════════════════════════════════════════════ */

/* ── ① 支払い欄の fieldset デフォルト枠を除去（保存チェックの黒枠の正体）── */
.woocommerce-checkout #payment fieldset,
.woocommerce-checkout #payment fieldset.wc-upe-form,
.woocommerce-checkout #payment #wc-stripe-upe-form {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	box-shadow: none !important;
}
/* 保存チェックの p（バリデーション点線・背景）も消して、□と文字を同じ行に */
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 8px 0 0 !important;
	margin: 4px 0 0 !important;
}
/* validatedの緑チェック(::after)や::beforeがflexで場所を取らないよう無効化 */
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew::before,
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew::after {
	display: none !important;
}
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	position: static !important;
}
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew label {
	flex: 1 1 auto !important;
	display: inline !important;
	margin: 0 !important;
	line-height: 1.5 !important;
	font-size: 12.5px;
	color: #6b5a60;
}

/* ── ② 商品メタ（ご希望サイズ・寸法 等）の文字を小さく ── */
.woocommerce-checkout #order_review .cart_item .variation,
.woocommerce-checkout #order_review .cart_item dl.variation,
.woocommerce-checkout #order_review .cart_item .wc-item-meta,
.woocommerce-checkout #order_review .cart_item .product-name .variation,
.woocommerce-checkout #order_review .cart_item .product-name dl,
.woocommerce-checkout #order_review .cart_item .product-name small {
	font-size: 11px !important;
	color: #a3928f !important;
	line-height: 1.45 !important;
	margin: 3px 0 0 !important;
	font-weight: 400 !important;
}
.woocommerce-checkout #order_review .cart_item .variation dt,
.woocommerce-checkout #order_review .cart_item .variation dd,
.woocommerce-checkout #order_review .cart_item .wc-item-meta li,
.woocommerce-checkout #order_review .cart_item .wc-item-meta strong {
	font-size: 11px !important;
	display: inline !important;
	margin: 0 !important;
	font-weight: 400 !important;
}

/* ── ③ 合計の上の二重線を「ピンク細線1本」に ──
   配送行の下線を消し、合計行の上線をピンク1pxに（ピンクは残す） */
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping {
	border-bottom: none !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	border-top: 1px solid var(--cc-pink-soft, #FBC3D8) !important;
}

/* ── ④ 「ご注文」見出しを枠の中に入れる（請求先情報の詳細と同じ体裁）──
   heading と order_review を1枚の白枠として連結（見出しが枠の中に見える） */
.woocommerce-checkout #order_review_heading {
	background: #fff !important;
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-bottom: none !important;
	border-radius: 18px 18px 0 0 !important;
	padding: 22px 24px 6px !important;
	margin: 0 !important;
	box-shadow: none !important;
}
.woocommerce-checkout #order_review {
	border-top: none !important;
	border-radius: 0 0 18px 18px !important;
	margin-top: 0 !important;
	padding-top: 14px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V12 決定版（20260708）── 「支払いオプション」を「｜支払い」見出しに
 *   正体は <label for="payment_method_stripe">（Stripe決済方法名）と判明。
 *   元テキストを隠し、擬似要素で「｜支払い」（ご注文と同じピンクバー付き）に。
 *   併せて、ページ上部の大見出し「支払い」を非表示にする。
 * ═══════════════════════════════════════════════════════════════ */

/* ── 決済方法ラベルを「｜支払い」見出しに置き換え ── */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label[for="payment_method_stripe"] {
	font-size: 0 !important;          /* 元テキスト「支払いオプション」を隠す */
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	margin: 0 0 4px !important;
	padding: 0 !important;
	cursor: default;
	line-height: 1.4 !important;
}
/* ピンクバー（ご注文の見出しと同じ） */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label[for="payment_method_stripe"]::before {
	content: "" !important;
	flex: 0 0 auto;
	width: 4px;
	height: 16px;
	background: var(--cc-pink, #F58BB6);
	border-radius: 2px;
}
/* 「支払い」テキスト */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label[for="payment_method_stripe"]::after {
	content: "支払い" !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #5f5054 !important;
	letter-spacing: .02em;
}

/* ── ページ上部の大見出し「支払い」を非表示 ──
   （チェックアウトページのタイトル。テーマ/Elementor両対応で候補を広めに） */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .woocommerce-products-header__title,
body.woocommerce-checkout .elementor-page-title,
body.woocommerce-checkout .elementor-widget-theme-page-title,
body.woocommerce-checkout .elementor-widget-woocommerce-page-title {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V13 決定版（20260708）── 「ご注文」「支払い」を左の請求先枠と同じ
 *   『見出し（枠外）＋独立した白枠』の体裁に統一。
 *   #order_review は透明コンテナ役にし、中の
 *   「注文概要テーブル」と「payment_box(カード)」にそれぞれ白枠を持たせる。
 *   ※ GPay/ApplePay（上部Express）には一切触れない。
 * ═══════════════════════════════════════════════════════════════ */

/* #order_review 自体は枠・背景・paddingを外して透明コンテナに */
.woocommerce-checkout #order_review {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ── ご注文: 見出しを枠の外に＋注文概要テーブルを独立した白枠に ── */
.woocommerce-checkout #order_review_heading {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 2px !important;
	margin: 0 0 12px !important;
}
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table__wrapper {
	background: #fff !important;
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 22px rgba(201,164,106,.10) !important;
	padding: 22px !important;
	margin: 0 0 20px !important;
}

/* ── 支払い: li枠を消し、見出しを枠の外に、payment_boxを独立した白枠に ── */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* 「支払い」ラベル（§V12のピンクバー見出し）を枠外の見出しとして配置 */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label[for="payment_method_stripe"] {
	margin: 0 0 12px !important;
	padding: 0 0 2px !important;
}
/* payment_box（カード＋保存チェック）を独立した白枠に */
.woocommerce-checkout #payment div.payment_box {
	background: #fff !important;
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-top: 1px solid var(--cc-line, #F0DCE4) !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 22px rgba(201,164,106,.10) !important;
	padding: 22px !important;
	margin: 0 !important;
}

/* ── クーポン欄が右カラム（合計の下・支払いの上）に来たときの体裁 ── */
.woocommerce-checkout #order_review .checkout_coupon,
.woocommerce-checkout #order_review .woocommerce-form-coupon,
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-checkout-review-order .checkout_coupon {
	margin: 0 0 16px !important;
	width: 100% !important;
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
 * §V14（20260708）── 見出しとクーポンを「枠の中」に（左の請求先枠と同じ）
 *   §V13で枠を分けて見出しを外に出したのを撤回。
 *   #order_review を1つの白枠にして、その中に
 *   「｜ご注文＋テーブル＋合計＋クーポン＋｜支払い＋カード」を内包する。
 *   見出し（｜ご注文／｜支払い）とクーポンが全部枠の中に収まる形。
 *   ※ GPay/ApplePay（上部Express）には触れていない。
 * ═══════════════════════════════════════════════════════════════ */

/* ご注文見出し: 枠の上部に連結（背景白＋上border＋上角丸で枠の一部に） */
.woocommerce-checkout #order_review_heading {
	background: #fff !important;
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-bottom: none !important;
	border-radius: 18px 18px 0 0 !important;
	box-shadow: none !important;
	padding: 22px 24px 10px !important;
	margin: 0 !important;
}
/* #order_review: 枠の下部。中身（テーブル/クーポン/支払い/ボタン）を全部内包 */
.woocommerce-checkout #order_review {
	position: static !important;
	background: #fff !important;
	border: 1px solid var(--cc-line, #F0DCE4) !important;
	border-top: none !important;
	border-radius: 0 0 18px 18px !important;
	box-shadow: 0 6px 22px rgba(201,164,106,.10) !important;
	padding: 0 24px 24px !important;
	margin: 0 0 20px !important;
}
/* 注文テーブルwrapper: 枠なし（#order_reviewが枠役なので） */
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table__wrapper {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* クーポン: 枠の中に。上に区切り線で「合計の下」に馴染ませる */
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle {
	background: transparent !important;
	border: none !important;
	border-top: 1px solid var(--cc-line, #F0DCE4) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 16px 0 0 !important;
	padding: 16px 0 0 !important;
	width: 100% !important;
	box-sizing: border-box;
}
.woocommerce-checkout #order_review .checkout_coupon {
	background: var(--cc-ivory, #FFF9F5) !important;
	border: 1px dashed var(--cc-beige, #EBCFB7) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	margin: 12px 0 4px !important;
	padding: 16px !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* 支払い: #payment/methods/li/payment_box の枠を全部消す（#order_reviewが枠役） */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe,
.woocommerce-checkout #payment div.payment_box {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* payment_boxの区切り線も消す（支払い見出しの区切り線に一本化） */
.woocommerce-checkout #payment div.payment_box {
	border-top: none !important;
}
/* ｜支払い見出し: 枠の中のセクション見出し。上に区切り線で「クーポンの下」に */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label[for="payment_method_stripe"] {
	border-top: 1px solid var(--cc-line, #F0DCE4) !important;
	margin: 16px 0 14px !important;
	padding: 16px 0 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V15（20260708）── 列の内側寄せ・数量列の整列・クーポン初期非表示・保存チェック整列
 * ═══════════════════════════════════════════════════════════════ */

/* ── ① 注文テーブルの項目列・金額列をもう少し内側に（行の左右余白を増やす）── */
.woocommerce-checkout #order_review .shop_table thead tr {
	padding: 0 12px 10px !important;
}
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
	padding: 12px 12px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal,
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dsub-row,
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount,
.woocommerce-checkout #order_review .shop_table tfoot tr.fee,
.woocommerce-checkout #order_review .shop_table tfoot tr.tax-total,
.woocommerce-checkout #order_review .shop_table tfoot tr.tax-rate {
	padding: 10px 12px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	padding: 14px 12px 4px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping {
	padding: 12px 12px !important;
}

/* ── ② 「数量」と「1」を縦に揃える（thead/tbodyの各列をnth-childで厳密一致）── */
.woocommerce-checkout #order_review .shop_table thead tr,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
	gap: 8px !important;
}
/* 1列目：商品名（伸縮・左寄せ） */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(1),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1) {
	flex: 1 1 auto !important;
	text-align: left !important;
	box-sizing: border-box;
}
/* 2列目：数量（固定幅・中央）← ここを縦に揃える */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2) {
	flex: 0 0 20% !important;
	text-align: center !important;
	box-sizing: border-box;
}
/* 3列目：小計（固定幅・右寄せ） */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3) {
	flex: 0 0 26% !important;
	text-align: right !important;
	box-sizing: border-box;
}

/* ── ③ クーポン入力欄を初期非表示に（「ここをクリック」で展開・JSはcraftcos.php v10）──
   ※ !important は付けない（JSのslideToggle/インラインstyleが制御するため） */
.woocommerce-checkout #order_review .checkout_coupon {
	display: none;
}

/* ── ④ 保存チェック: □は動かさず、文章を□と同じ行から始める（上端揃え）── */
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout #payment div.payment_box p.woocommerce-SavedPaymentMethods-saveNew {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
}
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	flex: 0 0 auto !important;
	margin: 2px 0 0 !important;
	position: static !important;
}
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew label {
	flex: 1 1 auto !important;
	margin: 0 !important;
	line-height: 1.5 !important;
	display: block !important;
	text-align: left !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V16（20260708）── クーポン入力欄(ShopEngine構造)の初期非表示・保存チェックの位置
 * ═══════════════════════════════════════════════════════════════ */

/* ── クーポン入力欄を初期非表示に（ShopEngine構造）──
   ShopEngineはクーポンを #order_review 直下の p.form-row-first(入力)・
   p.form-row-last(適用ボタン) として出力する。これを初期非表示にし、
   「ここをクリックしてコードを入力」で開閉（JSは craftcos.php v11）。
   ※ 請求先の form-row は #customer_details 内なので、#order_review直下限定で無影響。
   ※ !important は付けない（JSのslideToggle/インラインstyleが制御するため）。 */
.woocommerce-checkout #order_review > p.form-row.form-row-first,
.woocommerce-checkout #order_review > p.form-row.form-row-last {
	display: none;
}

/* ── 保存チェックを少し下にずらす（□ごと。上のカード欄はいじらない）── */
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew {
	margin-top: 14px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V17（20260708）── クーポン開時の余白詰め・保存チェックの上余白
 * ═══════════════════════════════════════════════════════════════ */

/* ── ① クーポンを開いた時、トグル文と入力欄の間の余白を狭める ──
   ShopEngineの .shopengine-woocommerce-info に margin-bottom:32px が付いていて
   トグル文と「クーポンコード」入力欄の間が空きすぎるため詰める。 */
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .shopengine-woocommerce-info,
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .woocommerce-info {
	margin-bottom: 8px !important;
}
.woocommerce-checkout #order_review > p.form-row.form-row-first {
	margin-top: 0 !important;
}

/* ── ② 保存チェックの上に余白 ──
   marginは親<fieldset>との間でcollapse（相殺）して効かないため、paddingで確実に。
   □＋文章ブロックの上に余白が入り、カード欄から離れる。 */
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew {
	margin-top: 0 !important;
	padding-top: 16px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V18（20260708）── 保存チェック上余白・配送ラジオのカスタム・クーポン横並び
 * ═══════════════════════════════════════════════════════════════ */

/* ── ① 保存チェックの上に余白 ──
   p側のmargin/paddingが相殺で効かなかったため、カード欄(#wc-stripe-upe-form)に
   下マージンを付けて、カードと保存チェックの間に確実に余白を作る。 */
.woocommerce-checkout #payment #wc-stripe-upe-form,
.woocommerce-checkout #payment fieldset.wc-upe-form {
	margin-bottom: 18px !important;
}

/* ── ② 配送ラジオを「ピンク円＋小さい白丸」にカスタム描画 ──
   PCでaccent-colorが効かず黒丸になる問題を、ネイティブ描画を無効化して全ブラウザ統一で解決。 */
.woocommerce-checkout #order_review #shipping_method li input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	border: 2px solid var(--cc-line, #F0DCE4) !important;
	border-radius: 50% !important;
	background: #fff !important;
	position: relative !important;
	cursor: pointer;
	flex: 0 0 auto !important;
	margin: 0 !important;
	box-shadow: none !important;
	vertical-align: middle;
}
.woocommerce-checkout #order_review #shipping_method li input[type="radio"]:checked {
	border-color: var(--cc-pink, #F58BB6) !important;
	background: var(--cc-pink, #F58BB6) !important;
}
.woocommerce-checkout #order_review #shipping_method li input[type="radio"]:checked::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: #fff !important;
}

/* ── ③ クーポン「適用」ボタンを入力欄の右に（横並び）──
   JS(craftcos.php v12)が入力とボタンを .cc-coupon-wrap で囲むので、それをflex横並びに。 */
.woocommerce-checkout #order_review .cc-coupon-wrap {
	gap: 8px;
	align-items: stretch;
	margin-top: 8px;
}
.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-first {
	flex: 1 1 auto !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}
.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-last {
	flex: 0 0 auto !important;
	margin: 0 !important;
	display: flex !important;
	align-items: stretch;
}
/* 適用ボタンの高さを入力欄に合わせる */
.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row-last button {
	height: 100% !important;
	white-space: nowrap;
	margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §V19（20260708）── スマホ横幅対応（はみ出し防止・左右余白の統一）
 *   枠やpaddingを付けた要素が画面幅をオーバーして「デカく」見える問題を、
 *   box-sizingの徹底とスマホ用の左右余白・全幅指定で解消する。
 * ═══════════════════════════════════════════════════════════════ */

/* box-sizingを徹底（padding/borderで幅がはみ出すのを防ぐ・全幅共通） */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields,
.woocommerce-checkout #payment,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table__wrapper {
	box-sizing: border-box !important;
}

@media (max-width: 820px) {
	/* 横スクロール・はみ出し防止 */
	.woocommerce-checkout,
	.woocommerce-checkout .woocommerce,
	.woocommerce-cart .woocommerce {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}
	/* チェックアウトフォーム全体に左右余白＋全幅に収める */
	.woocommerce-checkout form.checkout {
		padding-left: 16px !important;
		padding-right: 16px !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 auto !important;
	}
	/* 左右カラム・見出し・支払いを全幅で画面内に収める */
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #payment {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	/* G Pay(Express Checkout)・「もしくは」区切りもコンテナ内に収める */
	.woocommerce-checkout #wc-stripe-express-checkout-element,
	.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* 入力欄・select・textareaを全幅で画面内に */
	.woocommerce-checkout input.input-text,
	.woocommerce-checkout select,
	.woocommerce-checkout textarea,
	.woocommerce-checkout .select2-container {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	/* 姓・名／郵便番号・都道府県の横並びが窮屈にならないよう間隔を確保 */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		gap: 0 10px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §V20（20260708）── スマホの左右ぐらつき（横スクロール）を止める
 *   どこかの要素が画面幅を数px超えて横スクロールが発生していたため、
 *   body/htmlレベルで横スクロールを止め、全幅要素を画面内に収める。
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
	/* body/htmlレベルで横スクロールを封じる（左右のぐらつき解消の要） */
	html,
	body.woocommerce-checkout {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}
	/* はみ出しやすい全幅要素を画面幅に収める（G Pay・区切り・各ブロック） */
	.woocommerce-checkout .woocommerce,
	.woocommerce-checkout form.checkout,
	.woocommerce-checkout #wc-stripe-express-checkout-element,
	.woocommerce-checkout #wc-stripe-express-checkout-button-separator,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #payment,
	.woocommerce-checkout #payment div.payment_box,
	.woocommerce-checkout .cc-coupon-wrap {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* 保険: チェックアウト内の直下ブロックが画面幅を超えないように */
	.woocommerce-checkout form.checkout > * {
		max-width: 100% !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §V21（20260708）── スマホの注文テーブル: 商品名列を広げて改行しにくく
 *   数量列・小計列を狭めることで商品名列(nth-child(1)=flex auto)が広がり、
 *   「ハートチャーム（テスト）」等が1行に収まりやすくなる。
 *   併せて数量列も右寄りに移動する。
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
	/* 数量列を狭める（右寄りに） */
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2) {
		flex: 0 0 15% !important;
	}
	/* 小計列を狭める */
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3) {
		flex: 0 0 20% !important;
	}
	/* 商品名列（nth-child(1)=flex auto）は残り全部を使うので自動的に広がる。
	   念のため改行の折り返しは許可しつつ、幅が広いので通常は1行に収まる。 */
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1) {
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere;
	}
	/* 行の左右余白を少し詰めて商品名にスペースを回す */
	.woocommerce-checkout #order_review .shop_table thead tr,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
		gap: 6px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §V22（20260708）── 数量列の厳密な整列＋商品名列をさらに広く
 * ═══════════════════════════════════════════════════════════════ */

/* 商品名列を flex 1 1 0（basis 0）にして、内容の長さに依存せず列幅を固定。
   → thead「商品」と tbody「ハートチャーム…」で列幅が一致し、
     「数量」ヘッダーと数値「1」が縦にピッタリ揃う。 */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(1),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1) {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

@media (max-width: 820px) {
	/* 数量列をさらに狭める（商品名にスペースを回す） */
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2) {
		flex: 0 0 13% !important;
	}
	/* 小計列を狭める */
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3) {
		flex: 0 0 18% !important;
	}
	/* テーブルの左右余白を少し詰めて商品名にスペースを回す */
	.woocommerce-checkout #order_review .shop_table thead tr,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
		padding-left: 8px !important;
		padding-right: 8px !important;
		gap: 5px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §V23（20260708）── 注文テーブルの列を完全統一（「1」を数量に揃える）
 *   旧cc-col-*クラス指定とnth-child指定が混在してヘッダー/商品行でズレていたため、
 *   両方を同一ルールで指定し、thead/tbodyの列幅を完全一致させる。
 *   併せてスマホで商品名列を最大化し、改行しにくくする。
 * ═══════════════════════════════════════════════════════════════ */

/* 商品名列（1列目）: 内容非依存で残り全部（nth-child・cc-col-name 両対応） */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(1),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1),
.woocommerce-checkout #order_review .shop_table thead th.cc-col-name,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-name {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	text-align: left !important;
}
/* 数量列（2列目）: 固定幅・中央（thead/tbody一致で「数量」と「1」が縦に揃う） */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2),
.woocommerce-checkout #order_review .shop_table thead th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-qty {
	flex: 0 0 14% !important;
	width: 14% !important;
	text-align: center !important;
}
/* 小計列（3列目）: 固定幅・右 */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3),
.woocommerce-checkout #order_review .shop_table thead th.cc-col-total,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-total {
	flex: 0 0 20% !important;
	width: 20% !important;
	text-align: right !important;
}

@media (max-width: 820px) {
	/* スマホ: 商品名列を最大化（数量12%・小計17%） */
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2),
	.woocommerce-checkout #order_review .shop_table thead th.cc-col-qty,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-qty {
		flex: 0 0 12% !important;
		width: 12% !important;
	}
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3),
	.woocommerce-checkout #order_review .shop_table thead th.cc-col-total,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-total {
		flex: 0 0 17% !important;
		width: 17% !important;
	}
	/* 商品名を13pxにして改行しにくく＋行の左右余白をさらに詰める */
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-name {
		font-size: 13px !important;
	}
	.woocommerce-checkout #order_review .shop_table thead tr,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
		padding-left: 6px !important;
		padding-right: 6px !important;
		gap: 4px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §V24（20260708）── 注文テーブルの列をpx固定で確実に（商品名を最大化）
 *   DevToolsで商品名セルが td.product-name.cc-col-name と確定。
 *   %指定が効きにくかったため、数量・小計をpx固定にして商品名列に確実にスペースを回す。
 *   セレクタは product-* / cc-col-* / nth-child の全部を網羅して取りこぼしを防ぐ。
 * ═══════════════════════════════════════════════════════════════ */

/* 数量列（2列目）: px固定・中央 */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2),
.woocommerce-checkout #order_review .shop_table thead th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table thead th.product-quantity,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-qty,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-quantity {
	flex: 0 0 46px !important;
	width: 46px !important;
	min-width: 46px !important;
	max-width: 46px !important;
	text-align: center !important;
	box-sizing: border-box;
}
/* 小計列（3列目）: px固定・右 */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3),
.woocommerce-checkout #order_review .shop_table thead th.cc-col-total,
.woocommerce-checkout #order_review .shop_table thead th.product-total,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-total,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-total {
	flex: 0 0 66px !important;
	width: 66px !important;
	min-width: 66px !important;
	max-width: 66px !important;
	text-align: right !important;
	box-sizing: border-box;
}
/* 商品名列（1列目）: 残り全部（数量・小計を引いた分すべて） */
.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(1),
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1),
.woocommerce-checkout #order_review .shop_table thead th.cc-col-name,
.woocommerce-checkout #order_review .shop_table thead th.product-name,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-name,
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
}

@media (max-width: 820px) {
	/* スマホ: 数量・小計をさらに詰めて商品名を最大化＋商品名13px＋余白詰め */
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(2),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(2),
	.woocommerce-checkout #order_review .shop_table thead th.cc-col-qty,
	.woocommerce-checkout #order_review .shop_table thead th.product-quantity,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-qty,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-quantity {
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
	}
	.woocommerce-checkout #order_review .shop_table thead tr > *:nth-child(3),
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(3),
	.woocommerce-checkout #order_review .shop_table thead th.cc-col-total,
	.woocommerce-checkout #order_review .shop_table thead th.product-total,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-total,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-total {
		flex: 0 0 60px !important;
		width: 60px !important;
		min-width: 60px !important;
		max-width: 60px !important;
	}
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.cc-col-name,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-name,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item > *:nth-child(1) {
		font-size: 13px !important;
	}
	.woocommerce-checkout #order_review .shop_table thead tr,
	.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
		padding-left: 6px !important;
		padding-right: 6px !important;
		gap: 4px !important;
	}
}
/* ═══════════════════════════════════════════════════════════════
 * 17. 【CART / お買い物カゴ】着せ替え（★v25・20260708）
 *     checkout.css は is_cart() でも読み込まれる（craftcos.php §12-2）。
 *     カート専用ルールは必ず .woocommerce-cart スコープで書き、
 *     チェックアウトページに影響させない。
 * ═══════════════════════════════════════════════════════════════ */

/* ── @. タイトル「お買い物カゴ」の左端を本体と揃える（★v28）──
 *  DevTools確認: <main id="content"> > div.page-header > h1.entry-title
 *  page-header がフル幅(1140px)なので h1 だけ左にはみ出ていた。
 *  本体(.woocommerce)と同じ 900px 中央寄せにして左端を一致させる。
 *  ※本体幅(§17 A手前の 900px)を変えたら、ここも同じ数字に合わせること。 */
.woocommerce-cart .page-header {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ── A. 「お買い物カゴの合計」を全幅に ──
 *  Woo標準/ShopEngineの float:right・width:48% を解除して、上の商品
 *  テーブルと同じ全幅で縦に揃える。もしCSSで効かない場合は、合計が
 *  Elementorの右カラム(50%)に入っている可能性 → カラム幅を100%に。 */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart_totals {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	box-sizing: border-box;
}
.woocommerce-cart .cart-collaterals::after {
	content: "";
	display: table;
	clear: both;
}
/* 「クロスセル（こちらもおすすめ）」が並ぶ場合の幅も解除 */
.woocommerce-cart .cart-collaterals .cross-sells {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* ── B. 合計ボックスの枠をチェックアウトと同じ世界観に ──
 *  白背景＋--cc-line 1px枠＋radius18＋淡いゴールドの影。見出し(h2::before
 *  のピンクバー)は既存ルールがあるので触らない。 */
.woocommerce-cart .cart_totals table.shop_table {
	background: #fff;
	border: 1px solid var(--cc-line, #F0DCE4);
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(201,164,106,.08);
	overflow: hidden;
	border-collapse: separate !important;
	border-spacing: 0;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	background: transparent;
	color: var(--cc-ink, #6B5A60);
	border-top: 1px solid var(--cc-line, #F0DCE4);
	border-bottom: none;
	padding: 14px 18px;
	vertical-align: top;
}
/* 先頭行（小計）は上罫線なし */
.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
	border-top: none;
}
/* 見出し列（小計/配送/合計）の幅と太さ */
.woocommerce-cart .cart_totals table.shop_table th {
	width: 32%;
	font-weight: 700;
	white-space: nowrap;
}
/* 合計行を強調（ピンクの区切り線＋ピンクの金額） */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 2px solid var(--cc-pink-soft, #FBC3D8);
	font-size: 16px;
}
.woocommerce-cart .cart_totals .order-total .amount {
	color: var(--cc-pink, #F58BB6);
	font-weight: 800;
}

/* ── C. 送料計算フォーム（v30: 都道府県プルダウンのみ）──
 *  craftcos.php §20 で 国・郵便番号・市区町村 をPHPレベルで非表示にし、
 *  都道府県を選んだ瞬間に送料が再計算される（更新ボタン不要）。
 *  ここでは残った都道府県セレクトを整え、更新ボタンを隠す。
 *  ※ PHPフィルタが効かない場合の保険として、旧フィールドのCSS非表示も残す。 */
.woocommerce-cart .shipping-calculator-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
}
/* 国は【CSSでのみ】隠す（PHPで無効化すると選んだ都道府県が東京都で上書きされる。
   craftcos.php §20-1 のコメント参照）。値は JP が正しく送信される。
   郵便番号・市区町村はPHPで消えるが、保険としてCSSでも隠す。 */
.woocommerce-cart #calc_shipping_country_field,
.woocommerce-cart p#calc_shipping_country_field,
.woocommerce-cart #calc_shipping_postcode_field,
.woocommerce-cart p#calc_shipping_postcode_field,
.woocommerce-cart #calc_shipping_city_field,
.woocommerce-cart p#calc_shipping_city_field {
	display: none !important;
}
/* 都道府県セレクト（唯一の入力） */
.woocommerce-cart #calc_shipping_state_field {
	margin: 0;
	width: 100%;
}
.woocommerce-cart #calc_shipping_state_field select,
.woocommerce-cart #calc_shipping_state_field .select2-container {
	width: 100% !important;
	box-sizing: border-box;
}
/* v31: 更新ボタンは隠さず残す。
   都道府県を選べばJSが自動で再計算するので普段は押す必要がないが、
   JSが動かない環境（拡張機能・エラー時）でも押せば計算できる保険として表示。
   ※ v30では display:none にしていたが、隠した要素をJSでclickする実装と競合し
     無限リロードの一因になったため撤回。 */
.woocommerce-cart .shipping-calculator-form p:has(button[name="calc_shipping"]),
.woocommerce-cart .shipping-calculator-form > p:not([id]) {
	margin: 0;
	text-align: right;
}

/* 「更新」ボタンをCraftCosトーン（小さめのピンク丸ボタン）に */
.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"],
.woocommerce-cart .shipping-calculator-form button.button {
	background: linear-gradient(135deg, var(--cc-pink, #F58BB6), #f7a3c4);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(245,139,182,.28);
	transition: transform .15s;
}
.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover,
.woocommerce-cart .shipping-calculator-form button.button:hover {
	transform: translateY(-1px);
}

/* 「送料を計算」トグルリンクをピンクのトーンに */
.woocommerce-cart .shipping-calculator-button {
	color: var(--cc-pink, #F58BB6);
	font-weight: 600;
	text-decoration: underline;
}

/* ── D. スマホ：合計ボックスと送料計算の横はみ出し防止 ── */
@media (max-width: 820px) {
	.woocommerce-cart .cart_totals table.shop_table th,
	.woocommerce-cart .cart_totals table.shop_table td {
		padding: 12px 14px;
	}
	.woocommerce-cart .cart_totals table.shop_table th {
		width: 34%;
	}
	/* v30: 更新ボタンは §20 で不要になり非表示のため、ここでの調整も削除 */
}

/* ═══════════════════════════════════════════════════════════════
 * 18. 【CART / スマホ】商品行をカード風に（★v29・20260708）
 *     案1: サムネ左・情報右。×は右上。数量は丸ピル型ステッパー。
 *     Woo標準のレスポンシブ（tdを縦積みし td::before に "商品:" 等の
 *     data-title ラベルを出す）を打ち消して、CSS Gridでカード化する。
 *     ★DOMがShopEngine独自の場合は効かない箇所が出るのでDevToolsで要確認。
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

	/* ── テーブルを解体してカードの器に ── */
	.woocommerce-cart .woocommerce-cart-form table.shop_table,
	.woocommerce-cart table.shop_table.cart {
		display: block;
		width: 100%;
		border: none;
		background: transparent;
		box-shadow: none;
		border-collapse: separate !important;
	}
	.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
		display: none; /* 「商品/金額/数量/小計」のヘッダ行はカードでは不要 */
	}
	.woocommerce-cart .woocommerce-cart-form table.shop_table tbody,
	.woocommerce-cart table.shop_table.cart tbody {
		display: block;
		width: 100%;
	}

	/* ── 商品1件＝1カード ──
	   v30: footを qty / sub の2セルに分割。同一セルへの重ね置き＋justify-selfは
	        ブラウザによって位置がブレるため、明示的に列を分けて確実に左右へ配置。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 78px auto 1fr;   /* サムネ / 数量 / 小計 */
		grid-template-areas:
			"thumb name name"
			"thumb qty  sub";
		column-gap: 13px;
		row-gap: 8px;
		align-items: start;
		background: #fff;
		border: 1px solid var(--cc-line, #F0DCE4);
		border-radius: 18px;
		box-shadow: 0 6px 20px rgba(201,164,106,.08);
		padding: 14px;
		margin: 0 0 12px;
		box-sizing: border-box;
	}
	/* 各tdをブロック化し、テーマのラベル（商品: 金額: 等）を消す */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
		display: block;
		width: auto !important;
		border: none;
		padding: 0;
		text-align: left !important;
		background: transparent;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td::before {
		content: none !important;   /* data-titleラベルを打ち消す */
	}

	/* ═══ ★v41(A案): オプション行＝親からぶら下がる小さめカード ═══ */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child {
		margin: -4px 0 12px 26px;              /* 親カードに寄せてインデント */
		padding: 10px 12px;
		border-radius: 12px;
		grid-template-columns: 44px auto 1fr;  /* サムネ小さめ */
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child::before {
		content: "";
		position: absolute;
		left: -15px;
		top: -9px;   /* ★v42①: 親カードの下端(すき間8px)の中から始める＝親に食い込まない */
		width: 15px;
		height: 34px;
		border-left: 2.5px solid #F0B9CE;
		border-bottom: 2.5px solid #F0B9CE;
		border-bottom-left-radius: 12px;
		pointer-events: none;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-thumbnail {
		width: 44px !important;
		height: 44px;
		border-radius: 9px;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-name,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-name a {
		font-size: 12.5px;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-subtotal {
		font-size: 13px;
	}

	/* ★v42②: 数量ステッパーをひと回り小さく（スマホカート限定） */
	.woocommerce-cart .cc-qty .cc-qty-btn { width: 28px; height: 28px; font-size: 14px; }
	.woocommerce-cart .cc-qty input.qty { width: 26px !important; font-size: 12.5px; }
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity input.qty {
		width: 56px; height: 28px; font-size: 12.5px;
	}

	/* ★v42③: オプション行は数量エリアをカード左端まで広げる（注記が右に寄りすぎないように） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child {
		grid-template-areas:
			"thumb name name"
			"qty   qty  sub";
	}
	/* ★v42③: オプション行の「加工費は1回分のみ」注記の見た目（文字はPHP側） */
	.woocommerce-cart .cc-co-qty-fixed { font-size: 13px; font-weight: 700; color: #5f5054; }
	.woocommerce-cart .cc-co-qty-note {
		display: block; margin: 0; font-size: 10px; font-weight: 600; line-height: 1.55;
		color: #a3928f; background: #FBF2F6; border-radius: 10px; padding: 4px 10px;
		max-width: 285px; white-space: normal; /* ★長文OK・小計(¥)の列を潰さない幅 */
	}
	/* ★v43②: 小計(¥)を注記の高さに合わせて中央寄せ */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-subtotal {
		align-self: center;
	}
	/* （v44: v43①のセット行引き出しは撤回＝元の位置のまま） */

	/* サムネ（左・2行ぶち抜き） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-thumbnail {
		grid-area: thumb;
		width: 78px !important;
		height: 78px;
		border-radius: 14px;
		overflow: hidden;
		border: 1px solid var(--cc-line, #F0DCE4);
		display: block !important; /* Wooはスマホでサムネを隠すテーマがある */
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		margin: 0;
	}

	/* 商品名＋バリエーション（右上）。×ボタンと重ならないよう右に余白 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name {
		grid-area: name;
		padding-right: 26px !important;
		min-width: 0;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name a {
		font-weight: 700;
		font-size: 14.5px;
		line-height: 1.45;
		color: var(--cc-ink, #6B5A60);
		text-decoration: none;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name .variation,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name dl.variation {
		font-size: 11.5px;
		color: #9c8891;
		margin: 3px 0 0;
		line-height: 1.5;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name dl.variation dt,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name dl.variation dd {
		display: inline;
		margin: 0;
		font-weight: 400;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name dl.variation dd {
		margin-right: 6px;
	}

	/* 数量（左下）と小計（右下）。v30: 別セルなので確実に左右へ分かれる */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity {
		grid-area: qty;
		align-self: center;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal {
		grid-area: sub;
		align-self: center;
		font-weight: 800;
		font-size: 15.5px;
		text-align: right !important;
	}
	/* 単価（金額列）はカードでは省略（小計と重複するため） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-price {
		display: none;
	}

	/* 数量ステッパー風の入力（ネイティブのスピナーは消す） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity input.qty {
		-webkit-appearance: none;
		-moz-appearance: textfield;
		appearance: none;
		width: 66px;
		height: 34px;
		text-align: center;
		font-size: 13.5px;
		font-weight: 700;
		color: var(--cc-ink, #6B5A60);
		background: var(--cc-ivory, #FFF9F5);
		border: 1px solid var(--cc-line, #F0DCE4);
		border-radius: 999px;
		box-sizing: border-box;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* ×ボタン（カード右上・丸） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 24px !important;
		height: 24px;
		padding: 0;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove a.remove {
		display: grid !important;
		place-items: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: 1px solid var(--cc-line, #F0DCE4);
		background: #fff !important;
		color: #c9a !important;
		font-size: 13px;
		line-height: 1;
		margin: 0;
	}

	/* ── クーポン行（カードの下・横並び） ── */
	.woocommerce-cart table.shop_table.cart tbody tr:not(.cart_item) td.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0;
		border: none;
		background: transparent;
	}
	.woocommerce-cart td.actions .coupon {
		display: flex;
		gap: 8px;
		width: 100%;
		padding: 0;
		border: none;
	}
	.woocommerce-cart td.actions .coupon input#coupon_code {
		flex: 1 1 auto;
		min-width: 0;
		border: 1px solid var(--cc-line, #F0DCE4);
		border-radius: 999px;
		padding: 11px 15px;
		font-size: 13px;
		background: #fff;
		box-sizing: border-box;
	}
	.woocommerce-cart td.actions .coupon button {
		flex: 0 0 auto;
		border: 1px solid var(--cc-pink-soft, #FBC3D8);
		background: #fff;
		color: var(--cc-pink, #F58BB6);
		border-radius: 999px;
		padding: 0 17px;
		font-size: 12.5px;
		font-weight: 700;
		white-space: nowrap;
	}
	/* 「お買い物カゴを更新」ボタンはフル幅で下に */
	.woocommerce-cart td.actions button[name="update_cart"] {
		width: 100%;
		margin-top: 4px;
		border-radius: 999px;
		padding: 12px;
		font-weight: 700;
		box-sizing: border-box;
	}

	/* ── 合計ボックス：ラベル（小計/配送/合計）を復活させる ──
	   v29では td::before を content:none で消したが、Wooのレスポンシブは
	   「thを隠して td::before にラベルを出す」仕組みのため、ラベルが全消滅していた。
	   v30: th を表示に戻し、重複する td::before だけを消す。 */
	.woocommerce-cart .cart_totals table.shop_table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 12px;
	}
	.woocommerce-cart .cart_totals table.shop_table th {
		display: block !important;
		width: auto;
		flex: 0 0 auto;
		visibility: visible !important;
	}
	.woocommerce-cart .cart_totals table.shop_table td {
		display: block;
		flex: 1 1 auto;
		text-align: right;
		min-width: 0;
	}
	/* 配送欄だけは中身（ラジオ・セレクト）が広いので左寄せでフル幅に */
	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
		flex: 1 1 100%;
		text-align: left;
	}
	/* td::before の重複ラベルのみ打ち消す（thが本物のラベルになったため） */
	.woocommerce-cart .cart_totals table.shop_table td::before {
		content: none !important;
	}
}

/* ═══════════════════════════════════════════════
 * v32（20260710）スマホ実機フィードバック反映
 * ═══════════════════════════════════════════════ */

/* ── ページタイトルを縮小・かわいく（カート/チェックアウト共通） ── */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-header h1,
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-header h1 {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #5f5054 !important;
	letter-spacing: .05em;
	line-height: 1.4 !important;
	margin-bottom: 4px !important;
}
.woocommerce-cart .entry-title::after,
.woocommerce-cart .page-header h1::after,
.woocommerce-checkout .entry-title::after,
.woocommerce-checkout .page-header h1::after {
	content: "";
	display: block;
	width: 36px; height: 4px;
	margin-top: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, #F58BB6, #CDB8EA);
}

/* 「お買い物カゴの合計」(h2) も縮小＋ピンクドット */
.woocommerce-cart .cart_totals > h2,
.woocommerce-cart .cart_totals h2 {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #5f5054 !important;
	letter-spacing: .04em;
	margin: 0 0 12px !important;
}
.woocommerce-cart .cart_totals h2::before {
	content: "";
	display: inline-block;
	width: 9px; height: 9px;
	margin-right: 8px;
	border-radius: 50%;
	background: #F58BB6;
	vertical-align: 2px;
}

/* ── カートの配送方法: 白カード化・左寄せ（チェックアウトと同じ世界観） ── */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td {
	background: transparent !important;
	text-align: left !important;
}
.woocommerce-cart ul#shipping_method,
.woocommerce-cart ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.woocommerce-cart ul#shipping_method li,
.woocommerce-cart ul.woocommerce-shipping-methods li {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 12px;
	padding: 11px 14px;
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	text-align: left;
}
.woocommerce-cart ul#shipping_method li:has(input:checked) {
	border-color: #F58BB6;
	box-shadow: 0 0 0 2px rgba(245, 139, 182, .14);
}
.woocommerce-cart ul#shipping_method input[type="radio"] {
	accent-color: #F58BB6;
	margin: 3px 0 0;
	flex-shrink: 0;
}
.woocommerce-cart ul#shipping_method label {
	font-size: 13px;
	line-height: 1.65;
	color: #5f5054;
	text-align: left !important;
	margin: 0;
}
.woocommerce-cart ul#shipping_method .amount {
	font-weight: 700;
	color: #F58BB6;
}

/* 「配送設定は…」と「送料を計算」を左寄せ・控えめに */
.woocommerce-cart .woocommerce-shipping-destination {
	text-align: left !important;
	font-size: 12px;
	color: #a3928f;
	margin: 6px 0 2px;
}
.woocommerce-cart .shipping-calculator-button {
	float: none;
	display: inline-block;
	margin-top: 4px;
	color: #F58BB6 !important;
	font-weight: 700;
}
/* クリック時の黒い枠 → ピンクの柔らかいフォーカス枠に */
.woocommerce-cart .shipping-calculator-button:focus,
.woocommerce-cart .shipping-calculator-button:focus-visible {
	outline: 2px solid rgba(245, 139, 182, .55) !important;
	outline-offset: 3px;
	border-radius: 8px;
}

/* ── 遠方負担分の注記行（craftcos.php v21 §25） ── */
.cc-ship-note-row th {
	border: none !important;
	background: transparent !important;
}
.cc-ship-note-row td { text-align: left !important; }
.cc-ship-note {
	text-align: left !important;
	font-size: 11.5px !important;
	color: #a3928f !important;
	line-height: 1.7 !important;
}

/* ── モバイル調整 ── */
@media (max-width: 768px) {
	.woocommerce-cart .entry-title,
	.woocommerce-cart .page-header h1,
	.woocommerce-checkout .entry-title,
	.woocommerce-checkout .page-header h1 {
		font-size: 20px !important;
	}
	.woocommerce-cart .cart_totals h2 { font-size: 15.5px !important; }

	/* 配送方法・注記はスタック表示で全幅・左寄せ */
	.woocommerce-cart .cart_totals .woocommerce-shipping-totals td {
		width: 100% !important;
		text-align: left !important;
	}
	.woocommerce-cart .cc-ship-note-row th { display: none !important; }
	.woocommerce-cart .cc-ship-note-row td,
	.woocommerce-checkout .cc-ship-note-row td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		padding-top: 0 !important;
	}
	.woocommerce-cart .cc-ship-note-row td::before,
	.woocommerce-checkout .cc-ship-note-row td::before {
		content: none !important;
	}
}

/* ═══════════════════════════════════════════════
 * v33（20260710）スマホ実機フィードバック2回目
 * ═══════════════════════════════════════════════ */

/* ── タイトルのアクセントバーをテキストと同じ幅に（「ゴ」まで伸ばす） ── */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-header h1,
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-header h1 {
	display: inline-block; /* ::after の width:100% をテキスト幅にするため */
}
.woocommerce-cart .entry-title::after,
.woocommerce-cart .page-header h1::after,
.woocommerce-checkout .entry-title::after,
.woocommerce-checkout .page-header h1::after {
	width: 100%; /* v32の固定36px→タイトル文字列と同じ幅 */
}

/* ── カート合計テーブルの背景まだら解消（グレー帯・白/グレーの継ぎ目） ── */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tr,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* 行の区切りは淡ピンクの細線で統一（2行目以降の上辺） */
.woocommerce-cart .cart_totals table.shop_table tr + tr > th,
.woocommerce-cart .cart_totals table.shop_table tr + tr > td {
	border-top: 1px solid #F7E7ED !important;
}
/* 注記行は区切り線なしで直前の配送ブロックにそっと続ける */
.woocommerce-cart .cart_totals table.shop_table tr.cc-ship-note-row > th,
.woocommerce-cart .cart_totals table.shop_table tr.cc-ship-note-row > td {
	border-top: 0 !important;
}
/* 合計行: 太めの区切り線＋金額を強調 */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 2px solid #F0DCE4 !important;
	padding-top: 14px !important;
}
.woocommerce-cart .cart_totals .order-total th {
	color: #5f5054 !important;
	font-weight: 700 !important;
}
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total td strong {
	color: #F58BB6 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════
 * v34（20260710）v33のやりすぎ修正
 * ═══════════════════════════════════════════════ */

/* ── 合計ボックスの白カードを復活（v33の透明化はセルだけに留める） ──
   v33の blanket ルールが table 本体の枠まで消していたため、
   テーブル本体にカードの見た目を明示的に再指定する（後勝ち）。 */
.woocommerce-cart .cart_totals table.shop_table {
	background: #fff !important;
	border: 1px solid #F0DCE4 !important;
	border-radius: 18px !important;
	box-shadow: 0 4px 18px rgba(201, 164, 106, .08) !important;
	border-collapse: separate !important; /* 角丸＋内側余白のため */
	border-spacing: 0 !important;
	padding: 8px 18px !important;
	width: 100% !important;
}

/* ── タイトル下線を文字幅ぴったりに（flex親でも効く fit-content 方式） ── */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-header h1,
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-header h1 {
	display: block;            /* inline-blockはflex子で無効化されるためやめる */
	width: fit-content;        /* テキストと同じ幅に縮む → ::after(width:100%)が文字幅に */
	max-width: 100%;
}

/* ═══════════════════════════════════════════════
 * v35（20260710）枠内の区切り線の統一＋ラジオボタンをピンク×白丸に
 * ═══════════════════════════════════════════════ */

/* ── 配送方法のラジオ: 自前描画（未選択=白丸＋ベージュ枠／選択=ピンク） ──
   OS標準描画（黒リング）をやめる。カート・チェックアウト共通。 */
.woocommerce-cart ul#shipping_method input[type="radio"],
.woocommerce-cart ul.woocommerce-shipping-methods input[type="radio"],
.woocommerce-checkout #shipping_method input[type="radio"],
.woocommerce-checkout ul.woocommerce-shipping-methods input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	border: 2px solid #EBCFB7 !important;   /* 未選択: ベージュ枠の白丸 */
	border-radius: 50% !important;
	background: #fff !important;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color .15s ease;
	box-sizing: border-box;
}
.woocommerce-cart ul#shipping_method input[type="radio"]:hover,
.woocommerce-checkout #shipping_method input[type="radio"]:hover {
	border-color: #F58BB6 !important;
}
.woocommerce-cart ul#shipping_method input[type="radio"]:checked,
.woocommerce-cart ul.woocommerce-shipping-methods input[type="radio"]:checked,
.woocommerce-checkout #shipping_method input[type="radio"]:checked,
.woocommerce-checkout ul.woocommerce-shipping-methods input[type="radio"]:checked {
	border-color: #F58BB6 !important;       /* 選択: ピンク枠 */
}
.woocommerce-cart ul#shipping_method input[type="radio"]:checked::after,
.woocommerce-cart ul.woocommerce-shipping-methods input[type="radio"]:checked::after,
.woocommerce-checkout #shipping_method input[type="radio"]:checked::after,
.woocommerce-checkout ul.woocommerce-shipping-methods input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;                              /* 中心にピンクのドット */
	border-radius: 50%;
	background: #F58BB6;
}
.woocommerce-cart ul#shipping_method input[type="radio"]:focus-visible,
.woocommerce-checkout #shipping_method input[type="radio"]:focus-visible {
	outline: 2px solid rgba(245, 139, 182, .45) !important;
	outline-offset: 2px;
}

/* ── モバイル: 合計テーブルの区切り線を「行の上辺1本」に統一 ──
   th/tdの縦積みでセル別ボーダーが短い線／全幅線に分裂して見えるため、
   行(tr)をflex化してセルのボーダーは全て外す。 */
@media (max-width: 768px) {
	.woocommerce-cart .cart_totals table.shop_table tbody { display: block; }

	.woocommerce-cart .cart_totals table.shop_table tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		padding: 14px 0;
		border-top: 1px solid #F7E7ED;
	}
	.woocommerce-cart .cart_totals table.shop_table tbody tr:first-child {
		border-top: 0;
	}
	/* セル側のボーダー・背景・余白はリセット（線はtrの1本だけ） */
	.woocommerce-cart .cart_totals table.shop_table tr > th,
	.woocommerce-cart .cart_totals table.shop_table tr > td {
		display: block;
		border: 0 !important;
		background: transparent !important;
		padding: 0 !important;
		width: auto !important;
	}
	/* 配送行はラベルの下にカードを縦積み（全幅） */
	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals {
		display: block;
	}
	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals > th {
		margin-bottom: 10px;
	}
	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals > td {
		width: 100% !important;
	}
	/* 注記行は配送ブロックの続き（線なし・上詰め） */
	.woocommerce-cart .cart_totals table.shop_table tr.cc-ship-note-row {
		display: block;
		border-top: 0 !important;
		padding-top: 0;
	}
	/* 合計行だけ2pxで強調 */
	.woocommerce-cart .cart_totals table.shop_table tr.order-total {
		border-top: 2px solid #F0DCE4 !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr.order-total > th,
	.woocommerce-cart .cart_totals table.shop_table tr.order-total > td {
		border-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* ═══════════════════════════════════════════════
 * v36（20260710）ズレ対策＋数量ステッパー＋送料を計算の右寄せ
 * ═══════════════════════════════════════════════ */

/* ── 区切り線と配送カードの幅ズレ対策 ──
   線＝trのボーダー（テーブル内側の全幅）に対し、カード側の幅・余白を
   明示して左右端を一致させる。 */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td,
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td > * {
	max-width: 100%;
}
.woocommerce-cart .cart_totals ul#shipping_method,
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}
.woocommerce-cart .cart_totals ul#shipping_method li,
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/* ── カート数量の −＋ ステッパー（craftcos.php v24 §28とセット） ── */
.woocommerce-cart div.quantity.cc-qty {
	display: inline-flex !important;
	align-items: center;
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 999px;
	overflow: hidden;
	padding: 0;
}
.woocommerce-cart .cc-qty .cc-qty-btn {
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: #F58BB6;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}
.woocommerce-cart .cc-qty .cc-qty-btn:hover,
.woocommerce-cart .cc-qty .cc-qty-btn:active { background: #fdeef5; }
.woocommerce-cart .cc-qty input.qty {
	width: 34px !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #5f5054;
	padding: 0 !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce-cart .cc-qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart .cc-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── 「送料を計算」を右寄せ（説明文は左のまま＝読み物は左・操作は右） ── */
.woocommerce-cart a.shipping-calculator-button,
.woocommerce-cart .shipping-calculator-button {
	display: block !important;
	width: fit-content;
	margin-left: auto !important;
	margin-top: 4px;
	float: none;
}

/* ═══════════════════════════════════════════════
 * v37（20260710）モバイル合計ボックスの余白を完全固定＋−ボタンのグレーアウト
 * ═══════════════════════════════════════════════ */

/* ── 数量ステッパー: 下限/上限に達した側のボタンをグレーアウト（PC/スマホ共通） ── */
.woocommerce-cart .cc-qty .cc-qty-btn:disabled {
	color: #DCD0D3 !important;      /* ピンク → 薄グレー */
	background: transparent !important;
	cursor: default !important;
}

/* ── モバイル: 合計テーブルの行間を完全固定（外部CSSの余白を全リセット） ── */
@media (max-width: 768px) {
	/* 全行同じ上下パディング。線は行の上辺1本（v35）のまま */
	.woocommerce-cart .cart_totals table.shop_table tr {
		margin: 0 !important;
		padding: 14px 0 !important;
		min-height: 0 !important;
		height: auto !important;
	}
	/* セルに残る外部CSSの余白・回り込み・擬似要素を全て殺す */
	.woocommerce-cart .cart_totals table.shop_table tr > th,
	.woocommerce-cart .cart_totals table.shop_table tr > td {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		float: none !important;
		clear: none !important;
		min-height: 0 !important;
		height: auto !important;
		line-height: 1.5 !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr > th::before,
	.woocommerce-cart .cart_totals table.shop_table tr > th::after,
	.woocommerce-cart .cart_totals table.shop_table tr > td::before,
	.woocommerce-cart .cart_totals table.shop_table tr > td::after {
		content: none !important;
		display: none !important;
	}
	/* セル内要素の余白も固定（ここが行間ガタつきの主犯になりやすい） */
	.woocommerce-cart .cart_totals table.shop_table td > .amount,
	.woocommerce-cart .cart_totals table.shop_table td > strong,
	.woocommerce-cart .cart_totals table.shop_table td > span {
		margin: 0 !important;
	}
	.woocommerce-cart .cart_totals ul#shipping_method,
	.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
		margin: 0 !important;
	}
	.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
		margin: 10px 0 0 !important;
	}
	.woocommerce-cart .cart_totals form.woocommerce-shipping-calculator {
		margin: 2px 0 0 !important;
	}
	.woocommerce-cart .cart_totals .cc-ship-note { margin: 0 !important; }
	/* 注記行は配送ブロックの続き（上パディングなし・線なし） */
	.woocommerce-cart .cart_totals table.shop_table tr.cc-ship-note-row {
		padding-top: 0 !important;
		border-top: 0 !important;
	}
}

/* ═══════════════════════════════════════════════
 * v38（20260710）モバイル合計ボックスにゆとりを戻す
 *   v37で余白が均等になった代わりに窮屈になったため、対称のまま増量。
 * ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* テーブル内側の上下を少し広く */
	.woocommerce-cart .cart_totals table.shop_table {
		padding: 12px 18px !important;
	}
	/* 行の上下を 14px → 19px に（線の上下とも19pxの対称） */
	.woocommerce-cart .cart_totals table.shop_table tr {
		padding: 19px 0 !important;
	}
	/* 配送ラベルとカードの間・カード同士の間隔もゆったり */
	.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals > th {
		margin-bottom: 12px !important;
	}
	.woocommerce-cart .cart_totals ul#shipping_method,
	.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
		gap: 10px !important;
	}
	/* 説明文・送料を計算・注記の呼吸も少し広めに */
	.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
		margin: 12px 0 0 !important;
	}
	.woocommerce-cart .cart_totals form.woocommerce-shipping-calculator {
		margin: 4px 0 0 !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr.cc-ship-note-row {
		padding-bottom: 19px !important;
	}
	/* 合計行は少しだけ余韻を持たせて締める */
	.woocommerce-cart .cart_totals table.shop_table tr.order-total {
		padding: 20px 0 8px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * 📝【モバイル合計テーブル 余白問題の記録】（v33〜v40・20260710）
 *    再発したらまずここを読むこと。
 * ─────────────────────────────────────────────
 * ■ 症状の変遷と原因
 *  v33: 「小計の下に短い線／配送の上に全幅線」と線が分裂
 *   → 原因: スマホはth/tdが縦積みになるため、セルごとにborder-topを
 *     引くと th幅だけの短い線 と td幅の全幅線 に分かれる。
 *   → 対策: 線はセルではなく【行(tr)のborder-top 1本】に統一する。
 *  v35〜v37: 「小計と線の間だけ広い」等、行間がガタガタ
 *   → 原因: テーマ/ShopEngine/Elementor系の外部CSSがth/tdに
 *     margin・min-height・::before/::after を !important で足していた。
 *   → 対策: 行・セルの margin/padding/border/float/min-height/擬似要素を
 *     全て明示リセットして自分の数値だけにする。
 *  v38→v39: リセットしたはずの行paddingが実機で効かない
 *     （配送thのmarginだけ効き、行のpaddingが0のまま）
 *   → 原因:【!important同士は「詳細度→読み込み順」で勝敗が決まる】。
 *     同点の詳細度だと、後から読み込まれる外部CSSに負ける。
 *   → 対策: セレクタを html body.woocommerce-cart … で始めて詳細度を
 *     引き上げた統合ブロック（下のv40ブロック）を作る。これが常に勝つ。
 * ■ 再発時の診断手順
 *  1) DevToolsで該当のtrを選択 → Computed で padding/border を確認
 *     （期待値と違えば外部CSSに負けている）
 *  2) Stylesタブで取り消し線を見る＝勝っているルールとファイル名が分かる
 *  3) 直すときは下のv40ブロックに書く（このファイル内で最強・最後勝ち）
 * ■ 余白の調整箇所一覧（すべて下のv40ブロック内）
 *  ・小計の上   = table padding-top(12px) + tr:first-child padding-top(10px)
 *  ・各行の上下 = tr の padding(19px 0)
 *  ・配送ラベル→カード = shipping > th の margin-bottom(12px)
 *  ・カード同士 = ul の gap(10px)
 *  ・合計の上   = cc-ship-note-row padding-bottom(12px)
 *                 + order-total padding-top(14px)（間に2pxの線）
 *  ・合計の下   = order-total padding-bottom(8px) + table padding-bottom(12px)
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
 * v39/v40（20260710）モバイル合計テーブル: 最強詳細度の統合ブロック
 *   同じ!importantを持つ外部CSSに読み込み順で負けないよう、
 *   html body プレフィックスで詳細度を引き上げた決定版。
 *   ここより上のv35〜v38のモバイル規則より、常にこのブロックが勝つ。
 *   余白の数値を変えたいときはこのブロックだけ触ればよい。
 * ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* 骨格 */
	html body.woocommerce-cart .cart_totals table.shop_table {
		padding: 12px 18px !important;
		height: auto !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tbody {
		display: block !important;
	}
	/* 行: flex横並び・上下19px・区切り線は行の上辺1本 */
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		justify-content: space-between !important;
		row-gap: 0 !important;
		margin: 0 !important;
		padding: 19px 0 !important;
		min-height: 0 !important;
		height: auto !important;
		border: 0 !important;
		border-top: 1px solid #F7E7ED !important;
		background: transparent !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr:first-child {
		border-top: 0 !important;
		/* ★v40: 小計の上の空白を圧縮（19→10px。カード上端との合計は22px） */
		padding-top: 10px !important;
	}
	/* 行・セルの擬似要素を全封鎖（余分な高さ・ラベル複製の発生源） */
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr::before,
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr::after,
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr > th::before,
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr > th::after,
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr > td::before,
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr > td::after {
		content: none !important;
		display: none !important;
		height: 0 !important;
	}
	/* セル: 余白・枠・回り込み・高さを完全リセット */
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr > th,
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr > td {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		min-height: 0 !important;
		height: auto !important;
		line-height: 1.5 !important;
		background: transparent !important;
		text-align: left !important;
	}
	/* 金額セルは右寄せ（小計・合計） */
	html body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal > td,
	html body.woocommerce-cart .cart_totals table.shop_table tr.order-total > td {
		text-align: right !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table td > .amount,
	html body.woocommerce-cart .cart_totals table.shop_table td > strong,
	html body.woocommerce-cart .cart_totals table.shop_table td > span {
		margin: 0 !important;
	}
	/* 配送行: ラベルの下にカードを縦積み */
	html body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals {
		display: block !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals > th {
		margin-bottom: 12px !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals > td {
		width: 100% !important;
	}
	html body.woocommerce-cart .cart_totals ul#shipping_method,
	html body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
		margin: 0 !important;
		gap: 10px !important;
	}
	html body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
		margin: 12px 0 0 !important;
	}
	html body.woocommerce-cart .cart_totals form.woocommerce-shipping-calculator {
		margin: 4px 0 0 !important;
	}
	/* 注記行: 配送ブロックの続き（線なし・上詰め）
	   ★v40: 下パディング 19→12px（合計の上の空白を圧縮・その1） */
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-ship-note-row {
		display: block !important;
		border-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 12px !important;
	}
	html body.woocommerce-cart .cart_totals .cc-ship-note { margin: 0 !important; }
	/* 合計行: 2pxの線で締め
	   ★v40: 上パディング 20→14px（合計の上の空白を圧縮・その2） */
	html body.woocommerce-cart .cart_totals table.shop_table tr.order-total {
		border-top: 2px solid #F0DCE4 !important;
		padding: 14px 0 8px !important;
	}
}

/* ═══ ★v41(A案・PC): オプション行は商品名セルをインデント＋└マーク（テーブル構造は不変） ═══ */
@media (min-width: 821px) {
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-name {
		padding-left: 34px;
		position: relative;
		font-size: 13px;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-name::before {
		content: "";
		position: absolute;
		left: 14px;
		top: 6px;
		width: 12px;
		height: 14px;
		border-left: 2.5px solid #F0B9CE;
		border-bottom: 2.5px solid #F0B9CE;
		border-bottom-left-radius: 8px;
	}
}
/* ═══════════════════════════════════════════════════════════════
 * 19. 【CART / スマホ】B案・一体カード（★v45・20260821・A8）
 *     オプション行を親カードの中の「薄紫の一体行」として見せる。
 *     DOMの組み替えは craftcos-options.php v11 の §A8-④ のJSが行う（表示だけ）。
 *     ここは【追記のみ】。既存セレクタの値は1つも変更していない。
 *     ★JSが動かないときは §18 のA案（分離カード＋つなぎ線）がそのまま出る。
 * ═══════════════════════════════════════════════════════════════ */

/* PCでは一体行の器を出さない（JSは820px以下でしか組まないが、リサイズ時の保険） */
.woocommerce-cart td.cc-bo-slot { display: none !important; }

/* ★v46: 加工（オプション）行の×は出さない。加工を外すときは親カードの×を押す。
   本体は craftcos-options.php v12 §A8-⑤ が Woo標準の削除リンクごと外している。
   これは A案フォールバックや他テンプレ経由で×が出てしまった場合の保険。
   ★td ではなく a.remove を隠すこと（PC幅で td を消すと表の列が1つズレるため）。
   ★親との紐づけが外れた行には cc-opt-child が付かない＝×が戻る（安全弁）。 */
.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child td.product-remove a.remove,
.woocommerce-cart td.cc-bo-slot .cc-bo-right a.remove {
	display: none !important;
}

@media (max-width: 820px) {

	/* ── 親カードに3行目（一体行＋小計）の場所を作る ── */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-bo-host {
		grid-template-areas:
			"thumb name name"
			"thumb qty  sub"
			"bo    bo   bo";
		row-gap: 6px;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-bo-host td.cc-bo-slot {
		display: block !important;
		grid-area: bo;
		width: auto !important;
		padding: 0;
		border: none;
		background: transparent;
		margin-top: 2px;
	}

	/* ── 一体行そのもの（モックの薄紫の行） ── */
	.woocommerce-cart td.cc-bo-slot .cc-bo-opt {
		display: grid;
		grid-template-columns: 40px 1fr auto;
		column-gap: 10px;
		align-items: center;
		background: #FBF7FB;
		border: 1.5px dashed #E2D3EF;
		border-radius: 12px;
		padding: 9px 10px;
		box-sizing: border-box;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-opt + .cc-bo-opt { margin-top: 6px; }

	/* 絵（40px・Wooのサムネをそのまま複製） */
	.woocommerce-cart td.cc-bo-slot .cc-bo-thumb {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 9px;
		overflow: hidden;
		background: #fff;
		border: 1px solid #EEE2F5;
		box-sizing: border-box;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		margin: 0;
	}

	/* 「🧩 穴あけ加工（1か所）- 上」 */
	.woocommerce-cart td.cc-bo-slot .cc-bo-body { min-width: 0; }
	.woocommerce-cart td.cc-bo-slot .cc-bo-title {
		display: flex;
		align-items: baseline;
		gap: 5px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
		color: #5E4E68;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-ico { flex: 0 0 auto; font-size: 12.5px; }
	.woocommerce-cart td.cc-bo-slot .cc-bo-name { min-width: 0; word-break: break-word; }

	/* メタ（🎁 おまけ 等。「🧩 セット: 親商品名」はJS側で落としている） */
	.woocommerce-cart td.cc-bo-slot .cc-bo-meta {
		font-size: 10.5px;
		color: #9c8891;
		margin: 2px 0 0;
		line-height: 1.5;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-meta dt,
	.woocommerce-cart td.cc-bo-slot .cc-bo-meta dd {
		display: inline;
		margin: 0 4px 0 0;
		font-weight: 400;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-meta p { display: inline; margin: 0; }

	/* ※加工費は1回分のみ…（A案の丸ピル装飾は一体行の中では外して素の小さい字に） */
	.woocommerce-cart td.cc-bo-slot .cc-bo-note {
		display: block;
		margin: 3px 0 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		max-width: none;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.5;
		color: #a3928f;
		white-space: normal;
	}

	/* 右側: ＋¥30 と 小さい× */
	.woocommerce-cart td.cc-bo-slot .cc-bo-right {
		display: flex;
		align-items: center;
		gap: 7px;
		flex: 0 0 auto;
		align-self: start;
		margin-top: 1px;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-amt {
		font-size: 13px;
		font-weight: 800;
		color: #8E6FB8;
		white-space: nowrap;
	}
	/* （v46: 一体行の小さい× .cc-bo-x は廃止。加工は親カードの×で外す） */

	/* ── 小計（商品＋加工） ── */
	.woocommerce-cart td.cc-bo-slot .cc-bo-sum {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px dashed var(--cc-line, #F0DCE4);
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-sum-label {
		font-size: 12.5px;
		font-weight: 600;
		color: #8b7a80;
	}
	.woocommerce-cart td.cc-bo-slot .cc-bo-sum-amt,
	.woocommerce-cart td.cc-bo-slot .cc-bo-sum-amt .amount,
	.woocommerce-cart td.cc-bo-slot .cc-bo-sum-amt .woocommerce-Price-amount {
		font-size: 16px;
		font-weight: 800;
		color: var(--cc-pink, #F58BB6);
		white-space: nowrap;
	}

	/* ── 一体化できた子行は隠す（JSが付けるクラス。JSが動かなければ付かない＝A案のまま） ── */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child.cc-bo-hidden {
		display: none !important;
	}

	/* 金額マップの隠し行（念のため・素のテーブル解体時にも見えないように） */
	.woocommerce-cart table.shop_table.cart tbody tr.cc-bo-data-row,
	.woocommerce-cart table.shop_table.cart tbody tr.cc-bo-data-row td {
		display: none !important;
	}
}

/* PCでも隠し行は出さない */
.woocommerce-cart tr.cc-bo-data-row,
.woocommerce-cart tr.cc-bo-data-row td { display: none !important; }

/* ═══ ★v47: B案・一体カード【PC幅】（組み替えは options v13 のJS） ═══ */
@media (min-width: 821px) {

	/* 一体化できた子行はPCでも隠す（JSが付けるクラス。付かなければA案のまま） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child.cc-bo-hidden {
		display: none !important;
	}

	/* 受け皿（商品名セルの中） */
	.woocommerce-cart td.product-name .cc-bo-pc {
		margin-top: 8px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		max-width: 430px;
	}

	/* 一体行そのもの（スマホと同じ薄紫・破線・絵40px） */
	.woocommerce-cart .cc-bo-pc .cc-bo-opt {
		display: grid;
		grid-template-columns: 40px 1fr auto;
		column-gap: 10px;
		align-items: center;
		background: #FBF7FB;
		border: 1.5px dashed #E2D3EF;
		border-radius: 12px;
		padding: 8px 10px;
		box-sizing: border-box;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-thumb {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 9px;
		overflow: hidden;
		background: #fff;
		border: 1px solid #EEE2F5;
		box-sizing: border-box;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		margin: 0;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-body { min-width: 0; }
	.woocommerce-cart .cc-bo-pc .cc-bo-title {
		display: flex;
		align-items: baseline;
		gap: 5px;
		font-size: 12.5px;
		font-weight: 700;
		line-height: 1.4;
		color: #5E4E68;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-ico { flex: 0 0 auto; font-size: 12px; }
	.woocommerce-cart .cc-bo-pc .cc-bo-name { min-width: 0; word-break: break-word; }
	.woocommerce-cart .cc-bo-pc .cc-bo-meta {
		font-size: 10.5px;
		color: #9c8891;
		margin: 2px 0 0;
		line-height: 1.5;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-meta dt,
	.woocommerce-cart .cc-bo-pc .cc-bo-meta dd {
		display: inline;
		margin: 0 4px 0 0;
		font-weight: 400;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-meta p { display: inline; margin: 0; }
	.woocommerce-cart .cc-bo-pc .cc-bo-note {
		display: block;
		margin: 3px 0 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		max-width: none;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.5;
		color: #a3928f;
		white-space: normal;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-right {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		align-self: start;
		margin-top: 1px;
	}
	.woocommerce-cart .cc-bo-pc .cc-bo-amt {
		font-size: 12.5px;
		font-weight: 800;
		color: #8E6FB8;
		white-space: nowrap;
	}

	/* 小計（商品＋加工）: 小計セルの金額の下に2行で */
	.woocommerce-cart td.product-subtotal .cc-bo-sum-pc {
		display: block;
		margin-top: 6px;
		padding-top: 6px;
		border-top: 1px dashed var(--cc-line, #F0DCE4);
		text-align: right;
		line-height: 1.5;
	}
	.woocommerce-cart td.product-subtotal .cc-bo-sum-pc .cc-bo-sum-label {
		display: block;
		font-size: 10.5px;
		font-weight: 600;
		color: #8b7a80;
		white-space: nowrap;
	}
	.woocommerce-cart td.product-subtotal .cc-bo-sum-pc .cc-bo-sum-amt,
	.woocommerce-cart td.product-subtotal .cc-bo-sum-pc .cc-bo-sum-amt .amount,
	.woocommerce-cart td.product-subtotal .cc-bo-sum-pc .cc-bo-sum-amt .woocommerce-Price-amount {
		font-size: 14.5px;
		font-weight: 800;
		color: var(--cc-pink, #F58BB6);
		white-space: nowrap;
	}
}
/* ═══════════════════════════════════════════════════════════════
 * 21. 【CHECKOUT / ご注文テーブル】C案①（★v48・20260822・A9）
 *     加工（オプション）行を親商品の直下にぶら下げて見せる。並べ替えそのものは
 *     woocommerce/checkout/review-order.php v3（PHP・2パス）が担当。ここは見た目だけ。
 *     ★スコープは #order_review .woocommerce-checkout-review-order-table 限定。
 *       ただし §V7/§V9/§V24 の既存ルールが !important 付きのため、後勝ちできるよう
 *       頭に .woocommerce-checkout と .shop_table を足した
 *       「.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table」
 *       の形で書いている（＝指定スコープより【さらに狭い】。広げてはいない）。
 *       このIDとテーブルclassはお会計ページにしか出ないので、お買い物カゴ
 *       （.woocommerce-cart）には1行も効かない。§18・§19（カート）は無傷。
 *     ★ここは【追記のみ】。既存セレクタの値は1つも変更していない（後勝ちで足すだけ）。
 *     ★このテーブルは §V7/§V9 で tr=flex・線はtr側・th/tdはborder:none!important に
 *       なっているため、縦線は !important 付きで td 側に足し、
 *       行の上下paddingをセル側へ移し替えて（合計値は同じ）縦線を行の高さいっぱいに通す。
 * ═══════════════════════════════════════════════════════════════ */

/* ── §21-① 土台: 上下paddingを tr → セルへ移す（見た目の余白は同じ・縦線が通るように） ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr {
	padding-bottom: 0 !important;
	align-items: stretch !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th {
	padding-top: 0 !important;
	padding-bottom: 10px !important;   /* 旧: thead tr の padding-bottom と同値 */
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: stretch !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td {
	padding-top: 18px !important;      /* 旧: tr.cart_item の padding と同値 */
	padding-bottom: 12px !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dsub-row,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-discount,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.tax-total,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.tax-rate,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 8px;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal > *,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dsub-row > *,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-discount > *,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > *,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.tax-total > *,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.tax-rate > * {
	padding-top: 10px !important;      /* 旧: tfoot 各行の padding と同値 */
	padding-bottom: 10px !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total > * {
	padding-top: 14px !important;      /* 旧: order-total の padding と同値 */
	padding-bottom: 4px !important;
}

/* ── §21-② tfoot も商品行と同じ3列に揃える（縦線を tfoot まで通すため） ──
   ※ 送料行・注記行（.cc-ship-note-row / .cc-sc-note / .cc-tax-note-row）は
      cc-col-* を持たないので、ここでは一切さわらない＝従来どおり。 */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	text-align: left !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-qty {
	display: block !important;          /* 旧: tfoot の cc-col-qty は display:none だった */
	flex: 0 0 46px !important;
	width: 46px !important;
	min-width: 46px !important;
	max-width: 46px !important;
	box-sizing: border-box;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-total {
	flex: 0 0 66px !important;
	width: 66px !important;
	min-width: 66px !important;
	max-width: 66px !important;
	text-align: right !important;
	box-sizing: border-box;
}

/* ── §21-③ 縦の境界線（数量列・小計列の左） thead / tbody / tfoot を貫通 ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th.cc-col-total,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.cc-col-total,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-total {
	border-left: 1px solid #F0DCE4 !important;
	padding-left: 8px !important;
	box-sizing: border-box;
}

/* ── §21-④ 数量列: 見出しthも数字tdも中央（横も縦も） ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-qty {
	text-align: center !important;
	vertical-align: middle !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding-left: 0 !important;         /* 中央そろえを崩さないよう左paddingは戻す */
	border-left: 1px solid #F0DCE4 !important;
}
/* 小計列は右寄せのまま。商品行は商品名の1行目と高さをそろえる（モック c5a と同じ＝上そろえ）。 */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.cc-col-total {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-end !important;
	flex-wrap: wrap;
	align-content: flex-start;
}
/* tfoot（小計・合計など）は1行なので縦中央でそろえる */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-total {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex-wrap: wrap;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th.cc-col-total {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-end !important;
}

/* ── §21-⑤ 子を持つ親行: 親と子のあいだの横線を消す（ひとかたまりに見せる） ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-rv-haschild {
	border-bottom: none !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-rv-haschild > td {
	border-bottom: none !important;
	padding-bottom: 4px !important;     /* 子行との間を詰める（合計の余白は保つ） */
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-opt-child:not(.cc-rv-orphan) > td {
	padding-top: 2px !important;
}

/* ── §21-⑥ 加工行の商品名: 字下げ＋左上かぎ線（§18 カートA案の ::before と同じ描き方） ──
   ※ 迷子の子（tr.cc-rv-orphan・review-order v3 が最後に通常行として出す）には
      字下げもかぎ線も付けない＝v2 と同じ見た目に戻す。 */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-opt-child:not(.cc-rv-orphan) > td.cc-col-name {
	padding-left: 34px !important;
	position: relative;
	font-size: 13px;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-opt-child:not(.cc-rv-orphan) > td.cc-col-name::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 6px;
	width: 12px;
	height: 14px;
	border-left: 2.5px solid #DCC9E8;
	border-bottom: 2.5px solid #DCC9E8;
	border-bottom-left-radius: 8px;
}

/* ── §21-⑦ 加工の金額（＋¥30）は薄紫の太字 ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table .cc-rv-opt-amt,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table .cc-rv-opt-amt .amount,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table .cc-rv-opt-amt .woocommerce-Price-amount,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table .cc-rv-opt-amt .woocommerce-Price-currencySymbol {
	color: #8a6bb5;
	font-weight: 700;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table .cc-rv-opt-amt {
	white-space: nowrap;
}

/* ── §21-⑧ スマホ幅: 列幅は §V24 のスマホ値（数量40px・小計60px・gap 4px）に合わせる ── */
@media (max-width: 820px) {
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dsub-row,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-discount,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.tax-total,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.tax-rate,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total {
		gap: 4px;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-qty {
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
	}
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-total {
		flex: 0 0 60px !important;
		width: 60px !important;
		min-width: 60px !important;
		max-width: 60px !important;
	}
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-opt-child:not(.cc-rv-orphan) > td.cc-col-name {
		padding-left: 26px !important;
	}
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item.cc-opt-child:not(.cc-rv-orphan) > td.cc-col-name::before {
		left: 10px;
	}
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th.cc-col-total,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.cc-col-total,
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr > .cc-col-total {
		padding-left: 5px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * 22. 【CHECKOUT】実機FBの整え3点（★v49・20260823・司令塔パッチ）
 *   ① 縦線は「小計」の行まで。tfoot の 小計(cart-subtotal) 以外の行
 *     （同色まとめ割引 cart-discount・配送・合計 order-total 等）では消す。
 *   ② 単価表示（案3）: 商品名の下の「単価 ¥◯◯」＝ .cc-rv-unit。
 *   ③ 利用規約チェック（.woocommerce-terms-and-conditions-wrapper）を
 *     「支払い情報を保存」チェックと左はじそろえに。
 *   ★追記のみ。§21 の値は変更しない（tfoot 側の打ち消しはここで上書き）。
 * ═══════════════════════════════════════════════════════════════ */

/* ── ①: tfoot の縦線は 小計の行だけ残す ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.cart-subtotal) th.cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.cart-subtotal) td.cc-col-qty,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.cart-subtotal) th.cc-col-total,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.cart-subtotal) td.cc-col-total {
	border-left: none !important;
}

/* ── ②: 商品名の下の「単価 ¥◯◯」 ── */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table td.cc-col-name .cc-rv-unit {
	font-size: 12px;
	color: #A89AA0;
	margin-top: 2px;
	font-weight: 400;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table td.cc-col-name .cc-rv-unit .woocommerce-Price-amount {
	font-size: 12px;
	color: #A89AA0;
	font-weight: 400;
}

/* ── ③: 利用規約チェックの左はじを上のチェックとそろえる ──
 *   Woo標準: .woocommerce-terms-and-conditions-wrapper > p.form-row（validate-required）
 *   > label.woocommerce-form__label-for-checkbox > input#terms ＋ span。
 *   form-row 既定の左パディング／インデントを取り、チェックと文章を
 *   「支払い情報を保存」（Stripe .woocommerce-SavedPaymentMethods-saveNew）と同じ
 *   flex 並び（□が左はじ・文章が続く）にする。 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	text-indent: 0 !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	margin: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input.woocommerce-form__input-checkbox {
	margin: 3px 0 0 0 !important;
	flex: 0 0 auto;
	float: none !important;
	position: static !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text {
	display: inline;
	text-indent: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * §23（v50・20260917）スマホカート：同じ商品を1枚に／数量 24px／× の下線
 *   クラスは craftcos.php v57 §28-2 のJSが付ける：
 *     tr.cc-grp.cc-grp--first  … 1つめの行（写真・商品名あり）
 *     tr.cc-grp.cc-grp--mid    … 真ん中の行（2つめ以降・写真と商品名なし）
 *     tr.cc-grp.cc-grp--last   … 最後の行（同上）
 *     tr.cc-grp-foot           … まとめ行（🎉 まとめ買い価格／合計 ◯個 ¥◯◯）
 *     dt/dd.cc-grp-pick        … 行の中の「8mm／◉ゴールド」
 *     .cc-grp-bulk / .cc-grp-hide … 行の中では隠すメタ（まとめ買い価格・カラー: のラベル）
 *   線のきまり：カードの外わく＝ふつうの線。カードの中の仕切り＝点線だけ。
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

	/* ── ① 同じ商品を1枚のカードに ── */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp {
		margin-bottom: 0 !important;
		box-shadow: none !important;
	}
	/* ★v54: カードの見出し行（写真＋商品名）。1つめの行に名前を残すのをやめ、
	   どの行も同じ形にそろえた（どれを削除しても その行だけが消える）。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cc-grp-head {
		display: block !important;
		border: 1px solid var(--cc-line, #F0DCE4) !important;
		border-bottom: 0 !important;
		border-radius: 14px 14px 0 0 !important;
		background: #fff !important;
		margin: 12px 0 0 !important;
		padding: 12px 12px 8px !important;
		box-shadow: none !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cc-grp-head td {
		display: block !important;
		border: 0 !important;
		padding: 0 !important;
		background: none !important;
		/* ★v55: tr.cart_item td の text-align:left は 見出し行（tr.cart_item ではない）に
		   当たらないので、ここで明示する。これが無いとテーマの右寄せを拾って商品名が右に寄る。 */
		text-align: left !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cc-grp-head td::before { content: none !important; }
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__line {
		display: flex; align-items: center; gap: 10px; min-width: 0;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb {
		flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
		background: #F7F1F4; display: block;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb img,
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb .cc-thumb,
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb a {
		display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__name {
		flex: 1 1 auto; min-width: 0;
		font-size: 14.5px; font-weight: 700; color: #5F5054; line-height: 1.5;
	}
	/* 見出しのすぐ下の行：上の点線を出さない（見出しとひとかたまりに見せる） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--first {
		border-top: 0 !important;
		margin-top: 0 !important;
		padding-top: 2px !important;
	}
	/* ★v55: まとめカードの中の行は 写真を出さない（見出し行に1回だけ出す）ので、
	   写真の列（64px）を 0 にして 字下げをなくす。
	   ・cart-row v1 が tr.cart_item:not(.cc-opt-child) に 64px !important を当てているので、
	     .cc-grp を1つ足して【より詳しい書き方】にして勝たせる。
	   ・すき間（column-gap:10px）はそのまま＝数量と金額がくっつかない。
	     そのぶん中身は左から 10px のところから始まる（ほんの少しの字下げ）。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp:not(.cc-opt-child) {
		grid-template-columns: 0 auto 1fr !important;
	}
	/* ★v54: 在庫不足のお知らせは、カードでは商品名の欄が写真のぶん右に寄っているので、
	   写真の列（64px）＋すき間（10px）だけ左へ広げて 行のはしからはしまで使う＝折り返さない。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item .cc-sl-rowwarn {
		margin-left: -74px !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-opt-child .cc-sl-rowwarn {
		margin-left: -54px !important;        /* 加工の行だけ 写真が 44px */
	}
	/* ★v55: まとめカードの中は 写真の列が 0 になったので、逃がしは要らない（0 に戻す） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp .cc-sl-rowwarn {
		margin-left: 0 !important;
	}
	/* 2つめ以降の行：仕切りは点線1本だけ。写真の列は残して字下げをそろえる */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last {
		border-top: 1px dashed var(--cc-line, #F0DCE4) !important;
		border-bottom: 0 !important;
		border-radius: 0 !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		grid-template-columns: 78px auto 1fr;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid.cc-bo-host,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last.cc-bo-host {
		grid-template-areas:
			"thumb name name"
			"thumb qty  sub"
			"bo    bo   bo";
	}
	/* ★v54: どの行も 写真・商品名は出さない（見出し行に1回だけ出す） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-thumbnail,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name > a,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp .cc-sfl-link {
		display: none !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid td.product-name dl.variation,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last td.product-name dl.variation {
		margin-top: 0 !important;
	}
	/* 行の中では出さないメタ（まとめ買い価格は下のまとめ行に1回だけ／「カラー:」は pick に置き換え） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name dl.variation .cc-grp-bulk,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name dl.variation .cc-grp-hide {
		display: none !important;
	}
	/* 行の中の「8mm／◉ゴールド」 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name dl.variation dt.cc-grp-pick {
		font-weight: 700 !important;
		color: #5F5054 !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name dl.variation dt.cc-grp-pick::after {
		content: "／";
		color: #C9BBBF;
		margin: 0 .35em 0 .45em;
		font-weight: 400;
	}
	/* 色が無い商品（サイズだけ）のときは「／」を出さない */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name dl.variation dt.cc-grp-pick--solo::after {
		content: none;
	}
	/* 加工の行（一体行）の「小計（商品＋加工）」は行ごとに出さない（下のまとめ行に集約） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.cc-bo-slot .cc-bo-sum {
		display: none !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.cc-bo-slot {
		margin-top: 0 !important;
	}

	/* まとめ行（合計）＝カードのいちばん下。ここだけ下の角丸と影を持つ。
	   ★ .cart_item は付けない（他のカートJSに商品行だと思われないため）ので、カードの見た目をここで指定 */
	/* ★v54: どの行も余白をそろえる（1つめだけ広い、をやめる） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cc-grp-foot {
		display: block !important;
		background: #fff;
		border: 1px solid var(--cc-line, #F0DCE4);
		border-top: 1px dashed var(--cc-line, #F0DCE4);
		border-radius: 0 0 18px 18px;
		box-shadow: 0 6px 20px rgba(201,164,106,.08);
		padding: 10px 14px;
		margin: 0 0 12px;
		box-sizing: border-box;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cc-grp-foot td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		text-align: left !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cc-grp-foot td::before { content: none !important; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__tag { font-size: 11.5px; color: #9c8891; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum { font-size: 12.5px; color: #9c8891; white-space: nowrap; margin-left: auto; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum b { color: #5F5054; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em,
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em .amount,
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em .woocommerce-Price-amount {
		font-style: normal;
		font-weight: 800;
		font-size: 15.5px;
		color: #5F5054;
		margin-left: 6px;
	}

	/* ── ② 数量の −＋ を 24px に（枠ごと）。ここは末尾＝必ず勝つ ── */
	.woocommerce-cart .cc-qty .cc-qty-btn {
		width: 24px !important;
		height: 24px !important;
		font-size: 13px !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity input.qty,
	.woocommerce-cart .cc-qty input.qty {
		width: 22px !important;
		height: 24px !important;
		font-size: 12px !important;
	}

	/* ── ③ × に下線が出ないように ── */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove a.remove {
		text-decoration: none !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §23-2（v51・20260917）実機FB：まとめカードの2行目／「あとで買う」のボタン
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

	/* ── ① 2つめ以降の行から「🕒 あとで買う」を消す ──
	   ★v50 は .cc-sfl-link を指していたが、本物は
	     <div class="cc-sfl-itemact"><button class="cc-sfl-stash">🕒 あとで買う</button></div>
	     （craftcos-save-for-later.php §7-1）。クラスちがいで一度も当たっていなかった。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid td.product-name .cc-sfl-itemact,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last td.product-name .cc-sfl-itemact {
		display: none !important;
	}

	/* ── ① 行の縦を詰める（2つめ以降） ── */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		row-gap: 4px !important;
	}
	/* 「8mm ／ ◉ゴールド」と 数量の行の間 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid td.product-name dl.variation,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last td.product-name dl.variation {
		margin: 0 !important;
		line-height: 1.5 !important;
	}
	/* ×ボタンは行の上端に寄せる（行が低くなったぶん、中央だと窮屈に見えるため） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid td.product-remove,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last td.product-remove {
		top: 6px !important;
	}

	/* ── ③ 「あとで買う」欄のボタンを小さく ── */
	.woocommerce-cart .cc-sfl-acts button,
	.woocommerce-cart .cc-sfl-visit,
	.woocommerce-cart .cc-sfl-pick {
		min-height: 32px !important;
		font-size: 12px !important;
		padding: 0 14px !important;
	}
	.woocommerce-cart .cc-sfl-acts { gap: 6px !important; }
	.woocommerce-cart .cc-sfl-qtysel { min-height: 28px !important; }
	/* 小さい画面でも横いっぱいには広げない（2つ並べる） */
	.woocommerce-cart .cc-sfl-acts button { flex: 0 1 auto !important; }
}


/* ═══════════════════════════════════════════════════════════════
 * §23-3（v52・20260917）実機FB：まとめカードの金額と ✕ が重なる
 *   カードは grid（"thumb name name" / "thumb qty sub"）。
 *   2つめ以降の行は 写真・商品名を隠すので name 行が消え、qty/sub の行だけになる。
 *   ✕ は td.product-remove を position:absolute で右上に置いているため、
 *   低くなった行では金額（sub・右寄せ）と同じ高さ・同じ右端に来て重なっていた。
 *   → 金額の右に ✕ のぶんの余白を作る（文字が左にずれるだけ・大きさは不変）。
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
	/* ★v53: 金額は【右端に統一】＝横にはずらさない。
	   （v52 で入れた padding-right:30px は取り消し。v52 を入れていても、ここで 0 に戻る） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid td.product-subtotal,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last td.product-subtotal {
		padding-right: 0 !important;
	}

	/* ★v53: かわりに【縦】で逃がす。
	   2つめ以降の行は「サイズの行」と「数量・金額の行」の2段。
	   ✕ は行の右上（上から6px・高さ24px＝下端30px）にあるので、
	   2段目の始まりを 30px より下にすれば、金額と重ならない。
	   すき間を 4px → 12px にすると 2段目は 36px から始まる。
	   ★12px なのは、加工オプション付きで金額が2行（¥500 ＋ ¥260×3）になる行を基準にしているため。
	     そのとき金額の箱は行いっぱいに広がり、上端が 2段目の開始位置そのものになる。
	     10px だと ✕ の下端（30px）との差が 1px しかなく、目には接して見える。12px で 3px 空く。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--mid,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp--last {
		row-gap: 12px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * §24【v54・20260918】お買い物カゴの「その行」に出す 在庫不足のお知らせ
 *   （inc/craftcos-stock-limit.php v4 が <p class="cc-sl-rowwarn"> を出力）
 *   ・ページの一番上の知らせだけだと、どの商品か分からなかった（実機FB）
 *   ・お会計の「ご注文」欄には出さない（あちらは上の知らせが出る）
 * ═══════════════════════════════════════════════════════════════════════════ */
.cc-sl-rowwarn{
	margin: 6px 0 0 !important; padding: 7px 10px;
	border-radius: 10px; background: #FBE9EE; color: #A24463;
	font-size: 12px; line-height: 1.65; font-weight: 700;
}
.woocommerce-checkout #order_review .cc-sl-rowwarn{ display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
 * §25【v56・20260920】お買い物カゴ まとめカード：字下げ・加工の箱・当たり判定
 *   指示書A（20260920_v1）／モック「モック_カゴと文言_20260920_v4.html」（v4.4）が正。
 *
 *   ここは【追記のみ】。v55 までの既存セレクタは1つも編集していません。
 *   効くのは「スマホ幅（820px以下）のカゴページの まとめカード（tr.cart_item.cc-grp）」だけ。
 *   PC幅・お会計（review-order）・ミニカート・「あとで買う」は今までどおりです。
 *
 *   カードの形（モック v4.4）:
 *     写真   ハートチャーム（テスト）#2          ← 見出し行 tr.cc-grp-head（v55 のまま）
 *     ─────────────────────────
 *     ● 8mm ／ 黒                  [在庫バッジ]  ← 左はし（0px）から。バッジは指示書B
 *             [− 1 +] 削除 保存      ¥7,200      ← この行だけ 74px 字下げ
 *     ┌ 穴あけ加工（1か所・上）          ＋¥30 ┐  ← 左はしから右はしまで（字下げしない）
 *     └ この加工はカラー・個数に限らず…       ┘
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

	/* ── ① 字下げ：まとめカードの中の行だけ、3行（または2行）のGridに組み直す ──
	   ・1列目（64px）は【空っぽの字下げ用】。写真は見出し行に1回だけ出すので、ここには何も入らない。
	     すき間（column-gap:10px・cart-row v1）と合わせて 64＋10＝74px ＝ 見出しの商品名の左はしと同じ。
	   ・サイズ／色（td.product-name）は 3列ぶち抜き＝カードの左はし（0px）から。
	   ・加工の箱（td.cc-bo-slot）も 3列ぶち抜き＝左はしから右はしまで。
	   ★cart-row v1 が tr.cart_item:not(.cc-opt-child) に !important で列を当てているので、
	     ここも .cc-grp を足した【より詳しい書き方】＋ !important で勝たせる。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp:not(.cc-opt-child) {
		grid-template-columns: 64px auto 1fr !important;
		grid-template-areas:
			"name name name"
			"pad  qty  sub" !important;
		/* ★見出し行（tr.cc-grp-head＝padding 12px）と左右をぴったりそろえる。
		   v55 までは行が 14px・見出しが 12px で【2px ずれて】いた（実測）。上下の余白は v54 のまま。 */
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	/* 加工の箱がある行は3行目を足す（箱が無い行に空の3行目を作ると、すき間だけ空いてしまうため） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp:not(.cc-opt-child).cc-bo-host {
		grid-template-areas:
			"name name name"
			"pad  qty  sub"
			"bo   bo   bo" !important;
	}
	/* サイズ／色の行：左はしから。右の余白（×ボタンよけ）はそのまま */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name {
		grid-area: name !important;
	}
	/* 数量・削除・保存：字下げした列（2列目）から始める。
	   削除・保存が縦にならないよう、ボタンのあいだを 6px に詰める（cart-row v1 の 4px より少し広い。
	   6〜8px の範囲で 390px でも 1行に収まることを実測）。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-quantity {
		grid-area: qty !important;
		gap: 6px !important;
		flex-wrap: nowrap !important;
		min-width: 0 !important;
	}
	/* 金額：右はし。数字の途中では絶対に折らない（欠けさせない） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-subtotal {
		grid-area: sub !important;
		justify-self: end !important;
		text-align: right !important;
		white-space: nowrap !important;
	}
	/* 加工の箱：左はしから右はしまで（字下げしない） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-bo-host td.cc-bo-slot {
		grid-area: bo !important;
		display: block !important;
		width: auto !important;
		margin-top: 2px !important;
	}

	/* ── ① せまい画面（375px など）で、数量の行に金額が入りきらないとき ──
	   金額だけを【右下】に折り返す＝どこも欠けさせない（モックと同じ）。
	   ★幅で切り替えるのは、Grid は「入らなければ折り返す」ができないため。
	   ★しきい値 374px は【実測】で決めました（Chromium・このCSSのまま・削除／保存のすき間 6px）。
	       行の中身の幅 ＝ 画面幅 − 66px ／ 字下げ 74px ／ 数量＋削除＋保存 171px
	       → 金額に使える幅：360px で 53px ／ 375px で 68px ／ 390px で 83px
	       金額の実寸：¥7,200＝47px ／ ¥15,000・¥50,400＝56px ／ ¥128,000＝65px
	     ＝ 375px 以上なら ¥128,000 まで1行に収まり、360px では ¥15,000 から入りません。
	     もっと早く折り返したいときは、この 374 を 389 に書きかえるだけです（1か所）。 */
	@media (max-width: 374px) {
		.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp:not(.cc-opt-child) {
			grid-template-areas:
				"name name name"
				"pad  qty  qty"
				"pad  sub  sub" !important;
		}
		.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp:not(.cc-opt-child).cc-bo-host {
			grid-template-areas:
				"name name name"
				"pad  qty  qty"
				"pad  sub  sub"
				"bo   bo   bo" !important;
		}
	}

	/* ── ② 加工の箱の枠は 単品・まとめ・実物（丸カン）で まったく同じ ──
	   本体の見た目は §22（.cc-bo-opt）が持っています。v21 のJSは帯に
	   「cc-bo-opt cc-bo-band」（実物は ＋「cc-bo-opt--goods cc-bo-band--goods」）を付けるので、
	   枠・背景・角丸・余白は自動的に同じになります。ここでは新しい枠を作りません。
	   ちがうのは左の絵（アイコン）だけ： 🧩（加工）→ ○（丸カン）。 */
	.woocommerce-cart td.cc-bo-slot .cc-bo-band--goods .cc-bo-ico {
		font-size: 15px;
		line-height: 1;
		color: #B9A3E3;
	}

	/* ── ③ 丸カンの帯と加工の帯のあいだに点線の仕切りを出さない ──
	   （同じ器 td.cc-bo-slot の中に縦に並ぶだけ。間隔は §22 の 6px のまま） */
	.woocommerce-cart td.cc-bo-slot .cc-bo-band + .cc-bo-band,
	.woocommerce-cart td.cc-bo-slot .cc-bo-opt + .cc-bo-opt {
		border-top-style: dashed;     /* 枠は4辺とも点線のまま＝単品と同じ */
		margin-top: 6px;
	}
	.woocommerce-cart td.cc-bo-slot::before,
	.woocommerce-cart td.cc-bo-slot::after { content: none !important; }

	/* ═══ ④ 指示書B（在庫の見せ方）が置くものの当たり判定 ═══
	   ★中身（文言・いつ出すか）はBが決めます。ここは「置いたら整う」CSSだけ。
	     B未設置でも、このクラスが付かないかぎり何も起きません。 */

	/* ══ B-1. サイズ／色の行の右はしに出す在庫バッジ（.cc-sl-badge）══
	   ★HTMLの並び（stock-limit v6・実測）:
	       <td class="product-name">
	         <a>商品名</a>                       ← まとめカードでは隠す（見出し行に1回だけ出す）
	         <div class="cc-sfl-itemact">…</div>  ← 「あとで買う」（フック20）まとめカードでは隠す
	         <span class="cc-sl-badge …">…</span> ← 在庫バッジ（フック22）★dl より【前】
	         <dl class="variation">…</dl>         ← サイズ／色
	       </td>
	   ＝ DOM では バッジのほうが先に来るので、margin-left:auto だけでは右に寄りません。
	     order で「サイズ／色 → バッジ」に並べ替えます（HTMLの順番が将来変わっても崩れない）。
	   ★色・背景・文字の大きさは B の <style id="cc-sl-css"> が持ちます。
	     A が !important で押さえるのは【置き場所（右はし）と 高さのそろえ】だけ。
	     下の font-size などは B が何も指定しなかったときの保険で、!important は付けません。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name:has(.cc-sl-badge) {
		display: flex !important;
		align-items: flex-start !important;   /* ★v58: 上そろえ（dl が2行ぶんの高さでも1行目に合わせる） */
		gap: 8px;
		flex-wrap: nowrap;
	}
	/* サイズ／色を先に（order:1）、バッジをそのあと（order:2）へ */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name:has(.cc-sl-badge) dl.variation {
		order: 1 !important;
		flex: 1 1 auto !important;
		min-width: 0;
		margin: 0 !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name .cc-sl-badge {
		order: 2 !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;     /* サイズ／色が短くても右はしに着ける */
		align-self: flex-start !important;    /* ★v58 */
		margin-top: -2px !important;           /* ★v58: バッジ22px を 1行目17.25px の中心に（(22−17.25)/2≒2px） */
		font-size: 11px;
		font-weight: 700;
		line-height: 20px;
		padding: 1px 8px;
		border-radius: 999px;
		white-space: nowrap;
	}
	/* まとめカードでは「商品名」と「あとで買う」は出さない（見出し行に1回だけ・v54/v55 のきまり）。
	   flex の子になると隙間を作ってしまうので、ここでも念のため畳んでおく。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name:has(.cc-sl-badge) > a,
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name:has(.cc-sl-badge) .cc-sfl-itemact {
		display: none !important;
	}
	/* ★td.product-name には「×ボタンよけ」の padding-right:26px が入っている（v30〜）。
	   削除ボタンが出ている＝×を引っこめているとき（body.cc-cr-on／cart-row v1）は
	   その余白が要らないので 0 にして、バッジをカードの右はしにぴたりと着ける。
	   ×が出ているとき（JSが動かなかったとき）は 26px のまま＝バッジと×が重ならない。 */
	body.cc-cr-on table.shop_table.cart tbody tr.cart_item.cc-grp td.product-name:has(.cc-sl-badge) {
		padding-right: 0 !important;
	}

	/* B-2. 在庫不足の行（tr.cc-sl-over）：金額を自分の行に移し、左に注意書き・右に金額。
	        この行だけ カードの左はし（0px）から使う＝注意書きが折り返さない。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-sl-over:not(.cc-opt-child) {
		grid-template-areas:
			"name name name"
			"qty  qty  qty"
			"sub  sub  sub" !important;
	}
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-sl-over:not(.cc-opt-child).cc-bo-host {
		grid-template-areas:
			"name name name"
			"qty  qty  qty"
			"sub  sub  sub"
			"bo   bo   bo" !important;
	}
	/* 数量の行は左はしから（字下げしない） */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-sl-over td.product-quantity {
		justify-content: flex-start !important;
	}
	/* 金額の行：左に ⚠ の注意書き・右に金額 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-sl-over td.product-subtotal {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		justify-self: stretch !important;
		width: 100% !important;
		gap: 8px;
	}
	/* ★stock-limit v5/v6 では <span class="cc-sl-rowwarn">（小計欄の【先頭】）。
	     v4 までの <p>（商品名の中）ではありません。どちらの要素でも同じに効くよう
	     display は決め打ちせず、flex の子としてだけ並べます。
	   ★ピンクの箱（§24 の margin/padding/background/border）は B の <style id="cc-sl-css"> が
	     打ち消し済みですが、Aだけ入れた状態でも箱が出ないよう ここでも消しておきます。 */
	.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-sl-over td.product-subtotal .cc-sl-rowwarn {
		flex: 0 1 auto;
		border: 0 !important;
		margin: 0 !important;
		padding: 2px 0 !important;
		background: none !important;
		border-radius: 0 !important;
		font-size: 11px !important;
		font-weight: 800 !important;
		color: var(--cc-rose, #B8446A) !important;
		white-space: nowrap;
		min-width: 0;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §26【v59・20260920】指示書C: 実機フィードバック7点 ②④⑤ ＋ ③の色
 *   ★追記のみ。上のセクションのセレクタは1つも編集していません。
 * ═══════════════════════════════════════════════════════════════ */

/* ── §26-② お会計: 「支払い情報を保存」→「利用規約」の間を約8pxに ──
 *   原因: Woo標準の #payment div.form-row{ padding:1em }（上下16px）が
 *         .woocommerce-terms-and-conditions-wrapper .form-row に残っていた
 *         （§22③ は左右の padding しか 0 にしていない）。
 *   ★form-row の margin-bottom（14px）は触らない＝「注文する」ボタンとの間は今のまま。 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;      /* ★v60: 8px → 0（上の payment_box の margin-bottom 8px がそのまま間隔になる） */
}
/* ★v60（司令塔パッチ）: 利用規約の p.form-row を包む div.form-row.place-order にも Woo標準 #payment div.form-row{padding:1em}
   の上 16px が残っていた（再現ページで実測）。ここを 0 にしないと 約8px にならない。左右・下はそのまま */
.woocommerce-checkout #payment .form-row.place-order {
	padding-top: 0 !important;
}

/* ── §26-③ 合計欄の色（カゴ・お会計 共通） ──
 *   割引の金額はピンク（🎀 の fee 行と 🎁 の cc-qd-row）／合計はこい色／小計はうすい取り消し線。 */
.woocommerce-cart .cart_totals table.shop_table tr.fee td .amount,
.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row td .cc-qd-amt,
.woocommerce-checkout #order_review .shop_table tfoot tr.fee td .amount,
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row td .cc-qd-amt {
	color: #B8446A !important;
	font-weight: 700 !important;
}
/* 合計は「ピンク」をやめてこい色に（大きさ・太さは今のまま） */
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total td strong,
.woocommerce-checkout .shop_table .order-total .amount {
	color: #5F5054 !important;
}
/* 小計（定価の合計）のうすい取り消し線。qty-discount v8 が <span class="cc-sub-list"> で包んだときだけ */
.cc-sub-list {
	text-decoration: line-through;
	text-decoration-color: #DCC8D0;
	text-decoration-thickness: 1px;
	color: #9c8891;
	font-weight: 400;
}
.cc-sub-list .amount,
.cc-sub-list .woocommerce-Price-amount {
	color: inherit !important;
	font-weight: inherit !important;
}

/* ── §26-⑤ 同じ加工でまとめた色の、2行目以降は上の点線を消す ──
 *   印（cc-grp--cont）は craftcos.php v60 §28-2 のJSが ≤820px のときだけ付けます
 *   （＝PC幅では存在しない行なので、PCの見た目は変わりません）。 */
.woocommerce-cart table.shop_table.cart tbody tr.cart_item.cc-grp.cc-grp--cont {
	border-top: 0 !important;
	padding-top: 2px !important;
}

/* ── §26-⑥（v60・司令塔パッチ）カゴの合計欄: 🎁 まとめ買い割引・🎀 同色まとめ割引 の金額も右はし ──
 *   3208行付近の「金額セルは右寄せ（小計・合計）」と同じ強さ・同じ書き方で fee 行と 🎁 行にも当てる。
 *   （モック_実機FB7点 v4 が正＝割引の金額は小計・合計と同じ右はし） */
@media (max-width: 768px) {
	html body.woocommerce-cart .cart_totals table.shop_table tr.fee > td,
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row > td {
		text-align: right !important;
	}
}

/* ── §26-⑦（v61・司令塔パッチ）お会計: 🎁 まとめ買い割引の行を 🎀（fee）と同じ並びに ──
 *   既存の「tfoot の行を flex で ラベル｜空｜金額 にする」指定は行のクラスを名指ししているので、
 *   新しい tr.cc-qd-row / tr.cc-qd-note は同じ指定を【同じ値で】ここに書き足す（既存は無編集）。 */
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: 8px;
	border-bottom: 1px solid var(--cc-line, #F0DCE4) !important;
	padding: 0 4px !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row > * {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row > .cc-col-name {
	display: block !important;
	flex: 1 1 auto !important;
	text-align: left !important;
}
@media (max-width: 820px) {
	.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row {
		gap: 4px;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}
/* 内訳の行（🎁）は 🎀 の内訳（tr.cc-sc-note）と同じ扱い＝ラベルと空の数量セルを隠して全幅 */
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-note {
	display: block !important;
	padding: 0 0 10px !important;   /* 左右は td 側（cart-display v7）に任せる＝🎀の内訳と左はしがそろう */
}
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-note:not(.is-open) { display: none !important; }
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-note > .cc-col-total {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: none !important;
	text-align: left !important;
	padding-left: 0 !important;
}

/* ── §26-⑧（v62・司令塔パッチ）お会計: 合計の上の線を1本に ──
 *   すぐ上の行の border-bottom（うすい線）と、合計の border-top（ピンク）が重なって2本に見えていた。
 *   ピンクの線だけ残す＝合計の直前の行の下線を消す。内訳の行（tr.cc-cd-fold）は閉じていても
 *   兄弟として残るので、間に1〜2行はさまるパターンも見る。 */
.woocommerce-checkout #order_review .shop_table tfoot tr:has(+ tr.order-total),
.woocommerce-checkout #order_review .shop_table tfoot tr:has(+ tr.cc-cd-fold + tr.order-total),
.woocommerce-checkout #order_review .shop_table tfoot tr:has(+ tr.cc-cd-fold + tr.cc-cd-fold + tr.order-total) {
	border-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * §27【v63・20260921】指示書D: お会計とカゴの仕上げ8点 ①③④⑤
 *   ★このファイルへの変更は【この §27 を末尾に足しただけ】です。
 *     §26 までの既存セレクタは1バイトも編集していません（①は同じセレクタを
 *     あとから書いて打ち消す形＝1560行の元ブロックはそのまま）。
 *   ① お会計: 合計カードとクーポンの箱のあいだの線を消して 8px に詰める
 *   ③ カゴ: 合計の下へ移した「※送料はお会計ページで計算されます🌸」の見た目
 *   ④ カゴ: 上のお知らせが 5秒で すーっと消えるときのフェード
 *   ⑤ 削除の確認ポップに出す「一緒に消えるオプション」の見た目
 * ═══════════════════════════════════════════════════════════════ */

/* ── §27-① お会計: 合計 → クーポンの箱 を 8px・線なしに ──
 *   元（1560行付近）は border-top 1px ＋ margin-top 16px ＋ padding-top 16px ＝ 線＋32px。
 *   同じセレクタをあとから書いて、その3つだけを打ち消す。
 *   ★.checkout_coupon（開いたときの入力欄）の margin: 12px 0 4px は触っていない。 */
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle {
	border-top: 0 !important;
	margin-top: 8px !important;
	padding-top: 0 !important;
}

/* ── §27-③ カゴ: 合計の下の注記2行をそろえる ──
 *   PHP側（cart-simplify v3）でフックを woocommerce_cart_totals_after_order_total（優先度5）に
 *   変えたので、並びは 合計 →「※送料は〜」→「※表示価格は〜」。
 *   2行が1つのかたまりに見えるよう、上の線を消して上詰めにする。 */
.woocommerce-cart .cart_totals tr.cc-cs-hint-row > th,
.woocommerce-cart .cart_totals tr.cc-cs-hint-row > td {
	border-top: 0 !important;
	padding-top: 4px !important;
	padding-bottom: 0 !important;
}
.woocommerce-cart .cart_totals .cc-cs-hint {
	font-size: 12px !important;
	color: #9a8d90 !important;
	margin: 0 !important;
}
/* ★下の「※表示価格はすべて税込です。」も同じ 12px・#9a8d90 にそろえる（モック v6 ③が正）。
 *   craftcos-tax-suffix.php の <style id="cc-tax-suffix-css"> は自分で #9a8d90 と書いているが、
 *   カゴでは .woocommerce-cart .cart_totals table.shop_table td{color:var(--cc-ink,#6B5A60)}（詳細度 0,3,2）
 *   のほうが強く、実測では #6B5A60 で出ていた（Chromium で確認）。
 *   ここでカゴのぶんだけ、その注記が元から書いている色にもどす。お会計側の同じ注記は触っていない。 */
.woocommerce-cart .cart_totals .cc-tax-note-row .cc-tax-note {
	font-size: 12px !important;
	color: #9a8d90 !important;
}
/* ★スマホ（≤768px）の合計テーブルは v39/v40 の「html body …」ブロックが
 *   tr に border-top 1px ＋ padding 19px 0 を !important で当てている（詳細度 0,3,5）。
 *   上の書き方（0,3,2）では届かないので、cc-ship-note-row と同じ作法で
 *   同じ強さの1ブロックを置く。数値は上と同じ＝上4px・下0・線なし。 */
@media (max-width: 768px) {
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row {
		border-top: 0 !important;
		padding-top: 4px !important;
		padding-bottom: 0 !important;
	}
	/* ★「※送料は〜」のすぐ下に来たときの「※表示価格はすべて税込です。」だけ、
	 *   あいだの線と19pxの空きを外して2行を1かたまりに見せる（モック v6 ③が正）。
	 *   送料の要らない買い物では cc-cs-hint-row が出ない＝この指定も当たらないので、
	 *   そのときの見た目は今までと1pxも変わらない。 */
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row + tr.cc-tax-note-row {
		border-top: 0 !important;
		padding-top: 2px !important;
	}
}

/* ── §27-④ カゴ: 上のお知らせのフェード ──
 *   JS（cart-simplify v3）は .cc-cs-notice-hide を付けるだけ。消える動きはここが持つ。
 *   ★.woocommerce-error には当たらない書き方にしてある（JSも付けない・二重の守り）。 */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
	transition: opacity .4s ease, transform .4s ease;
}
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message.cc-cs-notice-hide,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info.cc-cs-notice-hide {
	opacity: 0 !important;
	transform: translateY(-6px);
	pointer-events: none;
}
.woocommerce-cart .woocommerce-notices-wrapper .cc-cs-notice-gone {
	display: none !important;
}

/* ── §27-⑤ 削除の確認ポップ: 一緒に消えるオプション ── */
.cc-cr-modal .cc-cr-opt {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #7a5fb0;
	line-height: 1.7;
}
.cc-cr-modal .cc-cr-opt:empty {
	display: none;
}

/* ── §27-② お会計: 配送のカードと注記の間を詰める（司令塔パッチ v64・モック v6 ②「これから」＝6px）──
   ・注記行 tr.cc-ship-note-row の空の th が、お会計では display:block のまま 28px の高さで残っていた
     （カゴ側は v21 §25 で display:none 済み。お会計側が抜けていた）→ 同じく消す。
   ・配送行の下の余白 12px → 6px。指示書E の「お届けのご希望」の箱が入るときも同じ 6px で並ぶ。 */
.woocommerce-checkout #order_review .shop_table tfoot tr.cc-ship-note-row th { display: none !important; }
.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping { padding-bottom: 6px !important; }

/* ── §27-③ 追記（司令塔パッチ v64）: カゴの「※送料は〜」の左はしを「※表示価格は〜」と同じにする
   tr.cc-cs-hint-row は flex（gap 12px）で、空の th（幅0）が先頭にあるぶん td が 12px 右にずれていた。
   th を消して、2行の左を 1px の差もなくそろえる（モック v6 ③が正）。 */
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row > th { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
 * §28【v65・20260921】指示書G: 実機フィードバック第3弾 11点のうち ①②④⑥⑦⑧⑨
 *   ★このファイルへの変更は【この §28 を末尾に足しただけ】です。
 *     §27 までの既存セレクタは1バイトも編集していません（Version 行を除く）。
 *   ① お会計: エラーの文言を「各項目の下」だけにする（B案）
 *   ② お会計: クーポンの箱を 12.5px・2行にコンパクトに
 *   ④ お会計: 見出しの下を詰める ＋ 小計の金額を行の縦中央に
 *   ⑥ お会計: スマホの入力欄・選択欄を 16px に（iPhone の自動拡大よけ）
 *   ⑦ カゴ: 合計の下と、いちばん下の注記の下の余白を詰める
 *   ⑧ カゴ: 🎁 の内訳の上に出る線を消す（🎀 の内訳も同じ）
 *   ⑨ カゴ（PC）: 注記2行の左はしをそろえる
 *   ★③⑤⑩⑪ はこのファイルの担当ではありません（③⑥の時間帯は delivery-slot.php、
 *     ⑤は shipping-fixes.php、⑩は商品ページ、⑪は address.php）。
 * ═══════════════════════════════════════════════════════════════ */

/* ── §28-① お会計: エラーは各項目の下だけに（B案・指示書G ①）──
 *   WooCommerce 本体（assets/js/frontend/checkout.js の show_inline_errors）が、
 *   上のまとめ（ul.woocommerce-error）と各項目の下（p.checkout-inline-error-message）の
 *   両方に同じ文を出している。上のまとめのうち【入力欄に紐づく行だけ】を消す。
 *   ★「利用規約に同意してください」のように data-id を持たない行は残す。
 *     （消すと、なぜ進めないのかがお客さまに分からなくなるため。） */
.woocommerce-checkout ul.woocommerce-error > li[data-id] { display: none !important; }
/* 残る行が1つも無い（＝全部 data-id つき）ときは、空の赤い箱ごと消す */
.woocommerce-checkout ul.woocommerce-error:not(:has(> li:not([data-id]))) { display: none !important; }
/* 箱の外側のラッパにも余白が付くことがあるので、同じ条件でラッパごと消す。
 * ★書き方の注意（実機で確認ずみ）: :has() の【中に】:has() を書くことは CSS の決まりで
 *   できません（指示書Gの `…:has(> div > ul…:has(…))` は無効な指定として丸ごと捨てられます）。
 *   そこで「エラーの箱がある」:has() と「data-id の無い行が無い」:not(:has()) を
 *   【横に2つ並べる】書き方にしました。これは有効で、Chromium で動作を確認しています。
 *   条件は「data-id の無い行が1つも無いとき」だけなので、利用規約の行が1つでもあれば
 *   箱もラッパも必ず残ります。 */
.woocommerce-checkout .woocommerce-NoticeGroup:has(ul.woocommerce-error):not(:has(ul.woocommerce-error > li:not([data-id]))) { display: none !important; }
.woocommerce-checkout .woocommerce-notices-wrapper:has(ul.woocommerce-error):not(:has(ul.woocommerce-error > li:not([data-id]))) { display: none !important; }
/* 各項目の下の赤い字を読みやすく */
.woocommerce-checkout .form-row p.checkout-inline-error-message {
	font-size: 11.5px !important;
	line-height: 1.6 !important;
	margin: 5px 0 0 !important;
}

/* ── §28-② お会計: クーポンの箱（指示書G ②）──
 *   いま: 14px・padding 14px 28px 14px 49px・リンクが同じ行に続いて3行（高さ64px）。
 *   これから: 12.5px・リンクは次の行から＝本文1行＋リンク1行の2行。
 *   ::before は Woo の ℹ️ アイコン。左の余白 49px → 32px に合わせて位置も動かす。 */
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .woocommerce-info {
	font-size: 12.5px !important;
	line-height: 1.65 !important;
	padding: 10px 12px 10px 32px !important;
}
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle .woocommerce-info::before {
	left: 12px !important;
	top: 9px !important;
	font-size: 12.5px !important;
}
.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle a.showcoupon {
	display: block !important;
	margin-top: 1px !important;
}

/* ── §28-④ お会計: 見出しの下 ＋ 小計の縦位置（指示書G ④）──
 *   ★指示書のセレクタは `.shop_table thead th` ですが、現物では §21-① が
 *     `.shop_table.woocommerce-checkout-review-order-table thead tr > th` と
 *     【クラス2つ】で書いてあり（詳細度 1,3,3）、指示書の書き方（1,2,3）では届きません。
 *     そこで §21-① と【同じ詳細度・同じ書き方】にそろえて後勝ちさせています。
 *     当たる範囲は §21-① とまったく同じ＝注文概要テーブルだけで、広がっていません。
 *   文字→線 10px → 4px ／ 線→1行目 12px → 4px。 */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table thead tr > th {
	padding-bottom: 4px !important;
}
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
/* 小計の金額を、数量の数字と同じ「行の縦中央」に。
 *   ★§21-④ の元ブロックは align-items: flex-start に加えて
 *     flex-wrap: wrap ＋ align-content: flex-start が書いてあります。
 *     折り返しありの flex では【行の位置は align-content が決める】ので、
 *     align-items だけを center にしても上寄せのままです。両方 center にします
 *     （数量セルは flex-wrap 指定が無い＝1行確定なので align-items だけで中央）。 */
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.cc-col-total,
.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-total {
	align-items: center !important;
	align-content: center !important;
}

/* ── §28-⑥ お会計: スマホの入力欄を 16px に（指示書G ⑥）──
 *   iOS は 16px 未満の入力欄をタップすると画面を自動で拡大し、離れても戻りません。
 *   実測 都道府県 13px ／ 郵便番号 14px。全部 16px にすれば拡大しません。
 *   ★「拡大を禁止する」設定（maximum-scale=1）は使いません（iPhone では効かず、
 *     拡大して読みたい方の邪魔になるため）。
 *   ★時間帯（.cc-ds-select）は inc/craftcos-delivery-slot.php v3 側で 16px にしています
 *     （あちらの <style id="cc-ds-css"> が wp_head 優先度99＝このファイルより後に読まれるため）。 */
@media (max-width: 820px) {
	.woocommerce-checkout .form-row input.input-text,
	.woocommerce-checkout .form-row input[type="text"],
	.woocommerce-checkout .form-row input[type="tel"],
	.woocommerce-checkout .form-row input[type="email"],
	.woocommerce-checkout .form-row input[type="number"],
	.woocommerce-checkout .form-row input[type="password"],
	.woocommerce-checkout .form-row select,
	.woocommerce-checkout .form-row textarea,
	.woocommerce-checkout #order_review select,
	.woocommerce-checkout .select2-container .select2-selection__rendered {
		font-size: 16px !important;
	}
	/* ★指示書に足したぶん（理由は納品メモ）: select2 が使われている場合、
	 *   見えている行（__rendered）だけ 16px にしても、タップして開いたときに
	 *   フォーカスが移る検索欄が小さいままだと、そこで拡大が起きます。
	 *   入れもの側（.select2-selection）と検索欄の2つも同じ 16px にそろえます。
	 *   検索欄は <body> 直下に出るため body.woocommerce-checkout から書いています
	 *   （＝お会計ページだけ。他のページには当たりません）。 */
	.woocommerce-checkout .select2-container .select2-selection {
		font-size: 16px !important;
	}
	body.woocommerce-checkout .select2-container--open .select2-search__field {
		font-size: 16px !important;
	}
}

/* ── §28-⑦ カゴ: 合計の下と、いちばん下の注記の下（指示書G ⑦）──
 *   いま: 合計の下 8px ＋ 注記の上 4px ＝ 12px ／ いちばん下 19px
 *   これから: 2px ＋ 2px ＝ 4px ／ 6px
 *   ★スマホ（≤768px）は v39/v40 の「html body …」ブロック（詳細度 0,3,5）が
 *     tr に padding 19px 0 を !important で当てているので、§27-③ と同じ作法で
 *     同じ強さの1ブロックを置きます。 */
.woocommerce-cart .cart_totals table.shop_table tr.order-total { padding-bottom: 2px !important; }
.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row { padding-top: 2px !important; }
.woocommerce-cart .cart_totals table.shop_table tr.cc-tax-note-row { padding-bottom: 6px !important; }
@media (max-width: 768px) {
	html body.woocommerce-cart .cart_totals table.shop_table tr.order-total {
		padding-bottom: 2px !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row {
		padding-top: 2px !important;
	}
	/* §27-③ で 2px にした「※送料は〜」の直後の税込注記も、ここでは同じ 2px のまま。
	   下だけ 19px → 6px に詰める。 */
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-tax-note-row {
		padding-bottom: 6px !important;
	}
}

/* ── §28-⑧ カゴ: 🎁 の内訳の上の線を消す（指示書G ⑧）──
 *   線の出どころは v39/v40 の「html body … tbody tr { border-top: 1px solid #F7E7ED }」。
 *   内訳の行は「上の🎁の行の続き」なので、そこだけ線を外します。
 *   ★🎀 同色まとめ割引の内訳（tr.cc-sc-note）にも同じ線が出ているので、同じ扱いにします
 *     （指示書 ⑧ の「出ていたら同じ扱いにすること」に該当・納品メモに記載）。
 *   ★合計の上の太線（tr.order-total の border-top 2px）と、折りたたみの「⌄」は触っていません。 */
.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note,
.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > th,
.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > td,
.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note,
.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note > th,
.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note > td {
	border-top: 0 !important;
}

/* ── §28-⑨ カゴ（PC）: 注記2行の左はしをそろえる（指示書G ⑨）──
 *   §27-③ はスマホ（≤768px）向けだけで、PC には当たっていませんでした（直し漏れ）。
 *   実測（1280px）: 「※送料は〜」は1列目の中（227〜467px）、
 *   「※表示価格は〜」は colspan=3 の右寄せ（〜1071px）。まったく別の場所に出ていた。
 *   PC でも2行とも全幅・左そろえにして、左はしを 227px にそろえます。
 *   ★スマホ側（§27-③）は触っていません。 */
@media (min-width: 821px) {
	.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row > td {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 2px 18px 0 !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr.cc-tax-note-row > td,
	.woocommerce-cart .cart_totals .cc-tax-note {
		text-align: left !important;
	}
	.woocommerce-cart .cart_totals table.shop_table tr.cc-tax-note-row > td {
		padding: 2px 18px 8px !important;
	}
	/* 「※送料は〜」の行の空の th は、スマホでは §27-③ 追記で消してあります。
	   PC でも同じように消して、2行の左はしを 1px の差もなくそろえます。 */
	.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row > th {
		display: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * §29（指示書H・実機FB第4弾）: 余白3点 ＋ 都道府県の拡大
 *   §28 までの既存セレクタは1バイトも編集していません。追記だけです。
 * ═══════════════════════════════════════════════════════════════ */

/* ── §29-A お会計: 請求先の項目どうしの間を詰める ──
 *   実測（実機）: 入力欄の下→次の入力欄の上が 42px。
 *   内訳は p.form-row の margin-bottom 14px ＋ ラベルの margin-bottom 5px ＋ ラベルの行の高さ。
 *   → margin-bottom を 14→6、ラベルを 5→1 にして 12px 縮めます（42px → 30px）。
 *   ★入力欄の高さ・文字サイズ（16px）には触りません。 */
.woocommerce-checkout #customer_details .woocommerce-billing-fields p.form-row,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields p.form-row {
	margin-bottom: 6px !important;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields p.form-row > label,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields p.form-row > label {
	margin-bottom: 1px !important;
}
/* 見出し「請求先情報の詳細」の下と、カードの内側も少しだけ詰めます。 */
.woocommerce-checkout #customer_details .woocommerce-billing-fields {
	padding: 16px !important;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3 {
	margin-bottom: 10px !important;
}

/* ── §29-B お会計: 「別の住所」「注文メモ」のカードを薄くする ──
 *   実測（実機）: チェック1個だけのカードが高さ 86px。
 *   カードの padding 22px のほかに、h3#ship-to-different-address が
 *   margin: 15px 0 16px（＝上下で31px）を持っているのが正体でした。
 *   ★チェックの当たり判定（押せる大きさ）は変えません。位置が詰まるだけです。 */
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
	padding: 14px 22px !important;
	margin-bottom: 12px !important;
}
.woocommerce-checkout #customer_details #ship-to-different-address {
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper {
	margin-top: 4px !important;
}
.woocommerce-checkout #customer_details #order_comments_field { margin-bottom: 0 !important; }
.woocommerce-checkout #customer_details #order_comments_field label { margin-bottom: 4px !important; }

/* ── §29-C カゴ: 🎁 まとめ買い割引と、その内訳をくっつける ──
 *   実測: 🎁 の文字の下→内訳の文字の上が 43〜45px（上下19pxずつの padding）。
 *   内訳は「🎁 の続き」なので、2px+2px に詰めて 13px にします。
 *   ★「小計 → 🎁」の間（44px）は【触りません】。行どうしの区切りとして残します。
 *   ★スマホ（≤768px）は v39/v40 の「html body …」ブロックが tr に padding 19px を
 *     !important で当てているので、同じ強度（html body …）で書いています。 */
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row > td {
	padding-bottom: 2px !important;
}
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > td {
	padding-top: 2px !important;
}

/* ── §29-E 都道府県を押すと拡大する（§28-⑥ の直し漏れ）──
 *   ★調査結果（司令塔が実サイトで確認）:
 *     §28-⑥ の指定そのものは【効いていました】。実サイトの全CSSが乗った状態で
 *     .select2-search__field の計算値は 16px、勝っているのも当店のルールでした。
 *     効いていなかったのは【タイミング】です。
 *       いまの書き方 … body.woocommerce-checkout .select2-container--open .select2-search__field
 *       ＝「開いた印（--open）が付いてから」16px になる。
 *     select2 は検索欄を作って【先にフォーカス】することがあり、iPhone は
 *     【押した瞬間の文字サイズ】で拡大を決めます。印が付く前は 13.33px のままなので拡大します。
 *     （再現ページで --open を外して測定 → 13.33px を確認しました。）
 *   → 印を待たず、最初から 16px にしておきます。見た目は1ミリも変わりません。
 *   ★お会計だけでなくマイページの住所でも同じことが起きるので、ページの限定も外しています
 *     （検索欄は <body> 直下に出るため、ページのクラスで絞ると当たらない場合があります）。
 *   ★当たるのは select2 の【検索欄だけ】です。ほかの入力欄・商品ページの選択には触れません。 */
@media (max-width: 820px) {
	html .select2-container .select2-search__field,
	html input.select2-search__field {
		font-size: 16px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * §30（指示書I・実機FB第5弾）
 *   E 都道府県の拡大／F お会計の内訳と⌄／G 並べかえ／H カゴの線／
 *   I･J 余白／L 割引合計の行／M 配送カードの左余白
 *   §29 までの既存セレクタは1バイトも編集していません。追記だけです。
 * ═══════════════════════════════════════════════════════════════ */

/* §30-E 入力欄をまとめて16px（iPhoneの自動拡大よけ） */
html body.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.qty),
html body.woocommerce-checkout select, html body.woocommerce-checkout textarea,
html body.woocommerce-cart input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.qty),
html body.woocommerce-cart select, html body.woocommerce-cart textarea,
html body.woocommerce-account input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.qty),
html body.woocommerce-account select, html body.woocommerce-account textarea,
html .select2-container .select2-search__field, html input.select2-search__field,
html .select2-container .select2-selection, html .select2-container .select2-selection__rendered {
	font-size: 16px !important;
}
/* §30-F お会計: 割引の内訳と ⌄ を出さない */
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-note,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-sc-note { display: none !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-cd-foldhead > th::after { content: "" !important; margin: 0 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-cd-foldhead { cursor: default !important; }
/* §30-G 並べかえ＋§30-J 間を詰める */
html body.woocommerce-checkout #order_review .shop_table tfoot { display: flex !important; flex-direction: column !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal { order: 1 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row   { order: 2 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.fee         { order: 3 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount { order: 4 !important; }
/* 割引の行の上下を詰める（お会計の行は th/td 側に padding があるので両方に当てる） */
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row > th,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row > td,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.fee,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.fee > th,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.fee > td,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount > th,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount > td {
	padding-top: 2px !important; padding-bottom: 2px !important;
}
/* §30-J2【★指示書に無い追加・1ブロック】上の §30-J を tr.fee / tr.cart-discount にも効かせる
 *   再現ページで実測したところ、上の §30-J は tr.cc-qd-row には効いていましたが、
 *   tr.fee と tr.cart-discount には【効いていませんでした】（実測 10px のまま）。
 *   理由は詳細度です。§21 の
 *     .woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > *
 *   は (1,4,2)、上の §30-J の html body … tr.fee > th は (1,3,5)。どちらも !important なので
 *   クラスの数が多い §21 が勝ちます（tr.cc-qd-row 側の §26-⑦ は (1,3,3) なので §30-J が勝てた）。
 *   ここでは §21 と同じ .woocommerce-checkout-review-order-table を足して (1,4,5) にし、
 *   §30-J が宣言どおり 2px になるようにします。値は §30-J と同じ 2px。既存行は無編集です。 */
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > td,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-discount,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-discount > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-discount > td {
	padding-top: 2px !important; padding-bottom: 2px !important;
}
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dtot-row { order: 5 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping { order: 6 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-ds-row   { order: 7 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-ship-note-row { order: 8 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total { order: 9 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-tax-note-row { order: 10 !important; }
/* §30-H/I カゴ: 割引どうしの線を消す＋内訳を詰める */
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row + tr.fee,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note + tr.fee { border-top: 0 !important; }
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-row > td,
html body.woocommerce-cart .cart_totals table.shop_table tr.fee,
html body.woocommerce-cart .cart_totals table.shop_table tr.fee > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.fee > td { padding-bottom: 2px !important; }
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > td,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note > td,
html body.woocommerce-cart .cart_totals table.shop_table tr.fee,
html body.woocommerce-cart .cart_totals table.shop_table tr.fee > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.fee > td { padding-top: 2px !important; }
/* 内訳の行の【下】も詰める（内訳と次の行がくっつくように） */
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-qd-note > td,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-sc-note > td { padding-bottom: 4px !important; }
/* §30-L 割引合計の行 */
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-dtot-row,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-dtot-row > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-dtot-row > td,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dtot-row > th,
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dtot-row > td { padding-top: 9px !important; padding-bottom: 9px !important; font-weight: 700 !important; }
/* §30-L3【★指示書に無い追加・1ブロック】カゴの「割引合計」の上下が二重にかかるのを直す
 *   上の §30-L は、カゴでは tr と > th と > td の【3つとも】に 9px を当てています。
 *   カゴの行はセルではなく【行(tr)】に余白を持たせる作りなので、そのままだと
 *   9+9（行）＋9+9（セル）＝36px ぶんかかり、実測で行の高さが 58.0px になりました
 *   （モックの想定は 9px＋10px ＝ 約43px／となりの「合計」は 45.0px）。
 *   行(tr)側の 9px だけ残し、セル側を 0 にもどします。お会計側（セルに持たせる作り）は
 *   このブロックの対象外なので、9px のままです。金額・文字の太さ・色は変えていません。 */
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-dtot-row > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cc-dtot-row > td {
	padding-top: 0 !important; padding-bottom: 0 !important;
}
html .cc-dtot-amt { color: #B8446A !important; font-weight: 700 !important; }
/* §30-L4【★指示書に無い追加・1ブロック】カゴ（スマホ幅）で「割引合計」の金額を右はしに
 *   カゴの合計欄は ≤768px で行を flex に組み替えており、その中で
 *     「金額セルは右寄せ」の指定が 行のクラスを【名指し】しています
 *     （§26-② が cart-subtotal / order-total、§26-⑥ が fee / cc-qd-row）。
 *   新顔の tr.cc-dtot-row はその名簿に入っていないので、手前の
 *   「カゴの td は text-align:left !important」に当たって【左寄せ】になります
 *   （再現ページで実測: 390px・768px で left、769px 以上では right＝ズレるのはスマホ幅だけ）。
 *   §26-⑥ と同じ強さ・同じ書き方で、割引合計の金額にも右はしを当てます。 */
@media (max-width: 768px) {
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-dtot-row > td {
		text-align: right !important;
	}
}
/* §30-L2【★指示書に無い追加・1ブロック】お会計の「割引合計」の行の組み方
 *   お会計の tfoot の行を flex（ラベル｜数量｜金額）にしている既存の指定は、行のクラスを
 *   【名指し】しています（cart-subtotal / cart-discount / fee / tax-total / tax-rate / order-total）。
 *   新顔の tr.cc-dtot-row はその名簿に入っていないため table-row のまま残り、
 *   「割引合計」と「−¥696」が上下に積まれます（再現ページで実測: 行の高さ 98.2px）。
 *   §26-⑦ が tr.cc-qd-row に対して行ったのと【同じこと】を、同じ値で書きます。
 *   ★セル側（cc-col-name / cc-col-qty / cc-col-total）の指定はクラス名を名指ししていない
 *     （tfoot tr > .cc-col-… ）ので、そのまま当たります。ここでは行だけ足します。 */
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dtot-row {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: 8px;
	border-bottom: 1px solid var(--cc-line, #F0DCE4) !important;
	padding-left: 4px !important; padding-right: 4px !important;
}
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dtot-row {
	padding-left: 12px !important; padding-right: 12px !important;
}
@media (max-width: 820px) {
	html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dtot-row {
		gap: 4px;
		padding-left: 6px !important; padding-right: 6px !important;
	}
}
/* §30-M 配送カードの左の余白を詰める（文字の大きさ・文言は変えない） */
/* ★v73（指示書Q ⑦）: ○（ラジオ）と文字のあいだ＝li の gap 10px（§V9-③）＋ label の margin-left 6px（この §30-M）の
   足し算で 16px 空いていた。li の gap を 8px にし、label の margin-left を 0 にして【8px ちょうど】に。
   文字の大きさ・色・金額の色（ピンク）・カードの左右の余白（8px）は変えていません。 */
html body.woocommerce-checkout #order_review #shipping_method li { padding-left: 8px !important; padding-right: 8px !important; gap: 8px !important; }
html body.woocommerce-checkout #order_review #shipping_method li label { margin-left: 0 !important; }

/* ── §31（司令塔パッチ・指示書I の検品で見つかった2点）─────────────
 *  ① 5-2: 「小計 → 🎁」まで詰まりすぎていた（指示書I §30-J の書き漏れ）。
 *     §30-J は割引の行に一律 2px を当てているため、割引どうしだけでなく
 *     「小計 → 🎁」も詰まっていた（実測: モック34.8px に対し 17.5px）。
 *     ★値は 12px ではなく 18px。納品メモの案（12px）はモックのCSS値をそのまま使ったもので、
 *       実際に出る間隔は 27.5px にしかならない。12/14/16/18/20px を全部測って、
 *       モックの 34.8px に最も近い 33.5px になる 18px を採用（差 −1.3px）。
 *     🎁 の【上】だけ戻します。割引どうし（🎁→🎀）は 2px のままです。
 *  ② 5-4: お会計で 🎀 の行を隠すと、クーポン利用中のご案内
 *     「クーポン利用中は同色まとめ割引は適用されません🌸」まで消えていた。
 *     目印（cc-sc-warn）が付いた行＝ご案内なので、そこだけ出します。
 *     ※目印は inc/craftcos-samecolor-discount.php v6 が付けます。
 * ─────────────────────────────────────────────── */
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row > td {
	padding-top: 18px !important;
}
/* ★v79（指示書AK AK-2）: ② の cc-sc-warn のルールは消した（クーポンと併用OK になり、ご案内の行が無くなったため）。 */

/* ══════════════════════════════════════════════════════════════════════════
 * §32（指示書J・実機FB第6弾 B / D / E）20260921_v69
 *   B. お会計の合計欄を「案A」の形にする
 *      商品代金 → 🎁 → 🎀 → 小計（割引後） → 配送 → お届けのご希望 → 送料の注記 → 合計 → 税の注記
 *      ★並びは DOM ではなく order で決まります。行を動かす JS はありません。
 *   D. カゴ: 「小計」と「🎁」の間の空きを詰める
 *   E. お会計: 都道府県をタップすると画面が拡大する（select2 の検索欄を出さない）
 *
 *   ★この §32 より上の行は1バイトも変えていません。
 *     例外は【6か所のセレクタ並びに `tr.cc-dsub-row,` を1行ずつ足した】ぶんだけです
 *     （970 / 1030 / 1640 / 3652 / 3665 / 3795 行。もとの v68 では 969 / 1028 / 1637 / 3648 / 3660 / 3789 行の直下）。
 *     これを足さないと新しい行は display:block のまま落ちて、金額が右はしに揃いません。
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── §32-B② 並び順（案A）───────────────────────────────────────────
 *   4930〜4968行あたりの既存の order 指定は【消していません】。ここで同じ形の指定を
 *   後ろに置いて上書きします。実質の差分は
 *     ・tr.cc-dsub-row に 5 を足した
 *     ・tr.cc-dtot-row の 5 は使わなくなった（お会計では下の ⑤ で display:none）
 *   の2点だけで、他の番号は v68 と同じです。 */
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal { order: 1 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-qd-row     { order: 2 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.fee           { order: 3 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-discount { order: 4 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-dsub-row   { order: 5 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.woocommerce-shipping-totals.shipping { order: 6 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-ds-row     { order: 7 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-ship-note-row { order: 8 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total   { order: 9 !important; }
html body.woocommerce-checkout #order_review .shop_table tfoot tr.cc-tax-note-row { order: 10 !important; }

/* ── §32-B③ 🎁 と 🎀 を一段下げる（お会計だけ）────────────────────────
 *   見出しを 28px 内側へ・13px に。上下の余白は 4px。
 *   ★ここは §31-① の「tr.cc-qd-row > th/td に padding-top: 18px」と §30-J2 の 2px を
 *     【上書き】します（同じ詳細度・読み込み順であとにあるほうが勝つ）。
 *     §31-① は「小計 → 🎁」を広げるための指定でしたが、案Aでは 🎁 は小計にぶら下がる
 *     一段下の行なので、上下とも 4px にそろえます。 */
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > th {
	padding-left: 28px !important;
	font-size: 13px !important;
}
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row > td,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee > td {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

/* ── §32-B④ 線（ななみちゃん指定・1本ずつ確認ずみ）──────────────────
 *   ・商品代金の下の線 … 残す（1030行のリストが引いているので、ここでは何もしない）
 *   ・🎁 と 🎀 の間の線 … 消す
 *   ・🎀 と 小計（割引後）の間の線 … あり（＝ cc-dsub-row の border-top）
 *   ・小計（割引後）の下の線 … あり（＝ cc-dsub-row の border-bottom）
 *   ★上下の線は【行（tr）そのもの】に引きます。セル（th/td）に引くと、この行は flex で
 *     gap（スマホ4px・PC8px）があるぶん線がそこだけ切れて、縦線が入って見えます。 */
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-qd-row,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.fee {
	border-bottom: 0 !important;
}
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dsub-row {
	border-top: 1px solid var(--cc-line, #F0DCE4) !important;
	border-bottom: 1px solid var(--cc-line, #F0DCE4) !important;
}
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dsub-row > th,
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dsub-row > td {
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;      /* 縦線は入れない */
	font-weight: 700 !important;
}

/* ── §32-B⑤ 割引合計の行は、お会計では出さない（保険）──────────────
 *   PHP（craftcos-discount-total.php v2）が出さない作りですが、フェイルセーフで
 *   割引合計に戻ったときに案Aの並びへ混ざらないよう、お会計では隠します。
 *   ★カゴ（.woocommerce-cart .cart_totals）の tr.cc-dtot-row は【消していません】。 */
html body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot tr.cc-dtot-row {
	display: none !important;
}

/* ── §32-D カゴ: 「小計」と「🎁」の間の空きを詰める ────────────────────
 *   【いまの値】小計の文字の下 → 🎁 の文字の上 ＝ 47.5px（375 / 390 / 430px とも同じ）
 *   【原因の指定】craftcos-checkout.css 3202〜3215行（v39/v40 モバイル統合ブロック）の
 *       html body.woocommerce-cart .cart_totals table.shop_table tbody tr { padding: 19px 0 !important; }
 *     小計の行の下19px ＋ 区切り線1px ＋ 🎁 の行の上19px ＝ 箱の縁どうし 39px。
 *     そこに行ボックスのアキ（文字の上下 計8.5px）が乗って 47.5px になります。
 *     ★セル（th/td）の padding は 3233〜3247行で 0 にされているので、セル側ではありません。
 *   【直したあと】箱の縁どうし 4px ＝ 文字どうし 12.5px（目標 12px ±1px）
 *
 *   ★詰め具合を変えたいときは、下の【--cc-d-subgap の1か所】だけ変えてください。
 *       3px  → 文字どうし 約12px（いまの設定）
 *       7px  → 約16px
 *       11px → 約20px
 *   ★区切り線（🎁 の行の border-top）は【残しています】。
 *   ★🎁 と 🎀 の間・🎀 と 割引合計の間の余白（§30-H/I の 2px / 4px）は触っていません。
 *   ★「小計のすぐ下が 🎁 のときだけ」詰めます（:has と + のペア）。
 *     まとめ買い割引が無いカゴでは今までどおりの余白のままです。 */
@media (max-width: 768px) {
	html body.woocommerce-cart .cart_totals { --cc-d-subgap: 6px; }   /* ★ここだけ変える（v70: ななみちゃん判断でモックと同じ 6px に） */

	html body.woocommerce-cart .cart_totals table.shop_table tbody tr.cart-subtotal:has(+ tr.cc-qd-row) {
		padding-bottom: calc(var(--cc-d-subgap, 3px) / 2) !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tbody tr.cart-subtotal + tr.cc-qd-row {
		padding-top: calc(var(--cc-d-subgap, 3px) / 2) !important;
	}
}

/* ── §32-E お会計: 都道府県をタップすると画面が拡大する ────────────────
 *   原因は文字の大きさではありません（16px は当たっています）。
 *   プルダウンの中に出る【検索欄】が幅130px＝画面の3分の1しかなく、
 *   iPhone は細い入力欄にカーソルが入ると、文字が16pxでも見やすい大きさまで拡大します。
 *   スマホでは検索欄そのものを出さない＝フォーカスが入る入力欄が無くなるので、拡大しようがありません。
 *   ・47都道府県は全部そのまま出る／選べる／フォーカスは枠（span）に移る／プルダウンは閉じる
 *   ・パソコン（821px以上）では今までどおり検索できます
 *   ★select2 の font-size: 16px の指定（4919〜4921行）は【残しています】。消すと他の入力欄で拡大が復活します。 */
@media (max-width: 820px) {
	html body .select2-container--open .select2-search--dropdown { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * §33（指示書 実機FB第7弾 C / D）20260922_v71
 *   C. お会計が横に動いてしまう（都道府県のプルダウンを開いた瞬間だけ 390px → 592px）
 *      原因: 上の @media (max-width:820px) にある `.woocommerce-checkout select { width:100% !important }`
 *            が、select2 が隠している本体の select（.select2-hidden-accessible）にも当たり、
 *            select2 側の width:1px !important を【あとから】上書きしていた。
 *            → ここで .select2-hidden-accessible を名指しして 1px に戻す。
 *   D. 都道府県のプルダウンの色がまわりと違う（枠 #aaa・選択行 #007cba の WordPress 既定のまま）
 *      → 枠を #F0DCE4・角丸12px、選んでいる行をうすいピンクに。
 *   ★この §33 より上の行は1バイトも変えていません。
 *   ★既存の width:100% !important（郵便番号・市区町村などに要る）は【残しています】。
 *   ★§32-E の「スマホでは検索欄を出さない」指定もそのままです。
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── §33-C 横ずれ（はみ出し）を止める ─────────────────────────────── */
@media (max-width: 820px) {
	/* 隠してあるほうの select は 1px に戻す（select2 の既定に合わせる） */
	html body.woocommerce-checkout select.select2-hidden-accessible,
	html body.woocommerce-cart select.select2-hidden-accessible {
		width: 1px !important;
		min-width: 0 !important;
		max-width: 1px !important;
	}
	/* 開いている間だけ body の直下に出る入れものは、中身の幅に合わせる
	   （フォームの中の .select2-container は 100% のままにしたいので、body直下だけを名指し） */
	html body.woocommerce-checkout > .select2-container,
	html body.woocommerce-cart > .select2-container {
		width: auto !important;
		max-width: 100vw !important;
	}
}

/* ── §33-D プルダウンの色をまわりに揃える ───────────────────────────
 *   ★閉じているときの見た目（.select2-selection）は触っていません（すでに揃っています）。 */
/* ★v72（司令塔パッチ・検品）: 色は【変数を使わず直書き】にしました。
   理由: このサイトの --cc-pink は #F58BB6（うすいピンク）で、指示書が想定していた
   #B8446A（濃いピンク）ではありませんでした。var(--cc-pink, #B8446A) と書くと
   フォールバックではなく #F58BB6 が採用され、実物では
   「うすいピンクの文字 × うすいピンクの背景」＝コントラスト 1.96 になっていました
   （本文の目安は 4.5 以上）。実際のサイトで測って確認ずみです。
   あわせて、選ばれている行の背景を #FBEAF1 → #FCEFF4 に少しだけ明るくして 4.61 にしています。
   --cc-line / --cc-ink はこのサイトでは未定義でフォールバックが効いていましたが、
   同じ事故を繰り返さないよう、こちらも直書きにそろえました（見た目は変わりません）。 */
html body .select2-container--default .select2-dropdown{
	border: 1px solid #F0DCE4 !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 10px 28px rgba(184, 68, 106, .14) !important;
	overflow: hidden !important;
}
html body .select2-container--default .select2-results__option{
	color: #5F5054 !important;
	padding: 9px 12px !important;
}
html body .select2-container--default .select2-results__option--highlighted,
html body .select2-container--default .select2-results__option--highlighted[aria-selected]{
	background: #FDF0F5 !important;
	color: #B8446A !important;            /* 白背景比 4.65 */
}
html body .select2-container--default .select2-results__option[aria-selected="true"]{
	background: #FCEFF4 !important;
	color: #B8446A !important;            /* 4.61（#FBEAF1 のままだと 4.45） */
	font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * §34（v74・指示書R R-5）カゴの「か所数ぶん📦」の帯（−＋つき）＋「外しますか？」
 *   craftcos-options v25 の一体行JSが、親の行の加工の帯のすぐ下に
 *   <div class="cc-bo-opt cc-bo-band cc-bo-band--gq"> を置く（スマホ＝td.cc-bo-slot／PC＝.cc-bo-pc）。
 *   枠・絵の大きさは §22 の .cc-bo-opt のまま。色だけモック v5 の .ci__box.g（実線）にする。
 * ═══════════════════════════════════════════════════════════════ */
.woocommerce-cart .cc-bo-opt.cc-bo-band--gq {
	border-style: solid !important;
	border-color: #EAD9E0 !important;
	background: #FFFBFC !important;
	color: #6B5A60;
}
.woocommerce-cart .cc-bo-band--gq .cc-bo-gline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #6B5A60;
}
.woocommerce-cart .cc-bo-band--gq .cc-bo-gname { white-space: nowrap; }
.woocommerce-cart .cc-bo-band--gq .cc-bo-gq { display: inline-flex; align-items: center; gap: 4px; }
.woocommerce-cart .cc-bo-band--gq .cc-bo-gq b { min-width: 20px; text-align: center; font-weight: 800; color: #4A3A40; }
.woocommerce-cart .cc-bo-band--gq .cc-bo-gstep {
	position: relative;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important;
	border: 0 !important; border-radius: 8px !important;
	background: #F1E6EA !important; background-image: none !important; box-shadow: none !important;
	color: #6B5A60 !important; font-size: 15px; font-weight: 800; line-height: 1 !important;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.woocommerce-cart .cc-bo-band--gq .cc-bo-gstep::before { content: ""; position: absolute; inset: -9px; }   /* 押せる範囲 44px */
.woocommerce-cart .cc-bo-band--gq .cc-bo-gstep:disabled { opacity: .35; cursor: default; }
.woocommerce-cart .cc-bo-band--gq .cc-bo-gpr { white-space: nowrap; color: #6B5A60; }
.woocommerce-cart .cc-bo-band--gq.is-busy { opacity: .6; pointer-events: none; }

.cc-bo-ask[hidden] { display: none !important; }
.cc-bo-ask {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(60, 40, 50, .35);
	display: flex; align-items: center; justify-content: center;
}
.cc-bo-ask__in { background: #fff; border-radius: 16px; padding: 16px; width: 82%; max-width: 300px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.cc-bo-ask__in p { margin: 0 0 12px; font-weight: 800; font-size: 15px; color: #4A3A40; line-height: 1.5; }
.cc-bo-ask__in p small { display: block; font-weight: 400; font-size: 12px; color: #8A7A80; margin-top: 4px; }
.cc-bo-ask__b { display: flex; gap: 8px; }
.cc-bo-ask__b button {
	flex: 1; min-height: 44px;
	border: 0 !important; border-radius: 12px !important; padding: 10px !important;
	font-size: 14px; font-weight: 800;
	background: #F1E6EA !important; background-image: none !important; color: #6B5A60 !important; box-shadow: none !important;
	cursor: pointer;
}
.cc-bo-ask__b .cc-bo-ask__ok { background: #C9738F !important; color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════
 * §35（v75・司令塔パッチ）PC のカゴ: 合計の下の注記2行の線を消す（スマホ §27-③ と同じ見た目に）
 * ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row > td,
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row > th,
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row + tr.cc-tax-note-row > td {
		border-top: 0 !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tr.cc-cs-hint-row + tr.cc-tax-note-row > td {
		padding-top: 2px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §36（v76・指示書AB AB-2）PC のカゴ: 表を「お買い物カゴの合計」と同じ白いカードに
 *   テーマ Hello Elementor の初期設定（table td/th に灰色の 1px 線・奇数行を灰色・行に触れたら灰色）と
 *   Woo 標準の .woocommerce table.shop_table の枠（灰色・角丸5px）が、PC のカゴの表だけそのまま出ていた。
 *   ★821px 以上だけ。820px 以下（カード型）とお会計は触っていません。
 * ═══════════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
	html body.woocommerce-cart table.shop_table.cart {
		background: #fff !important;
		border: 1px solid var(--cc-line, #F0DCE4) !important;
		border-radius: 18px !important;
		box-shadow: 0 6px 20px rgba(201,164,106,.08);
		border-collapse: separate !important;
		border-spacing: 0 !important;
		overflow: hidden;
	}
	html body.woocommerce-cart table.shop_table.cart th,
	html body.woocommerce-cart table.shop_table.cart td,
	html body.woocommerce-cart table.shop_table.cart tbody > tr > td,
	html body.woocommerce-cart table.shop_table.cart tbody > tr > th,
	html body.woocommerce-cart table.shop_table.cart tbody > tr:nth-child(odd) > td,
	html body.woocommerce-cart table.shop_table.cart tbody > tr:nth-child(odd) > th,
	html body.woocommerce-cart table.shop_table.cart tbody > tr:hover > td,
	html body.woocommerce-cart table.shop_table.cart tbody > tr:hover > th {
		border: 0 !important;
		border-top: 1px solid var(--cc-line, #F0DCE4) !important;
		background: transparent !important;
	}
	/* 見出しの行: 線なし・生成り色 */
	html body.woocommerce-cart table.shop_table.cart thead th,
	html body.woocommerce-cart table.shop_table.cart thead td {
		border-top: 0 !important;
		background: var(--cc-ivory, #FFF9F5) !important;
	}
	/* クーポン・更新の行: 上の線なし */
	html body.woocommerce-cart table.shop_table.cart td.actions {
		border-top: 0 !important;
	}

	/* 合計の箱: 割引の行どうしの上の線を消す（続けて並ぶときだけ・後ろの行）。
	   §24 の「tr + tr > th/td { border-top … !important }」（0,3,4）より強い書き方（html body … :is() 2つ）。 */
	html body.woocommerce-cart .cart_totals table.shop_table tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cc-dtot-row) + tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cc-dtot-row) > th,
	html body.woocommerce-cart .cart_totals table.shop_table tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cc-dtot-row) + tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cc-dtot-row) > td {
		border-top: 0 !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * §37（v77・指示書AH AH-2／AH-4）PC（821px 以上）のカゴ: スマホと同じ「商品ごとのカード」に
 *   正: プレビュー_PCのギャラリー2段とカゴの整理_20260927_v2.html（②「あと」・PC）
 *   ★追記だけ。820px 以下のブロック（§18・§23・§25 など）は1行も変えていない。
 *     スマホの「① 同じ商品を1枚のカードに」〜 見出し行・行・まとめ行・pick の「／」・写真／商品名／あとで買うを隠す、
 *     を 821px 以上の新しいブロックに【写して】PC 用の値にした。
 *   ★効くのは「まとめカードの見出し行（tr.cc-grp-head＝craftcos.php v67 §28-2 の JS が作る）がある表」だけ
 *     （:has(tr.cc-grp-head)）。JS が動かない／カードが組めなかったときは §36 の今の表のまま。
 *   カードの形（プレビュー）:
 *     [写真56] 四芒星パーツ(平面)                                  ← 見出し行 tr.cc-grp-head（下に点線）
 *     M 約4.5cm ／ ●シルクゴールド ｜ − 2 ＋ 削除 保存 ｜  ¥400    ← 行 tr.cart_item.cc-grp（grid 3列: 1fr / auto / 120px）
 *     ┌🧩 穴あけ加工(1か所) - 下  …                     ＋¥30 ┐ ← 加工の箱（.cc-bo-pc）＝その行のすぐ下・全幅
 *                                  合計 9個（商品＋加工） ¥3,255  ← まとめ行 tr.cc-grp-foot（上に点線・#FFFBF8）
 *   ★加工の箱は PC では td.product-name の中の .cc-bo-pc（craftcos-options.php の一体行JS が置く・触らない）。
 *     td.product-name を display:contents にして、中身を行の grid に直接並べる
 *     （サイズ・色＝1段目の1列目／加工の箱などそれ以外＝2段目から全幅）。
 * ═══════════════════════════════════════════════════════════════ */

/* 「（商品＋加工）」は PC のカードだけで見せる（スマホのまとめ行は今のまま＝出さない） */
.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__inc { display: none; }
/* 見出し行の商品名のリンク（v67 からリンクにした）＝文字と同じ見た目（PC・スマホ共通） */
.woocommerce-cart tr.cc-grp-head .cc-grp-head__name a { color: inherit !important; text-decoration: none !important; }

/* ── AH-4: ¥0 の加工の箱（JS が cc-bo-zero を付ける）＝少しだけ薄く（PC・スマホ共通・文字色はそのまま） ── */
.woocommerce-cart table.shop_table.cart .cc-bo-opt.cc-bo-zero {
	background: #FBFAFC !important;
	border-color: #ECE6F0 !important;
}
.woocommerce-cart table.shop_table.cart .cc-bo-opt.cc-bo-zero .cc-bo-amt { color: #b5a9c4 !important; }

@media (min-width: 821px) {

	/* ── 表を解体してカードの器に（§36 の白い箱・見出しの行・線を外す） ── */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) {
		display: block !important;
		width: 100% !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) thead { display: none !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody { display: block !important; width: 100% !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr > td,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr > th,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr:nth-child(odd) > td,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr:hover > td {
		border: 0 !important;
		background: transparent !important;
	}

	/* ── 見出し行（写真 56px ＋ 商品名 15px/700）＝カードのいちばん上 ── */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cc-grp-head {
		display: block !important;
		background: #fff !important;
		border: 1px solid var(--cc-line, #F0DCE4) !important;
		border-bottom: 1px dashed var(--cc-line, #F0DCE4) !important;
		border-radius: 18px 18px 0 0 !important;
		margin: 14px 0 0 !important;          /* カードとカードの間 14px */
		padding: 14px 20px !important;
		box-shadow: none !important;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cc-grp-head:first-child { margin-top: 0 !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cc-grp-head > td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		text-align: left !important;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__line { display: flex; align-items: center; gap: 14px; min-width: 0; }
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb {
		flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
		background: #F7F1F4; display: block;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb img,
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb .cc-thumb,
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__thumb a {
		display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 12px; margin: 0;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__name {
		flex: 1 1 auto; min-width: 0;
		font-size: 15px; font-weight: 700; color: #5F5054; line-height: 1.5;
	}
	.woocommerce-cart tr.cc-grp-head .cc-grp-head__name a:hover { color: #B8446A !important; }

	/* ── 行（サイズ・色 ｜ 数量・削除・保存 ｜ 金額）＝grid 3列 ── */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto 120px !important;
		grid-template-areas: none !important;
		column-gap: 18px !important;
		row-gap: 10px !important;
		align-items: center !important;
		position: relative;
		background: #fff !important;
		border: 0 !important;
		border-left: 1px solid var(--cc-line, #F0DCE4) !important;
		border-right: 1px solid var(--cc-line, #F0DCE4) !important;
		border-top: 1px dashed var(--cc-line, #F0DCE4) !important;
		border-radius: 0 !important;
		margin: 0 !important;
		padding: 12px 20px !important;
		box-shadow: none !important;
	}
	/* 見出しのすぐ下の行は上の点線なし（見出し行の下の点線が仕切り） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp.cc-grp--first { border-top: 0 !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td {
		width: auto !important;
		min-width: 0;
		padding: 0 !important;
		text-align: left;
		vertical-align: middle;
	}
	/* 写真（見出し行に1回だけ）・単価の列・商品名は行では出さない */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-thumbnail,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-price,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name > a,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp .cc-sfl-link {
		display: none !important;
	}
	/* ✕ は「削除」ボタンが出せたとき（cart-row v3 が body.cc-cr-on を付ける）だけ引っこめる。
	   出せなかったとき（JS が動かない）は行の右上に ✕ を残す＝消せなくならない。 */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-remove {
		position: absolute !important;
		top: 12px; right: 8px;
		width: auto !important;
	}
	html body.woocommerce-cart.cc-cr-on table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-remove {
		display: none !important;
	}

	/* 1列目＝サイズ・色（td.product-name の中身を行の grid に直接並べる） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name { display: contents !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > * { grid-column: 1 / -1; min-width: 0; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > dl.variation {
		grid-column: 1; grid-row: 1;
		margin: 0 !important;
		font-size: 13.5px; line-height: 1.5; color: #7a6a70;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > dl.variation dt,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > dl.variation dd {
		display: inline !important; float: none !important; clear: none !important;
		margin: 0 !important; padding: 0 !important; font-weight: 400;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > dl.variation dd p { display: inline; margin: 0; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > dl.variation dt:not(.cc-grp-pick) { margin-right: .35em !important; }   /* 「カラー: ●黒」のすき間（スマホと同じ） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > dl.variation dd::after { content: ""; display: block; }
	/* 行の中では出さないメタ（まとめ買い価格はまとめ行に1回だけ／「カラー:」は pick に置き換え） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name dl.variation .cc-grp-bulk,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name dl.variation .cc-grp-hide { display: none !important; }
	/* 「M 約4.5cm ／ ●シルクゴールド」 */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name dl.variation dt.cc-grp-pick {
		font-weight: 800 !important; color: #5F5054 !important;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name dl.variation dt.cc-grp-pick::after {
		content: "／"; color: #C9BBBF; margin: 0 .35em 0 .45em; font-weight: 400;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name dl.variation dt.cc-grp-pick--solo::after { content: none; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp td.product-name dl.variation dd.cc-grp-pick { color: #5F5054; }
	/* 在庫バッジ（指示書B）は1段目の右はし（サイズ・色と同じ段） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > .cc-sl-badge { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; }

	/* 2列目＝数量 ＋ 削除 ＋ 保存（cart-row v3 が作る横並び） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-quantity {
		grid-column: 2; grid-row: 1;
		display: flex !important; align-items: center; justify-content: flex-start;
		gap: 8px !important; flex-wrap: nowrap;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-quantity .quantity,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-quantity .cc-cr-del,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-quantity .cc-sfl-itemact { flex: 0 0 auto; margin: 0 !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-quantity .cc-cr-del,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-quantity .cc-sfl-itemact .cc-sfl-stash { padding: 6px 14px !important; font-size: 12.5px !important; }

	/* 3列目＝金額（右寄せ 16px/800・2個以上は「¥200 × 2」を下に 11px） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal {
		grid-column: 3; grid-row: 1;
		justify-self: end;
		text-align: right !important;
		white-space: nowrap;
		font-size: 16px; font-weight: 800; color: #5F5054; line-height: 1.4;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .amount,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .cc-cd-unit {
		display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #A3928F;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .cc-cd-unit .amount,
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .cc-cd-unit .woocommerce-Price-amount { font-weight: 400; color: inherit; }
	/* 「小計（商品＋加工）」は行ごとに出さない（まとめ行に集約・スマホと同じ） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .cc-bo-sum-pc { display: none !important; }
	/* 在庫不足の知らせ（小計欄の先頭の span）は金額の上に小さく */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-subtotal .cc-sl-rowwarn {
		display: block; margin: 0 0 2px !important; padding: 0 !important; background: none !important;
		font-size: 11px; font-weight: 800; color: var(--cc-rose, #B8446A); white-space: normal;
	}

	/* 加工の箱（.cc-bo-pc）＝その行のすぐ下・全幅（左右いっぱい） */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item.cc-grp > td.product-name > .cc-bo-pc {
		grid-column: 1 / -1;
		margin: 0 !important;
		max-width: none !important;
	}

	/* ── まとめ行（右寄せ「合計 9個（商品＋加工） ¥3,255」・#FFFBF8・上に点線）＝カードのいちばん下 ── */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cc-grp-foot {
		display: block !important;
		background: #FFFBF8 !important;
		border: 1px solid var(--cc-line, #F0DCE4) !important;
		border-top: 1px dashed var(--cc-line, #F0DCE4) !important;
		border-radius: 0 0 18px 18px !important;
		box-shadow: 0 4px 18px rgba(201,164,106,.08) !important;
		margin: 0 !important;
		padding: 12px 20px !important;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cc-grp-foot > td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		text-align: left !important;
	}
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__line {
		display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	}
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__tag { font-size: 12px; color: #9c8891; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum { font-size: 13.5px; color: #6b5a60; white-space: nowrap; margin-left: auto; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum b { font-weight: 800; color: #5F5054; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__inc { display: inline; font-style: normal; }
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em,
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em .amount,
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em .woocommerce-Price-amount {
		font-style: normal; font-weight: 800; font-size: 18px; color: #5F5054; margin-left: 4px;
	}
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em .amount,
	.woocommerce-cart tr.cc-grp-foot .cc-grp-foot__sum em .woocommerce-Price-amount { margin-left: 0; }

	/* ── カードにならなかった行（親とつながらない加工の行など・ふつうは出ない）＝1枚の小さなカード ── */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item:not(.cc-grp):not(.cc-bo-hidden) {
		display: grid !important;
		grid-template-columns: 56px minmax(0, 1fr) auto 120px;
		column-gap: 18px;
		align-items: center;
		position: relative;
		background: #fff !important;
		border: 1px solid var(--cc-line, #F0DCE4) !important;
		border-radius: 18px !important;
		margin: 14px 0 0 !important;
		padding: 12px 36px 12px 20px !important;
	}
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item:not(.cc-grp):not(.cc-bo-hidden) > td { padding: 0 !important; width: auto !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item:not(.cc-grp):not(.cc-bo-hidden) > td.product-price { display: none !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item:not(.cc-grp):not(.cc-bo-hidden) > td.product-remove { position: absolute !important; top: 12px; right: 10px; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr.cart_item:not(.cc-grp):not(.cc-bo-hidden) > td.product-subtotal { text-align: right !important; font-weight: 800; }

	/* ── クーポン・更新の行（あれば）はカードの下に、右寄せで ── */
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr:not(.cart_item):not(.cc-grp-head):not(.cc-grp-foot) { display: block !important; }
	html body.woocommerce-cart table.shop_table.cart:has(tr.cc-grp-head) tbody > tr > td.actions {
		display: block !important;
		padding: 14px 0 0 !important;
		text-align: right;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * §38（v78・指示書AJ AJ-4(d)）カゴのセミオーダー（B案）
 *   ・サイズの札：セミオーダーの行は「✂️」＋ピンクの札「5cm・厚み2.2mm」（長さ空なら「M・厚み2.2mm」）。
 *     札そのもの（.cc-grp-note）は craftcos.php v66 の小さな札。色だけピンクにする。
 *   ・セミオーダー料の箱（.cc-semi-feebox）：加工の箱と同じ場所（スマホ td.cc-bo-slot／PC .cc-bo-pc）のいちばん上・サムネ無し。
 *       ✂️ セミオーダー料 ………………………… +¥220
 *       カラー・個数に限らず1回分の料金です（長さ・厚み違いを除く）
 * ═══════════════════════════════════════════════════════════════ */
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt.cc-grp-pick .cc-grp-note.cc-grp-note--semi {
	background: #FFEAF2;
	color: #b8446a;
}
.woocommerce-cart .cc-semi-feebox {
	display: block;
	background: #FFF7FA;
	border: 1.5px dashed #F3C9D9;
	border-radius: 12px;
	padding: 7px 8px 7px 10px;
	margin: 0;
	box-sizing: border-box;
	min-width: 0;
}
.woocommerce-cart .cc-semi-feebox__nm {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 800;
	color: #6B5A60;
	line-height: 1.45;
}
.woocommerce-cart .cc-semi-feebox__ic { flex: 0 0 auto; }
.woocommerce-cart .cc-semi-feebox__t { min-width: 0; }
.woocommerce-cart .cc-semi-feebox__amt {
	margin-left: auto;
	font-size: 14px;
	font-weight: 800;
	color: #C97A8E;
	white-space: nowrap;
}
.woocommerce-cart .cc-semi-feebox__nt {
	display: block;
	margin-top: 2px;
	font-size: 9.5px;
	letter-spacing: -.035em;
	font-weight: 600;
	line-height: 1.5;
	color: #a3928f;
	white-space: nowrap;
}
@media (max-width: 352px) {
	.woocommerce-cart .cc-semi-feebox__nt { white-space: normal; }
}
/* 加工の箱が続くときの間（スマホの受け皿は縦に積むだけ＝加工の箱どうしと同じ 6px。PC の .cc-bo-pc は gap 6px がある） */
.woocommerce-cart td.cc-bo-slot .cc-semi-feebox + .cc-bo-opt,
.woocommerce-cart td.cc-bo-slot .cc-semi-feebox + .cc-bo-band,
.woocommerce-cart td.cc-bo-slot .cc-semi-feebox + .cc-semi-feebox { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
 * §39（指示書AK AK-4(c)）20261001_v79 → ★v80（AK 検品の直し）
 *   お会計のクーポン欄（.cc-coupon-wrap＝craftcos.php v12 の JS が p.form-row-first／p.form-row-last を包む）。
 *   ・入力は flex:1 1 auto; min-width:0（★v80: v79 の「150px の基準」はやめた）。ボタンは文字ぶんの幅（padding 0 14px・折り返さない）。
 *   ・ふだんは1行（390px も1行）。★v80: 480px 以下は、入力とボタンの p の左右の余白（3px）を 0・入力の左右の内側の余白を 10px にして、
 *     390px でも「クーポンコード」が欠けずに1行に入るようにした（本番の写しで測って 390px＝入力の文字の幅 120px／必要 112px）。
 *   ・どうしても入らない幅（381px 以下＝「クーポンコード」が欠ける幅）だけ折り返す＝入力が1段目いっぱい・ボタンが下の段・右寄せ。
 *   ・481px 以上（PC の 1280px も）は v79 と同じ見た目。
 *   ★開け閉め（display:none ⇔ flex）は JS のインラインのまま。ここでは display に触らない。
 * ══════════════════════════════════════════════════════════════════════════ */
html body.woocommerce-checkout #order_review .cc-coupon-wrap {
	flex-wrap: nowrap;
	gap: 8px;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-first {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}
html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-first input#coupon_code {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-last {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
}
html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row-last button {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	white-space: nowrap !important;
	padding: 0 14px !important;
}
@media (max-width: 480px) {
	html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-first,
	html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-last { padding-left: 0 !important; padding-right: 0 !important; }
	html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-first input#coupon_code { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 381px) {
	html body.woocommerce-checkout #order_review .cc-coupon-wrap { flex-wrap: wrap; }
	html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row.form-row-first { flex-basis: 100% !important; }
	html body.woocommerce-checkout #order_review .cc-coupon-wrap > p.form-row-last button { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
 * §40（v81・20261003・司令塔パッチ）カゴの合計欄: 🎟 クーポンの行（tr.cart-discount）を、ほかの割引の行と同じ並びに
 *   今まで: §26-⑥／§30-H・I／§24 の「割引の行」の指定は tr.fee・tr.cc-qd-row などを【名指し】していて、
 *           tr.cart-discount だけ入っていなかった（お会計側の §30-J には入っている）。そのため 🎟 の行だけ
 *           金額と［削除］が左に寄り、上下のすき間も広かった。
 *   直し : ① 上下のすき間を 🎀（tr.fee）と同じ 2px に
 *          ② 割引の行（🎀・🎁・その内訳・🎟）のすぐ下に続くときは、上の線を消す
 *          ③ 金額は 🎀 と同じ こいピンク・太字。［削除］は小さく・うすい色
 *          ④ 820px 以下: 金額をほかの行と同じ右はしの列に。［削除］は金額の左（order:-1）
 *             ★820px＝このファイルで合計欄の行が「ラベル｜金額（右はし）」の並びになる幅（実測: 〜820px が flex・821px〜 が表）。
 *               768px で切ると 769〜820px だけ「金額 →［削除］」の順に戻ってしまうので、同じ 820px にそろえた。
 *   ★カゴだけ（body.woocommerce-cart .cart_totals）。お会計（#order_review）・金額・並び順・リンク先には触らない。
 *   ★［削除］のリンク（a.woocommerce-remove-coupon）は Woo 標準のまま＝押したときの動きは今までどおり。
 * ═══════════════════════════════════════════════════════════════ */
html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount,
html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > th,
html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}
html body.woocommerce-cart .cart_totals table.shop_table tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cart-discount) + tr.cart-discount,
html body.woocommerce-cart .cart_totals table.shop_table tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cart-discount) + tr.cart-discount > th,
html body.woocommerce-cart .cart_totals table.shop_table tr:is(.fee, .cc-qd-row, .cc-qd-note, .cc-sc-note, .cart-discount) + tr.cart-discount > td {
	border-top: 0 !important;
}
html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td,
html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td .amount {
	color: #B8446A !important;
	font-weight: 700 !important;
}
html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td .woocommerce-remove-coupon {
	font-size: 12px;
	font-weight: 400;
	color: #9c8891;
}
@media (max-width: 820px) {
	html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td {
		display: flex !important;
		justify-content: flex-end;
		align-items: baseline;
		text-align: right !important;
	}
	html body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td .woocommerce-remove-coupon {
		order: -1;
		margin-right: 10px;
	}
}