/**
 * craftcos-product.css ── CRAFT・COS 商品詳細ページ専用CSS
 * Version: 20261031_v26（指示書CN CN-5: 商品ページの横ずれの守り。いちばん下に html,body{overflow-x:clip} を追加）
 * 【v26 変更点（20261031・指示書CN CN-5）】いちばん下に ★v26 ブロックを足しただけ。既存の行は1行も変えていない。
 *   html, body { overflow-x: clip; } ＋ @supports not (overflow-x: clip) { html { overflow-x: hidden; } }（古い環境の保険）。
 *   購入バー（.cc-buy-bar）・下のナビ（.cc-bottom-nav・position:sticky 系）・写真のスワイプ・横スクロールへの影響なし（overflow-x だけで overflow-y は変えていない）。
 * (旧)Version: 20261018_v25（指示書BV BV-1: 「この形の別シリーズ」「合わせておすすめ」のカードを枠なしに・名前の最後のかっこを途中で折らない）
 * 【v25 変更点（20261018・指示書BV BV-1）】いちばん下に ★v25 ブロックを足しただけ。既存の行は1行も変えていない（上書きは後ろの規則で）。
 *   ・一覧のカード（craftcos-archive.css v21「★v21 枠なし」）と同じ見た目: .cc-rel-card の白・線・影・角丸をやめ、写真（.cc-rel-img）の角だけ丸く
 *     （PC 16px／560px 以下 12px）。.cc-rel-body の余白 10px → 8px 4px 0（560px 以下 6px 2px 0）。
 *   ・★パーツの作り方の線（.cc-rel-img[class*="cc-make-"]::after）は四すみとも角丸（15px／560px 以下 11px）。
 *   ・.cc-rel-nb{white-space:nowrap}＝content-single-product v19 が名前の最後のかっこ「(太さ1.5mm)」「（テスト）」を包む印。
 *   ・PC のホバー（浮く）・横スクロール・名前 11px・値段 13px・色の丸の余白（★v16 AB-4）は今のまま。.cc-series も .cc-related も同じカード＝2段とも枠なし。
 * (旧)Version: 20261005_v24（司令塔パッチ・実機FB: 別のページから「戻る」で戻った直後の数秒、商品写真が10倍に拡大して見える）
 * 【v24 変更点（20261005・司令塔パッチ）】いちばん下に ★v24 ブロックを足しただけ。既存の行は1行も変えていない。
 *   原因: flexslider は動き始めに __wrapper を width:1000%（写真5枚×200%）にし、1枚ずつの幅は「そのあと（タイマー）」で入れる。
 *   その間は1枚目が __wrapper いっぱい＝画面の10倍の大きさになる。ふつうは一瞬だが、iPhone で「戻る」で戻ったときはタイマーが遅れて数秒見える
 *   （上の opacity:1 !important の保険で、途中の状態が見えるため）。
 *   直し: .flex-viewport の中の1枚は、いつも .flex-viewport の幅まで（max-width:100cqw・古い端末は 100vw）。
 *         幅が入る前（style に float がまだ無い間）だけ、2枚目以降は隠す（縦に5枚並ばない）。flexslider が幅を入れたあとは今までどおり。
 * (旧)Version: 20261001_v23（指示書AK AK-6: 商品ページの「🎀 同色まとめ割引の対象 ›」）
 * 【v23 変更点（20261001・指示書AK）】いちばん下に ★v23 ブロック（.cc-samebadge）を足しただけ。既存の行は1行も変えていない。
 *   craftcos.php v70 §36 が価格（p.price）のすぐ下に出す <p class="cc-samebadge"> の見た目（正① タブ④ のモックの CSS そのまま）。
 *   チップ: 背景 #FFF0F5・枠 1px #F5C9D9・文字 #b8446a 13px/800・角丸 999px・padding 4px 12px／small 12px #A3928F。
 *   PC は横並び（flex-wrap）・📱（768px 以下）は入りきらなければ2段。
 * (旧)Version: 20261001_v22（指示書AJ 検品の直し: 長さの右の文を「〜」の後ろで改行しない）
 * 【v22 変更点（20261001）】いちばん下に1行（.ccso-nw{white-space:nowrap}）を足しただけ。既存の行は1行も変えていない。
 *   buybulk v23 の ccSemi が長さの右の文（.ccso-res）の「値段は S（〜3.5cm）」「の ¥170」をこの印で包む（セミオーダー ON の商品だけ）。
 * (旧)Version: 20261001_v21（指示書AJ AJ-2／AJ-3: ✂️ セミオーダーの箱（購入シート・PC の商品ページ））
 * 【v21 変更点（20261001・指示書AJ）】いちばん下に ★v21 ブロック（§AJ）を足しただけ。既存の行は1行も変えていない。
 *   ・.ccso-ck／.ccso-box／.ccso-k small／.ccso-f（flex-wrap:nowrap）／.ccso-in／.ccst／.ccso-res／.ccso-lock／.ccso-guide／.ccso-warn／.ccso-ref
 *     ＝ 正①（プレビュー_セミオーダーの選び方_本物の購入シート_20260930_v22）の <style> をそのまま写した。
 *     どれも buybulk v21 の ccSemi が「セミオーダー ON の商品」にだけ作る部品なので、ほかの商品には当たらない。
 *   ・「選んだもの」の行を1行に収める（column-gap 4px・−＋ 21px・× 20px・数字 20px・名前 -.01em）は form.cart.ccso-ready
 *     （＝セミオーダー ON の商品だけ ccSemi が付ける印）の中だけ。ほかの商品の購入シートは今のまま。
 *   ・PC の「合計（本体＋オプション）」の下の内訳（#ccso-pcsum）・理由（#ccso-pcerr）・押せない見た目（.ccso-gated＝加工のゲートと同じ灰色）。
 *   ・4L・5L（バリエーションの無い段）のときは、PC で select を合わせた 3L のチップも印にしない（.ccso-ext）。
 * (旧)Version: 20260927_v20（指示書AH AH-1: PC（961px 以上）のギャラリーの小さい写真を「1段に5枚・入りきらない分は下の段」）
 * 【v20 変更点（20260927・指示書AH）】いちばん下に ★v20 ブロック（@media (min-width:961px)）を足しただけ。既存の行は1行も変えていない。
 *   ・.flex-control-thumbs を grid（repeat(5, minmax(0,1fr))・gap 8px・overflow visible）に上書き。li は width:auto／min-width:0。
 *   ・img は幅いっぱい（100%）・正方形（aspect-ratio 1/1）・object-fit:cover。341px 幅で 1枚 ≒ 62px。6枚目からは自動で2段目。
 *   ・選択中のピンク枠（img.flex-active）・flexslider の切り替えはそのまま。960px 以下（横一列・56px・スワイプ）は触らない。
 *   ・img の 2px の透明な枠がはみ出さないよう box-sizing:border-box を同じ規則に添えた（見た目の大きさは 1マスぴったり）。
 * (旧)Version: 20260927_v19（司令塔パッチ: ヘッダーの上の 52px の空き＝body.cc-section に .cc-section の margin-top が当たっていた）
 * 【v19 変更点（20260927・司令塔パッチ）】1行だけ。`.cc-section { margin-top:52px }` → `section.cc-section`（＋body.cc-section { margin-top:0 } の保険）。
 *   商品ページで、ヘッダーの上（Safari の URL バーとロゴの間）に 52px の空きが出ていた原因。AF v18 の中身はそのまま。
 * (旧)Version: 20260927_v18（指示書AF: PC の右の列を下まで・購入カードがついてくる／カードの中の整理／スマホの小直し）
 * 【v18 変更点（20260927・指示書AF）】既存の規則で値を変えたのは 960px 以下の ABOUT ITEM の2か所だけ（★v18 の印）。あとはいちばん下の ★v18 ブロックに足した。
 *   ・AF-1（961px 以上）: 右の列（aside.cc-spec-col）を2段ぶん（商品説明の横まで）。商品説明（.cc-about-card）は左2列の幅。
 *     購入カード（.cc-spec-col form.cart）は position:sticky; top:82px（ヘッダー 70px＋12px）で下にスクロールしてもついてくる。
 *   ・AF-3: サイズを選んだら左の大きな値段（.cc-info-col p.price）を差し替える（JS は buybar v28）。
 *     Woo の price_html は <span class="price"> で包まれてくるので、中の .price に .cc-info-col .price（ブロック・30px・下22px）が
 *     二重に当たらないよう打ち消した。サイズ名の札（.cc-price-size）・ぱっと光る動き（769px 以上）。カードの中の値段は 961px 以上で隠す。
 *   ・AF-4（961px 以上）: カラー＝「カラー　色名」→ 丸（grid・HTML の順番はそのまま）／加工の見出しの字／加工のカード（行1だけ）を幅いっぱいに均等／
 *     数量＋カゴに追加を1行（ボタン高さ 44px・残りの幅いっぱい）。まとまりの間 14px。
 *     ※.woocommerce-variation-add-to-cart の中には カラー・加工・数量割引の合計 なども入っている（Woo のフックの場所）ので、
 *       flex にしても1行に並ぶのは「数量とボタン」だけにした（ほかの子は 100% 幅・数量割引の合計は数量の上へ）。
 *   ・AF-5: 「✉ この商品について問い合わせる」はシェアの下（.cc-info-col）・左寄せ。
 *   ・AF-9（560px 以下）: パンくずを1行（11px・はみ出た商品名は …）。
 *   ・AF-10（960px 以下）: ABOUT ITEM のカード 82% 幅・padding 14px 16px（★v18 既存行の値）／見出しの上 32px・下 14px／POINT の下 6px。
 *     ※.cc-section は <body> にも付くクラス（お店のページの印）なので、上の余白は section.cc-section に限った（body の余白は変えない）。
 * (旧)Version: 20260925_v17（司令塔パッチ: PC の白いカードと「✉ この商品について問い合わせる」の間を 32px → 10px）
 * 【v17 変更点（20260925・司令塔パッチ）】1か所だけ。v16 の「.cc-spec-col form.cart { margin-bottom:0 }」が、
 *   WooCommerce 標準の「.woocommerce div.product form.cart { margin-bottom:2em }」（詳細度が上）に負けて 32px 空いていた
 *   （本番の商品ページに v16 の CSS を当てて実測）。margin-bottom に !important を付けただけ。PC（961px 以上）だけ・ほかは無変更。
 * (旧)Version: 20260925_v16（指示書AB AB-1: PC の配置C／AB-4: 別シリーズ・おすすめのカード幅／AB-5: 商品説明の下の余白）
 * 【v16 変更点（20260925・指示書AB）】既存の規則で値を変えたのは3か所だけ（★v16 の印）。あとはファイルのいちばん下の ★v16 ブロックに足した。
 *   ・AB-1: .cc-product-top の3列を minmax(0,1.05fr) minmax(0,1fr) 300px → minmax(0,1fr) minmax(0,.9fr) 380px
 *     （右の列に移したカートフォームの加工カード3枚が横に入る幅）。960px 以下は今までどおり1列（上書きは変えていない）。
 *     PC（961px 以上）だけ、右の列の form.cart を白いカード（角丸18・ピンクの細い線・うすい影）に。
 *     サイズの段のしましま（テーマ Hello の「奇数行を灰色」）と、加工の箱の白（.cc-co.cc-co-js）を透明に。
 *     ※サイズを選んだあとの値段（.woocommerce-variation-price .price）は、今まで .cc-info-col .price の
 *       「ピンク・太字・ブロック」が当たっていた。右の列へ移すと当たらなくなり Woo の既定の色（オリーブ色）に戻るので、
 *       同じ3つを .cc-spec-col .price にも当てた（値は今と同じ）。
 *   ・AB-4: スマホ（560px 以下）の別シリーズ／おすすめのカード幅 (100% - 20px) / 3.15 → / 2.85（2枚＋3枚目が半分ちょっと）。
 *     名前の下に足した色の丸（.cc-cw-row）の上下の余白をプレビューに合わせた（上 0・下 5px）。PC の6列はそのまま。
 *   ・AB-5: 商品説明の最後の段落の下の余白 0（空のシェア用の箱 .xs_social_share_widget を隠し、その手前の要素も 0 に）・
 *     ブロックの間の点線の上 14→10px／下 14→12px。文章・見出し・点線の色は変えていない。PC も同じ。
 * (旧)Version: 20260925_v15（指示書Z Z-4: 「この形の別シリーズ」と「あわせておすすめ」の線・スマホの1列スクロール）
 * 【v15 変更点（20260925・指示書Z Z-4）】ファイルのいちばん下に ★v15 のブロックを足しただけ（既存の規則は1バイトも変えていない）。
 *   ・.cc-rel-img に cc-make-A〜D が付いた★パーツのカードだけ、写真の上に ::after で作り方の色の線（4px・上だけ角丸）。
 *     .cc-rel-card の角丸 14px・枠 1px に合わせて線は 13px。スマホ（560px以下）は 3.5px。メインの写真には付けない。
 *   ・スマホ（560px以下）: 「この形の別シリーズ」（.cc-series）と「あわせておすすめ」（.cc-related）を横スクロール1列に。
 *     スクロール前に3つ＋4つ目が少しのぞく（(100% - 20px) / 3.15）・2段とも同じ幅。
 *     左右は .cc-product の余白（スマホ 14px）ぶん画面のはしまで広げる（margin 0 -14px／padding 0 14px）。
 *     ※指示書は -16px／16px だったが、実際の .cc-product の余白が 14px なので 16px だと横に 2px はみ出す → 14px にした。
 *   ・PC（961px以上）は今の6列・タブレット（561〜960px）は今の3列のまま（.cc-series は .cc-related も持つので同じ並び）。
 * (旧)Version: 20260924_v14（指示書Q ①: 開いた最初に商品画像が一瞬「縦に伸びる」＝flexslider が動く前の5枚積みを見せない）
 * 【v14 変更点（20260924・指示書Q ①）】ギャラリーの「動く前だけ」の規則を 2か所に足しただけ（下の ★v14）。
 *   動いたあとの見た目・opacity の保険・サムネ・PC の2カラムは1バイトも変えていません。
 * (旧)Version: 20260921_v13（指示書G ⑩: 右の列を 230px → 300px に広げる／移した .product_meta の3行に .cc-spec-col を追加）
 * (旧)Version: 20260917_v12（司令塔パッチ・実機FB: 素材のチップを1行に）
 * 【v12 変更点（20260917）】素材のチップ（サージカルステンレス(316L)(アレルギー配慮)）が
 *   2行に折り返していたので、文字 12→11.5px・左右の余白 10→8px・行間を詰めた。
 *   長すぎて入りきらないときだけ折り返す（word-break はそのまま）。
 * (旧)Version: 20260916_v11（司令塔パッチ・実機FB: 商品仕様も同じカードへ・素材を1行に・余白詰め）
 *  v11: 商品仕様カード（右カラムの別カード）をやめ、商品説明・素材アレルギーと同じ1枚に。
 *      中は .cc-about-sec の3ブロックで、区切りはブロック間の点線1本だけ。
 *      素材／タイプ／商品仕様は「ラベル： 値」の1行（.cc-kv）に統一。
 *      見出しまわり・行間・ラベルと値の間の余白を全体的に詰めた。
 *      ※ .cc-spec-card 系の CSS は他で使っていないが、消さずに残してある。
 * (旧)Version: 20260916_v10（司令塔パッチ・実機FB: 商品説明と素材・アレルギーを合体して上へ）
 *  v10: 商品説明と「🌸 素材・アレルギーについて」を1枚のカード（.cc-about-card）にまとめ、
 *      上段（.cc-product-top）の中＝商品仕様カードのすぐ下に置くための CSS を追加。
 *      PC は3カラムの下に全幅で1行（grid-column: 1 / -1）、スマホはそのまま縦に並ぶ。
 *      中の素材カードは枠・背景・角丸を消して、点線の仕切りを挟んだ小見出し扱いにしている。
 *      520px 以下では素材の表を「項目名の下に内容」の縦積みへ。
 *      ※ ほかのセクションの見た目は 1px も変えていません。
 * (旧)Version: 20260915_v9（司令塔パッチ・実機FB: POINT を横スクロールに）
 *  v9: ABOUT ITEM のポイントカードを、スマホ／タブレット（960px以下）では縦積みではなく
 *      横スクロール（小さめのカードが2枚見える・指でめくる・下にドット）にした。
 *      PC（961px以上）は今までどおり3列。カードの見た目・文言は不変。
 * (旧)Version: 20260914_v8（司令塔パッチ・実機FB: ギャラリーと商品名のすき間）
 *  v8: サムネ列の下と商品名の上が空きすぎていた。原因は WooCommerce 標準の
 *      `.woocommerce div.product div.images { margin-bottom: 2em }`（＝32px）が
 *      ギャラリーのかたまりに残っていたこと（実測 46px）。これを 0 にして、
 *      1カラムになる幅（960px以下）の縦の間隔を 34px→16px、スマホ（560px以下）を 14px→10px に。
 *      → スマホで 46px → 10px。写真とサムネの間・サムネどうしの間・PCの横の間隔は不変。
 * (旧)Version: 20260824_v7（司令塔パッチ・実機FB: Xの字が小さい）
 *  v7: シェアのX（𝕏＝文字）の見た目サイズを 13px → 17px に。丸の大きさ(34px)と
 *      LINE・鎖の見え方に合わせた。文字なのでline-height:1で上下中央も固定。
 * (旧)Version: 20260824_v6（司令塔パッチ・実機FB: 鎖アイコンが右にずれる）
 *  v6: URLコピーの<button>がテーマ/Elementorの汎用button装飾から
 *      padding（例 12px 24px）を受け継ぎ、34px幅では中身の箱が潰れて
 *      アイコンが右へ押し出されていた。padding/text-indent/line-height を
 *      0に固定して中央そろえを復活（<a>のX・LINEは元から影響なし）。
 * (旧)Version: 20260824_v5（司令塔パッチ・シェアボタン）
 *  v5: LINE公式アイコン用のスタイル（囲み丸なし・ホバーで色をかぶせない=ガイドライン準拠、
 *      サイズ34px=PC最小20pxクリア）。URLコピーのSVGアイコン用の微調整。
 * (旧)Version: 20260824_v4（司令塔パッチ・実機FB: PCホバーで画像がゆがむ）
 *  v4: Wooのホバーズームを表示側でも完全に止める3点セット（craftcos.php v44 の
 *      機能OFFと二段構え＝キャッシュや他プラグインでzoom.jsが残っても効く）:
 *      ①ズーム用に重ねられる巨大画像(.zoomImg)を非表示 ②本体imgの縦横比を
 *      height:auto !important で固定（インラインheightに勝つ） ③ホバー時の
 *      カーソルは通常に（クリックの拡大=ライトボックスはそのまま）
 * (旧)Version: 20260812_v3（司令塔パッチ・実機FB）
 *  v3: ギャラリーサムネがWoo標準CSS（div.images…li img{width:100%}・li{width:25%}）に詳細度負けして
 *      巨大表示されていたのを修正（セレクタ強化＋!important）。スマホはサムネ56px・
 *      タイトル上の空間（grid gap 34px→14px）と価格まわりの余白を詰めた。
 * (旧)Version: 20260706_v2
 * ───────────────────────────────────────────────
 * 【v2 変更点】
 *  - 商品ギャラリー: 幅100%を強制（画像が小さく表示される問題の修正）
 *  - アレルギーカード: テーマ/Wooのtableデフォルト装飾を打ち消し＋
 *    狭い右カラム用に縦積みレイアウト化（チップ崩れの修正）
 * 設置: テーマ直下（hello-elementor-child/craftcos-product.css）※上書きでキャッシュ自動切替
 */

/* ===== 全体 ===== */
.cc-product {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 22px 40px;
	color: var(--cc-ink, #6B5A60);
	line-height: 1.7;
}
.cc-product img { max-width: 100%; height: auto; }

/* ===== パンくず ===== */
.cc-breadcrumb {
	font-size: 11.5px;
	color: #A3928F;
	padding: 18px 0 14px;
}
.cc-breadcrumb a { color: #A3928F; text-decoration: none; }
.cc-breadcrumb a:hover { color: var(--cc-pink, #F58BB6); }
.cc-bc-sep { margin: 0 7px; opacity: .55; }

/* ===== 上段3カラム ===== */
.cc-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 380px;   /* ★v16（AB-1）: minmax(0,1.05fr) minmax(0,1fr) 300px → 右の列 380px（カートフォームの加工カード3枚が横に入る）。★v13: 230px → 300px */
	gap: 34px;
	align-items: start;
}

/* ===== ギャラリー（Woo標準を着せ替え） ===== */
/* ★v2: 幅を強制（Wooのfloat/幅指定やテーマ都合で画像が小さくなる問題の修正） */
.cc-gallery-col .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	opacity: 1 !important; /* JS初期化失敗時も必ず見える保険 */
}
.cc-gallery-col .woocommerce-product-gallery__image img,
.cc-gallery-col .woocommerce-product-gallery__image a img {
	width: 100% !important;
	height: auto;
	display: block;
}
.cc-gallery-col .woocommerce-product-gallery__wrapper { margin: 0; }
/* ★v14（指示書Q ①）: 開いた最初に画像が一瞬「縦に伸びる」の直し。
   【原因（実物で確認 20260924）】Woo はギャラリーを opacity:0 で出し、flexslider が動いてから見せる作り。
   上の opacity:1 !important（保険）で、動く前の状態がそのまま見えていた。
   Woo 標準の CSS で 1枚目は大きく・2枚目以降は 25% 幅で下に横並び、しかも本文の幅（左右14pxの余白の内側）なので、
   375px 幅の実測で「1枚目 327×327 ＋ 下に小さい4枚 ＝ 高さ 416px」→ 動いた瞬間に「355×355・高さ 355px」へ
   ＝画像が大きくなり・下の段が消えて縦に伸び縮みして見える。JS の読み込みが遅い回だけ見えるので不安定。
   【直し】動く前だけ（__wrapper がまだギャラリーの直下＝.flex-viewport に包まれていない間だけ）
     ・2枚目以降は隠す（1枚目だけ見せる）
     ・1枚目の枠は aspect-ratio 1/1 で高さを先に決め、画像は contain（枠の中で伸びない）
   flexslider が動くと __wrapper は .flex-viewport の中へ移るので、この3つは自動で外れる（動いたあとは今までどおり）。
   画像が1枚だけの商品は flexslider が動かない作りなので、:not(:only-child) で対象外（今までどおり）。
   ★opacity の保険はそのまま＝JS が失敗しても1枚目は見える。 */
.cc-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	display: none !important;          /* Woo 標準の「2枚目以降を 25% 幅で横並び」（詳細度が高い）に勝つため */
}
.cc-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child:not(:only-child) {
	aspect-ratio: 1 / 1 !important;
}
.cc-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child:not(:only-child) > a {
	display: block; width: 100%; height: 100%;
}
.cc-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child:not(:only-child) img {
	width: 100% !important; height: 100% !important; object-fit: contain;
}
.cc-gallery-col .woocommerce-product-gallery__image {
	border-radius: 0;                 /* ★角丸全廃（スクエア） */
	overflow: hidden;
	background: #FDEEF3;
	box-shadow: 0 8px 30px rgba(245,139,182,.12);
}
.cc-gallery-col .flex-viewport { border-radius: 0; }
/* サムネイル：正方形を左から横一列。多い時は横スクロール。角丸なし。 */
.cc-gallery-col .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 8px;
	margin: 8px 0 0;                  /* ★メイン画像との余白を詰める */
	padding: 0 0 2px;
	list-style: none;
	overflow-x: auto;                 /* ★はみ出したら横スクロール */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.cc-gallery-col .woocommerce-product-gallery .flex-control-thumbs li { margin: 0; flex: 0 0 auto; width: auto !important; float: none !important; } /* ★v3: Woo標準のli幅25%/floatに詳細度で勝つ */
.cc-gallery-col .woocommerce-product-gallery .flex-control-thumbs img {
	width: 68px !important;   /* ★v3: Woo標準の width:100% に勝つ */
	height: 68px !important;
	object-fit: cover;
	border-radius: 0;                 /* ★スクエア */
	border: 2px solid transparent;
	opacity: .85;
	cursor: pointer;
	transition: border-color .18s, opacity .18s;
}
.cc-gallery-col .flex-control-thumbs img:hover { opacity: 1; }
.cc-gallery-col .flex-control-thumbs img.flex-active {
	border-color: var(--cc-pink, #F58BB6);   /* ★選択中ピンク枠は維持 */
	opacity: 1;
}
/* ★v8: Woo標準 `.woocommerce div.product div.images{margin-bottom:2em}`（32px）を打ち消す。
   ギャラリーの下の余白は .cc-product-top の gap だけで決める（詳細度で負けるので !important）。 */
.cc-gallery-col .woocommerce-product-gallery,
.cc-gallery-col .woocommerce-product-gallery.images { margin-bottom: 0 !important; }

/* セールフラッシュ → BESTバッジ風 */
.cc-product .onsale {
	position: absolute;
	top: 0; left: 16px; z-index: 5;
	background: var(--cc-pink, #F58BB6);
	color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: .1em;
	padding: 6px 12px 8px;
	border-radius: 0 0 8px 8px;
	min-width: 0; min-height: 0; line-height: 1.4;
	box-shadow: 0 3px 8px rgba(245,139,182,.4);
}
/* 拡大アイコン */
.cc-product .woocommerce-product-gallery__trigger {
	background: rgba(255,255,255,.92) !important;
	border-radius: 50%;
	top: auto !important; bottom: 12px; right: 12px !important;
}

/* ===== 商品情報カラム ===== */
.cc-info-col .product_title {
	font-size: 26px;
	font-weight: 700;
	color: #5F5054;
	line-height: 1.4;
	margin: 0 0 10px;
}
/* レビュー星 */
.cc-info-col .woocommerce-product-rating {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 14px; font-size: 13px;
}
.cc-info-col .star-rating { color: var(--cc-gold, #C9A46A); }
.cc-info-col .woocommerce-review-link { color: #A3928F; font-size: 12px; text-decoration: none; }
/* キャッチ（簡単な説明） */
.cc-info-col .woocommerce-product-details__short-description {
	font-size: 13.5px;
	margin-bottom: 18px;
}
/* 価格 */
.cc-info-col .price {
	font-size: 30px !important;
	font-weight: 700;
	color: var(--cc-pink, #F58BB6) !important;
	margin-bottom: 22px !important;
	display: block;
}
.cc-info-col .price del { opacity: .45; font-size: .6em; }
.cc-info-col .price .woocommerce-price-suffix { font-size: 12px; color: #A3928F; font-weight: 400; }

/* ===== カートフォーム ===== */
.cc-product form.cart { margin-bottom: 20px; }
/* バリエーション（色・サイズ）テーブル */
.cc-product form.cart table.variations { margin-bottom: 14px; border: none; }
.cc-product form.cart table.variations th,
.cc-product form.cart table.variations td { border: none; padding: 6px 0; vertical-align: middle; }
.cc-product form.cart table.variations th.label { font-size: 12px; font-weight: 700; color: #5F5054; width: 6em; }
.cc-product form.cart table.variations select {
	border: 1px solid #F0DCE4;
	border-radius: 999px;
	padding: 9px 36px 9px 16px;
	font-size: 13px;
	color: #5F5054;
	background-color: #fff;
	max-width: 100%;
}
.cc-product form.cart table.variations select:focus {
	outline: none;
	border-color: var(--cc-pink, #F58BB6);
	box-shadow: 0 0 0 3px rgba(245,139,182,.18);
}
.cc-product form.cart .reset_variations { font-size: 11px; color: #A3928F; }
.cc-product .woocommerce-variation-price .price { font-size: 22px !important; margin-bottom: 10px !important; }

/* 数量ステッパー（テンプレのJSが −/＋ を注入） */
.cc-product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #F0DCE4;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
	margin-right: 10px;
	vertical-align: middle;
}
.cc-product form.cart .quantity input.qty {
	width: 46px; height: 42px;
	border: none; text-align: center;
	font-size: 15px; color: #5F5054;
	outline: none;
	-moz-appearance: textfield;
	background: transparent;
}
.cc-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.cc-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.cc-product .cc-step {
	width: 36px; height: 42px;
	border: none; background: transparent;
	font-size: 16px; color: var(--cc-ink, #6B5A60);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.cc-step:hover { background: #FDEEF3; color: var(--cc-pink, #F58BB6); }

/* カートに入れるボタン */
.cc-product form.cart .single_add_to_cart_button {
	background: linear-gradient(135deg, var(--cc-pink, #F58BB6), #F7A3C4);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 34px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(245,139,182,.35);
	transition: transform .15s, box-shadow .15s;
	vertical-align: middle;
}
.cc-product form.cart .single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 9px 24px rgba(245,139,182,.45);
}

/* カスタム寸法欄（craftcos.php出力）はwp_head側CSSで済み。フォーム内の間隔だけ補正 */
.cc-product form.cart .cc-custom-size-field { margin: 0 0 16px; }

/* ===== 配送バンド ===== */
.cc-ship-band {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
	margin-bottom: 16px;
}
.cc-ship-row {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 16px;
	border-bottom: 1px dashed #F0DCE4;
	font-size: 12.5px;
}
.cc-ship-row:last-child { border-bottom: none; }
.cc-ship-ic {
	width: 30px; height: 30px; border-radius: 9px;
	background: #FDEEF3;
	display: grid; place-items: center;
	font-size: 15px; flex-shrink: 0;
}
.cc-ship-txt b { display: block; font-size: 12.5px; color: #5F5054; }
.cc-ship-txt small { font-size: 11px; color: #A3928F; }

/* メタ（カテゴリ・タグ） */
/* ★v13（指示書G ⑩）: 商品コード・カテゴリー・タグ（.product_meta）を右の列へ移したので、
   この3行のセレクタに .cc-spec-col を足しました。ここだけ .cc-info-col 限定で書かれていたため、
   移したままだと【この3行がまるごと当たらなくなり】、文字が 11.5px → 14px、リンクが
   ピンク → ブラウザ既定の青、span の display:block も外れて1行につながってしまいます
   （Chromium で実測・納品メモに記載）。値は1つも変えていません。当たる範囲が
   「左の列だけ」→「左の列と右の列」に広がるだけです。 */
.cc-info-col .product_meta,
.cc-spec-col .product_meta { font-size: 11.5px; color: #A3928F; }
.cc-info-col .product_meta a,
.cc-spec-col .product_meta a { color: var(--cc-pink, #F58BB6); text-decoration: none; }
.cc-info-col .product_meta > span,
.cc-spec-col .product_meta > span { display: block; margin-bottom: 3px; }

/* ===== 仕様カード（右カラム） ===== */
.cc-spec-card {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 18px;
	padding: 18px 16px;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
	margin-bottom: 16px;
}
.cc-spec-card h3 {
	font-size: 12.5px; font-weight: 700; color: #5F5054;
	margin: 0 0 12px; padding-bottom: 10px;
	border-bottom: 1px solid #F0DCE4;
	letter-spacing: .05em;
}
.cc-spec-row { padding: 9px 0; border-bottom: 1px dashed #F0DCE4; }
.cc-spec-row:last-of-type { border-bottom: none; }
.cc-spec-k { font-size: 10.5px; color: #A3928F; font-weight: 500; }
.cc-spec-v { font-size: 12px; color: #5F5054; margin-top: 2px; }
.cc-spec-note { font-size: 10px; color: #A3928F; margin: 12px 0 0; line-height: 1.6; }

/* 右カラムに置くアレルギーカードの余白補正 */
.cc-spec-col .cc-allergy-card { margin: 0 0 16px; }

/* ★v2: アレルギーカード内テーブルの崩れ修正
   - テーマ/Wooのデフォルトtable装飾（枠線・背景・パディング）を打ち消し
   - 狭い右カラムでは「項目名の下に内容」の縦積みにしてチップの折返し崩れを防ぐ */
.cc-product .cc-allergy-card table,
.cc-product .cc-allergy-card tr,
.cc-product .cc-allergy-card th,
.cc-product .cc-allergy-card td {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.cc-spec-col .cc-allergy-card table,
.cc-spec-col .cc-allergy-card tbody,
.cc-spec-col .cc-allergy-card tr,
.cc-spec-col .cc-allergy-card th,
.cc-spec-col .cc-allergy-card td {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
}
.cc-spec-col .cc-allergy-card tr { padding: 8px 0; border-bottom: 1px dashed var(--cc-line, #F0DCE4); }
.cc-spec-col .cc-allergy-card tr:last-child { border-bottom: none; }
.cc-spec-col .cc-allergy-card th {
	font-size: 10.5px;
	color: #A3928F;
	font-weight: 500;
	margin-bottom: 5px;
	white-space: normal;
}
.cc-spec-col .cc-allergy-card td { padding: 0; }
/* チップ: 長文でも崩れない角丸ボックス化＋折返し許可 */
.cc-product .cc-allergy-card .cc-chip {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 4px 10px;
	border-radius: 10px;
	font-size: 11px;
	line-height: 1.5;
	white-space: normal;
	word-break: break-word;
}

/* シェア */
.cc-share { padding: 0 4px; }
.cc-share-lbl { font-size: 11px; font-weight: 700; color: #5F5054; margin-bottom: 8px; letter-spacing: .05em; }
.cc-share-icons { display: flex; gap: 8px; }
.cc-share-icons a,
.cc-share-icons button {
	width: 34px; height: 34px; border-radius: 50%;
	background: #FDEEF3; border: none;
	display: grid; place-items: center;
	color: var(--cc-ink, #6B5A60); font-size: 13px;
	text-decoration: none; cursor: pointer;
	transition: background .15s, color .15s;
}
.cc-share-icons a:hover,
.cc-share-icons button:hover { background: var(--cc-pink, #F58BB6); color: #fff; }

/* ===== セクション共通 ===== */
section.cc-section { margin-top: 52px; }   /* ★v19（司令塔パッチ）: .cc-section は <body> にも付く（お店のページの印）→ body の上に 52px の空きが出ていた。section だけに */
body.cc-section { margin-top: 0; }             /* ★v19: 保険（ほかの CSS が body に margin を当てても 0） */
.cc-section-head { text-align: center; margin-bottom: 26px; }
.cc-en-label {
	font-size: 15px; font-weight: 600; letter-spacing: .18em;
	color: var(--cc-gold, #C9A46A);
	display: inline-flex; align-items: center; gap: 12px;
}
.cc-en-label::before,
.cc-en-label::after { content: ""; width: 34px; height: 1px; background: var(--cc-beige, #EBCFB7); }
.cc-ja-label { display: block; font-size: 12px; color: #A3928F; margin-top: 6px; letter-spacing: .05em; }

/* ===== ABOUT ITEM（ポイント3枚） ===== */
.cc-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-points-dots { display: none; }   /* ★v9: ドットはスマホ／タブレットだけ（960px以下で表示） */
.cc-point {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 18px;
	padding: 22px 20px;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
	transition: transform .18s;
}
.cc-point:hover { transform: translateY(-3px); }
.cc-point-icon { font-size: 22px; margin-bottom: 8px; }
.cc-point-num {
	font-size: 11px; font-weight: 700; letter-spacing: .15em;
	color: var(--cc-pink, #F58BB6); margin-bottom: 10px;
}
.cc-point h4 { font-size: 14.5px; color: #5F5054; margin: 0 0 8px; font-weight: 700; }
.cc-point p { font-size: 12px; color: #A3928F; line-height: 1.75; margin: 0; }

/* ===== 商品説明 ===== */
.cc-description {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 18px;
	padding: 26px 28px;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
	font-size: 13.5px;
}

/* ===== ★v11: 商品説明＋素材・アレルギー＋商品仕様 の1枚カード =====
   .cc-product-top（上段グリッド）の直下の子として置き、PCでは3カラムの下に全幅で1行ぶん。
   スマホは1カラムなので、商品情報のすぐ下にそのまま並ぶ。
   中は .cc-about-sec の3ブロック。区切りはブロック間の点線1本だけ。 */
.cc-about-card {
	grid-column: 1 / -1;
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 18px;
	padding: 20px 22px;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
	margin: 0;
}
/* ブロックの間だけ点線。いちばん上のブロックには線も余白も付けない */
.cc-about-card .cc-about-sec + .cc-about-sec {
	margin-top: 10px; padding-top: 12px; border-top: 1px dashed #F0DCE4;   /* ★v16（AB-5）: 14px／14px → 10px／12px */
}
/* 見出し（商品説明／商品仕様／🌸素材・アレルギー） */
.cc-about-card__h {
	font-size: 12.5px; font-weight: 700; color: #5F5054;
	margin: 0 0 8px; padding-bottom: 8px;
	border-bottom: 1px solid #F0DCE4;
	letter-spacing: .05em;
}
.cc-about-card__h4 {
	font-size: 13px; font-weight: 700; color: #5F5054;
	margin: 0 0 8px; letter-spacing: .02em;
}
.cc-about-card .cc-allergy-card__title {
	margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--cc-pink, #F58BB6);
}
/* 商品説明の本文 */
.cc-about-card__desc { font-size: 13.5px; line-height: 1.8; color: #5F5054; }
.cc-about-card__desc > :first-child { margin-top: 0; }
.cc-about-card__desc > :last-child { margin-bottom: 0; }

/* 「ラベル： 値」の1行（素材・タイプ・商品仕様で共通の見た目） */
.cc-about-card .cc-kv {
	display: flex; gap: .35em; margin: 0 0 4px;
	font-size: 13px; line-height: 1.7;
}
.cc-about-card .cc-kv:last-of-type { margin-bottom: 0; }
.cc-about-card .cc-kv > dt {
	flex: 0 0 auto; margin: 0; padding: 0;
	font-size: 13px; font-weight: 500; color: #A3928F; white-space: nowrap;
}
.cc-about-card .cc-kv > dt::after { content: "："; }
.cc-about-card .cc-kv > dd { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; color: #5F5054; }
/* チップ（素材・タイプ）。行に収まるよう上下の余白は持たせない */
.cc-about-card .cc-kv .cc-chip {
	display: inline-block; margin: 0 4px 3px 0; padding: 2px 8px;
	background: var(--cc-ivory, #FBF7F2); border: 1px solid var(--cc-beige, #EFE3D6);
	border-radius: 999px; font-size: 11.5px; line-height: 1.55; color: #6b5a60;
	white-space: normal; word-break: break-word;
	/* ★v12: 1行に収めるため。ラベルとの間・かっこまわりの詰め */
	letter-spacing: 0;
}
/* ★v12: 「素材：」と値の間も少し詰める（チップは自前で余白を持っているため） */
.cc-about-card .cc-kv { gap: .25em; }
/* ★v12: 画面が狭い端末（360px 等）でも素材の1行を保つ。実測で 390/375px は 11.5px で入るが、
   360px だと 3px 足りずに折り返していたため、ここだけさらに詰める。 */
@media (max-width: 374px) {
	.cc-about-card .cc-kv .cc-chip { font-size: 11px; padding: 2px 6px; }
}
.cc-about-card .cc-kv .cc-chip--safe { border-color: var(--cc-lavender, #D9C8F0); background: #f7f2fd; }
.cc-about-card .cc-kv .cc-chip:last-child { margin-right: 0; }
/* 注記 */
.cc-about-card .cc-spec-note,
.cc-about-card .cc-allergy-card__note {
	margin: 10px 0 0; font-size: 11px; color: #A3928F; line-height: 1.7;
}

@media (max-width: 520px) {
	.cc-about-card { padding: 16px 14px; }
}

/* ===== シーン & レビュー ===== */
.cc-two-col { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 20px; align-items: start; }
.cc-two-col--single { grid-template-columns: 1fr; }
.cc-panel {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 18px;
	padding: 22px 20px;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
}
.cc-panel-title {
	font-size: 12px; font-weight: 600; letter-spacing: .12em;
	color: var(--cc-gold, #C9A46A); margin-bottom: 16px;
}
.cc-panel-title span { color: #A3928F; font-size: 11px; font-weight: 400; margin-left: 8px; letter-spacing: 0; }
.cc-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cc-scene { text-align: center; }
.cc-scene-ic {
	width: 100%; aspect-ratio: 1 / 1; border-radius: 14px;
	background: #FDEEF3;
	display: grid; place-items: center;
	font-size: 22px; margin-bottom: 7px;
}
.cc-scene span { font-size: 10.5px; color: #A3928F; }
.cc-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cc-review {
	background: var(--cc-ivory, #FFF9F5);
	border: 1px solid #F0DCE4;
	border-radius: 14px;
	padding: 14px;
}
.cc-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cc-review-av {
	width: 26px; height: 26px; border-radius: 50%;
	background: linear-gradient(135deg, #FBC3D8, var(--cc-lavender, #CDB8EA));
	flex-shrink: 0;
}
.cc-review-name { font-size: 11px; font-weight: 700; color: #5F5054; }
.cc-review-stars { color: var(--cc-gold, #C9A46A); font-size: 10px; letter-spacing: 1px; }
.cc-review p { font-size: 11px; color: var(--cc-ink, #6B5A60); line-height: 1.7; margin: 0; }

/* ===== 関連商品 ===== */
.cc-related { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cc-rel-card {
	background: #fff;
	border: 1px solid #F0DCE4;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(201,164,106,.10);
	transition: transform .18s;
	text-decoration: none;
	display: block;
}
.cc-rel-card:hover { transform: translateY(-4px); }
.cc-rel-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cc-rel-body { padding: 10px; }
.cc-rel-name { font-size: 11px; color: #5F5054; line-height: 1.4; margin-bottom: 4px; }
.cc-rel-price { font-size: 13px; font-weight: 700; color: var(--cc-pink, #F58BB6); }
.cc-rel-price del { opacity: .45; font-size: .85em; margin-right: 4px; }

/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
	.cc-product-top { grid-template-columns: minmax(0, 1fr); } /* ★min-width:0でギャラリー列のはみ出し防止 */
	.cc-product-top { gap: 16px; }             /* ★v8: 1カラムになったら縦の間隔（旧34px＝横並び用の値のままだった） */
	.cc-gallery-col { min-width: 0; }
	.cc-reviews { grid-template-columns: repeat(2, 1fr); }   /* ★v9: .cc-points は下の横スクロールへ */
	.cc-two-col { grid-template-columns: 1fr; }
	/* ★v9: ABOUT ITEM のポイント＝横スクロール（C案：小さめ2枚見せ）。
	   スワイプは CSS の scroll-snap に任せる。ドットはテンプレの JS が作る。 */
	.cc-points {
		display: flex; flex-wrap: nowrap; gap: 12px;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		scrollbar-width: none; padding: 2px 0 12px;
	}
	.cc-points::-webkit-scrollbar { display: none; }
	.cc-points > .cc-point {
		flex: 0 0 82%;                        /* ★v18（AF-10）: clamp(200px, 60%, 300px) → 82%（両どなりが少し見える） */
		box-sizing: border-box;               /* 上の幅に枠と余白を含める（見た目の幅＝82%） */
		scroll-snap-align: center; padding: 14px 16px;   /* ★v18（AF-10）: 16px 14px → 14px 16px */
	}
	.cc-points > .cc-point:hover { transform: none; }   /* 指で触る端末では浮かせない */
	.cc-points > .cc-point p { font-size: 11.5px; }
	.cc-points-dots { display: flex; justify-content: center; gap: 6px; margin: -2px 0 0; }
	.cc-points-dots i {
		display: block; width: 6px; height: 6px; border-radius: 999px; background: #E8D8DE;
		transition: width .15s, background .15s;
	}
	.cc-points-dots i.is-on { width: 16px; background: #b8446a; }
	.cc-related { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.cc-product { padding: 0 14px 30px; }
	/* ★モバイルのみ：メイン画像をフルブリード（左右余白ゼロ・角丸/影なし）。
	   .cc-product の左右padding(14px)を打ち消して画面幅いっぱいに。
	   サムネ列は本文インセットのまま（左から横一列で並ぶ）。 */
	.cc-gallery-col .flex-viewport {
		margin-left: -14px;
		margin-right: -14px;
		border-radius: 0;
	}
	/* ★v14（指示書Q ①）: flexslider が動く前（.flex-viewport がまだ無い）も同じフルブリードにする＝動いた瞬間に横幅が跳ねない */
	.cc-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		margin-left: -14px !important;     /* Woo 標準の __wrapper の margin:0（詳細度が高い）に勝つため */
		margin-right: -14px !important;
	}
	.cc-gallery-col .woocommerce-product-gallery__image {
		border-radius: 0;
		box-shadow: none;
	}
	.cc-info-col .product_title { font-size: 21px; }
	.cc-info-col .price { font-size: 25px !important; }
	.cc-reviews { grid-template-columns: 1fr; }   /* ★v9: .cc-points は 960px 以下の横スクロールのまま */
	.cc-related { grid-template-columns: repeat(2, 1fr); }
	/* 購入ボタン列をスマホで押しやすく */
	.cc-product form.cart .single_add_to_cart_button {
		display: block;
		width: 100%;
		margin-top: 10px;
	}
	.cc-product form.cart .quantity { margin-right: 0; }
	/* ★v3(20260812 司令塔・実機FB): サムネ56px・タイトル上の空間と価格の間を詰める */
	.cc-gallery-col .woocommerce-product-gallery .flex-control-thumbs img { width: 56px !important; height: 56px !important; }
	.cc-gallery-col .woocommerce-product-gallery .flex-control-thumbs { gap: 6px; margin: 6px 0 0; }
	.cc-product-top { gap: 10px; }             /* ★v8: 1カラム時の縦の間隔（v3で34px→14px、v8で10px） */
	.cc-info-col .product_title { margin: 0 0 6px; }
	.cc-info-col .price { margin: 2px 0 14px !important; }
}

/* ═══════════════════════════════════════════════
 * ★v4: ホバーズーム完全停止（表示側の保険・craftcos.php v44とセット）
 * ═══════════════════════════════════════════════ */
.woocommerce-product-gallery .zoomImg { display: none !important; }
.cc-gallery-col .woocommerce-product-gallery__image img,
.cc-gallery-col .woocommerce-product-gallery__image a img {
	height: auto !important;          /* zoom.js等が入れるインラインheightに勝つ＝ゆがみ防止 */
	object-fit: contain;
}
.cc-gallery-col .woocommerce-product-gallery__image a { cursor: pointer !important; }

/* ═══════════════════════════════════════════════
 * ★v5: シェアボタン（LINE公式アイコン・ガイドライン準拠）
 * ═══════════════════════════════════════════════ */
.cc-share-icons a.cc-share-line {
	background: transparent;          /* 囲みの丸を消して公式アイコンをそのまま */
	padding: 0; overflow: hidden;
	border-radius: 9px;               /* 角丸は公式アイコン自身の形（正方形比率のまま） */
}
.cc-share-icons a.cc-share-line img { width: 34px; height: 34px; display: block; }
.cc-share-icons a.cc-share-line:hover { background: transparent; opacity: .85; }  /* 色をかぶせない */
.cc-share-icons .cc-copy-url svg { display: block; }

/* ═══════════════════════════════════════════════
 * ★v6: URLコピーボタンの中央そろえ（テーマのbutton装飾を打ち消す）
 * ═══════════════════════════════════════════════ */
.cc-share-icons button.cc-copy-url {
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	text-indent: 0 !important;
	line-height: 1 !important;
	font-size: 0 !important;          /* 中身はSVGのみ＝行ボックスの影響を消す */
	appearance: none; -webkit-appearance: none;
}
.cc-share-icons button.cc-copy-url svg { display: block; width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════
 * ★v7: Xの字だけ少し大きく（丸のサイズは変えない）
 * ═══════════════════════════════════════════════ */
.cc-share-icons a[aria-label="Xでシェア"] {
	font-size: 17px;
	line-height: 1;
}

/* ═══════════════════════════════════════════════
 * ★v15（指示書Z Z-4）: この形の別シリーズ／あわせておすすめ
 * ═══════════════════════════════════════════════ */
/* ★パーツ（cc-make-A〜D）のカードだけ、写真の上に作り方の色の線（img は無変更・上の角だけ .cc-rel-card に合わせる） */
.cc-rel-img[class*="cc-make-"] { position: relative; }
.cc-rel-img[class*="cc-make-"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 4px solid var(--mc);
	border-radius: 13px 13px 0 0;
	pointer-events: none;
}
.cc-rel-img.cc-make-A { --mc: var(--cc-make-A, #9ED6BF); }
.cc-rel-img.cc-make-B { --mc: var(--cc-make-B, #C3B1EC); }
.cc-rel-img.cc-make-C { --mc: var(--cc-make-C, #F6BE98); }
.cc-rel-img.cc-make-D { --mc: var(--cc-make-D, #9FC6EC); }

@media (max-width: 560px) {
	/* 2段とも横スクロール1列・スクロール前に3つ＋4つ目が少しのぞく */
	.cc-related,
	.cc-series {
		display: flex;
		overflow-x: auto;
		gap: 10px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin: 0 -14px;
		padding: 0 14px 4px;
		scroll-padding: 0 14px;
	}
	.cc-related::-webkit-scrollbar,
	.cc-series::-webkit-scrollbar { display: none; }
	.cc-related .cc-rel-card,
	.cc-series .cc-rel-card {
		flex: 0 0 calc((100% - 20px) / 2.85);   /* ★v16（AB-4）: / 3.15 → / 2.85（2枚＋3枚目が半分ちょっと・色の丸が入る幅） */
		min-width: 0;
		scroll-snap-align: start;
	}
	.cc-related .cc-rel-card:hover { transform: none; }   /* 指で触る端末では浮かせない（横スクロールの中で上が切れない） */
	.cc-rel-img[class*="cc-make-"]::after { border-width: 3.5px; }
}

/* ═══════════════════════════════════════════════
 * ★v16（指示書AB）
 * ═══════════════════════════════════════════════ */

/* ── AB-1: カートフォームのサイズの段のしましま・加工の箱の白を消す（どの幅でも・.cc-product の中だけ） ──
   テーマ Hello Elementor の「table tbody>tr:nth-child(odd)>td/th を灰色」「行に触れたら灰色」を打ち消す。 */
.cc-product form.cart table.variations tr > th,
.cc-product form.cart table.variations tr > td,
.cc-product form.cart table.variations tr:hover > th,
.cc-product form.cart table.variations tr:hover > td { background: transparent !important; }
.cc-product form.cart .cc-co.cc-co-js { background: transparent; }

/* ── AB-1: サイズを選んだあとの値段（右の列へ移ったので .cc-info-col .price の代わり）。値は今と同じ ── */
.cc-spec-col .price {
	font-weight: 700;
	color: var(--cc-pink, #F58BB6) !important;
	display: block;
}
.cc-spec-col .price del { opacity: .45; font-size: .6em; }
.cc-spec-col .price .woocommerce-price-suffix { font-size: 12px; color: #A3928F; font-weight: 400; }

/* ── AB-1: PC（961px 以上）だけ、右の列のカートフォームを白いカードに ── */
@media (min-width: 961px) {
	.cc-spec-col form.cart {
		background: #fff;
		border: 1px solid var(--cc-line, #F0DCE4);
		border-radius: 18px;
		box-shadow: 0 6px 20px rgba(201,164,106,.08);
		padding: 14px 18px 18px;
		margin-bottom: 0 !important;               /* 下の「✉ 問い合わせる」との間はリンク側の margin-top 10px だけ。★v17: Woo の「.woocommerce div.product form.cart { margin-bottom:2em }」（32px）に負けていたので !important */
	}
	.cc-spec-col form.cart table.variations { margin-bottom: 6px; }
}

/* ── AB-4: 別シリーズ・あわせておすすめ の色の丸（名前の下・価格の上） ── */
.cc-rel-body .cc-cw-row { margin-top: 0; margin-bottom: 5px; }

/* ── AB-5: 商品説明の下の余白 ──
   the_content の最後に空のシェア用の箱（.xs_social_share_widget・プラグイン由来）が付くので、
   :last-child がその箱になり、本当の最後の段落の margin（14px）が残っていた。箱を隠し、その手前の要素も 0 にする。 */
.cc-about-card__desc > :last-child { margin-bottom: 0; }
.cc-about-card__desc .xs_social_share_widget { display: none; }
.cc-about-card__desc > :has(+ .xs_social_share_widget:last-child) { margin-bottom: 0; }

/* ═══════════════════════════════════════════════
 * ★v18（指示書AF）
 * ═══════════════════════════════════════════════ */

/* ── AF-3: サイズを選んだら左の大きな値段を差し替える（JS は buybar v28・769px 以上だけ動く） ──
   Woo の price_html は <span class="price"> で包まれてくる → .cc-info-col .price（ブロック・30px・下 22px）が中にも当たらないように */
.cc-info-col .price .price {
	display: inline !important;
	font-size: inherit !important;
	margin: 0 !important;
	color: inherit !important;
}
@media (min-width: 769px) {
	.cc-info-col .price .cc-price-size {
		display: inline-block; margin-left: 10px;
		font-size: 13px; font-weight: 800; line-height: 1.5; color: #fff;
		background: #E9A3BE; border-radius: 999px; padding: 3px 10px; vertical-align: middle;
	}
	.cc-info-col .price.cc-price--sel { animation: cc-pf .5s ease; }
	@keyframes cc-pf { from { background: #FDE7EF; } to { background: transparent; } }
}

/* ── AF-5: 「✉ この商品について問い合わせる」はシェアの下・左寄せ（どの幅でも） ── */
.cc-info-col .cc-product-inquiry { margin: 10px 0 0; text-align: left; }

/* ── AF-1／AF-3／AF-4: PC（961px 以上） ── */
@media (min-width: 961px) {
	/* AF-1: 右の列を下まで（商品説明の横）・商品説明は左2列ぶん */
	.cc-product-top { grid-template-rows: auto auto; }
	.cc-gallery-col { grid-column: 1; grid-row: 1; }
	.cc-info-col    { grid-column: 2; grid-row: 1; }
	.cc-spec-col    { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
	.cc-about-card  { grid-column: 1 / 3; grid-row: 2; }
	.cc-spec-col form.cart { position: -webkit-sticky; position: sticky; top: 82px; }   /* ヘッダー（sticky・70px）＋12px */
	body.admin-bar .cc-spec-col form.cart { top: 114px; }   /* 管理者でログイン中だけ（上の黒い管理バー 32px ぶん下げる＝ヘッダーも 32px 下がる） */

	/* AF-3: カードの中には値段を出さない（左の大きな値段が変わる） */
	.cc-spec-col .woocommerce-variation-price { display: none; }

	/* AF-4(a): カラー＝1行目「カラー　色名」・2行目に丸（HTML の順番はそのまま・grid の位置だけ） */
	.cc-product .cc-spec-col .cc-pf-colors {
		display: grid; grid-template-columns: auto 1fr; gap: 8px 8px; align-items: baseline; margin: 0 0 14px;
	}
	.cc-product .cc-spec-col .cc-pf-colors > * { grid-column: 1 / -1; }   /* 丸・「全色売り切れ」など（13色以上の系統チップ・「ぜんぶ見る」も）は2行目から下に全幅で */
	.cc-product .cc-spec-col .cc-pf-label { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 800; color: #4a3f42; }
	.cc-product .cc-spec-col .cc-pf-colorname { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 800; color: #b8446a; }
	.cc-product .cc-spec-col .cc-pf-colorname.cc-pf-colorname--empty { font-size: 12px; font-weight: 400; color: #A3928F; }
	.cc-product .cc-spec-col .cc-pf-swatches { grid-column: 1 / -1; }

	/* AF-4(b): 加工の見出しの字 */
	.cc-product .cc-spec-col #cc-co .cc-co-h.cc-co-sech { font-size: 13px; color: #4a3f42; margin: 0 0 8px; }
	.cc-product .cc-spec-col #cc-co .cc-co-rowval { color: #b8446a; font-weight: 800; }

	/* AF-4(c): 加工のカード（行1＝data-rail="opt" だけ）をカードの幅いっぱいに均等。中身・枚数・押した動きはそのまま */
	.cc-spec-col #cc-co .cc-co-hs[data-rail="opt"] { display: flex; }
	.cc-spec-col #cc-co .cc-co-hs[data-rail="opt"] > button.cc-co-card { flex: 1 1 0; min-width: 84px; }

	/* AF-4(d): 数量とボタンを1行に。
	   この箱の中には Woo のフックで カラー・加工・数量割引の合計 なども入るので、それらは 100% 幅のまま上に積む。
	   1行に並ぶのは .quantity と ボタンだけ（order で数量割引の合計＝数量の直後に出る箱 を数量の上へ）。 */
	.cc-product .cc-spec-col form.cart .woocommerce-variation-add-to-cart {
		display: flex; flex-wrap: wrap; column-gap: 8px; align-items: center;
	}
	.cc-product .cc-spec-col form.cart .woocommerce-variation-add-to-cart > * { flex: 0 0 100%; min-width: 0; }
	.cc-product .cc-spec-col form.cart .woocommerce-variation-add-to-cart > .quantity { flex: none; order: 1; margin: 0 !important; }
	.cc-product .cc-spec-col form.cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button { flex: 1 1 auto; order: 2; margin: 0 !important; }
	.cc-product .cc-spec-col form.cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button ~ * { order: 3; }
	.cc-product .cc-spec-col form.cart .single_add_to_cart_button {
		height: 44px !important; padding: 0 16px !important; font-size: 14px !important; line-height: 1 !important;
		box-sizing: border-box; float: none;
	}
	.cc-product .cc-spec-col form.cart .quantity { flex: none; margin-right: 0; }

	/* AF-4(e): まとまりの間 14px（サイズのボタンの下は buybar v28 の .cc-bb-chips） */
	.cc-product .cc-spec-col #cc-co .cc-co-sec { margin-bottom: 14px; }
}

/* ── AF-9: スマホ（560px 以下）のパンくずを1行に（はみ出た商品名は …） ── */
@media (max-width: 560px) {
	.cc-breadcrumb { font-size: 11px; padding: 10px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.cc-bc-sep { margin: 0 3px; }
}

/* ── AF-10: スマホ・タブレット（960px 以下）の ABOUT ITEM の上を詰める（PC の 52/26/10 はそのまま） ── */
@media (max-width: 960px) {
	section.cc-section { margin-top: 32px; }   /* .cc-section は body にも付くので section に限る */
	.cc-section-head { margin-bottom: 14px; }
	.cc-point-num { margin-bottom: 6px; }
}

/* ═══════════════════════════════════════════════
 * ★v20（指示書AH AH-1）: PC（961px 以上）のギャラリーの小さい写真を「1段に5枚・入りきらない分は下の段」
 *   上の既存の規則（flex・横一列・68px）はそのまま。961px 以上だけ grid で上書き。
 *   960px 以下（横一列・56px・スワイプ）には当たらない。
 * ═══════════════════════════════════════════════ */
@media (min-width: 961px) {
	.cc-gallery-col .flex-control-thumbs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 8px;
		overflow: visible;
	}
	.cc-gallery-col .woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; min-width: 0; }
	.cc-gallery-col .woocommerce-product-gallery .flex-control-thumbs img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		display: block;
		box-sizing: border-box;   /* 2px の透明な枠（選択中はピンク）を 1マスの中に収める */
	}
}

/* ═══════════════════════════════════════════════
 * ★v21（§AJ・指示書AJ AJ-2／AJ-3）✂️ セミオーダー（長さ・厚み）
 *   正① v22 の <style> をそのまま写したもの。部品はどれも buybulk v21 の ccSemi がセミオーダー ON の商品にだけ作る。
 * ═══════════════════════════════════════════════ */
.ccso-ck{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:.92rem;font-weight:800;color:#5a464e;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.ccso-ck input{width:20px;height:20px;margin:0;accent-color:#e75c92;flex:none}
.ccso-ck small{font-size:.74rem;font-weight:800;color:#a98}
.cc-bb-chipstrip.ccso-lock .cc-bb-chip{opacity:.35;pointer-events:none}
.cc-bb-chipstrip.ccso-lock .cc-bb-chip.is-on{opacity:1;border-style:dashed !important}
.cc-bb-chipstrip.ccso-lock.ccso-ext .cc-bb-chip.is-on{opacity:.35;border-style:solid !important}
.ccso-box{margin:-4px 0 14px;padding:10px 12px 12px;border:1.5px solid #f0dfe6;border-radius:12px;background:#fffafc}
.ccso-box[hidden]{display:none}
.ccso-lead{margin:0 0 2px;font-size:.74rem;color:#a98;line-height:1.5}
.ccso-in{position:relative;display:inline-block}
.ccso-f{display:flex;align-items:center;gap:6px;flex-wrap:nowrap !important}
.ccso-f .ccso-res{flex:1;min-width:0;margin:0 0 0 2px;font-size:.7rem;line-height:1.45}
.ccso-k{display:block;margin:10px 0 5px;font-size:.82rem;font-weight:700;color:#7a5563}
.ccso-k small{font-weight:600;font-size:.66rem;color:#a98;margin-left:4px;white-space:nowrap;display:inline-block}
.ccso-f input{font:inherit;font-size:16px;width:90px;padding:7px 10px;border:1.5px solid #f0dfe6;border-radius:10px;text-align:right;background:#fff;color:#5a464e;box-shadow:none}
.ccso-f .ccso-in input{width:118px;padding-right:38px}
.ccso-f input:focus{outline:none;border-color:#e75c92}
.ccso-f input.is-bad{border-color:#e7a3a3;background:#fff6f6}
.ccso-f b{font-size:.9rem;color:#5a464e}
.ccso-f small{font-size:.72rem;color:#a98}
.ccst{position:absolute;right:1.5px;top:1.5px;bottom:1.5px;width:28px;display:flex;flex-direction:column;border-left:1px solid #f0dfe6;border-radius:0 8.5px 8.5px 0;overflow:hidden}
.ccst button,.ccst button:hover,.ccst button:focus,.ccst button:active{flex:1;display:grid;place-items:center;width:100%;min-height:0;margin:0;padding:0;border:0 !important;border-radius:0;background:#fff5f8 !important;color:#c97a8e !important;font-size:9px;line-height:1;cursor:pointer;box-shadow:none !important;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.ccst button+button{border-top:1px solid #f0dfe6 !important}
.ccst button:active{background:#ffe3ee !important}
.ccso-guide{display:inline-block;margin:3px 0 0;font-size:.78rem;font-weight:700;color:#b8446a !important;text-decoration:underline;text-underline-offset:3px}
.ccso-res{margin:4px 0 0;font-size:.76rem;font-weight:800;line-height:1.5}
.ccso-res:empty{display:none}
.ccso-res.is-ok{color:#2e9e6b}.ccso-res.is-ng{color:#c0392b}
.ccso-ref{margin-top:10px;font-size:.74rem;color:#7a5563}
.ccso-ref summary{cursor:pointer;font-weight:800;color:#b8446a}
.ccso-ref table{width:100%;border-collapse:collapse;margin-top:6px}
.ccso-ref td{padding:3px 6px;border-bottom:1px solid #f6e8ee;border-top:0;border-left:0;border-right:0;background:none}
.ccso-ref td:last-child{text-align:right}
.ccso-ref td[colspan]{text-align:left !important;padding-top:8px;font-weight:800}
.ccso-ref tr.is-on td{background:#fdeff4 !important;font-weight:800;color:#b8446a}
.ccso-warn{margin:10px 0 0;font-size:.7rem;color:#a98;line-height:1.6}
/* 「選んだもの」の行を1行に収める（390px で1行・375px は2行でも可）＝セミオーダー ON の商品だけ */
form.cart.ccso-ready .cc-bbulk-row{column-gap:4px !important}
form.cart.ccso-ready .cc-bbulk-row .cc-bbulk-del{width:20px !important;min-width:20px !important}
form.cart.ccso-ready .cc-bbulk-row .cc-bbulk-step{width:21px !important;min-width:21px !important}
form.cart.ccso-ready .cc-bbulk-row .cc-bbulk-num{width:20px !important}
form.cart.ccso-ready .cc-bbulk-row .cc-bbulk-name{letter-spacing:-.01em}
/* PC：合計（本体＋オプション）の下の内訳・理由（正① の PC の見え方） */
.ccso-pcsum{margin:6px 2px 0}
.ccso-pcsum[hidden],.ccso-pcerr[hidden]{display:none}
.ccso-pcsum .ccso-note{display:block;margin:2px 0 0;font-size:11px;font-weight:700;color:#8a7BA8;line-height:1.4}
.ccso-pcsum .ccso-note em{font-style:normal;font-weight:400;color:#BFAEB4;font-size:10.5px;margin-left:2px}
.ccso-pcsub{margin:4px 0 0;font-size:11px;font-weight:700;color:#A3928F;line-height:1.5}
.ccso-pcerr{margin:6px 2px 0;font-size:12px;font-weight:800;color:#c0392b;line-height:1.5}
.single_add_to_cart_button.ccso-gated{background:#ded7da!important;border-color:#ded7da!important;color:#8c8288!important;cursor:not-allowed!important;box-shadow:none!important;opacity:1!important}

/* ★v22（指示書AJ 検品の直し）: 長さの右の文の「値段は S（〜3.5cm）」「の ¥170」を1かたまりに（「〜」の後ろで改行しない） */
.ccso-nw{white-space:nowrap}

/* ★v23（指示書AK AK-6）: 商品ページの「🎀 同色まとめ割引の対象 ›」（craftcos.php v70 §36・正① タブ④ と同じ） */
.cc-samebadge{margin:-4px 0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.cc-samebadge a{display:inline-flex;align-items:center;gap:4px;background:#FFF0F5;border:1px solid #F5C9D9;color:#b8446a !important;font-size:13px;font-weight:800;border-radius:999px;padding:4px 12px;text-decoration:none}
.cc-samebadge a span{font-size:15px;line-height:1}
.cc-samebadge small{font-size:12px;color:#A3928F;font-weight:600}
@media(max-width:768px){.cc-samebadge{margin:-2px 0 14px}}

/* ═══════════════════════════════════════════════
 * ★v24（司令塔パッチ 20261005）: 「戻る」で戻った直後に商品写真が10倍に見えるのを防ぐ
 *   flexslider が1枚ずつの幅を入れる前でも、1枚は .flex-viewport の幅を超えない。
 * ═══════════════════════════════════════════════ */
.cc-gallery-col .flex-viewport { container-type: inline-size; }
.cc-gallery-col .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	max-width: 100vw;                 /* 古い端末用（cqw が分からないとき） */
	max-width: 100cqw;                /* ＝ .flex-viewport の幅 */
}
/* 幅が入る前（flexslider がまだ float を入れていない間）だけ、2枚目以降は隠す。入ったあとは inline の display:block が勝つ */
.cc-gallery-col .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child):not([style*="float"]) {
	display: none;
}

/* ═══════════════════════════════════════════════
 * ★v25（指示書BV BV-1 20261018）: 「この形の別シリーズ」「合わせておすすめ」のカード＝枠なし（一覧 craftcos-archive.css v21 と同じ形）
 *   白いカード・線・影をやめて、写真の角だけ丸く。★パーツの線は四すみとも角丸。名前の最後のかっこは途中で折らない。
 * ═══════════════════════════════════════════════ */
.cc-rel-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.cc-rel-img { border-radius: 16px; overflow: hidden; }
.cc-rel-body { padding: 8px 4px 0; }
.cc-rel-img[class*="cc-make-"]::after { border-radius: 15px; }
@media (max-width: 560px) {
	.cc-rel-img { border-radius: 12px; }
	.cc-rel-body { padding: 6px 2px 0; }
	.cc-rel-img[class*="cc-make-"]::after { border-radius: 11px; }
}
.cc-rel-nb { white-space: nowrap; }

/* ═══════════════════════════════════════════════
 * ★v26（指示書CN CN-5 20261031）: 商品ページの横ずれの守り。iPhone の Safari だけでページが横にわずかに広くなる現象への保険。
 *   原因の要素は未特定のため、ページが横に動かないようにする守りだけ足す（既存の行は1行も変更なし）。
 * ═══════════════════════════════════════════════ */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }