/**
 * ec-product-weightbelt.css
 * Weight Belt EC商品ページ(WooCommerce単一商品:親ID152・子ID153〜164)専用CSS。
 *
 * ★2026-09-26(ROC-11指示/EC-50・EC-34対応)新規追加。AquaCap EC専用の
 *   css/ec-product.cssとは別ファイルの完全に独立した実装(AquaCapのCSSは無変更)。
 *   PC/Mobileの基本レイアウト(商品画像56%/購入欄44%グリッド、モバイルでの縦積み)は
 *   AquaCap EC側で確定済みの設計方針(EC-34)をそのまま踏襲している。
 * ★スコープを body.single-product 配下に限定する。Storyページ(body.single-ecc_story)の
 *   白黒/グレースケール処理・CSS変数とは一切共有しない。
 * ★このファイルはWeight Belt対象商品ページが読み込まれた時のみenqueueされる
 *   (wp_enqueue_scripts側で投稿ID判定済み)。
 * ★視覚的に隠すだけの<select>は、AquaCap側で判明した「ネイティブselectの既定border/
 *   padding・ブラウザの最小表示幅によりwidth:1pxだけでは縮小しきれず横はみ出しの原因になる」
 *   不具合(EC-34)を踏まえ、最初からWordPress本体の.screen-reader-text相当の
 *   堅牢なパターン(border/padding/marginの明示指定+appearanceリセット+!important)で実装する。
 *
 * 2026-09-26(ROC-22指示)で追加:
 *   ★指示1:現在選択中の色の英語名+カタカナ名を表示する独立欄(.tornos-wb-current-color)。
 *     横スクロールする.tornos-wb-swatchesの外側(直前)に固定表示する。
 *
 * 2026-09-26(ROC-26指示/EC-62対応)で追加修正:
 *   ★WooCommerce本体のwoocommerce-layout.css(`.woocommerce ... div.product div.images`
 *     `.woocommerce ... div.product div.summary`)が、当テーマの`display:grid`
 *     レイアウトと無関係に`width:48%`(+float)を直接指定しており、これがグリッド
 *     トラック(56%/44%)にさらに掛け算される形で残ってしまい、PC幅1363pxで画像欄
 *     約296px・説明欄約232pxまで縮小する不具合が実環境QA(EC-62)で判明した
 *     (48%×56%≒26.9%、48%×44%≒21.1%という二重適用)。
 *   ★対策:`.images`(WooCommerce側が実際にマッチさせている祖先クラス)・
 *     `.woocommerce-product-gallery`・`.summary`のwidth/float/box-sizingを
 *     このスタイルシート側で!important付きで明示的に上書きし、グリッドトラックの
 *     56%/44%がそのまま画像欄・説明欄の実幅になるようにする。このCSSはWeight Belt
 *     対象商品ページでのみenqueueされるため、AquaCap・他商品のレイアウトには
 *     一切影響しない。PC/Mobileどちらの幅でもWooCommerce側のfloat/width指定を
 *     無効化しておくことで、ビューポート依存の再発を防ぐ。
 *
 * 2026-09-26(ROC-20指示)で以下を追加改修:
 *   ★指示2:カラー選択は色見本(色丸)ではなく実商品写真を使用する。PCは4列×3段、
 *     Mobileは横1列(横スクロール)のグリッドに変更。左右ナビは商品メイン画像の上に
 *     重ねて配置する。スウォッチ・ナビとも操作領域を44px以上に拡大する。
 *   ★指示3:非表示<select>にmin-width:0 !importantを追加する(グリッド/フレックス
 *     コンテナ内でネイティブselectの既定min-width:autoにより横はみ出しの原因に
 *     なりうるため)。
 *   ★指示2:価格未確定時、数量欄・カートは非表示(display:none)にせず、
 *     視覚的に「操作不可」と分かる状態(薄いグレーアウト+cursor:not-allowed)で
 *     表示し続ける(JS側でもdisabled属性を強制する。テキストは「暫定表記」等の
 *     制作用注記を含まない)。
 */

body.single-product {
    background: #ffffff;
}

body.single-product .woocommerce-product-gallery img {
    filter: none !important;
}

body.single-product div.product {
    display: grid;
    grid-template-columns: 56% 44%;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* ★ROC-26指示/EC-62対応:WooCommerce本体のwoocommerce-layout.cssが
 * `.images`(実際にマッチしている祖先クラス)・`.woocommerce-product-gallery`に
 * 直接指定してくる`width:48%`(+float)を無効化し、グリッドトラック(56%)が
 * そのまま画像欄の実幅になるようにする。`!important`が必要なのは、競合元の
 * ルールに`!important`は付いていないものの、`#content`を含むIDセレクタで
 * 詳細度が高く、通常の詳細度勝負では安定して上書きできないため。
 */
body.single-product div.product > .images,
body.single-product div.product > .woocommerce-product-gallery {
    grid-column: 1 / 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* ★ROC-26指示/EC-62対応:説明欄(.summary)側も同様にwidth:48%を無効化する。
 * 左側に確保している48pxのpaddingがトラック幅からはみ出さないよう、
 * box-sizing:border-boxを明示する。
 */
body.single-product div.product > .summary {
    grid-column: 2 / 3;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 0 0 0 48px;
}

@media (max-width: 900px) {
    body.single-product div.product {
        display: block;
        max-width: 100%;
    }
    body.single-product div.product > .summary {
        padding: 24px 20px 0;
    }
}

/* ==== 本体標準機能・別売アクセサリー(保存済みのWeight Belt Storyデータをそのまま表示) ==== */
body.single-product .tornos-wb-details {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e2e5e7;
}

body.single-product .tornos-wb-details__group {
    margin-bottom: 20px;
}

body.single-product .tornos-wb-details__heading {
    font-size: .82rem;
    letter-spacing: .08em;
    color: #555;
    margin: 0 0 10px;
}

body.single-product .tornos-wb-details__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.single-product .tornos-wb-details__list li {
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 8px;
}

body.single-product .tornos-wb-details__list li strong {
    margin-right: .5em;
}

body.single-product .tornos-wb-badge {
    display: inline-block;
    font-size: .68rem;
    letter-spacing: .05em;
    color: #a15b00;
    background: #fff2df;
    border-radius: 3px;
    padding: 1px 6px;
    margin-right: .5em;
    vertical-align: middle;
}

body.single-product .tornos-wb-details__note {
    font-size: .76rem;
    color: #778188;
    margin: 8px 0 0;
}

/* ==== 価格未確定(Weight Beltは恒久的に価格空欄)時の数量欄・カート ====
 * ★ROC-20指示2:非表示(display:none)にはせず、要素自体は表示したまま
 *   「操作不可」であることが見た目でも分かる状態にする。実際のdisabled属性の
 *   付与・維持はjs/ec-product-weightbelt-swatches.js側(forceDisabledPurchaseUI)で
 *   初期表示・色変更・リセット後のいずれのタイミングでも行う。
 */
body.single-product .variations_form.tornos-wb-variation-unpriced .quantity,
body.single-product .variations_form.tornos-wb-variation-unpriced .single_add_to_cart_button,
body.single-product .variations_form.tornos-wb-variation-unpriced .woocommerce-variation-add-to-cart {
    opacity: .5;
    filter: grayscale(100%);
}

body.single-product .variations_form.tornos-wb-variation-unpriced .quantity .qty,
body.single-product .variations_form.tornos-wb-variation-unpriced .single_add_to_cart_button {
    cursor: not-allowed !important;
    pointer-events: none;
}

body.single-product .tornos-wb-availability-note {
    font-size: .82rem;
    font-weight: 700;
    color: #888;
    letter-spacing: .05em;
    margin: 0 0 1.2rem;
    padding: .5rem .8rem;
    background: #f5f5f5;
    border-radius: 4px;
    display: inline-block;
}

/* ==== カラースウォッチUI(ec-product-weightbelt-swatches.jsが生成するUI) ====
 * ★EC-34で判明した不具合(ネイティブselectがwidth:1pxだけでは縮小しきれず横はみ出しの
 *   原因になる)を踏まえ、最初から.screen-reader-text相当の堅牢な非表示パターンで実装する。
 * ★ROC-20指示3:グリッド/フレックスコンテナ内ではネイティブselectの既定min-width:auto
 *   により、width:1pxを指定していても横はみ出しの原因になりうるため、
 *   min-width:0 !importantを明示的に追加する。
 */
body.single-product .tornos-wb-visually-hidden-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* ==== 選択中カラーの独立表示欄(ROC-22指示1) ====
 * ★スウォッチ一覧(.tornos-wb-swatches)がモバイルで横スクロールしても、この欄は
 *   その外側に置かれているため常に見える。未選択/選択不可時はhidden属性で非表示にする
 *   (前の色名を残さない)。
 */
body.single-product .tornos-wb-current-color {
    display: flex;
    align-items: baseline;
    gap: .5em;
    margin-bottom: .6rem;
    font-size: .95rem;
}

body.single-product .tornos-wb-current-color[hidden] {
    display: none;
}

body.single-product .tornos-wb-current-color__name-en {
    font-weight: 700;
}

body.single-product .tornos-wb-current-color__name-ja {
    color: #556;
}

/* ★ROC-20指示2:色選択は実商品写真を使用。PCは4列×3段のグリッド。 */
body.single-product .tornos-wb-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: .7rem;
    margin-bottom: .8rem;
}

body.single-product .tornos-wb-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .35rem;
    min-width: 44px;
    min-height: 44px;
    padding: .3rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* 「選択枠」:選択中の色に枠を表示する。実商品写真をここに表示する。 */
body.single-product .tornos-wb-swatch__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 6px;
    border: 2px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
    background: #f2f3f4;
}

body.single-product .tornos-wb-swatch.is-selected .tornos-wb-swatch__frame {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 2px #fff inset;
}

body.single-product .tornos-wb-swatch__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 商品写真が取得できなかった場合のプレースホルダー(架空の色見本は作らない) */
body.single-product .tornos-wb-swatch__frame--no-photo {
    border: 1px dashed #ccc;
    background: #f8f8f8;
}

body.single-product .tornos-wb-swatch__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
    text-align: center;
}

body.single-product .tornos-wb-swatch__name-en {
    font-size: .74rem;
    font-weight: 600;
}

body.single-product .tornos-wb-swatch__name-ja {
    font-size: .68rem;
    color: #667;
}

body.single-product .tornos-wb-swatch:disabled,
body.single-product .tornos-wb-swatch.is-disabled {
    opacity: .35;
    cursor: not-allowed;
}

body.single-product .tornos-wb-swatch.is-disabled .tornos-wb-swatch__frame {
    position: relative;
}

body.single-product .tornos-wb-swatch.is-disabled .tornos-wb-swatch__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent 46%, #999 48%, #999 52%, transparent 54%);
}

/* ==== 左右ナビ(前の色/次の色):商品メイン画像の上に重ねて配置する(ROC-20指示2) ==== */
body.single-product .tornos-wb-gallery-nav-host {
    position: relative;
}

body.single-product .tornos-wb-gallery-nav-host .tornos-wb-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin: 0;
    pointer-events: none;
    z-index: 5;
}

/* ギャラリー要素が見つからずスウォッチ直後に配置されたフォールバック時の余白 */
body.single-product .tornos-wb-nav:not(.tornos-wb-gallery-nav-host .tornos-wb-nav) {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.2rem;
}

body.single-product .tornos-wb-nav button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, .92);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

body.single-product .tornos-wb-nav button:disabled {
    opacity: .3;
    cursor: not-allowed;
}

/* ★ROC-20指示2:Mobileは横1列(横スクロール)に切り替える。ページ全体の横はみ出しを
 *   起こさないよう、スクロール領域をコンテナ幅に収める。 */
@media (max-width: 900px) {
    body.single-product .tornos-wb-swatches {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: .6rem;
        padding-bottom: .4rem;
        max-width: 100%;
    }

    body.single-product .tornos-wb-swatch {
        flex: 0 0 auto;
    }
}