/* item.css — 商品（okd_item）の詳細ページと商品カード

   詳細ページ（template/single/item.php）と、一覧・関連商品で共用する
   カード（lib/parts/item-card.php）のスタイル。カードは固定ページの
   ショートコード [okadaya_items] でも同じものを使う。

   色は必ずトークン経由。ワイヤーの朱色は彩度がこのサイトのレジスタを
   超えるため、赤は --cta、紺は --accent に読み替えている。

   ブレークポイントはテーマの規約に合わせて 900px（2 カラム化）。
   カードのグリッドだけ 560px でも段を増やす。 */

/* --- ページ全体のガター ---
   .postlist-inner と同じ仕組み: 外側は全幅 + 左右 padding だけを持ち、
   直下の各ブロックを読み幅（960px）で中央寄せする。こうしておくと
   将来フルブリードの帯を足すときに外側を書き換えずに済む。 */
.item-inner {
	padding: var(--wp--preset--spacing--section) clamp(18px, 4vw, 40px);
	box-sizing: border-box;
}
.item-inner > * {
	max-width: var(--content-narrow);
	margin-inline: auto;
}

/* --- 上段（画像 / 商品情報） --- */
.item-top {
	display: grid;
	gap: var(--gap-lg);
}

/* --- 画像 ---
   全画像を重ねて置き、.is-active の 1 枚だけを見せる。JS は
   src を差し替えずクラスを付け替えるだけ（テーマの方針）。 */
.item-main {
	position: relative;
	aspect-ratio: 1;
	background: var(--bg-subtle);
	border-radius: 8px; /* reason: 画像を面として見せるため（スケール値 8 を採用） */
	overflow: hidden;
}
.item-main-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* 商品画像は縦長・横長が混在しうるので切り取らない */
	object-fit: contain;
	opacity: 0;
	/* visibility も切り替えるのは、非表示の画像をスクリーンリーダーが
	   読み上げてしまうのを防ぐため。transition に含めるとフェードアウトの
	   完了後に切り替わる */
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.item-main-img.is-active {
	opacity: 1;
	visibility: visible;
}
/* 画像が 1 枚も無いときのプレースホルダー。一覧グリッドで
   このカードだけ高さが変わって崩れるのを防ぐ */
.item-img-empty {
	display: block;
	background: var(--bg-subtle);
}

.item-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); /* design-lint-ignore: auto-fill の minmax は下限 64px を明示済みで、素の fr ではない */
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}
.item-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	background: var(--bg-subtle);
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	transition: border-color .2s;
}
.item-thumb:hover {
	border-color: var(--accent);
}
.item-thumb.is-active {
	border-color: var(--brand);
}
.item-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 商品情報（右カラム） ---
   .post-title（記事）は --text-lg だが、こちらは 2 カラムの内側に入る
   見出しなので一段落として --text-ml にしている。長い商品名でも
   スペック表とのバランスが崩れない。 */
.item-title {
	margin: 0;
	font-size: var(--text-ml);
	font-weight: 700;
	line-height: 1.5;
}

/* --- スペック表 ---
   dl > div > dt + dd。値が空の項目は PHP 側で行ごと出力しない。 */
.item-spec {
	margin: var(--wp--preset--spacing--40) 0 0;
	border-top: 1px solid var(--line);
}
.item-spec-row {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--line);
}
.item-spec-key {
	color: var(--muted);
	font-size: var(--text-sm);
}
.item-spec-val {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.7;
}

/* --- 価格（詳細・カード共用） --- */
.item-price-in {
	color: var(--cta);
	font-family: var(--font-en);
	font-size: var(--text-ml);
	font-weight: 700;
}
.item-price-ex {
	margin-left: 4px;
	color: var(--muted);
	font-size: var(--text-sm);
}
/* 「お見積りのみ対応」（ACF「価格の扱い」が quote の商品）。
   金額ではないので --cta の赤・Lato は使わず、本文と同じ色・書体の
   まま太字だけで示す。赤くすると隣の商品の実売価格と同じ強さで
   目に入り、金額が入っているように見えてしまう。 */
.item-price-quote {
	color: var(--ink);
	font-size: var(--text-base);
	font-weight: 700;
}

/* --- 購入導線 --- */
.item-buy {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}
.item-buy-sub {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

/* --- ボタン（詳細・カード共用） ---
   ホバーの浮きは common.css の .btnfill が持つ。

   セレクタを a.item-btn としているのは詳細度のため。固定ページに置いた
   ショートコードの出力は .page-body の中に入るので、prose.css の
   「.post-body a / .page-body a」（0,1,1）と競合する。.item-btn だけだと
   (0,1,0) で負け、文字色（--paper）と text-decoration: none が効かない。
   要素セレクタを足して (0,1,1) に揃えると、ソース順（item.css が後）で勝つ。

   修飾子（--cart / --detail / --lg）にも a を付けているのは、親だけ
   (0,1,1) にすると修飾子側 (0,1,0) が負けて padding / font-size の
   上書きが効かなくなるため。 */
a.item-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: 4px;
	color: var(--paper);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	/* transition も prose に奪われるため明示する。common.css の .btnfill
	   （0,1,0）は .page-body a（0,1,1）に負け、transition プロパティごと
	   text-decoration-color .2s に差し替えられてしまう。transition は
	   一括で上書きされるので、負けた側の transform .2s は消える＝
	   ホバーの浮きが瞬時に起きる。ここで同じ値を指定して勝たせる。 */
	transition: background .2s, transform .2s;
}
a.item-btn--cart {
	background: var(--cta);
}
/* お見積り依頼も買い物かごと同じ「主アクション」の枠なので同じ赤にする。
   一覧カードでは隣の「詳細を確認」が --accent（紺）なので、こちらを紺に
   すると 2 つのボタンが見分けられなくなる。 */
a.item-btn--quote {
	background: var(--cta);
}
a.item-btn--detail {
	background: var(--accent);
}
a.item-btn--lg {
	padding: var(--wp--preset--spacing--40);
	font-size: var(--text-md);
}

/* --- 商品説明 ---
   タイポグラフィは prose.css（.post-body を併記している）が担当する。 */
.item-body {
	margin-top: var(--wp--preset--spacing--section);
}

/* --- 関連商品 --- */
.item-related {
	margin-top: var(--wp--preset--spacing--section);
}
.item-related-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--text-ml);
	font-weight: 700;
}

/* --- 「戻る」（上下 2 箇所）---
   行き先はカテゴリに紐づけた一覧の固定ページ。一覧から来たときだけ
   assets/js/item-back.js が href をリファラに差し替え、絞り込みと
   ページ番号を保ったまま返す。 */
.item-back--top {
	margin-bottom: clamp(16px, 2vw, 24px);
}
/* 下は記事詳細（.post-back）と同じ作法で中央に置く。上は「すぐ戻れる」
   ための小さな出口なので左揃えのまま流す。 */
.item-back--bottom {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--section);
}
.item-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--ink2);
}
.item-back-arrow {
	transition: transform .25s;
}
.item-back-link:hover .item-back-arrow {
	transform: translateX(-5px); /* 後退＝左へ動かす（.arrowlnk の右移動とは逆） */
}

/* --- 商品カテゴリのボタン一覧（関連商品の下）---
   関連商品は「同じカテゴリ」しか出さないので、他カテゴリへ渡る導線をここで作る。
   行き先は各カテゴリの一覧ページ ＋ ?item_filter=<スラッグ>。 */
.item-cats {
	margin-top: var(--wp--preset--spacing--section);
}
.item-cats-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--text-ml);
	font-weight: 700;
}
.item-cats-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}
/* 一覧の .item-filter-item（テキストリンク）とは別物。あちらは同じページ内の
   切り替え、こちらは別ページへの移動なので、面を持たせてボタンとして見せる。 */
.item-cats-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h-sm);
	padding: 0 var(--wp--preset--spacing--40);
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.item-cats-link:hover {
	color: var(--brand);
	border-color: var(--brand);
}
@media (prefers-reduced-motion: reduce) {
	.item-back-arrow,
	.item-cats-link {
		transition: none;
	}
}

/* --- カードのグリッド（関連商品・一覧で共用） ---
   列数はショートコードの cols 属性（2 / 3 / 4）で切り替える。
   狭い幅では列数指定によらず 1 列 → 2 列と段階的に増やす。 */
.item-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-md);
}

/* --- 一覧のカテゴリ絞り込み ---
   item_cat はアーカイブを無効にしてあるため、投稿一覧（.postlist-filter）の
   ようにターム別 URL へは飛ばせない。同じ固定ページに留まり ?item_filter= で
   切り替える。見た目は .postlist-filter と揃えてある（blog.css は固定ページで
   読まないので共用せず、ここに持つ）。

   a. を付けて (0,1,1) にしているのは、固定ページ本文では prose.css の
   .page-body a（0,1,1）に負けるため。同点ならソース順で item.css が勝つ。
   transition は負けると指定が丸ごと消えるので、ここでも明示する。 */
.item-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-md);
	/* 区切り罫線は置かない。直下のカードと二重線に見えるため余白だけで分ける。 */
	margin-bottom: clamp(20px, 2.5vw, 28px);
}
a.item-filter-item {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--muted);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}
a.item-filter-item:hover {
	color: var(--brand);
}
a.item-filter-item.is-current {
	color: var(--brand);
	font-weight: 700;
	border-bottom-color: var(--brand);
}

/* --- ショートコード一覧 --- */
.item-list-empty {
	padding: var(--wp--preset--spacing--60) 0;
	color: var(--muted);
	font-size: var(--text-base);
	text-align: center;
}

/* --- カード --- */
.item-card {
	display: flex;
	flex-direction: column;
	/* グリッド内で高さを揃え、ボタンを下端に寄せられるようにする */
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px; /* reason: 商品カードとして面を持たせるため（スケール値 8 を採用） */
	box-sizing: border-box;
}
.item-card-media {
	display: block;
	aspect-ratio: 1;
	background: var(--bg-subtle);
	border-radius: 4px;
	overflow: hidden;
}
.item-card-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* ゆっくり拡大。カーブは common.css の .cardlift と同じ減速で揃える */
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
/* img に限定しているのは、画像が無いときのプレースホルダー
   （span.item-img-empty）まで拡大させないため。
   カード全体は浮かせず、実際に押せる画像だけが反応する。 */
.item-card-media:hover img.item-card-img {
	transform: scale(1.04);
}
.item-card-title {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.6;
}
.item-card-title a {
	color: inherit;
	text-decoration: none;
	/* ボタンと同じ理由。common.css の .lnk（transition: color .2s）が
	   prose に奪われ、ホバーの色変化が瞬時になるため明示する */
	transition: color .2s;
}
/* p.〜 としているのはボタンと同じ詳細度の理由。ショートコードの出力は
   .page-body の中に入るため、prose.css の「.page-body p」（line-height: 1.9）
   を拾ってしまい、詳細ページの関連商品と一覧とで同じカードの行間が変わる。 */
p.item-card-price {
	margin: var(--wp--preset--spacing--20) 0 0;
	line-height: 1.5;
	text-align: center;
}
/* カード内は詳細ページより一段小さく */
.item-card-price .item-price-in {
	font-size: var(--text-md);
}
.item-card-price .item-price-ex {
	display: block;
	margin-left: 0;
}
.item-card-price .item-price-quote {
	font-size: var(--text-sm);
}
.item-card-actions {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	/* 商品名の行数が違ってもボタンの位置が揃う */
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* --- レスポンシブ ---
   カードは 560px で 2 列、900px で 3 列。min-width 任せにすると
   560〜640px 付近で 3 列になって窮屈なため段階を明示する。 */
@media (min-width: 560px) {
	.item-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.item-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.item-buy-sub {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.item-grid,
	.item-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.item-grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.item-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- モーション軽減の設定を尊重する --- */
@media (prefers-reduced-motion: reduce) {
	.item-card-img,
	.item-main-img,
	.item-thumb,
	a.item-btn {
		transition: none;
	}
	.item-card-media:hover img.item-card-img,
	a.item-btn:hover {
		transform: none;
	}
}