/*
Theme Name:   eCompliance Shop
Theme URI:    https://shop.ecompliance.jp/
Description:  株式会社イーコンプライアンス 規制対応ソリューション販売サイト（shop.ecompliance.jp）用の子テーマ。医薬品・医療機器業界の薬事／QA／信頼性保証部門に向けて、可読性と信頼性を優先したデザイントークンを theme.json で定義し、本ファイルは theme.json で表現できない領域（ダークモード、和文組版の細部、WooCommerce のバリエーション選択 UI、印刷）のみを担う。
Author:       株式会社イーコンプライアンス
Author URI:   https://www.ecompliance.co.jp/
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ecompliance-shop
Tags:         block-patterns, full-site-editing, e-commerce, accessibility-ready
*/

/* ==========================================================================
   0. 目次
   --------------------------------------------------------------------------
   1. ダークモード（theme.json プリセット変数の再定義）
   2. 補助トークン（theme.json の役割外）
   3. 和文組版の土台
   4. フォーカス可視化とアクセシビリティ
   5. 分類バッジ・状態バッジ
   6. 価格表示
   7. 商品一覧（行リスト／カードの切替）
   8. 絞り込みファセット
   9. 商品詳細：バリエーション選択（最大6択）
  10. 商品詳細：追従購入パネル
  11. 信頼の根拠ブロック
  12. 規制トピック入口
  13. WooCommerce 既定スタイルの上書き
  14. 印刷（稟議資料化）
  15. モーション低減・強制カラー
   ========================================================================== */


/* ==========================================================================
   1. ダークモード
   --------------------------------------------------------------------------
   theme.json が :root に出力する --wp--preset--color--* を、そのまま上書きする。
   個別ブロックに .dark クラスを配るのではなく「トークンを差し替える」ことで、
   コアブロック・WooCommerce ブロック・将来追加するブロックまで自動追従させる。
   :root:root と二重指定しているのは、global-styles のインライン CSS と
   詳細度を同じにせず確実に勝たせるため（読み込み順に依存しない）。
   ========================================================================== */

:root:root {
	color-scheme: light;

	/* 影は暗所で「浮き」ではなく「縁」で表現するため、明暗で別値を持つ */
	--ec-shadow-raised: 0 1px 2px rgba(20, 24, 28, 0.06), 0 1px 1px rgba(20, 24, 28, 0.04);
	--ec-shadow-sticky: 0 2px 12px rgba(20, 24, 28, 0.10);
	--ec-shadow-overlay: 0 8px 32px rgba(20, 24, 28, 0.18);

	/* 選択中バリエーションの淡い塗り。朱ではなく紺を使う（朱は行動色に予約） */
	--ec-selected-bg: #EEF3F8;
	--ec-selected-border: #1B3D63;

	/* 表のゼブラ。和文の横罫は太いと圧が出るため、地の差で行を送る */
	--ec-zebra: rgba(20, 24, 28, 0.025);
	--ec-overlay-scrim: rgba(20, 24, 28, 0.45);
}

@media (prefers-color-scheme: dark) {
	:root:root:not([data-ec-theme="light"]) {
		color-scheme: dark;

		--wp--preset--color--base: #12161A;
		--wp--preset--color--base-raised: #1B2127;
		--wp--preset--color--base-sunken: #0C1013;
		--wp--preset--color--contrast: #E7E9EB;
		--wp--preset--color--contrast-muted: #A3ADB6;
		--wp--preset--color--line: #2B333B;
		--wp--preset--color--line-strong: #616C78;

		/* 濃紺は暗所で背景に沈むため、見出し色は明度を上げた藍に置き換える */
		--wp--preset--color--primary: #8FB4D6;
		--wp--preset--color--primary-strong: #C4D8EA;
		--wp--preset--color--primary-tint: #17283A;

		/* 朱は暗所で彩度が飛んで滲むため、文字用は淡く、塗り用は別に持つ */
		--wp--preset--color--accent: #E8877C;
		--wp--preset--color--accent-strong: #F0A79E;
		--wp--preset--color--accent-tint: #2E1B18;

		--wp--preset--color--cat-seminar: #8FB4D6;
		--wp--preset--color--cat-template: #6FBBA8;
		--wp--preset--color--cat-book: #C89C71;
		--wp--preset--color--cat-vod: #A79ACF;

		--ec-shadow-raised: none;
		--ec-shadow-sticky: 0 2px 16px rgba(0, 0, 0, 0.5);
		--ec-shadow-overlay: 0 8px 40px rgba(0, 0, 0, 0.65);

		--ec-selected-bg: #17283A;
		--ec-selected-border: #8FB4D6;

		--ec-zebra: rgba(255, 255, 255, 0.028);
		--ec-overlay-scrim: rgba(0, 0, 0, 0.6);
	}
}

/* 明示切替（フッターのトグルが html に付与する）。OS 設定より優先する。 */
:root:root[data-ec-theme="dark"] {
	color-scheme: dark;

	--wp--preset--color--base: #12161A;
	--wp--preset--color--base-raised: #1B2127;
	--wp--preset--color--base-sunken: #0C1013;
	--wp--preset--color--contrast: #E7E9EB;
	--wp--preset--color--contrast-muted: #A3ADB6;
	--wp--preset--color--line: #2B333B;
	--wp--preset--color--line-strong: #616C78;
	--wp--preset--color--primary: #8FB4D6;
	--wp--preset--color--primary-strong: #C4D8EA;
	--wp--preset--color--primary-tint: #17283A;
	--wp--preset--color--accent: #E8877C;
	--wp--preset--color--accent-strong: #F0A79E;
	--wp--preset--color--accent-tint: #2E1B18;
	--wp--preset--color--cat-seminar: #8FB4D6;
	--wp--preset--color--cat-template: #6FBBA8;
	--wp--preset--color--cat-book: #C89C71;
	--wp--preset--color--cat-vod: #A79ACF;

	--ec-shadow-raised: none;
	--ec-shadow-sticky: 0 2px 16px rgba(0, 0, 0, 0.5);
	--ec-shadow-overlay: 0 8px 40px rgba(0, 0, 0, 0.65);
	--ec-selected-bg: #17283A;
	--ec-selected-border: #8FB4D6;
	--ec-zebra: rgba(255, 255, 255, 0.028);
	--ec-overlay-scrim: rgba(0, 0, 0, 0.6);
}

/*
 * ダークモードでの塗りボタン。
 * 明所の朱 #A32B23 を暗所でそのまま塗ると沈み、明所用の淡い朱を塗ると白文字が読めない。
 * よって「塗り用の朱」を文字色トークンから独立させる。白文字とのコントラスト 5.36:1。
 */
:root:root[data-ec-theme="dark"] .wp-element-button,
:root:root[data-ec-theme="dark"] .wp-block-button__link,
:root:root[data-ec-theme="dark"] button.ec-btn--primary {
	background-color: #B8382E;
	border-color: #B8382E;
	color: #F5F7F8;
}

@media (prefers-color-scheme: dark) {
	:root:root:not([data-ec-theme="light"]) .wp-element-button,
	:root:root:not([data-ec-theme="light"]) .wp-block-button__link,
	:root:root:not([data-ec-theme="light"]) button.ec-btn--primary {
		background-color: #B8382E;
		border-color: #B8382E;
		color: #F5F7F8;
	}
}


/* ==========================================================================
   2. 補助トークン
   ========================================================================== */

:root:root {
	--ec-radius-sm: var(--wp--custom--radius--sm, 2px);
	--ec-radius-md: var(--wp--custom--radius--md, 3px);
	--ec-radius-lg: var(--wp--custom--radius--lg, 6px);

	--ec-control-h: var(--wp--custom--control--height, 2.75rem);
	--ec-control-h-lg: var(--wp--custom--control--height-lg, 3.25rem);
	--ec-tap-min: var(--wp--custom--control--tap-min, 44px);

	--ec-focus-w: var(--wp--custom--focus--width, 3px);
	--ec-focus-o: var(--wp--custom--focus--offset, 2px);

	--ec-dur-fast: var(--wp--custom--duration--fast, 120ms);
	--ec-dur-base: var(--wp--custom--duration--base, 180ms);
}


/* ==========================================================================
   3. 和文組版の土台
   --------------------------------------------------------------------------
   和文は字面率が高く、欧文と同じ行間・字間では詰まって見える。
   本文は行間 1.8／字間 0.04em、見出しは行間 1.45／字間 0.01em と別に設計する。
   （文字が大きいほど相対的なアキは小さくてよい、という原則。）
   ========================================================================== */

body {
	font-feature-settings: "palt" 0; /* 本文はベタ組み。詰め組みは可読性を下げる */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* 見出しのみ詰め組みを許可。大きな文字の和文は約物のアキが目立つため。 */
h1, h2, h3, h4, .ec-display,
.wp-block-post-title,
.wp-block-site-title {
	font-feature-settings: "palt" 1;
	text-wrap: balance;
}

/* 禁則を厳格に。規制文書名（「QMS省令（令和3年改正）」等）が不自然に割れるのを防ぐ */
body,
p, li, dd, dt, td, th, figcaption {
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* 和欧間のアキ。対応ブラウザでは自動、非対応でも実害なし。 */
@supports (text-autospace: normal) {
	body { text-autospace: normal; }
}

/* 段落の下端に 1 文字だけ残るのを避ける */
p { text-wrap: pretty; }

/* 桁を縦に揃える価値がある場所だけ等幅書体にする。
   価格・型番・日付・表のセルは、上下の行と桁位置が合わないと比較でつまずく。 */
.ec-price,
.ec-sku,
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
td.ec-col-price,
.ec-fact__value,
.ec-variation__price,
table.shop_table td,
table.shop_attributes td {
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

/* 地の文に混ざる数字は本文書体のまま。等幅を混ぜると読み流しが途切れる。
   揃える必要はないが誤読は避けたいので、等幅数字だけ有効にする。 */
.ec-num,
time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0.01em;
}

/* 本文リンクは下線を外さない。規制業界の読者は下線＝リンクの規範に慣れている。 */
.entry-content a:where(:not(.wp-element-button):not(.ec-btn)) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* 引用・信条文にのみ明朝を許可（任意採用。README の判断事項 D 参照） */
.ec-mincho {
	font-family: var(--wp--preset--font-family--mincho);
	line-height: var(--wp--custom--line-height--loose);
	letter-spacing: 0.02em;
}


/* ==========================================================================
   4. フォーカス可視化とアクセシビリティ
   --------------------------------------------------------------------------
   B2B の購買担当はキーボード操作の比率が高く、社内の情報アクセシビリティ規程
   （JIS X 8341-3 準拠を求める企業がある）を通す必要もあるため、
   フォーカスリングは絶対に消さず、明暗どちらでも 3:1 以上を確保する。
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--ec-focus-w) solid var(--wp--preset--color--accent);
	outline-offset: var(--ec-focus-o);
	border-radius: var(--ec-radius-sm);
}

/* 塗り面の上では朱のリングが埋もれるため、地色で縁取ってから朱を重ねる */
.wp-element-button:focus-visible,
.ec-btn:focus-visible {
	outline: var(--ec-focus-w) solid var(--wp--preset--color--contrast);
	outline-offset: var(--ec-focus-o);
	box-shadow: 0 0 0 calc(var(--ec-focus-o) + var(--ec-focus-w) + 2px) var(--wp--preset--color--base);
}

/* 最小タップ領域。手袋・タブレット運用の現場を想定。 */
.ec-btn,
.wp-element-button,
.ec-variation__label,
.ec-facet__label {
	min-height: var(--ec-tap-min);
}

.ec-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary-strong);
	color: #FFFFFF;
	text-decoration: none;
}
.ec-skip-link:focus {
	left: 0;
}

.ec-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   5. 分類バッジ・状態バッジ
   --------------------------------------------------------------------------
   4系統の商品分類は「色だけ」では区別しない。必ずテキストラベルを内包する。
   読者層に多い後天的な色覚特性や、印刷（白黒）での判別を担保するため、
   分類は色＋文字、状態は色＋文字＋記号の三重で表す。
   ========================================================================== */

.ec-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.6em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
	border: 1px solid currentColor;
	border-radius: var(--ec-radius-sm);
	white-space: nowrap;
	background: transparent;
}

.ec-badge--seminar  { color: var(--wp--preset--color--cat-seminar); }
.ec-badge--template { color: var(--wp--preset--color--cat-template); }
.ec-badge--book     { color: var(--wp--preset--color--cat-book); }
.ec-badge--vod      { color: var(--wp--preset--color--cat-vod); }

/* 分類の左端に細い色帯を出す。一覧を縦にスキャンする際の手掛かり。 */
.ec-row[data-cat="seminar"]  { --ec-cat: var(--wp--preset--color--cat-seminar); }
.ec-row[data-cat="template"] { --ec-cat: var(--wp--preset--color--cat-template); }
.ec-row[data-cat="book"]     { --ec-cat: var(--wp--preset--color--cat-book); }
.ec-row[data-cat="vod"]      { --ec-cat: var(--wp--preset--color--cat-vod); }

/* 状態バッジ。朱は「締切間近」「受付終了」だけに使う。 */
.ec-status {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.ec-status--open   { color: var(--wp--preset--color--cat-template); }
.ec-status--soon   { color: var(--wp--preset--color--accent); }
.ec-status--closed { color: var(--wp--preset--color--contrast-muted); }
.ec-status::before {
	content: "";
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.ec-status--closed::before { border-radius: 0; }
.ec-status--soon::before   { border-radius: 0; transform: rotate(45deg); }


/* ==========================================================================
   6. 価格表示
   --------------------------------------------------------------------------
   総額表示義務（消費税法）に従い税込を主・税抜を併記する。
   ただし法人稟議は税抜で回るため、税抜を小さくしても「消さない」。
   ========================================================================== */

.ec-price {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
}
.ec-price__main {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}
.ec-price__main .ec-price__unit {
	font-size: 0.6em;
	font-weight: 700;
	margin-left: 0.1em;
}
.ec-price__tax {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
	white-space: nowrap;
}
.ec-price__range {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}
/* 価格を朱にしない。朱は行動色であり、値札に使うと通販的な煽りに見える。 */


/* ==========================================================================
   7. 商品一覧
   --------------------------------------------------------------------------
   既定は「行リスト」。文書テンプレートやセミナーはサムネイル画像に情報がなく、
   カードグリッドは画像領域が空虚になるうえ、1画面あたりの比較件数が減る。
   B2B の主タスクは「複数商品の条件比較」なので、表に近い密度を既定にする。
   カード表示は切替で残す（README 判断事項 B）。
   ========================================================================== */

.ec-results {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	container-type: inline-size;
}

.ec-row {
	display: grid;
	grid-template-columns: 4px minmax(0, 1fr) 12rem;
	gap: 0 var(--wp--preset--spacing--50);
	align-items: start;
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: relative;
}
.ec-row:nth-child(even) { background: var(--ec-zebra); }
.ec-row:hover { background: var(--wp--preset--color--base-sunken); }

.ec-row__rule {
	grid-column: 1;
	align-self: stretch;
	background: var(--ec-cat, var(--wp--preset--color--line-strong));
	border-radius: var(--ec-radius-sm);
}

.ec-row__body { grid-column: 2; min-width: 0; }

.ec-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--20);
}

.ec-row__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ec-row__title a {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: none;
}
.ec-row__title a:hover { text-decoration: underline; }
/* 行全体をクリック可能にするが、リンクのアクセシブルネームは見出しに保つ */
.ec-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* 属性は「ラベル：値」の定義リスト。規制文書は版数と改訂日が生命線。 */
.ec-row__attrs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}
.ec-row__attrs > div { display: flex; gap: 0.4em; }
.ec-row__attrs dt { font-weight: 700; }
.ec-row__attrs dt::after { content: "："; }
.ec-row__attrs dd { margin: 0; color: var(--wp--preset--color--contrast); }

.ec-row__side {
	grid-column: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20);
	text-align: right;
}

/* 狭い幅では価格を本文の下に落とす。コンテナクエリなのでサイドバー有無に強い。 */
@container (max-width: 40rem) {
	.ec-row {
		grid-template-columns: 4px minmax(0, 1fr);
	}
	.ec-row__side {
		grid-column: 2;
		align-items: flex-start;
		text-align: left;
		margin-top: var(--wp--preset--spacing--30);
	}
	.ec-row__side .ec-price { justify-content: flex-start; }
}

/* カード表示への切替（.ec-results--grid） */
.ec-results--grid {
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	border-top: 0;
}
.ec-results--grid .ec-row {
	grid-template-columns: minmax(0, 1fr);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--ec-cat, var(--wp--preset--color--line-strong));
	border-radius: var(--ec-radius-md);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-raised);
	box-shadow: var(--ec-shadow-raised);
}
.ec-results--grid .ec-row:nth-child(even) { background: var(--wp--preset--color--base-raised); }
.ec-results--grid .ec-row__rule { display: none; }
.ec-results--grid .ec-row__body,
.ec-results--grid .ec-row__side { grid-column: 1; }
.ec-results--grid .ec-row__side {
	align-items: flex-start;
	text-align: left;
	margin-top: var(--wp--preset--spacing--40);
}

/* 件数と並び替え */
.ec-results-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}
.ec-results-bar__count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}
.ec-results-bar__count strong {
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}


/* ==========================================================================
   8. 絞り込みファセット
   --------------------------------------------------------------------------
   1,620 商品／84 カテゴリを前提にすると、探索の主役はファセットになる。
   デスクトップでは常時展開（開くという一手を挟まない）、モバイルでは
   下部シートに退避する。適用中の条件は必ず上部にチップで可視化して外せるようにする。
   ========================================================================== */

.ec-layout-shop {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}
@media (max-width: 60rem) {
	.ec-layout-shop { grid-template-columns: minmax(0, 1fr); }
}

.ec-facets {
	position: sticky;
	top: var(--wp--preset--spacing--50);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: var(--wp--preset--spacing--20);
}

.ec-facet {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40) 0;
}
.ec-facet__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary-strong);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.ec-facet__label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.35rem 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	cursor: pointer;
	min-height: 2rem;
}
.ec-facet__label input { flex: none; width: 1.05em; height: 1.05em; accent-color: var(--wp--preset--color--primary); }
.ec-facet__count {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xx-small);
	color: var(--wp--preset--color--contrast-muted);
}
/* 該当 0 件は消さずに淡くする。「無い」と分かることも情報。 */
.ec-facet__label:has(input:disabled) { color: var(--wp--preset--color--contrast-muted); cursor: not-allowed; }

.ec-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--40); }
.ec-chip {
	display: inline-flex; align-items: center; gap: 0.4em;
	padding: 0.25em 0.7em;
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-strong);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill, 999px);
}
.ec-chip button {
	border: 0; background: none; cursor: pointer; padding: 0 0 0 0.2em;
	color: inherit; font-size: 1.1em; line-height: 1;
}


/* ==========================================================================
   9. 商品詳細：バリエーション選択（最大6択）
   --------------------------------------------------------------------------
   ここがこのサイトの心臓部。1商品に最大6択（ライブ／アーカイブ／両方／資料のみ、
   VOD のレンタル1日・5日・30日・買い切り）があり、選択肢ごとに価格が違う。
   ドロップダウンは「開かないと選択肢が見えず、価格を横並びで比較できない」ため不採用。
   選択肢を最初から全件展開したラジオ表とし、各行に「形態・内容の違い・価格・受付状況」を置く。
   ========================================================================== */

.ec-variations {
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--ec-radius-md);
	overflow: hidden;
	margin: var(--wp--preset--spacing--50) 0;
}

.ec-variations__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary-tint);
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
}
.ec-variations__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary-strong);
	margin: 0;
}
.ec-variations__hint {
	font-size: var(--wp--preset--font-size--xx-small);
	color: var(--wp--preset--color--contrast-muted);
}

.ec-variation {
	display: block;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ec-variation:last-child { border-bottom: 0; }

.ec-variation__label {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr) auto;
	gap: 0 var(--wp--preset--spacing--30);
	align-items: start;
	padding: var(--wp--preset--spacing--40);
	cursor: pointer;
	transition: background var(--ec-dur-fast) ease-out;
}
.ec-variation__label:hover { background: var(--wp--preset--color--base-sunken); }

.ec-variation__radio {
	grid-column: 1;
	width: 1.15rem; height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--ec-selected-border);
	flex: none;
}

.ec-variation__main { grid-column: 2; min-width: 0; }

.ec-variation__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* 「何が違うのか」を必ず1行で書く。選択肢名だけでは判断できない。 */
.ec-variation__desc {
	margin: 0.35em 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
	color: var(--wp--preset--color--contrast-muted);
}

.ec-variation__price {
	grid-column: 3;
	text-align: right;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
}
.ec-variation__price b {
	display: block;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.ec-variation__price small {
	display: block;
	font-size: var(--wp--preset--font-size--xx-small);
	color: var(--wp--preset--color--contrast-muted);
}

/* 選択状態は「地の色＋左の太い縁」で示す。チェック記号だけでは視線が拾えない。 */
.ec-variation:has(.ec-variation__radio:checked) {
	background: var(--ec-selected-bg);
	box-shadow: inset 4px 0 0 var(--ec-selected-border);
}
.ec-variation:has(.ec-variation__radio:checked) .ec-variation__name {
	color: var(--wp--preset--color--primary-strong);
}
.ec-variation__label:has(.ec-variation__radio:focus-visible) {
	outline: var(--ec-focus-w) solid var(--wp--preset--color--accent);
	outline-offset: calc(var(--ec-focus-o) * -1);
}

/* 受付終了・在庫なしは非表示にせず、選べないことを明示する。
   「以前あった形態が消えた」と誤解されるより、終了と書くほうが信頼を損ねない。 */
.ec-variation--unavailable { background: var(--wp--preset--color--base-sunken); }
.ec-variation--unavailable .ec-variation__label { cursor: not-allowed; }
.ec-variation--unavailable .ec-variation__name,
.ec-variation--unavailable .ec-variation__price b {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

@media (max-width: 40rem) {
	.ec-variation__label {
		grid-template-columns: 1.6rem minmax(0, 1fr);
	}
	.ec-variation__price {
		grid-column: 2;
		text-align: left;
		margin-top: var(--wp--preset--spacing--20);
	}
	.ec-variation__price b { display: inline; }
	.ec-variation__price small { display: inline; margin-left: 0.5em; }
}


/* ==========================================================================
  10. 商品詳細：追従購入パネル
  --------------------------------------------------------------------------
  法人購買の離脱要因は「価格が分からない」より「社内稟議に必要な書類が出るか
  分からない」。よって購入ボタンと同じ面に、見積書・請求書払い・掛売りへの
  導線を必ず置く。カートに入れる以外の出口を用意することが B2B の転換率を上げる。
   ========================================================================== */

.ec-layout-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}
@media (max-width: 64rem) {
	.ec-layout-product { grid-template-columns: minmax(0, 1fr); }
}

.ec-buybox {
	position: sticky;
	top: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--ec-radius-md);
	background: var(--wp--preset--color--base-raised);
	box-shadow: var(--ec-shadow-raised);
	padding: var(--wp--preset--spacing--50);
}
.ec-buybox__selected {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ec-buybox__selected strong {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	line-height: 1.5;
	margin-top: 0.2em;
}
.ec-buybox__price {
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: var(--wp--preset--spacing--30) 0;
}
.ec-buybox__qty {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}
.ec-buybox__qty input {
	width: 5rem;
	height: var(--ec-control-h);
	padding: 0 0.6rem;
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--medium);
	text-align: right;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--ec-radius-sm);
}

.ec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	padding: 0.7rem 1.2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: var(--ec-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--ec-dur-fast) ease-out, border-color var(--ec-dur-fast) ease-out;
}
.ec-btn--primary {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #FFFFFF;
	min-height: var(--ec-control-h-lg);
}
.ec-btn--primary:hover {
	background: var(--wp--preset--color--accent-strong);
	border-color: var(--wp--preset--color--accent-strong);
	color: #FFFFFF;
}
/* 副次導線は輪郭のみ。主行動と競合させない。 */
.ec-btn--secondary {
	background: transparent;
	border-color: var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--primary);
	margin-top: var(--wp--preset--spacing--30);
}
.ec-btn--secondary:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-tint);
}

/* 支払条件の明示。ここを畳まない。 */
.ec-buybox__terms {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.8;
	color: var(--wp--preset--color--contrast-muted);
}
.ec-buybox__terms ul { list-style: none; margin: 0; padding: 0; }
.ec-buybox__terms li { display: flex; gap: 0.5em; }
.ec-buybox__terms li::before {
	content: "✓";
	color: var(--wp--preset--color--cat-template);
	font-weight: 700;
	flex: none;
}

/* モバイルでは画面下に固定バーとして出す（価格と主行動だけ） */
.ec-buybar-mobile { display: none; }
@media (max-width: 64rem) {
	.ec-buybar-mobile {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 50;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		padding-bottom: max(var(--wp--preset--spacing--30), env(safe-area-inset-bottom));
		background: var(--wp--preset--color--base-raised);
		border-top: 1px solid var(--wp--preset--color--line-strong);
		box-shadow: var(--ec-shadow-sticky);
	}
	.ec-buybar-mobile .ec-btn { width: auto; flex: 1; }
}


/* ==========================================================================
  11. 信頼の根拠ブロック
  --------------------------------------------------------------------------
  「信頼できそうな見た目」を作るのではなく、検証可能な事実を出す。
  数字は等幅で桁を揃え、単位と但し書き（基準日）を必ず添える。
  出典や基準日のない数字は、この読者層にはむしろ逆効果になる。
   ========================================================================== */

.ec-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius-md);
	background: var(--wp--preset--color--base-raised);
	overflow: hidden;
}
.ec-fact {
	padding: var(--wp--preset--spacing--50);
	border-right: 1px solid var(--wp--preset--color--line);
}
.ec-fact:last-child { border-right: 0; }
@media (max-width: 48rem) {
	.ec-fact { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
	.ec-fact:last-child { border-bottom: 0; }
}
.ec-fact__value {
	display: block;
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--primary-strong);
	letter-spacing: -0.01em;
}
.ec-fact__value small { font-size: 0.45em; margin-left: 0.2em; letter-spacing: 0; }
.ec-fact__label {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
	color: var(--wp--preset--color--contrast-muted);
}


/* ==========================================================================
  12. 規制トピック入口
  --------------------------------------------------------------------------
  読者は「セミナーが欲しい」ではなく「QMS省令の手順書が要る」と考えて来る。
  よって商品種別より先に、規制の切り口（GMP／QMS省令／CSV・CSA／Part 11／
  データインテグリティ／MDR／GVP …）で 1,620 商品を束ねた入口を置く。
   ========================================================================== */

.ec-topics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.ec-topic {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--ec-radius-sm);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ec-dur-fast) ease-out, background var(--ec-dur-fast) ease-out;
}
.ec-topic:hover {
	border-color: var(--wp--preset--color--primary);
	border-left-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--primary-tint);
}
.ec-topic__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-strong);
	line-height: 1.5;
}
.ec-topic__count {
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xx-small);
	color: var(--wp--preset--color--contrast-muted);
}

/* 4系統への大きな入口 */
.ec-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.ec-pillar {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--ec-cat, var(--wp--preset--color--primary));
	border-radius: var(--ec-radius-md);
	text-decoration: none;
	color: inherit;
	box-shadow: var(--ec-shadow-raised);
	transition: transform var(--ec-dur-base) ease-out, border-color var(--ec-dur-fast) ease-out;
}
.ec-pillar:hover { border-color: var(--ec-cat); }
.ec-pillar[data-cat="seminar"]  { --ec-cat: var(--wp--preset--color--cat-seminar); }
.ec-pillar[data-cat="template"] { --ec-cat: var(--wp--preset--color--cat-template); }
.ec-pillar[data-cat="book"]     { --ec-cat: var(--wp--preset--color--cat-book); }
.ec-pillar[data-cat="vod"]      { --ec-cat: var(--wp--preset--color--cat-vod); }
.ec-pillar__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--ec-cat);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ec-pillar__desc {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.8;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 var(--wp--preset--spacing--40);
	flex: 1;
}
.ec-pillar__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
}
.ec-pillar__count {
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast-muted);
}
.ec-pillar__go { color: var(--wp--preset--color--primary); font-weight: 700; }

/* 検索窓：トップの主役。1,620 商品は「見せる」のではなく「探させる」。 */
.ec-search {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	max-width: 42rem;
}
.ec-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: var(--ec-control-h-lg);
	padding: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--ec-radius-md);
}
.ec-search input[type="search"]::placeholder { color: var(--wp--preset--color--contrast-muted); }
.ec-search .ec-btn { width: auto; padding-inline: var(--wp--preset--spacing--50); min-height: var(--ec-control-h-lg); }

.ec-search-hints {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}
.ec-search-hints a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}


/* ==========================================================================
  13. WooCommerce 既定スタイルの上書き
  --------------------------------------------------------------------------
  WooCommerce のデフォルトはピンク寄りの汎用 EC 配色で、この業界には合わない。
  最小限のトークン差し替えで、テーマ側の色に従わせる。
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base-sunken);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--ec-radius-sm);
}
.woocommerce-error {
	border-top-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-tint);
}
.woocommerce-message::before { color: var(--wp--preset--color--cat-template); }
.woocommerce-info::before    { color: var(--wp--preset--color--primary); }
.woocommerce-error::before   { color: var(--wp--preset--color--accent); }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--numeric);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.woocommerce span.onsale {
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
	border-radius: var(--ec-radius-sm);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	min-height: 0;
	min-width: 0;
	padding: 0.2em 0.7em;
	line-height: 1.6;
}

.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce table.shop_attributes {
	border-color: var(--wp--preset--color--line);
	border-radius: var(--ec-radius-sm);
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th {
	background: var(--wp--preset--color--base-sunken);
	color: var(--wp--preset--color--primary-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td { border-color: var(--wp--preset--color--line); }

/* 既定のバリエーション select は隠さず残す（JS 無効時のフォールバック）。
   ラジオ表を採用する場合は 9 章の UI で置換し、select は視覚的にのみ隠す。 */
.ec-variations-enhanced .woocommerce-variation-add-to-cart .variations,
.ec-variations-enhanced table.variations {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--ec-radius-md);
	min-height: var(--ec-control-h);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--accent-strong);
	color: #FFFFFF;
}
/* 「買い物を続ける」等の副次ボタンは輪郭のみに落とす */
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-forward:not(.checkout) {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--line-strong);
}

/* パンくずは階層の把握に必須。84 カテゴリを行き来する前提で常に出す。 */
.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}
.woocommerce-breadcrumb a { color: var(--wp--preset--color--primary); }


/* ==========================================================================
  14. 印刷
  --------------------------------------------------------------------------
  この業界では商品ページを印刷／PDF 化して稟議書に添付する行動が実際にある。
  タブやアコーディオンで本文を隠すと印刷で消えるため、詳細ページの本文は
  常時展開（目次＋通しスクロール）とし、印刷時は全文が出るようにする。
   ========================================================================== */

@media print {
	:root:root {
		--wp--preset--color--base: #FFFFFF;
		--wp--preset--color--base-raised: #FFFFFF;
		--wp--preset--color--base-sunken: #FFFFFF;
		--wp--preset--color--contrast: #000000;
		--wp--preset--color--contrast-muted: #333333;
		--wp--preset--color--line: #999999;
		--wp--preset--color--line-strong: #333333;
	}

	body {
		background: #FFFFFF !important;
		color: #000000 !important;
		font-size: 10.5pt;
		line-height: 1.7;
	}

	.ec-facets,
	.ec-buybar-mobile,
	.ec-chips,
	.wp-block-navigation,
	.ec-search,
	.ec-theme-toggle,
	.woocommerce-breadcrumb,
	[data-ec-noprint] { display: none !important; }

	.ec-layout-product,
	.ec-layout-shop { grid-template-columns: 1fr !important; }

	.ec-buybox {
		position: static !important;
		box-shadow: none !important;
		border: 1pt solid #333333;
		break-inside: avoid;
	}

	/* 選択肢は全件を表に出す。稟議では「他にどの形態があるか」が問われる。 */
	.ec-variations { break-inside: avoid; border: 1pt solid #333333; }
	.ec-variation { break-inside: avoid; }
	.ec-variation:has(.ec-variation__radio:checked)::after {
		content: "← 選択中";
		font-size: 9pt;
		font-weight: 700;
	}

	.ec-row { break-inside: avoid; }
	h1, h2, h3 { break-after: avoid; }
	table, figure, .ec-facts { break-inside: avoid; }

	/* URL を紙面に残す。回覧された紙から辿れるようにする。 */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8.5pt;
		color: #333333;
		word-break: break-all;
	}

	@page {
		margin: 18mm 16mm;
	}
}


/* ==========================================================================
  15. モーション低減・強制カラー
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.ec-badge,
	.ec-topic,
	.ec-pillar,
	.ec-variations,
	.ec-buybox {
		border: 1px solid CanvasText;
	}
	.ec-variation:has(.ec-variation__radio:checked) {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
	.ec-row__rule { forced-color-adjust: none; }
}


/* ==========================================================================
  16. トップページ区画（ブロックパターン用）
  --------------------------------------------------------------------------
  README 第2章の6区画をブロックで組むために必要な、区画の垂直リズムと
  モックアップ側にしか無かった小物だけを定義する。
  新しい色・書体・寸法は一切導入せず、theme.json のトークンだけで構成する。
  （区画の境界は影ではなく罫線。この読者が見慣れているのは罫で区切られた表。）
   ========================================================================== */

.ec-section {
	padding-block: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--line);
}

.ec-hero {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	border-top: 0;
}

.ec-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	color: var(--wp--preset--color--contrast-muted);
}

/* 事業の定義1行。h1 だが「表題」ではなく「定義文」なので display より小さく、
   行間を本文寄り（1.5）に取る。読ませる文であって見せる文ではない。 */
.ec-hero__def {
	max-width: 34rem;
	margin: 0;
	font-size: clamp(1.375rem, 3.4vw, 2.125rem);
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary-strong);
}

.ec-hero__sub {
	max-width: 38rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.ec-hero .ec-search { margin-top: var(--wp--preset--spacing--50); }

.ec-section > h2 {
	margin: 0;
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	line-height: 1.35;
}

/* 区画の導入文。行長は本文と同じ 44rem で止める。 */
.ec-lede {
	max-width: 44rem;
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

/* 断り書き・方針の明示。朱ではなく紺で縁取る（朱は行動色に予約）。 */
.ec-callout {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--ec-radius-sm);
}
.ec-callout > b {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-strong);
}
.ec-callout > p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

/* 未確定の数字であることを、数字そのものの近くで宣言する。
   この読者層は根拠のない数字を減点材料として読むため、
   「まだ確定していない」と書いてあるほうが信用を落とさない。 */
.ec-tbd {
	display: inline-block;
	margin-left: 0.4em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
}

/* 商品フィード（WooCommerce ショートコード）を区画の余白に合わせる */
.ec-section .woocommerce ul.products { margin-block: 0; }
.ec-section .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--primary-strong);
}


/* ==========================================================================
  17. サイトヘッダー／フッター
  --------------------------------------------------------------------------
  親テーマ（Twenty Twenty-Five）の既定ヘッダー／フッターは、
  自動生成のページ一覧（「サンプルページ」等）と TT5 の宣伝文が出るため、
  子テーマ側の parts/ で差し替える。ここはその見た目だけを担う。
   ========================================================================== */

.ec-site-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ec-site-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}
.ec-site-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.ec-site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.ec-site-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}
.ec-site-footer h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--primary-strong);
	letter-spacing: 0.02em;
}
.ec-site-footer ul.wp-block-list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.ec-site-footer ul.wp-block-list li { margin: 0; }
.ec-site-footer a {
	display: inline-block;
	padding: 0.2rem 0;
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}
.ec-site-footer a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.ec-copyright {
	margin: var(--wp--preset--spacing--60) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--xx-small);
}


/* ==========================================================================
  18. トップの商品フィードを行リストにする
  --------------------------------------------------------------------------
  WooCommerce の既定ループは画像カードだが、この商材（セミナー・ひな形・
  書籍・VOD）はサムネイルに情報が無く、1件あたり 570px 前後の高さを
  画像で消費してしまう。README 第3章の判断（既定は行リスト）をここにも適用し、
  画像を落として「商品名＋価格」の1行に畳む。
   ========================================================================== */

.ec-feed ul.products {
	display: block;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.ec-feed ul.products::before,
.ec-feed ul.products::after { content: none; display: none; }

.ec-feed ul.products li.product {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--cat-seminar);
}
.ec-feed ul.products li.product:hover { background: var(--wp--preset--color--base-sunken); }

.ec-feed ul.products li.product > a.woocommerce-loop-product__link {
	display: grid;
	/* 価格側は「¥39,600 – ¥49,500」の価格帯表記が1行に収まる幅を確保する。
	   ここで折り返すと行の高さが倍になり、縦スキャンのリズムが壊れる。 */
	grid-template-columns: minmax(0, 1fr) 13rem;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	align-items: baseline;
	padding: var(--wp--preset--spacing--40);
	text-decoration: none;
	min-height: var(--ec-tap-min);
}

/* 画像に情報が無い商材なので、一覧では画像を出さない */
.ec-feed ul.products li.product img { display: none !important; }

.ec-feed ul.products li.product .woocommerce-loop-product__title {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--primary-strong);
}
.ec-feed ul.products li.product .price {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	text-align: right;
	/* 本文と同じ級数。価格を大きくしても比較の役には立たず、
	   煽りに見えるだけなので、行の中では商品名を主・価格を従に置く。 */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	font-weight: 700;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast) !important;
}

/* 一覧に「カートに入れる」は置かない。行全体が商品ページへの導線であり、
   バリエーション商品は結局ページを開いて形態を選ぶ必要があるため、
   ここに朱のボタンを6個並べても行動は起きず、朱の意味だけが薄まる。 */
.ec-feed ul.products li.product > a.button,
.ec-feed ul.products li.product > .screen-reader-text { display: none !important; }

@media (max-width: 40rem) {
	.ec-feed ul.products li.product > a.woocommerce-loop-product__link {
		grid-template-columns: minmax(0, 1fr);
	}
	.ec-feed ul.products li.product .price {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
		white-space: normal;
	}
}


/* ==========================================================================
  19. タップ領域と、ヘッダーへ自動挿入される重複導線
  --------------------------------------------------------------------------
  ここは「実機で確認して初めて出てくる崩れ」への対処だけを置く。
   ========================================================================== */

/* WooCommerce はブロックテーマのヘッダーにアカウントアイコンを自動で差し込む。
   本サイトのヘッダーには文字で「マイアカウント」を置いてあり導線が重複するうえ、
   アイコンのみの操作子は「色や記号だけに頼らず文字を併記する」という
   本サイトの方針（README 第6章）に反する。
   375px ではヘッダーが2段に折り返す原因にもなるため、表示しない。 */
.ec-site-header .wp-block-woocommerce-customer-account { display: none; }

/* 指で操作する環境では最小タップ領域 44px を確保する（README 第6章）。
   マウス環境で同じことをすると行間が間延びするだけなので、
   pointer: coarse（タッチ）に限定して適用する。 */
@media (pointer: coarse) {
	.ec-site-header .wp-block-navigation__responsive-container-open,
	.ec-site-header .wp-block-navigation__responsive-container-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--ec-tap-min);
		min-height: var(--ec-tap-min);
	}

	.wp-block-site-title a,
	.ec-search-hints a,
	.ec-site-footer a,
	.ec-lede a {
		display: inline-flex;
		align-items: center;
		min-height: var(--ec-tap-min);
	}

	/* モバイルのナビ overlay の項目。既定は 25px しかなく、
	   規制テーマの一覧へ入る主要導線としては小さすぎる。 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: var(--ec-tap-min);
		width: 100%;
	}

	/* 高さを 44px に広げると border-bottom の下線が文字から離れてしまうため、
	   下線は text-decoration に切り替えて文字に追従させる。 */
	.ec-search-hints a {
		border-bottom: 0;
		text-decoration: underline;
		text-underline-offset: 0.18em;
		text-decoration-thickness: 1px;
	}
}


/* --------------------------------------------------------------------------
   実績ブロックの罫線を、列数に依存しない方式へ差し替える。

   もとの実装は「48rem 以下なら1列に落ちている」前提で縦罫を消していたが、
   実際の grid は auto-fit なので 704〜768px では3列のまま縦罫だけが消え、
   数字が仕切りなしで並んでしまっていた（実機確認で判明）。
   1px の gap を罫線の色で塗る方式にすると、何列になっても縦横の罫が正しく出る。
   項目は4つなので 4列／2列／1列のいずれでも空セルが出ない。
   -------------------------------------------------------------------------- */
.ec-facts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
}
.ec-fact,
.ec-fact:last-child {
	border: 0;
	background: var(--wp--preset--color--base-raised);
}
@media (max-width: 60rem) {
	.ec-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
	.ec-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
	.ec-fact,
	.ec-fact:last-child { border: 0; }
}