/* Coordeble Product CSS Cleanup Step 1 */

/*
 * 商品詳細：基本レイアウト
 * WooCommerce 商品詳細専用
 */

/* 商品ページ全体 */
body.single-product .woocommerce div.product {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* メイン画像と右側情報の左右配置 */
@media (min-width: 783px) {
    body.single-product
    .woocommerce div.product div.images {
        width: 47%;
        float: left;
        margin: 0 0 40px;
    }

    body.single-product
    .woocommerce div.product div.summary {
        width: 47%;
        float: right;
        margin: 0 0 40px;
    }
}

/* 商品画像エリア */
body.single-product
.woocommerce div.product
.woocommerce-product-gallery {
    box-sizing: border-box;
    max-width: 100%;
    padding: 0;
    margin-bottom: 30px;
}

/* メイン画像を角丸に */
body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__wrapper {
    overflow: visible;
    background: var(--cd-box-bg, transparent);
}

/* WooCommerce / FlexSliderの画像 */
body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cd-box-radius, 12px);
}

/* 商品画像を端まで広げず余白を確保 */
body.single-product
.woocommerce div.product div.images {
    box-sizing: border-box;
}

/* サムネイル：横スクロール */
body.single-product
.woocommerce-product-gallery
.flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 2px 8px !important;
    margin: 0 !important;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

/* テーマやWooCommerceの幅指定を上書き */
body.single-product
.woocommerce-product-gallery
.flex-control-thumbs li {
    float: none !important;
    clear: none !important;
    flex: 0 0 74px;
    width: 74px !important;
    max-width: none;
    margin: 0 !important;
    list-style: none;
    scroll-snap-align: start;
}

body.single-product
.woocommerce-product-gallery
.flex-control-thumbs li img {
    width: 100%;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    opacity: .65;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid transparent;
}

/* 選択中のサムネイル */
body.single-product
.woocommerce-product-gallery
.flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: currentColor;
}

/* 商品情報 */
body.single-product
.woocommerce div.product div.summary {
    box-sizing: border-box;
    min-width: 0;
}

body.single-product
.woocommerce div.product
.product_title {
    margin: 0 0 20px;
    line-height: 1.4;
    font-size: clamp(26px, 3vw, 38px);
    color: inherit;
}

body.single-product
.woocommerce div.product
.summary .price {
    margin: 0 0 26px;
    line-height: 1.5;
}

/* 数量とカートボタン */
body.single-product
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

/*
 * バリエーション商品では
 * WooCommerce標準の表・選択UIを維持する
 */
body.single-product
.woocommerce div.product
form.cart.variations_form {
    display: block;
}

body.single-product
.woocommerce div.product
form.cart .quantity {
    float: none;
    margin: 0;
}

body.single-product
.woocommerce div.product
form.cart .quantity .qty {
    width: 82px;
    min-width: 70px;
    height: 50px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 16px;
    text-align: center;
}

/* 購入ボタン */
body.single-product
.woocommerce div.product
form.cart .single_add_to_cart_button {
    float: none;
    min-height: 50px;
    padding: 12px 24px;
    border: 1px solid
        var(--cd-product-buy-bg, currentColor);
    border-radius: var(--cd-box-radius, 12px);
    background: var(
        --cd-product-buy-bg,
        transparent
    );
    color: var(
        --cd-product-buy-text,
        inherit
    );
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity .2s ease;
}

/* WooCommerce標準ボタンの色指定より優先 */
body.single-product
.woocommerce div.product
form.cart .single_add_to_cart_button:hover {
    background: var(
        --cd-product-buy-bg,
        transparent
    );
    color: var(
        --cd-product-buy-text,
        inherit
    );
    opacity: .85;
}

body.single-product
.woocommerce div.product
form.cart .single_add_to_cart_button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* バリエーション選択 */
body.single-product
.woocommerce div.product
form.cart .variations select {
    max-width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-size: 16px;
}

/* 商品詳細の追加セクション */
body.single-product
.cd-product-sections {
    margin-top: 28px;
}

/* スマホ表示 */
@media (max-width: 782px) {
    body.single-product
    .woocommerce div.product {
        padding: 20px;
    }

    body.single-product
    .woocommerce div.product div.images,
    body.single-product
    .woocommerce div.product div.summary {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.single-product
    .woocommerce-product-gallery
    .flex-control-thumbs li {
        flex-basis: 62px;
        width: 62px !important;
    }

    body.single-product
    .woocommerce-product-gallery
    .flex-control-thumbs li img {
        height: 62px;
    }

    body.single-product
    .woocommerce div.product .product_title {
        font-size: 28px;
    }

    body.single-product
    .woocommerce div.product
    form.cart .quantity .qty {
        width: 76px;
    }

    body.single-product
    .woocommerce div.product
    form.cart .single_add_to_cart_button {
        padding: 12px 20px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.single-product
    .woocommerce div.product
    form.cart .single_add_to_cart_button {
        transition: none;
    }
}

/* 商品詳細：スマホ基本設定 */

@media (max-width: 782px) {

    /*
     * 商品画像：
     * 上24px / 左右20px
     */
    body.single-product
    .woocommerce div.product div.images,
    body.single-product
    .woocommerce div.product
    .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px 0 !important;
        margin: 0 0 30px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /*
     * メイン画像の角丸
     * サイトデザイン設定と連動
     */
    body.single-product
    .woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper {
        overflow: visible;
    }

    body.single-product
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image img {
        display: block;
        width: 100%;
        height: auto;
        border-radius:
            var(--cd-box-radius, 12px);
    }

    /*
     * サムネイルは画像エリア内に収める
     */
    body.single-product
    .woocommerce-product-gallery
    .flex-control-thumbs {
        max-width: 100%;
        box-sizing: border-box;
        padding: 14px 0 8px !important;
    }

    /*
     * 数量と購入ボタン
     */
    body.single-product
    .woocommerce div.product form.cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    body.single-product
    .woocommerce div.product
    form.cart .quantity {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    /*
     * カートボタンを1行全幅に
     */
    body.single-product
    .woocommerce div.product
    form.cart .single_add_to_cart_button {
        display: block !important;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100%;
        min-height: 54px;
        margin: 0 !important;
        padding: 14px 18px;
        box-sizing: border-box;
        text-align: center;
        border-radius:
            var(--cd-box-radius, 12px);
    }

    /*
     * バリエーション商品にも対応
     */
    body.single-product
    .woocommerce div.product
    form.cart.variations_form {
        display: block;
    }

    body.single-product
    .woocommerce div.product
    .woocommerce-variation-add-to-cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    body.single-product
    .woocommerce div.product
    .woocommerce-variation-add-to-cart
    .single_add_to_cart_button {
        flex: 0 0 100%;
        width: 100% !important;
    }
}

/* 商品画像・購入フォーム：スマホ調整 */

@media screen and (max-width: 782px) {

    /*
     * WooCommerceの商品画像エリア
     * 上24px・左右20pxの余白
     */
    body.single-product div.product
    .woocommerce-product-gallery,
    body.single-product div.product div.images {
        display: block;
        float: none !important;
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 24px auto 30px !important;
    }

    /*
     * メイン画像と角丸
     */
    body.single-product div.product
    .woocommerce-product-gallery__wrapper {
        overflow: visible;
    }

    body.single-product div.product
    .woocommerce-product-gallery__image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius:
            var(--cd-box-radius, 12px);
    }

    /*
     * サムネイルの横スクロールは維持
     */
    body.single-product div.product
    .flex-control-thumbs {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        padding: 14px 0 8px !important;
    }

    /*
     * 購入フォーム
     */
    body.single-product div.product
    form.cart:not(.variations_form) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    /*
     * 数量欄
     */
    body.single-product div.product
    form.cart .quantity {
        float: none !important;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    body.single-product div.product
    form.cart .quantity input.qty {
        width: 76px !important;
        min-height: 50px;
        box-sizing: border-box;
        border-radius: 10px;
        text-align: center;
    }

    /*
     * カートボタンを横幅100%に
     */
    body.single-product div.product
    form.cart button.single_add_to_cart_button {
        display: block !important;
        float: none !important;
        clear: both;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px;
        margin: 0 !important;
        padding: 14px 18px !important;
        box-sizing: border-box;
        text-align: center;
        border-radius:
            var(--cd-box-radius, 12px);
    }

    /*
     * バリエーション商品の購入エリア
     */
    body.single-product div.product
    .woocommerce-variation-add-to-cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    

}

/* 商品画像：ギャラリー制御 */

/*
 * FlexSliderの内側は幅と移動量をJSに任せる。
 * 角丸は画像表示用の外枠に適用する。
 */
body.single-product
.woocommerce-product-gallery .flex-viewport {
    overflow: hidden;
    border-radius: var(--cd-box-radius, 12px);
}

/* JSが管理する横移動領域を切り取らない */

/* スライダー未初期化・画像1枚の場合 */
body.single-product
.woocommerce-product-gallery:not(.woocommerce-product-gallery--with-images)
.woocommerce-product-gallery__image img {
    border-radius: var(--cd-box-radius, 12px);
}

/* 購入フォーム：数量とボタン */

@media (max-width: 782px) {

    /* 商品タイトル：サイズと行間を調整 */
    body.single-product
    div.product
    .summary .product_title {
        font-size: clamp(23px, 6vw, 27px) !important;
        font-weight: 700;
        line-height: 1.35 !important;
        letter-spacing: .015em;
        margin: 0 0 20px !important;
        overflow-wrap: anywhere;
    }

    /* タイトルと価格の間隔 */
    body.single-product
    div.product
    .summary > .price {
        margin: 0 0 22px !important;
    }

    /*
     * シンプル商品：
     * 左：数量 / 右：購入ボタン
     */
    body.single-product
    div.product
    form.cart:not(.variations_form) {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* 数量入力の外枠 */
    body.single-product
    div.product
    form.cart .quantity {
        float: none !important;
        flex: 0 0 82px !important;
        width: 82px !important;
        margin: 0 !important;
    }

    /* 数量入力欄 */
    body.single-product
    div.product
    form.cart .quantity input.qty {
        display: block;
        width: 100% !important;
        height: 54px !important;
        min-height: 54px;
        padding: 8px 4px;
        border: 1px solid currentColor;
        border-radius:
            var(--cd-box-radius, 12px) !important;
        background: transparent;
        color: inherit;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
    }

    /* 購入ボタン：残りの横幅を使う */
    body.single-product
    div.product
    form.cart button.single_add_to_cart_button {
        float: none !important;
        clear: none !important;
        display: block !important;
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        min-height: 54px;
        margin: 0 !important;
        padding: 10px 8px !important;
        border-radius:
            var(--cd-box-radius, 12px) !important;
        font-size: clamp(13px, 3.6vw, 16px);
        line-height: 1.4;
        text-align: center;
        white-space: normal;
        box-sizing: border-box;
    }

    /*
     * バリエーション商品：
     * 選択項目は通常表示、
     * 数量と購入ボタンだけ横並び
     */
    body.single-product
    div.product
    form.cart.variations_form {
        display: block !important;
    }

    body.single-product
    div.product
    .woocommerce-variation-add-to-cart {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: 100%;
    }

    body.single-product
    div.product
    .woocommerce-variation-add-to-cart
    .quantity {
        flex: 0 0 82px !important;
    }

    body.single-product
    div.product
    .woocommerce-variation-add-to-cart
    button.single_add_to_cart_button {
        flex: 1 1 0% !important;
        width: auto !important;
    }
}

/* 商品情報：余白と位置揃え */

@media screen and (max-width: 782px) {

    /*
     * 画像と同じ左右20pxの基準線へ統一。
     * WooCommerceがbody側にクラスを持つ
     * 構造にも対応する。
     */

    body.single-product div.product div.summary,
    body.single-product div.product .summary,
    body.single-product div.product
    .woocommerce-tabs,
    body.single-product div.product .related,
    body.single-product div.product .upsells {
        float: none !important;
        clear: both;
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * 商品情報内部は親要素の幅を継承
     */
    body.single-product div.product
    .summary .product_title,
    body.single-product div.product
    .summary .price,
    body.single-product div.product
    .summary .woocommerce-product-details__short-description,
    body.single-product div.product
    .summary .product_meta {
        max-width: 100%;
        box-sizing: border-box;
    }

    /*
     * タイトルを自然に改行
     */
    body.single-product div.product
    .summary .product_title {
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.35 !important;
    }

    /*
     * 数量と購入ボタンの横並びを維持
     */
    body.single-product div.product
    .summary form.cart {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /*
     * 説明タブの位置も統一
     */
    body.single-product div.product
    .woocommerce-tabs {
        margin-top: 32px;
    }
}

/* バリエーション：選択欄 */

/*
 * カラー・サイズなどの商品選択欄
 * PC・スマホ共通
 */
body.single-product div.product
form.variations_form .variations select,
body.single-product div.product
form.cart select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    padding: 12px 40px 12px 16px;
    box-sizing: border-box;

    background-color: #ffffff;
    color: #333333;

    border: 1px solid #d8d8d8;
    border-radius: var(--cd-box-radius, 12px);

    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
}

/* 選択候補の文字色 */
body.single-product div.product
form.cart select option {
    background-color: #ffffff;
    color: #333333;
}

/* フォーカス時 */
body.single-product div.product
form.cart select:focus {
    border-color: #71847a;
    outline: 2px solid rgba(113,132,122,.2);
    outline-offset: 1px;
}

/* カラー・サイズの項目間隔 */
body.single-product div.product
form.variations_form table.variations {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 14px;
    margin: 0 0 20px;
}

body.single-product div.product
form.variations_form
table.variations tr,
body.single-product div.product
form.variations_form
table.variations td,
body.single-product div.product
form.variations_form
table.variations th {
    border: 0;
}

/* ラベル */
body.single-product div.product
form.variations_form
table.variations th.label {
    padding: 0 12px 0 0;
    vertical-align: middle;
    white-space: nowrap;
}

/* 選択欄 */
body.single-product div.product
form.variations_form
table.variations td.value {
    padding: 0;
    vertical-align: middle;
}

/* バリエーション：スマホ横並び */

@media (max-width: 782px) {

    body.single-product div.product
    form.variations_form table.variations,
    body.single-product div.product
    form.variations_form table.variations tbody {
        display: block;
        width: 100%;
        border-spacing: 0;
    }

    body.single-product div.product
    form.variations_form table.variations tr {
        display: grid !important;
        grid-template-columns:
            minmax(70px, 25%) minmax(0, 1fr);
        align-items: start !important;
        column-gap: 12px;
        width: 100%;
        margin-bottom: 14px;
    }

    /* ラベルを選択欄と同じ高さにする */
    body.single-product div.product
    form.variations_form
    table.variations th.label {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start;
        width: 100%;
        height: 52px;
        min-height: 52px;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.4;
        text-align: left;
        box-sizing: border-box;
    }

    body.single-product div.product
    form.variations_form
    table.variations th.label label {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4;
        text-align: left;
    }

    /* 右側の選択欄 */
    body.single-product div.product
    form.variations_form
    table.variations td.value {
        display: block !important;
        width: 100%;
        min-width: 0;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body.single-product div.product
    form.variations_form
    table.variations td.value select {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 52px;
        min-height: 52px;
        margin: 0;
        box-sizing: border-box;
    }

    /* 選択解除リンクは選択欄の下 */
    body.single-product div.product
    form.variations_form
    .reset_variations {
        display: inline-block;
        margin-top: 8px;
        font-size: 12px;
    }
}

/* 商品詳細：フッター境界 */

/*
 * 商品詳細ページの背景を統一。
 * コンテンツ末尾のマージンのはみ出しも防ぐ。
 */
body.single-product {
    background-color: var(--cd-main-bg, #202825);
}

body.single-product main {
    display: flow-root;
    background-color: var(--cd-main-bg, #202825) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* WooCommerceの商品詳細コンテナ */
body.single-product .woocommerce,
body.single-product .woocommerce div.product {
    margin-bottom: 0 !important;
}

/* フッター上部の外側余白を除去 */
body.single-product .coordeble-site-footer {
    margin-top: 0 !important;
}

/* スマホも同じ設定 */
@media (max-width: 782px) {
    body.single-product main {
        padding-bottom: 0 !important;
    }
}