/*
* Product Preview Page
* 仅作用于 .pp 根 class 下的静态排版与配色
*/

/* 主题变量
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.pp {
	--pp-text: #1a1a1a;
	--pp-muted: #5c5f66;
	--pp-accent: #2457F5;
	--pp-accent-text: #ffffff;
	--pp-surface: #eaf0fa;
	--pp-card: #fbfcff;
	--pp-border: #e3e5ea;
	--pp-media-bg: #e8edf6;

	color: var(--pp-text);
	font-family: "Open Sans", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

body.pp-page {
	min-height: 100vh;
	background-color: #f3f6fb;
	background-image: radial-gradient(ellipse at 50% 0, #e6edfa 0, transparent 55%);
}

:root.theme-dark body.pp-page {
	background-color: #111821;
	background-image: radial-gradient(ellipse at 50% 0, #1b2839 0, transparent 55%);
}

:root.theme-dark .pp {
	--pp-text: #f2f2f2;
	--pp-muted: #a6a9b0;
	--pp-accent: #4899F7;
	--pp-accent-text: #0b1220;
	--pp-surface: #1b2635;
	--pp-card: #1b222c;
	--pp-border: #2e3036;
	--pp-media-bg: #18212d;
}

@media (prefers-color-scheme: dark) {
	:root.theme-auto .pp {
		--pp-text: #f2f2f2;
		--pp-muted: #a6a9b0;
		--pp-accent: #4899F7;
		--pp-accent-text: #0b1220;
		--pp-surface: #1a1b1e;
		--pp-card: #1e1f23;
		--pp-border: #2e3036;
		--pp-media-bg: #18191c;
	}
	:root.theme-auto body.pp-page {
		background-color: #111821;
		background-image: radial-gradient(ellipse at 50% 0, #1b2839 0, transparent 55%);
	}
}

/* 容器
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.pp-container {
	width: 100%;
	min-height: calc(100dvh - 48px);
	max-width: 580px;
	margin: 0 auto;
	padding: 1.5rem 28px 2.5rem;
	box-sizing: border-box;
	background: var(--pp-card);
	border: 1px solid var(--pp-border);
	border-radius: 24px;
	box-shadow: 0 12px 40px rgba(25, 42, 81, .08);
}

body.pp-page .pp { padding: 24px 16px; }

/* 标题区
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.pp-header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.pp-title {
	margin: 0 auto var(--spacing-s);
	max-width: 18em;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--pp-text);
	hyphens: manual;
	overflow-wrap: anywhere;
}

.pp-intro {
	margin: 0 auto var(--spacing-s);
	max-width: 34em;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--pp-muted);
	overflow-wrap: anywhere;
}

.pp-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--pp-muted);
}

.pp-meta li {
	margin: 0;
}

.pp-meta li + li::before {
	content: "·";
	margin: 0 0.5rem;
	color: var(--pp-border);
}

/* 媒体区
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.pp-media {
	margin: 0 0 1.5rem;
}

.pp-video-pause {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: clamp(64px, 12vw, 88px);
	height: clamp(64px, 12vw, 88px);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.42);
	pointer-events: none;
}
.pp-video-pause::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 28px solid #fff;
}
.pp-video-pause[hidden] { display: none; }

.pp-media-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-m);
	box-sizing: border-box;
	background: var(--pp-media-bg);
	border: 1px solid var(--pp-border);
	border-radius: 0.75rem;
	overflow: hidden;
}

.pp-media-frame img,
.pp-media-frame video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;                  /* 完整显示，不裁切 */
	border-radius: 0.375rem;
}

.pp-media-frame .pp-slide[hidden] {
	display: none;
}

.pp-media-frame .pp-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.pp-media-frame img.pp-slide {
	transition: opacity var(--pp-fade-duration, 1500ms) ease;
	transition-duration: var(--pp-fade-duration, 1500ms) !important;
}

.pp-media-frame .pp-slide.is-active {
	opacity: 1;
}

.pp-link-details {
	display: flex;
	align-items: center;
	gap: var(--spacing-s);
	min-width: 0;
}

.pp-link-thumb {
	width: 4rem;
	height: 4rem;
	flex: 0 0 4rem;
	object-fit: cover;
	border-radius: 0.5rem;
	background: var(--pp-media-bg);
}

.pp-media-error {
	font-size: 0.875rem;
	color: var(--pp-muted);
	text-align: center;
}

.pp-media-error:not([hidden]) {
	margin: var(--spacing-s) 0 0;
}

.pp-media-caption {
	margin-top: var(--spacing-xs);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pp-muted);
	text-align: left;
	overflow-wrap: anywhere;
}

/* 链接区（覆盖全局 section / ul / li）
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.pp section.pp-links {
	margin: 0;
	text-align: left;
}

.pp section.pp-links + section.pp-links {
	margin-top: 2rem;
}

.pp-section-title {
	margin: 0 0 1rem;
	font-size: 1rem;
	text-align: center;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pp-text);
}

.pp-section-note {
	margin: 0 0 var(--spacing-m);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pp-muted);
}

.pp ul.pp-link-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp ul.pp-link-list > li.pp-link-item {
	display: block;
	margin: 0;
	padding: 0;
}

/* 按钮（覆盖全局 300px 宽度与底部外边距） */
.pp .button.pp-button {
	--button-background: transparent;
	--button-text: var(--pp-accent);
	--button-border: 1.5px solid var(--pp-accent);
	width: 100%;
	min-height: 64px;
	position: relative;
	padding: 12px 64px;
	border-radius: 32px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
	hyphens: manual;
}

.pp .button.pp-button--primary {
	--button-background: var(--pp-accent);
	--button-text: var(--pp-accent-text);
	--button-border: 1.5px solid var(--pp-accent);
}

/* Built-in destination styles. They use controlled classes from the shared
   resolver and keep primary emphasis independent from the destination color. */
.pp .button.pp-button.pp-button--platform-booth { --button-background: #fc4d50; --button-text: #ffffff; --button-border: 1.5px solid #fc4d50; }
.pp .button.pp-button.pp-button--platform-dlsite { --button-background: #fff2f0; --button-text: #8c302c; --button-border: 1.5px solid #e7aaa4; }
.pp .button.pp-button.pp-button--platform-gumroad { --button-background: #fff0ed; --button-text: #9b3628; --button-border: 1.5px solid #e9aaa0; }
.pp .button.pp-button.pp-button--platform-itchio { --button-background: #fff0ed; --button-text: #a52d24; --button-border: 1.5px solid #e6a39d; }
.pp .button.pp-button.pp-button--platform-ko-fi { --button-background: #fff0f0; --button-text: #9b1c25; --button-border: 1.5px solid #e5a0a5; }
.pp .button.pp-button.pp-button--platform-patreon { --button-background: #fff1ed; --button-text: #993322; --button-border: 1.5px solid #e5a698; }
.pp .button.pp-button.pp-button--platform-amazon { --button-background: #fff6e8; --button-text: #634214; --button-border: 1.5px solid #dfbb7b; }

.pp .button.pp-button.pp-button--platform-booth.pp-button--primary { --button-border: 2px solid #fc4d50; }
.pp .button.pp-button.pp-button--platform-dlsite.pp-button--primary { --button-border: 2px solid #8c302c; }
.pp .button.pp-button.pp-button--platform-gumroad.pp-button--primary { --button-border: 2px solid #9b3628; }
.pp .button.pp-button.pp-button--platform-itchio.pp-button--primary { --button-border: 2px solid #a52d24; }
.pp .button.pp-button.pp-button--platform-ko-fi.pp-button--primary { --button-border: 2px solid #9b1c25; }
.pp .button.pp-button.pp-button--platform-patreon.pp-button--primary { --button-border: 2px solid #993322; }
.pp .button.pp-button.pp-button--platform-amazon.pp-button--primary { --button-border: 2px solid #634214; }

.pp-link-icon {
	width: 28px;
	height: 28px;
	margin: 0;
	object-fit: contain;
}

.pp .pp-button > .pp-link-icon,
.pp .pp-button > .pp-link-thumb {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.pp .pp-button > .pp-link-icon { left: 18px; }
.pp .pp-button > .pp-link-thumb { width: 48px; height: 48px; border-radius: 24px; }
.pp-button-content { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.pp-button-title { font-size: 18px; line-height: 1.3; font-weight: 700; }
.pp-button-description { font-size: 12px; line-height: 1.45; font-weight: 400; opacity: .85; }
.pp-button-title, .pp-button-description { overflow-wrap: anywhere; }

/* The global image rule uses inline-block; keep broken optional icons absent. */
.pp .pp-link-icon[hidden] {
	display: none;
}

/* 静态外观：取消 brands.css 的过渡与悬停位移 */
.pp .button.pp-button,
.pp .button.pp-button:hover {
	transition: none;
	transform: none;
	filter: none;
	color: var(--button-text);
}

.pp .button.pp-button:focus-visible {
	outline: 3px solid var(--pp-accent);
	outline-offset: 3px;
}


.pp-link-desc {
	min-width: 0;
}

.pp-link-label {
	margin: 0 0 0.125rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--pp-text);
	overflow-wrap: anywhere;
}

.pp-link-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--pp-muted);
	overflow-wrap: anywhere;
}

/* 页脚
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 窄屏
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 34.375rem) {
	body.pp-page .pp { padding: 12px 8px; }
	.pp-container {
		min-height: calc(100dvh - 24px);
		padding: 1rem 16px 2rem;
	}

	.pp-title {
		font-size: 1.75rem;
	}

	.pp-intro {
		font-size: 1rem;
	}

	.pp-media {
		margin-bottom: var(--spacing-l);
	}

	.pp-media-frame {
		aspect-ratio: 4 / 3;
		padding: var(--spacing-s);
		border-radius: 0.625rem;
	}

	.pp-section-title {
		font-size: 1rem;
	}

	.pp .button.pp-button {
		width: 100%;
	}
	.pp-button-title { font-size: 16px; }

	.pp ul.pp-link-list > li.pp-link-item {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.pp-link-desc {
		padding: 0 0.25rem;
	}

	.pp-link-details {
		align-items: flex-start;
	}

}

.pp-catalog-nav {
  margin-bottom: 1rem;
  text-align: left;
  font-size: .8125rem;
}
.pp .pp-catalog-nav a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  color: var(--pp-muted);
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
}
.pp .pp-catalog-nav a::before {
  content: '←';
  font-size: 1rem;
}
.pp .pp-catalog-nav a:hover {
  color: var(--pp-accent);
  border-color: var(--pp-accent);
}
.pp .pp-catalog-nav a:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
}

.pp .button.pp-button.pp-button--platform-unifans { --button-background: #413af7; --button-text: #ffffff; --button-border: 1.5px solid #413af7; }
.pp .button.pp-button.pp-button--platform-unifans.pp-button--primary { --button-border: 2px solid #413af7; }

.pp .button.pp-button.pp-button--platform-pixiv { --button-background: #4095f4; --button-text: #ffffff; --button-border: 1.5px solid #4095f4; }
.pp .button.pp-button.pp-button--platform-pixiv.pp-button--primary { --button-border: 2px solid #4095f4; }