/**
 * 商品詳細ページ（WooCommerce）専用スタイル
 *
 * WHY: 要件定義書 §7-3 の LP 風テンプレート（②特徴 ③使用シーン ④使い方
 *      ⑤仕様表 ⑥FAQ ⑧ハウスクリーニング導線）と、商品ページ用の特商法
 *      表示（§8・DSK-009）の見た目をここに書く。①商品ファーストビュー
 *      （画像・色選択・カートボタン）は WooCommerce 標準のまま触らないが、
 *      カートボタン直下の信頼バッジ・SP下部固定CTAは①の一部として追加する。
 *      2026-09-28 のクライアント指示で、商品名（h1.product_title）・価格
 *      （.price）の見た目（大きさ・色・下線）も上書きし、訴求ボックス・
 *      特長3カード（.ds-product-pitch* / .ds-product-highlights*）を新規に
 *      追加した（マークアップは WooCommerce 標準要素の上書き＋
 *      inc/product-lp.php からの新規フック出力で、既存の色選択・カート
 *      ボタン・注記は変更していない）。
 *      色・spacing は tokens.css の --ds-* を使い、直値でハードコード
 *      しない。クラス接頭辞は ds-product-（front.css / blog.css と同一
 *      ファイルに同居しないため独立した名前空間）。ただし②〜⑥・⑧の
 *      見出しはトップページと共通の部品（template-parts/front/section-head.php）
 *      を呼び出しており、その見た目（.ds-heading・.ds-section-head 系）は
 *      front.css にある。商品ページでも front.css を追加 enqueue する
 *      （functions.php 側）ため、ここで複製・上書きしない。
 *      セクション背景はトップページと同じ2色（白／--ds-bg-warm）のみで
 *      塗り分ける（tokens.css の「セクション背景の使い分け」参照。
 *      --ds-bg-soft のグレーは商品ページでは使わない）。
 *      is_product() でのみ読み込む（functions.php 側で判定）。
 */

/* ==========================================================================
   共通レイアウト（②〜⑥・特商法表示・⑧が共有）
   ========================================================================== */

.ds-product-section {
	/* WHY: 親テーマ Kadence の woocommerce.min.css は div.product 直下の
	   div.images（float:left; width:48%）/ div.summary（float:right;
	   width:48%; clear:none）を 720px 以上（@media max-width:719px 未満）
	   で float レイアウトにしている（720px 以上は clear されない）。
	   woocommerce_after_single_product_summary は div.product の中で
	   summary の直後の兄弟要素として出力されるため、フックで最初に出る
	   ブロック（②この商品の特徴）が float の隣（画像の右側の狭い残り
	   幅）に回り込み、grid 列やテキストが極端に潰れて縦積みになっていた。
	   div.product 自体には :after{clear:both} の clearfix があるが、
	   これは div.product の高さ崩れを防ぐだけで、内部の後続ブロック要素の
	   回り込みは止めない。②〜⑧すべてが共有するこのクラスに clear: both
	   を付け、どのブロックが先頭に来ても float の下まで確実にクリアする。
	   719px 以下は Kadence 側で images/summary とも float:none; width:100%
	   に切り替わるため、この clear は無害（効果なし）。 */
	clear: both;
	padding: 64px 0;
}

.ds-product-container {
	max-width: var(--ds-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

@media (max-width: 767px) {
	.ds-product-section {
		padding: 40px 0;
	}
}

/* ==========================================================================
   共通見出し部品（.ds-section-head）: マスコット画像の詳細度打ち消し
   WHY (2026-08-23): 親テーマ Kadence の woocommerce.min.css が商品ページ
   全体に `.woocommerce img, .woocommerce-page img { max-width:100%;
   height:auto }`（詳細度 0,1,1）を効かせている。front.css の
   `.ds-section-head__mascot-img { height:100%; width:auto }` はクラス1つ
   （詳細度 0,1,0）で負けるため、height:auto が優先されてマスコットが
   原寸相当（画面幅いっぱい）まで拡大し、見出しカプセルと本文に重なって
   いた（375px 実機で確認済み）。front.css は変更禁止のため、商品ページ
   側だけクラス2つ（0,2,0）に上げて打ち消す。`.woocommerce` 系クラスへは
   依存させない（WooCommerce のクラス名が変わっても効くようにするため）。
   ========================================================================== */

.ds-section-head__mascot .ds-section-head__mascot-img {
	width: auto;
	height: 100%;
}

/* ==========================================================================
   ① 購入エリア: 商品名・価格・訴求ボックス・特長3カード
   WHY (2026-09-28): クライアント参考デザインの指示。商品名・価格は
   WooCommerce 標準要素（h1.product_title / .price）の見た目だけを上書きし、
   マークアップは変えない。訴求ボックス・特長3カードは
   inc/product-lp.php kdc_render_product_pitch_and_highlights() が
   woocommerce_single_product_summary の優先度15（価格の直後・既存の
   短い説明の手前）に出す新規ブロック。
   ========================================================================== */

.summary .product_title {
	margin: 0 0 12px;
	color: var(--ds-fg);
	font-family: var(--ds-font-family-heading);
	font-size: var(--ds-font-3xl);
	font-weight: 800;
	line-height: 1.35;
	/* WHY: 「スポン/ジ」の語中改行を防ぎ、商品名の半角スペース位置でだけ折り返す（2026-09-28）。 */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* WHY: 「下に短いオレンジの下線」。見出し全幅ではなく固定48pxの短い線にする。 */
.summary .product_title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 12px;
	background-color: var(--global-palette2);
	border-radius: var(--ds-radius-sm);
}

@media (max-width: 767px) {
	.summary .product_title {
		/* WHY: tokens.css の「h1 SP」既定値（32px）。実測でも2行程度に収まる。 */
		font-size: var(--ds-font-2xl);
		margin-bottom: 10px;
	}
}

/*
 * WHY: 白文字ボタンと違い、ここは白背景に載る文字のコントラストが要件
 *      （通常文字 4.5:1）。--global-palette2（#D63F00・白地 4.60:1）を使う。
 *      「(税込)」は inc/woocommerce.php kdc_append_tax_included_price_suffix()
 *      が足す .ds-price-tax-suffix を小さく添えるだけにする。
 */
.summary .price {
	display: block;
	margin: 0 0 20px;
}

.summary .price .woocommerce-Price-amount {
	color: var(--global-palette2);
	font-family: var(--ds-font-family-heading);
	font-size: clamp(28px, 6vw, 34px);
	font-weight: 800;
}

.summary .price .ds-price-tax-suffix {
	margin-left: 6px;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
	font-weight: 400;
}

/*
 * WHY: 淡いオレンジ/クリーム背景の角丸ボックス。見出しには黄色マーカーの
 *      下線風効果（background-image のグラデーションをテキスト下部だけに
 *      敷く定番手法）を使う。display:inline にして、マーカーの幅を
 *      テキストそのものの幅に合わせる（ボックス全幅に敷かない）。
 */
.ds-product-pitch {
	margin: 0 0 20px;
	padding: 20px 20px 22px;
	background-color: var(--ds-bg-warm);
	border-radius: var(--ds-radius-lg);
}

.ds-product-pitch__heading {
	display: inline;
	margin: 0;
	color: var(--global-palette2);
	font-weight: 800;
	font-size: var(--ds-font-lg);
	background-image: linear-gradient(transparent 62%, #FFE066 62%);
	background-repeat: no-repeat;
}

.ds-product-pitch__body {
	margin: 10px 0 0;
	color: var(--ds-fg-body);
	font-size: var(--ds-font-base);
	line-height: 1.8;
}

/*
 * WHY: 「特長3カード」。既存②この商品の特徴（.ds-product-feature__item）と
 *      同じ白カード・薄枠・角丸の言語を流用しつつ、こちらは summary 内の
 *      狭い幅に収まる小さめサイズにする。SP でも3列を維持する（クライアント
 *      指示）ため、②のように 767px 以下で1列へ崩す @media は入れない。
 */
.ds-product-highlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 20px;
}

.ds-product-highlights__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 6px 12px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 16px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
	text-align: center;
}

.ds-product-highlights__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--ds-bg-warm);
	color: var(--ds-cta-ink);
}

.ds-product-highlights__text {
	margin: 0;
	color: var(--ds-fg-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

@media (max-width: 480px) {
	.ds-product-highlights {
		gap: 6px;
	}

	.ds-product-highlights__item {
		padding: 12px 4px 10px;
	}

	.ds-product-highlights__icon {
		width: 38px;
		height: 38px;
	}

	.ds-product-highlights__text {
		font-size: 11px;
	}
}

/* ==========================================================================
   ① 購入エリア: 信頼バッジ（カートボタン直下）
   WHY: 「送料無料」「返品対応OK」は事実と違うため書かない（inc/product-lp.php
   kdc_render_product_trust_badges() 参照）。アイコンは新規画像を作らず、
   FVの受話器アイコン（.ds-fv__btns .ds-btn-tel::before）と同じ
   mask + currentColor 方式で用意する。
   ========================================================================== */

.ds-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.ds-product-badges__item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: var(--ds-radius-md);
}

.ds-product-badges__icon {
	display: block;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--ds-cta-ink);
	background-color: currentColor;
}

.ds-product-badges__item--shipping .ds-product-badges__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='10'/%3E%3Cpath d='M14 9.5h4.5L22 13v3h-8z'/%3E%3Ccircle cx='6.5' cy='18.5' r='1.8'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='10'/%3E%3Cpath d='M14 9.5h4.5L22 13v3h-8z'/%3E%3Ccircle cx='6.5' cy='18.5' r='1.8'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ds-product-badges__item--japan .ds-product-badges__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='3' x2='5' y2='21'/%3E%3Cpath d='M5 4h13l-3.5 4.5L18 13H5z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='3' x2='5' y2='21'/%3E%3Cpath d='M5 4h13l-3.5 4.5L18 13H5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ds-product-badges__item--exchange .ds-product-badges__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 0 1 14.5-6'/%3E%3Cpolyline points='18 2 18 6.5 13.5 6.5'/%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-14.5 6'/%3E%3Cpolyline points='6 22 6 17.5 10.5 17.5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 0 1 14.5-6'/%3E%3Cpolyline points='18 2 18 6.5 13.5 6.5'/%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-14.5 6'/%3E%3Cpolyline points='6 22 6 17.5 10.5 17.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ds-product-badges__text {
	display: block;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-xs);
	line-height: 1.5;
}

.ds-product-badges__text strong {
	display: block;
	color: var(--ds-fg);
	font-size: var(--ds-font-sm);
	font-weight: 700;
}

/*
 * WHY (2026-08-23): モックは横3列で描かれているが、モックの文言はダミーで
 * 短く、実データ（例: `_kdc_shipping_note` の「全国一律 185円（クリック
 * ポスト）」）はもっと長い。375px 幅で横3列のまま（各バッジ 1/3 幅）だと
 * 収まらず、「不良品交換」「8日以内」が1文字ずつ縦に折り返って読めなく
 * なっていた（375px 実機で確認）。767px 以下は縦積みの1列にし、バッジ内は
 * アイコン（左）→ラベル・値（右）の横組みのまま維持して、テキストが
 * 通常の折り返しで読める幅を確保する。768px 以上は横3列のまま変更しない。
 */
@media (max-width: 767px) {
	.ds-product-badges {
		flex-direction: column;
	}

	.ds-product-badges__item {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   ① 購入エリア: 配送エリア・数量上限の注記（信頼バッジの下）
   WHY (2026-09-28): 販売条件（東京都内のみ・1回の合計10セットまで）を購入前に
   読めるよう、控えめな注記として出す（inc/order-rules.php
   kdc_render_product_order_notes()）。カート・注文手続きページの同じ注記は
   page.css 側。クラス名はカート側と共通の .ds-order-notes。
   「※」は CSS で付け、読み上げには含めない（代替テキスト構文に対応しない
   ブラウザは 1 行目の宣言で「※」を表示する）。
   ========================================================================== */

.ds-order-notes {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
	line-height: 1.7;
}

.ds-order-notes__item::before {
	content: "※";
	content: "※" / "";
}

/* ==========================================================================
   ② この商品の特徴（3列）
   ========================================================================== */

.ds-product-feature {
	background-color: var(--ds-bg-warm);
}

.ds-product-feature__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

/*
 * WHY: front.css の .ds-menu__item / .ds-flow__card と同じ言語（薄いオレンジ枠・
 *      角丸22px・2層の影）のカードにする（ユーザー指示）。front.css の
 *      クラスは流用せず、同じ数値を ds-product- 名前空間で複製する。
 */
.ds-product-feature__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px 28px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 22px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
	text-align: center;
}

/*
 * WHY (2026-08-23): セレクタをクラス2つ（.ds-product-feature__item
 * .ds-product-feature__image）にしているのは、マスコット画像と同じ理由
 * （親テーマ .woocommerce img の height:auto、詳細度0,1,1）に単一クラス
 * （0,1,0）で負けて正方形が崩れるのを防ぐため。単純に
 * .ds-product-feature__image 単体では詳細度で負ける。
 */
.ds-product-feature__item .ds-product-feature__image {
	display: block;
	width: 88px;
	height: 88px;
	margin: 0 0 20px;
	border-radius: var(--ds-radius-lg);
	object-fit: cover;
}

/* WHY: PC は画像→タイトル→本文の縦組み。display:contents で
   ラッパーをレイアウトから消し、中の p 要素を直接 .ds-product-feature__item の
   flex アイテムとして積む（SP ではこのラッパー自体を横並びの1要素として使う）。 */
.ds-product-feature__content {
	display: contents;
}

.ds-product-feature__title {
	margin: 0 0 8px;
	color: var(--ds-fg);
	font-size: var(--ds-font-md);
	font-weight: 700;
}

.ds-product-feature__body {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
	line-height: 1.7;
}

@media (max-width: 767px) {
	.ds-product-feature__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* WHY: SP は画像（左）→見出し＋本文（右）の横組みに切り替える（ユーザー指示）。 */
	.ds-product-feature__item {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 16px 18px;
		text-align: left;
	}

	.ds-product-feature__item .ds-product-feature__image {
		width: 64px;
		height: 64px;
		margin: 0;
		flex-shrink: 0;
	}

	.ds-product-feature__content {
		display: block;
		min-width: 0;
	}
}

/* ==========================================================================
   ③ 使用シーン（3カード）
   WHY (2026-09-27 オーナー指示): 単一画像＋文章の2分割レイアウトでは、
   1枚の商品写真に対して1つの文章しか出せず「画像と文章が合わない」商品が
   出るため、②この商品の特徴と同じカード言語（白背景・薄いオレンジ枠・
   角丸22px・2層の影）の3カードへ変更した。写真は4:3固定でカード上部に
   ふちいっぱいに大きく見せ、下に見出し・説明を積む。767px 以下は②のように
   画像を左に小さく畳んで横並びにはせず、1列縦並びのまま画像サイズを
   維持する（オーナー指示「写真を大きめに」）。
   ========================================================================== */

.ds-product-scene__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.ds-product-scene__item {
	overflow: hidden;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 22px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
}

/*
 * WHY: セレクタをクラス2つにしているのは、②この商品の特徴の画像と同じ
 * 理由（親テーマ .woocommerce img の height:auto、詳細度0,1,1）に単一
 * クラス（0,1,0）で負けて 4:3 の比率が崩れるのを防ぐため。
 */
.ds-product-scene__item .ds-product-scene__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ds-product-scene__content {
	padding: 20px 24px 26px;
}

.ds-product-scene__title {
	margin: 0 0 8px;
	color: var(--ds-fg);
	font-size: var(--ds-font-md);
	font-weight: 700;
}

.ds-product-scene__body {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
	line-height: 1.7;
}

@media (max-width: 767px) {
	.ds-product-scene__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ==========================================================================
   ④ 使い方（3ステップ）
   ========================================================================== */

.ds-product-steps {
	background-color: var(--ds-bg-warm);
}

.ds-product-steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ds-product-steps__item {
	position: relative;
}

/*
 * WHY: front.css の .ds-flow__card（トップ「ご利用の流れ」）と同じ造形
 *      （薄いオレンジ枠・角丸22px・2層の影）に揃える（ユーザー指示）。
 *      front.css は商品ページ用に import せず、同じ数値をここへ複製する。
 */
.ds-product-steps__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 26px 16px 20px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: 22px;
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
	text-align: center;
}

/* WHY: 番号バッジはカード上辺の中央に半分乗せる（ユーザー指示の実測値）。 */
.ds-product-steps__number {
	position: absolute;
	top: -15px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background-color: var(--ds-cta-ink);
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transform: translateX(-50%);
}

.ds-product-steps__image {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: 0 auto 12px;
	border-radius: var(--ds-radius-lg);
	object-fit: cover;
}

/* WHY: .ds-product-feature__content と同じ理由（PCは縦組みのまま、SPだけ
   画像の右に並ぶ1つの箱として扱う）。 */
.ds-product-steps__content {
	display: contents;
}

.ds-product-steps__title {
	margin: 0 0 6px;
	color: var(--ds-fg);
	font-size: var(--ds-font-base);
	font-weight: 700;
}

.ds-product-steps__body {
	margin: 0;
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
	line-height: 1.7;
}

/* WHY: PC はカード間に矢印を置かない仕様のため既定で非表示にし、
   767px 以下（縦積み）のときだけ「↓」を薄く表示する。 */
.ds-product-steps__arrow {
	display: none;
}

@media (max-width: 767px) {
	.ds-product-steps__list {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	/* WHY: SP はカード内を画像（左）→本文（右）の横組みにする（ユーザー指示）。 */
	.ds-product-steps__card {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 16px 20px 16px 22px;
		text-align: left;
	}

	/* WHY: 番号バッジはカード左端の縦中央に半分はみ出す（ユーザー指示）。 */
	.ds-product-steps__number {
		top: 50%;
		left: -15px;
		transform: translateY(-50%);
	}

	.ds-product-steps__image {
		flex-shrink: 0;
		width: 64px;
		max-width: none;
		margin: 0;
	}

	.ds-product-steps__content {
		display: block;
		min-width: 0;
	}

	.ds-product-steps__arrow {
		display: block;
		margin-top: 8px;
		color: var(--ds-fg-soft);
		font-size: 16px;
		line-height: 1;
		text-align: center;
		opacity: .55;
	}

	.ds-product-steps__arrow::before {
		content: "↓";
	}
}

/* ==========================================================================
   ⑤ 商品仕様（ストライプ表）
   ========================================================================== */

.ds-product-specs__table {
	width: 100%;
	border-collapse: collapse;
}

.ds-product-specs__table th,
.ds-product-specs__table td {
	/* WHY: 現行 14px20px → 20px24px に増やし、行の高さにゆとりを持たせる（ユーザー指示）。 */
	padding: 20px 24px;
	text-align: left;
	border-bottom: 1px solid var(--ds-line);
	font-size: var(--ds-font-base);
}

/* WHY: 項目名の列は常に淡い暖色地、値の列は常に白にする（ユーザー指示）。
   偶数行 zebra は値の列だけに同じ暖色を薄く重ね、グレー（--ds-bg-soft）は
   使わない（トップページと同じ2色運用に揃える）。 */
.ds-product-specs__table th {
	width: 30%;
	background-color: var(--ds-bg-warm);
	color: var(--ds-fg);
	font-weight: 700;
}

.ds-product-specs__table td {
	background-color: #fff;
	color: var(--ds-fg-soft);
}

.ds-product-specs__table tr:nth-child(even) td {
	background-color: var(--ds-bg-warm);
}

@media (max-width: 767px) {
	/* WHY: 767px 以下は項目名・値を上下に積んだ縦並びにし、横スクロールを
	   出さない（ユーザー指示）。table.variations の SP 崩れ修正
	   （このファイル末尾）と同じ display:block 変換の考え方。 */
	.ds-product-specs__table,
	.ds-product-specs__table tbody,
	.ds-product-specs__table tr,
	.ds-product-specs__table th,
	.ds-product-specs__table td {
		display: block;
		width: 100%;
	}

	.ds-product-specs__table tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--ds-line);
	}

	.ds-product-specs__table tr:last-child {
		border-bottom: none;
	}

	.ds-product-specs__table th,
	.ds-product-specs__table td {
		padding: 2px 4px;
		border-bottom: none;
		font-size: var(--ds-font-sm);
	}

	.ds-product-specs__table th {
		color: var(--ds-fg-soft);
		font-weight: 700;
	}
}

/* ==========================================================================
   商品ページ用 特商法表示（要件 §8・DSK-009）
   ========================================================================== */

.ds-product-legal__list {
	margin: 0;
}

.ds-product-legal__row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--ds-line);
}

/*
 * WHY: 商品仕様表（⑤）と同じ「項目名列＝淡い暖色地／値列＝白」に揃える
 *      （ユーザー指示）。flex アイテムは既定で align-items:stretch のため、
 *      label/value それぞれに background-color を敷くだけで表のセルのように
 *      行の高さいっぱいに色が付く。
 */
.ds-product-legal__label {
	flex: 0 0 220px;
	padding: 20px 24px;
	background-color: var(--ds-bg-warm);
	color: var(--ds-fg);
	font-weight: 700;
}

.ds-product-legal__value {
	flex: 1;
	margin: 0;
	padding: 20px 24px;
	background-color: #fff;
	color: var(--ds-fg-soft);
	line-height: 1.8;
}

@media (max-width: 767px) {
	/* WHY: 項目名と値を上下に積んだ縦並びにする（ユーザー指示）。行の区切りは
	   .ds-product-legal__row の border-bottom のみに任せ、列の地色は畳んで
	   平らな一覧として読ませる。 */
	.ds-product-legal__row {
		flex-direction: column;
		padding: 12px 4px;
	}

	.ds-product-legal__label {
		flex-basis: auto;
		padding: 0 0 4px;
		background-color: transparent;
	}

	.ds-product-legal__value {
		padding: 0;
		background-color: transparent;
	}
}

/* ==========================================================================
   ⑥ よくあるご質問（<details>/<summary> のみ。JS 不使用）
   ========================================================================== */

.ds-product-faq {
	background-color: var(--ds-bg-warm);
}

.ds-product-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* WHY: 薄いオレンジ枠・角丸・弱い影を足し、白背景だけだった旧デザインから
   モックのカード見た目に寄せる（ユーザー指示）。 */
.ds-product-faq__item {
	padding: 18px 24px;
	background-color: #fff;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: var(--ds-radius-lg);
	box-shadow: 0 4px 0 rgba(238, 120, 0, .06), 0 6px 16px rgba(26, 26, 26, .05);
}

.ds-product-faq__question {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 32px;
	color: var(--ds-fg);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.ds-product-faq__question::-webkit-details-marker {
	display: none;
}

.ds-product-faq__question::before {
	content: "Q";
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	background-color: var(--ds-brand);
	border-radius: var(--ds-radius-pill);
	color: #fff;
	font-size: var(--ds-font-sm);
}

.ds-product-faq__question::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 0;
	color: var(--ds-brand);
	font-size: var(--ds-font-lg);
	font-weight: 700;
}

.ds-product-faq__item[open] .ds-product-faq__question::after {
	content: "\2212";
}

.ds-product-faq__answer {
	margin-top: 12px;
	padding-left: 40px;
	color: var(--ds-fg-soft);
	line-height: 1.8;
}

.ds-product-faq__answer p {
	margin: 0;
}

/* ==========================================================================
   ⑧ ハウスクリーニングへの導線
   ========================================================================== */

.ds-product-housecleaning {
	background-color: var(--ds-bg-warm);
}

.ds-product-housecleaning__body {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.ds-product-housecleaning__text {
	margin: 0 0 24px;
	color: var(--ds-fg-soft);
	line-height: 1.8;
}

.ds-product-housecleaning__btn {
	display: inline-block;
	padding: 14px 32px;
	background-color: #fff;
	border: 2px solid var(--ds-cta-surface);
	border-radius: var(--ds-radius-md);
	color: var(--ds-cta-ink);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ds-product-housecleaning__btn:hover {
	background-color: var(--ds-cta-surface);
	color: #fff;
}

/* ==========================================================================
   ⑦ スマホ下部追従 CTA
   WHY (2026-08-24 決定): モック SP 版は下部固定バー（電話する／無料相談は
   こちら）だったが不採用。EC ページの主 CTA は購入であり、スクロール後に
   カートへ戻れないと離脱要因になるというユーザー判断のため、商品ページは
   トップページの意匠を追わず、購入導線（.single_add_to_cart_button）の
   固定表示に統一する（モックとの意図的な差分。inc/product-lp.php の同見出し
   コメントも参照）。
   新規ボタンを作らず、WooCommerce 標準の .single_add_to_cart_button
   （templates/single-product/add-to-cart/*.php で共通のクラス）を
   767px 以下だけ position: fixed にする。色未選択時・在庫切れ時の
   disabled 表示・挙動は WooCommerce 標準の JS・CSS に委ね、ここでは
   位置・余白・影のみを変更する。
   ========================================================================== */

@media (max-width: 767px) {
	body.single-product {
		/* WHY: 固定 CTA の高さ分、本文末尾（フッター手前）に余白を確保し、
		   コンテンツが CTA の下に隠れないようにする。 */
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}

	.single-product .single_add_to_cart_button {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		width: auto;
		margin: 0;
		border-radius: 0;
		padding-top: 16px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
	}
}

@media (min-width: 1024px) {
	.single-product .single_add_to_cart_button {
		position: static;
	}
}

/* ==========================================================================
   ① 商品バリエーション選択欄（WooCommerce 標準 table.variations）
   デザイン刷新（select 本体・ラベル・「選択をクリア」リンク）
   WHY (2026-08-24): ユーザー指示「組み合わせボタンのデザインも古臭いので
   もっとわかりやすいモダンなデザインにして」。フロント側 JS の追加は禁止
   （要件定義書 §11、SSOT DSK-058 で適用範囲はフロント側と裁定済み）のため、
   チップ／ラジオボタン風に選択肢を並べ替えて select と JS 同期する実装は
   採らず、<select> 要素はそのまま・WooCommerce のフォーム構造・name 属性・
   data-attribute_name・選択挙動には一切触れず、CSS だけでサイト全体の
   造形言語（角丸・薄オレンジ枠・弱い影）に揃える。
   PC 幅にも当てたいスタイルのため、このブロックは @media の外に置く
   （SP 専用のレイアウト調整＝tr/th/td の display:block 化は、このすぐ下の
   「スマホ表示の崩れ修正」ブロックに従来どおり残す）。
   詳細度は、下の「スマホ表示の崩れ修正」で確立済みの
   `body.single-product.woocommerce ...`（body 自身の2クラスをスペース無しで
   連結）と同じ命名パターンを使う。親テーマの
   `.woocommerce div.product form.cart .variations select`（詳細度 0,4,3）
   に対し、こちらは (0,5,4) で確実に勝つ。
   矢印アイコン（chevron）は、送料等の信頼バッジで使った mask+currentColor
   ではなく background-image に直書きの stroke 色でインライン SVG を置く
   （親テーマ自身の select.orderby と同じ手法）。<select> 要素は多くの
   ブラウザで ::before/::after を出力できず、mask の対象にする専用の子
   要素も置けないため。新規画像ファイルは作らない。
   ========================================================================== */

body.single-product.woocommerce div.product form.cart .variations select {
	display: inline-block;
	box-sizing: border-box;
	min-height: 52px;
	max-width: 100%;
	margin-right: 1em;
	padding: 12px 44px 12px 16px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	border: 1.5px solid var(--ds-line-warm);
	border-radius: var(--ds-radius-md);
	-webkit-appearance: none;
	appearance: none;
	color: var(--ds-fg);
	/* WHY: 16px 未満だと iOS Safari がフォーカス時に自動ズームし、SP で
	   表示が崩れるため必ず16px以上にする。 */
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body.single-product.woocommerce div.product form.cart .variations select:hover {
	border-color: var(--ds-cta-surface);
}

/*
 * WHY: outline:none だけにしてフォーカス表示を消すとキーボード操作の
 * アクセシビリティ要件に反するため、必ず box-shadow のフォーカスリングで
 * 置き換える。
 */
body.single-product.woocommerce div.product form.cart .variations select:focus,
body.single-product.woocommerce div.product form.cart .variations select:focus-visible {
	outline: none;
	border-color: var(--ds-cta-surface);
	box-shadow: 0 0 0 3px rgba(252, 82, 16, .25);
}

body.single-product.woocommerce div.product form.cart .variations th.label {
	color: var(--ds-fg);
	font-size: var(--ds-font-base);
	font-weight: 700;
}

/*
 * WHY: 未選択時に隠す visibility:hidden は親テーマの標準挙動（在庫や
 * 選択状態の JS 制御に依存）のため触れず、見た目（色・下線・文字サイズ）
 * だけ整える。
 */
body.single-product.woocommerce div.product form.cart .reset_variations {
	color: var(--ds-fg-soft);
	font-size: var(--ds-font-sm);
	text-decoration: underline;
}

/* ==========================================================================
   ① バリエーション選択の「1セット目／2セット目」2 プルダウン UI
   WHY (2026-09-27): DSK-085 S3 / DSK-087 方式 (b)。マークアップ・JS の詳細は
   inc/product-lp.php kdc_render_product_variation_picker() /
   assets/js/product-variation-picker.js を参照。ここでは見た目のみを扱う。
   見た目はクライアント添付画像（2026-09-25 修正依頼③）に合わせ、見出しは
   太字＋小さなオレンジの「(必須)」、select は枠線なしの薄グレー地・角丸・
   塗りの下向き三角。2026-08-24 のチップ（ラジオ）UI の CSS はこれで置き換えた。
   .ds-set-picker* は自前クラスで、標準の table.variations の外に出力される
   ため、親テーマの `.woocommerce div.product form.cart .variations select`
   は当たらない。親テーマ Kadence の素の `select{...}`（0,0,1）には
   クラス指定で勝つが、`select:focus{background-color:...}`（0,1,1）は
   基本ルール（0,1,0）より強いため、:focus 側でも背景・文字色を指定する。
   ========================================================================== */

/*
 * WHY: JS が初期化に成功するまで PHP 側で hidden 属性を付けて隠している
 * （JS 無効・初期化失敗時は標準 select だけを見せる）。下で display:grid を
 * 当てるため、UA 既定の [hidden]{display:none} が負けないよう明示する。
 */
.ds-set-picker[hidden] {
	display: none;
}

.ds-set-picker {
	display: grid;
	gap: 28px;
	margin: 4px 0 24px;
}

.ds-set-picker__field {
	display: grid;
	gap: 12px;
}

.ds-set-picker__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: var(--ds-fg);
	font-size: var(--ds-font-md);
	font-weight: 700;
	line-height: 1.4;
}

/*
 * WHY: クライアント画像の見出し先頭の黒丸。文字（●）ではなく図形で描くのは、
 * スクリーンリーダーに記号として読み上げさせないため。
 */
.ds-set-picker__label::before {
	content: "";
	flex: none;
	width: .8em;
	height: .8em;
	margin-right: .3em;
	border-radius: 50%;
	background-color: currentColor;
}

/* WHY: 小さい文字のため、白地 4.60:1 の小さい文字用オレンジ（--ds-cta-ink）を使う。 */
.ds-set-picker__required {
	margin-left: 4px;
	color: var(--ds-cta-ink);
	font-size: var(--ds-font-sm);
	font-weight: 700;
}

.ds-set-picker__select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 12px 44px 12px 16px;
	background-color: #EBEBEB;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23444444'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 11px 7px;
	border: 0;
	border-radius: var(--ds-radius-md);
	-webkit-appearance: none;
	appearance: none;
	color: var(--ds-fg);
	/* WHY: 16px 未満だと iOS Safari がフォーカス時に自動ズームするため。 */
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease;
}

.ds-set-picker__select:hover {
	background-color: #E2E2E2;
}

/*
 * WHY: outline:none だけにしてフォーカス表示を消すとキーボード操作の
 * アクセシビリティ要件に反するため、既存の標準 select と同じ box-shadow の
 * フォーカスリングで置き換える。
 */
.ds-set-picker__select:focus,
.ds-set-picker__select:focus-visible {
	outline: none;
	background-color: #EBEBEB;
	color: var(--ds-fg);
	box-shadow: 0 0 0 3px rgba(252, 82, 16, .25);
}

/*
 * WHY: 未選択（「選択してください」表示中）だけ文字色を薄くする（クラスは JS が
 * 付け外しする）。薄グレー地で 4.5:1 以上を保つため --ds-fg-soft を使う。
 * :focus より後に置き、フォーカス中も未選択の見た目を保つ。開いた一覧の
 * 選択肢まで薄くならないよう option は本文色に戻す。
 */
.ds-set-picker__select.is-empty {
	color: var(--ds-fg-soft);
}

.ds-set-picker__select option {
	color: var(--ds-fg);
}

.ds-set-picker__select option:disabled {
	color: GrayText;
}

/*
 * WHY: JS（product-variation-picker.js）が初期化に成功したときだけ、標準
 * select を含む table.variations（ラベル「組み合わせ」・「選択をクリア」
 * リンクを含む）にこのクラスを付けて隠す。DOM からは消さない（正本の値と
 * WooCommerce の change 購読を保つ）。CSS 側では最初から隠さないので、
 * JS 無効時は標準 select がそのまま見える。親テーマ・このファイルの
 * `body.single-product.woocommerce ... .variations` 系ルールに確実に勝つよう
 * 同じ命名パターンで詳細度を上げる。
 */
body.single-product.woocommerce div.product form.cart table.variations.ds-set-picker__table-hidden {
	display: none;
}

/* ==========================================================================
   ① 商品バリエーション選択欄（WooCommerce 標準 table.variations）
   スマホ表示の崩れ修正
   WHY: ①商品ファーストビューは WooCommerce 標準のまま触らない方針だが、
   390px 幅で確認すると属性名ラベル（例「組み合わせ」）が1文字ずつ縦に
   並ぶ表示崩れがあり、これは仕様ではなく不具合のため例外的にここで直す。
   原因は Kadence 親テーマの woocommerce.min.css が table.variations の
   td だけ display:block にしており、th（ラベル）は table-cell のまま
   残ること。td が block 化されて table のセル幅計算が崩れ、th の自動幅が
   極端に狭くなるため、日本語ラベルが1文字ずつ折り返される。767px 以下
   だけ tr/th/td をまとめて display:block にし、ラベルを選択欄の上に
   配置する。768px 以上（PC 幅）はこのルールの対象外で、親テーマの
   table-cell レイアウトのまま変更しない。標準のフォーム構造・name 属性・
   選択挙動は変えず、レイアウトのみ調整する。
   WHY (2026-08-24 修正): `.woocommerce` は `<body>` 自身に付くクラスで、
   子孫結合子（半角スペース）で `body.single-product .woocommerce ...` と
   書くと「body.single-product の子孫にある .woocommerce」を要求してしまい
   body 自身にはマッチしない（子孫結合子は自分自身を含まない）ため、この
   ブロックが1つも適用されず375px実機でラベルが1文字ずつ縦に潰れていた。
   `body.single-product.woocommerce`（間にスペースを入れず連結）にして
   body 自身の2クラスを同時に指定する。
   ========================================================================== */

@media (max-width: 767px) {
	body.single-product.woocommerce div.product form.cart .variations tr,
	body.single-product.woocommerce div.product form.cart .variations th,
	body.single-product.woocommerce div.product form.cart .variations td {
		display: block;
		width: 100%;
	}

	body.single-product.woocommerce div.product form.cart .variations th.label {
		padding: 0 0 4px;
	}

	body.single-product.woocommerce div.product form.cart .variations select {
		width: 100%;
		min-width: 0;
		margin-right: 0;
	}
}

/* ==========================================================================
   ① 商品ギャラリー画像のタイプ名ラベル
   WHY(2026-09-26): DSK-085 S2。①商品ファーストビューは WooCommerce 標準の
   まま触らない方針だが、クライアント 2026-09-25 の指摘②「スポンジ画像に、
   それぞれのタイプ名を表記したい」を受け、画像に焼き込まず HTML/CSS の
   オーバーレイで例外的に追加する（②の直後の1件と同じ「標準のまま触らない
   方針の例外」パターン）。<span class="ds-product-gallery__label"> の
   出力は inc/woocommerce.php の woocommerce_single_product_image_thumbnail_html
   フィルタ（Woo 標準フィルタ。product-image.php のメイン画像・
   product-thumbnails.php のギャラリー画像の両方を通る）。
   ========================================================================== */

.woocommerce-product-gallery__image {
	position: relative;
}

.ds-product-gallery__label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 14px;
	background-color: #E3F5E6;
	color: #1B5E3A;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	border-radius: var(--ds-radius-pill);
	pointer-events: none;
}

@media (max-width: 767px) {
	.ds-product-gallery__label {
		top: 8px;
		left: 8px;
		padding: 4px 12px;
		font-size: 12px;
	}
}

/* ==========================================================================
   ① 商品ギャラリーのサムネイル列
   WHY(2026-09-28): Kadence 親テーマの .flex-control-thumbs は margin-top:-32px で
   メイン画像の下端に重なる。配送告知画像（添付106）は下端に「東京都外への配送は
   ご注文いただけません。」があり、サムネイルで隠れるとクライアント 9/28 15:13 指摘。
   重ねずにメイン画像の下へ並べる（PC・SP 共通）。
   ========================================================================== */

.woocommerce div.product div.images .flex-control-thumbs {
	margin-top: 12px;
}