/* ==========================================================================
   corop — 商品一覧（archive-product.php 専用）
   基準: Figma PC 1280px を ×1.125 でスケール（トップ・FAQと同じ換算）
        Figma SP 402px → 実機 375px 想定
   ※色トークン・フォントは header-footer.css の :root で定義（先に読み込む）
   ※トップページの .products 系とはクラス名を分けている（.product- プレフィックス）
   ========================================================================== */

.product-archive {
	padding: 87px 24px 193px; /* Figma 77 / 172 × 1.125 */
	color: var(--corop-ink, #4c4948);
	font-family: var(--corop-font, "Avenir", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif);
}

/* ===== 見出し ===== */
.product-head {
	text-align: center;
}
.product-head__title {
	margin: 0;
	color: var(--corop-orange, #d79000);
	font-size: 53px; /* Figma 46.8 × 1.125 */
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.15;
}
.product-head__sub {
	margin: 6px 0 0;
	color: var(--corop-orange, #d79000);
	font-size: 20px; /* Figma 18.2 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.6;
}

/* ===== 商品カード ===== */
.product-list {
	margin-top: 21px;
}
.product-card {
	display: flex;
	align-items: center;
	gap: 53px; /* Figma 47.4 × 1.125 */
	max-width: 888px; /* Figma 788 × 1.125 */
	margin-inline: auto;
}
.product-card + .product-card {
	margin-top: 120px;
}

/* 写真 ＋ 背景の布 */
/* 商品ビジュアルは「袋＋チェック布＋フード皿」を1枚に書き出した画像。
   トップページ（.products__photo）と同じ素材を使う */
.product-card__visual {
	flex: 0 0 auto;
	width: 494px; /* Figma 439.57 × 1.125 */
}
.product-card__photo {
	display: block;
	width: 100%;
	height: auto;
}

/* 商品情報 */
.product-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.product-card__title {
	margin: 0;
	font-size: 24px; /* Figma 21 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.35;
}
.product-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 21px 0 0;
	padding: 0;
	list-style: none;
}
.product-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px; /* Figma 30 × 1.125 */
	padding: 2px 22px;
	white-space: nowrap;
	text-indent: 0.2em; /* letter-spacing の末尾余白ぶんを戻して中央に見せる */
	border: 2px solid var(--corop-orange, #d79000);
	border-radius: 22px;
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
	font-size: 16px; /* Figma 14 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
}
.product-card__lead {
	max-width: 304px; /* Figma 270 × 1.125 */
	margin: 25px 0 0;
	font-size: 15px; /* Figma 13 × 1.125 */
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.product-card__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 226px;  /* Figma 201 × 1.125 */
	height: 62px;  /* Figma 55 × 1.125 */
	margin-top: 49px;
	border: 2px solid var(--corop-orange, #d79000);
	border-radius: 5px;
	background: var(--corop-paper, #f3f2f1);
	color: var(--corop-orange, #d79000);
	font-size: 19px; /* Figma 17 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.product-card__more:hover {
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
}

/* ===== ページャ / 空状態 ===== */
.product-pagination {
	max-width: 888px;
	margin: 80px auto 0;
	text-align: center;
	letter-spacing: 0.1em;
}
.product-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	color: inherit;
	text-decoration: none;
}
.product-pagination .page-numbers.current {
	color: var(--corop-orange, #d79000);
	font-weight: 500;
}
.product-empty {
	margin-top: 80px;
	text-align: center;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   SP（Figma node 260:14617）
   ========================================================================== */
@media (max-width: 768px) {
	.product-archive {
		padding: 44px 20px 60px;
	}

	.product-head__title {
		font-size: 33px; /* Figma 32.8 */
	}
	.product-head__sub {
		margin-top: 4px;
		font-size: 15px; /* Figma 15.2 */
	}

	.product-list {
		margin-top: 20px;
	}
	.product-card {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		max-width: none;
		text-align: center;
	}
	.product-card + .product-card {
		margin-top: 72px;
	}

	.product-card__visual {
		width: 294px; /* Figma 315 × 0.933 */
		margin-inline: auto;
	}

	.product-card__body {
		width: 100%;
	}
	.product-card__title {
		font-size: 21px;
	}
	.product-card__badges {
		justify-content: center;
		gap: 8px;
		margin-top: 14px;
	}
	.product-card__badge {
		min-height: 26px;
		padding: 2px 20px;
		border-width: 1px;
		font-size: 12px;
	}
	.product-card__lead {
		max-width: none;
		margin-top: 14px;
		font-size: 13px;
	}
	.product-card__more {
		width: 161px;
		height: 44px;
		margin-top: 20px;
		font-size: 14px;
	}
}