/* Affilicard 商品カード — フロント + エディタ共通スタイル。
   block 注入の --affilicard-card-bg / --affilicard-card-border / --affilicard-cta-bg /
   --affilicard-cta-text を維持しつつ、Claude Design 由来のオレンジ系トークンを既定値に組み込む。 */

/* カード配下のみ border-box（CTA 等のはみ出し防止。ホストテーマには影響させない）。 */
.affilicard-card,
.affilicard-card *,
.affilicard-card *::before,
.affilicard-card *::after {
	box-sizing: border-box;
}

.affilicard-card {
	/* コンテナクエリの基準。レスポンシブ切替を viewport ではなくカード自身の幅で
	   判定し、サイドバー等でカードが狭いコンテナに入った場合も正しく縦積みに切替える
	   （価格とボタンの重なり・右はみ出しを防ぐ）。 */
	container-type: inline-size;
	/* block から上書きされる themeable 変数（card-bg/border のみ既定値を持つ）。
	   --affilicard-cta-bg / --affilicard-cta-text は意図的に未定義のまま：
	   CardRenderer がインラインで var(--affilicard-cta-bg, <brandColor>) と書くため、
	   ここで既定値を定義すると brand 色フォールバックを潰してしまう。
	   block が per-instance 色を注入したときだけ root inline style で定義される。 */
	--affilicard-card-bg: #ffffff;
	--affilicard-card-border: #d4cfc8;
	/* デザイントークン（テーマ/ブロックで上書き可能な既定値） */
	--affilicard-accent: #ff6700;
	--affilicard-text: #1a1612;
	--affilicard-text-mid: #5e5a56;
	--affilicard-text-light: #8c8884;
	--affilicard-border: #e8e3de;
	--affilicard-badge-bg: #fff4ed;
	--affilicard-badge-border: #f0c9a8;
	--affilicard-footer-bg: #faf9f8;
	--affilicard-radius: 14px;

	border: 1.5px solid var(--affilicard-card-border);
	border-radius: var(--affilicard-radius);
	overflow: hidden;
	background: var(--affilicard-card-bg);
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.07),
		0 1px 3px rgba(0, 0, 0, 0.04);
	color: var(--affilicard-text);
	font-size: 15px;
	line-height: 1.7;
}

/* 2 カラム: 書影左 160px ｜ 本文右 */
.affilicard-card__inner {
	display: grid;
	grid-template-columns: 160px 1fr;
	align-items: stretch;
}

/* 商品画像を出さない設定のとき。画像カラムを描画しないので本文を全幅にする
   （160px の列が残ると本文がその幅に押し込まれる）。 */
.affilicard-card--no-media .affilicard-card__inner {
	grid-template-columns: 1fr;
}

/* メディア枠: inline aspect-ratio は枠自体ではなく内側の実画像/マスクカバー/プレースホルダ
   側に付与する（CardRenderer 側）。type 別の比率がそのまま実際の content box（= 表示される
   画像領域そのもの）に適用され、枠の padding が比率を歪ませることはない。grid item は
   親 .affilicard-card__inner の align-items:stretch の対象になり、本文カラムが長いと
   行の高さまで引き伸ばされてしまうため、align-self:start でこの grid item だけストレッチを
   止め、内容以上に高さが伸びないようにする（従来の align-items:flex-start と同じ上寄せにもなる）。 */
.affilicard-card__media {
	padding: 20px;
	display: block;
	align-self: start;
}

.affilicard-card__media-image {
	width: 100%;
	/* inline aspect-ratio(要素自身に付与) が幅 100% から高さを計算するため auto にする。 */
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 8px;
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.07),
		0 1px 3px rgba(0, 0, 0, 0.04);
}

.affilicard-card__media-placeholder {
	width: 100%;
	/* inline aspect-ratio(要素自身に付与) が幅 100% から高さを計算するため auto にする。 */
	height: auto;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #eef1ee;
	color: var(--affilicard-text-light);
}

.affilicard-card__media-placeholder-icon {
	color: var(--affilicard-text-light);
	opacity: 0.7;
}

.affilicard-card__media-placeholder-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* 表紙マスク（ぼかし・R18 バッジ・ラベル）。マスク時のみ __cover ラッパが入り、
   inline aspect-ratio はこの __cover 側が持つ（内側のぼかし画像は持たない）。
   width:100% + aspect-ratio で definite box になるため height は auto にする。 */
.affilicard-card__cover {
	position: relative;
	width: 100%;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.07),
		0 1px 3px rgba(0, 0, 0, 0.04);
}

.affilicard-card__cover-blur {
	display: block;
	width: 100%;
	height: 100%;
}

.affilicard-card__cover-blur img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

.affilicard-card__cover--masked .affilicard-card__cover-blur img {
	/* scale で拡大し、ぼかしの透明エッジがラッパ外へ出ないようにする。 */
	filter: blur(14px);
	transform: scale(1.08);
}

.affilicard-card__cover-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
	padding: 8px;
	text-align: center;
}

.affilicard-card__cover-badge {
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.affilicard-card__cover-label {
	max-width: 100%;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	padding: 4px 8px;
	border-radius: 4px;
	word-break: break-word;
}

.affilicard-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 20px;
}

/* 書誌ヘッダ・タイトル・あらすじ・extras は本文上部にパディングでまとめる */
.affilicard-card__meta,
.affilicard-card__title,
.affilicard-card__desc,
.affilicard-card__extras,
.affilicard-card__badge,
.affilicard-card__preorder {
	margin-left: 20px;
	margin-right: 20px;
}

.affilicard-card__meta {
	margin-top: 0;
	font-size: 11px;
	color: var(--affilicard-text-light);
}

.affilicard-card__title {
	margin-top: 4px;
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

/* 先頭要素（meta が無い汎用型では title）は body の上パディングに揃え上マージンを相殺する。 */
.affilicard-card__body > :first-child {
	margin-top: 0;
}

/* 本文の最後が店舗リスト以外のとき、カード下端に貼り付くのを防ぐ。
   在庫切れ・取扱終了は CTA を出さないためバッジが最後の要素になり、
   商品画像も無いと本文がカードの高さをそのまま決めて下辺と接する。
   店舗リストは自前で行の枠と区切り線を持つので対象外にする。 */
.affilicard-card__body > :last-child:not(.affilicard-card__listings) {
	margin-bottom: 20px;
}

.affilicard-card__badge {
	display: inline-block;
	align-self: flex-start;
	margin-top: 10px;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffffff;
	background: #6b7280;
}

.affilicard-card__badge--out_of_stock {
	background: #d97706;
}

.affilicard-card__badge--discontinued {
	background: #b91c1c;
}

.affilicard-card__badge--preorder {
	background: #fde68a;
	color: #92400e;
}

.affilicard-card__preorder {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

.affilicard-card__preorder .affilicard-card__badge {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}

.affilicard-card__release-date {
	font-size: 0.85em;
	font-weight: 600;
	color: #b45309;
}

.affilicard-card__desc {
	margin-top: 10px;
	font-size: 13px;
	color: var(--affilicard-text-mid);
	line-height: 1.75;
}

.affilicard-card__extras {
	margin-top: 12px;
	font-size: 0.85rem;
}

.affilicard-card__extra {
	display: flex;
	gap: 8px;
}

.affilicard-card__extra dt {
	flex: 0 0 6em;
	font-weight: 600;
	color: var(--affilicard-text-light);
}

.affilicard-card__extra dd {
	margin: 0;
}

/* 店舗行: 上罫線で本文と区切り、行間も罫線。ul のリストリセットを含む。 */
.affilicard-card__listings {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	border-top: 1px solid var(--affilicard-border);
}

.affilicard-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--affilicard-border);
}

.affilicard-card__row:last-child {
	border-bottom: none;
}

.affilicard-card__platform {
	width: 114px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--affilicard-text);
}

.affilicard-card__pricing {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}

.affilicard-card__list-price {
	font-size: 13px;
	color: var(--affilicard-text-light);
	text-decoration: line-through;
}

.affilicard-card__price {
	font-size: 20px;
	font-weight: 700;
	color: var(--affilicard-text);
}

.affilicard-card__tax {
	font-size: 11px;
	color: var(--affilicard-text-light);
}

.affilicard-card__discount {
	font-size: 11px;
	font-weight: 700;
	background: var(--affilicard-badge-bg);
	color: var(--affilicard-accent);
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid var(--affilicard-badge-border);
}

/* CTA の背景/文字色はプラットフォーム別ブランド色を CardRenderer がインラインで付与する
   （style="background:var(--affilicard-cta-bg,<brand>);color:var(--affilicard-cta-text,<text>);"）。
   ここでは形状とホバー挙動のみを定義し、色はインラインに委ねる。 */
.affilicard-card__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.affilicard-card__cta:hover {
	opacity: 0.9;
	transform: scale(1.02);
}

/* 価格時点フッタ: グリッド外・カード全幅 */
.affilicard-card__timestamp {
	padding: 8px 20px;
	background: var(--affilicard-footer-bg);
	border-top: 1px solid var(--affilicard-border);
	font-size: 11px;
	color: var(--affilicard-text-light);
}

/* 狭幅: 1 カラム、書影トップ中央、店舗行は縦積み。
   コンテナクエリ（カード自身の幅）で判定するため、viewport が広くてもカードが
   狭いコンテナ（サイドバー等）にあれば縦積みに切替わり、価格とボタンの重なりや
   右はみ出しを防ぐ。 */
@container (max-width: 600px) {
	.affilicard-card__inner {
		grid-template-columns: 1fr;
	}

	.affilicard-card__media {
		padding: 20px 20px 0;
	}

	/* aspect-ratio は枠(.affilicard-card__media)ではなく内側の実画像/マスクカバー/
	   プレースホルダ側にあるため、幅 100px もその子要素側で指定する。inline aspect-ratio
	   と組み合わせて type 比率どおりの content box（2:3 なら 100×150 / 1:1 なら 100×100）に
	   なる。枠自体は幅を持たない（display:block のフルwidth）ため、margin:0 auto で
	   子要素側を水平中央寄せする。 */
	.affilicard-card__media-image,
	.affilicard-card__media-placeholder,
	.affilicard-card__cover {
		width: 100px;
		margin: 0 auto;
	}

	.affilicard-card__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.affilicard-card__platform {
		width: auto;
	}

	.affilicard-card__cta {
		width: 100%;
	}
}