/* =========================================================
   らくらくナイス — WooCommerce 集中モード + LP配色（決済・カート・商品）
   方針：レイアウトは WooCommerce 標準に任せる
     ・PC(≥1024px)      = 2カラム（右に注文概要）
     ・スマホ〜タブレット(〜1023px) = 1カラム（一番上に注文概要）
   その上に「集中モード（ヘッダー/フッター非表示）」と LP配色・カード等の装飾のみ付与。
   記述ルール：!important は使わず body スコープの詳細度で上書き。関心/要素ごとにまとめ、
   レスポンシブは各要素の直後に mobile→PC の順で近接配置する。
   ========================================================= */

/* ---------- ① 集中モード：購入フロー（決済・カート・商品・ショップ）のヘッダー/フッター非表示 ---------- */
/* このテーマは FSE ブロックヘッダー（header.wp-block-template-part）を使うため、
   .header-main ではなくテンプレートパーツ（ヘッダー/フッター）を対象にする */
body.woocommerce-checkout .wp-block-template-part,
body.woocommerce-cart .wp-block-template-part,
body.single-product .wp-block-template-part,
body.post-type-archive-product .wp-block-template-part {
  display: none;
}

/* ---------- ② 決済コンテンツの左右余白（スマホで端に張り付かないように・PCは影響軽微） ---------- */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .woocommerce-notices-wrapper {
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ---------- ③ セクション／注文概要をカード化 ---------- */
body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
  background: #fefefe;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
/* 下(main)の注文概要は内側の fill に Woo標準の枠(border 1px/角丸5px)が付き「二重ボックス」になる。
   内側の枠を除去して、上(sidebar)と同じ「1枚ボックス」に揃える */
body.woocommerce-checkout .checkout-order-summary-block-fill {
  border: 0;
  border-radius: 0;
}

/* ---------- ④ セクション見出し：ゴシック＋緑の左アクセント＋赤い必須バッジ ---------- */
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  color: #2a2a2a;
  font-family: var(--font--sans);
  font-weight: 700;
  padding-left: 0.6rem;
  border-left: 4px solid #006837;
  margin-bottom: 1rem;
}
/* 注文概要（折りたたみ式）の見出し：Woo標準の上下線と広い余白(padding:20px 0)を除去し他の見出しと揃える */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title {
  border-top: 0;
  border-bottom: 0;
  padding: 0 0 0 0.6rem;
}
/* 上下2つの注文概要で見出しサイズが違う（上14px/下16px）ので、上に合わせて統一 */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
  font-size: 14px;
}
/* 各入力セクション見出しに赤い「必須」バッジ（注文概要の見出しは除外） */
body.woocommerce-checkout .wc-block-components-checkout-step__title::after {
  content: "必須";
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.55em;
  font-size: 0.65em;
  font-weight: 700;
  line-height: 1.5;
  color: #fefefe;
  background: #d32f2f;
  border-radius: 4px;
  vertical-align: middle;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__title::after {
  content: none;
}

/* ---------- ⑤ 入力欄：角丸・フォーカス緑 ---------- */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select {
  border-radius: 8px;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus {
  outline: 2px solid #006837;
  outline-offset: 1px;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active label {
  color: #006837;
}

/* ---------- ⑥ ラジオ・チェックのアクセント緑／支払いカード ---------- */
body.woocommerce-checkout input[type="radio"],
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-cart input[type="checkbox"] {
  accent-color: #006837;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  border-radius: 8px;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(:checked) {
  border-color: #006837;
}
/* KOMOJU が各支払い選択肢のラベル内に出す説明行（例「クレジットカード 決済（KOMOJU 提供）」）を非表示。
   支払い名と重複するため。全KOMOJU決済共通の id パターン komoju_◯◯_description が対象。
   ※インライン style="display:block" 直書きのため、この1プロパティに限り !important（最終手段）を使用 */
body.woocommerce-checkout [id^="komoju_"][id$="_description"] {
  display: none !important;
}

/* ---------- ⑦ 注文概要：金額表示・折りたたみ展開 ---------- */
/* 合計金額を強調（マゼンタ） */
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: #c0007a;
  font-weight: 700;
}
/* 送料「無料」を緑で */
body.woocommerce-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  color: #006837;
}
/* 重複金額の整理：1商品・数量1・送料無料では ¥5,300 が同額で並ぶため、重複を非表示にする。
   単価（__individual-prices）／小計（subtotal-block）／「注文概要」見出し右の金額（__title-price）を隠し、
   商品行の明細金額と「合計」は残す。※将来コーポECで複数個購入する場合は数量2以上で出し分けるよう見直す */
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
  display: none;
}
/* スマホの注文概要を最初から展開（CSSで閉じられている content を常時表示・矢印を隠す） */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__content {
  display: block;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
  display: none;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  cursor: default;
}

/* ---------- ⑧ 主要ボタン（緑ピル・文言差し替え・幅・中央寄せ） ---------- */
/* 緑ピル（決済・カート・商品の各種ボタン共通） */
body.woocommerce-page .wc-block-components-checkout-place-order-button,
body.woocommerce-page .wc-block-cart__submit-button,
body.woocommerce-page .single_add_to_cart_button,
body.woocommerce-page .add_to_cart_button,
body.woocommerce-page .wp-block-add-to-cart-form button {
  background-color: #006837;
  border-color: #006837;
  color: #fefefe;
  border-radius: 999px;
  font-weight: 700;
}
body.woocommerce-page .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-page .wc-block-cart__submit-button:hover,
body.woocommerce-page .single_add_to_cart_button:hover,
body.woocommerce-page .add_to_cart_button:hover {
  filter: brightness(1.08);
}
/* 決済ボタン：余白・文字サイズ */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.15rem;
}
/* 決済ボタンの表示テキストを「注文を確定」→「この内容で購入する」に差し替え */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__text {
  font-size: 0;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__text::after {
  content: "この内容で購入する";
  font-size: 1.15rem;
}
/* 決済ボタンの幅・中央寄せ（スマホ80% → PC60%：mobile-first で PC を min-width 上書き） */
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button--full-width {
  width: 80%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.woocommerce-checkout .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button--full-width {
    width: 60%;
  }
}

/* ---------- ⑨ リンク（アクセント緑・同意文の下線） ---------- */
body.woocommerce-page .wc-block-components-checkout-step a,
body.woocommerce-page .wc-block-components-totals-coupon a {
  color: #006837;
}
body.woocommerce-checkout .wc-block-checkout__terms a,
body.woocommerce-checkout .wp-block-woocommerce-checkout-terms-block a {
  text-decoration: underline;
}

/* ---------- ⑩ レイアウト：中間幅（〜1023px）は1カラム ---------- */
/* WooCommerce の2カラム化は container 約700px から始まり、700〜1000px では右カラム(注文概要)が
   238px 程度と狭すぎて商品名が1文字ずつ縦積みになる。そこで 1024px 未満は1カラムに寄せて全幅表示、
   広いPC（≥1024px）のみ WooCommerce 標準の2カラムに任せる。
   ※WooCommerce の2カラムは独自のコンテナクエリ(約700px)で発動するため、その上限を抑える用途で
     やむを得ず max-width を使用（mobile-first の例外。純mobile-firstにするとWooの2カラムを自前再現
     する必要があり、かえって崩れやすくなるため）。スマホは元々1カラムのため影響なし。 */
@media (max-width: 1023px) {
  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    float: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
/* 700〜1023px（WooCommerce が本来2カラムにする幅）では、注文概要を最上部に出す。
   これで main 内の購入ボタンが最下部＝注文概要の下に来る（スマホと同じ「概要→入力→購入」の並び）。 */
@media (min-width: 700px) and (max-width: 1023px) {
  body.woocommerce-checkout .wc-block-checkout {
    display: flex;
    flex-direction: column;
  }
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    order: -1;
  }
}

/* ---------- ⑪ 注文完了ページ（order-received）：世界観・余白 ---------- */
/* コンテナ：中身を 720px 中央寄せ・左右と上下に余白（スマホの端張り付き解消） */
body.woocommerce-order-received main.wp-block-group {
  padding: 2.5rem 1.25rem 4rem;
}
@media (min-width: 768px) {
  body.woocommerce-order-received main.wp-block-group {
    padding-top: 3.5rem;
    padding-bottom: 6rem;
  }
}
body.woocommerce-order-received main.wp-block-group > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* 見出し「注文を完了しました」：中央寄せ・サイズ調整（スマホで巨大になりすぎるのを抑える） */
body.woocommerce-order-received main h1 {
  font-size: 1.6rem;
  text-align: center;
  color: #2a2a2a;
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
  body.woocommerce-order-received main h1 {
    font-size: 1.9rem;
  }
}

/* 受付ステータス：緑の丸チェック＋中央寄せ */
body.woocommerce-order-received .wc-block-order-confirmation-status {
  text-align: center;
}
body.woocommerce-order-received .wc-block-order-confirmation-status::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0.5rem auto 1rem;
  border-radius: 50%;
  background: #006837;
  color: #fefefe;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
body.woocommerce-order-received .wc-block-order-confirmation-status p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2a2a2a;
}
body.woocommerce-order-received .wc-block-order-confirmation-status-description {
  text-align: center;
  font-size: 0.95rem;
  color: #737373;
  margin-top: 0.6rem;
}
body.woocommerce-order-received .wc-block-order-confirmation-status-description a {
  color: #006837;
}

/* 確認メールが届かない場合の案内（PHP側 varlit_append_order_mail_note が出力） */
body.woocommerce-order-received .order-mail-note {
  background: #f3f8f4;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.8;
  color: #737373;
}
body.woocommerce-order-received .order-mail-note__title {
  font-weight: 700;
  color: #2a2a2a;
  margin: 0 0 0.4rem;
}
body.woocommerce-order-received .order-mail-note__title::before {
  content: "✉ ";
  color: #006837;
}
body.woocommerce-order-received .order-mail-note__text {
  margin: 0;
}
body.woocommerce-order-received .order-mail-note__text + .order-mail-note__text {
  margin-top: 0.4rem;
}

/* サマリー（注文番号・日付・合計・メール・支払い）：白カード化 */
body.woocommerce-order-received .wc-block-order-confirmation-summary {
  background: #fefefe;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 2rem;
}
body.woocommerce-order-received .wc-block-order-confirmation-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* セクション見出し（注文詳細・お届け先住所・請求先住所・追加情報）：決済ページと同じ緑バー */
body.woocommerce-order-received main h2 {
  font-family: var(--font--sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: #2a2a2a;
  padding-left: 0.6rem;
  border-left: 4px solid #006837;
  margin: 2.5rem 0 1rem;
}

/* テーブル（注文詳細・追加情報・ダウンロード）：白カード化・余白 */
body.woocommerce-order-received main table {
  width: 100%;
  background: #fefefe;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
body.woocommerce-order-received main table th,
body.woocommerce-order-received main table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #e3e8e4;
  text-align: left;
}
body.woocommerce-order-received main table th:last-child,
body.woocommerce-order-received main table td:last-child {
  text-align: right;
}
body.woocommerce-order-received main table tr:last-child th,
body.woocommerce-order-received main table tr:last-child td {
  border-bottom: 0;
}
/* 合計行を強調（合計はマゼンタ＝決済ページと統一）。
   tr:last-child だと tbody 最終行（商品行）にも当たるため tfoot に限定する */
body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
  color: #c0007a;
  font-weight: 700;
}

/* 住所カード（お届け先・請求先）：WooCommerce 既定の枠は外側の
   .wc-block-order-confirmation-billing-address / -shipping-address に付いている。
   内側 address に枠を足すと二重枠になるため、既定の枠側をカード化する */
body.woocommerce-order-received .wc-block-order-confirmation-billing-address,
body.woocommerce-order-received .wc-block-order-confirmation-shipping-address {
  background: #fefefe;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  padding: 1.25rem;
}
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper address {
  font-style: normal;
}

/* 追加情報（初回購入確認）：実体は dl.wc-block-components-additional-fields-list（dt=ラベル / dd=値）。
   WooCommerce 既定は dl 自体に枠・dt/dd に個別 padding（グリッド横並び）を持つため、
   dl をカードに統一し、dt/dd の既定 padding はゼロにして縦積みへ。値「はい」は緑の✓付きで強調 */
body.woocommerce-order-received .wc-block-components-additional-fields-list {
  display: block;
  margin: 0;
  background: #fefefe;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  padding: 1.25rem;
}
body.woocommerce-order-received .wc-block-components-additional-fields-list dt,
body.woocommerce-order-received .wc-block-components-additional-fields-list dd {
  display: block;
  padding: 0;
  border-bottom: 0;
  float: none;
  width: auto;
  text-align: left;
}
body.woocommerce-order-received .wc-block-components-additional-fields-list dt {
  font-weight: 700;
  color: #2a2a2a;
  margin: 0 0 0.4rem;
}
body.woocommerce-order-received .wc-block-components-additional-fields-list dd {
  margin: 0;
  color: #006837;
  font-weight: 700;
}
body.woocommerce-order-received .wc-block-components-additional-fields-list dd::before {
  content: "✓ ";
}
/* 項目が複数になった場合の区切り */
body.woocommerce-order-received .wc-block-components-additional-fields-list dd + dt {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e3e8e4;
}

/* 注文完了ページでは印刷ボタン群（請求書・領収書・納品書等）を表示しない（お客様には不要のため）。
   ※管理画面の印刷機能・将来のマイアカウント注文詳細には影響しない */
body.woocommerce-order-received .order-print {
  display: none;
}

/* 代金引換の説明ボックス（PHP側 varlit_render_cod_thankyou_note が出力）。
   メール案内（.order-mail-note）と同トーンの淡緑ボックス。1行目【…】は見出しとして強調 */
body.woocommerce-order-received .cod-note {
  background: #f3f8f4;
  border: 1px solid #e3e8e4;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.9;
  color: #474747;
}
body.woocommerce-order-received .cod-note p {
  margin: 0;
}
body.woocommerce-order-received .cod-note p + p {
  margin-top: 0.5rem;
}
body.woocommerce-order-received .cod-note p:first-child {
  font-weight: 700;
  color: #2a2a2a;
}

/* 「請求書を印刷」ボタン（Print Invoice & Delivery Note プラグイン出力: p.order-print > a.button.print）
   将来のマイアカウント注文詳細用：緑アウトラインのピルボタン */
body.woocommerce-page .order-print {
  text-align: center;
  margin: 2.5rem 0 0;
}
body.woocommerce-page .order-print .button.print {
  display: inline-block;
  padding: 0.85rem 2.4rem;
  background: #fefefe;
  border: 1px solid #006837;
  border-radius: 999px;
  color: #006837;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.woocommerce-page .order-print .button.print:hover {
  background: #006837;
  color: #fefefe;
}
/* 納品書など複数テンプレートを有効化した場合のボタン間隔 */
body.woocommerce-page .order-print .button.print + .button.print {
  margin-left: 0.75rem;
}