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

.pd {
	--pd-content: 1026px; /* Figma 912 × 1.125 */
	--pd-line: rgba(76, 73, 72, 0.25);

	max-width: var(--pd-content);
	margin-inline: auto;
	padding: 163px 24px 120px;
	color: var(--corop-ink, #4c4948);
	font-family: var(--corop-font, "Avenir", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif);
}

/* ==========================================================================
   商品概要
   ========================================================================== */
.pd-hero {
	display: flex;
	align-items: flex-start;
	gap: 63px; /* Figma 56 × 1.125 */
}

/* ----- 画像 ----- */
.pd-gallery {
	flex: 0 0 auto;
	width: 529px; /* Figma 470 × 1.125 */
}
.pd-gallery__main img {
	display: block;
	width: 529px;
	height: 525px; /* Figma 467 × 1.125 */
	object-fit: cover;
}
.pd-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.pd-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
}
.pd-gallery__thumb img {
	display: block;
	width: 100%;
	height: 142px; /* Figma 126 × 1.125 */
	object-fit: cover;
}
.pd-gallery__thumb.is-active {
	border-color: var(--corop-orange, #d79000);
}

/* ----- 右カラム ----- */
.pd-summary {
	flex: 1 1 auto;
	min-width: 0;
}
.pd-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pd-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 2px 22px;
	border-radius: 22px;
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	white-space: nowrap;
	text-indent: 0.2em;
}
.pd-title {
	margin: 23px 0 0;
	font-size: 24px; /* Figma 21 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.35;
}
.pd-volume {
	margin: 9px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.pd-lead {
	max-width: 400px;
	margin: 34px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

/* ----- こんなわんちゃんにおすすめ ----- */
.pd-recommend {
	margin-top: 10px;
	padding: 16px 24px 22px 51px;
	background: rgba(217, 217, 217, 0.4);
}
.pd-recommend__title {
	margin: 0;
	font-size: 19px; /* Figma 17 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
}
.pd-recommend__list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.pd-recommend__list li {
	position: relative;
	padding-left: 31px;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.pd-recommend__list li + li {
	margin-top: 18px;
}
.pd-recommend__list li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 21px; /* Figma 19 × 1.125 */
	height: 21px;
	background: #d9d9d9;
}

/* ----- 価格 ----- */
.pd-price {
	position: relative;
	margin-top: 22px;
}
.pd-price__label {
	margin: 0;
	font-size: 16px; /* Figma 14.25 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2;
}
.pd-price__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 10px;
	border-top: 1px solid var(--pd-line);
}
.pd-price__value {
	margin: 0;
	font-size: 36px; /* Figma 31.685 × 1.125 */
	font-weight: 500;
	line-height: 1.05;
}
.pd-price__tax {
	margin-left: 4px;
	font-size: 20px; /* Figma 19.95 × 1.125 */
	white-space: nowrap;
}
.pd-price__before {
	margin: 0;
	font-size: 27px; /* Figma 23.978 × 1.125 */
	font-weight: 500;
	line-height: 1.05;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}
/* 定期購入は右端に丸バッジを重ねるぶん、価格の折り返し幅を確保する */
.pd-price--sub .pd-price__row {
	gap: 10px;
	padding-right: 112px;
}

/* 割引の丸バッジ */
.pd-off {
	position: absolute;
	right: 0;
	bottom: 62px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 109px; /* Figma 97 × 1.125 */
	height: 109px;
	border-radius: 50%;
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
	line-height: 1.1;
	text-align: center;
}
.pd-off__prefix {
	font-size: 21px; /* Figma 19.042 × 1.125 */
	font-weight: 500;
}
.pd-off__body {
	font-size: 33px; /* Figma 29.428 × 1.125 */
	font-weight: 800;
	letter-spacing: -0.04em;
}

/* 購入ボタン */
.pd-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 260px; /* Figma 231.4 × 1.125 */
	height: 52px;  /* Figma 46.6 × 1.125 */
	margin-top: 14px;
	border: 2px solid var(--corop-ink, #4c4948);
	border-radius: 999px;
	background: var(--corop-white, #fff);
	color: var(--corop-ink, #4c4948);
	font-size: 18px; /* Figma 16 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.pd-buy--sub {
	border-color: var(--corop-orange, #d79000);
	color: var(--corop-orange, #d79000);
}
.pd-buy--regular:hover {
	background: var(--corop-ink, #4c4948);
	color: var(--corop-white, #fff);
}
.pd-buy--sub:hover {
	background: var(--corop-orange, #d79000);
	color: var(--corop-white, #fff);
}

/* ==========================================================================
   セクション共通（商品の特徴 / 給与方法 / Q＆A / 全成分）
   ========================================================================== */
.pd-section {
	margin-top: 132px;
}
.pd-section__title {
	margin: 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--pd-line);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.3;
}

/* ----- 商品の特徴 ----- */
.pd-feature-lead {
	margin: 26px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.pd-points {
	margin-top: 50px;
	padding: 62px 87px;
	border-radius: 21px; /* Figma 19 × 1.125 */
	background: rgba(215, 144, 0, 0.1);
}
.pd-point {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.pd-point + .pd-point {
	margin-top: 55px;
}
.pd-point__body {
	flex: 1 1 auto;
	min-width: 0;
}
.pd-point__title {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.35;
}
.pd-point__label {
	display: block;
	color: var(--corop-orange, #d79000);
	font-weight: 800;
}
.pd-point__name {
	display: block;
}
.pd-point__text {
	margin: 16px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.pd-point__visual {
	flex: 0 0 auto;
	width: 306px; /* Figma 272 × 1.125 */
}
.pd-point__visual img {
	display: block;
	width: 306px;
	height: 201px; /* Figma 179 × 1.125 */
	object-fit: cover;
}

/* ----- 給与方法 ----- */
.pd-table-wrap {
	margin-top: 45px;
	overflow-x: auto;
}
.pd-table {
	width: 680px; /* Figma 604 × 1.125 */
	margin-inline: auto;
	border-collapse: collapse;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-align: center;
}
.pd-table th,
.pd-table td {
	height: 56px; /* Figma 50 × 1.125 */
	padding: 6px 8px;
	border: 1px solid #e1e1e1;
	font-weight: 500;
	vertical-align: middle;
}
.pd-table thead th,
.pd-table tbody th {
	background: var(--corop-light-olive, #dcd7c4);
}
.pd-table tbody td {
	background: var(--corop-white, #fff);
	font-weight: 400;
}
.pd-feeding-note {
	margin: 38px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

/* ----- Q＆A ----- */
.pd-qa {
	margin-top: 48px;
}
.pd-qa__item + .pd-qa__item {
	margin-top: 34px;
}
.pd-qa__q {
	display: flex;
	align-items: center;
	min-height: 46px;
	margin: 0;
	padding: 8px 24px;
	background: var(--corop-olive-tint, rgba(157, 138, 60, 0.2));
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.5;
}
.pd-qa__a {
	margin: 16px 0 0;
	padding: 0 22px;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

/* ----- 全成分 ----- */
.pd-ingredients {
	margin: 42px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

/* ==========================================================================
   SP（Figma node 260:14835）
   ========================================================================== */
@media (max-width: 768px) {
	.pd {
		padding: 28px 20px 60px;
	}

	.pd-hero {
		display: block;
	}

	.pd-gallery {
		width: auto;
		margin-inline: -20px; /* SP は画像を全幅に */
	}
	.pd-gallery__main img {
		width: 100%;
		height: 340px;
	}
	.pd-gallery__thumbs {
		gap: 8px;
		margin: 8px 20px 0;
	}
	.pd-gallery__thumb img {
		height: 84px;
	}

	/* SP は Figma の並び順（商品名 → 内容量 → バッジ → 説明）に組み替える */
	.pd-summary {
		display: flex;
		flex-direction: column;
		margin-top: 26px;
		text-align: center;
	}
	.pd-title    { order: 1; }
	.pd-volume   { order: 2; }
	.pd-badges   { order: 3; justify-content: center; }
	.pd-lead     { order: 4; }
	.pd-recommend { order: 5; }
	.pd-price    { order: 6; }
	.pd-price--sub { order: 7; }
	.pd-badge {
		min-height: 30px;
		padding: 2px 18px;
		font-size: 14px;
	}
	.pd-title {
		margin: 0 0 10px;
		font-size: 21px;
	}
	.pd-volume {
		margin: 8px 0 14px;
		font-size: 13px;
	}
	.pd-lead {
		max-width: none;
		margin-top: 18px;
		font-size: 13px;
		text-align: left;
	}

	.pd-recommend {
		margin-top: 18px;
		padding: 16px 18px 20px 24px;
		text-align: left;
	}
	.pd-recommend__title {
		font-size: 17px;
	}
	.pd-recommend__list li {
		padding-left: 28px;
		font-size: 13px;
	}
	.pd-recommend__list li::before {
		width: 19px;
		height: 19px;
	}

	.pd-price {
		margin-top: 20px;
		text-align: left;
	}
	.pd-price__row {
		gap: 10px;
	}
	.pd-price__value {
		font-size: 28px;
	}
	.pd-price__tax {
		font-size: 16px;
	}
	.pd-price__before {
		font-size: 20px;
	}
	.pd-price--sub .pd-price__row {
		padding-right: 96px;
	}
	.pd-off {
		bottom: 56px;
		width: 84px;
		height: 84px;
	}
	.pd-off__prefix {
		font-size: 15px;
	}
	.pd-off__body {
		font-size: 24px;
	}
	.pd-buy {
		width: 100%;
		max-width: 320px;
		height: 47px;
		margin-top: 12px;
		font-size: 16px;
	}

	.pd-section {
		margin-top: 64px;
	}
	.pd-section__title {
		padding-bottom: 14px;
		font-size: 21px;
	}

	.pd-feature-lead {
		margin-top: 18px;
		font-size: 13px;
	}
	.pd-points {
		margin-top: 26px;
		margin-inline: -20px;
		padding: 30px 20px;
		border-radius: 0;
	}
	.pd-point {
		display: block;
	}
	.pd-point + .pd-point {
		margin-top: 40px;
	}
	.pd-point__title {
		font-size: 19px;
	}
	.pd-point__visual {
		width: auto;
		margin-top: 16px;
	}
	.pd-point__visual img {
		width: 100%;
		height: 200px;
	}
	.pd-point__text {
		margin-top: 16px;
		font-size: 13px;
	}

	.pd-table-wrap {
		margin-top: 24px;
	}
	.pd-table {
		width: 100%;
		min-width: 335px;
		font-size: 12px;
	}
	.pd-table th,
	.pd-table td {
		height: 48px;
		padding: 4px 2px;
	}
	.pd-feeding-note {
		margin-top: 24px;
		font-size: 13px;
	}

	.pd-qa {
		margin-top: 26px;
	}
	.pd-qa__item + .pd-qa__item {
		margin-top: 24px;
	}
	.pd-qa__q {
		min-height: 60px;
		padding: 10px 13px;
		font-size: 14px;
		letter-spacing: 0.08em;
	}
	.pd-qa__a {
		margin-top: 12px;
		padding: 0 8px;
		font-size: 13px;
	}

	.pd-ingredients {
		margin-top: 24px;
		font-size: 13px;
	}
}