/* 商品ページの購入ボックス・並び・画像（includes/product-display.php） */

.jgd-purchase {
	--jgd-border: #e2e2e2;
	--jgd-muted: #666;
	--jgd-box-bg: #f7f8f9;
	--jgd-button-bg: var(--accent, #1e73be); /* GeneratePress のグローバルカラーの「accent」 */
	--jgd-buy-bg: #F3B13C; /* 収益リンクのボタン（山吹色・spec.md §2） */
	--jgd-buy-text: #1F1D1B;
	--jgd-badge-bg: #fff3e0;
	--jgd-badge-text: #8a4b00;
	margin: 2em 0;
	padding: 1.25em 1.5em;
	border: 1px solid var(--jgd-border);
	border-radius: 6px;
	background: var(--jgd-box-bg);
}

@media (max-width: 600px) {
	.jgd-purchase {
		padding: 1em;
	}
}

.jgd-purchase h2 {
	margin: 0 0 0.75em;
	font-size: 1.4em;
}

.jgd-purchase p {
	margin: 0 0 0.75em;
}

.jgd-purchase small {
	display: inline-block;
	margin-top: 0.2em;
	color: var(--jgd-muted);
	font-size: 0.8em;
	line-height: 1.5;
}

.jgd-purchase__badges {
	position: relative; /* i の説明（.jgd-badge-info__text）の位置の基準 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em;
	margin: 0 0 0.75em;
}

.jgd-purchase .jgd-badge {
	padding: 0.1em 0.5em;
	border-radius: 3px;
	background: var(--jgd-badge-bg);
	color: var(--jgd-badge-text);
	font-size: 0.85em;
	font-weight: 600;
}

/* 招待制のバッジは枠で囲む（2026-10-26、運営者） */
.jgd-purchase .jgd-badge--invite {
	border: 1px solid var(--jgd-badge-text);
}

/* i を押すと説明が開くバッジ（details） */
.jgd-badge-info > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	cursor: pointer;
	list-style: none;
}

.jgd-badge-info > summary::-webkit-details-marker {
	display: none;
}

.jgd-badge-info__icon {
	display: inline-grid;
	place-items: center;
	width: 1.3em;
	height: 1.3em;
	border: 1px solid var(--jgd-badge-text);
	border-radius: 50%;
	color: var(--jgd-badge-text);
	font-family: Georgia, serif;
	font-size: 0.85em;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

/* 説明はバッジの列の上に重ねて出し、ページの並びを動かさない（2026-10-26、運営者）。幅はバッジの列に合わせる */
.jgd-purchase .jgd-badge-info__text {
	position: absolute;
	bottom: calc(100% + 0.4em);
	right: 0;
	left: 0;
	z-index: 1000; /* 上に出すので、ヘッダーより前に出す */
	margin: 0;
	padding: 0.6em 0.8em;
	border: 1px solid var(--jgd-border);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	font-size: 0.9em;
}

.jgd-purchase__price {
	font-size: 1.1em;
	font-weight: 600;
}

.jgd-purchase__price small {
	font-weight: normal;
}

/* リンクはボタンにする。収益リンク（Amazon・代行）は塗り、参考リンク（販売店・eBay）は枠だけ */
.jgd-purchase__links {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

.jgd-purchase__link {
	margin: 0;
}

/* ほかの店のボタンの上の「Check the price on …」。Amazon の値段の行と同じく、ボタンの上に置く */
.jgd-purchase__link-note {
	display: block;
	margin: 0.4em 0 0.35em;
}

.jgd-purchase__link a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	padding: 0.75em 1em;
	border: 1px solid var(--jgd-button-bg);
	border-radius: 4px;
	background: #fff;
	color: var(--jgd-button-bg);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.jgd-purchase__link a[data-jgd-click="revenue"] {
	border-color: var(--jgd-buy-bg);
	background: var(--jgd-buy-bg);
	color: var(--jgd-buy-text);
}

.jgd-purchase__link a:hover,
.jgd-purchase__link a:focus-visible {
	opacity: 0.85;
}

/* 外部リンクのアイコン。ホバーで矢印が右上へ少し動く */
.jgd-ext-icon {
	flex: none;
	width: 1em;
	height: 1em;
}

.jgd-ext-icon__arrow {
	transition: transform 0.2s ease-in-out;
}

.jgd-purchase__link a:hover .jgd-ext-icon__arrow,
.jgd-purchase__link a:focus-visible .jgd-ext-icon__arrow {
	transform: translate(1.5px, -1.5px);
}

@media (prefers-reduced-motion: reduce) {
	.jgd-ext-icon__arrow {
		transition: none;
	}
}

.jgd-purchase__howto,
.jgd-purchase__note,
.jgd-purchase__editions-title {
	font-size: 0.95em;
}

/* 買い方のページへのリンク。作品の一覧へのリンク（page-parts.css の .jgd-related__more）と同じ枠付きの見た目で、中央に置く（2026-10-23、運営者） */
.jgd-purchase__guide {
	text-align: center;
}

.jgd-purchase__guide a {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid var(--accent, #C8381E);
	border-radius: 4px;
	color: var(--accent, #C8381E);
	font-weight: 600;
	text-decoration: none;
}

.jgd-purchase__guide a::after {
	content: " \2192";
}

.jgd-purchase__guide a:hover,
.jgd-purchase__guide a:focus-visible {
	background: var(--accent, #C8381E);
	color: #fff;
}

.jgd-purchase__editions {
	margin: 0 0 0.75em 1.5em;
	font-size: 0.95em;
}

.jgd-purchase > :last-child {
	margin-bottom: 0;
}

/*
 * 商品ページの並び（includes/product-display.php の render_product_layout()）
 * スマホ: 商品名 → 画像 → 購入ボックス → 説明 → FAQ → 公式・参考のリンク。
 * タブレット（769〜1024px）: 左に画像、右に 商品名 → 説明 → 購入ボックス。FAQ・リンクはその下に全幅。
 * PC（1025px〜）: 画像 ｜ 商品名・説明・FAQ・リンク ｜ 購入ボックス の3列（Amazon の商品ページの形）。
 * 文字の大きさは商品ページだけ小さくする（テーマの h1 42px・h2 35px は3列には大きい）。
 */
.jgd-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "image" "buy" "desc" "faq" "links";
}

.jgd-product--no-image {
	grid-template-areas: "title" "buy" "desc" "faq" "links";
}

.jgd-product__title {
	grid-area: title;
	margin-bottom: 0.75em;
	font-size: 1.5rem;
	line-height: 1.3;
}

.jgd-product h2 {
	font-size: 1.25rem;
}

/* FAQ の問い（includes/product-display.php の extract_product_faq()）。h2 より小さく */
.jgd-product h3 {
	font-size: 1.05rem;
	font-weight: 600;
}

.jgd-product__image {
	grid-area: image;
}

.jgd-product__desc {
	grid-area: desc;
	min-width: 0;
}

.jgd-product-faq {
	grid-area: faq;
	min-width: 0;
}

.jgd-product-links {
	grid-area: links;
	min-width: 0;
}

.jgd-product > .jgd-purchase {
	grid-area: buy;
	margin-top: 0;
}

@media (min-width: 769px) {
	.jgd-product {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas: "image title" "image desc" "image buy" "faq faq" "links links";
		column-gap: 2.5em;
	}

	.jgd-product--no-image {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "title" "desc" "buy" "faq" "links";
	}

	.jgd-product__image {
		align-self: start;
	}

	.jgd-product > .jgd-purchase {
		align-self: start;
		margin: 1em 0 0;
	}

	.jgd-product__title {
		font-size: 1.75rem;
	}
}

@media (min-width: 1025px) {
	.jgd-product {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas: "image title buy" "image desc buy" "image faq buy" "image links buy";
		column-gap: 2em;
	}

	.jgd-product--no-image {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas: "title buy" "desc buy" "faq buy" "links buy";
	}

	.jgd-product > .jgd-purchase {
		margin: 0;
		padding: 1em 1.25em;
	}
}

/* 自分で撮った写真の節（includes/product-display.php の extract_product_photos()）。どの幅でも2列 */
.jgd-product-photos__credit {
	color: var(--contrast-2, #625D57);
	font-size: 0.9em;
}

.jgd-product-photos__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75em;
}

.jgd-product-photos__grid figure {
	margin: 0;
}

.jgd-product-photos__grid img {
	display: block;
	width: 100%;
	height: auto;
}

/* 商品ページの画像（アイキャッチか Amazon の画像） */
.jgd-product-image {
	margin: 0 0 1.5em;
	text-align: center;
}

.jgd-product-image img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 500px;
}