/**
 * g-page-v2 カート／お支払い（WooCommerce ブロック）用 CSS
 *
 * カートとお支払いは My Shop テンプレートではなく通常の固定ページで、
 * ブロック版の WooCommerce がそのまま描画している。そのため次の3つが起きていた。
 *  - 記事幅（--max-width-article: 760px）に押し込まれ、右の「注文概要」が255pxしかなく
 *    商品名が3〜4文字ごとに折り返していた
 *  - ダークテーマの文字色（--color-text）が白い入力欄の中のラベルにも効き、
 *    「メールアドレス」などの欄名と、数量バッジの数字が背景と同じ色で見えなかった
 *  - 「注文を確定」が暗いグレーで、背景に沈んでいた
 */

/* ----------------------------------------------------------
 * 幅：サイト共通の最大幅まで広げる
 * ---------------------------------------------------------- */
body.woocommerce-checkout .container-article,
body.woocommerce-cart .container-article {
    max-width: var(--max-width, 1100px);
}

/* ----------------------------------------------------------
 * 白い入力欄の中の文字
 * WooCommerce 側の `.wc-block-components-form .wc-block-components-text-input label`
 * （color: inherit）に負けるので、body から書いて詳細度を上げている
 * ---------------------------------------------------------- */
body .wc-block-components-form .wc-block-components-text-input label,
body .wc-block-components-text-input label,
body .wc-blocks-components-select .wc-blocks-components-select__label {
    color: #5f6670;
}

body .wc-block-components-form .wc-block-components-text-input input,
body .wc-block-components-text-input input,
body .wc-block-components-text-input textarea,
body .wc-blocks-components-select .wc-blocks-components-select__select {
    color: #1f2328;
}

/* ----------------------------------------------------------
 * 注文概要
 * ---------------------------------------------------------- */
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background: var(--color-accent, #4dabf7);
    border-color: var(--color-bg, #0e1014);
    color: var(--color-bg, #0e1014);
    font-weight: 700;
}

.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata {
    color: var(--color-text-muted, rgba(230, 230, 230, 0.65));
}

/* 請求先住所カードの「編集」が1文字ずつ縦に折れていた */
.wc-block-components-address-card__edit {
    white-space: nowrap;
}

/* ----------------------------------------------------------
 * 「注文を確定」ボタン
 * ---------------------------------------------------------- */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
    background: var(--color-accent, #4dabf7);
    border: none;
    color: var(--color-bg, #0e1014);
    font-weight: 700;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus {
    background: var(--color-accent-hover, #74c0fc);
    color: var(--color-bg, #0e1014);
}

/* ----------------------------------------------------------
 * 画面に浮いているボタン（チャット・設定・キャラクター）
 * スマホでは入力欄に重なるので、カートとお支払いでは出さない
 * ---------------------------------------------------------- */
body.woocommerce-checkout #gpv2-chat-toggle,
body.woocommerce-checkout #gpv2-setting-toggle,
body.woocommerce-checkout .gpv2-cchar,
body.woocommerce-checkout .gpv2-cchar-toggle,
body.woocommerce-cart #gpv2-chat-toggle,
body.woocommerce-cart #gpv2-setting-toggle,
body.woocommerce-cart .gpv2-cchar,
body.woocommerce-cart .gpv2-cchar-toggle {
    display: none !important;
}