/* ==========================================================================
   WooCommerce ページを他ページ（講義一覧）の雰囲気に合わせる
   親テーマ bly は WC 非対応のため、子テーマで WC 出力を当社デザイントークンで整形。
   デザイントークン（--bal-*）は style.css :root を参照（bal-child-style に依存）。
   ========================================================================== */

/* ---- コンテナ ---- */
.bal-shop {
    background: var(--bal-color-bg);
}
.bal-shop__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--bal-space-2xl) var(--bal-space-md);
}

/* ---- ページ見出し ---- */
.bal-shop .woocommerce-products-header { margin-bottom: var(--bal-space-xl); }
.bal-shop .woocommerce-products-header__title,
.bal-shop h1.entry-title,
.bal-shop .page-title {
    font-family: var(--bal-font-heading);
    font-size: var(--bal-font-size-2xl);
    color: var(--bal-color-primary);
    line-height: 1.4;
    margin-bottom: var(--bal-space-md);
}
.bal-shop .woocommerce-result-count {
    color: var(--bal-color-text-light);
    font-size: var(--bal-font-size-sm);
}
.bal-shop .woocommerce-ordering select { font-family: var(--bal-font-family); }

/* ---- パンくず（teacher ページと同じ挙動に） ----
   bly はコンテンツ各ページ専用CSS(teacher.css 等)で header を position:relative に戻して
   いるが、WCページはそれらを読まないため header が fixed のままで、ヘッダー直後の
   .breadcrumb が固定ヘッダーに食い込む。WCページでも header を relative に戻して
   teacher ページと同じ「ヘッダー直下のパンくずバー」にする。
   （.breadcrumb 自体のバー体裁は bly common.css をそのまま使用） */
body.woocommerce header,
body.woocommerce-page header { position: relative !important; }

/* ---- WC ページの上余白二重積み解消 ----
   header-bar.css の `body:not(.home) main { margin-top: 240px }` は
   固定ヘッダー(position:fixed)を持つ非ホームページで main がヘッダーに隠れないよう
   加算するためのルール。
   しかし WC ページでは直上の `position:relative !important` でヘッダーが
   フロー内に入り自身の高さを占有するため、margin-top 240px が余分に積まれ
   パンくず直下に巨大な空白(~300px)が生じる。
   WC ページでは margin-top をバー高さ分(--bal-bar-h)のみに上書きして解消する。
   --bal-bar-h は header-bar.css :root で 40px と定義済み。
   ユーティリティバーが fixed:top:0 で占有する 40px 分のみ余白として確保する。 */
body.woocommerce main,
body.woocommerce-page main {
    margin-top: var(--bal-bar-h, 40px) !important;
}

/* ---- Tutor ダッシュボード(page-id-710)の上余白二重積み解消 ----
   ダッシュボードは .woocommerce / .woocommerce-page クラスを持たないため
   上記 WC ページ向けの上書きが効かない。
   しかし header-bar.css の `body:not(.home) header { position:relative }` により
   ヘッダーがフロー内に入るため、`body:not(.home) main { margin-top: 240px }` が
   二重積みになる構造は WC ページと同一。
   body.page-id-710 にスコープして WC ページと同じ値に揃える。
   メインサイト内部ページ(service/flow/teacher 等)には影響しない。 */
body.page-id-710 main {
    margin-top: var(--bal-bar-h, 40px) !important;
}

/* WC標準パンくず(woocommerce_breadcrumb が出る場合)の体裁 */
.bal-shop .woocommerce-breadcrumb {
    color: var(--bal-color-text-light);
    font-size: var(--bal-font-size-sm);
    margin-bottom: var(--bal-space-lg);
}
.bal-shop .woocommerce-breadcrumb a { color: var(--bal-color-primary); text-decoration: none; }

/* ---- 商品グリッド（講義カードと同じ） ---- */
.bal-shop ul.products,
.woocommerce.bal-shop ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bal-space-lg);
    margin: 0 !important;
    padding: 0;
    list-style: none;
}
/* WC のclearfix擬似要素がグリッドに混ざるのを抑止 */
.bal-shop ul.products::before,
.bal-shop ul.products::after { content: none !important; display: none !important; }

/* ---- 商品カード ---- */
.bal-shop ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
    background: var(--bal-color-bg);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-lg);
    overflow: hidden;
    box-shadow: var(--bal-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}
.bal-shop ul.products li.product:hover {
    box-shadow: var(--bal-shadow-md);
    transform: translateY(-2px);
}
.bal-shop ul.products li.product a img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    background: var(--bal-color-bg-light);
}
.bal-shop ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--bal-font-heading);
    font-size: var(--bal-font-size-lg);
    font-weight: 700;
    color: var(--bal-color-text);
    line-height: 1.4;
    padding: var(--bal-space-lg) var(--bal-space-lg) var(--bal-space-sm);
}
.bal-shop ul.products li.product .price {
    color: var(--bal-color-primary) !important;
    font-size: var(--bal-font-size-xl);
    font-weight: 700;
    padding: 0 var(--bal-space-lg);
    margin: 0 0 var(--bal-space-md);
}
.bal-shop ul.products li.product .price del {
    color: var(--bal-color-text-light);
    font-size: var(--bal-font-size-base);
    font-weight: 400;
}
.bal-shop ul.products li.product .price ins { text-decoration: none; }
.bal-shop ul.products li.product .star-rating { margin: 0 var(--bal-space-lg) var(--bal-space-sm); }

/* ---- ボタン（CTA = .bal-btn--primary 相当） ---- */
.bal-shop a.button,
.bal-shop button.button,
.bal-shop .button.add_to_cart_button,
.bal-shop #respond input#submit,
.bal-shop .woocommerce-button {
    background: var(--bal-color-primary);
    color: #fff;
    border: none;
    border-radius: var(--bal-radius-md);
    font-family: var(--bal-font-family);
    font-weight: 600;
    padding: 12px 20px;
    transition: background .2s ease;
}
.bal-shop a.button:hover,
.bal-shop button.button:hover,
.bal-shop .button.add_to_cart_button:hover,
.bal-shop #respond input#submit:hover { background: var(--bal-color-primary-dark); color: #fff; }
/* カード内ボタンは下端に揃える */
.bal-shop ul.products li.product .button {
    margin: auto var(--bal-space-lg) var(--bal-space-lg);
    text-align: center;
}

/* ---- セールフラッシュ ---- */
.bal-shop span.onsale {
    background: var(--bal-color-accent);
    color: var(--bal-color-primary);
    font-weight: 700;
    border-radius: var(--bal-radius-sm);
}

/* ---- 単品商品ページ レイアウト整頓（画像左 / 概要右の2カラム） ---- */
.single-product .bal-shop div.product {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bal-space-2xl);
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;                  /* bly の body 中央寄せを解除 */
}
/* 画像ギャラリー（左）。WCはJS初期化までopacity:0なので確実に表示させる */
.single-product .bal-shop div.product .woocommerce-product-gallery {
    flex: 1 1 380px;
    max-width: 460px;
    margin: 0;
    float: none;
    opacity: 1 !important;
}
.single-product .bal-shop div.product .woocommerce-product-gallery img {
    border-radius: var(--bal-radius-lg);
}
/* 概要（右） */
.single-product .bal-shop div.product .summary {
    flex: 1 1 340px;
    margin: 0;
    float: none;
    text-align: left;
}
.single-product .bal-shop div.product .product_title {
    font-family: var(--bal-font-heading);
    color: var(--bal-color-primary);
    font-size: var(--bal-font-size-2xl);
    line-height: 1.4;
    text-align: left;
    margin: 0 0 var(--bal-space-md);
}
.single-product .bal-shop div.product p.price,
.single-product .bal-shop div.product span.price {
    color: var(--bal-color-primary);
    font-weight: 700;
    font-size: var(--bal-font-size-2xl);
    margin: 0 0 var(--bal-space-lg);
}
/* 数量 + カート投入ボタンを横並びに整頓 */
.single-product .bal-shop form.cart {
    display: flex;
    align-items: center;
    gap: var(--bal-space-sm);
    margin: 0 0 var(--bal-space-lg);
}
.single-product .bal-shop form.cart .quantity { margin: 0; float: none; }
.single-product .bal-shop form.cart .quantity .qty {
    width: 72px;
    padding: 12px 8px;
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-md);
    text-align: center;
}
.single-product .bal-shop form.cart .single_add_to_cart_button { margin: 0; }
/* 商品メタ（カテゴリー等） */
.single-product .bal-shop .product_meta {
    text-align: left;
    color: var(--bal-color-text-light);
    font-size: var(--bal-font-size-sm);
    margin-top: var(--bal-space-md);
}
.single-product .bal-shop .product_meta a { color: var(--bal-color-primary); }

/* .alt（単品購入）ボタンも当社ネイビーに（WC既定の紫を上書き） */
.bal-shop .button.alt,
.bal-shop button.single_add_to_cart_button {
    background: var(--bal-color-primary) !important;
    color: #fff !important;
}
.bal-shop .button.alt:hover,
.bal-shop button.single_add_to_cart_button:hover {
    background: var(--bal-color-primary-dark) !important;
}

/* レスポンシブ: 単品は縦積み */
@media (max-width: 768px) {
    .single-product .bal-shop div.product .woocommerce-product-gallery,
    .single-product .bal-shop div.product .summary { flex: 1 1 100%; max-width: 100%; }
}

/* ---- 通知・メッセージ ---- */
.bal-shop .woocommerce-message,
.bal-shop .woocommerce-info,
.bal-shop .woocommerce-error {
    border-top-color: var(--bal-color-primary);
    font-family: var(--bal-font-family);
}
.bal-shop .woocommerce-message::before,
.bal-shop .woocommerce-info::before { color: var(--bal-color-primary); }

/* ---- 見出し（カート/購入手続き/アカウント） ---- */
.bal-shop h1, .bal-shop h2, .bal-shop h3 {
    font-family: var(--bal-font-heading);
    color: var(--bal-color-primary);
}
.bal-shop table.shop_table th { font-family: var(--bal-font-family); }

/* ---- ユーティリティページ（カート/購入手続き/マイアカウント）共通 ---- */
.bal-shop .bal-page-title {
    font-family: var(--bal-font-heading);
    color: var(--bal-color-primary);
    font-size: var(--bal-font-size-2xl);
    text-align: center;
    margin: 0 0 var(--bal-space-xl);
}
/* WC ブロック（カート/購入手続き）の主要ボタンを当社ネイビーに */
.bal-shop .wc-block-components-button:not(.is-link),
.bal-shop .wp-block-button__link,
.bal-shop .wc-block-cart__submit-button {
    background: var(--bal-color-primary) !important;
    color: #fff !important;
    border-radius: var(--bal-radius-md);
}
.bal-shop .wc-block-components-button:not(.is-link):hover,
.bal-shop .wc-block-cart__submit-button:hover {
    background: var(--bal-color-primary-dark) !important;
}
/* ブロックの見出し（合計・クーポン等）の体裁 */
.bal-shop .wc-block-components-totals-wrapper,
.bal-shop .wc-block-cart__totals-title {
    font-family: var(--bal-font-family);
}

/* ---- 親テーマ bly のグローバル h2/h3 装飾を WC 内で打ち消す ----
   bly は全 h2 に巨大な装飾擬似要素 h2::before{content:"Flow";font-size:180px;color:#f5f8fa}
   と font-size:40px / text-align:center / margin-bottom:120px を当てている。
   商品タイトル(h2)に "Flow" 透かしが重なり崩れるため無効化する。 */
.bal-shop h2::before,
.bal-shop h3::before,
.bal-shop .woocommerce-loop-product__title::before {
    content: none !important;
    display: none !important;
}
.bal-shop h2,
.bal-shop h3 {
    font-size: var(--bal-font-size-xl);
    margin: 0 0 var(--bal-space-md);
    position: static;
    z-index: auto;
}
.bal-shop ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--bal-font-size-lg);
    margin: 0;
}

/* ==========================================================================
   マイアカウント（リッチ化: カード型サイドバー + コンテンツカード）
   ========================================================================== */
/* ログイン済み: 2カラム（サイドナビ + コンテンツ） */
body.woocommerce-account.logged-in .bal-shop .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bal-space-xl);
    align-items: flex-start;
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}
.bal-shop .woocommerce-MyAccount-navigation { flex: 0 0 240px; width: auto; float: none; margin: 0; }
.bal-shop .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: var(--bal-space-sm);
    background: var(--bal-color-bg);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-lg);
    box-shadow: var(--bal-shadow-sm);
}
.bal-shop .woocommerce-MyAccount-navigation li { margin: 0; border: 0; list-style: none; }
.bal-shop .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--bal-radius-md);
    color: var(--bal-color-text);
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.bal-shop .woocommerce-MyAccount-navigation li a:hover { background: var(--bal-color-bg-light); color: var(--bal-color-primary); }
.bal-shop .woocommerce-MyAccount-navigation li.is-active a { background: var(--bal-color-primary); color: #fff; }
.bal-shop .woocommerce-MyAccount-content {
    flex: 1 1 360px;
    width: auto;
    float: none;
    margin: 0;
    background: var(--bal-color-bg);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-lg);
    box-shadow: var(--bal-shadow-sm);
    padding: var(--bal-space-xl);
    line-height: 1.9;
    color: var(--bal-color-text);
}
.bal-shop .woocommerce-MyAccount-content a { color: var(--bal-color-primary); text-decoration: none; }
.bal-shop .woocommerce-MyAccount-content a:hover { text-decoration: underline; }
/* マイアカウント内の a.button は直上のリンク色指定に上書きされ通常時に文字が消える(ネイビー文字×ネイビー背景)。白文字を再指定して復活させる */
.bal-shop .woocommerce-MyAccount-content a.button { color: #fff; }
.bal-shop .woocommerce-MyAccount-content a.button:hover { color: #fff; text-decoration: none; }
.bal-shop .woocommerce-MyAccount-content h2,
.bal-shop .woocommerce-MyAccount-content h3 { font-family: var(--bal-font-heading); color: var(--bal-color-primary); margin-top: 0; }
.bal-shop .woocommerce-MyAccount-content table.woocommerce-orders-table,
.bal-shop .woocommerce-MyAccount-content table.shop_table { border-radius: var(--bal-radius-md); overflow: hidden; }

/* ---- ログイン / 登録フォーム（未ログイン時）をカード中央に ----
   未ログイン時のマイアカウントページは .woocommerce-account body クラスが付く。
   ログイン済みの場合は .woocommerce-MyAccount-navigation が存在するが、
   未ログイン時は存在しないため、同一 body クラスで flex 2カラムを解除し
   フォームカードを中央1カラムに揃える。
   WC は未ログイン時にフォームを .woocommerce 直下に置くため
   flex: block にするだけで自然に1カラムになる。 */
body.woocommerce-account .bal-shop .woocommerce {
    display: block;
    text-align: center;
}
/* ログイン済みは2カラムに戻す */
body.woocommerce-account.logged-in .bal-shop .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bal-space-xl);
    align-items: flex-start;
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}

/* フォームカード自体の体裁 */
.bal-shop .woocommerce form.woocommerce-form-login,
.bal-shop .woocommerce form.woocommerce-form-register {
    max-width: 440px;
    margin: 0 auto var(--bal-space-xl);
    background: var(--bal-color-bg);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-lg);
    box-shadow: var(--bal-shadow-md);
    padding: var(--bal-space-xl);
    text-align: left;
}

/* ページ見出し（「マイアカウント」等 .bal-page-title）の余白最小化 */
body.woocommerce-account .bal-shop .bal-page-title {
    margin-bottom: var(--bal-space-lg);
}

/* WC が出力する h2（「ログイン」等）をフォームカードと揃えて中央に収める */
body.woocommerce-account .bal-shop .woocommerce > h2 {
    max-width: 440px;
    margin: 0 auto var(--bal-space-md);
    text-align: left;
    font-size: var(--bal-font-size-xl);
}

.bal-shop .woocommerce form .input-text,
.bal-shop .woocommerce .woocommerce-Input { width: 100%; padding: 10px 12px; border: 1px solid var(--bal-color-border); border-radius: var(--bal-radius-md); box-sizing: border-box; }
.bal-shop .woocommerce form.woocommerce-form-login .button,
.bal-shop .woocommerce form.woocommerce-form-register .button { width: 100%; margin-top: var(--bal-space-sm); }

/* フォームカード以降〜フッターの余白を適正化 */
body.woocommerce-account .bal-shop .bal-shop__inner,
body.woocommerce-cart .bal-shop .bal-shop__inner,
body.woocommerce-checkout .bal-shop .bal-shop__inner {
    padding-bottom: var(--bal-space-2xl);
}

/* ---- マイアカウント: カードのシャドウ除去 ----
   デジタル商品専売サイトにおいて box-shadow は装飾過多。
   border と border-radius は視認性維持のため温存する。
   .woocommerce-Address-title は <header> 要素のため bly common.css の
   `header { box-shadow: ... }` が適用される。個別に打ち消す。 */
body.woocommerce-account .bal-shop .woocommerce-MyAccount-navigation ul,
body.woocommerce-account .bal-shop .woocommerce-MyAccount-content,
body.woocommerce-account .bal-shop .woocommerce-Address,
body.woocommerce-account .bal-shop .woocommerce-Address-title,
body.woocommerce-account .bal-shop .u-columns .col-1,
body.woocommerce-account .bal-shop .u-columns .col-2 {
    box-shadow: none;
}

/* ---- マイアカウント: 住所ブロックの配置を左基準に統一 ----
   .woocommerce-Address-title は <header> 要素で bly 親テーマの中央寄せを継承し、
   「タイトルだけ中央・説明文と住所本文は左」という不揃いが起きる。
   タイトル=左 / 編集リンク=右、住所本文=左・非イタリックに統一する。 */
body.woocommerce-account .bal-shop .woocommerce-Addresses,
body.woocommerce-account .bal-shop .woocommerce-Address { text-align: left; }
body.woocommerce-account .bal-shop .woocommerce-Addresses { margin-top: var(--bal-space-lg); }
body.woocommerce-account .bal-shop .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bal-space-sm) var(--bal-space-md);
    text-align: left;
    margin: 0 0 var(--bal-space-sm);
}
body.woocommerce-account .bal-shop .woocommerce-Address-title h2,
body.woocommerce-account .bal-shop .woocommerce-Address-title h3 {
    margin: 0;
    text-align: left;
    font-size: var(--bal-font-size-lg);
}
body.woocommerce-account .bal-shop .woocommerce-Address-title .edit {
    flex: 0 0 auto;
    font-size: var(--bal-font-size-sm);
    white-space: nowrap;
    color: var(--bal-color-primary);
    text-decoration: underline;
}
body.woocommerce-account .bal-shop .woocommerce-Address address {
    font-style: normal;
    line-height: 1.9;
    color: var(--bal-color-text);
    margin: 0;
}
/* 配送無効＝請求先のみの1カラム運用。WC既定の48%幅(col-1)だと住所が
   半幅で不自然に折返すため、全幅に広げて折返しを自然にする。 */
body.woocommerce-account .bal-shop .woocommerce-Addresses.col2-set .woocommerce-Address {
    width: 100%;
    float: none;
}

/* ---- 注文詳細 / 注文完了ページ: bly 親テーマの section{padding:200px} を打ち消す ----
   WooCommerce の <section.woocommerce-order-details> / <section.woocommerce-customer-details>
   が bly のランディング用 section 余白(上下200px)を継承し、見出し前後に巨大な空白が出る。
   WC専用クラスに限定して余白を適正化する(bly トップの素の section には影響しない)。 */
.bal-shop .woocommerce-order-details,
.bal-shop .woocommerce-customer-details,
.bal-shop .woocommerce-order-downloads,
.bal-shop .woocommerce-order-again {
    padding: 0;
    margin: var(--bal-space-lg) 0 0;
}
.bal-shop .woocommerce-order-details:first-child,
.bal-shop .woocommerce-customer-details:first-child { margin-top: 0; }

/* ---- アカウント詳細: パスワード変更をトグル化（既定は隠す/無効） ----
   form-edit-account.php(子テーマ上書き)と連動。トグルボタンは保存ボタンと
   差別化するため塗りつぶしでなくアウトライン(副次アクション)で見せる。 */
.bal-shop .bal-password-change { margin: var(--bal-space-md) 0 0; }
.bal-shop .button.bal-password-toggle {
    background: transparent;
    color: var(--bal-color-primary);
    border: 1px solid var(--bal-color-border);
    font-weight: 500;
}
.bal-shop .button.bal-password-toggle:hover {
    background: var(--bal-color-bg-light);
    color: var(--bal-color-primary);
}
.bal-shop .bal-password-fields { margin-top: var(--bal-space-md); }
.bal-shop .bal-password-fields[hidden] { display: none; }

/* ==========================================================================
   ブロックカート（WC 10.x / wp:woocommerce/cart）
   ========================================================================== */

/* ---- 空カートブロック: 中央配置・余白 ---- */
.wp-block-woocommerce-empty-cart-block {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--bal-space-xl) 0;
    text-align: center;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
    font-family: var(--bal-font-heading);
    color: var(--bal-color-primary);
    font-size: var(--bal-font-size-xl);
    margin-bottom: var(--bal-space-lg);
}
/* bly h2 装飾透かし打ち消し（ブロックカート内） */
.wp-block-woocommerce-empty-cart-block h2::before {
    content: none !important;
    display: none !important;
}
.wp-block-woocommerce-empty-cart-block h2 {
    font-size: var(--bal-font-size-xl);
    margin: var(--bal-space-xl) 0 var(--bal-space-md);
    color: var(--bal-color-primary);
}
/* ---- 空カートの新着商品コレクション: 講義カードと同トークン ---- */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-collection {
    text-align: left;
}
/* product-collection(template) と product-new(wc-block-grid) を共通グリッド化し、
   カード間に余白(gap)を付ける。 */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid;
    gap: var(--bal-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 新着の講義(product-new)は「4枚横並び」を維持しつつ余白を確保。
   狭い幅では 2 列 → 1 列に段階的に折り返す。 */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(4, 1fr);
}
/* product-collection(cross-sells 等)は可変グリッド */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* wc-block-grid(product-new) の既定 flex 幅/余白を解除しグリッドへ委譲 */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product {
    width: auto;
    max-width: none;
    margin: 0;
}
@media screen and (max-width: 900px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 480px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
        grid-template-columns: 1fr;
    }
}
/* 個別カード */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block li.product {
    background: var(--bal-color-bg);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-lg);
    overflow: hidden;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover,
.wp-block-woocommerce-empty-cart-block li.product:hover {
    transform: translateY(-2px);
}
/* 商品画像 */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    background: var(--bal-color-bg-light);
}
/* 商品タイトル */
.wp-block-woocommerce-empty-cart-block .wp-block-post-title,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    font-family: var(--bal-font-heading);
    font-size: var(--bal-font-size-base);
    font-weight: 700;
    color: var(--bal-color-text);
    line-height: 1.4;
    padding: var(--bal-space-md) var(--bal-space-md) var(--bal-space-sm);
    text-align: left;
    margin: 0;
}
/* 価格 */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    padding: 0 var(--bal-space-md);
    color: var(--bal-color-primary);
    font-weight: 700;
    font-size: var(--bal-font-size-lg);
    text-align: left;
    margin: 0 0 var(--bal-space-sm);
}
/* カートボタン */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-button,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
    padding: 0 var(--bal-space-md) var(--bal-space-md);
    margin-top: auto;
}
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-button a,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-button button,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a {
    display: block;
    background: var(--bal-color-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--bal-radius-md);
    font-family: var(--bal-font-family);
    font-weight: 600;
    font-size: 13px;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;        /* 4カラム化で幅が狭まっても「お買い物カゴに追加」を1行で表示 */
    transition: background .2s ease;
}
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-button a:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-button button:hover {
    background: var(--bal-color-primary-dark) !important;
}

/* ---- カートに商品がある状態: ブロックカートの整形 ---- */
.bal-shop .wp-block-woocommerce-cart {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0;
}
/* bly h2 装飾をカートブロック内でも打ち消す */
.wp-block-woocommerce-cart h2::before,
.wp-block-woocommerce-filled-cart-block h2::before {
    content: none !important;
    display: none !important;
}
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-filled-cart-block h2 {
    font-size: var(--bal-font-size-xl);
    color: var(--bal-color-primary);
    margin-bottom: var(--bal-space-md);
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .bal-shop .woocommerce-MyAccount-navigation { flex: 1 1 100%; }
    .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
@media (max-width: 600px) {
    .bal-shop ul.products { grid-template-columns: 1fr; }
    .bal-shop__inner { padding: var(--bal-space-xl) var(--bal-space-md); }
    .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template {
        grid-template-columns: 1fr;
    }
}